Design tokens
Turn visual judgment into validated, portable rules for color, type, spacing, imagery, and contrast.
Which design decisions must remain consistent across tools and code?
A narrow job with a visible boundary
Use it before UI implementation or when a visual system is scattered across files and individual memory.
Input
A confirmed brand direction or an existing token set and the project-specific overrides it needs.
Outputs
- Validated DTCG token files
- Compiled CSS variables
- DESIGN.md with provenance and contrast findings
Boundary
Tokens record decisions. They do not choose a brand, silently repair unmeasured colors, or prove usability.
Invocation
humane:design-tokens
See the decision change
Surface, text, accent, rule, and on-accent roles are named, validated, and compiled. Every value keeps its source and purpose.
A palette becomes a shared semantic vocabulary.
1 / 2- Loose values
Use dark gray, warm white, and red.
Surface, text, accent, rule, and on-accent roles are named, validated, and compiled. Every value keeps its source and purpose.
- Contrast conflict
Muted text looks fine on paper.
The text/background role pair is measured with WCAG ratio and APCA. Any fix changes lightness while preserving the intended hue.
Run the skill by name
Install the Humane pack once, then name this skill when the task reaches its boundary.
humane:design-tokens