Pick a surface color. Four anchors (surface-container, text, accent, border) auto-derive from it. Semantic anchors (danger, warn, info) stay independent. All eight can be overridden.
Auto-generate ON — changes to surface cascade to unlocked anchors.
OFF — only the surface changes; other anchors hold.
Locks always win. A locked anchor never re-derives.
Family scope (Semantic, Action, Data) — transforms each slot in the family directly; no cascade.
Contrast — pulls slot away from / toward surface.
Saturation — adds or removes color vividness.
Warmth — shifts hue toward warm (+) or cool (−).
Brightness — replaces Contrast when scope is Surface.
Commit & Reset — bake current slider effects into slot values; sliders return to 0.
Reset sliders to 0 — discard current effects; slot values return to session baseline.
Sliders themselves don’t save with the theme — only the slot values they produce. Locks always win.
Gamut (⚠)
Color outside sRGB range — chroma reduced to fit
Lightness and hue preserved; closest displayable match for most monitors. The clipped value is what gets stored and shown — adjust anchors or sliders if you want to avoid the clip.
Hex Values
#42863b Click any hex to copy
Brief flash confirms the copy; value lands on clipboard.
Locate in Preview
surface Hover slot name to locate
Click slot name to pin its display
Matches inside hidden scopes (e.g., the Modal) surface in a banner next to “Live Preview”.
Load Theme & Name Theme
Load Theme — pick from My Themes, Presets, or System defaults to replace the editor state. Themes with unsaved changes prompt a confirm before replacing.
Name Theme — gives the theme its identity. Required before Save can fire.
Names must be non-empty and unique. System default names like “Default Light” are reserved.
Tools: Save / Save As
Save — persist current theme to your library
Save As — download a portable JSON snapshot
Export CSS — write a :root stylesheet for use elsewhere
Save needs a theme name. Save As / Export CSS produce files; Save persists in-app.
Auto — captured on every Save (capped queue, oldest evicted)
Named — Shift+Save to name a return point
Browse, preview, and restore captured states.
Semantics / Notifications / Status
The Semantic family covers three uses: banner colors for notifications, inline text emphasis for status (success / danger / warn / info as text), and border accents for status (validation states, alert outlines).
Outlined Buttons
Cancel — borrows action-reversible color
Recessive — borrows info color
Both transparent. Matching dots in the preview pair each instance shown in two contexts.
Undo / Redo
↶ Undo — step back one change (Ctrl/Cmd+Z)
↷ Redo — step forward again (+Shift)
Reverses whole edits — a slider commit, a color pick, a Random, a theme load — not individual drags.
History depth is set in Settings. A new edit after undoing clears the redo path. For a permanent return point, use a Save Point.
primary-action — CTA fill; defaults to accent, override-able
Paired text slots (primary-action-text, selected-text, notselected-text) auto-pick light or dark per WCAG contrast against their bg. Override at your own risk.
Anchor Envelope Tuning (Advanced)
Open the Anchor envelope tuning toggle directly below the surface anchor to reveal a panel of sliders that control the formulas the cascade uses to derive each anchor. This is a per-theme override of the engine’s canonical defaults — change it for one theme without affecting others.
What you see— A read-only seed strip (surface + accent in LCh), then eight sections, one per derivation envelope.
What you tune— Each section exposes the formula constants the engine reads when deriving that anchor. Drag to change; the section’s live swatch and the corresponding slot row below the panel update on the fly.
Reverting— Each slider has a ↻ revert icon, and each section header has a ↻ revert section link. Both restore canonical defaults, never your session baseline. Reverting one section doesn’t touch others.
When changes apply— Slider input writes to storage immediately and cascade runs every frame. When Auto-generate from surface is off, an inline notice surfaces in the panel and visible cascade waits until you reset an anchor or toggle autogen on.
Override interaction— If the slot a section produces is hand-edited or locked, cascade skips it by design. An inline notice in that section explains the slot is overridden. Click the slot’s own ↻ (in the derived-anchor grid below the panel) to bring it back under cascade control.
Achromatic surface— The accent section’s last three sliders (the “When surface is achromatic” group) apply only when the surface has no chroma. With a chromatic surface the rest of the section drives accent; with an achromatic one those three take over.
The panel toggle is per-session — closing it doesn’t lose tuning values; they persist with the theme. The dropdown state itself does not persist.
Semantic Harmonize
The fourth cell of the Semantic Anchors strip holds two sliders that shape danger, warn, and info as a group. Use it when you want a coherent tonal or hue adjustment across the three semantic anchors without picking each color individually.
Brightness— Shifts L* and C from the surface-tier canonical (dark / neutral / light, decided by surface L*). Symmetric around 0; positive pushes toward lighter and more saturated, negative toward darker and muted.
Accent blend— Pulls each semantic’s hue toward your accent’s hue, with soft falloff inside per-slot recognition zones so danger keeps reading as red, warn as amber, info as blue. 0% is canonical; 100% is the maximum permitted blend.
Tier crossings— Surface L* crossing 45 or 56 reclassifies the surface tier; unlocked d/w/i re-derive against the new canonical when this happens. The visible shift in the anchor tiles is the feedback — no banner.
Reverting— The ↻ on the cell resets both sliders to defaults (0 and 0%). It restores d/w/i to canonical baseline for the current tier, not to any session snapshot.
Override interaction— Locked anchors and hand-picked semantic colors win over slider output. Lock a semantic to pin it; slider movement won’t affect it.
Achromatic accent— When accent has no chroma (grayscale themes etc.), Accent blend has no effect — there’s no hue to blend toward. Brightness still works normally. The slider stays interactive but inert by design.
Slider position is session-only — saving the theme bakes the resulting d/w/i hex values into the anchor entries; the slider positions themselves reset on next load.
Slider Scope Preview
The read-only panel beside the sliders shows every slot the current scope actually changes — organised by true derivation lineage, not by slot family. Each anchor cascade is its own column; semantic anchors (danger, warn, info, success) sit in their own region because they derive from surface and accent, not as peer anchors. It is a mirror of what the engine does, never a second place to pick scope.
Markers— A filled dot means the slot moved this round; a diagonal stroke means it is in scope but didn’t move; no marker means the scope doesn’t reach it. Markers update live as you drag.
Locked slots— Shown at full swatch colour with (LOCKED) beside the name. The colour is the payload here, so locked slots are never dimmed — they stay readable.
Semantic note— “Accent not applied — Harmonizer neutral” appears whenever the Semantic Harmonize accent blend isn’t actually feeding danger/warn/info, so the panel never overstates accent’s reach.
Inverse pair— surface-inverse and surface-inverse-text sit in their own conditional block because their parent flips with theme orientation. An inverse surface is the background for inverted UI such as tooltips.
Why it flips— To read as part of the theme rather than a stray dark/light box, the inverse surface borrows the theme’s chromatic identity from whichever anchor carries it on the side it inverts toward: in a light theme that is text (the dark chromatic ink); in a dark theme it is surface itself (text is near-white, low hue). A fixed L* (15 light / 85 dark) guarantees the contrast flip; the borrowed chroma and hue keep it in-family.
The mirror— surface-inverse-text is the exact mirror of surface-inverse — it takes the opposite source in every orientation, so the inverted pair always contrasts against itself.
Depth is whatever the engine actually produced (never deeper than the real cascade) — the panel shows the true closure, not a fixed number of levels. Nothing here changes the theme; it only reflects it.
This will permanently remove the selected entries. This action cannot be undone.
Essentials — Anchors
Random surface:
8 slots
Semantic Anchors
SEMANTIC HARMONIZE↻
0
0%
Sliders
+0
+0
+0
Sliders pushed colors past sRGB
Save Points · —
Browsing past states · current state preserved
Storage usage
—
Save Points are stored in your browser's local database (IndexedDB).
Each browser origin has a storage quota set by the browser, typically
a few hundred megabytes. Snapshots themselves are small (~1–5 KB each),
so reaching the quota usually means OTHER site data on this origin is
consuming space — or you have a very high named-SP cap configured.
Reducing storage: delete older Save Points from any theme, clear
unused themes via Tools → Manage Themes, or lower the named-SP cap
in Settings.
All auto-save entries hidden by filter.
No Save Points for this theme yet
Click Save to start your history, or press
Shift
+
Save
to create a named return point you can come back to later.
Advanced — Per-Slot EditorEach family is independently collapsible · collapse state persists globally · 35 derived slots + extensions · Typography & Geometry coming in Phase B
▾Surface-Container↻4 tiers + shadow + 1 extension
🔓
▾Border↻6 slots · 4 cell sides synced to border by default
Named Save Points are intentional checkpoints — they're never auto-evicted
and stay until you delete them. Give this one a name you'll recognize later.
0/64
About — —
0 / 500
unsaved changes
Unsaved changes
You have unsaved changes. Load the selected theme and discard them?