---
name: Porsche
description: "This site exemplifies luxury automotive web design with its bold typography, dark theme, and photography-centric approach."
version: alpha

colors:
  background: "#000000"
  primary: "#FAFBFF"
  neutral: "#9E9EFF"
  line: "rgba(250, 251, 255, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 95px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 12px
  lg: 32px
  pill: 999px

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

---

## Overview

Premium automotive brand website featuring immersive photography and bold typographic headlines.

*A high-end automotive showcase blending motorsport heritage with modern luxury.*

## Colors

Dark mode primary with white text for maximum contrast against photographic backgrounds.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FAFBFF`)** — uses `ink` token
- **Muted (`#9E9EFF`)** — uses `muted` token
- **Borders (`rgba(250, 251, 255, 0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- All caps used for navigation and labels
- Tight leading on display text
- High contrast white on dark backgrounds

## Layout

Full-bleed hero with grid-based card sections below

*Rhythm:* Generous whitespace around large imagery and typography

## Elevation & Depth

- 0 4px 24px rgba(0,0,0,0.5)
- Borders: Subtle white border at 10% opacity

## Shapes

- `sm`: 4px
- `md`: 12px
- `lg`: 32px
- `pill`: 999px

## Components

- **button:** Outlined pill button with white text and transparent background
- **card:** Full-width photographic cards with gradient overlays for text legibility
- **chip:** Small rounded pills for categorization (Electro, Hybrid, Gasoline)
- **hero:** Full-viewport image/video with large typography and play controls

## Do's and Don'ts

**Don't:**
- Don't use bright saturated backgrounds — screenshot shows dark photographic backgrounds instead
- Don't use decorative serif fonts — screenshot shows clean grotesque sans-serif typography
- Don't use excessive UI chrome — screenshot shows minimal navigation elements
- Don't use small text for headlines — screenshot shows large-scale display typography
- Don't use colorful accent buttons — screenshot shows white outlined buttons on dark backgrounds
- Don't use cluttered layouts — screenshot shows generous spacing between content sections

---

## System Prompt (paste into AI agent)

```
Porsche is a premium automotive brand website with a dark, photography-forward design. The color palette uses #000000 background with #FAFBFF white text for high contrast. Typography features Porsche Next, a custom grotesque sans-serif in bold display sizes (up to 95px). The site prioritizes immersive imagery with minimal UI elements. Critical design rules: never use decorative serif fonts, avoid small headlines, maintain generous whitespace, use outlined rather than filled buttons, keep navigation minimal, and ensure dark backgrounds for all photographic sections.
```