House looks, one rule set. Point an agent here and it builds in the brand instead of its own defaults.
Not looks — reusable machinery. How a brand is defined, and how it changes on screen.
A contract for what a look is — ten colour roles, one radius, two faces, one density, one motion signature — plus eleven live presets. Each theme carries its own exit animation, and enter is exit reversed.
Two complete universes in one DOM and the curved random-angle wipe between them. Mood's husband mode is House Pour — the proof that a house look ports whole into an unrelated app.
Paste this at the top of the session that's building the UI. Swap the
slug for house-pour if that's the look.
Build this UI in the Lucian Labs "Console" look.
Read https://lucianlabs.ca/branding/AGENT.md and
https://lucianlabs.ca/branding/console.md before writing any CSS.
Link https://lucianlabs.ca/branding/console.css and use its tokens
and components. Every colour must be a var(--token) from that file.
Follow the ban list in AGENT.md — check your output against it before
you report the work done.| File | What it is |
|---|---|
| AGENT.md | Read first. How to pick, the ban list, and how to fill gaps the specs don't cover. |
| brands.json | Both looks as machine-readable tokens. |
| console.md | Console spec — type ramp, accent budget, voice, gap-filling. |
| console.css | Console drop-in stylesheet. Link it or vendor it. |
| console.html | Console rendered in its own look — the visual reference. |
| house-pour.md | House Pour spec. |
| house-pour.css | House Pour drop-in stylesheet. |
| house-pour.html | House Pour rendered in its own look. |
| punch-clock.md | Punch Clock spec — includes the Console-vs-Punch-Clock table and the motion system. |
| punch-clock.css | Punch Clock drop-in stylesheet. |
| punch-clock.html | Punch Clock rendered in its own look. |
| field-notes.md | Field Notes spec — type ramp, the amber/lavender split, voice, gap-filling. |
| field-notes.css | Field Notes drop-in stylesheet. |
| field-notes.html | Field Notes rendered in its own look. |
| theme-engine.md | The theme contract, the eleven presets, and the per-theme motion table. |
| theme-engine.html | All eleven presets and their exit animations, live. |
| skin-swap.md | Two-skin architecture and the curved-wipe transition, step by step. |
| skin-swap.html | The wipe, running — press it a few times, no two are alike. |
Generated UI has a house style nobody chose: Inter, indigo gradients,
rounded-2xl shadow-lg cards, a centred hero
over three equal feature boxes, and an emoji in every heading. It is
competent and it is anonymous, and it shows up whenever a model has to
fill a gap the brief didn't cover.
These pages close the gaps in advance. The tokens say what the colours are, the specs say what to do when a component isn't listed, and the ban list names the defaults to delete on sight. An agent that reads all three produces something that looks like it came from here.
punch-clock.md.--bg, --panel, --ink, --muted, --line, --accent, --radius, --font-display, --font-body, --font-mono. Write components against the names — swapping the stylesheet swaps the brand.ui-monospace or SF Mono anywhere.