Porsche

---
version: alpha
name: Porsche-design-analysis
description: Porsche's design language is a precision luxury automotive experience anchored on a deep black and a signature racing red `#b12b28` against warm ivory surfaces. Typography is sharp and engineered, imagery is cinematic, and the layout is full-bleed and confident. The red is reserved for performance and CTA moments, while black and ivory carry the timeless, engineered elegance.

colors:
  primary: "#b12b28"
  primary_dark: "#d5001c"
  primary_light: "#e5413c"
  canvas: "#ffffff"
  surface: "#f6f4f0"
  surface_2: "#eae7e2"
  ink: "#000000"
  ink_soft: "#1a1a1a"
  fg_default: "#1a1a1a"
  fg_muted: "#6b6b6b"
  border_default: "#e6e4e1"
  on_primary: "#ffffff"
  on_ink: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Porsche Next", "Arial", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Porsche

## 1. Visual Theme & Atmosphere

Porsche's experience is engineered elegance: a near-black `#000000` and warm ivory `#f6f4f0` palette, with a single racing red `#b12b28` for performance and action. The layout is full-bleed and cinematic, letting the cars be the hero. The tone is precise, timeless, and confident — luxury without ornament.

## 2. Color System

- **Racing red** `#b12b28` — CTAs, performance trims, and the crest accents.
- **Black** `#000000` / `#1a1a1a` — headers, footers, and hero type.
- **Ivory** `#f6f4f0` / `#eae7e2` — warm neutral surfaces that replace stark white.
- Text `#1a1a1a`, muted `#6b6b6b`; hairlines `#e6e4e1`.

## 3. Typography

Porsche Next (Arial fallback) with a sharp, engineered, slightly condensed character. Headlines are bold and tightly tracked — powerful and precise. Body 16px/1.5; the type feels machined, not decorative.

## 4. Components & Shape

The configurator is the centerpiece: a full-bleed car view with a clean right-hand panel of options. Buttons are crisp rectangles (minimal radius) with a black or red fill. The crest (shield) is a recurring brand mark. Navigation is a slim, minimal bar; product cards are large and image-led.

## 5. Layout & Spacing

A full-bleed, imagery-first layout with asymmetric, editorial spacing. Generous whitespace (32-64px) conveys luxury; the configurator uses a fixed panel beside the hero. Type and imagery align on a strong baseline grid.

## 6. Motion

Cinematic and precise: cars rotate in the configurator, images parallax gently on scroll, and CTAs transition with a clean color shift. Motion is smooth and premium — engineered, never gimmicky.