What is Subaru's primary brand color?

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.

What typeface does Subaru use, and what should I use as a substitute?

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.

Why does Subaru's hero use a dark-navy band instead of pure white?

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.

What is the primary content surface on Subaru's marketing site?

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.

Can I use this DESIGN.md to build my own automotive marketing site?

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.

Subaru Design System

Subaru's marketing-site design system as a DESIGN.md file.

About Subaru DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source subaru.com

Automotive

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.

What makes it distinct

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 Neue55Roman 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 surface10 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 roundingevery card sits at 3px, every button at 5px, the model-photography hero is at 50% on the slider dots; no soft middle radius

Live at subaru.com

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

subaru.com

Explore Subaru

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Subaru design system FAQ

Common questions about Subaru'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.

Subaru — official site

Subaru's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.