How the design set is built

Summary

Static HTML and Tailwind from the CDN, one screen per file, declared in routes.js. No script renders a screen. The set is the spec; the app follows it. The set was redrawn from 2026-10-22, one page at a time, each reviewed by the owner.

One look for every page

• Light and minimal. White page, grey lines, near-black ink. Primary buttons are ink (btn btn--primary). Indigo (brand) is for links, focus and selection. Dark is the theme toggle.
• Colour means something. Inside the app, success / warn / danger / info are status only — merged, uncommitted, conflict, open branch. accent (violet) is AI only. leaf is the logo's green. Marketing and docs may use any tint as decoration.
• The logo is designs/brand/mark.svg: a tree whose branches are git branches, each its own colour.
• The words. Tagline: "Your design and your product, always in sync." The loop, in this order and these words: Capture what you shipped, or start blank · Change it on a branch · Verify it against the live product · Merge when it ships.

The app shell

• One top bar: logo · Company ▾ / Product ▾ / Branch ▾ on the left; editing actions only (changes, Review), who else is here (avatars with a green dot), and your avatar on the right. No breadcrumbs, no page headers. Company-level screens show only the company; a new product shows "New product" and no branch.
• The branch menu opens under the branch picker: main, open branches with their state, versions (read-only), New branch from main, All branches.
• A rail and one panel on the left (Analysis first, then Journey · Pages · Components · Styles; Settings at the foot); every panel has a search box. One item per page.
• The canvas toolbar is a floating island at the bottom centre: View · Edit | tools (Edit only) | sizes | states | Preview, with thin dividers between groups.
• The inspector on the right has Design, AI and Code tabs.
• Key screens and architecture follow the estate rules in ~/git/products/CLAUDE.md: key: "<Row>" in routes.js decides what the chart and the screenshots sheet open on, and the architecture flow (the chip in the bar) holds the diagrams, the stack and the cost.
• On a branch every section shows the branch, with Complete · Delta beside the branch picker and the branch's state, Verify and Merge in the bar. There is no branch page.
• Reading screens (Review, Versions, Analysis) put their title inside the content.

Other page types

• Marketing: a centred column, max 1180px; sections separated by a line; the hero has the tinted grid.
• Auth: two halves — the form on the left (max 380px), the tagline and the four steps on the right over the tinted grid.
• Form steps (onboarding): a centred column; Back on the left, next on the right.
• Docs: one template for every page; see docs-article.

The example

Every screen draws example-northwind. A number, a name or a version that appears on two screens is the same on both.

Rules

• App screens are filed like the app's addresses: <company>/<product>/<ref>/<section>/<mode>/<tab, size or filter>.html — e.g. northwind/northwind-web/main/pages/edit/ai.html, …/journey/view/mobile.html, …/journey/view/open.html, and <section>/preview.html. Sections without modes are one level (…/analysis/consistency.html, a finding under its score: …/analysis/consistency/greys.html). The top bar's menus are …/main/menus/. A branch's screens go under its name instead of main; company-level screens sit at <company>/.
• The inspector always has Design · AI · Code · History, as icons, at one width. Layers sits at the bottom of the Design tab; the left panel lists the section's items only.
• Role tokens only (bg-surface, text-ink-3), never a hue class. A new class goes in shared.css in the same edit.
• Icons are lucide names. One screen per file; a state is <screen>-<state>.html.
• Say each thing once: no table, screenshot or number repeated on two pages; link to the page that owns it.
• A new screen is declared in routes.js, linked from the screen that reaches it, and gets a notes page in wiki/surfaces/.
• Run pnpm check:designs. Until every app route is redrawn, "ships and no screen draws it" failures are expected.