Design¶

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="{{ '/_design-system/styles.css' | absolute_url }}">
<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.

{% assign ds_cards = "colors-brand.card.html|Brand & primary|240,colors-semantic.card.html|Semantic state|240,colors-surfaces.card.html|Surfaces & ink|260,colors-skins.card.html|Theme skins|260,type-headings.card.html|Display & headings|320,type-body.card.html|Body & weights|230,type-mono.card.html|Monospace & code|220,spacing-scale.card.html|Spacing scale|220,spacing-radii-elevation.card.html|Radii & elevation|240,motion.card.html|Durations & easing|260,layers.card.html|Z-index stack|300,brand-iconography.card.html|Iconography|260" | split: "," %} {% for card in ds_cards %} {% assign parts = card | split: "|" %}

{{ parts[1] }} open

{% endfor %}

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`]({{ '/_design-system/components/core/Button.jsx'
Badge	`post-type-badge.html` + Bootstrap `.badge`	[`core/Badge`]({{ '/_design-system/components/core/Badge.jsx'
FAB stack	back-to-top / chat / TOC / graph buttons	[`core/Fab`]({{ '/_design-system/components/core/Fab.jsx'
Card	`.card border-0 shadow-sm` pattern	[`surfaces/Card`]({{ '/_design-system/components/surfaces/Card.jsx'
Feature card	landing feature cards	[`surfaces/FeatureCard`]({{ '/_design-system/components/surfaces/FeatureCard.jsx'
Post card	`post-card.html`	[`surfaces/PostCard`]({{ '/_design-system/components/surfaces/PostCard.jsx'
Callout	`callout.html`	[`feedback/Callout`]({{ '/_design-system/components/feedback/Callout.jsx'
Skeleton	`_skeleton.scss` shimmer	[`feedback/Skeleton`]({{ '/_design-system/components/feedback/Skeleton.jsx'
Input	Bootstrap form controls + focus ring	[`forms/Input`]({{ '/_design-system/components/forms/Input.jsx'

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.rb runs 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.