---
version: alpha
name: Porsche
description: white letterforms and frosted glass gliding over midnight race footage.
colors:
  on-surface-variant: "rgba(246, 246, 248, 0.78)"
  on-surface: "#FAFBFF"
  surface: "#010205"
  primary: "#178BFF"
  graphite-surface: "#19191A"
  scrim-black: "#000000"
  status-slate: "#0E1418"
  contrast-high: "rgba(246, 246, 248, 0.67)"
  contrast-medium: "rgba(246, 246, 248, 0.56)"
  contrast-low: "rgba(246, 246, 248, 0.45)"
  contrast-lower: "rgba(156, 156, 159, 0.302)"
  frosted: "hsla(240, 2%, 43%, 0.228)"
  frosted-soft: "rgba(65, 65, 70, 0.154)"
  frosted-strong: "rgba(156, 156, 159, 0.302)"
  backdrop: "rgba(36, 36, 40, 0.5)"
  focus-blue: "#1A44EA"
typography:
  caption-2xs:
    fontFamily: Porsche Next
    fontSize: 12px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  caption:
    fontFamily: Porsche Next
    fontSize: 14px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  body:
    fontFamily: Porsche Next
    fontSize: 16px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  body-lg:
    fontFamily: Porsche Next
    fontSize: 21.28px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  subheading:
    fontFamily: Porsche Next
    fontSize: 28.48px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  heading-sm:
    fontFamily: Porsche Next
    fontSize: 37.92px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  heading:
    fontFamily: Porsche Next
    fontSize: 50.56px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  heading-lg:
    fontFamily: Porsche Next
    fontSize: 67.36px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  display-sm:
    fontFamily: Porsche Next
    fontSize: 89.76px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
  display:
    fontFamily: Porsche Next
    fontSize: 119.68px
    fontWeight: 400
    lineHeight: 6px
    letterSpacing: 0em
rounded:
  micro: 2px
  small-controls: 4px
  medium-controls: 8px
  buttons-ctas: 12px
  panels: 24px
  media-cards: 32px
  circular-controls: 1px
spacing:
  static-2xs: 1px
  static-xs: 4px
  static-sm: 8px
  static-md: 16px
  static-lg: 32px
  static-xl: 48px
  static-2xl: 80px
  fluid-xs: 8px
  fluid-sm: 16px
  fluid-md: 36px
  fluid-lg: 76px
  fluid-xl: 96px
  fluid-2xl: 200px
---
# Porsche — Style Reference
> white letterforms and frosted glass gliding over midnight race footage.

**Theme:** dark

Porsche's system is engineering discipline applied to a screen: one typeface (Porsche Next), one weight (400), and a near-black canvas (`#010205`) that exists mostly to hold film. Color belongs to the footage — the UI itself is strictly monochrome, a single cool white (`#FAFBFF`) stepped down through five opacities rather than five grey hexes, so text hierarchy is literally transparency over whatever the film is doing beneath it. There are no borders and no rendered shadows anywhere on the page; every control that must sit on top of video is a pane of frosted glass — a translucent grey fill (`hsla(240, 2%, 43%, 0.228)`) behind a 32px backdrop blur — so chrome reads as optics, not paint. Scale is fluid by token: a ten-step clamp() typescale runs from 12px captions to a 119.68px display cap, and headlines carry authority through sheer size at weight 400, never through bolding. Even line-height is engineered — `calc(6px + 2.125ex)`, keyed to the x-height of the size it serves. The result feels like instrument-panel restraint laid over cinema: quiet, exact, and fast.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Night Canvas | `#010205` | `--color-canvas` | The page background and the utility bar fill — a black with a whisper of blue, pixel-identical across chrome and canvas. Never pure `#000` for surfaces. |
| Graphite Surface | `#19191A` | `--color-surface` | The one opaque elevated surface — panels and sheets that must fully occlude what is beneath them. |
| Scrim Black | `#000000` | `--color-scrim` | Reserved for gradient scrims over film (hero top/bottom fades) and full-black media cards — an overlay tool, not a surface color. |
| Status Slate | `#0E1418` | `--color-status-slate` | Browser/status-bar chrome color (the declared dark theme-color) — the system's edge where it meets the OS. |
| Porsche White | `#FAFBFF` | `--color-primary` | Primary ink and the only action color: headlines, body, button labels, icons. A cool white, never `#FFF` — pixel-verified on the hero headline and CTA label. |
| Contrast Higher | `rgba(246, 246, 248, 0.78)` | `--color-contrast-higher` | Strongest secondary text. The grey ramp is not hexes — it is one white at descending opacities, so hierarchy stays legible over any film frame. |
| Contrast High | `rgba(246, 246, 248, 0.67)` | `--color-contrast-high` | Secondary text and active nav items. |
| Contrast Medium | `rgba(246, 246, 248, 0.56)` | `--color-contrast-medium` | Muted copy, captions, metadata. |
| Contrast Low | `rgba(246, 246, 248, 0.45)` | `--color-contrast-low` | Placeholder and de-emphasized text — the floor for legible type. |
| Contrast Lower | `rgba(156, 156, 159, 0.302)` | `--color-contrast-lower` | Disabled states and the faintest structural marks. Below this, nothing is drawn. |
| Frosted | `hsla(240, 2%, 43%, 0.228)` | `--color-frosted` | THE component fill — buttons and floating controls, always paired with `blur(32px)`. Composites to ≈`#3C3F44` over the hero film (pixel-sampled). |
| Frosted Soft | `rgba(65, 65, 70, 0.154)` | `--color-frosted-soft` | Quieter glass for resting/hover-adjacent surfaces. |
| Frosted Strong | `rgba(156, 156, 159, 0.302)` | `--color-frosted-strong` | Loudest glass step — pressed/emphasized controls. |
| Backdrop | `rgba(36, 36, 40, 0.5)` | `--color-backdrop` | Modal/overlay dimming layer behind dialogs and menus. |
| Focus Blue | `#1A44EA` | `--color-focus` | Keyboard focus ring — the only mode-invariant color in the system (identical in light and dark). Never decorative. |
| Info Blue | `#178BFF` | `--color-info` | Functional status only. With Success `#10C47F`, Warning `#F4882A`, and Error `#FC4040`, these are the sole saturated hues — they signal state, never brand. |

## Tokens — Typography

### Porsche Next — the single typeface for everything: display, body, labels, chrome. Weight 400 is the working weight at every size up to 119px; 600/700 are loaded but the marketing surface never shows them — hierarchy is size, not weight. · `--font-porsche-next`
- **Substitute:** Arial Narrow, Helvetica Now, Neue Haas Grotesk
- **Weights:** 400 (the voice), 600, 700 (loaded, reserved)
- **Sizes:** 12px, 14px, 16px, then fluid clamp() steps to 119.68px (hero renders 94.72px at a 1920px viewport)
- **Line height:** `calc(6px + 2.125ex)` — a single ex-based formula that tightens optically as sizes grow
- **Letter spacing:** 0 at all sizes; the letterspaced PORSCHE wordmark in the nav is the lone exception, and it is a logotype, not type
- **Role:** The single typeface for everything: display, body, labels, chrome. Weight 400 is the working weight at every size up to 119px; 600/700 are loaded but the marketing surface never shows them — hierarchy is size, not weight.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption-2xs | 12px | 6px + 2.125ex | 0 | `--text-2xs` |
| caption | 14px | 6px + 2.125ex | 0 | `--text-xs` |
| body | 16px | 6px + 2.125ex | 0 | `--text-sm` |
| body-lg | 18.08→21.28px (fluid) | 6px + 2.125ex | 0 | `--text-md` |
| subheading | 20.32→28.48px (fluid) | 6px + 2.125ex | 0 | `--text-lg` |
| heading-sm | 22.72→37.92px (fluid) | 6px + 2.125ex | 0 | `--text-xl` |
| heading | 25.6→50.56px (fluid) | 6px + 2.125ex | 0 | `--text-2xl` |
| heading-lg | 28.8→67.36px (fluid) | 6px + 2.125ex | 0 | `--text-3xl` |
| display-sm | 32.48→89.76px (fluid) | 6px + 2.125ex | 0 | `--text-4xl` |
| display | 36.48→119.68px (fluid) | 6px + 2.125ex | 0 | `--text-5xl` |

## Tokens — Spacing & Shapes

**Base unit:** 4px (static ladder), with a parallel fluid clamp() ladder for section rhythm

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| static-2xs | 1px | `--spacing-static-2xs` |
| static-xs | 4px | `--spacing-static-xs` |
| static-sm | 8px | `--spacing-static-sm` |
| static-md | 16px | `--spacing-static-md` |
| static-lg | 32px | `--spacing-static-lg` |
| static-xl | 48px | `--spacing-static-xl` |
| static-2xl | 80px | `--spacing-static-2xl` |
| fluid-xs | 4→8px | `--spacing-fluid-xs` |
| fluid-sm | 8→16px | `--spacing-fluid-sm` |
| fluid-md | 16→36px | `--spacing-fluid-md` |
| fluid-lg | 32→76px | `--spacing-fluid-lg` |
| fluid-xl | 48→96px | `--spacing-fluid-xl` |
| fluid-2xl | 80→200px | `--spacing-fluid-2xl` |

### Border Radius

| Element | Value |
|---------|-------|
| micro (chips, marks) | 2px |
| small controls | 4px |
| medium controls | 6–8px |
| buttons / CTAs | 12px |
| panels | 16–24px |
| media cards | 32px |
| circular controls (pause, icons) | calc(infinity * 1px) — true circle |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| sm | `0px 3px 8px rgba(0, 0, 0, 0.16)` | `--shadow-sm` |
| md | `0px 4px 16px rgba(0, 0, 0, 0.16)` | `--shadow-md` |
| lg | `0px 8px 40px rgba(0, 0, 0, 0.16)` | `--shadow-lg` |

Defined in the token set but **unused on the marketing surface** — the scanned page renders zero shadows. Reserve them for true floating overlays; everything else separates by glass and luminance.

### Layout

- **Page max-width:** full-bleed — the hero film is 100vw; content blocks inset with fluid padding
- **Section gap:** 80→200px (`--spacing-fluid-2xl`)
- **Card padding:** 16→36px (`--spacing-fluid-md`)
- **Element gap:** 16px within clusters; header height 66px (`4.125rem`); CTA link height 54px

## Components

### Frosted CTA Button
**Role:** The primary action over film — "Discover now" on the hero

145×54px pane of glass: fill `hsla(240, 2%, 43%, 0.228)` with `backdrop-filter: blur(32px)`, **no border**, 12px radius, label in Porsche Next 16px weight 400 `#FAFBFF`. Over the hero film it composites to ≈`#3C3F44` (pixel-sampled) — the fill is deliberately translucent so the footage stays alive behind the control. There is exactly one CTA per hero; commitment is signaled by the glass itself, not by a color.

### Global Nav Bar
**Role:** Persistent header floating over the hero film

66px tall (`--phn-header-height: 4.125rem`), fully transparent — legibility comes from the `#000000`→transparent gradient scrim behind it, never from a bar fill or border. Left: hamburger + "Menu" label, 16px weight 400 `#FAFBFF`. Center: the letterspaced PORSCHE wordmark in `#FAFBFF` — the only tracked glyphs in the system. Right: country flag roundel and account icon. No bottom rule; the chrome dissolves into the film.

### Country Utility Bar
**Role:** Region/language notice pinned above the header

Full-width solid `#010205` — the canvas color itself used as chrome, so the bar reads as part of the page edge rather than a banner. 16px weight 400 text in `#FAFBFF` and the alpha-white ramp, a flag chip, an arrow-prefixed "Change" text link, and a bare ✕ dismiss glyph at far right. No border below it; the hero scrim takes over.

### Hero Film Panel
**Role:** The full-viewport emotional opener — moving footage, not photography

100vw × 100vh video with `#000000` gradient scrims feathered from top and bottom edges so chrome and headline stay legible at any frame. All color on the page lives here, in the footage. Headline sits lower-left, CTA below it, playback control lower-right, scroll cue bottom-center — content hugs the frame edges and leaves the film's center untouched.

### Display Headline
**Role:** The model statement — "Cayenne Electric."

Porsche Next weight 400, `#FAFBFF`, rendered at 94.72px on a 1920px viewport (the fluid display scale caps at 119.68px), line-height `calc(6px + 2.125ex)`, zero letter-spacing, left-aligned in the hero's lower third. Sentence case ending with a period — a calm declarative, not a shout. Stacked on two lines with no tracking tricks: at this size, weight 400 IS the drama.

### Section Heading
**Role:** Opens each full-bleed story section below the hero

Porsche Next weight 400 `#FAFBFF` at 72.5px (the `--text-4xl` fluid band), with ~81px bottom padding to the content it introduces. Same rules as the display headline: no bold, no tracking, size alone establishes the hierarchy step down from the hero.

### Media Control Circle
**Role:** Video pause/play toggle anchored bottom-right of the film

54px true circle (`--radius-full`), frosted fill compositing to ≈`#353435` over the footage (pixel-sampled), pause glyph in `#FAFBFF`, no border, no shadow. The circular sibling of the CTA — same glass, different geometry, so media chrome and commitment chrome never get confused.

### Scroll Cue
**Role:** Invites the first scroll from the full-viewport hero

A bare ↓ arrow glyph in `#FAFBFF`, bottom-center, no pill, no fill, no label. The quietest possible affordance — anything more would compete with the film.

### Media Card
**Role:** Model and story tiles in the content stream

Solid `#000000` fill at 32px radius (`--radius-4xl`) — the most generous radius in the system, reserved for media containers so imagery reads as framed film stills. Text inside uses the standard white-alpha ramp; card padding runs 16→36px fluid. No border, no shadow: the card's black separates from the `#010205` canvas by imagery, not by outline.

### Inline Text Link
**Role:** Navigational links inside copy and utility bars

16px Porsche Next weight 400 in `#FAFBFF` or `rgba(246, 246, 248, 0.67)` when secondary, frequently prefixed with a → arrow glyph (as in "Change"). No persistent underline — the arrow and the white step do the signaling. Focus state draws the `#1A44EA` ring.

### Focus Ring
**Role:** Keyboard focus indicator on every interactive element

`#1A44EA` outline — the one color that never changes between light and dark modes, chosen to be visible against both the film and the canvas. It is the only blue allowed to touch chrome; it means "you are here," never decoration.

### Status Feedback Set
**Role:** System states — alerts, form validation, toasts

Four functional hues, each with a full alpha family: Info `#178BFF`, Success `#10C47F`, Warning `#F4882A`, Error `#FC4040`, plus `-medium` (60%), `-low` (18%) and dark frosted washes (e.g. success frosted `rgba(11, 91, 60, 0.66)`) for tinted glass panels. These are the only saturated fills in the UI, and they appear exclusively when the system has something to report.

## Do's and Don'ts

### Do
- Set every word — display to caption — in Porsche Next weight 400. Hierarchy is the fluid size ladder, never the weight axis.
- Use `line-height: calc(6px + 2.125ex)` globally; it self-tightens at display sizes and breathes at body sizes because it is keyed to x-height.
- Build text hierarchy from ONE white: `#FAFBFF` full-strength, then `rgba(246, 246, 248, …)` at 0.78 / 0.67 / 0.56 / 0.45. Never introduce grey hexes for muted text.
- Make every control over film a glass pane: `hsla(240, 2%, 43%, 0.228)` fill + `backdrop-filter: blur(32px)`, borderless, 12px radius.
- Keep the radius vocabulary strict: 12px for buttons, 32px for media cards, true circles for icon controls.
- Feather `#000000` gradient scrims behind chrome that overlays footage — legibility comes from the scrim, not from bar fills.
- Use the fluid spacing ladder (`clamp(80px, …, 200px)` between sections) so the page keeps its proportions from laptop to cinema display.
- Reserve `#1A44EA` for focus rings and the four functional hues for status — and nothing else.

### Don't
- Never draw a border. The scan found zero border colors by design — separation is glass, luminance, and scrim, full stop.
- Never cast a shadow on the marketing surface. The shadow tokens exist for true overlays only; the page itself renders none.
- Never bold a headline. 600 and 700 are loaded but the brand voice is 400 at 119px — bolding it makes it an ad.
- Never paint a CTA with an opaque fill. The button is translucent glass; an opaque button would sit ON the film instead of IN it.
- Never letterspace text. Tracking belongs to the PORSCHE wordmark alone.
- Never use brand color. There is no accent hue — color arrives via footage, and saturated values are status semantics (`#FC4040` means error, not excitement).
- Never substitute `#FFF` for `#FAFBFF` or `#000` for `#010205` — the cool cast is the difference between instrument panel and generic dark mode.
- Never crowd the film. One headline, one CTA, one media control per viewport; the footage is the layout's main column.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Night Canvas | `#010205` | Page background and utility chrome — one continuous near-black field |
| 1 | Graphite Surface | `#19191A` | Opaque panels and sheets that must fully occlude content |
| 2 | Frosted Glass | `hsla(240, 2%, 43%, 0.228)` + blur(32px) | Floating controls over film — buttons, media chrome |
| 3 | Backdrop | `rgba(36, 36, 40, 0.5)` | Dimming layer behind modals and menus |
| — | Scrim | `#000000` gradient | Edge fades over footage that carry chrome legibility |

## Elevation

No rendered shadows and no borders anywhere on the page. Depth is conveyed by exactly three mechanisms: the luminance step from `#010205` canvas to `#19191A` surface, the frosted-glass composite (translucent grey fill + 32px backdrop blur) that visibly refracts the film behind a control, and `#000000` gradient scrims that push footage back behind chrome. The shadow tokens (`0px 3px 8px` / `4px 16px` / `8px 40px`, all at 16% black) are held in reserve for true floating overlays — on the marketing surface, glass IS the elevation.

## Imagery

Full-bleed motion film, not photography — the hero is race-track footage with the car in motion, graded dark and cool so `#FAFBFF` type stays legible. All color in the experience lives inside the footage; the UI contributes none. Scrims feather the top and bottom edges rather than boxing the media. Iconography is minimal line work in `#FAFBFF` (hamburger, arrow, account, pause) with the national-flag roundel as the sole full-color glyph. No illustration, no decorative graphics: if it isn't the car, it's chrome.

## Layout

Full-bleed, film-first. The hero is a 100vw×100vh video panel with content pinned to its edges: transparent 66px nav dissolved into the top scrim, headline and CTA in the lower-left, circular media control lower-right, scroll cue bottom-center. Below, stories stack as full-width sections separated by fluid gaps that grow from 80px to 200px with the viewport — the page breathes wider on bigger screens by token, not by media-query cliffs. Media cards take 32px radii and generous fluid padding (16→36px). There are no rule lines and no alternating background bands; section boundaries are carried by imagery changes and spacing alone.

## Typography Signature

One family, one weight, and a leading formula. Porsche Next at weight 400 covers a 10× size range (12px→119.68px) because the scale itself is the typographic system: ten fluid clamp() steps, each interpolating on viewport width, so the hero headline is 94.72px on a 1920px screen and 119.68px at the cap without a single breakpoint. The signature move is `line-height: calc(6px + 2.125ex)` — leading expressed in x-heights plus a 6px constant, which lands dense at display sizes (≈1.05) and open at body sizes (≈1.5) from one declaration. Zero letter-spacing everywhere keeps the grotesque's engineered rhythm intact; the tracked-out PORSCHE wordmark stays unique because nothing else on the page is allowed to imitate it.

## Agent Prompt Guide

## Quick Color Reference
- background: #010205
- text: #FAFBFF
- muted text: rgba(246, 246, 248, 0.67) / rgba(246, 246, 248, 0.56)
- surface: #19191A
- border: none — this system draws no borders; separation is frosted glass and luminance
- accent: none — monochrome UI; #1A44EA focus ring only; #178BFF/#10C47F/#F4882A/#FC4040 for status only
- primary action: frosted glass — hsla(240, 2%, 43%, 0.228) fill + backdrop-filter blur(32px), #FAFBFF label, 12px radius, no border

## Example Component Prompts
1. **Hero with frosted CTA**: Full-viewport dark video panel over a #010205 canvas with a #000000→transparent gradient scrim at top and bottom. Lower-left: two-line headline "Cayenne Electric." in Porsche Next weight 400 at 94px, color #FAFBFF, line-height calc(6px + 2.125ex), zero letter-spacing. Below it a 145×54px button: background hsla(240, 2%, 43%, 0.228), backdrop-filter blur(32px), border none, border-radius 12px, label "Discover now" in 16px weight 400 #FAFBFF.
2. **Transparent nav bar**: 66px-tall header, background transparent over a dark scrim. Left: hamburger icon + "Menu" in 16px weight 400 #FAFBFF. Center: letterspaced PORSCHE wordmark in #FAFBFF. Right: circular flag icon and account icon. No border, no fill, no shadow.
3. **Media card**: Background #000000, border-radius 32px, no border, no shadow, padding clamp(16px, 1.25vw + 12px, 36px). Title in Porsche Next weight 400 #FAFBFF at 28px, supporting copy at 16px in rgba(246, 246, 248, 0.67). Image hover scales to 1.05 over 0.4s with cubic-bezier(.25, .1, .25, 1).
4. **Circular media control**: 54px circle, background hsla(240, 2%, 43%, 0.228) with backdrop-filter blur(32px), no border, pause glyph in #FAFBFF centered. Positioned bottom-right over video with 32px inset.
5. **Status alert (error)**: Frosted panel with background rgba(91, 11, 11, 0.66) and backdrop-filter blur(32px), border-radius 12px, no border, message text in #FAFBFF 16px weight 400, leading icon in #FC4040. Focus outline #1A44EA on the dismiss control.

## Similar Brands

- **Polestar** — the same monochrome automotive minimalism: single grotesque at one weight, full-bleed film, chromeless UI over footage
- **Lucid Motors** — dark cinematic EV storytelling where the interface recedes to white type and translucent controls on video
- **Apple (dark register)** — full-viewport black product panels, one quiet headline, one CTA, and all emotion delegated to the media
- **Leica** — engineering-brand restraint: no decorative color, functional reds only, typography as instrument labeling
- **Bang & Olufsen** — luxury-hardware web presence built on near-black canvases, thin white type, and product film as the sole color source

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors — canvas & ink */
  --color-canvas: #010205;
  --color-surface: #19191A;
  --color-scrim: #000000;
  --color-status-slate: #0E1418;
  --color-primary: #FAFBFF;
  --color-contrast-higher: rgba(246, 246, 248, 0.78);
  --color-contrast-high: rgba(246, 246, 248, 0.67);
  --color-contrast-medium: rgba(246, 246, 248, 0.56);
  --color-contrast-low: rgba(246, 246, 248, 0.45);
  --color-contrast-lower: rgba(156, 156, 159, 0.302);

  /* Colors — frosted glass */
  --color-frosted: hsla(240, 2%, 43%, 0.228);
  --color-frosted-soft: rgba(65, 65, 70, 0.154);
  --color-frosted-strong: rgba(156, 156, 159, 0.302);
  --color-backdrop: rgba(36, 36, 40, 0.5);
  --blur-frosted: blur(32px);

  /* Colors — functional */
  --color-focus: #1A44EA;
  --color-info: #178BFF;
  --color-info-medium: rgba(23, 139, 255, 0.6);
  --color-info-low: rgba(23, 139, 255, 0.18);
  --color-info-frosted: rgba(11, 51, 91, 0.66);
  --color-info-frosted-soft: rgba(16, 38, 61, 0.66);
  --color-success: #10C47F;
  --color-success-medium: rgba(16, 196, 127, 0.6);
  --color-success-low: rgba(16, 196, 127, 0.18);
  --color-success-frosted: rgba(11, 91, 60, 0.66);
  --color-success-frosted-soft: rgba(16, 61, 44, 0.66);
  --color-warning: #F4882A;
  --color-warning-medium: rgba(244, 136, 42, 0.6);
  --color-warning-low: rgba(244, 136, 42, 0.18);
  --color-warning-frosted: rgba(91, 81, 11, 0.66);
  --color-warning-frosted-soft: rgba(61, 55, 16, 0.66);
  --color-error: #FC4040;
  --color-error-medium: rgba(252, 64, 64, 0.6);
  --color-error-low: rgba(252, 64, 64, 0.18);
  --color-error-frosted: rgba(91, 11, 11, 0.66);
  --color-error-frosted-soft: rgba(61, 16, 16, 0.66);

  /* Typography — Families */
  --font-porsche-next: 'Porsche Next', 'Arial Narrow', Arial, 'Heiti SC', SimHei, sans-serif;

  /* Typography — Weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography — Leading */
  --leading-normal: calc(6px + 2.125ex);

  /* Typography — Scale */
  --text-2xs: 0.75rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
  --text-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
  --text-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
  --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
  --text-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
  --text-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
  --text-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);

  /* Spacing — static */
  --spacing-static-2xs: 1px;
  --spacing-static-xs: 4px;
  --spacing-static-sm: 8px;
  --spacing-static-md: 16px;
  --spacing-static-lg: 32px;
  --spacing-static-xl: 48px;
  --spacing-static-2xl: 80px;

  /* Spacing — fluid */
  --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
  --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
  --spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
  --spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
  --spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
  --spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: calc(infinity * 1px);

  /* Shadows (reserved for true overlays — unused on the marketing surface) */
  --shadow-sm: 0px 3px 8px rgba(0, 0, 0, 0.16);
  --shadow-md: 0px 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.16);

  /* Motion */
  --duration-sm: 0.25s;
  --duration-md: 0.4s;
  --duration-lg: 0.6s;
  --duration-xl: 1.2s;
  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
  --image-hover-scale: scale3d(1.05, 1.05, 1.05);

  /* Layout */
  --header-height: 4.125rem;
  --cta-link-height: 54px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors — canvas & ink */
  --color-canvas: #010205;
  --color-surface: #19191A;
  --color-scrim: #000000;
  --color-status-slate: #0E1418;
  --color-primary: #FAFBFF;
  --color-contrast-higher: rgba(246, 246, 248, 0.78);
  --color-contrast-high: rgba(246, 246, 248, 0.67);
  --color-contrast-medium: rgba(246, 246, 248, 0.56);
  --color-contrast-low: rgba(246, 246, 248, 0.45);
  --color-contrast-lower: rgba(156, 156, 159, 0.302);

  /* Colors — frosted glass */
  --color-frosted: hsla(240, 2%, 43%, 0.228);
  --color-frosted-soft: rgba(65, 65, 70, 0.154);
  --color-frosted-strong: rgba(156, 156, 159, 0.302);
  --color-backdrop: rgba(36, 36, 40, 0.5);

  /* Colors — functional */
  --color-focus: #1A44EA;
  --color-info: #178BFF;
  --color-success: #10C47F;
  --color-warning: #F4882A;
  --color-error: #FC4040;

  /* Typography */
  --font-porsche-next: 'Porsche Next', 'Arial Narrow', Arial, 'Heiti SC', SimHei, sans-serif;

  /* Typography — Scale */
  --text-2xs: 0.75rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
  --text-lg: clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
  --text-xl: clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
  --text-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
  --text-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
  --text-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
  --text-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);

  /* Spacing */
  --spacing-static-2xs: 1px;
  --spacing-static-xs: 4px;
  --spacing-static-sm: 8px;
  --spacing-static-md: 16px;
  --spacing-static-lg: 32px;
  --spacing-static-xl: 48px;
  --spacing-static-2xl: 80px;
  --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
  --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
  --spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px);
  --spacing-fluid-lg: clamp(32px, 2.75vw + 23px, 76px);
  --spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
  --spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: calc(infinity * 1px);

  /* Motion */
  --duration-sm: 0.25s;
  --duration-md: 0.4s;
  --duration-lg: 0.6s;
  --duration-xl: 1.2s;
  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
}
```