SHT A-102 · DESIGN GUIDE · V6 — "BLUEPRINT"
Design guide
How the Blueprint version of the Advisor OS showcase was drafted, and with what.
The concept
The company is presented as a building being drafted: a cyanotype drawing office where everything is line work on Prussian-blue paper, and the four products are four floors of one elevation, read from the ground up in career order. Facts are set as dimension lines, the FAQ is a block of general notes, and the closing call to action is an APPROVED FOR CONSTRUCTION stamp — the poetry of dimension lines, applied to software.
Palette
Type system
Signature element — the drafted elevation
One tall SVG section, four floors in career order — licence hall, booking
office, trading floor, observatory. Each floor's outline literally draws itself
by animating stroke-dashoffset from the path's measured length to
zero as its product panel scrolls into view; dimension lines, level marks and
the circled reference marks fade in once the ink is down.
The building completes at the final sheet, where the amber approval stamp rotates in at a slightly imperfect angle. It is the signature because it does what the copy claims: the company is drawn as one structure, floor by floor, in the order a career actually happens.
Techniques
- SVG stroke-dashoffset drawing at scale — every geometry element in a
floor group is measured with
getTotalLength()and drawn on with a GSAP stagger; annotations follow as a separate opacity pass. - GSAP ScrollTrigger choreography — a sticky elevation column on desktop with one trigger per product panel; a single sequential draw on mobile.
- Data as dimension lines — the honest numbers (3,684 · 9 · 104 · 12 · 5 · 48 · 8 · 4) are set between SVG arrowheads as |← dimensions →|, not stat cards.
- CSS blueprint grid — four stacked
repeating-linear-gradientlayers give an 8 px minor / 96 px major drafting grid, with radial mottling for the cyanotype wash and a fixed sheet-corner curl shadow. - Title-block furniture as navigation — the sheet index (SHT 01–08) is a fixed nav with an IntersectionObserver scroll spy; every section carries its sheet number; rates sit in title-block cells.
- Reduced motion & resilience — the drawn state is the default: with
prefers-reduced-motion, or if GSAP fails to load, the building rests fully drafted and the stamp is already applied.overflow-x: clipon both html and body guards against transient transform overflow.