Reverse-engineered design system

Design System
Analysis of Porsche

A deliberately monochrome, engineered system: near-black ink on white, hierarchy built from sheer size in a single regular weight, and the only real colour coming from the cars. The famous Guards Red stays on the crest — never the buttons.

01 — Foundations

Colour Palette

Two near-blacks do almost all the work, sitting on white or one soft grey. The text ramp is pure translucent black from the --p-color-contrast-* tokens; saturated colour is reserved for semantic states.

02 — Foundations

Typography

Set in Porsche Next (proprietary) — shown here in Saira as the nearest Google substitute. Hierarchy is built from size, not weight: even the largest headings stay at regular 400.

03 — Components

Button Variants

button-primary
Solid near-black #010205, radius 12px. The single primary action on the site — Porsche's digital CTA is black, not red.
button-dark · inverted
The same near-black used for utility actions and on light panels. One ink, used everywhere.
button-secondary
Transparent with a 1px ink outline — the quiet alternative to the filled CTA.
button-pill · chip
Frosted #dadbde fill, fully rounded. Used for spec chips and filter tags.
04 — Components

Cards & Surfaces

White, borderless model cards (radius 24px) float on the soft-grey canvas. Depth is implied by contrast, not shadow — most of the site is flat.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px-based rhythm with generous vertical space between full-width sections.

07 — Foundations

Border Radius

12px is the workhorse (buttons, tags, inputs); cards step up to 24px; chips, badges and controls go fully round.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default: white cards on grey, no shadow at all.
Level 1 — --p-shadow-md, 0 4px 16px rgba(0,0,0,.16). Hovered cards and overlays.
Level 2 — --p-shadow-lg, 0 8px 40px rgba(0,0,0,.16). Flyout menus and modals.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle-column cards; filter rail stacks above the grid; header collapses to the centred wordmark + Menu.
Tablet768–1023pxTwo-up card grid; left filter rail returns; display headings drop to ~48px.
Laptop1024–1279pxThree-up model cards beside the faceted filter rail.
Desktop≥ 1280pxCentred max-width container, full hero scale, four-up content grids.

The responsive strategy mirrors the visual one: remove, align, and let the photography carry the weight.

Model Line-up

Pricing is presented as model tiers — the same card grammar, with the hero model rendered as the inverted black "feature" panel.

718
$75,400 MSRP
The mid-engine sports car.
  • 2.0L flat-four
  • 300 hp · 0–60 in 4.7s
  • Rear-wheel drive
  • PDK or 6-speed manual
911● Most popular
$122,095 MSRP
The benchmark sports car.
  • 3.0L twin-turbo flat-six
  • 388 hp · 0–60 in 3.9s
  • Rear or all-wheel drive
  • Cabriolet & Targa bodies
Taycan
$99,400 MSRP
All-electric performance.
  • Up to 1,019 hp
  • 800V architecture
  • Up to ~318 mi range
  • Single or dual motor

Build Tracker

Data tables keep the same restraint — hairline rows, uppercase micro-labels, and status as a single quiet pill (green only when something is genuinely "go").

OrderModelConfigurationStatusETA
#PC-4821911 Carrera SGT Silver · 20/21″ wheelsIn transitJul 14
#PC-4790Taycan 4SFrozen Blue · Performance Battery+In productionAug 02
#PC-4775718 CaymanGuards Red · Sport ChronoReady for pickupNow
#PC-4768Macan ElectricDolomite Silver · Air suspensionAwaiting build slotSep 10
#PC-4751Panamera 4Volcano Grey · Executive packageIn productionAug 21
1–5 of 412
123

Porsche ID

Auth forms inherit the same vocabulary: hairline inputs at 12px radius, the black primary button, and a quiet outlined fallback.

Sign in

Welcome back

OR
Create account

Create your Porsche ID

OR