Guide route
How the Blueprint site was drawn.
This route documents the brief, asset pipeline, evidence labels, implementation choices, and critique loop for variation 22.
Brief
Build a distinct static site under the blueprint drawing metaphor: blueprint background, precision grid, dimension markers, measurement callouts, and annotation callouts. Proof is shown as technical specifications before render views.
The interaction model is sketch-to-render toggle, not automatic motion. The goal is measurable evidence: tolerances, sources, and status labels remain visible in both views.
Evidence labels
Measured work with live integrations or documented output. Tolerances are defined, not assumed.
Fiction labeled fiction. Unbuilt ideas shown with illustrative tolerances.
Working draft without live data or client contracts. Status is draft, not shipped.
Asset pipeline
The site uses CSS grid, stroke layers, and annotation callouts as its media layer. No external photo or video assets are required.
- Grid: CSS blueprint grid with masked radial falloff.
- Drawings: line-art render mockups created with CSS gradients and borders.
- Proof labels: semantic chips with ARIA roles; no falsified social proof.
Implementation choices
- Static HTML/CSS/JS under
sites/22/. - One H1 per route; minimization of decorative markup.
- Responsive via clamp(), two breakpoints, and reduced-motion media query.
- Interactive sketch/render toggle via scripted class state.
- Guide documents critique passes and future tolerances.
Critique passes
- Pass 1: Structure and label audit complete. Homepage exposes proof tier chips and a six-sheet specification grid with labeled tolerances.
- Pass 2: Responsive and reduced-motion pass checked. Proof grid collapses from three columns to one; reduced motion disables hover lift.
- Pass 3: Live static verification with Python http.server. Home, guide, stylesheet, and script all return healthy status with no broken internal links.