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

Icons

Spacing