Advisor OS showcase · v15 · Design guide
Summit.
The concept in two sentences: a career in advisory work is told as one mountain ascent — four camps in career order, a fixed altimeter that climbs with the scroll, and an orange route drawn through a procedurally generated topographic field. The page inverts the usual scroll: it starts in valley slate and climbs into summit light, crossing a snowline where the text colour flips once, cleanly.
02 · Palette
Altitude bands
The five altitude bands are the page itself — a single dark-to-light climb, applied as per-section gradients so text contrast is guaranteed on both sides of the snowline. Expedition orange is the ONE accent: the route, the camp flags, the needle, the CTAs. Nothing else gets to be loud.
Product colours appear only as tiny carabiner dots clipped to camp names — identification, never decoration.
03 · Type system
Expedition signage
Camp III · Do the work
Archivo · variable width axis at 125% (Expanded) · wght 700–800 · caps, tracked · all display, kickers, plates, CTAs
A licence without meetings is a laminated card. Body copy is set quietly so the signage can shout — 400 for prose, 600 for emphasis.
Inter · wght 400–700 · body, manifests, route notes
3,684 1,000 m 4,000 m
Inter tabular numerals (tnum) · the altimeter readout, altitudes and every honest number — digits never jitter as they count
04 · Signature element
The altimeter
A fixed instrument in the corner whose reading climbs 0 m → 4,000 m mapped to scroll, with a needle, a damped counter and a mini elevation profile showing the four camps. It gives the scroll a unit: you always know how high you are and how far the summit is.
It also keeps the metaphor honest. Camp stats are real product numbers; altitude is obviously invented — the instrument wears the fiction on its face, so nothing else on the mountain has to.
05 · Techniques
What's under the snow
- 01Procedural topography — layered value noise (fBm, seeded mulberry32) sampled on a 64×40 grid, run through marching squares at eight iso-levels, emitted as SVG contour paths in JS at load. No bitmaps anywhere on the site.
- 02Full-page choreographed gradient — five altitude colours applied as per-section gradient hand-offs, with one text-colour changeover at the snowline (a hard boundary element, not a fade).
- 03Route reveal by arc length — the orange route is one smoothed quadratic path over the whole document; each frame a binary search on getPointAtLength finds the length at the viewport's leading edge and scrubs stroke-dashoffset. Camp flags plant as the line passes.
- 04Scroll-mapped instrument physics — waypoint altitudes are piecewise-interpolated from live section positions; the readout chases its target through a damped rAF loop so the needle has weight.
- 05Pinned camp scenes — CSS sticky signage columns hold each camp's plate, permit tag and CTA while the manifest scrolls past (desktop only).
- 06Variable font width axis — Archivo served with wdth 75–125; display runs at font-stretch 125% for the expedition-signage voice.
- 07CSS particle snow — 34 seeded spans on a fixed layer, keyframe-fallen, faded in only past the snowline.
- 08Reduced motion, dignified — prefers-reduced-motion gets the summit state: route fully drawn, all flags planted, altimeter resting at 4,000 m, no particles, no drift.
06 · Scorecard
Rubric score — pending final pass
Awaiting the final judging pass. This box is left empty on purpose — no invented numbers, not even about ourselves.