Meridian Horology
Key features
Restrained color palette: warm ivory, dark charcoal, antique brass
Restrained color strategy (tinted neutrals + ≤10% accent)
Bitter slab serif + DM Sans font pairing on contrast axis
Dark mode with 40+ custom CSS variables and smooth transitions
Scroll-reveal animations with Intersection Observer
Sections: hero split, philosophy, collections (alternating), craftsmanship, press, contact
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
CSS
JavaScript