Actions, icons, headlines, footer.
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.
Neutral precision, functional color.
Subtle black CTA hover state.
Pressed and active action state.
Dominant premium page ground.
Configurator and quiet grouped UI.
Powertrain and body-type badges.
Long-form copy and product details.
Metadata, legal, emissions copy.
Rules, cards, stat separators.
Keyboard focus, not decoration.
Invalid inputs and destructive states.
Validation and positive feedback.
Engineered scale, restrained weight.
Compact, black, deliberate.
Product-first surfaces.
911
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
Configurator and performance UI.
Model filter
Variant list
Performance stats
Numbers breathe; rules do the organizing.
Model badge rail
Electric Hybrid Gasoline
AWD Cabriolet Coupé
Small neutral pills, never colorful chips.
Configurator panel
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
Functional fields, visible focus.
Measured vertical rhythm.
Soft enough for product, never playful.
Flat first, elevated only for overlays.
Most product surfaces stay flat.
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);
}