Specimen No. 04 · v2 · Complete

Theme Orchestrator

Contrast-gated palette studio. Pick a role from the panel; wedges on the wheel that would fail the role's WCAG contrast rule dim out so you can't design an unusable combination. Day and night palettes are edited independently via the mode toggle. Save drafts, download the exported .css, or add custom-alias tokens for downstream use.

Palette wheel

Choose a role, then pick a wedge.

Neutrals

Typography

Ten curated web fonts, deliberately sidestepping the AI-default look. Each selection loads lazily from /fonts/ — the sample updates as soon as the browser has the file.

16px
1.25
1.55
1.15
-0.02em

Featured

Design decisions land here.

Ten curated web fonts, deliberately chosen to avoid the AI-default look. Sans, serif, variable and static — each font loads lazily from /fonts/ the moment you pick it from the dropdown.

The quick brown fox jumps over the lazy dog. Typography carries meaning as much as colour does — line-height and tracking shape reading rhythm; size scale drives visual hierarchy; weight distinguishes voice.

Muted supporting text · caption

File management

Name your palette, save it as a draft, download the exported .css or load a previously saved theme. Custom-alias tokens are named colours that appear in the export only — they don't affect the wheel or sample.

Anonymous: “Save & download” delivers the .css but nothing persists. Sign in to save drafts.

Saved themes

Sign in to see your saved themes.

No saved themes yet.

Custom aliases

Named colour tokens for downstream use (e.g. --brand-primary). Appear in the exported CSS but not on the wheel or the type sample.

No custom aliases yet.

Live preview

Sample UI painted with the current palette and typography. The toggle here previews day or night independently — editing mode stays where it is.

Case study

Systems that read as considered.

Contrast-gated palette, deliberate typography, and unified notification grammar. This preview repaints instantly as you edit — nothing here is decorative.

Feature

Real-time contrast gate

Wedges dim on the wheel when they would fail the active role's WCAG target, so an unusable combination is unreachable by design.

Learn more →

We reply within one working day.

Success. Draft saved to your browser.
Warning. Muted text sits just above the AA threshold on this pairing.
Error. Accent-on-background falls below the 3:1 UI minimum.

The quick brown fox jumps over the lazy dog

Reading rhythm depends as much on line-height and tracking as it does on typeface. Body prose stays comfortable to 68 characters wide.

Muted supporting text · 12:22 · 27 July 2026

How to use

The orchestrator generates a .css file you paste into a different project. It never modifies this site's theme — the tool is a workshop, not a control panel.

  1. Pick a role. Click a role in the panel — Background, Body text, Accent and so on. Wedges that would fail the role's WCAG rule dim out on the wheel and neutrals row.
  2. Pick a colour. Click any eligible wedge (or a neutral). The contrast legend updates immediately, and the next unfilled role auto-activates.
  3. Use the harmony helper. Set a base (pick from the wheel or use the current accent), choose a scheme, and the derived swatches try to assign to the active role — disabled swatches fail the gate.
  4. Toggle day / night. Editing mode switches which palette you're working on; each role assignment auto-mirrors into the other mode by inverting lightness, but you can override by switching modes and re-assigning.
  5. Pick your typography. Ten curated web fonts, weight and scale controls, live sample. Fonts load lazily from /fonts/.
  6. Save, download, export. Signed-in visitors save drafts to the browser (keyed to your account). Save & download also delivers a .css file; Export CSS opens a copy-to-clipboard modal. Custom aliases appear in the export only.

Storage key: lr_themes_v2_<user_id>. Nothing here calls out to a network — all saves and exports are local to your browser.