What is Porsche's primary brand color?

Porsche does not use a signature chromatic voltage the way Ferrari uses Rosso Corsa or Lamborghini uses Arancio. The system is fundamentally monochrome — black (#000000) display type and near-white (#fafbff) canvas inversions, with photography carrying every chromatic moment. The one chromatic token in the extracted palette is Indigo Blue (#1a44ea), bound to `--p-color-focus` and `--p-color-info`, used for keyboard focus rings and info notices rather than CTAs or brand marks. Stuttgart's brand voltage is the photograph of the car, not a hex code.

What typography does Porsche use, and what should I use if Porsche Next isn't available?

Porsche runs Porsche Next as the single sans family across every text role — h1, h2, h3, body, caption, nav. The CSS declares it as `"Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif`, including the CJK fallbacks for the Chinese market. Every captured weight is 400 — display weight does not promote to 500 or 700 the way it does in most luxury-auto systems. Letter-spacing is held at `normal` across the entire scale. Substitutes: Arial Narrow at weight 400 is the documented fallback; Inter at weight 400 with `tracking: 0` is the closest open-source approximation; Söhne is the closer humanist alternative for paid licenses.

Why does Porsche use such a generous 32px corner radius?

The 32px radius (`--p-radius-4xl`) is the brand's softened-photography signature. Of 13 distinct radius values captured, 32px appears 10 times — on model photo tiles, locator cards, and the cinema mosaic. The radius vocabulary is intentional: 2px (xs), 4px (sm), 6px (md), 8px (lg), 12px (xl), 16px (2xl), 24px (3xl), 32px (4xl), and pill (full). Where Ferrari sits at 0px sharp corners for racing-precision and Bugatti uses a binary 0px-or-pill, Porsche softens to 32px — closer to consumer-tech radius vocabulary than luxury-auto. The framing reads as photo-tile rather than spec-sheet.

What is Porsche's fluid clamp() typescale and why does it matter?

Porsche's typescale is declared entirely in CSS `clamp()` rather than fixed pixel ladders. `--p-typescale-5xl` resolves to `clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)`, `--p-typescale-4xl` to `clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem)`, and so on down to `--p-typescale-xs` at fixed 0.875rem. The effect: display type resizes continuously between 320px and 1440px viewports without a single media-query break. Most marketing sites step type at sm/md/lg/xl breakpoints; Porsche's chrome interpolates, which is why a 94.72px h1 at 1440px-wide gracefully degrades to ~36px on a 375px phone without a separate mobile token.

Can I use this DESIGN.md to build a React car-configurator or marketing surface?

Yes — the file is built to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Porsche's restraint — Porsche Next at 400, 32px radius photo tiles, fluid clamp() typescale, white canvas with full-bleed cinema hero — rather than a generic dark-luxury template. You can also paste the tokens directly into Tailwind config (the `--p-radius-*`, `--p-typescale-*`, and `--p-color-*` custom property names map one-to-one). The 18 components cover most of what a luxury-auto marketing surface needs: top nav, hero band, model photo tile, locator card, find-your-dealer card, info notice, focus ring, and footer.

What's missing from this DESIGN.md spec?

Several things, documented in the Known Gaps section. The extractor captured 7 base colors on the U.S. landing page — Porsche's full configurator surface (paint pickers, interior swatches, wheel options) holds dozens of color tokens not visible on the marketing surface. Porsche Next is a licensed typeface; Arial Narrow at weight 400 is the documented fallback. The system supports light/dark via the `light-dark()` CSS function in every `--p-color-*` token, but only the light mode is captured on the marketing landing page. Animation easing tokens (`--pcom-motion-easing-base` cubic-bezier(.25,.1,.25,1)) are captured but not exercised. Form validation states beyond focus, the Porsche ID account surface, and the in-product configurator are out of scope.

Porsche Design System

Porsche's design system as a DESIGN.md file.

About Porsche DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source porsche.com

Automotive

Porsche's marketing surface is the inverse of Ferrari's. Where Maranello stages near-black cinema with sharp 0px CTAs and a single Rosso Corsa voltage, Stuttgart runs a near-white canvas (#ffffff) holding deep black display type, softens every photo tile to a generous 32px radius, and lets the photography do the chromatic work — the cars themselves carry the color. The custom face is Porsche Next, declared in CSS as `"Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif`. It runs at weight 400 across every text role captured on the page: 94.72px h1, 72.51px h2, 16px body, 12px caption. Letter-spacing stays at `normal` across the whole scale. The single chromatic accent surfaces only inside `--p-color-focus` and `--p-color-info` as Indigo Blue (#1a44ea) — never as a CTA fill.

This page packages the system into a single DESIGN.md file using the Google Labs open spec. Inside: 18 color tokens grouped into canvas, ink, photo-overlay, and semantic accents; 9 typography tokens running through Porsche Next at weight 400 across a fluid clamp() scale (`--p-typescale-2xs` 0.75rem through `--p-typescale-5xl` clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem)); 6 corner-radius values capped by a dominant 32px on photo tiles; 9 spacing tokens on the brand's fluid clamp() ladder; and 18 components covering top nav, model-photo tile, hero band, locator card, mosaic grid, and the dark-on-photo CTA pattern.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent writes React surfaces that read as Porsche — Porsche Next at 400, 32px softened photo tiles, fluid type that resizes between viewports, indigo only on focus rings — rather than a generic dark-luxury theme. Reference the `{token.refs}` directly in Tailwind config, or use the spec as an audit lens: most luxury-auto sites copy Stuttgart's white canvas but miss the radius and the held-at-400 typographic discipline that make it work.

What makes it distinct

Single typeface, single weightPorsche Next at 400 carries h1 (94px) down to caption (12px) with letter-spacing held at normal
Generous 32px radius photo tileswhere Ferrari runs 0px sharp corners on every card, Porsche softens to a dominant 32px on 10 of 13 captured shapes
Fluid clamp() typescale`--p-typescale-5xl` resolves clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem), eliminating breakpoint ladders entirely
Cinema hero over white bodyblack 1440x900 hero band sits above an all-white model grid, photography handles the depth
Indigo Blue focus accent (#1a44ea)the brand reserves chromatic voltage for `--p-color-focus` and `--p-color-info` only, never for CTAs

Live at porsche.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

porsche.com

Explore Porsche

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Porsche design system FAQ

Common questions about Porsche's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Porsche.com — United States

The live brand site for the U.S. market — see the white-canvas model grid, 32px radius photo tiles, and Porsche Next typography in production.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Porsche in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→