01 / Design method
Start with a constitution.
Write audience and desired response first. Choose a metaphor. Choose a composition. Only then choose colors and effects. Reject a generated look that stacks familiar patterns with no job.
| Step | Ask |
|---|---|
| Audience | Who must understand, decide, contact, compare, or continue? Computational education is for people who need the stack named, not a dashboard of virtue. |
| Metaphor | Pick a concrete grammar: archive, instrument, civic infrastructure, or field notes. This issue uses a survey desk on warm paper. |
| Composition | Choose structure before paint: split hero, rail, archive, or folio. INPUT - 5 is the slot. Tables are indexes, not card grids. |
| Motion | Give each effect a job. Animate only opacity, transform, and clip-path. Particles belong to the page; audio may modulate them, never own them. |
| Access | Readable type over moving media, keyboard controls, visible focus, alt text, and prefers-reduced-motion. Effects stay optional. |
| Prohibited | Reject generic gradient heroes, glassmorphism everywhere, interchangeable three-card rows, floating blobs, and animation with no job. |
02 / Four layers
Change personality, not structure.
The kit keeps data, style, and behavior apart. Inputs flow into normalized state, then into the DOM. A new theme is a token file and a content file — not a rebuilt page.
- 01
Structure
template/index.html
Semantic slots, captions, controls, and effect hooks. Do not rebuild this to change the look.
- 02
Content
inputs/content-inputs.js
Brand copy, navigation, gallery records, metrics. The industry table and glossary live here.
- 03
Theme
inputs/theme-inputs.css
Color roles, type scale, spacing, corners, and density. Edit this file first.
- 04
Effects
template/app.js + styles.css
Runtime state, transitions, canvas, audio, reveals. One focal effect. Safety paths stay on.
03 / How to change the theme
Edit theme-inputs.css first.
Search for INPUT - N. Start at Input 3. One custom property should move the whole page. If you restyle a button before the tokens, the next chapter will invent a new grey.
| Input | Controls | File |
|---|---|---|
| 1 | Brand name, eyebrow, headline, supporting copy | index.html |
| 3 | Color tokens and contrast hierarchy | theme-inputs.css |
| 4 | Typography, type scale, and letter spacing | theme-inputs.css |
| 5 | Page composition and section ordering | index.html |
| 7 | Grid, scanlines, noise, or glow | theme-inputs.css |
| 12 | Button style, hover, and active feedback | theme-inputs.css |
| 16 | Section density, spacing, and content width | theme-inputs.css |
| 17 | Shapes, borders, rules, and markers | theme-inputs.css |
| 18 | Data-driven cards, metrics, or timeline items | content-inputs.js |
| 19 | Accessibility preferences and reduced motion | app.js and styles.css |
| 20 | Page-level theme presets | examples/*.css |
Input 20 is the preset slot. Copy a file from examples/ over the theme inputs. Input 9 still belongs to CSS for cubeFlip and curtainReveal. The studio shows those transitions live.
04 / Worked preset
Field Notes for this issue.
This is the theme the education report asked for: survey desk, warm paper, signal orange for action, cobalt for guidance. Paste it into the kit. Do not apply it by hunting class names.
Field Notes
Warm paper, square corners, Playfair display. The CodeLabs issue.
Editorial civic
Night canvas, cyan accent, Arial Narrow. Technical documentation.
Cinematic portfolio
Restrained luxury. Warm dark surfaces, gold accent, quiet noise.
Warm paper workshop
Workshop editorial. Teal accent, Georgia display, no pointer effect.
/* INPUT - 20: Field Notes / computational education
Paste over inputs/theme-inputs.css. Do not edit components first. */
:root {
/* INPUT - 3 */
--color-canvas: #f3f0e8;
--color-surface: #e5e0d5;
--color-surface-raised: #faf7ef;
--color-text: #171716;
--color-text-muted: #74716a;
--color-accent: #ff5a36;
--color-accent-strong: #e04620;
--color-secondary: #3157d5;
--color-warning: #91bd56;
--color-border: rgba(23, 23, 22, 0.18);
--color-overlay: rgba(23, 23, 22, 0.4);
/* INPUT - 4 */
--font-display: "Playfair Display", Georgia, serif;
--font-body: Inter, ui-sans-serif, system-ui, sans-serif;
--font-mono: "Fira Code", ui-monospace, monospace;
--type-display: clamp(3.4rem, 9vw, 9.2rem);
--type-section: clamp(2.6rem, 6vw, 6.4rem);
--tracking-display: -0.065em;
--tracking-label: 0.16em;
/* INPUT - 12 / 17 */
--button-radius: 0px;
--panel-radius: 0px;
--panel-shadow: 12px 12px 0 #171716;
--marker-shape: square;
/* INPUT - 16 */
--page-gutter: clamp(1.25rem, 5vw, 5rem);
--reading-max: 640px;
/* INPUT - 7 */
--grid-opacity: 0.06;
--scanline-opacity: 0;
--noise-opacity: 0.05;
--glow-opacity: 0.08;
}05 / Update the info
Tokens do not hold facts.
The report’s tables are content. After the preset is in place, update Input 1 and Input 18. CodeLabs already publishes those facts on Industry and Code Terminology.
Industry table — INPUT 18
Put the survey ranges in content, not in CSS. JavaScript 62.8–70.5%, Python 54.8–73.8%, TypeScript 43.6–51.4%, Rust 13.9–23.1%, PostgreSQL 55.6–59.5%, Redis 28.0–32.5%, Visual Studio Code 75.9%. Link each row to a lesson; send VS Code to the IDE glossary entry.
Code Terminology — INPUT 1 / back matter
Ship expansions, not decorations. A11Y to YAML. LLM must say LabRat is not an LLM. The Lexicon lesson quizzes the strings; the theme only typesets the table.
Architecture copy — INPUT 1
Name CSR, SSR, systems executables, and data pipelines. Wasm, WASI 0.2, WIT, DuckDB-Wasm, and OPFS belong in the architecture chapter. The terminal still does not execute them.
06 / Exercises
Prove the layers stayed apart.
- 01
Copy the Field Notes preset over theme-inputs.css and describe what changed without touching HTML.
- 02
Switch INPUT - 9 from cubeFlip to curtainReveal. JavaScript only chooses when an image is active; CSS owns how it moves.
- 03
Add the industry table as INPUT - 18 data. Do not invent a dashboard of three identical cards.
- 04
Create a fifth preset: night canvas, signal orange, square corners, no pointer effect.
- 05
With prefers-reduced-motion: reduce, confirm the page still reads and every control is visible.
The practice terminal will only accept the strings in 19 / Theme. It will not compile CSS.