# Leica · Design system migration spec

> Source: https://leica-camera.com  ·  Curated by OpenDesign  ·  en

> A masterclass in how a heritage brand can use minimal UI to elevate high-quality photographic content into a gallery-like experience.

## 1. Identity DNA

The Leica design system is built around the principle of restraint, treating the interface as a high-end optical instrument museum where every element is precisely engineered to support, not overshadow, the photographic content. The aesthetic prioritizes clarity, heritage, and the quiet authority of craftsmanship.

**One-liner:** A heritage-first visual showcase for premium photographic hardware.
**Keywords:** Precision · Heritage · Optics · Craftsmanship · Visual Storytelling
**Analogy:** A high-end optical instrument museum.

## 2. Color

The palette is strictly neutral, composed of whites, grays, and deep blacks, creating a clean, high-contrast backdrop. A single, iconic red brand accent provides a singular point of visual anchoring throughout the system.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F5F5` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#222222` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#D1D1D1` | placeholder |
| `--accent` | `#D50000` | single accent |
| `--line` | `rgba(209, 209, 209, 0.3)` | divider |

**Color principle:** Neutral backgrounds with high-contrast text and a signature red brand anchor.

The principle is absolute: color exists only to support the content and mark the brand, never to decorate.

## 3. Typography

Typography employs a clean, humanist sans-serif for all primary interfaces, reinforcing a tone of functional precision. Generous line-heights are maintained for readability in long-form descriptions, while uppercase is reserved for small utility labels.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.125 | 600 | -0.5px | Hero headlines and section titles |
| body | 16px | 1.5 | 400 | 0px | Standard interface text and descriptions |
| caption | 12px | 1.33 | 400 | 0px | Utility labels and small metadata |

**Type rules:**
- Use a clean, humanist sans-serif for all primary interfaces.
- Maintain generous line-height for readability in long-form descriptions.
- Use uppercase sparingly for small utility labels.

## 4. Spacing

A clear vertical rhythm based on 4px increments provides a consistent structure, with significant breathing room of 96px between major content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 56 / 64 / 80 / 88 / 96 px
- **Rhythm:** A clear vertical rhythm based on 4px increments with significant breathing room (96px) between major content blocks.

## 5. Surfaces

Depth is suggested through minimal means, favoring clean edges over decorative shadows. Subtle 1px or 2px borders in dark neutral or light gray tones provide the necessary separation.

- **Radius:** sm 4px · md 8px · lg 24px · pill 9999px
- **Borders:** Subtle 1px or 2px borders in dark neutral or light gray tones.

## 6. Layout

The layout skeleton is a responsive 12-column grid designed to transition seamlessly from full-width, immersive hero imagery to multi-column card arrangements. Generous internal padding and spacing allow high-quality photographic assets to breathe.

- **Container max:** 1280px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A responsive 12-column grid that transitions from full-width hero imagery to multi-column card layouts.

## 7. Motion & Interaction

Motion is smooth and controlled, with transitions used primarily for functional feedback rather than flourish. Fast-paced (150ms) shifts handle UI micro-interactions, while elegant fades and slower transitions (300ms-500ms) are reserved for major state changes.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover.
  - Elegant fade-ins for primary content sections.

- **Hover:** Subtle color shifts or opacity changes, maintaining a refined feel.
- **Click:** Direct navigation or expansion of primary content cards.
- **Transition:** Fast (150ms) for UI micro-interactions, slower (300ms-500ms) for major state changes.
- **Keyboard:** Standard focus outlines for accessibility, though not highly visible in the screenshot.

## 8. Voice & Don'ts

The editorial voice is authoritative and refined, with bold, clear headlines that often highlight specific product names or artistic themes. Language is direct and action-oriented, avoiding any playful or overly casual tone that would dilute the brand's precision.

- **Tone:** Authoritative, refined, and deeply focused on the craft of photography.
- **Headline style:** Bold, clear, and descriptive, often highlighting specific product names or artistic themes.
- **CTA style:** Direct and action-oriented, frequently using the signature red dot as a visual anchor.
- **Avoid:** Flashy or neon colors / Playful or overly casual language / Cluttered layouts that distract from the imagery

### Don'ts
- ❌ Don't use vibrant gradients — screenshot shows a flat, high-contrast neutral palette.
- ❌ Don't use heavy drop shadows — screenshot shows almost no shadows, favoring clean edges.
- ❌ Don't use a dark-mode default — screenshot shows a predominantly light (#F5F5F5/#FFFFFF) theme.
- ❌ Don't use decorative fonts — screenshot shows a consistent, functional humanist-sans-serif.
- ❌ Don't use loud or multi-colored UI elements — screenshot shows red as the only high-chroma accent.
- ❌ Don't use cluttered grids — screenshot shows large, breathing room between high-quality photographic assets.

The system deliberately avoids vibrant gradients, heavy shadows, decorative fonts, and cluttered layouts, ensuring nothing competes with the primary content.

## System Prompt (paste into AI tool)

```
This is the official website for Leica Camera, a premium manufacturer of photographic hardware. The design DNA is characterized by a 'premium, restrained' aesthetic that prioritizes large-scale photographic content over dense UI. The primary palette is neutral (ink: #222222, bg: #F5F5F5) with a single, iconic brand-red (#D50000) used for the logo and small accents. Typography is strictly functional, using a clean humanist-sans-serif (Outfit/Noto Sans) at a 16px base size. The layout uses a generous 12-column grid with significant vertical spacing (96px) to let the photography breathe. Critical constraints: never use neon or saturated multi-color schemes; maintain large, empty spaces around visual assets; and avoid decorative or playful UI elements that would distract from the precision-engineered brand image.
```
