A new theme is a file, not a rebuild

Start with a constitution

Write audience and desired emotional response. Choose a visual metaphor — civic infrastructure, field notes, a scientific instrument, a film archive. Choose a composition that supports that metaphor. Only then choose colors and effects.

Before accepting a generated design, reject generic gradient heroes, glassmorphism panels, identical three-card rows, and decorative animation with no relationship to the content.

The first file

Start with inputs/theme-inputs.css. Change color variables, font family, corner treatment, border opacity, and shadow language there. The template uses CSS custom properties so one edit can affect the entire page.

Do not begin by changing individual components. That creates inconsistent visual decisions. Input 20 is the preset slot: copy an examples/*.css file over the theme inputs.

--color-accent: #ff5a36;

Four layers stay apart

The design system is intentionally separated into four layers: content, visual tokens, effects, and behavior. Keep those layers separate so you can change the personality of a site without rebuilding its structure.

Industry adoption ranges and glossary expansions are content (Input 18 and the back matter). They do not belong in the token file.

One focal effect

A moving background, a cinematic video, and a large image carousel can all exist together, but they should not compete. Use one as the focal effect and keep the others quiet.

Kinetic chapters may animate opacity, transform, and clip-path. JavaScript chooses when an image becomes active; CSS defines how it moves. Audio modifies particles — never owns them.

Glossary

theme-inputs.css

The first file to edit when the personality of the page must change.

INPUT - 20

Page-level theme presets living in examples/*.css.

constitution

Audience, metaphor, composition, motion, access, and prohibited patterns — written before paint.