Foundations

Typography

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

View Figma UI Kit

Download Inter Typeface

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' }],
      },

Assets Panel

Each component is listed in the assets panel for easy access. We keep components visible and avoid nesting them in too many subfolders. For complex components, their building blocks are located in the respective sub-components folder.

View further documentation.

Local Styles

Local styles in Figma are available when the Design System is enabled.To apply, Select any of these presets from the Figma Local styles panel.

View further documentation.

Colour modes

You can toggle between light and dark modes by selecting the ‘Mode’ dropdown in the Figma ‘Design’ panel to the right. To apply, select Light or Dark from the Mode dropdown selector.

Spacing

Join our Community Forum

Any other questions? Get in touch