Design System
Analysis of Polestar

A near-monochrome Swedish system: pure black on white, hierarchy built from scale and air rather than weight, square-cornered black buttons, hairline dividers, and a single magnetic amber accent.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in Polestar Unica (a bespoke neo-grotesque), shown here in Inter as the nearest Google substitute. Almost everything is weight 400 — hierarchy comes from size and negative tracking, not boldness.

03 — Components

Button Variants

button-primary
Solid black fill, white text, hard 0px corners, 16×24 padding. The default high-emphasis action.
button-dark
Identical black fill used on light bands for primary confirmation.
button-secondary
Transparent fill with a 1px black outline — the medium-emphasis pair to the black button.
button-pill
Rare rounded utility chip on a light grey fill for filters and toggles.
link · inline
Learn moreSpecifications
Underlined black text links carry most low-emphasis navigation.
04 — Components

Cards & Surfaces

Product tiles are media-led: a large square-cornered image, an uppercase eyebrow badge, a calm 18px model name, and price in the neutral ramp. No shadow at rest — depth arrives only on hover.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

An 8px base unit. Buttons pad to 16×24; sections breathe at 32–48px, giving the layout its roomy, measured rhythm.

07 — Foundations

Border Radius

Corners are essentially square. The dominant component shape is a hard 0px; small radii appear only on media tiles and a few rounded controls.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default. Surfaces are separated by rules, not shadow.
Level 1 — faint 7–14px ambient lift, used only on hovered media cards.
Level 2 — soft 18px glow reserved for a floating or focused element.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxSingle column; display type steps down to ~56px; nav condenses to a minimal menu.
Tablet768–1023pxTwo-column product grids; full-bleed hero bands retained.
Laptop1024–1279pxThree to four-column rows return; container widens.
Desktop≥ 1280pxMax-width container centred; oversized display type at full scale.

Throughout: the monochrome, hairline-separated, shadow-free character holds at every breakpoint — only the column count and display scale change.

Trim & Pricing

Polestar's monochrome system applied to a configurator-style pricing pattern. The featured tier inverts to the black band; the amber accent marks the recommended choice.

Long range Single motor
$66,200/ est.
Efficiency-focused rear-wheel drive with the longest range.
  • Up to 320 mi range
  • 299 hp
  • 0–60 in 6.9s
  • 19" wheels
Long range Dual motor● Recommended
$72,400/ est.
All-wheel drive performance with adaptive chassis.
  • Up to 300 mi range
  • 421 hp
  • 0–60 in 4.3s
  • 20" wheels
Performance Pack
$78,900/ est.
Öhlins dampers, Brembo brakes, and Swedish gold details.
  • Up to 270 mi range
  • 449 hp
  • 0–60 in 3.9s
  • 21" forged wheels

Order Status

A data-table pattern in the Polestar idiom: uppercase micro-labels, hairline row rules, square status chips, no zebra striping.

OrderModelConfigurationStatusUpdated
PS-40271Polestar 4Long range Dual motorConfirmed2 days ago
PS-40268Polestar 3Performance PackIn production5 days ago
PS-40255Polestar 2Long range Single motorDelivered1 week ago
PS-40240Polestar 4Long range Single motorAwaiting build2 weeks ago
PS-40233Polestar 3Long range Dual motorIn transit3 weeks ago
1–5 of 412
‹123›

Account

Auth screens in the same restrained system — square fields, a 1px hairline card, black primary button, and an outlined SSO ghost button.

Sign in

Welcome back

OR
Create account

Join Polestar

OR