Foundations

Typography

A typography scale creates clear hierarchies, organizes content, and ensures consistent, predictable typography across the system.

View Figma UI Kit

View GitHub repo

Heading 8XL

Size 40PX / Line Height 120% / Letter Spacing -1.5PX

Heading 7XL

Size 36PX / Line Height 120% / Letter Spacing -1PX

Heading 6XL

Size 32PX / Line Height 120% / Letter Spacing -1PX

Heading 5XL

Size 24PX / Line Height 120% / Letter Spacing -1PX

Heading 4XL

Size 20PX / Line Height 140% / Letter Spacing -1PX

Heading 3XL

Size 17PX / Line Height 140% / Letter Spacing -1PX

Heading 2XL

Size 14PX / Line Height 140% / Letter Spacing -1PX

Body XL

Size 26PX / Line Height 140% / Letter Spacing -1PX

Body LG

Size 22PX / Line Height 140% / Letter Spacing -1PX

Body MD

Size 16PX / Line Height 140% / Letter Spacing -1PX

Body Base

Size 24PX / Line Height 140% / Letter Spacing -0.5PX

Body SM

Size 20PX / Line Height 130% / Letter Spacing -0.5PX

Body XS

Size 12PX / Line Height 130% / Letter Spacing -0.5PX

NativeWind Config

fontSize: {
  xs: ['12px', { lineHeight: '16px' }],
  sm: ['14px', { lineHeight: '20px' }],
  base: ['15px', { lineHeight: '20px' }],
  md: ['16px', { lineHeight: '23px' }],
  lg: ['22px', { lineHeight: '28px' }],
  xl: ['26px', { lineHeight: '28px' }],
  '2xl': ['15px', { lineHeight: '15px' }],
  '3xl': ['17px', { lineHeight: '36px' }],
  '4xl': ['20px', { lineHeight: '45px' }],
  '5xl': ['24px', { lineHeight: '45px' }],
  '6xl': ['32px', { lineHeight: '45px' }],
  '7xl': ['36px', { lineHeight: '45px' }],
  '8xl': ['40px', { lineHeight: '45px' }],
},

Shadow

Array Card