Provides foundational CSS design tokens (custom properties) for typography, spacing, colors, borders, z-index, and transitions. Use when setting up a base token system for a web project.
This skill provides a comprehensive set of CSS design tokens (custom properties) to establish a consistent design foundation for web projects. Use this skill when the user requests a base token system or design tokens for their CSS.
Use this skill when the user asks for:
A complete tokens.css file with a comprehensive design token system:
oklch() color space for perceptually uniform colors with light/dark mode variants for surfaces, text, brand, interactive elements, and semantic statesUsers can reference individual tokens using CSS custom property syntax: var(--token-name)
The complete token definitions are located in references/tokens.css within this skill directory. This file contains all the CSS custom property declarations organized by category.
Search the project for common CSS directory names:
css/styles/assets/css/stylesheets/src/css/src/styles/Check directories at multiple levels (root, src/, public/, assets/).
If a CSS directory is found:
Present the discovered location and ask for confirmation:
I found a CSS directory at [path]. Should I add the design tokens to this directory in a file named `tokens.css`?
If you'd like a different location or filename, please specify both.
If no CSS directory is found:
Ask the user directly:
I couldn't find an existing CSS directory in your project. Please specify:
1. The directory path where you'd like the tokens file (I can create it if needed)
2. The filename (e.g., `tokens.css`, `design-tokens.css`)
Once confirmed, write the complete tokens file to the specified location. Use the exact content from references/tokens.css in this skill directory.
After successfully writing the file, inform the user:
✓ Design tokens written to [full-path]
To use these tokens in your project, import this file in your main CSS file or HTML:
In CSS:
@import url('path/to/tokens.css');
In HTML:
<link rel="stylesheet" href="path/to/tokens.css" />
The tokens are now available as CSS custom properties throughout your project (e.g., var(--color-primary), var(--size-16)).
These tokens provide a solid foundation but are meant to be customized for your project:
This is a scaffolding skill - it sets up the initial structure but doesn't handle ongoing modifications.
prefers-color-schemeoklch() color space provides perceptually uniform colors for better accessibility and consistency