Primitives
Base design values that serve as the foundation for tokens. These are raw values like colors, sizes, and spacing.
Colors — Neutral
0
#ffffff
--color-neutral-0
50
#f8fafc
--color-neutral-50
100
#f1f5f9
--color-neutral-100
200
#e7ebf1
--color-neutral-200
300
#d8dce2
--color-neutral-300
400
#aeb3ba
--color-neutral-400
500
#7d838c
--color-neutral-500
600
#5a5f63
--color-neutral-600
700
#333435
--color-neutral-700
800
#1e2022
--color-neutral-800
900
#121314
--color-neutral-900
950
#08090a
--color-neutral-950
1000
#030303
--color-neutral-1000
Colors — Brand
200
#ee684a
--color-brand-200
500
#af2000
--color-brand-500
Colors — Opacity
light base
#eae9fa14
--color-opacity-light-base
light secondary
#eae9fa1f
--color-opacity-light-secondary
dark base
#09090a14
--color-opacity-dark-base
dark secondary
#09090a1f
--color-opacity-dark-secondary
Sizes
12
12px
--size-12
14
14px
--size-14
16
16px
--size-16
18
18px
--size-18
20
20px
--size-20
24
24px
--size-24
32
32px
--size-32
40
40px
--size-40
56
56px
--size-56
display
96px
--size-display
Line Heights
16
16px
--lineHeight-16
24
24px
--lineHeight-24
32
32px
--lineHeight-32
40
40px
--lineHeight-40
56
56px
--lineHeight-56
Font Weights
200
200
--weight-200
400
400
--weight-400
500
500
--weight-500
600
600
--weight-600
Spacing
0
0px
--space-0
4
4px
--space-4
8
8px
--space-8
12
12px
--space-12
16
16px
--space-16
20
20px
--space-20
24
24px
--space-24
32
32px
--space-32
40
40px
--space-40
48
48px
--space-48
56
56px
--space-56
64
64px
--space-64
80
80px
--space-80
96
96px
--space-96
128
128px
--space-128
Border Radius
none
0px
--radius-none
4
4px
--radius-4
8
8px
--radius-8
24
24px
--radius-24
48
48px
--radius-48
pill
999px
--radius-pill
Font Families
primary
'Plus Jakarta Sans', sans-serif
--font-primary
body
'Inter', sans-serif
--font-body
icons
'Material Symbols Outlined', sans-serif
--font-icons
Fade (Opacity Scale)
Opacity values for fade effects. Use these with CSS opacity property.
0
0
--fade-0
10
0.1
--fade-10
20
0.2
--fade-20
30
0.3
--fade-30
40
0.4
--fade-40
50
0.5
--fade-50
60
0.6
--fade-60
70
0.7
--fade-70
80
0.8
--fade-80
90
0.9
--fade-90
100
1
--fade-100