Foundations

Shadow

Shadow represents the distance between UI layers, indicating depth along the z-axis to establish visual hierarchy. *Please note, Shadow is only applicable to light mode.

View Figma UI Kit

View GitHub repo

XXS

XXL

NativeWind Config

shadow: {
  'xxs': '0px 2px 2px 0px rgba(0, 0, 0, 0.02)',
  'xs': '0px 2px 4px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px 0px rgba(0, 0, 0, 0.01)',
  'sm': '0px 4px 8px -2px rgba(0, 0, 0, 0.04), 0px 2px 2px -2px rgba(0, 0, 0, 0.02)',
  'md': '0px 12px 16px -4px rgba(0, 0, 0, 0.02), 0px 4px 8px -2px rgba(0, 0, 0, 0.01)',
  'lg': '0px 20px 24px -4px rgba(0, 0, 0, 0.03), 0px 8px 8px -4px rgba(0, 0, 0, 0.02)',
  'xl': '0px 24px 48px -12px rgba(0, 0, 0, 0.05), 0px 4px 8px -12px rgba(0, 0, 0, 0.01)',
  '2xl': '0px 32px 64px -12px rgba(0, 0, 0, 0.05), 0px 8px 8px -12px rgba(0, 0, 0, 0.01)',
  },

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.

Icons

Spacing

Join our Community Forum

Any other questions? Get in touch