Everything above this panel is the design Design code sd1.hZVNDoJADIXvwhqNTMSEpS64hRsBzSQkGo3g8f3aokUDYTnpf9_rG3GMDxQTblXclowR0qQs8304JDjNUMLf_xzK1iFPs11KYi3t2ZvXrUU_6lUPt4cN_daWixW62BBuoxprhboI7His-dzflbvLub32w7VM2qEqJ6SnLGMqCG7tRMiaj2IpmQzKiR662PR4jEF1L9M40NIyhqjOLkd7QfdVahA8qQHyHnl6RgRRPplW8GTByz0sjqFccnt1J4zkhSUXfrkRwY9gXxvwwkht3BRfv4HkSOyYZmGzLQaqvQEd0pM (Isometric Line), drawn by the Slopless preview renderer with sample copy. Use it as a visual guide while building: design/DESIGN.md and design/tokens.json are the source of truth . Every section root carries data-pattern with its pattern id.
Viewport Without ?viewport= the render follows the window width once scripts run. Screenshot at 1440 px with ?viewport=desktop and at 375 px with ?viewport=phone.
Pages Tokens at a glance Palette complementary, light · bg #F6FBFF · text #192028 · accent #FF5A2C Type Space Grotesk / Space Grotesk · scale 1.25, base 16px Grid 12 columns, gutter 24px, max 1280px · section space 72px Shape radius 2px · border hairline 1.5px · shadow none · texture dot-grid · motion subtle Sections on the about page (/about), top to bottom Each link shows that pattern alone with these tokens, beside its rule, grid areas, slots, notes and layout tree.
nav.isometric-line-bar· nav, on every page One row on a bottom hairline: boxed wordmark left, plain links centre, a ghost secondary and a small primary button right. content.isometric-exploded-view· content Title (step 6) left with an underline link right on one row; below, a 16:9 exploded drawing in a bordered frame across 1–9 and a five-part ruled key in 10–12. stats.isometric-volume-figures· stats Intro in 1–4 (label, title, line, link); four figures across 5–12 on hairline dividers, each a 1:1 drawing whose cube count shows the quantity, over a big number and a muted caption. team.isometric-crew· team Title and a muted line on one row; four people as framed 1:1 isometric desk drawings with the name and a mono role under each. footer.isometric-ground-plane· footer, on every page Top hairline; wordmark and tagline in 1–4, stacked links in 5–7, a mono newsletter label and inline form in 8–12; a ruled bottom row with the mono legal line and contact email. More To see the user's own copy, append the #b=… part of their picker link to this URL. It is read in the browser only and never sent to the server.