Theme Engine

Not a look — a contract

Console, Punch Clock and House Pour each commit to one identity. This does the opposite: it defines the shape a look must have, then ships eleven of them. Reach for it when the app must be re-skinnable — by the user, by a URL, or by you at build time.

type ThemeStyle = {
  name, label
  colors: { bg surface border text dim   // structure
            accent                        // identity — one hue
            green orange red cyan }       // state — never repurposed
  borderRadius, fontSize, spacing         // form
  headerFont, bodyFont, fontFamily        // voice
  animation                               // motion signature
  sound: { preset, bpm, volume, mode }    // notification character
}

Ten colour roles, one radius, two faces, one density, one motion, one sound. That is the entire surface area. If a component needs a colour outside the ten roles, the component is wrong — not the theme.

Eleven presets — click to swap

Every value in the panel below is a CSS custom property. Switching rewrites the properties; nothing re-renders.

Tap a ✓ to play this theme's exit animation. Enter is the same keyframes reversed and faster.

Motion is part of the theme

This is the idea worth stealing. Each theme names one exit animation, and it carries as much identity as the palette.

Four rules that make it cohere

• One motion per theme, applied everywhere. The animator reads the active theme and applies fmn-anim-{style}. No component picks its own.
• Enter is exit reversed. Same keyframes, reverse, ~0.3s — faster in than out. One definition, two directions, guaranteed coherence.
• Motion matches temperament. Zen dissolves, Neon tears itself apart, Vinyl spins like a record. A theme whose motion contradicts its colours reads as broken.
• Animate, then collapse. Height is measured and pinned, the animation plays, then a collapse transition closes the gap. Both stages carry safety timeouts (800ms / 400ms) so a dropped animationend can never strand a row.

Durations sit between 0.4s and 0.7s — long enough to read as character, short enough to stay out of the way.

Application

• One write target. Every token goes onto documentElement as a custom property. Nothing in the app reads a colour any other way.
• Fonts load lazily and once. A Set tracks injected families; switching pulls only what the new theme needs. A session that never visits Sakura never downloads Kaisei Tokumin.
• Resolve is preset + overrides. { ...preset, ...customs } — a user's colour, radius, font or spacing layers onto any preset without forking it. User themes append to the same array as built-ins and are indistinguishable downstream.
• Themes travel as data. #theme=sakura, copy/paste JSON, or a script tag. A look that can't be shared as data stays in one app.

Build your own

• Fill all ten colour roles. Contrast-check text on both bg and surface.
• Pick one radius and commit — it applies to every corner in the app.
• Pick two faces (they may be the same) and one density.
• Write one exit animation, 0.4–0.7s, matching the temperament.
• Register it in the array. Everything downstream is already wired.

Honest caveat