Themes

A theme is a bundle of two paired files under themes/:

• themes/<id>.md — agent-facing recipe: palette, typography, layout, fixed components, motion. create-frame reads this before authoring.
• themes/<id>.demo.tsx — a runnable mini-frame that demonstrates the theme. The dev UI's Themes panel imports it and renders it as the theme's live preview card.

Both files share the same stem so the runtime can pair them automatically.

Why themes

If you author more than two decks you'll want them to look related. A theme captures the recipe — palette, type stack, layout vocabulary, motion language — in one place that any deck can reference. The demo TSX makes that recipe visible: you can flip through theme previews in the dev UI before picking one.

File layout

themes/
├── corporate.md
├── corporate.demo.tsx
├── editorial.md
├── editorial.demo.tsx
├── retro-print.md
└── retro-print.demo.tsx

The markdown is free-form. A useful template:

# Corporate

## Palette
- ink: #0a0a0c
- accent: #4a52b5
- mint: #1f8458

## Typography
- display: 'Söhne', system-ui
- mono: 'JetBrains Mono'

## Voice
- Tight, declarative, never coy.
- One concept per frame.

The demo is a normal frame module — same shape as frames/<id>/index.tsx, just placed under themes/ so the runtime treats it as preview-only (it does not appear in the frames list):

import type { Page } from '@open-frame/core';

const Cover: Page = () => (/* …inline Title / Footer using theme tokens… */);
const Content: Page = () => (/* … */);

export default [Cover, Content];

Keep the demo's inline Title/Footer/Eyebrow components verbatim in sync with the snippets in the markdown — what authors see in the Themes panel should match what create-frame will paste into a real frame.

Using a theme

When you call /create-frame, mention the theme by name:

/create-frame for "Q3 board update — use the corporate theme"

The agent loads themes/corporate.md, applies the palette and type stack, and writes pages that match.

Extracting a theme

Already have a deck whose look you like? Use /create-theme to extract its design tokens into a reusable theme file.