Porsche Design System

Overview

Porsche's design system embodies Architectural Minimalism—a philosophy that prioritizes structural clarity, precision engineering, and refined restraint over decorative excess. The brand serves automotive enthusiasts and luxury consumers who value performance, heritage, and meticulous craftsmanship. The visual language evokes the precision of a finely-tuned engine: every element has a purpose, every color a function, every spacing a rhythm. The UI conveys confidence through simplicity: a near-black primary (#010205) anchors the interface with authority, while functional accent colors (info blue #1a44ea, success green #197e10) communicate state and action without visual noise.

The Porsche voice is direct, technical yet accessible, never breathless or hyperbolic. Tone: measured, authoritative, precise. Vocabulary favors concrete nouns (performance, precision, heritage) over abstract adjectives. Example sentence: "The Cayenne GTS Coupe delivers 473 horsepower and 470 lb-ft torque—engineered for drivers who demand both power and control."

Colors

The color system operates on a monochromatic foundation with functional accents. Primary (#010205) is the brand's signature near-black, used for body text, primary buttons, and structural elements—it commands attention through density, not brightness. On-primary (#ffffff) provides maximum contrast for text and icons over primary backgrounds. The surface stack (#f1f1f4 base, #ffffff bright, #e6e6e6 dim) creates subtle visual hierarchy through luminance shifts of 5–10% rather than hue changes, maintaining the austere aesthetic. Secondary (#1a44ea, a vivid blue) is reserved for interactive states, links, and information-critical elements—it appears sparingly but unmistakably. Tertiary (#197e10, forest green) signals success, confirmation, and positive outcomes. Error (#ba171f, deep red) commu

Typography

Porsche Next is the exclusive typeface—a geometric sans-serif that balances technical precision with approachable warmth. The type scale uses a fluid system: display (86.4px, 400 weight) anchors hero sections with commanding presence; headline-lg (56px) and headline-md (40px) structure content hierarchy; body-md (16px) and body-lg (18px) ensure readability at 24px line-height with 0em letter-spacing for neutral tone. Title-lg (28px, 600 weight) emphasizes section headers and card titles. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) handle UI labels, buttons, and badges. All display and headline sizes use -0.01em to -0.02em letter-spacing to tighten the visual rhythm; body text maintains 0em for legibility. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (lab

Layout

The layout system uses a 12-column grid with a max-width of 1299px, centered with symmetric gutters. Spacing follows a fluid scale: xs (4px) for micro-adjustments, sm (8px) for component padding, md (16px) for section margins, lg (32px) for major section separation, xl (48px) for hero spacing, and 2xl (80px) for full-page rhythm breaks. Use clamp() for responsive spacing: --pcom-spacing-fluid-md: clamp(16px, 1.25vw + 12px, 36px) scales smoothly from mobile to desktop without breakpoint jumps. Container max-width is 1299px; content rarely exceeds 85% of viewport width on desktop to maintain breathing room. White-space is treated as a design material: generous margins around hero imagery (lg to xl spacing), tight grouping within cards (sm to md), and lg separation between distinct content bl

Elevation & Depth

Depth is conveyed through subtle shadow and surface-color shifts rather than dramatic layering. Level 1 (Base): the canvas (#ffffff) or surface (#f1f1f4) with no shadow—the default state. Level 2 (Raised Cards): background: {colors.surface}, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—used for cards, modals, and floating elements. Level 3 (Elevated/Modals): background: {colors.surface-bright}, box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16)—reserved for critical modals and overlays. Shadows use a consistent 16% black opacity to maintain the refined aesthetic; avoid pure black (0, 0, 0) or high-opacit

Shapes

The shape philosophy is Precision Geometry—rounded corners are used sparingly and purposefully, never as decoration. Buttons and interactive elements use lg (10px) border-radius, creating a soft-technical appearance that feels refined without being playful. Cards and containers use lg (10px) or xl (12px) for a slightly more pronounced softness, signaling containment and separation. Input fields use DEFAULT (6px) for a tighter, more utilitarian feel that emphasizes function. Full-radius (9999px) is reserved exclusively for badges and pill-shaped elements. Avoid mixing radii within a single comp

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#010205) background with {colors.on-primary} (#ffffff) text, 12px vertical padding, 24px horizontal padding, and lg (10px) border-radius. On hover, transition to button-primary-hover: {colors.primary-container} (#e6e6e6) background with {colors.on-primary-container} (#1a1a1a) text over 0.25s. Button-secondary uses a 2px solid border in {colors.outline} (#666666) with transparent background and {colors.primary} text; on hover, fill the background with {colors.surface-container-high} (#e6e6ea). Button-ghost uses rgba(0, 0, 0, 0.04) background with {colors.primary} text; hover to rgba(0, 0, 0, 0.08). All buttons maintain 48px height for touch targets and use {typography.label-md} (14px, 60

Do's and Don'ts

**Do**

• Do use {colors.primary} (#010205) for all primary CTAs, body text, and structural elements—it is the brand's signature and must dominate the interface.
• Do apply lg (10px) border-radius consistently across buttons and cards; avoid mixing radii within component types.
• Do maintain 24px gutters on desktop and 8px on mobile; use clamp() for fluid scaling between breakpoints.
• Do use {colors.secondary} (#1a44ea) and {colors.tertiary} (#197e10) sparingly for functional accents (links, success states, info badges)—they are not primary colors.
• Do apply 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) transitions on all interactive state changes (hover, focus, active).
• Do use {typography.label-md} (14px, 600 weight) for all button text and UI labels; never use lighter weights for interactive elements.
• Do maintain 48px minimum height for all touch targets (buttons, input fields, list items).

**Don't**

• Don't use rounded corners >12px on cards or buttons—excessive rounding contradicts the precision aesthetic and feels playful rather than refined.
• Don't mix {colors.secondary} (#1a44ea) and {colors.tertiary} (#197e10) in the same interface section; reserve each for distinct semantic purposes (info vs. success).
• Don't apply shadows >0 8px 40px rgba(0, 0, 0, 0.16)—deeper shadows feel heavy and undermine the minimalist aesthetic.
• Don't use {colors.primary} (#010205) for backgrounds on large areas; reserve it for text, buttons, and structural accents—use {colors.surface} (#f1f1f4) or {colors.surface-bright} (#ffffff) for content areas.
• Don't add shadows to hover states; transition background-color only to keep the interface calm and predictable.
• Don't use opacity <50% on disabled states; apply {colors.surface-container-high} (#e6e6ea) background with {colors.outline-variant} (#b3b3b3) text instead.
• Don't mix typeface weights within a single line; use weight shifts (400 to 600) only between distinct typographic levels (headline to body, etc.).