Session summary
0 copies logged
each asset once per day, capped at 120 entries
Local storage
— KB of motif keys
comfortably under the 4 KB guard line
Keyboard map
- Tab move between panels
- Enter activate the focused control
- Esc close an open editor
Copy log
- Nothing logged yet — copies land here when the maker streak is on.
What each panel is for
- Saved themes — token sets you are trying on; nothing leaves the browser.
- Copy log — what you took and when; the CSV export makes it portable.
- Prefs — dismissals and choices under one versioned key.
Theme Studio · design tokens
Edit one token, see the whole catalog
The live token editor behind the scenes of Motif: accent, saturation, radius and mode — with a code diff for every tweak, ten hand-made presets and honest tooling notes.
Token editor
dark · hsl(262 82%)Token diff · what changed
code view// no token changes yet — tweak something above
Every slider movement renders the exact token lines that would change in your CSS — no black-box theme engine. Copy them straight into :root.
Catalog-wide preview
Eight library assets, re-accented live as you move the hue. Base hash → rotated by your offset.
Palette presets · ten hand-made token themes
Radius system
One scale, five uses. The active token is 12px.
Type scale calculator
Modular scale from a base and ratio — rendered live.
Density presets
One component, three token sets. Try each below.
the Motif default rhythm
Token export formats
Same tokens, four targets — switch tabs to see each output regenerate.
/* dark theme · accent 262° 82% · radius-md 12px
sample contract — rename to match your own var conventions */
:root {
color-scheme: dark;
/* tokens edited in Theme Studio */
--accent-hue: 262;
--accent-sat: 82%;
--radius-md: 12px;
/* derived companions */
--accent: hsl(262 82% 62% / 1);
--accent-strong: hsl(262 88% 54% / 1);
--accent-soft: hsl(262 82% 62% / 0.14);
--accent-line: hsl(262 82% 62% / 0.45);
--radius-sm: 7px;
--radius-lg: 18px;
}paste into :root for a hand-rolled theme. Variable names here are a sample contract — Motif's own live tokens live in globals.css; copy these into your own project's theme layer.
Contrast guardrail
WCAG contrast ratios recomputed live for every pair as you edit.
Button label on accent fill
the primary-button case (label at 60% lightness)
Accent swatch on studio panel
the soft-chip / link-text case (swatch at 62% lightness)
AA-large only: worst pair is 3.79:1 — fine for headings, chips and fills, but body-size text on this surface should use the strong accent variant. Thresholds: AA normal 4.5, AA large 3.0.
Theme preview gallery
Three representative pages redrawn from the live tokens — hero, an asset page, pricing.
Colour-blind simulation
See the active theme under colour-vision filters. CSS-filter approximation, not a clinical diagnosis.
The mock pages above re-render through the chosen filter. For real-world checks pair this with the guardrail — filters show hue shifts, the WCAG numbers quantify whether text survives them.
Saved themes & share links
Keep up to eight recipes in this browser; hand a theme to someone as a plain URL.
Nothing saved yet — tune the sliders above and save a recipe.
Why violet, cyan, mint — the default trio, defended
Motif ships dark-first with three original role colours. Here is the reasoning and the numbers behind them.
Violet
Primary accent#8b5cf6 · hsl(258 90% 66%)
At hue 258 it stays unmistakably purple, with enough blue to partner a code-cyan and enough red to feel warm on near-black #06070b. It is the default for buttons, focus rings and selection across the chrome.
Cyan
Secondary accent#22d3ee · hsl(188 86% 53%)
Roughly 70° around the wheel from violet, so it reads as a different signal, not a lighter copy. Kept at 53% lightness it stays luminous on dark surfaces — code accents, keyboard hints, gradient tails.
Mint
Positive semantics#34d399 · hsl(158 64% 52%)
Pushed down to the green lane at 158°, mint is reserved for 'good' meanings — verified badges, passing scores — so a positive verdict never collides with either interactive accent.
The trio is not decorative: it maps to three distinct lanes — act (violet), inform (cyan) and confirm (mint) — so a reader can tell what a colour means before reading the label. Amber and rose complete the semantic set for warnings and errors.
Live numbers
Fingerprints are the per-asset hues derived from each slug — how many assets already sit near each role colour.
Contrast check · real WCAG math
All four default pairs are recomputed from the @theme hex values above — no stored scores.
Theming a real component · Halo Button
Four layers of one component, each bound to a token group. Select a layer to highlight its line.
live sample · dark mode
A sample rendered from the recipe lines — the catalog's live halo-button demo keeps its own prop controls and physics on its page.
Semantic token map
Every role colour in one lane — with live usage counts from the catalog, not stored numbers.
| Token | Role | Means | Usage | How counted |
|---|---|---|---|---|
| --color-accent | Action | buttons, links, focus rings, selection | 39 | assets whose accent fingerprint lands within 24° of violet (258°) |
| --color-accent-2 | Inform | code accents, keyboard hints, diff headers | 30 | assets whose accent fingerprint lands within 24° of cyan (188°) |
| --color-mint | Confirm | verified badges, passing fidelity scores | 40 | prompts with avg fidelity ≥ 90 — the mint score chip |
| --color-amber | Caution | featured prompts, mid-band fidelity scores | 69 | prompts with avg fidelity 85–89 — the amber score chip |
| --color-danger | Danger | failing builds, sub-85 fidelity | 7 | prompts with avg fidelity below 85 — the rose score chip |
Lane counts reuse the per-asset hue fingerprints; score counts reuse the same bands as the prompt cards' fidelity chips — so the numbers on this map match numbers you can verify on the catalog pages.
Motion tokens
Name a duration and an easing, feel them on a real dot, read the token line.
Duration
Easing
--duration-base: 250ms;
--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
Dot travels the track twice (out and back) at the chosen duration and easing.
Preview track
Dot uses the active accent — motion tokens stay theme-independent by design.
Already live in the catalog scenes
Read straight from globals.css. Under prefers-reduced-motion all of them collapse to their end state — these manual previews are the only place they run on demand.
Spacing scale explorer
A 4-px base with every 8-px step reinforced — pick a token, see its ruler and effect.
Live effect · space-4 = 16px
Padding and chip gaps both read 16px above — one token drives rhythm.
Ruler · tick at every step, 0 → 64px
Columns show the step from the previous token — 4s grow to 8s to 16s — so the rhythm is visible, not just the endpoint values. Selected token pinned at its real position on the 0–64px axis.
Iconography token set
Two sliders re-cut the whole set — stroke weight and container corner radius.
The set re-renders live at both slider values — optical consistency, not per-icon tweaking. Stroke uses round caps/joins; the corner token shapes the containers, chips and badges icons sit in.
/* iconography tokens (sample contract) */
--icon-stroke: 1.75px;
--icon-corner: 8px;
--icon-size-sm: 16px; /* inline, rows */
--icon-size-md: 20px; /* default */
--icon-size-lg: 28px; /* empty states, feature */
Size tokens are the fixed steps this demo renders at; the two live sliders preview how stroke and corner propagate across the whole set before you lock them into your CSS.
Theme API preview
The future Theme Studio endpoint's JSON shape — what saving themes server-side would speak.
POST /api/studio/themes (proposed — not built yet)
REQUEST
{
"tokens": { "hue": 262, "sat": 82, "radius": 12, "mode": "dark" }
}
RESPONSE
{
"theme": {
"id": "th_violet_dark_v1",
"tokens": { "hue": 262, "sat": 82, "radius": 12, "mode": "dark" },
"derived": {
"accent": "hsl(262 82% 62%)",
"accentStrong": "hsl(262 88% 54%)",
"radiusSm": 8,
"radiusLg": 18
},
"preview": {
"wcag": { "buttonLabel": 4.57, "linkOnPanel": 3.79 },
"surfaces": ["#12151f", "#ffffff"]
},
"exports": ["css", "tailwind", "json", "dtcg"]
}
}
HOW IT WOULD PLUG IN
1. POST the four tokens above → same object this page computes locally.
2. Keep the response in an editor session; export any format on demand.
3. Pro accounts save themes to /api/studio/themes — the same payload,
server-side, instead of localStorage.Everything in the response already exists on this page as local functions — the API is a thin server wrapper around the same token math, with real persistence instead of the demo's localStorage. The numbers shown are examples, not a claim that the endpoint is live.
Reset-theme escape hatch
Every experiment is undoable — one click returns hue, saturation, radius and mode to Motif's defaults.
0 token changes this session.
The hatch stays reachable at every scroll depth because the same four tokens are the only state: reset swaps them back, nothing else to unwind — no layers, no saved history to replay. Rotation also stops if it is running.
Where these tokens go
Every asset in the library already reads accentCss(slug) from the same hue space — so the shift above is the same math a real theme build would apply catalog-wide. The panels above turn those same tokens into export files, WCAG-check them, preview them across pages and under colour-blind filters, and save or share them as URLs.
Start the three-minute preview
The timer only runs while you are using it, and nothing here is paywalled for real — the export panels below are the free ones either way.