N-Dimensional Token Matrix
7 dimensions · 25 tokens · every axis is live
BalancedIndigoLayeredComfortableComfortableSmoothPressed
N Dimensions
◉Color
Indigo
SlateBlueTealIndigoCrimsonForest
⌒Radius
DefaultBalanced
NoneMinimalSubtleDefaultRoundedPill
◫Shadow
MediumLayered
FlatSoftDefaultMediumDeepFloating
TTypography
GenerousComfortable
CompactTightDefaultGenerousOpenDisplay
↔Spacing
ComfortableComfortable
Ultra-compactCompactDefaultComfortableGenerousSpacious
▷Motion
DefaultSmooth
NoneInstantFastDefaultDeliberateCinematic
◈State
ActivePressed
DefaultHoverFocusActiveLoadingDisabled
Tokens per dimension
Color
4
Radius
5
Shadow
4
Typography
6
Spacing
5
Motion
2
State
4
Button
--btn-bg
◉◈
oklch(50% 0.18 280)
Brand CTA background. Color × State = visual identity + interaction
--btn-radius
⌒
8px
Corner personality. Radius alone defines 'clinical vs friendly'
--btn-shadow
◫◈
0 4px 10px rgba(0,0,0,.09)
Micro-elevation. Shadow × State changes on interaction
--btn-font-size
T
14px
Label size comes from the typography label role
--btn-px
↔
16px
Horizontal padding — spacing inset semantic
--btn-transition
▷
all 120ms cubic-bezier(0,0,.2,1)
Hover animation = motion-hover semantic
Input
--input-border
◉◈
#E2DDD6
Default border is neutral. Focus state injects brand color
--input-radius
⌒
8px
Shares r-interactive with Button — same radius family
--input-height
↔T
49px
Height = vertical pad × 2 + font size. Both dims combine
--input-font-size
T
17px
Body text role — 16px WCAG recommended minimum
Card
--card-shadow
◫
0 4px 10px rgba(0,0,0,.09)
Card elevation lives at elev-2. Pure shadow dimension
--card-radius
⌒
12px
Container radius — always larger than interactive
--card-padding
↔
24px
inset-md semantic — same base as btn-px but 1.5×
Badge
--badge-radius
⌒
9999px
Always pill — but pill value itself is part of the radius dim
--badge-font-size
T
12px
text-badge role = label-size minus 2. Inherits scale
--badge-bg
◉
oklch(95% 0.05 280)
Success/status background = brand hue at 95% lightness, low chroma
Modal
--modal-shadow
◫
0 20px 48px rgba(0,0,0,.14)
Highest elevation. Modal shadow is always 2–3 levels above card
--modal-radius
⌒
16px
Overlay radius — always larger than container
--modal-transition
▷
transform 280ms cubic-bezier(0,0,.2,1), o…
Context shift needs slowest motion — motion-overlay semantic
Overlay
--dropdown-shadow
◫
0 8px 24px rgba(0,0,0,.12)
Sits between card and modal elevation
System
--focus-ring
◉◈
0 0 0 2px white, 0 0 0 4px oklch(50% 0.18…
Universal focus ring = brand color. Both Color and State dims
--text-label
T
14px / 500 / tracking 0.01em
Label role bundles size + weight + tracking from typography dim
--text-body
T
17px / 400 / normal
Body role is always weight 400 — size shifts with the dim
--inset-md
↔
16px
Default inset semantic. Used by button, input, card padding
--gap-sm
↔
12px
Small gap between elements — icon↔label, list items
Live Component
Patient Summary
Last updated 2m ago
Stable
Patient ID
74 bpm
Heart Rate
120/80
Blood Pressure
98%
SpO₂
BalancedIndigoLayeredComfortableComfortableSmoothPressed