# Leica — Marketing Site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Text & ink
| 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 |

### Surfaces & borders
| 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 |

### Accent
| 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.

## 3. Typography Rules

- Font stack: `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).
- Body: 16px / 24px / weight **300** (light) / `#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.

## 4. Component Stylings

### Buttons
- **Primary pill (hero CTA)**: bg `#ffffff`, text `#222222`, radius 24px, h 48px, 20px/600, padding `10px 16px 10px 64px`, carries a small red `#e20612` dot; no shadow.
- **Outline pill (on dark/photo)**: transparent bg, text `#ffffff`, 2px solid `#ffffff` border, radius 9999px, h 40px, 14px/300.
- **Outline pill (on light)**: transparent bg, text `#222222`, 2px solid `#222222` border, radius 24px, h 36px, 16px/600.
- **Utility button (country picker)**: bg `#ffffff`, text `#1d1d1f`, radius 0px (squared), h 45px, 1px border.

### Inputs
- Border 1px, radius squared/small; placeholder in grey. Hover: border-color darkens to `#222222`. Focus-visible: the theme sets `outline: none` / transparent 2px — **no visible focus ring (anti-pattern)**; recommended replacement below.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Input | 1px grey border | border `#222222` | outline:none (transparent 2px, offset 2px) — **suppressed** | — | opacity 0.5 |
| UI button (loose) | grey fill | bg `#ededed`, text `#2b2b2b`, border `#cccccc` | — | active bg deepens | opacity 0.5 |

Recommended focus ring (site omits one): `0 0 0 2px #222222` or a 2px `#e20612` outline at 2px offset.

### Cards / panels
- White or `#f5f5f5` fill, 1px `#d1d1d1` hairline, radius 4px (small) — flat, essentially shadowless. Rare elevation: `rgba(0,0,0,.08) 0 4px 12px`.

## 5. Layout Principles

- Container widths tokenised: `--container 1920px`, `--container-max 2560px`, narrow `880/600/315px`.
- Full-bleed photographic heroes with text bottom-left; nav is a transparent bar over the hero (logo centered, links left, utility icons + Online Store pill right).
- Section rhythm alternates full-bleed imagery with `#f5f5f5` bands; dividers are 1px hairlines, not shadows.
- Nav height ~76px; centered circular red logo mark is the fixed anchor.

## 6. Depth & Elevation

- Radius scale: 4px (cards) · 24px (CTA pills) · 9999px (outline pills) · 0px (utility/country picker) · 256px (avatars/round media).
- Borders: 1px `#d1d1d1` (default hairline), 2px `#222222` / 2px `#ffffff` (outline buttons), 2px transparent (reserved focus slot).
- Elevation: near-flat. Most elements carry `none`; the single real shadow is `rgba(0,0,0,.08) 0 4px 12px`. Borders and photography carry structure, not shadows.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background-color, border-color, fill, stroke | 0.5s | cubic-bezier(0.4,0,0.2,1) | links, buttons (dominant, 174×) |
| background-color | 0.1s | ease-in-out | quick hovers (112×) |
| all | 0.2s | ease | small chrome |
| width | 0.3s | ease-in-out | sticky nav resize |

House transition: **color/bg/border 0.5s cubic-bezier(0.4,0,0.2,1)** — slow, smooth, ease-out. Keyframes observed: `go-sticky` / `go-unsticky` (nav sticky enter/exit, 0.3s), `draw-check` (checkmark draw), `fade-in`, `scale-up`, `splide-loading` (carousel). `onetrust-fade-in` is the consent widget (excluded). No animation library detected (no GSAP/Framer/Lenis). **No `prefers-reduced-motion` block (0) — recorded as an anti-pattern.**

## 8. Backgrounds, Effects & WebGL

None built in CSS — **0 gradients, 0 backdrop-filters, 0 canvas/WebGL, 0 video, 0 grain**. The soft grey hero vignette is a raster photograph (5 raster layers on the page), not a CSS effect. Atmosphere is entirely photographic.

## 9. Do's and Don'ts

### Do
- Keep all chrome monochrome on the grey ladder (`#f5f5f5`→`#141414`) with `#222222` as the ink and white for text over photography.
- Reserve Leica red `#e20612` for the circular logo mark and tiny dot accents only.
- Use Outfit as the single family; keep body & nav at weight 300, display at 400.
- Keep tracking normal at every size, including the 76px hero.
- Use 1px `#d1d1d1` hairlines (not shadows) for structure; keep surfaces flat.
- Let full-bleed product photography carry the mood.
- Mix a squared 0px utility control with fully-rounded CTA pills (24px / 9999px).

### Don't
- Don't use Leica red as a button fill, link colour, or large area.
- Don't go bold — nothing exceeds weight 400 for display; body stays 300.
- Don't tighten tracking on large headings or open it on small text.
- Don't add CSS gradients, glows, or drop shadows — the page is flat and photographic.
- Don't introduce a second type family or accent colour.
- Don't ship inputs with a suppressed focus ring — add the recommended one.

## 10. Responsive Behavior

- Breakpoints (from stylesheets): 400, 425/426, 440, 530, 550, 600, 640, 767/768, 896, 1024, 1200, 1280, 1920px — a dense device-targeted ladder (min & max pairs), reflecting a Drupal theme with many bespoke seams.
- Nav collapses to a hamburger on narrow widths; heroes reflow text bottom-left; grids collapse to single column.
- No dark theme (`darkSchemeBlocks` 0, no toggle). No container queries. No reduced-motion block.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` / `#f5f5f5` · Text `#222222` · Muted `#6c6c6c` · Border `#d1d1d1` · Accent `#e20612` (logo/dot only)
- Font: `Outfit, sans-serif` · Body: 16px/300 · Radius: 4px card / 24px & 9999px pills / 0px utility · Control height: 40–48px
- Focus: site suppresses it — use `0 0 0 2px #222222` · Hover fill: `#ededed`

<leica_design_language>
Use the Leica design language: a gallery-grade monochrome studio. White and `#f5f5f5` canvas, warm-black `#222222` ink, a full grey ladder (`#f5f5f5`/`#e7e7e7`/`#d1d1d1`/`#8e908f`/`#6c6c6c`/`#333333`/`#141414`), and white text over full-bleed product photography. The ONLY chromatic value is Leica red `#e20612`, reserved for the circular logo mark and a small CTA dot — never a fill or link. One family, Outfit (rounded geometric sans), held LIGHT: body & nav weight 300, display weight 400, section 400 uppercase subs; tracking stays NORMAL at every size, including the 76px hero. Buttons are fully-rounded pills (white fill with a red dot, or 2px outline in white/`#222`) at 24px/9999px radius and 40–48px height, alongside a squared 0px utility control; cards are 4px radius with 1px `#d1d1d1` hairlines and essentially no shadow. Structure comes from borders and photography, not elevation. Motion is a slow color/bg 0.5s cubic-bezier(0.4,0,0.2,1); no gradients, glows, canvas or video anywhere. Feels: precise, quiet, editorial, exacting. Avoid: red as a fill or link, any weight above 400, tightened or opened tracking, CSS gradients/shadows, a second type family or accent, and a suppressed focus ring.
</leica_design_language>