What's in Caddy
Three layers — foundations, components, and patterns — built from a single token system.
Design tokens & visual language
The primitive and semantic token layer. Every colour, size, radius, shadow, and type decision in one place.
UI components & variants
Interactive components with every variant, state, and prop documented with implementation specs.
Composition & layout patterns
Reusable page layouts, screen compositions, and interaction patterns that assemble from the component layer.
Machine-readable
Built for tooling, not just humans
Every docs page includes a <script type="application/json"> block containing all tokens on that page with fully resolved values. Fetch any page to extract token data and generate Chakra UI themes, Tailwind configs, or style dictionaries — no scraping required.
// Extract from any page const el = document.getElementById('page-tokens'); const tokens = JSON.parse(el.textContent); tokens.tokens.semantic.border['--border-neutral']; // → { value: "rgba(8,3,0,0.12)", type: "color", // primitive: "--color-dark-tint" }
Product — Switzer
Clean, geometric,
considered.
Editorial — Special Gothic
ON THE GREEN.