Motifs & patterns
The brand stays recognisable between the type and the colour through a small set of repeated moves: one ornament for drenched moments, one ambient field for light ones, a strict rhythm of surface treatments, and a single shadow language reserved for things that float.
Ornament
Four rounded rectangles
Every drenched cobalt moment carries the same ornament: large rounded rectangles, rotated 6–14 degrees, in white at 6–9% opacity so the cobalt reads through. Never solid white, never more than a whisper of texture.
white/[0.06–0.09]Ambient
The lozenge field
On white and tinted sections that need brand texture without a full drench, two SVGs layer in: outlined Stacklane lozenges (parallax, motion-reduced friendly) and a vertical bar texture. Opacity runs 0.22 to 0.40; higher and the pattern fights the content.
reverse-stacklane + barsRhythm
Five surface treatments
Every page composes these five; no page invents a sixth. The one rule that holds it together: no two consecutive sections share a treatment. White-on-white is the failure mode the rhythm exists to prevent.
bg-accentHeroes, close CTAsbg-bg-inverseOne long 'how we work' stretch per pagebg-bg-softBuffer bands, honest-disqualifier sectionsbg-accent-softPromise-kept moments: Week 1, pricing pill. Same #EDEEF8 tint, marked by accent disc-checks.bg-bgDefault. Hairlines do the structure.Elevation
Hairline first, shadow rarely
Structure is carried by 1px borders. Shadow is an extra layer for cards that genuinely float, and it is always tinted toward blue, never neutral gray. A rgba(0,0,0,0.1) shadow reads as imported from another system.
0 10px 13px rgba(245,249,255,0.25)White inner card on a tinted shell. Barely there.9px 19px 48px rgba(151,170,186,0.2)Cards that visibly float: product mockups, share previews.0 8px 30px rgba(72,86,248,0.12)Emerges on primary-button hover only. Never at rest.