Foundations

Border Radius

Border radius softens element edges,  giving a modern, approachable look. Rounded corners enhance visual appeal, improve interaction, and create a cohesive, user-friendly interface.

View Figma UI Kit

View GitHub repo

None – 0

XXS – 4px

XS – 8px

SM – 12px

MD – 16px

LG – 24px

XL – 32px

XXL – 40px

XXXL – 64px

FULL – 999px

Design Tokens

Value	Token
None – 0	var(--radius-none)
XS - 4PX	var(--radius-xs)
SM - 8	var(--radius-sm)
MD - 12	var(--radius-md)
LG - 24	var(--radius-lg)
XL - 32	var(--radius-xl)
XXL - 40	var(--radius-2xl)
XXXL - 64	var(--radius-3xl)
FULL - 999	var(--radius-full)

NativeWind Config

      borderRadius: {
        none: '0',
        xs: '4px',
        sm: '8px',
        DEFAULT: '8px',
        md: '12px',
        lg: '24px',
        xl: '32px',
        '2xl': '40px',
        '3xl': '64px',
        full: '999px',
      },

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.

Blur

Border Width

Join our Community Forum

Any other questions? Get in touch