Tokens
Primitives, semantic aliases, and component tokens — the foundation every component reads from.
§1
Color palettes
Every palette is a 12-step perceptual scale. Steps 11 and 12 pass WCAG AA against step 1.
purple
1
#fdfcff
2
#f6f2ff
3
#eadeff
4
#dbc9ff
5
#c5adff
6
#ad8cff
7
#8c63ef
8
#6a45d1
9
#483aa0
10
#3d3288
11
#4e3ea0
12
#1b1140
gold
1
#fffef9
2
#fef8e7
3
#fdf1c8
4
#fbe59c
5
#f7d365
6
#ecb53a
7
#d89b1e
8
#b4810f
9
#8a6508
10
#735408
11
#7a5807
12
#332507
slate
1
#fafbfc
2
#f1f3f6
3
#e3e7ee
4
#cfd5df
5
#b6bdc9
6
#98a0ad
7
#7d848f
8
#636874
9
#434852
10
#33373f
11
#3c4049
12
#10131a
emerald
1
#fafdfb
2
#eef8f1
3
#cdecd6
4
#a4dcb4
5
#74c58c
6
#4aa669
7
#2e8550
8
#1f693f
9
#155034
10
#0f3f29
11
#184a30
12
#061a10
indigo
1
#fbfcff
2
#eef1fc
3
#d6ddf7
4
#b6c2ef
5
#8e9fe4
6
#677cd5
7
#4a5ec0
8
#3848a0
9
#2a3884
10
#212b6a
11
#283584
12
#0a0d2a
amber
1
#fffdf9
2
#fff8ea
3
#ffeec3
4
#ffdd8a
5
#ffca4f
6
#f0ae1c
7
#c88d06
8
#9a6d05
9
#76550a
10
#604508
11
#6a4907
12
#2a1d03
rose
1
#fffafb
2
#ffeef2
3
#ffd5e0
4
#ffb3c6
5
#f88aa7
6
#ea6585
7
#d23d66
8
#ac264e
9
#841e3e
10
#6a1732
11
#801f3a
12
#290812
§2
Semantic mapping
Tier 2 aliases that components reference. Brand bindings happen here.
Action
--color-action-primarybrand-primary.9--color-action-primary-hoverbrand-primary.10--color-action-secondarybrand-secondary.9Text
--color-text-defaultslate.12--color-text-mutedslate.11--color-text-subtleslate.10--color-text-inverseslate.1--color-text-linkaction-primary--color-text-on-primaryslate.1Surface
--color-surface-defaultslate.1--color-surface-subtleslate.2--color-surface-raisedslate.1 + elevation--color-surface-inverseslate.12--color-surface-darkslate.12Border
--color-border-defaultslate.6--color-border-strongslate.8--color-border-brandbrand-primary.7--color-border-focusbrand-primary.9Status
--color-successemerald.9--color-infoindigo.9--color-warningamber.9--color-dangerrose.9§3
Spacing scale
Used by every gap, padding, and margin token.
space-10.25remspace-20.5remspace-41remspace-61.5remspace-82remspace-123remspace-164rem§4
Shape scale
Border radius steps the shape preset maps to.
none
sm
md
lg
xl
2xl
3xl
full
§5
Typography scale
Heading sizes from sm through 7xl — independent from semantic level.
smThe quick brown fox
mdThe quick brown fox
lgThe quick brown fox
xlThe quick brown fox
2xlThe quick brown fox
3xlThe quick brown fox
4xlThe quick brown fox
5xlThe quick brown fox
6xlThe quick brown fox
7xlThe quick brown fox
§6
Elevation
Shadow steps used by Card, Popover, Dialog, Toast.
none
raised
floating
overlay
popover
§7
Density
A density axis is not part of the token system yet.
TODO(founder): density scale not yet in tokens
There is no
data-density attribute or density scale in @idinstudio/tokens today. Component padding tokens (for example --card-padding-sm / -lg) exist per-component but are not wired to a single density preset. Add a primitive density axis before building a density toggle — it should not be faked at the showcase layer.