---
name: Vitra
description: "A benchmark for high-end product sites that use restraint and photography to convey brand value."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#101010"
  secondary: "#333333"
  neutral: "#767676"
  bg-soft: "#F7F7F7"
  bg-quiet: "#E6E6E6"
  line: "rgba(204,204,204,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 17px
    lineHeight: 1.9
    fontWeight: 500
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.8
    fontWeight: 500
    letterSpacing: "2px"
  micro:
    fontFamily: geometric-sans
    fontSize: 13px
    lineHeight: 1.8
    fontWeight: 500
    letterSpacing: "1px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

Premium modern furniture brand showcasing high-end design through cinematic imagery and restrained minimalism.

*A premium architectural catalog brought to the web, blending product showcase with editorial storytelling.*

## Colors

Strict monochrome palette relying on high-contrast photography for visual interest.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#101010`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Muted (`#767676`)** — uses `muted` token
- **Borders (`rgba(204,204,204,1.0)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Use geometric sans-serif throughout
- Maintain a weight of 500 for primary text
- Uppercase tracking for small labels
- Left-aligned paragraphs with generous line-height

## Layout

Full-bleed hero images with centered text, followed by tight two-column product grids.

*Rhythm:* 8px base unit with generous 64px-96px section spacing.

## Elevation & Depth

- Borders: Thin 1px solid borders in light gray for subtle separation, no drop shadows.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text-only or outline buttons with thin borders, uppercase labels, and generous padding.
- **card:** Image-dominant cards with centered text captions below, no borders or backgrounds.
- **chip:** N/A
- **input:** Minimal search inputs with thin bottom borders.
- **hero:** Full-viewport cinematic photography with vertically and horizontally centered text overlays.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows — screenshot shows flat design relying on photography depth.
- Don't use rounded corners on buttons or cards — screenshot shows sharp, square edges.
- Don't use bright accent colors — screenshot shows a strict monochrome palette.
- Don't use bold font weights for body text — screenshot shows medium weight (500) for all text.
- Don't use dense text blocks — screenshot shows generous line-height and paragraph spacing.
- Don't use decorative borders — screenshot shows only thin, functional 1px lines.

---

## System Prompt (paste into AI agent)

```
Vitra's visual system is a premium, editorial-driven furniture showcase. It uses a strict monochrome palette centered on white (#FFFFFF), near-black ink (#101010), and soft grays (#F7F7F7, #333333, #767676). Typography is a clean geometric sans-serif used consistently at a medium weight (500) with generous line-heights and letter-spacing for labels. The layout is defined by full-bleed, cinematic photography and minimal, sharp-edged UI components. Critical constraints: never use drop shadows, never use bright accent colors, and never use rounded corners on UI elements like buttons or cards.
```