Swiss Geometry
A 12-column grid with 24px gutters anchors every element. The baseline grid at 4px ensures vertical harmony. No element escapes the discipline of this framework.
Precision under tension
A 12-column grid with 24px gutters anchors every element. The baseline grid at 4px ensures vertical harmony. No element escapes the discipline of this framework.
Three colors rotate 120° around the color wheel: coral (#E8624A), cerulean (#2B6B8A), gold (#D4A843). No single hue dominates. The eye is perpetually triangulated.
Calacatta marble rendered entirely in CSS—no photography. Layered gradients create soft veining at 8-12% opacity. Material weight without image files.
Cards scale from 0.97 to 1.0 as they enter the viewport. No fade, no slide—only a momentary dilation, like an eye adjusting to light. Border pulses in sync, marked by triadic colors.
Cards in a row pulse simultaneously, rejecting the 93% stagger norm. Straight vertical scroll, no scroll-jacking. This percussive energy aligns with Swiss unity and energetic tone.
High-contrast transitional serif. Dramatic thick-thin modulation. Used for all headings. Letterspacced at -0.02em for muscular, tight setting. 700 weight only.
Geometric sans with humanist touches. Used for body text, captions, metadata. 400 and 500 weights. Letterspacced at 0.005em. Anchors the Swiss grid without coldness.
Monospaced companion to DM Sans. 400 weight. Used exclusively for numerical data, code, and datum bar coordinates. Letterspacced at 0.04em. Precision language.
clamp(2.5rem, 6vw, 5.5rem) allows fluid scaling across devices without breakpoints.
clamp(1.5rem, 3vw, 2.75rem) ensures section titles remain readable and proportional.
clamp(0.9rem, 1.1vw, 1.125rem) with 1.65 line-height. Readable at all viewport widths.
0.8125rem (13px) at 0.04em letterspace. Used sparingly where precision demands it.
Scale from 0.97→1.0 + border opacity 0→40% over 400ms ease-out. Triggered by IntersectionObserver at 75% threshold. No stagger—all simultaneous.
Horizontal rule at 61.8% (golden ratio) pulses opacity 20%↔40% on 4-second sine wave. Visual anchor point organizes all content above and below.
On hover, three indicator dots scale 1.0→1.3→1.0 over 300ms, each with 100ms delay between. Clockwise rotation effect marking active state.
SVG circle expands from card center to 120% width over 800ms ease-out, fading 30%→0% opacity. Ring color matches card's triadic accent. Radar-ping effect, triggered once per card.
Card border cycles through all triadic colors over 2.4 seconds when hovered. Coral→Cerulean→Gold in smooth continuous loop. Visual confirmation of interactive zone.