Design token
Spacing
Spacing tokens are your scale of allowed gaps and paddings — the rhythm everything sits on. Without a scale, every component picks its own padding and the layout reads as slightly off everywhere; with one, spacing is a small set of deliberate steps the whole product shares.
How Windcraft owns it
Windcraft owns the spacing scale and generates it into your Tailwind config and CSS variables. AI tools read it over MCP, and the analyzer catches the arbitrary one-offs — a p-[7px] here, an inline 18px there — that quietly break the rhythm.
Generated into
- Tailwind config
- CSS variables
- React Native theme
Enforced by
no-arbitrary-spacing — Flags Tailwind arbitrary values (p-[7px]) and inline styles outside the spacing scale.
Example
On-scale vs arbitrary spacing
// on the scale
<div className="p-4" />
// flagged by no-arbitrary-spacing
<div className="p-[7px]" />FAQ
- Why are arbitrary values a problem?
- A p-[7px] or p-[18px] opts out of your scale entirely. One is invisible; a hundred across a codebase is why spacing never quite lines up. The analyzer flags them so the scale is enforced, not just offered.
- Can I auto-fix off-scale spacing?
- The analyzer reports off-scale values, and npx windcraft check --fix snaps the safe ones to the nearest token. Anything ambiguous is left for you to decide rather than silently rewritten.
- Do AI tools see the scale?
- Yes — get_design_tokens returns the spacing scale over MCP, so generated UI uses your steps instead of inventing pixel values.