Nissan DESIGN.md

Design System Inspiration of Nissan

Overview

Visual Theme & Atmosphere

Nissan makes and sells automobiles and related products. Its company profile dates its establishment to 26 December 1933 and lists its headquarters in Yokohama. The company's history page connects that history to a willingness to attempt what others have not. Company profile, history.

The identity's documented turning point is the 2020 logo redesign. Nissan describes an illuminated vehicle badge developed into a two-dimensional mark, with the company name retained at its centre. The design team's keywords were “thin, light and flexible.” This reference uses that documented evolution as context for the live site's light logo strokes, open photography and sharply rectangular actions. The visual connection is an interpretation of the capture, rather than an additional brand rule. Nissan's logo-design story.

The current Japanese brand page organises its message around driver assistance, electrification and connected cars. The live homepage combines a large vehicle photograph with compact red actions, practical purchase shortcuts and information rails. Its interface uses #c3002f for catalogue actions and icons, white page areas, pale grey panels and Japanese ShinGoPro faces. Japanese brand page, measured homepage.

The measured homepage is the Japanese edition (www.nissan.co.jp/), with HTML lang="ja-JP"; the capture did not redirect to another regional edition.

Primary tasks visible in the capture are finding a vehicle, opening its web catalogue, making a self estimate, finding a dealer, booking a test drive and reaching owner information. These are interface tasks, not researched audience personas.

Brand Narrative

The current Japanese brand page presents technology through everyday driving: driver assistance, electrification and connection. The homepage gives those themes practical entry points through vehicle browsing, estimates and test-drive booking. Its large photographs carry the campaign story while compact actions carry the next task.

Principles

Nissan's current design message links curiosity and the courage to challenge assumptions with combining technology and a human-centred viewpoint. Applied to this measured page, a useful design interpretation is to let vehicle imagery lead, make purchase tasks explicit and preserve visible keyboard focus. These application recommendations are not a published UI-principle list.

Personas

No audience-persona research was verified.

Colors

The following roles map measured colours on this homepage. No first-party colour-variable palette was exposed by the census; the site's own custom properties here mostly encode icons and navigation layout.

The most frequent text colour overall is #343434 (×115), while the paragraph foreground is #666666. Keep those two observations separate when choosing long-copy ink.

Header colour is contextual. MyNISSAN's states-run rest was #000000 with #ffffff text; its after-blur read became #eeeeee with #000000 text. The survey viewport shows the pale variant over a photograph. These readings do not establish a universal secondary-button fill or a focus-induced colour change.

Typography

Evidence classes

The loaded icon-Nissan-Global, icon and omninav-nissan-modernized-icons-font faces serve interface symbols; they are excluded from text-family roles. Font binaries were not fetched separately.

Measured typesetting

The loaded Bold face's normal face descriptor and MyNISSAN's computed CSS weight 700 are different observations. The census has no h1 family reading; a heading scale is absent from this reference.

Layout

The desktop capture opens with navigation over the vehicle photograph. The surveyed full-image hero link is 1425 × 759.5px; the Sakura action links begin 50px from the left. Below the hero are a service notice, four purchase shortcuts, a vehicle-category strip, an information carousel, a news list, a pickup carousel and a dark footer.

Three visible information-image links have x positions 202, 552 and 902px and widths of 320px. Those anchor rectangles imply 30px gaps. Use the observed three-column rhythm for this desktop surface; a general grid or global spacing scale was not extracted.

Padding is control-specific: 12px 25px for the hero action, 12px 45px 12px 20px for the information action, 6px 20px for MyNISSAN, and 7px 0px 17px for the large purchase shortcut.

Responsive Behavior

Only the 1440 × 1000 desktop viewport was rendered; mobile layout and breakpoint behaviour were not measured.

Elevation & Depth

The six control roots have no box shadow. The floating purchase bar visibly casts a shadow in the full-page capture; its numeric shadow value was not measured.

Motion & Easing

The computed transition on MyNISSAN is background-color 0.3s ease 0s. Its measured hover and pressed snapshots show no settled difference within the probe's scope. The other five selected control roots report all 0s ease 0s.

The purchase shortcut's parent underline changes horizontally from matrix(0, 0, 0, 1, 0, 0) to matrix(1, 0, 0, 1, 0, 0) on hover and press. Its ancestor timing curve was not recorded as a raw computed transition string, so this reference supplies the observed transform endpoints only.

---

Tier 1 sources: Homepage (live survey, fonts, census, controls and screenshots, 2026-11-03); homepage nonsense-path control (404); company profile; privacy notice; history; logo-design story; design message; Japanese brand page; brand-font product CSS. Full opened-source URLs, controls and raw evidence are in the accompanying verification notes. All were read on 2026-11-03.

Components

All six measured elements are links. The capture used real pointer states and a Tab walk. Dimensions below describe the selected anchor, including the small anchor inside a larger card.

MyNISSAN and car-navigation components retain geometry and their authored focus treatment in the machine-readable reference. Their contextual colours stay in this prose. Native auto rings have no focus tokens. Every measured control root has box-shadow: none at rest.

The survey also shows a 48px pale-grey hero estimate link beside the red catalogue link. Its states were not selected for measurement, so no additional component is declared for it. No visible search input was returned by the survey.

States

Pointer measurements succeeded for all six controls. Pressed snapshots equal the hover result for the selected red actions, navigation link, pickup detail and purchase shortcut; no extra press-only effect was observed within the compared scope. MyNISSAN shows no hover or pressed delta within that scope.

The probe compares the selected element, its ::before/::after, descendants and their pseudo-elements, and three ancestor levels and their pseudo-elements. Descendant counts are one for the hero, one empty child for MyNISSAN, one for navigation, zero for the information and pickup-detail actions, and two for the purchase shortcut, including one empty icon span. No selected comparison subtree contains an SVG or image element. Pixel-only animation, siblings and the inside of an external resource remain outside that scope.

Keyboard focus reached five controls. The hero catalogue anchor had tabIndex=-1 in the states-run identity and was not reached in 92 Tab presses before a detected cycle. Its focus stays UNMEASURED. The header links' blue outlines and radius changes reverse after blur. MyNISSAN's after-blur colour changes are recorded as header-context variation, not a focus token. Disabled states were not exercised.

Do's and Don'ts

Recommendations below are drawn from the measured surface.

• Use square red catalogue actions with white labels and the measured darker red pointer states.
• Keep the 4px blue header focus outline and its 4px focus-only radius.
• Pair red purchase icons with the measured dark-grey label colour.
• Underline the card-detail label as it turns red on hover and press.
• Keep header-theme colours contextual when reproducing the photo-overlaid navigation.
• Preserve the measured font names and their evidence classes; choose no replacement face from this reference.
• Exclude the Swiper default blue from the Nissan palette.

Voice & Tone

The homepage's functional labels are short Japanese task phrases: “クルマを探す”, “セルフ見積り” and “試乗予約”. The brand page shifts to aspirational phrasing such as “自分だけの、らしい道。” and “暮らしに新しい感動を”. Use concise task labels in controls and more expressive language in campaign copy; this is an editorial reading of the opened text.

Agent Prompt Guide

“Build a Nissan-style desktop vehicle-catalogue action using the measured 48px-high square anchor: #c3002f fill and 1px border, #ffffff 14px/400 ShinGoPro-Regular label, 22px line height, 12px 25px padding. On hover and press, use #920023 for the fill and border. Keep keyboard focus unresolved for this particular hero control.”

“Build the measured card-detail link on #eeeeee: 14px/400 ShinGoPro-Regular, 18.2px line height, dark-grey text, a red arrow, and red underlined text on hover and press. Use the 114 × 18.2px link geometry without treating it as the entire card.”

These prompts use live-loaded faces. Font redistribution rights remain unresolved. Substitute: none chosen.