design-tokenslisted
Install: claude install-skill Lukehle/chartroom
# Design tokens
A token system is what stops every page being a fresh set of arbitrary decisions. It is also what
makes theming, printing, and accessibility tractable — you fix a value once instead of hunting
hex codes.
Keep it small. A page needs perhaps 30 tokens, not 300.
---
## Define by role, never by appearance
The most important rule. Name what a token is *for*, not what it looks like.
```css
/* WRONG - the name lies the moment you add a dark theme */
--light-grey: #e5e7eb;
--blue-500: #3b82f6;
/* RIGHT - the role holds in every theme */
--surface: #ffffff;
--surface-raised: #f7f8fa;
--border: #e3e6ea;
--ink: #14161a; /* primary text */
--ink-muted: #5b6472; /* secondary text */
--ink-subtle: #98a2b3; /* tertiary, ticks */
--accent: #2f5fd8;
--accent-ink: #ffffff; /* text ON accent */
```
`--ink-muted` still means "secondary text" in dark mode. `--light-grey` becomes a lie.
---
## The full set
```css
:root {
/* surfaces + text */
--surface: #fff; --surface-raised: #f7f8fa; --surface-sunken: #eef1f5;
--border: #e3e6ea; --border-strong: #c8cdd6;
--ink: #14161a; --ink-muted: #5b6472; --ink-subtle: #98a2b3;
/* accent + semantics */
--accent: #2f5fd8; --accent-ink: #fff; --accent-wash: #eaf0fd;
--positive: #1f7a4d; --negative: #b3261e; --warning: #9a6700;
--positive-wash: #e8f4ee; --negative-wash: #fbeceb;
/* spacing */
--space-1: 4px; --space-2: 8px; --space-3: 12