---
version: alpha
name: Porsche
description: Automotive desire made digital — deep black cinematic canvas, Porsche Next proprietary sans-serif at near-weightless 400, pure white as the sole ink, and zero accent color except the grid of car photography that does all the emoting.

colors:
  # Primary surfaces — the homepage is almost entirely black
  background: "#000000"
  surface: "#000000"
  surface-light: "#1a1a1a"     # Lifted dark surface — secondary panels, drawers
  surface-card: "#111111"      # Car-tile hover / card container
  surface-overlay: "#0d0d0d"   # opaque approx of rgba(0,0,0,0.8) overlay — Google format requires hex

  # White — the only ink and on-dark text color
  ink: "#ffffff"
  ink-inverted: "#000000"
  ink-secondary: "#a0a0a0"     # Subdued labels, meta, captions
  ink-muted: "#666666"         # Disabled / placeholder text
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#000000"

  # Interactive — Porsche uses no brand color accent; links appear as near-white purplish tint from browser default
  primary: "#ffffff"            # Buttons/CTAs are white on black
  primary-hover: "#e0e0e0"     # Slight warmth on hover

  # Borders — rare hairlines in a mostly borderless system
  border: "#333333"
  border-subtle: "#1f1f1f"

  # Shadow / depth — no visible box-shadows; depth via full-bleed photography
  shadow-soft: "#000000"       # Fallback placeholder — system uses no measurable shadows

typography:
  display-hero:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 120px
    fontWeight: 400
    lineHeight: 1.18
    letterSpacing: -1px
  display:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 90px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-upper:
    fontFamily: "Porsche Next, Arial Narrow, Arial, Heiti SC, SimHei, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 36px
  2xl: 48px
  3xl: 76px
  4xl: 96px

rounded:
  none: 0px
  pill: 32px       # Filter tabs, category pills — the only non-zero radius in the system
  full: 9999px     # Circular controls (stop/play button, icon badges)

components:
  # Navigation — transparent on dark, white text
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 36px

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-link-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"

  # Primary CTA — white filled, near-pill shape
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Ghost button — white outline on black
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"

  # Filter/category pill tabs
  filter-pill:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 8px 20px
  filter-pill-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    padding: 8px 20px

  # Car tile card — photographic, dark fallback
  card-vehicle:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-vehicle-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-surface}"

  # Content card — editorial dark
  card-editorial:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 36px

  # Hero full-bleed section
  hero-section:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 96px 36px

  # Input (configurator / search)
  input:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  input-focus:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"

  # Meta caption block
  caption-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Porsche Design System

## Overview

Porsche's website is controlled tension made digital — a design system that operates like a darkened stage where every car that enters becomes the show. The canvas is pure black (`{colors.background}`), unbroken and absolute, and it functions as a void from which photography emerges with gallery-quality authority. There are no competing visual interests: no gradient wash, no textured panels, no brand-color overlays. The cars provide all the chromatic life the interface needs, and the system is wise enough to step aside and let them. This is a design language of strategic absence.

The typography is built entirely on Porsche Next — a proprietary narrow sans-serif commissioned specifically for the brand, rendered in a single weight (400) at sizes that scale from 120px for cinematic hero text down to 12px utility labels. The font carries an engineered refinement: its narrow proportions compress beautifully at display sizes, suggesting aerodynamic efficiency without resorting to stretched or condensed letterforms. White text (`{colors.ink}`) on black is the only type treatment that matters here. Nothing is bold in the traditional sense — Porsche Next at regular weight has enough presence that it needs no reinforcement.

What separates Porsche's system from similarly dark automotive peers is its radical restraint with accent color. BMW reaches for blue; Ferrari reaches for red. Porsche reaches for nothing. The brand's famous "Porsche Red" or "Guards Red" never appears in the UI chrome — the system's one accent is pure white (`{colors.primary}`) for buttons and interactive elements. This makes the vehicle photography the singular emotional currency of every page. The 32px pill radius appears only on filter tabs and CTAs — a softening gesture that reads almost biological against the otherwise rectilinear grid — making these interactive elements feel like a different kind of object: touchable, approachable, distinct from the cold architectural surfaces around them.

**Key Characteristics:**
- Absolute black (`{colors.background}`) canvas throughout — no section alternation, no light content panels
- Porsche Next proprietary narrow sans-serif, weight 400 throughout — zero weight variation as a philosophical stance
- White-only type (`{colors.ink}`) — color lives entirely in the vehicle photography
- 32px pill radius (`{rounded.pill}`) for CTAs and filter tabs only — creates a tactile counterpoint to the grid
- Vehicle photography as the system's sole color palette — each car introduces its own palette on a black field
- Full-bleed cinematic photography with smooth gradient overlays (black-to-transparent) for text legibility
- Filter/category pills for browsing car lines — the main navigation pattern for product discovery
- No visible shadows, no elevated surfaces — the monochromatic field eliminates the need for elevation cues
- Extremely generous spacing system based on 36px structural increments
- 19 precise breakpoints from 230px to 1940px — among the widest supported range in the auto category

## Colors

### Primary Surfaces
- **Absolute Black** (`{colors.background}`): The constant canvas. Every page, every section, every component rests on this foundation.
- **Lifted Dark** (`{colors.surface-light}`): Secondary dark surface for interactive states, drawer backgrounds, and slightly elevated UI regions.
- **Card Dark** (`{colors.surface-card}`): The darkest visible surface distinction — used for vehicle tile hover states and content cards.

### Text & Ink
- **Pure White** (`{colors.ink}`): The only text color. All headings, navigation, labels, captions — everything is white on black.
- **Ink Inverted** (`{colors.ink-inverted}`): Used only for text placed on the rare white buttons/CTAs.
- **Ink Secondary** (`{colors.ink-secondary}`): Subdued labels, metadata, captions, secondary descriptors.
- **Ink Muted** (`{colors.ink-muted}`): Disabled states, placeholder text in form fields.

### Interactive
- **Primary White** (`{colors.primary}`): Filled button color — the visual weight of a CTA is its white fill on black, not a brand hue.
- **Primary Hover** (`{colors.primary-hover}`): Subtle warm shift on hover to confirm interactivity.

### Borders
- **Border** (`{colors.border}`): Subtle structural dividers in navigation or sectional separators.
- **Border Subtle** (`{colors.border-subtle}`): Near-invisible dividers for structural separation within dark surfaces.

### Depth
No box shadows exist in the system. Gradient overlays (black-to-transparent) handle legibility over photography. This flattened depth model is intentional — elevation would compete with the photographic depth the cars already provide.

## Typography

### Font Family
- **Primary**: `Porsche Next`, self-hosted narrow sans-serif with fallbacks: `Arial Narrow, Arial, Heiti SC, SimHei, sans-serif`
- **Two weights hosted**: `porsche-next-latin-regular` (400) and `porsche-next-latin-semi-bold` (600) — the entire typographic system operates in these two weights only
- **No Google Fonts, no Adobe Fonts** — fully self-hosted, which confirms Porsche Next's proprietary status

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 120px — monumental hero headline, 1.18 line-height, -1px tracking |
| `display` | 90px — section-level display headings |
| `heading-section` | 48px — primary content section titles |
| `heading-sub` | 32px — subsection titles, configurator labels |
| `body-large` | 20px — feature descriptions, lead paragraphs |
| `body` | 16px — body text, navigation, link text |
| `nav-link` | 16px — navigation items, same spec as body |
| `button-ui` | 16px weight 600 — CTA buttons, the only prominent semi-bold usage |
| `caption` | 14px — image captions, model specifications |
| `label-upper` | 12px weight 600, 0.5px tracking — filter pills, category tags |

### Principles
- **Single family, near-single weight**: Porsche Next at 400 does nearly everything. Weight 600 appears only in buttons and tight labels — a structural decision that gives the type system extraordinary discipline.
- **Narrow proportions as brand statement**: The condensed letterforms read as engineered efficiency — more F1 telemetry than luxury editorial.
- **Size as the only contrast tool**: Without weight variation, hierarchy is established entirely through scale. The 120px → 12px journey is vast.
- **White on black, always**: There is no reverse — no ink-on-white body copy anywhere in the system.
- **Global reach built in**: The fallback stack includes Heiti SC and SimHei (Chinese display), confirming Porsche's multi-market presence.

## Layout

### Spacing System
Base unit: **4px**. The live system shows a strong preference for 36px as the structural increment — appearing 26 times in computed layouts, making it effectively the primary rhythm unit. Scale in YAML above covers xs (4px) through 4xl (96px).

### Grid & Container
- Maximum layout width: 1920px (largest tracked breakpoint), with content constraining at ~1760px
- Hero: Full-bleed, edge-to-edge photographic imagery
- Car range grid: Tile-based layout, typically 3–4 columns at desktop, collapsing to 2 columns and then 1 column
- Content sections: Left-aligned or centered text over full-bleed imagery
- Footer: Multi-column link grid on dark surface

### Whitespace Philosophy
- **Generous structural breathing room**: 36px and 76px increments dominate — sections are separated with substantial airspace, reinforcing the showroom pacing.
- **Photography needs room**: The grid tiles maintain comfortable gaps so individual models read as distinct objects, not a catalog sheet.
- **Text set with purpose**: Body text is never dense; Porsche uses large type at low density rather than paragraphs of small body text.

## Elevation & Depth

| Level | Treatment | Use |
|-------|-----------|-----|
| Level 0 (Canvas) | `{colors.background}` flat | Entire page surface — no elevation baseline |
| Level 1 (Lifted) | `{colors.surface-light}` fill | Interactive hover states, filter pills |
| Level 2 (Photography) | Full-bleed imagery | Cars provide all chromatic and tonal depth |
| Level 3 (Gradient overlay) | Black-to-transparent linear gradient | Text legibility over hero photographs |
| Focus Ring | White 2px outline offset | Keyboard focus on dark interactive elements |

**Shadow Philosophy**: Porsche uses no box-shadows — a radical commitment to flatness that makes sense precisely because the photography provides infinite depth on its own. The 16-stop gradient overlay (black at 80% fading to transparent) is the system's one depth tool, and it's used exclusively to ensure white text reads over dark vehicle imagery. There are no modal shadows, no card elevations, no dropdown shadows. Depth is cinematic or it is nothing.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default for cards, content containers, nav, hero sections, structural elements |
| `pill` | 32px | Filter/category tabs and all CTA buttons — the system's single rounded gesture |
| `full` | 9999px | Circular controls: play/stop buttons, icon badges |

The radius system is binary — either a sharp rectangle or a 32px pill. No mid-range values. The pill appears only on objects meant to be touched: buttons and filter tabs. This creates a clear semantic signal: pill = interactive, rectangle = structural. The pill radius at 32px is noticeably generous — these are wide, soft-looking interactive elements against the angular geometry of the broader system, which is the point.

## Components

The complete component spec lives in the `components:` block above.

### Buttons
- **`button-primary`** — White fill, black text, 32px pill radius. Clean maximum-contrast CTA.
- **`button-ghost`** — Black fill with implied white border, white text, pill radius. Secondary/ghost action on dark backgrounds.

### Filter Pills
- **`filter-pill`** — Category browse control. Dark fill, white label-upper text, 32px pill. The primary product navigation pattern on the homepage.
- **`filter-pill-active`** — White fill, black text. Selected state inverts to match the primary button language.

### Cards
- **`card-vehicle`** — Full-bleed photographic tile, no radius, no padding. The image IS the card.
- **`card-editorial`** — Dark lifted surface with 36px padding. For text + media content sections.

### Navigation
- **`nav-bar`** — Black background, Porsche Next 16px white links. Logo and navigation live on the same dark surface as the page, creating a continuous plane.

### Inputs
- **`input`** — Pill-shaped form element (32px radius) matching the CTA language. Used in configurator and search contexts.

### Hero
- **`hero-section`** — Full-bleed dark, 120px Porsche Next white headline, 96px vertical padding. The defining layout pattern.

## Do's and Don'ts

### Do
- Use absolute black (`{colors.background}`) as the only canvas — no section alternation
- Keep Porsche Next at weight 400 for all display and body text — weight 600 is reserved for buttons and tight labels only
- Apply the 32px pill radius (`{rounded.pill}`) only to interactive elements: buttons and filter tabs
- Let vehicle photography provide all chromatic contrast — the UI never competes with the cars
- Use the black-to-transparent gradient overlay for text legibility over photography
- Set display sizes generously: 90–120px headlines maintain the cinematic scale appropriate to the subject matter
- Maintain 36px as the primary structural spacing increment for section rhythm
- Use `{colors.ink-secondary}` for metadata and specifications — white-on-white differentiation

### Don't
- Don't introduce brand accent colors (red, yellow, blue) into the UI chrome — Porsche's identity rests on restraint
- Don't add box-shadows to any component — the flat photographic system renders shadows semantically meaningless
- Don't round edges beyond `{rounded.pill}` (32px) — there is no intermediate radius in the system
- Don't use mid-range border-radius (4px–16px) — this creates a foreign design language
- Don't display low-density text blocks in small sizes on black — Porsche sets large type at low density; do not invert this
- Don't use weight 700 or 900 — the semi-bold (600) in `{typography.button-ui}` is the maximum weight in the system
- Don't add light-surface panels within a Porsche layout — the monochromatic dark canvas is non-negotiable
- Don't apply letter-spacing to display headlines — tracking is reserved for the `label-upper` utility token only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Micro | 230–280px | Absolute minimum supported — legacy small-screen |
| Mobile XS | 280–375px | Single column, minimal padding, stacked nav |
| Mobile | 375–480px | Standard single-column, hamburger navigation |
| Mobile Large | 480–760px | Slightly wider tiles, 1–2 column vehicle grid |
| Tablet Small | 760–1000px | 2-column vehicle grid begins |
| Tablet | 1000–1300px | 3-column vehicle grid, sidebar navigation transitions |
| Desktop | 1300–1760px | Full layout — 4-column vehicle grid, expanded nav |
| Large Desktop | 1760–1920px | Maximum content width, full-bleed photography |
| Ultra-wide | 1920–1940px | Edge padding for extreme viewports |

### Touch Targets
- Filter pills: 32px pill radius with 8px 20px padding — minimum 44px touch height achieved
- Primary buttons: 32px pill with 12px 24px padding — WCAG-compliant touch target
- Navigation: 16px body text with 8px 16px padding per link

### Collapsing Strategy
- **Navigation**: Full horizontal desktop nav → hamburger icon + slide-in drawer on mobile
- **Vehicle grid**: 4 columns → 3 → 2 → 1 as viewport narrows
- **Hero headlines**: 120px display → scales down to ~48px on mobile, maintaining weight
- **Filter pills**: Horizontal scroll row on mobile, full row on desktop
- **Footer**: Multi-column grid → stacked accordion on mobile

### Image Behavior
- Hero photography: full-bleed `object-fit: cover` at all breakpoints
- Vehicle tiles: aspect-ratio locked, scales with column width
- Mobile: vehicle thumbnails maintain 3:2 or 16:9 ratios, never cropped arbitrarily
- Lazy loading used for below-fold vehicle tiles

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` — absolute black
- All text: `{colors.ink}` — pure white
- Secondary text: `{colors.ink-secondary}` — medium gray
- CTA fill: `{colors.primary}` — white
- CTA text: `{colors.on-primary}` — black
- Hover surface: `{colors.surface-light}` — lifted dark
- Border: `{colors.border}` — subtle dark line

### Example Component Prompts

- "Create a hero section on `{colors.background}` (pure black) with a full-bleed vehicle photograph covering the entire viewport. Overlay a 16-stop black-to-transparent gradient from the bottom 40% for text legibility. Position a white Porsche Next headline at 120px weight 400, line-height 1.18, -1px letter-spacing, left-aligned with 36px left padding and 96px bottom padding. Add a white ghost button (pill shape, 32px radius, 12px 24px padding, weight 600) below the headline."

- "Design a vehicle grid section on `{colors.background}` using a 4-column tile layout. Each tile shows a full-bleed car photograph (no border, no radius, no padding). On hover, a semi-transparent dark overlay (`{colors.surface-overlay}`) fades in with a white model name in Porsche Next 20px weight 400 at the bottom. Filter pills above the grid use `{colors.surface-light}` fill, `{colors.ink}` text, Porsche Next 12px weight 600 with 0.5px tracking, 8px 20px padding, and `{rounded.pill}` (32px) radius. Active pill inverts to white fill / black text."

- "Build a navigation bar on `{colors.background}` with the Porsche wordmark logo left-aligned. Navigation links in Porsche Next 16px weight 400 white text with 8px 16px padding. No background color change on hover — subtle lifted dark surface (`{colors.surface-light}`) on the hover area. Right side: white ghost search icon + language selector. No border or shadow between nav and page content — the nav sits flush on the same black plane."

- "Create an editorial content card on `{colors.surface-light}` (dark lifted surface) with 36px padding. Headline in Porsche Next 48px weight 400 white, line-height 1.22. Supporting body text in Porsche Next 16px weight 400 `{colors.ink-secondary}` (mid gray), line-height 1.50. A white primary CTA button at the bottom: 16px weight 600, 12px 24px padding, `{rounded.pill}` radius. No border, no shadow, no decoration."

- "Design a model specification row: vehicle name in Porsche Next 32px weight 400 white; specification labels in Porsche Next 12px weight 600 `{colors.ink-secondary}`, 0.5px letter-spacing (`{typography.label-upper}`); spec values in Porsche Next 14px weight 400 white (`{typography.caption}`). Layout is two-column — spec label left, value right — with `{spacing.xl}` (36px) row spacing on `{colors.background}`."

- "Build a model selector filter row: horizontally scrollable row of pills on `{colors.background}`. Inactive pills: `{colors.surface-light}` background, `{colors.ink}` text, Porsche Next 12px weight 600, 0.5px tracking, 8px 20px padding, `{rounded.pill}` radius. Active pill: `{colors.primary}` (white) background, `{colors.on-primary}` (black) text, same typography and radius. No outline borders — the fill IS the differentiation."

### Iteration Guide
1. Start with `{colors.background}` — commit to the black canvas before adding anything else
2. The vehicle photographs are the design's color palette — let them be the hero and keep all UI chrome neutral
3. Pill radius (`{rounded.pill}` 32px) exists ONLY on interactive elements (buttons, filter tabs) — structural elements are sharp rectangles
4. Weight is weight 400 for everything typographic; weight 600 only for button labels and utility labels
5. No accent color anywhere — white IS the accent; its presence against black creates all the emphasis needed
6. Spacing rhythm is 36px — when in doubt, use a 36px increment for section and component separation
7. Black-to-transparent gradient overlays are the one depth tool — use them over photography, never as decorative gradients

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Porsche. Brand names and trademarks belong to their respective owners.