Design token
Radius
Radius tokens define your corner-radius scale — the handful of rounding values your surfaces use. Mismatched radii are a subtle but pervasive form of drift: a card rounded one way, a button inside it another, and the whole thing reads as slightly unresolved.
How Windcraft owns it
Windcraft owns the radius scale and generates it into your Tailwind config and CSS variables. AI tools read it over MCP, and the analyzer flags subtrees that mix distinct radii where they should agree.
Generated into
- Tailwind config
- CSS variables
- React Native theme
Enforced by
consistent-radius — Flags multiple distinct radii inside a Card / Container subtree — pick one radius scale.
Example
Consistent vs mixed radii
// one radius scale
<Card className="rounded-lg">
<Button className="rounded-lg" />
</Card>
// flagged by consistent-radius — mixed radii in one subtree
<Card className="rounded-lg">
<Button className="rounded-sm" />
</Card>FAQ
- What does consistent-radius actually check?
- It flags multiple distinct radius values within a Card or Container subtree, where mixing them looks unintentional. The fix is to settle on one radius from your scale.
- How do AI tools know my radii?
- get_design_tokens returns the radius scale over MCP, so generated components round to your defined values instead of arbitrary ones.
- Is borderRadius the same category?
- Yes — radius is the category name, and it maps to your border-radius values in the generated Tailwind config and CSS variables.