Theme Studio

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.

Layout

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 localStorage on this browser
• AI generate: offline heuristics always; optional BYOK OpenAI-compatible call

AI generate

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.

Planned for Hewn Pro

Neutral/surface tuning, semantic colors, density, glass tint and motion character — plus advanced exporters beyond the free CSS / DESIGN.md / DTCG / Tailwind @theme set. Join the waitlist.

Use your exported pack

Theme Studio CSS targets [data-theme="<pack-id>"] (drafts use studio-draft). Point ThemeProvider at that id so it sets the matching data-theme instead of a curated pack:

import { ThemeProvider } from "@hewnui/ui";
import "./studio-draft.css"; // drop-in CSS from Export

export function App({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider defaultTheme="studio-draft" defaultMode="light">
      {children}
    </ThemeProvider>
  );
}

defaultTheme accepts the six built-in packs or any custom pack id string. Import the exported CSS after @hewnui/themes/tokens.css so your accent wins.

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