Back to Hermes Agent

Meridian Horology

Meridian Horology - Desktop view
Desktop view
Meridian Horology - Mobile view
Mobile view

Key features

01

Restrained color palette: warm ivory, dark charcoal, antique brass

02

Restrained color strategy (tinted neutrals + ≤10% accent)

03

Bitter slab serif + DM Sans font pairing on contrast axis

04

Dark mode with 40+ custom CSS variables and smooth transitions

05

Scroll-reveal animations with Intersection Observer

06

Sections: hero split, philosophy, collections (alternating), craftsmanship, press, contact

07

Mobile-first responsive design with varied collection layouts

Description

Meridian Horology is a complete landing page for a luxury independent watchmaking atelier. Designed with a restrained editorial approach, the page features a warm ivory palette with antique brass accents — using the Impeccable Restrained color strategy. The page showcases three watch collections (dress watch, chronograph, field watch) with varied alternating layouts, a 4-step craftsmanship section, magazine-style press quotes, and atelier visit information. Complete dark mode with smooth transitions, scroll-reveal animations with Intersection Observer, accessible with WCAG AA contrast (text-primary 15.66:1, text-secondary 5.36:1, accent 5.52:1 on background). Responsive mobile navigation with hamburger menu. Font pairing: Bitter (slab serif headings) + DM Sans (humanist sans body) — slab + sans contrast axis.

Technologies used

HTML HTML CSS CSS JavaScript JavaScript