Primitive Tokens
The raw values of the system: colors, font sizes, spacing, border radii, and shadows. These tokens are consumed by semantic tokens and should not be used directly in components.
Colors
Blue
$blue-25
#F5F8FD$blue-50
#D7E3F5$blue-100
#A4C0E6$blue-200
#6DA4D8$blue-300
#0071B9$blue-400
#0061A8$blue-500
#004687Pink
$pink-25
#FDF1F7$pink-50
#F7C5DD$pink-100
#F193BD$pink-200
#C24F97$pink-300
#9E1981$pink-400
#88146E$pink-500
#700D5ACyan
$cyan-25
#EFF8F7$cyan-50
#BFE2E0$cyan-100
#52CCC2$cyan-200
#36B3AB$cyan-300
#00A99B$cyan-400
#029286$cyan-500
#03786ERed
$red-25
#FCE6E7$red-50
#F8C1C4$red-100
#F4A79A$red-200
#E94F35$red-300
#E30613$red-400
#C00D0D$red-500
#9C1006Orange
$orange-25
#FFF7E9$orange-50
#FEDEA9$orange-100
#FBBE5E$orange-200
#F7A823$orange-300
#F39200$orange-400
#CE7E00$orange-500
#A76800Green
$green-25
#EBF2D4$green-50
#E4EBB1$green-100
#AECC53$green-200
#8BB31D$green-300
#749719$green-400
#5B7813$green-500
#3E560AGray
$gray-25
#FFFFFF$gray-50
#FAFAFA$gray-100
#F5F5F5$gray-200
#EEEEEE$gray-300
#E0E0E0$gray-400
#BDBDBD$gray-500
#9E9E9E$gray-600
#757575$gray-700
#616161$gray-800
#424242$gray-900
#212121$gray-1000
#1D1D1DFont sizes
| Token | Value | Preview |
|---|---|---|
$funid-font-size-10 | 0.75rem (12px) | The quick brown fox |
$funid-font-size-20 | 0.875rem (15px) | The quick brown fox |
$funid-font-size-30 | 1rem (16px) | The quick brown fox |
$funid-font-size-40 | 1.25rem (20px) | The quick brown fox |
$funid-font-size-50 | 1.5rem (24px) | The quick brown fox |
$funid-font-size-60 | 2rem (32px) | The quick brown fox |
$funid-font-size-70 | 2.5rem (40px) | The quick brown fox |
$funid-font-size-80 | 3rem (48px) | The quick brown fox |
$funid-font-size-90 | 3.5rem (56px) | The quick brown fox |
Spacing
| Token | Value | Preview |
|---|---|---|
$spacing-1 | 0.25rem (4px) | |
$spacing-2 | 0.5rem (8px) | |
$spacing-3 | 0.75rem (12px) | |
$spacing-4 | 1rem (16px) | |
$spacing-5 | 1.25rem (20px) | |
$spacing-6 | 1.5rem (24px) | |
$spacing-8 | 2rem (32px) | |
$spacing-10 | 2.5rem (40px) | |
$spacing-12 | 3rem (48px) | |
$spacing-16 | 4rem (64px) |
Border radii
$border-radius-sm
0.125rem$border-radius-md
0.25rem$border-radius-lg
0.5rem$border-radius-xxl
0.75rem$border-radius-circle
624remShadows
$box-shadow-sm
$box-shadow-md
$box-shadow-lg