← Gallery index

Tokens: color · type · radius · motion

Oracle: tokens.css v0.1 (source of truth) — light theme must be a pure token flip (G9-1)

Semantic colors

Every text pair AA-verified in the Guideline §3. Amber = warnings only; red = destructive/errors only; never notification counts.

background
surface
surface-raised
border
foreground
muted-foreground
primary
primary-solid
primary-tint
selection
success
success-tint
warning
warnings ONLY (DS-4)
warning-tint
danger
destructive/errors only
danger-tint

Brand blue ramp

Anchor: 700 = CCI logo blue #002CA0.

50
100
200
300
400
500
600
700
800
900

Module identity colors (DS-7)

Launcher tiles, dock/launcher icons, breadcrumb chips, widget chips, empty-state accents ONLY. Never on interactive elements.

orange
teal
violet
green
rose
cyan
lime
slate

Type scale (§4)

Inter variable, vendored. Sentence case everywhere; tabular numerals on every numeric column, ID, count, and badge. No sizes outside this scale.

display
24/32 · 600
Page title
title
18/26 · 600
Section and dialog titles
body
14/20 · 400
Default UI text and forms
body-strong
14/20 · 500
Emphasis, table headers, buttons
small
13/18 · 400
Table cells, dense lists
caption
12/16 · 400
Field labels, meta, timestamps
tabular-nums
1,024 · 86 · ORG-0198 · 12,480 ft

Radius scale (§6, LOCKED 8/12/16 + tray 20)

control
8px — buttons, inputs
card
12px — cards, popovers
dialog
16px — dialogs, launcher tiles
tray
20px — floating dock tray
full
pill — badges

Motion tokens (§8, TUNED v1)

Per-surface speeds; spring = something arrives, standard = state change in place. Exits ~0.7×. Reduced motion collapses everything to a 100ms fade. Live demos ride the primitives specimens.

duration-press80mshover lift, press feedback
duration-nav120mspage transitions, list entrances (25ms stagger), tabs, switches
duration-expand160msaccordions, inline expand/collapse
duration-overlay200mspalette, menus, dialogs; toasts at 0.6×
duration-entrance220mslauncher tile entrance (30ms stagger)
duration-surface400msdrawers and large panels only
ease-standardcubic-bezier(0.2, 0, 0, 1)default — state changes in place
ease-springlinear(…) ~5% overshootpalette, presses, toasts, menus
ease-spring-gentlelinear(…) ~2.5%, settles by 65%drawers, large surfaces