Porsche Design System

Overview

Porsche's marketing surface is the inverse of Ferrari's — where Maranello stages near-black cinema with sharp 0px CTA corners and a single Rosso Corsa voltage, Stuttgart runs a near-white canvas ({colors.canvas} — #ffffff) holding deep black display type and softens every photo tile to a generous 32px radius. The single chromatic accent ({colors.focus} — #1a44ea Indigo Blue) surfaces only on keyboard focus rings and info notices, never as a CTA fill. The cars themselves carry the color.

Held-at-400: where most luxury-auto brands lean on weight 500 or 600 for display authority, Porsche holds every captured text role — 94.72px hero h1, 72.51px h2, 16px body, 12px caption — at weight 400 with letter-spacing pinned at normal. The discipline reads as engineered restraint. Display headlines do not bold; section labels do not uppercase-track; nav items do not promote weight on hover.

Radius as restraint: of 13 distinct corner-radius values captured, 32px ({rounded.4xl}) appears 10 times across model tiles, locator cards, the find-your-dealer panel, and the mosaic grid. The full radius vocabulary spans 2px through 32px plus pill — but the dominant value is the softened 32px, closer to consumer-tech surfaces than the racing-precision 0px of Ferrari or the binary 0/pill of Bugatti.

Key Characteristics:

• Single typeface: Porsche Next at weight 400 across every captured text role.
• White canvas ({colors.canvas} — #ffffff) with full-bleed cinema hero over a dark band ({colors.canvas-dark} — #010205).
• Dominant 32px ({rounded.4xl}) radius on photo tiles and cards.
• Fluid clamp() typescale — display sizes interpolate between viewports rather than stepping at breakpoints.
• Indigo Blue ({colors.focus} — #1a44ea) reserved for focus rings and info, never CTAs.
• Letter-spacing held at normal across the entire scale.
• Photography carries every chromatic moment.

Colors

Brand & Accent

• Porsche Black ({colors.primary} — #010205) — frequency 2. Used as bg (2). The brand's deep canvas-dark used for cinema hero band and locator card backgrounds — not pure black, slight blue tilt.
• Pure Ink ({colors.ink} — #000000) — frequency 621. Used as text (217), border (217), gradient (180), bg (7). The dominant display-text color across white-canvas sections.

Surface

• Canvas ({colors.canvas} — #ffffff) — frequency 44 (clustered with the #fafbff near-white variant). Used as bg (6), text (19), border (19). The primary page floor under the model grid and footer.
• Canvas Elevated ({colors.canvas-elevated} — #fafbff) — frequency 44 (same cluster, near-white tilted faintly cool). Used for cookie banners and elevated panels.
• Canvas Soft ({colors.canvas-soft} — #f1f1f4) — declared in --p-color-surface light-dark token. Used as soft photo-tile backdrop before the photograph renders.
• Canvas Dark ({colors.canvas-dark} — #010205) — frequency 2. Used as bg (2). The cinema-band and locator-card backdrop.

Hairlines & Borders

• Hairline ({colors.hairline} — #d5d5d5) — frequency 1. Used as bg (1). 1px divider on light bands and form-input border.
• Hairline Muted ({colors.hairline-muted} — #9e9eff) — frequency 12. Used as text (6), border (6). A desaturated periwinkle that surfaces on muted text and decorative dividers — closest hex Porsche has to a "secondary" voice.

Text

• Ink Soft ({colors.ink-soft} — #1a1a1e) — frequency 2. Used as text (1), border (1). Footer link color, lower-contrast text.
• Ink Muted ({colors.ink-muted} — #2b2c2f) — frequency 4. Used as text (2), border (2). Tertiary text and disabled states.
• Body on Dark ({colors.body-on-dark} — #fafbff) — same cluster as canvas-elevated. White text on the cinema hero band.
• On Photo ({colors.on-photo} — #fafbff) — h1 text color over the dark hero photograph.

Semantic (from CSS variables)

• Focus ({colors.focus} — #1a44ea): Indigo Blue, bound to --p-color-focus. The only saturated brand voltage — keyboard focus rings only.
• Info ({colors.info} — #1a44ea): Same Indigo Blue, bound to --p-color-info. Info notices, inline anchor cues.
• Warning ({colors.warning} — #ac5102): Deep amber, bound to --p-color-warning. Validation warnings.
• Error ({colors.error} — #ba171f): Deep red, bound to --p-color-error. Form validation errors.
• Success ({colors.success} — #197e10): Forest green, bound to --p-color-success. Confirmation.

Typography

Font Family

Porsche Next is the licensed single sans family across every text role. The CSS declaration is "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif — with Arial Narrow as the documented fallback and CJK families for Chinese-market support. No display/body family split.

Hierarchy

Principles

• Every weight is 400. Display does not promote to 500 or 700; emphasis comes from size and case rather than weight.
• Letter-spacing is normal everywhere. No tracking on display, no uppercase tracking on CTAs or nav. The system rejects the typographic-muscle move that fintech and most luxury-auto brands use.
• Fluid clamp() between viewports. --p-typescale-5xl resolves clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem) — a 94.72px desktop hero gracefully interpolates to ~36px mobile without a single media-query break.

Note on Font Substitutes

Porsche Next is licensed. Documented fallback: Arial Narrow at weight 400. Open-source approximation: Inter at weight 400 with tracking: 0; Söhne for closer humanist proportions on paid licenses.

Layout

Spacing System

• Base unit: the brand uses a fluid 30px base for major rhythm — --p-spacing-fluid-md resolves clamp(16px, 1.25vw + 12px, 36px).
• Tokens: {spacing.2xs} 4px · {spacing.xs} 8px · {spacing.sm} 13px · {spacing.md} 16px · {spacing.base} 30px · {spacing.lg} 48px · {spacing.xl} 63px · {spacing.2xl} 80px · {spacing.3xl} 92px.
• Section padding: 63px vertical / 92px horizontal is the dominant band rhythm (captured as 81.2px 0px 62.6px and 30px 91.76px 0px in extracted values).

Grid & Container

• Hero photography goes full-bleed at 1440px.
• Model grid: 2-up at desktop (Cayenne / 718, Taycan / Panamera, Macan / Cayenne stacked pairs).
• Footer: full-width centered.

Whitespace Philosophy

Generous editorial pacing. The cinema hero owns the top viewport, then the model grid breathes with 30px tile gaps and 32px tile radius. Body sections sit on the white canvas; the locator-card injects a single dark band before the footer.

Elevation & Depth

The system uses photographic depth + radius-step elevation. Drop shadows are declared (--p-shadow-sm 0px 3px 8px rgba(0,0,0,.16), --p-shadow-md 0px 4px 16px rgba(0,0,0,.16), --p-shadow-lg 0px 8px 40px rgba(0,0,0,.16)) but the marketing surface relies primarily on the 32px radius cards and full-bleed photography.

Decorative Depth

• Full-bleed model photography is the brand's primary depth treatment — every model tile is a photograph at 32px radius rather than a flat fill.
• Frosted blur (--p-blur-frosted: blur(32px)): Used inside cookie banner and modal backdrops over photography.

Shapes

Border Radius Scale

The radius vocabulary is softened by default. 32px ({rounded.4xl}) is the dominant value across photo tiles and locator cards — appearing 10 of 13 times in the captured set. Buttons are fully pill ({rounded.full}); inputs sit at {rounded.lg} (8px). The brand never uses sharp 0px corners outside the full-bleed hero band edge.

Components

Top Navigation

top-nav — White-canvas top nav, 82px tall, padded 0px × 30px. Layout: Porsche wordmark left, primary horizontal menu (Models / Approved Pre-owned / Configurator / Owners / Locator), search + utilities right. Nav links render in body-md (16px / 400) — never uppercase-tracked.

Hero Bands

hero-band-cinema — Full-bleed black cinema band. Background {colors.canvas-dark} (#010205) holds the model photograph; display h1 in {typography.display-5xl} (94px / 400, fluid clamp) renders white over the photo bottom edge. Zero padding — photograph fills edge-to-edge.

hero-headline — Transparent overlay headline on the cinema photograph. Text {colors.on-photo} (#fafbff), typography {typography.display-5xl}.

section-headline — White-canvas section headline below the cinema band. Background transparent, text {colors.ink}, typography {typography.display-4xl} (72px / 400), padded 63px top, 92px sides, 81px bottom.

Tiles & Cards

model-photo-tile — The brand's signature surface. Soft {colors.canvas-soft} (#f1f1f4) backdrop holds the model photograph; tile rounded at {rounded.4xl} (32px); typography {typography.heading-xl} for the model name. Zero padding — photograph fills the rounded frame.

model-photo-tile-dark — Dark variant for select model tiles (Panamera, Cayenne). Background {colors.canvas-dark}, text {colors.on-photo}, same 32px radius.

locator-card — "Find Your Porsche Center" card. Background {colors.canvas-dark}, text {colors.on-photo}, body in {typography.body-lg}, 30px padding, 32px radius. Holds a CTA + map glyph.

mosaic-tile-photo — Editorial mosaic-grid tile. Background {colors.canvas-soft}, same 32px radius, typography {typography.heading-xl}.

Buttons

button-primary — White-fill pill on dark bands. Background {colors.canvas} (#ffffff), text {colors.ink}, typography {typography.body-md} (16px / 400 / no tracking), padding 13px × 30px, height 54px, rounded {rounded.full} (pill). Where Ferrari's button is a sharp 0px Rosso Corsa rectangle, Porsche's is a fully pilled white slug.

button-secondary-on-photo — Transparent pill with 1px white outline over photograph. Background transparent, text {colors.on-photo}, 1px white border, pill radius.

button-tertiary-text — Inline text link. Background transparent, text {colors.ink}, body-md typography.

Forms

text-input — Background {colors.canvas-elevated} (#fafbff), text {colors.ink}, body-md typography, rounded {rounded.lg} (8px), padding 13px × 16px, height 54px, 1px {colors.hairline} border.

text-input-focus — Focus state. 1px {colors.focus} (#1a44ea Indigo Blue) border — the only place chromatic voltage surfaces in the form chrome.

Misc

cookie-banner — Soft elevated banner. Background {colors.canvas-elevated}, text {colors.ink}, body-sm typography, 30px padding, 32px radius.

badge-pill — Small caption pill. Background {colors.canvas-soft}, text {colors.ink}, caption typography (12px / 400), pill radius, 4px × 13px padding.

nav-link — Background transparent, text {colors.ink}, body-md typography, padded 0 × 16px horizontal.

Footer

footer — Closing white footer. Background {colors.canvas}, text {colors.ink-soft} (#1a1a1e), body-sm typography, 63px × 30px padding. Multi-column link list.

footer-link — Background transparent, text {colors.ink-muted} (#2b2c2f), body-sm typography.

Do's and Don'ts

Do

• Hold every text role at weight 400. The brand never promotes display to 500 or 700.
• Pin letter-spacing at normal across the full scale, including buttons and nav.
• Round every photo tile and card to {rounded.4xl} (32px) — the brand signature.
• Render CTA buttons as fully-pilled {rounded.full} rectangles, never as sharp 0px.
• Use the fluid clamp() typescale — --p-typescale-5xl interpolates 94px down to 36px without media queries.
• Reserve {colors.focus} (#1a44ea Indigo Blue) for focus rings and info notices only.

Don't

• Don't fill the primary CTA with {colors.focus} (#1a44ea). It's a focus-ring token, not a brand voltage — Indigo Blue appears on --p-color-focus and --p-color-info only, never on button-primary. For primary CTAs, use white-on-photo or black-on-light.
• Don't add uppercase tracking to nav links or CTAs the way Ferrari and Bugatti do. Porsche's CTA renders in body-md (16px / 400 / no tracking) — uppercase-tracked labels break the held-at-400 discipline.
• Don't use sharp 0px corners on photo tiles. The brand's tile radius is 32px ({rounded.4xl}); dropping to 0px reads as Ferrari, not Porsche.
• Don't promote any display token to weight 500 or 700. Emphasis comes from size and case — the 94px h1 and the 12px caption both render at 400.
• Don't paint {colors.hairline-muted} (#9e9eff) as a background fill. It's a 12-occurrence border + muted-text token; using it as a bg surface reads as a chip rather than a divider.
• Don't ladder type at media-query breakpoints. The clamp() typescale handles 320px-to-1440px interpolation natively; stepping at sm/md/lg/xl undoes the fluid signature.
• Don't extract a CTA color from a third-party widget (cookie consent, OneTrust). The brand's CTA color is what appears on actual product CTAs.

Known Gaps

• The extractor captured 7 base colors on the U.S. landing page; the configurator surface (paint pickers, interior swatches, wheel options) holds dozens of model-specific tokens not visible on the marketing landing page.
• Porsche Next is a licensed typeface; Arial Narrow at weight 400 is the documented fallback declared in the CSS font-stack.
• The full --p-color-* token system supports light/dark via the CSS light-dark() function on every color token; only light mode was captured on the U.S. landing page.
• Animation easing tokens (--pcom-motion-easing-base cubic-bezier(.25,.1,.25,1), --pcom-motion-duration-moderate .4s) are captured but not exercised on the marketing page.
• Form validation states beyond focus, the Porsche ID account surface, and the in-product configurator are out of scope.
• Drop shadow tokens (--p-shadow-sm, --p-shadow-md, --p-shadow-lg) are declared at root but rarely surface on the captured marketing page — radius and photography carry the depth.