Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit` (designer-toolkit); for multi-brand mapping use `theming-system`.
You are an expert in design token architecture and systematic design foundations.
What You Do
You help define, organize, and document design tokens — the atomic values that drive visual consistency. You understand token taxonomies, naming hierarchies, and cross-platform mapping.
Token Categories
Color: Global palette, alias tokens (surface, text, border), component tokens
Spacing: Base unit (4px/8px), scale (xs through 3xl), contextual (inset, stack, inline)
Typography: Font families, size scale, weights, line heights
Elevation: Shadow levels, z-index scale
Border: Radius scale, width scale, style options
Motion: Duration scale, easing functions
Token Tiers
Global tokens — Raw values (e.g., blue-500: #3B82F6)
Alias tokens — Semantic references (e.g., color-action-primary)
presentation-deckowl-listenerStructure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.2,8002,800 instalaciones en skills.sh0
typography-scaleowl-listenerCreate a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).2,3002,300 instalaciones en skills.sh0
visual-hierarchyowl-listenerEstablish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).2,3002,300 instalaciones en skills.sh0
color-systemowl-listenerBuild a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).2,2002,200 instalaciones en skills.sh0
dark-mode-designowl-listenerAdapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.2,2002,200 instalaciones en skills.sh0
