A gallery-grade monochrome studio where the camera and the red dot are the only things allowed to carry identity — precise, quiet and exacting. The chrome is a strict grey ladder (#f5f5f5 down to #141414) over warm-black #222222 ink and white, and the ONLY chromatic value is Leica red #e20612, rationed almost entirely to the circular logo mark and a tiny CTA dot; it is never a button fill or a link. The whole site is ONE family, Outfit (a rounded geometric sans across 6000/6000 elements), and its signature is restraint by WEIGHT rather than tracking: body and nav sit at a light 300, the display at only 400, and tracking stays NORMAL even at the 76px hero. Geometry is deliberately mixed — fully-rounded CTA pills (24px white with a red dot, 9999px outline) beside a SQUARED 0px country picker. Depth is refused: near-zero shadows, 1px #d1d1d1 hairlines carry all the structure, and the soft grey hero vignette is a raster photograph, not a CSS effect (zero gradients on the page). Motion is a slow color/background 0.5s cubic-bezier(0.4,0,0.2,1) with only nav-sticky and fade keyframes. Anti-patterns worth fixing when borrowing: inputs set outline:none on focus and there is no reduced-motion block.
⚠ site only
Browse Leica in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: leica-camera.com/en-US (live DOM, computed styles), 2026-07-26 (desktop 1512px). Coverage: home page. No dashboard/login surface (site only). No og:image on the page — gallery thumb uses the hero camera-overview raster. Reality check: hint ("precise monochrome, red-dot restraint") is accurate and sharpened. Chrome is a strict grey ladder + warm-black#222222+ white; the ONLY chromatic value is Leica red#e20612, and it is rationed almost entirely to the circular logo mark and a small CTA dot — never a fill or a link colour. The signature the hint misses: the whole site is ONE family, Outfit (a rounded geometric sans, 6000/6000 elements), held at LIGHT weights (300 body/nav, 400 display) with normal tracking even at the 76px hero — restraint by weight, not by tracking. Hero atmosphere (the soft grey vignette) is a raster photograph, not a CSS gradient (0 gradients on the page).
Precise, quiet, gallery-grade product minimalism — a monochrome studio where the camera and the red dot are the only things allowed to carry identity. Everything is set on a neutral grey ladder from #f5f5f5 down to #141414, punctuated by a single Leica red that appears almost nowhere but the logo. Structure is flat: 1px #d1d1d1 hairlines do the dividing, shadows are effectively absent, and the one type family stays light and unhurried so nothing competes with the photography. Corners mix a squared country picker with fully-rounded CTA pills. It deliberately avoids gradients, decorative colour, bold weights, and visual noise. Feels: precise, quiet, editorial, exacting.
| Token | Hex | Role / usage |
|---|---|---|
| warm-black | #222222 | Primary text (5716 uses — the ink of the site) |
| grey-900 | #141414 | Strongest text (bold labels) |
| near-black | #1d1d1f | Country-picker / utility button text |
| grey-700 | #333333 | Dark surface / deep text |
| grey-600 | #6c6c6c | Secondary text |
| dark-grey | #8e908f | Tertiary / muted |
| white | #ffffff | Text over dark/photographic heroes |
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Cards, nav, page base |
| grey-050 | #f5f5f5 | Dominant section fill (393 uses) |
| grey-100 | #e7e7e7 | Alt panel fill |
| grey-200 | #d1d1d1 | Hairline border (most-used border, 22×) |
| grey-300 | #b5b4b4 | Stronger border |
| light-grey | #d1d4d3 | Muted divider |
| grey-400 | #9a9999 · grey-500 #828282 · grey-800 #1f1f1f | Remaining ladder steps |
| Token | Hex | Role / usage |
|---|---|---|
| leica-red | #e20612 | THE brand colour — circular logo mark + small CTA dot only |
| dark-red | #b5050e | Red hover / pressed |
Rule: chrome stays monochrome; Leica red is reserved for the logo dot and tiny accents — never a button fill, link, or large area.
Outfit, sans-serif — a single rounded geometric sans across the entire site. Outfit is an open Google font, so the preview loads the real face (no substitution).#222222.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 76 / 85.12 | 400 | normal |
| Section (h2) | 46 / 51.98 | 400 | normal |
| Sub (h3) | 24 / 32 | 400 | uppercase, normal |
| Eyebrow / lead | 24 / 32 | 400 | normal |
| Nav | 18 / 28 | 300 | normal |
| Body | 16 / 24 | 300 | normal |
| Button | 16 / 24 | 600 | normal |
| Strong label | 16 / 24 | 700 | normal |
Patterns: weight lives LIGHT (300 for body & nav); the display sits at only 400 and never bolds. Tracking is normal at every size — no tightening at 76px, no opening at small sizes. Case is mostly sentence; h3 sub-labels go uppercase.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.