Polestar 5

Overview

Polestar 5 embodies Scandinavian Minimalism applied to high-performance automotive design—a philosophy that strips away ornamentation to reveal essential form and function. The brand serves affluent, design-conscious buyers who view the car as a statement of refined taste rather than conspicuous consumption. The visual identity is rooted in 'Architectural Restraint': a monochromatic palette (pure black, white, and warm grays) paired with precision typography and generous white space that evokes clarity, control, and understated confidence. The interface evokes a sense of calm authority—the user feels they are piloting a machine engineered by people who understand both performance and elegance.

The brand voice is precise, declarative, and never breathless. Polestar speaks in the language of engineering: materials, tolerances, power outputs, and design intent. Vocabulary patterns favor concrete nouns (aluminum, carbon, torque) over abstract adjectives. Example sentence in brand voice: 'The bonded aluminum unibody reduces mass by 15% while maintaining structural rigidity across all load cases.'

Colors

The color system is built on a foundation of near-absolute contrast: pure black (#000000) as primary, pure white (#ffffff) as on-primary, with a carefully curated gray scale (graphite blacks, iron greys, agathe greys) providing depth and hierarchy. Primary (#000000) is deployed on all call-to-action buttons ('Configure', 'How to buy'), interactive states, and brand-critical UI elements—it commands attention through its uncompromising darkness. On-primary (#ffffff) ensures legibility and creates the crisp, high-contrast aesthetic that defines the brand. Secondary (#3a3c3f) is used for subtle interactive elements and secondary navigation, providing a softer alternative to pure black while maintaining the monochromatic discipline. Tertiary (#b1b3b3) serves as a neutral accent for disabled sta

Typography

The type system centers on Polestar Unica, a proprietary sans-serif that communicates precision and Scandinavian heritage. Display (60px, 400 weight, -0.04em tracking) is reserved for hero statements and brand moments; Headline-lg (42px, 400 weight, -0.02em tracking) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and interface copy. The consistent use of 400 weight across all sizes—rather than mixing weights—reinforces the minimalist philosophy: hierarchy is achieved through size and spacing, not typographic weight. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels (label-sm, 12px) when they appear over photographic backgrounds to ensure legibility without compromising the clean aesthetic. Letter-spacing is nega

Layout

The page layout follows a 12-column grid with a maximum container width of 1280px, enabling flexible content arrangement while maintaining visual discipline. The hero section uses full-width imagery (the Polestar 5 product shot) with centered typography overlay, creating an immersive entry point. White space is deployed generously—lg spacing (40px) separates major sections, md spacing (24px) creates breathing room between cards and content blocks, and sm spacing (12px) is used for internal component padding. The gutter width is 24px, consistent with the md spacing token, ensuring that content feels neither cramped nor adrift. Container max-width of 1280px prevents text lines from becoming uncomfortably long on ultra-wide displays, maintaining a reading rhythm of 50–75 characters per line.

Elevation & Depth

Depth is conveyed through subtle shadow and layering rather than color gradation. Level 1 (Base): The white background (rgb(255, 255, 255)) serves as the foundation; no shadow. Level 2 (Cards & Containers): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) creates a barely perceptible lift, signaling that the element is interactive or contains grouped content. Level 3 (Modals & Overlays): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) provides stronger separation, used on hover states and elevated components. The shadow values are deliberately restrained—no blur radius exceeding 12px, no spread radius—mai

Shapes

The shape philosophy is 'Architectural Sharpness'—corners are either sharp (0px radius) or subtly rounded (4px to 24px), never organic or heavily curved. Buttons use rounded: DEFAULT (8px / 0.5rem) to soften the edges while maintaining geometric clarity; this radius is applied uniformly across all button sizes (primary, secondary, icon). Cards and containers use rounded: md (12px / 0.75rem) to create a gentle visual separation from the background without introducing softness. Input fields use rounded: DEFAULT (8px) to align with button styling and create a cohesive interaction language. The ci

Components

Action Elements Buttons are the primary interaction mechanism and follow a strict two-state system: button-primary (black background, white text, 48px height, 16px horizontal padding, 8px border-radius) for primary actions ('Configure', 'How to buy'); button-secondary (transparent background, black text, 1px black border) for secondary actions ('Test drive'). Both states include a 200ms transition on background-color using cubic-bezier(0.15, 1, 0.35, 1) easing. Hover states darken the primary button to #2b2b2b (primary-container) and lighten the secondary button background to #e0e0e0 (surface-container-high). Icon buttons (button-icon) are circular (48px diameter, rounded: full) with a dark gray background (#3a3c3f) and white icon, used for navigation and secondary controls.

Conta

Do's and Don'ts

**Do**

• Do use pure black (#000000) and white (#ffffff) as the primary contrast pair; this is the visual signature of the brand and must never be diluted with near-blacks or off-whites.
• Do apply the 200ms cubic-bezier(0.15, 1, 0.35, 1) transition curve to all interactive state changes (hover, focus, active); this easing communicates mechanical precision and control.
• Do maintain consistent 24px (md spacing) gutters and padding on cards and containers; white space is a design material in this system, not a byproduct.
• Do use Polestar Unica at 400 weight exclusively; hierarchy is achieved through size and spacing, never through weight variation.

**Don't**

• Don't introduce color beyond the defined palette (black, white, grays, and error red); the monochromatic discipline is non-negotiable and differentiates Polestar from competitors.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary rounding breaks the geometric precision of the system.
• Don't apply shadows with blur radius exceeding 12px or spread radius exceeding 0px; heavy shadows contradict the minimalist aesthetic and reduce visual clarity.
• Don't mix font weights or introduce italic variants; the 400-weight-only approach is intentional and reinforces the brand's engineering-first philosophy.