---
version: alpha
name: "polestar.com"
description: "Design system extracted from https://www.polestar.com/us/ on 2026-10-28"
colors:
  background: "#ffffff"
  surface: "#f0f0f0"
  surface-2: "#b3b3b3"
  foreground: "#000000"
  muted-foreground: "#666666"
  primary: "#3a3c3f"
  on-primary: "#ffffff"
typography:
  headline-display:
    fontFamily: "Polestar Unica"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: "32px"
    letterSpacing: "-1.2px"
  headline-lg:
    fontFamily: "Polestar Unica"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: "32px"
    letterSpacing: "-1.2px"
  headline-md:
    fontFamily: "Polestar Unica"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: "32px"
    letterSpacing: "-1.2px"
  body-md:
    fontFamily: "Polestar Unica"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "14px"
    letterSpacing: "-0.1px"
  label-md:
    fontFamily: "Polestar Unica"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.4"
  button:
    fontFamily: "Polestar Unica"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "14px"
    letterSpacing: "-0.1px"
rounded:
  none: "0px"
  full: "9999px"
spacing:
  unit: "5px"
  1: "5px"
  2: "10px"
  3: "15px"
  4: "25px"
  5: "30px"
  6: "65px"
  7: "80px"
  8: "110px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "48px"
    padding: "0px 0px"
  card:
    backgroundColor: "transparent"
    rounded: "0px"
    padding: "0px"
---

# polestar.com

## Overview

Polestar – Electric cars | Polestar US: We are an electric performance car brand, determined to improve the society we live in. We innovate to drive progress and create a better future.

Pill-shaped controls, layered shadows for depth, restrained display type at 30px / 400, a single neutral accent on neutrals. The site ships in light mode by default. Measured from 1119 rendered elements at 1440px wide on 2026-10-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/brand-icon-1.png`: representative interface icon
- `screenshots/brand-icon-2.png`: representative interface icon
- `screenshots/brand-icon-3.png`: representative interface icon
- `screenshots/brand-icon-4.png`: representative interface icon
- `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture
- `screenshots/brand-favicon-source.png`: Favicon source
- `screenshots/brand-favicon.png`: Favicon at 32px on light/dark surfaces
- `screenshots/region-r1-context.jpg`: r1 context: page context
- `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail
- `screenshots/region-r2-context.jpg`: r2 context: page context
- `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail
- `screenshots/region-r3-context.jpg`: r3 context: page context
- `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail
- `screenshots/region-r3-icons.png`: r3 icons: icon placement and nearby text
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page
- `screenshots/phone-390-menu.png`: Phone 390, navigation menu open
- `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-2-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png
- `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png
- `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp
- `screenshots/media-favicon-source-upscaled.png`: Favicon source / upscaled.png
- `screenshots/media-favicon-source-optimized.webp`: Favicon source / optimized.webp
- `screenshots/media-favicon-source-favicon-16.png`: Favicon source / favicon-16.png
- `screenshots/media-favicon-source-favicon-32.png`: Favicon source / favicon-32.png
- `screenshots/media-favicon-source-favicon-48.png`: Favicon source / favicon-48.png
- `screenshots/media-favicon-source-favicon-180.png`: Favicon source / favicon-180.png
- `screenshots/media-favicon-source-favicon-192.png`: Favicon source / favicon-192.png
- `screenshots/media-favicon-source-favicon.ico`: Favicon source / favicon.ico
- `screenshots/c-button-1--rest.png`: Button 1 ("Do Not Sell My Personal "), rest
- `screenshots/c-button-1--focus.png`: Button 1 ("Do Not Sell My Personal "), focus
- `screenshots/c-button-1--active.png`: Button 1 ("Do Not Sell My Personal "), active
- `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest
- `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus
- `screenshots/c-icon-button-1--disabled.png`: Icon button 1, disabled
- `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Polestar"), rest
- `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Polestar"), focus
- `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1, rest
- `screenshots/c-footer-link-1--rest.png`: Footer link 1 ("Home"), rest
- `screenshots/c-footer-link-1--hover.png`: Footer link 1 ("Home"), hover
- `screenshots/c-button-2--rest.png`: Button 2 ("United States"), rest
- `screenshots/c-button-2--focus.png`: Button 2 ("United States"), focus
- `screenshots/c-button-2--active.png`: Button 2 ("United States"), active
- `screenshots/c-button-2--disabled.png`: Button 2 ("United States"), disabled
- `screenshots/c-overlay-drawer-1--open.jpg`: Drawer / sheet / off-canvas 1 opened by button "United States"
- `screenshots/c-link-2--rest.png`: Text link 2 ("Shop available cars"), rest
- `screenshots/c-link-2--focus.png`: Text link 2 ("Shop available cars"), focus
- `screenshots/c-link-2--active.png`: Text link 2 ("Shop available cars"), active
- `screenshots/c-nav-link-2--rest.png`: Navigation link 2 ("Ownership"), rest
- `screenshots/c-nav-link-2--focus.png`: Navigation link 2 ("Ownership"), focus
- `screenshots/c-menu-button-2--rest.png`: Menu / dropdown trigger 2, rest
- `screenshots/c-menu-button-2--hover.png`: Menu / dropdown trigger 2, hover
- `screenshots/c-overlay-dropdown-menu-2--open.png`: Dropdown menu 2 opened by menu-button
- `screenshots/c-link-3--rest.png`: Text link 3 ("Get up to $25,000 off a "), rest
- `screenshots/c-link-3--focus.png`: Text link 3 ("Get up to $25,000 off a "), focus
- `screenshots/c-link-3--active.png`: Text link 3 ("Get up to $25,000 off a "), active
- `screenshots/c-image-3--rest.png`: Image / figure 3, rest

## Logo and icon references

Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional.

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#f0f0f0` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#b3b3b3` | Secondary surface |
| foreground | `#000000` | Primary text |
| muted-foreground | `#666666` | Secondary text, captions |
| primary | `#3a3c3f` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. |
| on-primary | `#ffffff` | Text on the accent |

Full painted palette by area (largest first): `#ffffff`, `#f0f0f0`, `#000000`, `#3a3c3f`, `#b3b3b3`, `#666666`.

The accent `#3a3c3f` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Polestar Unica** for h1, h2, h3, body, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in.

See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Polestar Unica | 30px | 400 | 32px | -1.2px |
| headline-lg | Polestar Unica | 30px | 400 | 32px | -1.2px |
| headline-md | Polestar Unica | 30px | 400 | 32px | -1.2px |
| body-md | Polestar Unica | 12px | 400 | 14px | -0.1px |
| label-md | Polestar Unica | 13px | 400 | 1.4 | normal |
| button | Polestar Unica | 12px | 400 | 14px | -0.1px |
- label-md: fallback (source label); inferred fields: fontSize, fontFamily, fontWeight, lineHeight.

Type scale in use: 12px, 16px, 30px. Base body size 12px.

The hero heading (h1) renders at 30px / 400, start aligned, up to 384px wide, tracking -1.2px. Sample: "Polestar 4".

See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages.

## Layout

- Spacing unit: 5px. Scale in use: 5, 10, 15, 25, 30, 65, 80, 110 (px).
- Flex and grid gaps: 5, 10, 15, 25, 30 px.
- Content max width: 1216px, centred.
- Breakpoints: 425px, 768px, 959px, 960px, 1248px.
- Header: 22px tall, relative, background `rgba(0, 0, 0, 0)`; 1 nav links at 16px / 400 (Polestar).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgb(255, 255, 255) 0px 0px 0px 1px inset`
- shadow-2: `rgba(0, 0, 0, 0.3) 1px 0px 0px 0px`
- shadow-3: `rgb(0, 0, 0) 0px 0px 0px 1px inset`

## Shapes

- Buttons: 9999px
- Inputs: 9999px
- Cards and panels: 0px
- Images and media: 0px
- Radius scale: none 0px, full 9999px

## Components

### Button, primary

Background `#3a3c3f`, text `#ffffff`, border none, radius 9999px, height 48px, padding 0px 0px, 16px / 400.

### Card

Background `transparent`, border none, radius 0px, padding 0px, shadow `rgba(0, 0, 0, 0.3) 1px 0px 0px 0px`. Typical size about 720×515px.

### Link

Colour `#000000`, no underline at rest, weight 400.

### Full inventory

`COMPONENTS.md` carries every component kind found on the page (15 of 87 in the checklist, 22 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 17 state changes, 2 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary:

| Component | Variants | States measured | Sample |
| --- | --- | --- | --- |
| Button | ghost, ghost-with-icon | focus, active, disabled, open | "Do Not Sell My Personal Inform" |
| Icon button | ghost | focus, disabled |  |
| Text link | plain, plain, plain, plain | focus, active | "Discover" |
| Navigation link | underlined, plain | focus | "Polestar" |
| Menu / dropdown trigger | ghost, secondary | hover, open |  |
| Footer | default | rest only | "Stay up to date on all the lat" |
| Footer link | plain | hover | "Home" |
| Styled list | default | rest only | "Polestar will provide $25,000 " |
| Image / figure | aspect-2.89, aspect-2.89, aspect-2.33 | rest only |  |
| Video / media embed | default | rest only |  |

Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Header / navbar, Breadcrumb, Tabs, Pagination, Stepper / progress steps, Sidebar navigation, Skip link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dialog / modal, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Badge / pill / tag, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Card, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Content container, Sticky bar.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1216px | 112px | 16px | 30px, 1 line, start | 22px, 1 links | media behind/overlapping text | 5→2 col; 5→2 col; 5→2 col | content-width |
| laptop 1024px | 896px | 64px | 16px | 30px, 1 line, start | 22px, 1 links | media behind/overlapping text | 5→2 col; 5→5 col; 5→2 col | content-width |
| tablet 768px | 672px | 48px | 16px | 30px, 1 line, start | 64px, hamburger (Open the menu) | media behind/overlapping text | 2→1 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 343px | 23px | 16px | 30px, 1 line, start | 56px, hamburger (Open the menu) | media behind/overlapping text | 2→1 col; 2→1 col; 2→1 col | 12 full-width |

- H1 goes 30px → 30px (100%), 1 → 1 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 22px → 56px.
- Card grids: 2 columns → 1 column on phones (gap 0px 32px → 24px).
- Body text is 16px at the sampled desktop and phone widths.
- Phone side gutter 23px.
- 12 buttons stretch full-width on phones.

## Interaction & Motion

330 elements carry transitions; typical 0.2s with ease, mostly on color, opacity, width. 1 running keyframe animations (onetrust-fade-in 0.4s 1).

- Hover on button-primary: no visible change; cursor pointer; transition background-color, color, border-color, box-shadow, opacity | 0.2s, 0.2s, 0.2s, 0.2s, 0.2s | ease, ease, ease, ease, ease | delay 0s, 0s, 0s, 0s, 0s.
- Hover on nav-link ("Polestar"): no visible change; cursor pointer; transition color, opacity | 0.2s, 0.15s | cubic-bezier(0, 0, 1, 1), cubic-bezier(0.65, 0, 0, 1) | delay 0s, 0s.
- Hover on body-link ("Get up to $25,000 off a new Polestar 4 c"): no visible change; cursor pointer.
- Focus on button-primary: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Focus on body-link: no visible focus style measured (may rely on :focus-visible with keyboard only).
- Tooltip triggers exist (19 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- 4 aria-haspopup triggers exist; none opened on hover (click-to-open menus).
- 21 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Treat the 5px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale.
- Use `#3a3c3f` where supported by measured component or regional evidence; its accent role is inferred.
- Do keep body text at 12px in Polestar Unica.
- Do match corner radii per element class (buttons 9999px, cards 0px); do not pick one radius for everything.
- Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows.
- Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: Page background comes from body; large surface colors remain in the palette.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.