Design Language System
Foundations · 2026
Primitive & semantic tokens — sourced from Primitives.json + Semantic.json
Note: This page is for demo only — a curated subset of variables across the two collections, not a full design-system token reference.
Color
Color Primitives
Primitive palette extracted from Primitives.json. Semantic role mappings from Semantic.json.
Blue Scale
Blue-100
#E4EAF4
Solid/Focus-Fill, Outline/Focus-Fill
Blue-200
#BDC9DD
Inverted Active
Blue-300
#90A5C3
Focus Ring
Blue-400
#5A84BC
Blue-500
#2F71D4
Active / Pressed
Blue-600
#2A60B2
Blue-700
#255090
Hover
Blue-800
#1C3E70
Blue-900
#142D51
Default (Navy)
Neutral Scale
Neutral-100
#FBFBFB
Neutral-200
#EAEAEA
Neutral-300
#C5C5C5
Disabled BG / Border
Neutral-400
#9B9B9B
Disabled Text
Neutral-500
#7C7C7C
Neutral-600
#686868
Neutral-700
#4A4A4A
Neutral-800
#333333
Neutral-900
#181818
Brand & Feedback
Navy
#142D51
Color/Navy
Maroon
#8E2231
Color/Maroon
Success
#24882D
Color/Success
Error
#C02321
Color/Error
Typography
Type Scale
Font: Proxima Nova · Weights: Regular 400, Medium 500, Semibold 600
Headers
Body Text
Label Scale
Used in product card titles, prices, badges, and UI labels throughout.
Spacing
Spacing Scale
14-step scale derived from Scale/* primitive tokens. Base unit: 4px.
Variables
Token Reference (Figma view)
Mirrors the Figma Variables panel — values pulled from the Brand 1 mode of the Multi-brands test file. Click a Collection or Group in the sidebar to filter the table.
Semantic tokens reference primitive variables (alias).
Collections
Groups