Design token
Color
Color tokens are the named entries in your palette — brand, background, label, the tint ramp — each a single value the whole product references instead of repeating raw hex codes. When color lives in tokens, changing the brand is one edit; when it lives in scattered literals, it is a find-and-replace you will get wrong.
How Windcraft owns it
Windcraft holds your color tokens as the source and generates them into every output your code reads. Your AI tools fetch them over MCP as they write, so generation uses the real values rather than guessing a plausible blue, and the static analyzer flags any raw color that slipped past the palette.
Generated into
- Tailwind config
- CSS variables
- React Native theme
Enforced by
no-hardcoded-color — Flags hex, rgb()/rgba(), hsl(), and CSS named colors in className, style, or theme files — pushing every color back to a token.
Example
On-token vs off-token color
// on system — reads a token
<div className="bg-primary text-foreground" />
// flagged by no-hardcoded-color
<div style={{ color: "#ff0000" }} />FAQ
- How do my AI tools get the colors?
- Over MCP. The get_design_tokens tool returns your color tokens (filterable by category), so a connected AI tool reads the exact values as it generates instead of approximating them.
- What counts as a hard-coded color?
- Hex, rgb()/rgba(), hsl(), and CSS named colors. transparent, currentColor, and inherit are allowed. Everything else is expected to come from a token, and the analyzer flags what does not.
- Do the colors work on mobile too?
- Yes. The same color tokens generate the React Native theme alongside the web outputs, so a brand change updates web and mobile from one source.