DESIGN TOKENS AS A CONTRACT
One source of truth, two homes
Every colour is a live Figma variable and a CSS custom property carrying the exact
same value. Edit the system in one place and it stays honest in the other — design and code never drift.
Figma · “Color” page (Light mode) — node 99:2078
GROUND
Background#faf9f6
Surface#f1efea
Placeholder#e9e7e3
TEXT
Primary#252525
Secondary#454545
Tertiary#717171
ACCENT — warm coral
Default#ff8282
Hover#f76b6b
Pressed#e85a5a
FEEDBACK
Success#397e59
Error#c23b22
Warning#926a22
css/tokens.css
/* Ground */
--paper: #faf9f6;
--surface: #f1efea;
--placeholder: #e9e7e3;
/* Text */
--primary-type: #252525;
--secondary-type: #454545;
--tertiary-type: #717171;
/* Accent */
--accent: #ff8282;
--accent-hover: #f76b6b;
--accent-pressed: #e85a5a;
/* Feedback */
--success: #397e59;
--error: #c23b22;
--warning: #926a22;