Watchmaking · Light

Caliber

A white product studio: the watch tumbles in and lands in the hero, the camera dives into the movement in macro and then plunges it into a splash of light-blue water, with text that resolves out of blur and serif italic words.

Palette

--bg#F8F8F8
hero studio background
--bg-2#E9E9E7
warm-gray background of the content sections
--water#D3E5EF
light blue of the underwater scene
--text#161616
headlines, solid buttons
--text-2#5E5E5C
captions, specs (6.1:1 on --bg, 5.4:1 on --bg-2)
--accent#C9A15A
gold of the watch hands, transitional color of revealed text
--line#D6D6D3
spec sheet dividers

Typography

Display: neo-grotesque regular (400), normal case, tracking -0.01em; headline paragraphs at clamp(22px, 2.2vw, 34px) with line-height 1.15 — suggestions: Inter Display / Geist
Emphasis: high-contrast italic serif for one or two words per sentence — suggestions: Instrument Serif Italic / Playfair Display Italic
Body: grotesque 400, 11–13px, gray
Support/labels: 8–9px micro uppercase with +0.2em tracking for nav, buttons and overlines
Treatments: rounded photo thumbnails inline within the sentence (between words); text that appears left to right, going from blur and gold to sharp and black; superscript ® symbol

Sections

Nav — 3 social icons on the left, minimalist circular logo in the center, "MENU" + hamburger on the right.
Hero — large watch on the right over a studio background; on the left a headline sentence with inline thumbnails, revealed word by word, and a rectangular black button.
Spin — the watch moves to center-left and rotates to show its side.
Macro — the camera enters the skeletonized dial; title with an italic overlaid on the macro shot.
Splash — the watch drops into the water and forms a crown of splashes against white.
Underwater — watch floating in blue water with caustics and bubbles, centered sentence in white italic.
Manifesto — gray background, large paragraph on the left with an italic word, watch in profile on the right.
Collection — 4 variations in a row (different case colors) with a small caption.
Spec sheet + after-sales — wide workbench photo, spec table on the right, title with blur reveal.
CTA — centered title with an italic second line, text and black button; small watch below; minimal footer.

Motion and interaction

Spinning drop: load → the watch enters from the top spinning (frame sequence or video) and settles in the hero.
Scroll film: scroll scrub → canvas frame sequence with the watch spinning, the camera entering the movement, the splash and the dive; Lenis + ScrollTrigger (or hand-calculated progress).
Blur-to-sharp text: scroll/load → each word goes from blur(10px), opacity .2 and gold to sharp and black, left to right.
Inline thumbnails: load → image pills grow from width 0 to 44px inside the sentence.
Italic over macro: scroll → the title passes over the image with mix-blend difference.
Caustics: continuous → rippling light on the water (looping video or shader).
Variations: hover → watch rises 8px and caption lights up.
Multipage: menu click → page transition with a white fade.

Components

Solid button: black rectangle, white 8px uppercase text with .2em tracking, 28px height, no radius.
Inline thumbnail: 44×22px pill, 6px radius, cover image, aligned to the baseline.
Spec row: 9px label on the left, 9px value on the right, 1px --line divider.
Variation card: product PNG on a transparent background + 9px name + gray reference.
Logo: 14px ring with a thin stroke.
Social icons: 10px monochrome.