Foundations

Spacing

Consistent spacing creates visually appealing, intuitive interfaces by   ensuring organised UI components, enhancing readability and navigation.

View Figma UI Kit

View GitHub repo

Design Tokens

Value

None – 0

XS - 4

SM - 8

MD - 12

LG - 24

XL - 32

XXL - 40

XXXL - 64

FULL - 999

Token

var(--border-width-0)

var(--radius-xs)

var(--radius-sm)

var(--radius-md)

var(--radius-lg)

var(--radius-xl)

var(--radius-2xl)

var(--radius-3xl)

var(--radius-full)

NativeWind Config

spacing: {
  0: '0px',      // NONE - 0
  1: '4px',      // XXS - 4
  2: '8px',      // XS - 8
  3: '12px',     // SM - 12
  4: '16px',     // MD - 16
  6: '24px',     // LG - 24
  8: '32px',     // XL - 32
  10: '40px',    // XXL - 40
  12: '48px',    // XXXL - 48
  16: '64px',    // XXXXL - 64
  'none': 'var(--space-none)',
  'xxxs': 'var(--space-xxxs)',
  'xxs': 'var(--space-xxs)',
  'xs': 'var(--space-xs)',
  'sm': 'var(--space-sm)',
  'md': 'var(--space-md)',
  'lg': 'var(--space-lg)',
  'xl': 'var(--space-xl)',
  'xxl': 'var(--space-xxl)',
  'xxxl': 'var(--space-xxxl)',
  'xxxxl': 'var(--space-xxxxl)',
},

Shadow

Typography