Theme Studio
Theme Studio
Author a custom pack from a curated base — accent, radius, CSS export, and AI generate.
Free authoring starts here. Pick a curated base, set an accent seed and radius preset, then watch a full-width live dashboard update as you edit. Open the bottom dock (hover on desktop, tap on mobile) for Tokens, Generate and Export. Download a drop-in CSS pack when ready. Some advanced token groups are planned for Hewn Pro — join the waitlist.
Authoring studio
Meridian Ops specimen. Hover or tap the bottom dock to edit tokens — chrome, charts, and surfaces update inside the draft pack instantly.
Live specimen
forest · light · soft
Meridian
Ops desk
Fictional company · sample data
Request volume · 24h
128,402
+12.4% vs prior window
p95 latency
184ms
-11ms
p95 latency trend Error rate
0.38%
-0.09%
Error rate trend Cache hit
91.4%
+2.1%
Cache hit trend
Live stream
Accent and surfaces update as you author.
Canary 14% healthy
Edge cluster · eu-west
Token sync complete
Meridian draft pack published
Queue depth eased
Ingest backlog 4,812 → 1,240
Nightly snapshot
Retention window OK
Component matrix
Live tokensBase pack
Radius preset
Preview mode
Engine notes
- dark accent lightness clamped to 0.62 for surface contrast
Layout
| Area | Purpose |
|---|---|
| Dashboard | Full-width Meridian Ops specimen (KPIs, chart, stream, crew) |
| Bottom dock | Collapsed summary; expands to authoring sheet |
| Tokens | Base pack, accent, radius, preview mode |
| Generate | AI prompt, CSS paste, or logo palette |
| Pro | Neutrals, semantics, density, glass, motion (coming soon) |
| Export | Download CSS, reset draft, Pro exporters |
Theme Lab evaluates curated packs across the docs shell. Theme Studio authors a custom pack and proves it on an example dashboard.
What’s free
- Base pack (Forest, Tide, Graphite, Dune, Clay, Ember)
- Accent seed (hex or
oklch(...)) with contrast-safe foreground - Radius presets (sharp / soft / rounded / pill)
- CSS export shaped like curated packs
- Draft saved in
localStorageon this browser - AI generate: offline heuristics always; optional BYOK OpenAI-compatible call
AI generate
| Source | Behavior |
|---|---|
| Prompt | Keyword + embedded-color heuristics; optional BYOK model JSON |
| CSS | Extract hex/oklch → accent + base pack suggestion |
| Logo | Client canvas palette sample → same proposal path |
Every proposal runs through the authoring engine (normalize + derivePack).
Invalid AI output falls back to offline heuristics. BYOK keys stay in
localStorage on this browser — never sent to Hewn servers.
Pro authoring groups
Stub-gated in the Studio UI (engine already derives them):
| Group | Controls |
|---|---|
| Neutrals / surfaces | Surface lightness shift, chroma scale |
| Semantic colors | Danger seed |
| Shape / density | Compact / default / comfortable |
| Glass | Tint strength |
| Motion character | Snappy / balanced / soft |
Extra exporters (Tailwind @theme, Style Dictionary, Figma variables) are
planned for Hewn Pro beside the advanced authoring controls.
Rules
- Engine clamps accents that fail WCAG AA and reports what changed
- Dashboard preview is scoped to the draft pack — Theme Lab still owns the docs shell
- Unsupported modes for a pack never appear (Dune/Clay light-only, Ember dark-only)
- No free-form CSS editing — guardrails are the product
- Generation is an accelerator; manual controls always work without a key