css-design-tokens

Design tokens are predefined CSS variables that standardize colors, spacing, typography, and other visual properties across your interface. This Skill provides a complete token system—including color palettes, spacing grids, typography scales, and border radii—that you import as CSS and apply instantly to maintain visual consistency without rebuilding styles for each component.

The Skill defines semantic CSS variables for charts (--chart-primary-blue), status indicators, neutral tones, and primary brand colors, plus surface and shadow tokens. These map high-level design intent to concrete values, so you reference --chart-primary-blue instead of hex codes, making theme updates and multi-color support automatic across dashboards and charts.

Yes. This Skill includes theming support through primary, neutral, and surface token groups defined as CSS variables. Import the tokens file into your project and reference tokens like --space-4 for spacing or --text-base for typography; the entire theme updates when token values change, so all linked components reflect the new design instantly.

Design tokens organize spacing on a 4px grid (--space-4, --space-8, etc.) and typography into multi-level scales, each as a CSS variable. This Skill provides the complete scale definitions and usage examples, so you apply --space-4 for margins and --text-base for font sizes without calculating values manually or losing consistency across pages.

This Skill delivers comprehensive documentation with usage examples for color palettes, spacing tokens, typography scales, border radii, surfaces, and shadows. Each token maps to a specific CSS variable, so developers can reference the docs to find --status-error or --surface-elevated and apply it directly without guessing hex codes or pixel values.