Design token
Typography
Typography tokens cover your font families, the type-size scale, and the weights you actually use. They keep text consistent — one set of sizes and a defined family — instead of a creeping collection of near-identical font sizes and the occasional rogue typeface.
How Windcraft owns it
Windcraft holds your font family, size, and weight tokens together and generates them into your Tailwind config, CSS variables, and React Native theme. AI tools read them over MCP, and the analyzer flags any font-family that is not from your token list.
Generated into
- Tailwind config
- CSS variables
- React Native theme
Enforced by
font-token-only — Flags fontFamily declarations not from the project token list (generic CSS families and var(--…) references are allowed).
Example
Token family vs off-token family
// from your tokens
style={{ fontFamily: "var(--fontFamily-sans)" }}
// flagged by font-token-only
style={{ fontFamily: "Comic Sans" }}FAQ
- Which typography tokens does Windcraft manage?
- Font family, font size, and font weight — grouped together under the typography category that get_design_tokens returns over MCP.
- Are generic families allowed?
- Yes. Generic CSS families and var(--…) references are allowed; the font-token-only rule flags concrete off-token families like a pasted "Comic Sans" that skip your defined typefaces.
- Does this cover mobile fonts?
- The same typography tokens generate the React Native theme alongside the web outputs, so type stays consistent across platforms from one source.