primary
#010205
Actions, icons, headlines, footer.
International design extraction / 2026
Precision interfaces for performance machines.
A catalog preview built around Porsche's real digital language: white space, near-black controls, disciplined specs, large model imagery, and calm configurator surfaces.
01 / Colors
Neutral precision, functional color.
accentHover
#333333
Subtle black CTA hover state.
accentPressed
#4d4d4d
Pressed and active action state.
canvas
#FFFFFF
Dominant premium page ground.
surface
#F2F2F3
Configurator and quiet grouped UI.
modelBadge
#E7E7E8
Powertrain and body-type badges.
body
#393A3D
Long-form copy and product details.
muted
#6B6D70
Metadata, legal, emissions copy.
border
#D8D8DB
Rules, cards, stat separators.
focus
#1A44EA
Keyboard focus, not decoration.
error
#BA171D
Invalid inputs and destructive states.
success
#237A1D
Validation and positive feedback.
02 / Typography
Engineered scale, restrained weight.
911 Carrera
display — 72px / 400 / 1.04 / 0em / Porsche Next
Timeless performance.
hero — 56px / 400 / 1.08 / 0em / Porsche Next
Models built for motion.
headline-lg — 42px / 400 / 1.12 / 0em / Porsche Next
Configure your sports car
title-lg — 32px / 400 / 1.18 / 0em / Porsche Next
Carrera GTS Coupé
title-md — 24px / 400 / 1.25 / 0em / Porsche Next
Selected powertrain
title-sm — 20px / 600 / 1.3 / 0em / Porsche Next
The interface uses calm body copy beside larger technical figures and vehicle imagery.
body — 16px / 400 / 1.55 / 0em / Porsche Next
Configure now
button/label — 16px/14px / 600 / 1.25 / 0em / Porsche Next
Fuel consumption combined: simulated preview value.
caption — 14px / 400 / 1.45 / 0em / Porsche Next
All technical values shown here are catalog placeholders.
legal — 12px / 400 / 1.45 / 0em / Porsche Next
312 km/h
performance-display — 48px / 400 / 1.05 / 0em / Porsche Next
03 / Buttons
Compact, black, deliberate.
04 / Cards & Surfaces
Product-first surfaces.
911
Explore models
Electric
Build your own →Taycan
Rounded photo tiles frame the car, while text and actions stay compact and quiet.
Dark media card
Used over rich imagery or footer-like brand zones with white outline actions.
Flyout surface
Elevation is reserved for overlays and panels, not every product tile.
Newsroom story
Editorial content is clean, white, bordered, and relies on imagery for energy.
Specification module
480PS
3.9s
302km/h
05 / Brand-Specific Product Patterns
Configurator and performance UI.
Model filter
AllSports CarsElectricSUV
Gasoline CoupéVariant list
911 Carrera394 PS
911 Carrera S480 PS
911 Carrera GTS541 PS
Performance stats
3.2s0-100
312km/h
541PS
Numbers breathe; rules do the organizing.
Model badge rail
Electric Hybrid Gasoline
AWD Cabriolet Coupé
Small neutral pills, never colorful chips.
Configurator panel
WhiteBlackSilver
Consumption note
Fuel consumption combined: preview value. CO2 emissions combined: preview value. Values shown for layout extraction only.
Editorial tile
Newsroom / InnovationStory cards use restrained text and a strong image plane.
Mobile action stack
06 / Forms
Functional fields, visible focus.
07 / Spacing
Measured vertical rhythm.
08 / Radius
Soft enough for product, never playful.
sm
4px / small controls
md
6px / compact panels
lg
8px / buttons, fields
xl
16px / cards
xxl
32px / model tiles
pill
9999px / badges, icons
09 / Elevation
Flat first, elevated only for overlays.
Flat card
border only
Most product surfaces stay flat.
Shadow sm
0 3px 8px rgba(0,0,0,.16)
Shadow md
0 4px 16px rgba(0,0,0,.16)
Shadow lg
0 8px 40px rgba(0,0,0,.16)
10 / Extracted Component Tokens
CSS custom properties.
:root {
--brand-primary: #010205;
--brand-ink: #010205;
--brand-body: #393A3D;
--brand-muted: #6B6D70;
--brand-canvas: #FFFFFF;
--brand-surface: #F2F2F3;
--brand-surface-alt: #E7E7E8;
--brand-border: #D8D8DB;
--brand-border-strong: #A8A8AD;
--brand-focus: #1A44EA;
--brand-error: #BA171D;
--brand-footer-bg: #010205;
--brand-model-badge: #E7E7E8;
--font-brand: "Arial Narrow", Arial, sans-serif;
--radius-lg: 8px;
--radius-xl: 16px;
--radius-xxl: 32px;
--space-section: 96px;
--shadow-md: 0px 4px 16px rgba(0,0,0,.16);
}