How the design set is built

Summary

The set is static HTML and Tailwind from the CDN, one screen per file, declared in routes.js. No script renders a screen. There is no app, so the set is the spec.

Why it matters

Reading one screen teaches all of them. The same bar, the same header, the same three columns on a canvas screen, the same footer on an onboarding step.

Implications

• A screen fills the window. There is no device frame. Working screens run edge to edge; onboarding form steps and marketing pages sit in a centred column.
• Colours are roles. Every colour is a token in shared.css. There is no hue class.
• Icons are lucide names. The mark is the one exception, in designs/brand/.
• Drawings are inline SVG. The journey graph and the illustrations carry data in their shape. A path that is a line always has fill="none".
• Gradients and shadows are classes in shared.css: glow, tile, bar, lift.
• Menus open on hover, with CSS. A view that would need a script is a screen of its own or is listed in routes.js under missing.
• Each thing is said once. No panel repeats a number shown beside it, and no sentence explains what the screen already shows.
• Nothing of Trunk's is drawn inside a captured product's frame.
• The shell is shared. _chrome.js, _gallery.js and the CORE block of shared.css are charades' copies and are never edited here.

Related

• demo-tenants — what the screens draw.
• onboarding-steps · capture-reads-the-product

Sources

• .context/designs/web/routes.js
• .context/designs/web/shared.css