---
name: Leica
description: "A masterclass in how a heritage brand can use minimal UI to elevate high-quality photographic content into a gallery-like experience."
version: alpha

colors:
  background: "#F5F5F5"
  primary: "#222222"
  secondary: "#333333"
  tertiary: "#D50000"
  neutral: "#D1D1D1"
  bg-soft: "#FFFFFF"
  line: "rgba(209, 209, 209, 0.3)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.125
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 24px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A heritage-first visual showcase for premium photographic hardware.

*A high-end optical instrument museum.*

## Colors

Neutral backgrounds with high-contrast text and a signature red brand anchor.

- **Background (`#F5F5F5`)** — uses `bg` token
- **Primary text (`#222222`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#D50000`)** — uses `accent` token
- **Muted (`#D1D1D1`)** — uses `muted` token
- **Borders (`rgba(209, 209, 209, 0.3)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* A clear vertical rhythm based on 4px increments with significant breathing room (96px) between major content blocks.

## Elevation & Depth

- Borders: Subtle 1px or 2px borders in dark neutral or light gray tones.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 24px
- `pill`: 9999px

## Components

- **button:** Pill-shaped (radius: 9999px) with high contrast, often containing a small brand-colored dot indicator.
- **card:** Imagery-heavy with subtle or no visible borders, using generous internal padding.
- **chip:** Minimal, often text-based links in the footer navigation.
- **input:** Clean, minimal fields with subtle borders.
- **hero:** Full-viewport immersive photography with overlaid typography and a prominent call-to-action.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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