House looks, one rule set. Point an agent here and it builds in the brand instead of its own defaults.
What the shop widget collapses to in every look, running live. Audit them side by side: each should read as its look at 32px with no label and no colour outside its own palette. Source: orbs.css — the widget's copy is generated from it.
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.
A whole page wearing any of the five looks. One accent becomes a six-hue family, black glass becomes the look's panel at alpha, and a look change wipes the page and its widgets under one front.
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, in order:
https://lucianlabs.ca/branding/AGENT.md (how to pick + what never to do)
https://lucianlabs.ca/branding/console.md (this look)
https://lucianlabs.ca/branding/UX.md (how it must behave)
Take tokens from https://lucianlabs.ca/branding/brands.json — never
retype them. On web you may link console.css directly; on any other
platform derive from the tokens and the UX contract.
Implement all seven interaction states, focus included, and use only
the five named durations. Check your output against the AGENT.md ban
list and the UX.md ship checklist 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 | All five looks as machine-readable tokens. |
| UX.md | The behaviour contract — seven interaction states, five durations with curves, screen states, responsiveness, accessibility. Platform-agnostic; applies to every look. |
| 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. |
| claudecore.md | Claudecore spec — where it came from, the three rules, the juice motion table, the genie, the sketch. Iterating. |
| claudecore.css | Claudecore drop-in stylesheet. |
| claudecore.html | Claudecore rendered in its own look — the machine at 176px and at page scale, and the radio's sketch running. |
| orbs.css | The minimized icon of every look — one rule set per slug, the source the shop widget's orbs are generated from. |
| 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. |
| site-brand.md | The role contract a site reads, the family derivation, the light-look rules, and the root wipe's coordination with the shop. |
| site-brand.html | A host page branded through the roles — five pips, and the whole page wipes. |
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.