SKILL.md
Generate Color Tokens
Generate accessible color tokens from a single accent color following Dieter Rams' "Less, but better" philosophy.
Usage
- Ask user for the accent color (hex format, e.g.,
#ed8008) - Run:
node .claude/skills/color-tokens/generate.js "#hexcolor" - Review output with user
- Map the values into
src/index.css
Step 4 is a mapping, not a paste. This was written for an earlier version of the site whose palette was a --gray-1 through --gray-10 ramp in src/styles/tokens.css. That file is gone. The site now uses six semantic tokens in src/index.css, and its colours are sampled from the pixel scene rather than derived from an accent, so the generator is a starting point and a contrast checker rather than something to paste wholesale:
| generated | roughly corresponds to |
|---|---|
--gray-1 |
--color-surface |
--gray-2 |
--color-sunken |
--gray-3 |
--color-line |
--gray-7 |
--color-muted |
--gray-9 |
--color-ink |
--accent |
--color-accent |
Whatever comes out has to clear 4.5:1 on its own background in both schemes.
What It Generates
- 10 adaptive grays that harmonize with the accent (warm/cool/neutral)
- Accessible text color for the accent (light or dark based on APCA contrast)
- CSS custom properties ready to paste
- Accessibility contrast checks
Example
node .claude/skills/color-tokens/generate.js "#ed8008"