Foundations

Blur

Blur effects create depth and focus by softening backgrounds, emphasizing foreground content.

View Figma UI Kit

View GitHub repo

Design Tokens

Value

None - 0

Small - 8

Medium - 16

Large - 24

Extra Large - 48

Token

var(--blur-xs, 4px)

var(--blur-sm, 8px)

var(--blur-md 16px)

var(--blur-lg 24px)

var(--blur-xl 48px)

NativeWind Config

      blur: {
        'xs': 'calc(var(--blur-xs, 4px) / 2)',
        'sm': 'calc(var(--blur-sm, 8px) / 2)',
        'md': 'calc(var(--blur-md, 16px) / 2)',
        'lg': 'calc(var(--blur-md, 24px) / 2)',
        'xl': 'calc(var(--blur-xl, 48px) / 2)',
      },

Colour System

Border Radius