Subaru DESIGN.md

Design System Inspiration of Subaru

Overview

Visual Theme & Atmosphere

Subaru makes automobiles and aerospace products. Its company profile records establishment on 15 July 1953, with origins in 1917. Fuji Heavy Industries adopted the company name SUBARU on 1 April 2017; the announcement describes a commitment to providing value through the brand's enduring promise of 「安心と愉しさ」, peace of mind and enjoyment. Company profile, 2017 name-change announcement.

The current official design page describes “Symbiosis between Human, Tech and Nature”: human-centred vehicles, technology supporting peace of mind and enjoyment, and affinity with nature. It connects reassurance with generous, seamless and solid forms, while expressing enjoyment through the character of each vehicle and its user's life. This is Subaru's automotive design writing; the web measurements below come from the Japanese consumer homepage. SUBARU Design.

The homepage gives that story a photographic setting: a large vehicle/campaign carousel above a white interface, followed by vehicle lineups, safety, campaigns and services. Black paragraph ink, blue action links and outlined pill buttons provide the recurring interface vocabulary. Vehicle cards have square, unboxed link surfaces; rounded corners concentrate on action pills and small header icon buttons. These are observations of the captured homepage, rather than an official web design-system specification.

The measured page is the Japanese homepage at www.subaru.jp/, with HTML lang="ja"; the capture did not redirect to another regional edition. Its visible tasks include browsing the lineup, viewing safety information, and following links for estimates, dealer visits and test drives.

Brand Narrative

The official 2016 history note explains that Subaru is a Japanese star-cluster name, also called 六連星, and connects the vehicle name to the five companies that invested in Fuji Heavy Industries. The subsequent company-name change unified the corporate name with the vehicle brand. History and naming announcement.

Today's design page puts people, technology and nature together and shows concept work, design archives and designers' stories. Its UI/UX interview discusses vehicle meters and centre displays, prioritising visibility and ease of use. This supplies useful context for Subaru's attention to everyday interaction; it does not establish the website's typography, accessibility compliance or animation specifications. Current design page, vehicle UI/UX interview.

Principles

Subaru's first-party automotive design writing connects reassurance with generous, seamless and solid forms, and enjoyment with the individual character of a vehicle and its user's lifestyle. Its vehicle UI/UX designer explicitly prioritises visibility and usability. Those are documented automotive intentions. The measured web recipe is more specific: clear white surfaces, blue state changes, restrained panel elevation and an image-only card enlargement. Design philosophy, UI/UX interview.

Personas

No verified persona research was established from the opened sources.

Colors

The homepage census recorded 49 computed root custom properties and 51 distinct declared names. All 51 names occur in Subaru's first-party common stylesheet. The following values preserve its naming; roles beyond those directly measured are left unspecified.

The survey's consent UI also contributed rgb(19, 113, 195) to the census. That colour and its consent controls are excluded from product tokens. Transparent controls retain their measured alpha value in prose and have no fabricated opaque background token.

Typography

Substitute: none chosen. No family token or font specimen is supplied. An empty document.fonts loaded list does not identify which locally installed font painted the text.

Measured typography remains useful independently of family identification:

• Lineup and safety CTA labels: 18px / 600, line height 27px.
• Header lineup navigation: 18px / 300, line height 27px.
• Forester card wrapper: 16px / 300, line height 24px; its visible SUV category label is 12px / 300. The source CSS declares the model name at 2.4rem; that is declaration evidence, not a separately measured font-size token.
• Estimate link wrapper: 16px / 300, line height 24px; visible label 14px / 300.
• Search icon-button wrapper: 13.3333px / 300, line height normal; this is not visible text typography. Its image box is 24 × 24px.

Root weight variables are --fwNormal: 300, --fwMd: 500 and --fwBold: 600.

Layout

The captured desktop page places a white header over an image-led carousel, a tabbed horizontal vehicle lineup, safety content, campaign imagery, service links, news and a multi-column footer. The capture's initial hero was 1425px wide within a 1440px viewport with a scrollbar; the vehicle cards sit in a horizontal rail.

Layout variables provide explicit dimensions without requiring a guessed grid: --contentMaxW: 1440px, --contentCol12: 1360px, --contentCol10: 1130px, --contentXs2: 1050px, and --contentCol8: 900px. The desktop --headerH variable is 120px. These are token values, not a measurement that every container or header has that exact box size.

The spacing variables are 4, 8, 12, 16, 24, 32, 40, 48, 64, 80 and 166px, named --size4 through --size166 for those exact values. --contentMg is 40px and --blockMg is 80px. Measured control padding ranges from 0 to 6px for the card/icon/CTA examples, with 22px bottom padding on the navigation link and 16px 24px on purchase support.

Responsive Behavior

Only desktop 1440 × 1000 was measured; mobile layout and touch states are unmeasured.

Elevation & Depth

All six control boxes have computed box-shadow: none. The floating purchase-support ancestor panel carries rgba(0, 0, 0, 0.15) 0px 0px 16px 0px on a white background. Keep that shadow on the panel rather than assigning it to each link. Vehicle cards remain flat, with their photograph carrying the visual depth.

Motion & Easing

Each of the six measured controls has the computed transition all 0.3s ease 0s: 300ms with ease, no delay. The state sampler waited 900ms for each sample. The Forester image's settled transform is matrix(1.12, 0, 0, 1.12, 0, 0) on both hover and press. No carousel timing or reduced-motion behavior was established.

Components

These are six measured product controls. The cookie banner and vehicle-recommendation banner were closed before states were collected. All six have a measured hover and pressed change; none has an authored focus token.

The two action links use border-radius: 100vw, computed as 1440px at the measured viewport. That is a pill construction, not a fixed-radius design token. The other measured radii are 0px and 8px.

The search input is absent from the visible survey rows; its unopened panel and input states are unmeasured.

States

Every hover snapshot confirmed :hover; every pressed snapshot confirmed :active. All keyboard landings were focus-visible, and no listed focus change persisted after blur. Each pointer-state comparison covers the control, its descendants, their pseudo-elements and three ancestor levels; full scope and raw differences are in the verification notes. “Same as hover” is limited to that compared scope. Disabled states, input editing, validation, open panels and navigation outcomes were not measured.

Do's and Don'ts

The following are implementation recipes derived from this homepage, not quoted corporate rules.

• Keep ordinary paragraph ink black and distinguish key blue from the separate accent and logo variables.
• Build action links as outlined pills at rest; fill them key blue and turn their labels white on hover and press.
• Keep the vehicle-card box steady while scaling its image to 1.12 on hover and press.
• Preserve the difference between wrapper typography and the smaller visible purchase-support label.
• Do not assign error/success semantics to colour names whose usage was not established.
• Do not publish consent styles or the browser's automatic focus outline as Subaru tokens.

Voice & Tone

The captured interface uses short Japanese task labels: 一覧を見る (view the list), 詳しく見る (view details), セルフ見積り (self estimate), 来店予約 (dealer visit reservation) and 試乗予約 (test-drive reservation). These are observed UI wording, without an inferred brand voice manual.

Agent Prompt Guide

“Create a white automotive browsing surface with black copy and key-blue outlined action links. Make the lineup link 326 × 56px, with 6px padding, a 1px blue border, 18px/600 text and a 100vw pill radius. Hover and press fill it #014e98 and turn the text #ffffff. Typeface identity is unresolved; do not insert a claimed brand font.”

“Create a square-corner vehicle card link on white, 296.5 × 234.4px in this desktop context. Use black category/model text and a car image. On hover and press, transform only the image from an identity matrix to matrix(1.12, 0, 0, 1.12, 0, 0).”