Version III · Design guide
Atrium — a private museum of work.
The concept, in two sentences: Advisor OS is presented as a small museum — four glass instruments in four rooms, hung in the order a career unfolds, lit by one slow skylight. Everything on the page behaves like a gallery: enormous quiet, hairline gold, catalogue typography, and light that follows the visitor.
Palette
Warm ivory walls sampled from the artworks themselves, so the photographs melt into the page. Espresso ink, champagne hairlines. The four product colours never touch the interface — they live inside the glass, and surface only as plaque dots.
Ivory wall
#F4EADA
page ground, matched to the art
Bone
#EDDFC9
mat gradients, footer wash
Gallery mat
#FAEEDC
frame mats, one tone per room
Espresso
#2B2116
display type, primary ink
Umber
#54462F
body copy, captions
Champagne
#B98F4E
hairlines, numerals, focus ring
#2DD4BF
Pick a Time #7AA2FF
ActivityTracker #FF6B3D
FourLens #B79BFF
Type system
Two faces, set like a printed catalogue. Fraunces — a variable serif — carries every voice of the museum by moving along its optical-size and softness axes; Archivo does the quiet administrative work of plaques and body copy.
The collection
Then, fill the calendar.
Room III · Catalogue № 03
One tap logs a call, an appointment, a close. The funnel fills, goals and streaks keep score.
The signature — the light
A museum is really a building for light; the software is only what the light lands on.
A warm radial field breathes on an eleven-second cycle and leans toward the
cursor — two custom properties (--lx, --ly) eased through a
requestAnimationFrame loop at 4.5% per frame, drifting on its own after 2.8 seconds of
stillness, exactly like sun crossing a skylight. It is running on this page now. Beneath it,
each framed work tilts no more than 2.1 degrees toward the pointer while a specular sheen
crosses the glass in soft-light blend — enough to make the photograph feel
dimensional, never enough to make it perform.
Techniques
- 01
Cursor-reactive lighting field
CSS custom properties driven by pointermove, rAF-throttled with linear interpolation and a sine-based idle drift; layered radial gradients with a counter-shade vignette and an SVG turbulence grain at 5%.
- 02
GSAP ScrollTrigger choreography
Each gallery room pins briefly (+46% scroll) while the artwork settles from 1.045 to 1.0 scale, the ghost numeral parallaxes, and the epigraph fades in — scrubbed, easing-perfect, nothing bouncy. Hairline rules draw with
scaleX. - 03
Perspective tilt with specular sheen
GSAP
quickTorotation capped at ±2.1°, transform-perspective 1000, and a movingmix-blend-mode: soft-lightgradient tracking the pointer — fine-pointer devices only. - 04
Variable-font optical sizing
Fraunces exercised across its opsz (34–144), SOFT (58–72) and WONK axes so display, plaque titles and whispers are one family speaking at three volumes.
- 05
Sampled-colour art integration
Wall and mat colours sampled from each JPEG's edges; an inset box-shadow in the mat colour melts the photograph into its frame so the square asset has no visible seam.
- 06
Graceful degradation
Missing artwork falls back to a CSS "glass vitrine" in the product colour via onerror;
prefers-reduced-motionstills the light, unpins every room and presents the full gallery statically; the page is complete with no JavaScript at all.