What is Polestar's primary brand color?

Polestar does not use a chromatic brand voltage. The system runs black ink (#000000) on a light canvas — a pale studio gray (#efefef) on the hero stage and pure white (#ffffff) on the rest of the page. The dark anthracite footer (#1a1a1a) inverts the relationship, putting white ink on a near-black surface. There is no Polestar red, blue, or accent. The brand voice is carried entirely by the Polestar Unica typeface and the studio photography, not by color.

What typeface does Polestar use, and what's distinctive about it?

Polestar runs Polestar Unica — a proprietary geometric sans-serif licensed for the brand — with a fallback stack of Helvetica Neue, Helvetica, Arial. The family appears at exactly one weight (400) across every size on the marketing site, from 12px legal text to 110px hero numerals. The defining trait is negative letter-spacing that tightens cap-heights together: display sits at -1.2px, the 110px hero numeral pushes to -4.95px, and even body at 16px carries -0.3px tracking. The closest open-source substitute is Inter at weight 400 with tracking pulled toward -0.04em on display sizes.

Why does Polestar use 0px corners almost everywhere?

The system has a binary radius rule: 0px for every rectangular surface (product cards, link-CTAs, photo containers, inputs, footer cells, the legal strip) and 50% for exactly one element — the circular video play button overlaid on the hero. There is nothing in between. The 0px rectangles mirror Scandinavian-furniture geometry, while the lone circle reads as the one operable affordance on a page of static information. Adding mid-scale rounded corners (4px, 8px, 12px) would push the system toward consumer-tech aesthetics and break the gallery framing.

Why does Polestar use link-style CTAs instead of filled buttons?

Where most automotive brands rely on filled primary buttons to drive action, Polestar uses anchored text links with a trailing arrow glyph ('Learn more →', 'Discover the car →', 'Book a test drive →'). The link runs in Polestar Unica 16px / 400 with -0.3px tracking, sits flush against the surrounding copy, and carries no background or border. This treatment refuses to add visual weight that would compete with the car photograph. It also reflects a brand stance that EV purchase is a considered decision arrived at through reading, not a CTA tap.

Can I use this DESIGN.md to build a React project that looks like Polestar?

Yes — the file is designed to feed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent reproduces Polestar's restraint (single-weight type, 0px-or-50% radius binary, link-style CTAs, pale-gray studio stage, anthracite footer inversion) rather than a generic EV theme. You can also paste the tokens directly into Tailwind config or CSS variables. Pair the spec with studio-still product photography on a neutral backdrop — without that photographic treatment, the chrome alone will read as a stripped-down corporate page.

What's missing from this DESIGN.md spec?

A few things are out of scope: the vehicle configurator (color, wheel, and interior pickers behind the 'Order Now' flow) was not in the analyzed pages and carries swatch grids and comparison panels not captured here. The Polestar Spaces locator UI and the test-drive booking form use denser layout patterns that this marketing-focused spec does not document. Polestar Unica weight-axis values beyond the single 400 cut observed across every size are not documented — the brand may use Light or Bold in print but the web surface is monoweight. Animation timings (model card hover, video reveal) are out of scope. Hover, focus, and disabled states for the link-style CTAs are inferred from the default link treatment.

Polestar Design System

Polestar's Swedish minimalist EV system as a DESIGN.md file.

About Polestar DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source polestar.com

Automotive

Polestar's site reads as a Stockholm gallery rather than an automotive marketing page. The hero band is a pale studio-gray stage (a near-#efefef wash) holding one car in three-quarter view — no driver, no road, no motion. The model name sits above the photograph at 30px in Polestar Unica weight 400 with -1.2px letter-spacing, and two stacked link CTAs ("Learn more →", "Contact →") read as plain anchored text rather than filled buttons. Below the hero, a 2×2 grid of product cards repeats the same studio treatment on white surfaces, and the page closes with a dark anthracite footer that inverts ink from black to white. The chrome refuses to compete with the cars.

This DESIGN.md captures the full Polestar system in machine-readable form: 19 color tokens spanning a single ink + canvas pair plus structural grays and the dark-footer inversion, 10 typography tokens all running Polestar Unica at weight 400 (the family has no other weight in production use), 9 spacing tokens on a 4px base, a two-step radius scale (0px and 50%), and 19 component definitions covering the hero stage, product card, link-CTA, top nav, footer, and the persistent legal-strip. The file follows the Google Labs DESIGN.md specification so AI coding tools can parse the tokens directly.

Feed it to Claude, Cursor, or GitHub Copilot and the agent reproduces Polestar's restraint — single-weight type, hard-edged rectangles, link-style CTAs, studio-still photography on gray — rather than a generic EV theme. You can also paste the tokens directly into Tailwind config or CSS variables. The system is worth studying because it commits harder than almost any other car brand to the idea that the typeface, not the color, is the brand voice — confidence by typographic monoculture rather than chromatic noise.

What makes it distinct

Single-weight typographyPolestar Unica runs only at weight 400 across every size from 12px legal to 110px hero numerals
Tracked-tight negative letterspacingdisplay sits at -1.2px and the hero numeral at -4.95px, so cap-heights nearly touch
Studio-still photographyevery car sits centered on the same pale-gray no-horizon backdrop, no tracks, no drivers, no motion
Binary radius0px on every rectangular surface, 50% on exactly one element (the video play circle); nothing in between
Pale-gray stage canvasthe hero band uses a soft #efefef studio backdrop rather than the white that paginates the rest of the site

Live at polestar.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

polestar.com

Explore Polestar

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Polestar design system FAQ

Common questions about Polestar's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Polestar — official site

The Swedish electric-performance brand's global marketing site.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Polestar in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→