Porsche

---
name: porsche-com-design-system
source: https://www.porsche.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#1a1a1a"
  text-muted: "#999999"
  surface: "#e6e6e6"
  hairline: "#d7d7da"
  accent: "#1a44ea"  # blue
  accent-2: "#f1f1f4"  # pale-blue
  accent-3: "#fc4040"  # red
fonts:
  primary: "Porsche Next"
---

# Porsche Bulgaria | Official Website — Design System

Extracted from **https://www.porsche.com/** on 2026-07-03.

> Welcome to Porsche! The official source for information on all Porsche vehicles, services, dealers in your area and everything about the Porsche brand.

Every value below is mined from the site's live CSS (100 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 305 light against 227 dark. The palette is chromatic: 12 saturated values against 11 neutrals, led by blue (`#1a44ea`). **Porsche Next** carries the interface. Geometry mixes sharp corners (1px) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color is only 16% of measured color usage. Reserve `accent` (`#1a44ea`) for primary actions, links, and emphasis — spreading it into body text or large surfaces breaks the ratio that defines this look.
- The theme is light (measured neutral weight 305:227). Don't flip individual sections to the opposite mode.
- `100%` is the workhorse radius (x50); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.
- One family does the work — build hierarchy with size and weight (400/600/700), not by adding typefaces.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 231 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#e6e6e6` | 43 | **surface** — neutral closest to canvas luminance |
| `neutral-200` | `#d7d7da` | 1 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-300` | `#cccccc` | 30 | — |
| `neutral-400` | `#b3b3b3` | 32 | — |
| `neutral-500` | `#999999` | 44 | **text-muted** — most-used mid-luminance neutral |
| `neutral-600` | `#88898c` | 2 | — |
| `neutral-700` | `#666666` | 43 | — |
| `neutral-800` | `#4d4d4d` | 35 | — |
| `neutral-900` | `#333333` | 40 | — |
| `neutral-950` | `#1a1a1a` | 49 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `blue` | `#1a44ea` | 18 | **accent** — most-used chromatic color |
| `pale-blue` | `#f1f1f4` | 12 | **accent-2** — supporting chromatic color |
| `red` | `#fc4040` | 11 | **accent-3** — supporting chromatic color |
| `cyan` | `#178bff` | 10 | — |
| `green` | `#10c47f` | 10 | — |
| `orange` | `#f4882a` | 10 | — |
| `green-2` | `#197e10` | 7 | — |
| `orange-2` | `#ac5102` | 7 | — |
| `red-2` | `#ba171f` | 7 | — |
| `deep-cyan` | `#0b335b` | 3 | — |
| `deep-cyan-2` | `#10263d` | 3 | — |
| `deep-green` | `#0b5b3c` | 3 | — |

### Dark mode

The source defines 33 dark-mode variants (via light-dark()). Both halves of the system, first 30:

| Token | Light | Dark |
| --- | --- | --- |
| `--p-color-canvas` | `#fff` | `#010205` |
| `--p-color-surface` | `#f1f1f4` | `#19191a` |
| `--p-color-frosted` | `hsla(240,5%,70%,.148)` | `hsla(240,2%,43%,.228)` |
| `--p-color-frosted-soft` | `rgba(143,145,163,.06)` | `rgba(65,65,70,.154)` |
| `--p-color-frosted-strong` | `rgba(100,101,114,.236)` | `rgba(156,156,159,.302)` |
| `--p-color-backdrop` | `rgba(36,36,40,.5)` | `rgba(36,36,40,.5)` |
| `--p-color-primary` | `#010205` | `#fafbff` |
| `--p-color-contrast-higher` | `rgba(21,21,25,.8)` | `rgba(246,246,248,.78)` |
| `--p-color-contrast-high` | `rgba(26,26,30,.7)` | `rgba(246,246,248,.67)` |
| `--p-color-contrast-medium` | `rgba(17,17,19,.6)` | `rgba(246,246,248,.56)` |
| `--p-color-contrast-low` | `rgba(36,36,40,.5)` | `rgba(246,246,248,.45)` |
| `--p-color-contrast-lower` | `rgba(79,80,89,.324)` | `rgba(156,156,159,.302)` |
| `--p-color-info` | `#1a44ea` | `#178bff` |
| `--p-color-info-medium` | `rgba(26,68,234,.6)` | `rgba(23,139,255,.6)` |
| `--p-color-info-low` | `rgba(26,68,234,.18)` | `rgba(23,139,255,.18)` |
| `--p-color-info-frosted` | `rgba(204,229,255,.55)` | `rgba(11,51,91,.66)` |
| `--p-color-info-frosted-soft` | `rgba(232,242,252,.55)` | `rgba(16,38,61,.66)` |
| `--p-color-success` | `#197e10` | `#10c47f` |
| `--p-color-success-medium` | `rgba(25,126,16,.6)` | `rgba(16,196,127,.6)` |
| `--p-color-success-low` | `rgba(25,126,16,.18)` | `rgba(16,196,127,.18)` |
| `--p-color-success-frosted` | `rgba(213,255,204,.55)` | `rgba(11,91,60,.66)` |
| `--p-color-success-frosted-soft` | `rgba(236,252,232,.55)` | `rgba(16,61,44,.66)` |
| `--p-color-warning` | `#ac5102` | `#f4882a` |
| `--p-color-warning-medium` | `rgba(172,81,2,.6)` | `rgba(244,136,42,.6)` |
| `--p-color-warning-low` | `rgba(172,81,2,.18)` | `rgba(244,136,42,.18)` |
| `--p-color-warning-frosted` | `rgba(255,238,204,.55)` | `rgba(91,81,11,.66)` |
| `--p-color-warning-frosted-soft` | `hsla(40,80%,95%,.55)` | `rgba(61,55,16,.66)` |
| `--p-color-error` | `#ba171f` | `#fc4040` |
| `--p-color-error-medium` | `rgba(186,23,31,.6)` | `rgba(252,64,64,.6)` |
| `--p-color-error-low` | `rgba(186,23,31,.18)` | `rgba(252,64,64,.18)` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

**Porsche Next** is the primary interface face. Full list by usage:

| Family | Usage |
| --- | --- |
| Porsche Next | 40 |

**Size scale (px):** `11`, `12`, `14`, `16`, `22`

**Weights in use:** `400` (x16), `600` (x10), `700` (x8)

**Line-heights (unitless):** `1`, `1.1`, `1.3`, `1.5`

**Letter-spacing values:** `.05em`

## Spacing

Most-used values (px): `1`, `2`, `3`, `4`, `6`, `8`, `10`, `12`, `16`, `20`, `36`, `80`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `1px` | 14 |
| `radius-md` | `4px` | 11 |
| `radius-lg` | `8px` | 8 |
| `radius-xl` | `10px` | 46 |
| `radius-2xl` | `12px` | 4 |
| `radius-3xl` | `32px` | 17 |
| `radius-4xl` | `100%` | 50 |
| `radius-full` | `50%` | 2 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 8px 40px #00000029` (x3)
- `shadow-md` — `0 3px 8px #00000029` (x1)

### Focus rings (spread-only box-shadows, kept out of the elevation scale)

- `inset 0 0 0 1px #00000026` (x2)

## Breakpoints

`375px`, `390px`, `479px`, `480px`, `759px`, `760px`, `767px`, `768px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #1a44ea */
  color: var(--color-canvas); /* #ffffff — contrast 6.9:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 600;
}

.card {
  background: var(--color-surface); /* #e6e6e6 */
  border: 1px solid var(--color-hairline); /* #d7d7da */
  border-radius: 100%; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #1a1a1a — contrast 17.4:1 */
  border: 1px solid var(--color-hairline); /* #d7d7da */
  border-radius: 1px;
  /* placeholder color: var(--color-text-muted) #999999 */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #d7d7da */
  color: var(--color-ink); /* #1a1a1a */
  /* inactive links: var(--color-text-muted) #999999 */
  /* active link: var(--color-accent) #1a44ea — contrast vs canvas 6.9:1 */
}

.modal {
  background: var(--color-surface); /* #e6e6e6 */
  border-radius: 100%;
  box-shadow: var(--shadow-md); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #1a1a1a */
}

.input-error {
  border-color: #fc4040; /* mined token: red */
  /* error text: #fc4040 on canvas — contrast 3.5:1, below AA; darken for message text */
}

.input-success {
  border-color: #10c47f; /* mined token: green */
}
```

## Observations

- 11 of 23 extracted colors are neutrals.
- 2 distinct shadows; the softest reaches 0px blur.
- 8 breakpoints, from 375px to 768px.
- The site ships a large native token system (100+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 100:

```css
:root {
  --phn-header-height: 4.125rem;
  --pcom-spacing-x-small: clamp(4px,.25vw + 3px,8px);
  --pcom-spacing-small: clamp(8px,.5vw + 6px,16px);
  --pcom-spacing-medium: clamp(16px,1.25vw + 12px,36px);
  --pcom-spacing-large: clamp(32px,2.75vw + 23px,76px);
  --pcom-spacing-x-large: clamp(48px,3vw + 38px,96px);
  --pcom-spacing-xx-large: clamp(80px,7.5vw + 56px,200px);
  --pcom-motion-duration-long: .6s;
  --pcom-motion-duration-moderate: .4s;
  --pcom-motion-duration-short: .25s;
  --pcom-motion-duration-very-long: 1.2s;
  --pcom-motion-easing-base: cubic-bezier(.25,.1,.25,1);
  --pcom-motion-easing-in: cubic-bezier(0,0,.2,1);
  --pcom-motion-easing-out: cubic-bezier(.4,0,.5,1);
  --pcom-image-hover-scale: scale3d(1.05,1.05,1.05);
  --p-color-canvas: light-dark(#fff,#010205);
  --p-color-surface: light-dark(#f1f1f4,#19191a);
  --p-color-frosted: light-dark(hsla(240,5%,70%,.148),hsla(240,2%,43%,.228));
  --p-color-frosted-soft: light-dark(rgba(143,145,163,.06),rgba(65,65,70,.154));
  --p-color-frosted-strong: light-dark(rgba(100,101,114,.236),rgba(156,156,159,.302));
  --p-color-backdrop: light-dark(rgba(36,36,40,.5),rgba(36,36,40,.5));
  --p-color-primary: light-dark(#010205,#fafbff);
  --p-color-contrast-higher: light-dark(rgba(21,21,25,.8),rgba(246,246,248,.78));
  --p-color-contrast-high: light-dark(rgba(26,26,30,.7),rgba(246,246,248,.67));
  --p-color-contrast-medium: light-dark(rgba(17,17,19,.6),rgba(246,246,248,.56));
  --p-color-contrast-low: light-dark(rgba(36,36,40,.5),rgba(246,246,248,.45));
  --p-color-contrast-lower: light-dark(rgba(79,80,89,.324),rgba(156,156,159,.302));
  --p-color-info: light-dark(#1a44ea,#178bff);
  --p-color-info-medium: light-dark(rgba(26,68,234,.6),rgba(23,139,255,.6));
  --p-color-info-low: light-dark(rgba(26,68,234,.18),rgba(23,139,255,.18));
  --p-color-info-frosted: light-dark(rgba(204,229,255,.55),rgba(11,51,91,.66));
  --p-color-info-frosted-soft: light-dark(rgba(232,242,252,.55),rgba(16,38,61,.66));
  --p-color-success: light-dark(#197e10,#10c47f);
  --p-color-success-medium: light-dark(rgba(25,126,16,.6),rgba(16,196,127,.6));
  --p-color-success-low: light-dark(rgba(25,126,16,.18),rgba(16,196,127,.18));
  --p-color-success-frosted: light-dark(rgba(213,255,204,.55),rgba(11,91,60,.66));
  --p-color-success-frosted-soft: light-dark(rgba(236,252,232,.55),rgba(16,61,44,.66));
  --p-color-warning: light-dark(#ac5102,#f4882a);
  --p-color-warning-medium: light-dark(rgba(172,81,2,.6),rgba(244,136,42,.6));
  --p-color-warning-low: light-dark(rgba(172,81,2,.18),rgba(244,136,42,.18));
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-blue`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.