Frontend Design System Tokens
Use this skill when design choices need to scale across components, pages, or
applications.
Token Architecture
Use three layers:
- Primitive tokens: raw values such as color ramps, spacing steps, font sizes.
- Semantic tokens: purpose aliases such as background, foreground, primary, muted.
- Component tokens: button, card, input, table, nav, chart, and dialog values.
For product or UI color, use semantic tokens rather than direct academic
palette ids. Scientific palettes from palette/ may be referenced only after
mapping them into chart/data-visualization tokens with clear roles.
Required Token Groups
- Color: background, foreground, muted, border, primary, secondary, accent, danger, success, warning.
- Typography: display, body, mono, weights, line heights, tracking.
- Spacing: page, section, stack, inline, control, grid gap.
- Radius: control, card, modal, media.
- Shadow/elevation: use sparingly and consistently.
- Motion: duration, easing, stagger, reduced-motion alternative.
- State: hover, focus, active, disabled, selected, loading, invalid.
Tailwind Guidance
- Prefer CSS variables as source of truth.
- Map Tailwind utilities to semantic tokens.
- Avoid hardcoded hex values inside components unless prototyping.
- Keep dark mode semantic, not a duplicate pile of component overrides.
Component Specs
For shared components, define:
- Anatomy and slots.
- Props and variants.
- Interaction states.
- Accessibility requirements.
- Responsive behavior.
- Token dependencies.
Output
Provide code-ready tokens plus short usage guidance. If an existing design system
is present, extend it instead of replacing it.
References And Utilities
references/token-architecture.md: three-layer token model.references/primitive-tokens.md, semantic-tokens.md, component-tokens.md:
detailed token specs.references/tailwind-integration.md: Tailwind mapping.scripts/generate-tokens.cjs, validate-tokens.cjs, embed-tokens.cjs:
upstream token utilities.templates/design-tokens-starter.json: starter token file.
1---2name: design-system-tokens3description: Create or refine frontend design systems: primitive, semantic, and component tokens; CSS variables; Tailwind theme config; typography scales; spacing; component states; brand consistency. Use when making reusable UI systems or aligning multiple screens.4---5# Frontend Design System Tokens67Use this skill when design choices need to scale across components, pages, or8applications.910## Token Architecture1112Use three layers:13141. Primitive tokens: raw values such as color ramps, spacing steps, font sizes.152. Semantic tokens: purpose aliases such as background, foreground, primary, muted.163. Component tokens: button, card, input, table, nav, chart, and dialog values.1718For product or UI color, use semantic tokens rather than direct academic19palette ids. Scientific palettes from `palette/` may be referenced only after20mapping them into chart/data-visualization tokens with clear roles.2122## Required Token Groups2324- Color: background, foreground, muted, border, primary, secondary, accent, danger, success, warning.25- Typography: display, body, mono, weights, line heights, tracking.26- Spacing: page, section, stack, inline, control, grid gap.27- Radius: control, card, modal, media.28- Shadow/elevation: use sparingly and consistently.29- Motion: duration, easing, stagger, reduced-motion alternative.30- State: hover, focus, active, disabled, selected, loading, invalid.3132## Tailwind Guidance3334- Prefer CSS variables as source of truth.35- Map Tailwind utilities to semantic tokens.36- Avoid hardcoded hex values inside components unless prototyping.37- Keep dark mode semantic, not a duplicate pile of component overrides.3839## Component Specs4041For shared components, define:4243- Anatomy and slots.44- Props and variants.45- Interaction states.46- Accessibility requirements.47- Responsive behavior.48- Token dependencies.4950## Output5152Provide code-ready tokens plus short usage guidance. If an existing design system53is present, extend it instead of replacing it.5455## References And Utilities5657- `references/token-architecture.md`: three-layer token model.58- `references/primitive-tokens.md`, `semantic-tokens.md`, `component-tokens.md`:59 detailed token specs.60- `references/tailwind-integration.md`: Tailwind mapping.61- `scripts/generate-tokens.cjs`, `validate-tokens.cjs`, `embed-tokens.cjs`:62 upstream token utilities.63- `templates/design-tokens-starter.json`: starter token file.
YuukiAS