Design system
The zer0-mistakes design system, live — tokens, foundation specimens, component twins, and the Claude Design round-trip that keeps them in lockstep with the theme.
Table of Contents
One visual contract, stated once. The theme’s --zer0-* tokens compile into every page of this site, mirror to a Claude Design project for design work, and publish here as live, linkable CSS — kept in lockstep by a CI parity check.
Use the tokens anywhere
The design system ships as one plain-CSS entry point. Link it from any prototype, mockup, or page — no Bootstrap, no build step:
<link rel="stylesheet" href="https://zer0-mistakes.com/_design-system/styles.css">
<div style="color: var(--zer0-color-primary); border-radius: var(--zer0-radius-xl);">…</div>
Every token file is also individually addressable — colors, typography, spacing, radius, breakpoints, shadows, motion, layers, skins.
Foundations, live
Each specimen below is the actual design-system card, rendered against the published tokens — not a screenshot.
Components
The theme’s signature patterns exist twice on purpose: as the Liquid + Sass that renders this site, and as React twins for design-time work in Claude Design. The twins render interactively in the Claude Design project (the component bundle is compiled by the Design app); their sources are published here.
| Component | Theme source | Design spec |
|---|---|---|
| Button | cta-button.html + Bootstrap .btn |
core/Button |
| Badge | post-type-badge.html + Bootstrap .badge |
core/Badge |
| FAB stack | back-to-top / chat / TOC / graph buttons | core/Fab |
| Card | .card border-0 shadow-sm pattern |
surfaces/Card |
| Feature card | landing feature cards | surfaces/FeatureCard |
| Post card | post-card.html |
surfaces/PostCard |
| Callout | callout.html |
feedback/Callout |
| Skeleton | _skeleton.scss shimmer |
feedback/Skeleton |
| Input | Bootstrap form controls + focus ring | forms/Input |
Every spec ships a .d.ts type surface and a .prompt.md usage prompt alongside the .jsx — swap the extension on any link above.
Page designs
Every screen of this theme — the landing page, all 24 layouts, the navigation framework, news, search, the settings offcanvas — is also recreated as a browsable design canvas built on these tokens:
- zer0-mistakes Theme — page canvas (Claude Design presentation)
- The canvas maps every screen back to its repo files, so design review and implementation always point at the same source.
How it stays honest
_sass/tokens/in the theme repo is the single source of truth;/_design-system/is its published mirror.scripts/design-system-check.rbruns in CI and fails when the two drift — token names and resolved values.- The full contract lives in
_design-system/SYNC.md; design guide in_design-system/readme.md.
Want the interactive component gallery with every skin applied? See the theme preview.