---
version: alpha
name: "Subaru"
website: "https://www.subaru.com"
description: >-
  A Japanese automaker whose marketing site does something almost no other dealer-funnel automotive brand attempts — the hero is a dark-navy band carrying the Crosstrek model photography over a 65px Helvetica Neue Bold headline in graphite-charcoal, with a single Pleiades-blue pill CTA at #1971d4 driving the entire model-grid funnel below. The system runs HelveticaNeueLTW05 in three weighted cuts (55Roman / 65Medium / 75Bold), 3-5px small-step rounding on every card and button, and a quiet B7BCC2 hairline against pure white below the fold. Where Toyota and Honda lean on chromatic category chips and Mazda commits to all-uppercase typography, Subaru holds a single blue voltage and lets the model photography carry every chromatic moment.

seo:
  title: "Subaru Design System for React — Pleiades blue #1971d4, Helvetica Neue, 17 components"
  metaDescription: "Subaru's marketing-site design system as a DESIGN.md file. Pleiades blue #1971d4 single voltage, Helvetica Neue three-weight family, dark-navy hero band over Crosstrek photography. For React, Next.js, and AI tools."
  highlights:
    - "Single Pleiades-blue voltage — #1971d4 carries every primary CTA, every link, every active-tab fill (508 occurrences); no second accent in the system"
    - "Three-weight Helvetica Neue — 55Roman for body, 65Medium for nav and link text, 75Bold for display; one family does every typographic job"
    - "Dark-navy hero band — #1d252c carries the above-fold model-photography band; below the fold the system inverts to pure white with hairline B7BCC2 dividers"
    - "Model-card grid as primary surface — 10 vehicle tiles in a 4-column grid, each carrying model name in Bold 25px and a single Pleiades-blue Explore link"
    - "3-5px small-step rounding — every card sits at 3px, every button at 5px, the model-photography hero is at 50% on the slider dots; no soft middle radius"
  tags:
    - "Automotive"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Subaru's marketing site does something almost no other dealer-funnel automotive brand attempts. The hero is a wide dark-navy band — captured ink at graphite-charcoal — carrying a 65px Helvetica Neue Bold display ("Built to Last" is the canonical instance, "1.9% APR Financing" on the Crosstrek capture) with the model photography rendered to the right and a single Pleiades-blue pill CTA beneath. The blue is the brand's signature voltage, drawn from the Pleiades star cluster the Subaru logo represents; it appears 508 times in the captured page as the single chromatic moment across CTAs, hyperlinks, active-tab indicators, and the model-grid Explore links. Where Toyota's marketing surface paints chromatic category chips and Honda runs a saturated red voltage at every CTA, Subaru holds a single Pleiades blue in reserve and lets the model photography do every other chromatic job.
    
    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 10 color tokens drawn from a dark-navy hero band, the Pleiades blue voltage, a graphite-charcoal ink, and a B7BCC2 hairline neutral; 12 typography tokens running HelveticaNeueLTW05 across three weighted cuts — 55Roman for body, 65Medium for nav and metadata, 75Bold for hero display and model names; 6 radius tokens centered on 3-5px small-step rounding (no soft middle radius); 8 spacing values on a 4px base with a 50px section-padding rhythm; and 17 component definitions covering the Pleiades-blue primary button, the dark-navy hero band, the white model-card grid, the vehicle-class tab strip, and the offer-tile dark surface used for "1.9% APR" promotional cards.
    
    Feed this file to Claude or Cursor and it will reproduce Subaru's specific moves: dark-navy above-fold band, single Pleiades-blue voltage, three-weight Helvetica Neue typography, 3-5px small-step rounding, and a model-card grid as the primary information surface. The token references resolve cleanly without invention. The one move worth borrowing only if your category needs a model-portrait grid is the trust in vehicle photography to carry chromatic interest — the chrome itself ships exactly one accent color, and any second voltage would dilute the Pleiades discipline.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.subaru.com"
      title: "Subaru — official site"
      description: "Subaru's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Subaru's primary brand color?"
      answer: "Subaru's brand voltage is Pleiades blue #1971d4, named after the Pleiades star cluster represented in the Subaru logo. It appears 508 times in the captured marketing page — 265 as text (every hyperlink, every Explore label under model tiles), 238 as border (every active-tab underline, every focus ring), 4 as background fill (the primary CTA pill, the active vehicle-class tab), and 1 as a gradient stop. There is no second chromatic accent in the system; the chrome ships exactly one blue, held strictly in reserve for actions and links."
    - id: "typography"
      title: "What typeface does Subaru use, and what should I use as a substitute?"
      answer: "Subaru runs HelveticaNeueLTW05 across three weighted cuts: 55Roman for body and footnote copy at 14-17px, 65Medium for navigation links and metadata at 12-21px, and 75Bold for hero display and model names at 14-65px. The fallback stack walks to Helvetica Neue, -apple-system, Open Sans, Arial, and sans-serif. Display lives at 65px / Bold for the hero h1 ('Built to Last') with -0.5px tracking — a tight grotesk treatment that signals industrial confidence. The closest open-source substitute is Inter at the same weights, or the system Helvetica Neue fallback the page already declares."
    - id: "navy-canvas"
      title: "Why does Subaru's hero use a dark-navy band instead of pure white?"
      answer: "The hero band uses graphite-charcoal #1d252c — slightly blue-shifted near-black — as the canvas for the model-photography frame and the promotional offer copy. Below the fold the system inverts to pure white #ffffff with the same Pleiades-blue voltage carrying CTAs and links. The decision is automotive convention: dark hero bands let dealer-portrait photography stand out without competing chromatic backgrounds, while the white below-fold surface keeps the model-tile grid legible. The 558 occurrences of #1d252c are evenly split between text (271) and border (273), suggesting the navy carries both display copy and the model-card outline strokes."
    - id: "model-grid"
      title: "What is the primary content surface on Subaru's marketing site?"
      answer: "The above-the-fold hero band is followed immediately by a 4-column vehicle grid showing 10 model tiles (Crosstrek, Forester, Outback, Uncharted, Solterra, Trailseeker, Ascent, Impreza, BRZ, WRX) plus a vehicle-class tab strip (All Vehicles / Hybrid / Electric / Gas / Wilderness). Each tile carries the vehicle photograph at 16:9, the model name in Bold 25px, a 'Starting value at $XX,XXX' sub-line in Medium 14px, and a Pleiades-blue 'Explore' link. The grid is the brand's primary navigation device — the model is the destination, not a category page."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own automotive marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Subaru's specific moves: dark-navy hero band over model photography, single Pleiades-blue voltage reserved for actions and links, three-weight Helvetica Neue typography, 3-5px small-step rounding, and a model-card grid as the primary surface. The tokens resolve cleanly. Every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The single move worth borrowing only if you have a model-portrait library is the willingness to let vehicle photography carry chromatic interest — the chrome itself ships exactly one accent color."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#1971d4"
  primary-light: "#3a8eee"
  ink: "#1d252c"
  ink-muted: "#5c6163"
  ink-deep: "#000000"
  canvas: "#ffffff"
  surface-1: "#f7f8f9"
  hairline: "#b7bcc2"
  hairline-soft: "#e7e7e8"
  hairline-dim: "#dbdbdb"
  accent-purple: "#483d8b"

typography:
  display-xl:
    fontFamily: "HelveticaNeueLTW05-75Bold, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 65px
    fontWeight: 400
    lineHeight: 70px
    letterSpacing: "-0.5px"
  display-lg:
    fontFamily: "HelveticaNeueLTW05-75Bold, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 37.5px
    letterSpacing: 0
  display-md:
    fontFamily: "HelveticaNeueLTW05-75Bold, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 46px
    letterSpacing: 0
  display-sm:
    fontFamily: "HelveticaNeueLTW05-75Bold, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 38px
    letterSpacing: "-0.5px"
  heading-lg:
    fontFamily: "HelveticaNeueLTW05-75Bold, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 31px
    letterSpacing: 0
  heading-md:
    fontFamily: "HelveticaNeueLTW05-75Bold, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 17px
    letterSpacing: 0
  body-lg:
    fontFamily: "HelveticaNeueLTW05-55Roman, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0
  body-md:
    fontFamily: "HelveticaNeueLTW05-55Roman, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "HelveticaNeueLTW05-65Medium, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 17px
    letterSpacing: 0
  button-md:
    fontFamily: "HelveticaNeueLTW05-65Medium, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 17px
    letterSpacing: 0
  nav-link:
    fontFamily: "HelveticaNeueLTW05-65Medium, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0
  label-emphasis:
    fontFamily: "HelveticaNeueLTW05-75Bold, \"Helvetica Neue\", -apple-system, \"Open Sans\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "3px"
  sm: "5px"
  full: "9999px"

spacing:
  xs: "2px"
  sm: "4px"
  md: "12px"
  base: "15px"
  lg: "16px"
  xl: "25px"
  2xl: "50px"
  3xl: "100px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "10px"
    height: "40px"
    borderColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "10px"
    height: "40px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 25px"
    height: "64px"
    borderColor: "{colors.hairline-soft}"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "0px 14px"
  hero-band:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "50px 25px"
  hero-heading:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
  hero-eyebrow:
    backgroundColor: transparent
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
  section-heading:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-sm}"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  link-blue:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
  vehicle-class-tab:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 0px"
  vehicle-class-tab-active:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.label-emphasis}"
    rounded: "{rounded.none}"
    padding: "12px 0px"
    borderColor: "{colors.primary}"
  model-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
    rounded: "{rounded.xs}"
    padding: "15px 15px 20px"
    borderColor: "{colors.hairline-soft}"
  model-card-meta:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  offer-tile-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    rounded: "{rounded.xs}"
    padding: "25px"
  slider-dot:
    backgroundColor: "{colors.ink-muted}"
    rounded: "{rounded.full}"
    height: "8px"
  footer:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
    padding: "50px 25px"
---

## Overview

Subaru's marketing site stages a different opener than its peers. **Pleiades scarcity.** Where Toyota lines its landing page with chromatic category chips and Honda runs a saturated red voltage on every CTA, Subaru holds a single Pleiades blue (`{colors.primary}` — #1971d4) in reserve and lets the model photography do every other chromatic job. The blue is named after the Pleiades star cluster the Subaru logo represents; in the captured page it appears 508 times — every hyperlink, every Explore link under a model tile, every active-tab underline, the primary CTA pill, and the focus rings on form fields. There is no second accent. The chrome ships exactly one chromatic moment.

The above-fold band inverts the page's lightness baseline. **Dark hero, white grid.** The top 600px renders on a graphite-charcoal canvas (`{colors.ink}` — #1d252c, captured 558 times) carrying the model-photography frame and the promotional offer ("1.9% APR Financing" on the Crosstrek capture, "Built to Last" on others). Below the fold the system inverts to pure white (`{colors.canvas}` — #ffffff) with hairline `{colors.hairline}` (#b7bcc2) dividers, the model-card grid renders as 10 tiles in a 4-column layout, and the Pleiades-blue voltage shifts from CTA fill to Explore-link tint. The dark-to-light transition is the page's primary structural device — it tells the visitor that the model showroom has begun.

Helvetica Neue runs three weighted cuts. **One family, three voices.** HelveticaNeueLTW05-55Roman handles body and footnote copy at 14-17px; 65Medium handles nav, metadata, and button labels at 12-14px; 75Bold handles hero display (65px on the hero h1, 50px on the secondary tile, 25px on the model-card name). The 75Bold cut is the loudest typographic moment in the system — confidence by industrial grotesk weight, not by tracking. Display tracking sits at -0.5px on the hero (tight), 0 everywhere else (neutral). The three-weight discipline is the brand's typographic signature: one industrial family doing every typographic job.

**Key Characteristics:**
- Single Pleiades-blue voltage (`{colors.primary}` — #1971d4, frequency 508) reserved for primary CTAs, all hyperlinks, active-tab underlines, and the Explore link under every model tile.
- Dark-navy hero band (`{colors.ink}` — #1d252c, frequency 558) carries the above-fold model-photography frame and the promotional offer; the page inverts to pure `{colors.canvas}` (#ffffff) below the fold.
- HelveticaNeueLTW05 in three weighted cuts — 55Roman, 65Medium, 75Bold. No additional weights, no alternate families.
- Hero display sits at 65px / 75Bold with -0.5px tracking — the industrial-grotesk treatment.
- Model-card grid is the page's primary content surface: 10 vehicle tiles in a 4-column layout, each carrying photo + Bold 25px model name + Medium 14px price meta + Pleiades-blue Explore link.
- Vehicle-class tab strip (All Vehicles / Hybrid / Electric / Gas / Wilderness) uses a Pleiades-blue underline to mark active; inactive tabs sit in graphite ink without any background fill.
- Small-step rounding: 3px on cards, 5px on buttons, 50% on slider dots. No soft middle radius between 5 and 50%.
- Offer-tile dark surfaces (`{component.offer-tile-dark}`) below the model grid use the same graphite-charcoal as the hero band, creating visual rhyme between the promotional bands and the hero.

## Colors

### Brand

- **Pleiades Blue** (`{colors.primary}` — #1971d4): frequency 508. Used as text (265), background (4), border (238), gradient (1). The single brand voltage — every hyperlink, every Explore link under model tiles, every active-tab underline, the primary CTA pill, the focus ring on form fields. Held strictly in reserve for actions and links; never appears as a body-text tint or a section-background fill.
- **Pleiades Light** (`{colors.primary-light}` — #3a8eee): frequency 10. Used as text (5), border (5). The hover variant — slightly lighter and brighter blue used on link-hover and active-tab-hover states. Reserved for interactive feedback only.

### Ink

- **Graphite Ink** (`{colors.ink}` — #1d252c): frequency 558. Used as text (271), background (14), border (273). The dark canvas of the hero band and the dark-surface offer tiles; also the primary text color on the white below-fold surface. The same token serves both the dark-canvas-background role and the dark-text-on-white role — a deliberate convergence that keeps the palette compact.
- **Ink Muted** (`{colors.ink-muted}` — #5c6163): frequency 1021. Used as text (513), border (508). The dominant text token across the captured page — body paragraphs, model-card price meta, footer category labels, footnote disclaimers. The 0.49 oklch lightness sits halfway between black and the canvas, giving the body copy a quiet grey rather than a hard ink.
- **Ink Deep** (`{colors.ink-deep}` — #000000): frequency 2. Pure black is essentially absent — only two captured occurrences in incidental UI fragments.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 536. Used as text (220), background (94), border (218), gradient (4). The page floor below the hero, the model-card fill, the modal surface. Pure white reading the inversion against the dark hero band.
- **Surface-1** (`{colors.surface-1}` — #f7f8f9, clustered with #ffffff): the off-white promotional-section background — slightly cooler than canvas, used as the "Special Offers" band fill that sits between the model grid and the footer.

### Hairline

- **Hairline** (`{colors.hairline}` — #b7bcc2): frequency 204. Used as text (102), border (102). The default neutral divider between model-card sections and inside the vehicle-class tab strip. A quiet warm-gray that reads softly against both the white canvas and the dark hero.
- **Hairline Soft** (`{colors.hairline-soft}` — #e7e7e8): frequency 2. The lightest neutral, used inside subtle dividers below the top-nav band and between footer category rails.
- **Hairline Dim** (`{colors.hairline-dim}` — #dbdbdb): frequency 1. A single border occurrence inside the form-field rest state.

### Accent (incidental)

- **Accent Purple** (`{colors.accent-purple}` — #483d8b): frequency 1, background only. Layer classified as `brand` by the extractor but appears just once as an accidental background fragment — not a deliberate brand voltage. Don't treat as a token to deploy.

## Typography

### Font Family

The system runs **HelveticaNeueLTW05** in three weighted cuts as the sole brand family. Fallbacks walk `"Helvetica Neue", -apple-system, "Open Sans", Arial, sans-serif`. There is no separate display serif, no monospace, no second sans. The three cuts are:

- **55Roman** — body and footnote copy at 14-17px.
- **65Medium** — navigation, metadata, button labels, and small caps at 12-14px.
- **75Bold** — hero display, section h2, and model-card names at 14-65px.

Subaru's commitment to one industrial-grotesk family across every tier — without a second voice for display or annotation — is the system's typographic signature. Where Mazda introduces an uppercase-tracked treatment and Toyota carries multiple weight steps, Subaru holds the line at three cuts and lets size and weight do every hierarchical job.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 65px | 75Bold | 70px | -0.5px | Hero h1 ("Built to Last", "Crosstrek") |
| `{typography.display-lg}` | 50px | 75Bold | 37.5px | 0 | Promotional display ("1.9%" APR figure on Crosstrek hero) |
| `{typography.display-md}` | 40px | 75Bold | 46px | 0 | Offer-tile dark surface display ("36 MONTHS", "72 MONTHS") |
| `{typography.display-sm}` | 32px | 75Bold | 38px | -0.5px | Section h2 below the fold |
| `{typography.heading-lg}` | 25px | 75Bold | 31px | 0 | Model-card name ("Crosstrek", "Forester", "Outback") |
| `{typography.heading-md}` | 21px | 75Bold | 17px | 0 | Sub-section emphasis title |
| `{typography.body-lg}` | 17px | 55Roman | 27px | 0 | Lead paragraph, hero sub-copy |
| `{typography.body-md}` | 14px | 55Roman | 24px | 0 | Default running text, footnote disclaimers |
| `{typography.body-sm}` | 12px | 65Medium | 17px | 0 | Metadata, footer labels, hero eyebrow ("APR FINANCING") |
| `{typography.button-md}` | 14px | 65Medium | 17px | 0 | Primary CTA label ("View Crosstrek Hybrid Offers") |
| `{typography.nav-link}` | 14px | 65Medium | 27px | 0 | Top-nav category links ("Vehicles", "Build & Price") |
| `{typography.label-emphasis}` | 14px | 75Bold | 21px | 0 | Active vehicle-class tab ("All Vehicles" in active state) |

### Principles

Display weight sits at 75Bold across every tier from 25px to 65px. There is no weight ladder — the system uses only three cuts (Roman, Medium, Bold), with Bold doing every display job and the lighter cuts handling body and navigation. Letter-spacing stays at 0 across almost every tier; the only departures are the hero (-0.5px tight) and the 32px section h2 (-0.5px tight). The result is a typographic system that reads as industrial-utility — confidence by weight and structure, not by tracking or family variation.

The display sizes follow a 5px ladder: 65 / 50 / 40 / 32 / 25 / 21. The 65px hero is unusually large for an automotive marketing site — larger than Toyota (typically 48-52px) and BMW (typically 56px). The choice signals dealer-funnel confidence: the hero copy is meant to read as an offer announcement, not a brand-name plate.

### Note on Font Substitutes

HelveticaNeueLTW05 is the licensed Linotype Helvetica Neue. The fallback stack already walks to the system Helvetica Neue, so the page degrades gracefully on macOS / iOS. For full open-source substitution use **Inter** at weights 400, 500, and 700 — the proportions transfer cleanly and Inter's cap height reads close to Helvetica Neue at the 25-65px display sizes.

## Layout

### Spacing System

- **Base unit:** 4px (with 12px and 15px as the dominant modules).
- **Tokens:** `{spacing.xs}` 2px · `{spacing.sm}` 4px · `{spacing.md}` 12px · `{spacing.base}` 15px · `{spacing.lg}` 16px · `{spacing.xl}` 25px · `{spacing.2xl}` 50px · `{spacing.3xl}` 100px.
- **Section padding (vertical):** ~50px on the hero band, ~50px on the offer-tile band; the model grid runs tighter at 25-32px between rows.
- **Card internal padding:** `{spacing.base}` (15px) on `{component.model-card}` with a 20px bottom step for the Explore link; `{spacing.xl}` (25px) on `{component.offer-tile-dark}`.
- **Top-nav padding:** `{spacing.md}` (12px) vertical, `{spacing.xl}` (25px) horizontal.

### Grid & Container

- **Max content width:** ~1290px on the model grid and the offer-tile band; the hero band extends to the viewport edge.
- **Hero band:** full-bleed graphite-charcoal canvas with model photography rendered to the right and offer copy (display + CTA) to the left.
- **Model-card grid:** 4-column desktop grid containing 10 tiles (Crosstrek, Forester, Outback, Uncharted / Solterra, Trailseeker, Ascent, Impreza / BRZ, WRX in the lower row). Each tile is roughly 280-300px wide.
- **Vehicle-class tab strip:** horizontal rail above the grid carrying All Vehicles / Hybrid / Electric / Gas / Wilderness tabs separated by 25-32px gaps.
- **Offer-tile band:** 2-column grid pairing dark `{component.offer-tile-dark}` surfaces with a light promotional photograph tile to the right.

### Rhythm

The page alternates between **dark editorial** and **white grid**. The hero band is dark, the model grid is white, the offer-tile band is dark again, the footer is the off-white `{colors.surface-1}`. The dark-to-light-to-dark rhythm is the page's primary structural device — every band-change is a content-context shift, not a visual flourish. There is no atmospheric gradient between bands.

## Elevation

The system has essentially **no shadow tier**. The captured page records zero shadow occurrences. Depth comes from:

- **Surface-color inversion:** the graphite-charcoal hero band against the white model grid creates the primary depth illusion. The 0.74 oklch lightness gap reads as a strong figure-ground separation without any shadow being drawn.
- **Hairline borders:** `{colors.hairline}` (#b7bcc2) on model-card outlines and tab-strip dividers; `{colors.hairline-soft}` (#e7e7e8) on subtle nav-band rules.
- **Photography depth:** the model photographs themselves carry real-world depth — angled three-quarter views with ground reflections, soft natural lighting, foreshortened wheels.

No drop-shadow is rendered anywhere on the captured page, including under modals and the dropdown menus.

## Shapes

The radius scale is **small-step plus circle**, with nothing in between.

- `{rounded.none}` 0px — the hero band, the offer-tile dark surfaces edge to edge, the vehicle-class tab strip dividers, every photograph edge.
- `{rounded.xs}` 3px — frequency 45 + 1 occurrences. The model-card edges, the offer-tile-dark fills, and the vehicle-class tab background hover state. The default rounding tier.
- `{rounded.sm}` 5px — frequency 27 + 4 occurrences. The primary CTA pill, secondary buttons, form fields.
- `{rounded.full}` 9999px — frequency 13 + 8 occurrences. Slider-dot indicators below the hero band (50% on 8px square base), the favorite-heart icon button, the search-magnifier circle.

There is no 8 / 12 / 16px middle tier. Either a card uses 3-5px small-step rounding or it goes to a full circle on an icon-button. The discipline keeps the layout reading as engineering-precise rather than friendly-soft.

## Components

**`button-primary`** — The signature CTA. Pleiades-blue `{colors.primary}` fill, white text, `{rounded.sm}` 5px radius, 10px padding, 40px height, `{typography.button-md}` (HelveticaNeueLTW05-65Medium / 14px). "View Crosstrek Hybrid Offers" is the canonical instance, sitting beneath the offer copy in the hero band.

**`button-secondary`** — White `{colors.canvas}` fill, Pleiades-blue text, 1px `{colors.primary}` border, otherwise identical. Used for tertiary actions ("Find a Retailer", "Compare Models").

**`top-nav`** — White surface, graphite-ink links, 64px height, 1px `{colors.hairline-soft}` bottom rule. Subaru wordmark + logo flush left, primary category links center (Vehicles / Build & Price / Local Inventory / Shopping Tools / Our Commitment / Owners), search and locator flush right.

**`nav-link`** — Graphite-ink text in `{typography.nav-link}` (HelveticaNeueLTW05-65Medium / 14px / 27px line-height). The 14px label with 27px line-height creates the wide click-target band typical of automotive nav rails.

**`hero-band`** — Graphite-charcoal `{colors.ink}` (#1d252c) canvas, full-bleed, 50px vertical padding. Holds the offer eyebrow ("APR FINANCING"), the offer display (65px), the sub-copy line, the primary CTA, and the model photograph rendered to the right.

**`hero-heading`** — White text on the dark canvas, HelveticaNeueLTW05-75Bold 65px / -0.5px tracking. "Built to Last" / "1.9%" sits as the loudest typographic moment in the system.

**`hero-eyebrow`** — White text at `{typography.body-sm}` (12px / 65Medium). The small label above the hero display ("APR FINANCING").

**`section-heading`** — Graphite ink, HelveticaNeueLTW05-75Bold 32px. Used for white-canvas section h2s ("Subaru's full lineup of hybrid, gas and Wilderness vehicles").

**`body-paragraph`** — `{colors.ink-muted}` (#5c6163) text at `{typography.body-md}` — the workhorse paragraph color.

**`link-blue`** — Pleiades-blue text at `{typography.button-md}`. The Explore link under every model tile, the Special Offers link below each offer-tile, every inline hyperlink on the page.

**`vehicle-class-tab`** — Transparent fill, graphite ink, no border. Inactive state of the tab strip.

**`vehicle-class-tab-active`** — Same fill, `{typography.label-emphasis}` (Bold 14px), with a 2px Pleiades-blue bottom border indicating active. The single chromatic tab-marker in the system.

**`model-card`** — White surface, 3px `{rounded.xs}` radius, 15x15x20 padding, 1px `{colors.hairline-soft}` border. Holds the vehicle photograph at 16:9, the model name in `{typography.heading-lg}` (Bold 25px), a price-meta sub-line, and a Pleiades-blue Explore link beneath. The primary information surface on the page.

**`model-card-meta`** — `{colors.ink-muted}` text at `{typography.body-md}` ("Starting value at $25,000"). Sits between the model name and the Explore link.

**`offer-tile-dark`** — Graphite-charcoal fill (same as the hero band), white text, 3px `{rounded.xs}` radius, 25px padding. Holds the model name in small-caps, a giant APR figure ("1.9%" / "0%"), a months indicator ("36 MONTHS" / "72 MONTHS"), and an inline link to the offer detail. Creates visual rhyme with the hero band.

**`slider-dot`** — Ink-muted fill on 8px square base, `{rounded.full}` 50% radius. The hero carousel pagination uses a row of these dots; active dot is Pleiades blue.

**`footer`** — Off-white `{colors.surface-1}` (#f7f8f9) surface, 50x25 padding. Category-rail labels in `{typography.body-md}` (HelveticaNeueLTW05-55Roman / 14px) with `{colors.ink-muted}` text.

## Do's and Don'ts

**Do** hold the Pleiades-blue voltage in strict reserve for actions and links. The single chromatic moment in the system is Pleiades blue `{colors.primary}` (#1971d4); multiplying it into section backgrounds, photographic accents, or body-text emphasis dilutes the only chromatic brand signal on the page.

**Do** use the same `{colors.ink}` (#1d252c) for both the hero canvas and the offer-tile dark surfaces below the model grid. The visual rhyme between the hero band and the offer tiles is the system's primary structural device — using a different dark for offer tiles breaks the band rhythm.

**Do** keep display headlines at 75Bold with neutral or slightly-tight tracking. The hero at 65px / -0.5px tracking is the system's confidence signal; slipping to 65Medium reads as a sub-display and the offer copy loses its weight.

**Do** carry every link in Pleiades blue at `{typography.button-md}`. The Explore link under each model tile is the page's primary navigation device — making the link an underline-only treatment or a black text-link would lose the chromatic affordance.

**Don't** introduce a second accent color beside the Pleiades blue. The system has exactly one chromatic voltage; adding a green or orange for category-classes would create competing chromatic voices and weaken the single-voltage discipline. The vehicle-class tab strip uses the same Pleiades blue underline for active state — not a category-colored bar.

**Don't** use `{colors.ink-muted}` (#5c6163) for primary text or headlines — it is a body-and-disclaimer-only token (frequency 1021, all as text or border). For primary text on white, use `{colors.ink}` (#1d252c).

**Don't** introduce an 8 / 12 / 16px middle radius tier. The system runs binary small-step (3-5px) or full circle. Adding a soft middle radius reads as borrowed from a consumer-SaaS system and breaks the engineering-precise shape language.

**Don't** add tinted shadows under model cards or offer tiles. The captured page renders zero shadows; depth comes entirely from surface-color inversion (dark hero / white grid) and hairline borders. Adding a soft 0.04-alpha shadow under the model cards immediately reads as a different brand.

## Known Gaps

- **Hover and focus states:** the captured page exposes `{colors.primary-light}` (#3a8eee) but no hovered button, link-hover, or focused-input state was visible in the marketing surface. The full state matrix lives inside the configurator and dealer-locator product flows.
- **Form input states:** no rendered text input was captured at the landing-page chrome layer; the input styling lives inside the configurator, the Find a Retailer modal, and the financing-calculator flow.
- **Sub-brand surfaces:** Wilderness, STI Performance, and Solterra EV each carry their own sub-brand typographic and chromatic accents inside the model-detail templates — not represented at the landing-page level.
- **Motion:** the hero carousel auto-rotates and the offer-tile band cross-fades on scroll-into-view; the spec captures end-state values only.
- **Configurator and Build & Price surfaces:** the model-build pipeline carries a much richer component set (color swatches, package toggles, trim chips) not exposed at the marketing chrome layer.
- **Mobile breakpoints:** the spec captures the 1440-viewport rendering. The 4-column model grid collapses to 2-column on tablet and single-column on mobile; the hero band stacks the photograph above the offer copy at narrower widths.