Two layers.

Every surface in the product is two layers composed — a light/dark mode times a color scheme — over one semantic token contract. Schemes aren't hand-painted: a per-scheme palette of primitives is run through the generator (build-themes.mjs) into the contract, the intent tier, and a shadcn bridge — emitting the CSS the components read and the Figma variables design works from, from one source.

The two-layer model · mode × scheme

Modenext-themes · data-theme

light dark

Light and dark, switched at runtime. This book renders Lumos in light; the same tokens carry the dark surface.

×composed per surface

Schemedata-color-scheme

lumos meadow safetrekr chronica-classic + more

The palette layer — swap it and the whole product re-skins. Fifteen schemes ship today; Lumos is one of them.

resolves to

Lumos · Light One rendered cell of the matrix — --bg-canvas, --fg-primary, --accent, the intent tier, all bound. Components stay scheme-agnostic.

The generator · palette → surface

The chapter

8.5 × 11 · Portrait