Design System
Analysis of Leica Camera

A near-monochrome system of warm-black ink on white and pale-grey bands, set in one geometric sans at light and regular weights — hierarchy from size, never boldness — with Leica's signature red held in reserve for the brand mark.

01 — Foundations

Colour Palette

02 — Foundations

Typography

One typeface — Outfit — carries the entire site. Weight stays light (300) to regular (400) even at 68px; hierarchy is built from size and whitespace, not bold. Letter-spacing is left at normal throughout.

03 — Components

Button Variants

button-primary
The real Leica CTA: a solid dark rectangle, white label, near-square corners. Colour stays out of the way.
button-dark
Same dark fill used for primary actions on light and inverted bands alike — one button system.
button-secondary
Outlined ghost on white — 1px ink border, no fill, for the lower-priority action beside a CTA.
button-pill
Soft grey pill for filters and category chips, fully rounded.
link · inline
PhotographyStories
Inline links are ink-coloured and underlined — never the brand red.
04 — Components

Cards & Surfaces

Product and editorial tiles sit flat on the page with 24px-rounded media, bordered only by a hairline. They lift with a soft directional shadow on hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px base with a 4px half-step, stepping 8 / 12 / 16 / 24 / 32 / 48 for component padding and section rhythm.

07 — Foundations

Border Radius

Geometry stays sharp. Inputs are effectively square (1px); controls round modestly; only large media cards round to 24px, and pills go fully round.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The resting state for nearly every surface; the page reads flat and paper-like.
Level 1 — a soft directional lift (4px 4px 8px rgba(34,34,34,0.2)) used when a media tile is hovered.
Level 2 — a deeper centred shadow for overlays and popovers; extrapolated from the system.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxTiles stack toward one column; hero type drops to ~48px; nav folds into a menu trigger.
Tablet768–1023pxFour-column product/blog grids collapse to two; gutters tighten.
Laptop1024–1279pxFull multi-column grids return; container approaches max width.
Desktop≥ 1280pxCentred 1200px container with 40px gutters; full-bleed hero imagery.

Layout logic: full-bleed hero with white overlaid type, then alternating white and #f5f5f5 content bands separated by tone rather than hard rules.

Product Tiers

Sample pattern — Leica doesn't publish pricing plans, so these demonstrate the card/pricing component using brand-appropriate content.

Compact
$1,495body only
The everyday Leica — pocketable, fixed-lens, full-frame character.
  • Fixed 28mm Summicron
  • 24MP full-frame sensor
  • Leica Looks profiles
  • 2-year warranty
M Rangefinder● Most iconic
$5,295body only
The camera that defined Leica — manual, mechanical, timeless.
  • Optical rangefinder
  • 60MP full-frame sensor
  • Sapphire-glass display
  • Lifetime craftsmanship service
SL System
$6,995body only
Professional mirrorless — autofocus, video, L-Mount versatility.
  • Phase-detect AF
  • 8K video capture
  • Weather-sealed body
  • Priority pro support

Data Table

Sample pattern — a registered-products view showing the table, status pill, and pager components.

SerialModelLensStatusWhen
5012-447Leica M11Summilux 35mmRegisteredApr 2026
5012-389Leica Q3Summilux 28mmRegisteredMar 2026
5012-201Leica SL3Vario-ElmaritIn serviceFeb 2026
4998-776Leica M6Summicron 50mmRegisteredJan 2026
4998-540Leica D-Lux 8Vario-SummiluxIn serviceDec 2025
1–5 of 412
‹123›

Account Forms

Sample pattern — the Leica Account sign-in and registration using the form and button components.

Sign in

Your Leica Account

OR
Create account

Join the Leica World

OR