Nissan Design System

Overview

Nissan's US marketing site makes the achromatic commitment quietly. Zero-color discipline. The entire interactive layer — navigation, buttons, cards, labels, dividers — runs in charcoal, mid-gray, and white, with zero brand-color occurrences in the UI chrome. Honda and Toyota both use their brand red in CTA fills; Hyundai uses a vivid electric blue; GMC marks edges in crimson. Nissan holds the entire interactive register monochrome and delegates all color to vehicle photography. The 2020 logo rebrand from a bulky chrome mark to a flat circular ring sits at the top left of a page that is otherwise indistinguishable in palette from a luxury goods site.

Where the palette is absent, shape speaks. The 40px border-radius pill — 13 occurrences in the extraction — is the warmest and most distinctive element on the page. At the standard 44px button height, a 40px radius renders as a near-complete circle on the left and right ends; the button reads as a stadium oval. No other major US automotive brand in the competitive set (GMC, Ford, Toyota) uses a full-pill button at this scale. The typographic counterpart to the pill is the 13px / 2.4px-tracked uppercase label, which appears on nav category chips and section pre-headers and gives the system its only textural moment.

Key Characteristics:

• Zero brand-color occurrences in the UI chrome — no accent color in any button fill, nav active state, or link underline.
• Charcoal ({colors.ink} — #343434) carries 535 total occurrences as the primary text and border tone; dominant across every UI surface.
• Full-pill buttons ({rounded.pill} — 40px radius) as the signature interactive shape — 13 occurrences in the extraction, more than any other radius.
• Nissan Light and Nissan Regular at weight 400 throughout; no bold display weight exists in the marketing surface.
• 13px uppercase spaced-track labels (2–2.4px letter-spacing) as the system's primary typographic texture.
• Photography carries every color moment — model photographs, lifestyle scenes, and interior shots are the only chromatic elements on the page.
• Five-step gray scale from near-white (#efefef) through mid-gray (#c1c1c1) to near-black (#1e1e1e) covers every surface transition.
• No extracted drop shadows; surface separation comes entirely from canvas-color alternation.

Colors

Surface

• Ink ({colors.ink} — #343434): frequency 535. Used as text (271), border (264). The dominant charcoal — the single most-used color across the marketing surface. Wires every nav link, card border, button fill, body paragraph, and label.
• Canvas ({colors.canvas} — #ffffff): frequency 359. Used as text (169), border (175), background (15). The page floor and primary card surface. The white text/border occurrences are inverse uses on dark photography sections.
• Mid-Gray ({colors.mid-gray} — #c1c1c1): frequency 134. Used as text (67), border (67). The system's hairline tone for card outlines, divider rules, and secondary text below model tiles.
• Canvas Dark ({colors.canvas-dark} — #000000): frequency 62. Used as text (26), background (7), border (25), shadow (1), gradient (3). The overlay on full-bleed photography sections and gradient backgrounds at the base of hero images.
• Surface-1 ({colors.surface-1} — #efefef): frequency 28. Used as text (12), background (5), border (11). Merged from #efefef, #eeeeee, and #f0ece8 — a near-white warm tint used for section background alternation and light separator bands.
• Ink Soft ({colors.ink-soft} — #5c5c5c): frequency 6. Merged from two nearby mid-dark tones in the extraction. Secondary text in body paragraphs and card meta-labels.
• Ink Muted ({colors.ink-muted} — #666666): frequency 4. Tertiary text — footnote copy and very secondary labels.
• Canvas Near-Black ({colors.canvas-near-black} — #1e1e1e): frequency 3, all as backgrounds. The footer and deep-dark section backgrounds.
• Canvas Deep ({colors.canvas-deep} — #151519): frequency 2. A very slightly blue-tinted near-black appearing on the footer's darkest band. Wired similarly to the near-black used in dark-theme product pages.

Hairline

• Hairline ({colors.hairline} — #d2d2d2): frequency 2. A supplemental light border tone for finer card outlines.

Typography

Font Families

The system runs two proprietary typefaces: Nissan Regular (with Nissan Bold as a declared weight variant but largely absent from the captured surface) for body text, buttons, and labels; and Nissan Light for display headings. Both were designed for the 2020 brand rebrand and fall back to Verdana, Arial, sans-serif. Both run exclusively at weight 400 across all captured sizes — the "Bold" variant appears only in certain financial figures, not in heading or display type.

The mono-weight approach at every tier — 60px Nissan Light at weight 400, 14px Nissan Regular at weight 400 — is the rarest typographic choice in the automotive segment. Every competitor except perhaps Lexus and Infiniti uses a bold or heavy weight for model name headers.

Hierarchy

Principles

The single weight (400) across all sizes means that size alone creates hierarchy — 60px vs 50px vs 32px vs 16px in the same weight and family. There is no bold-to-regular contrast between heading and body. This requires the display sizes to work harder: a 60px / weight 400 heading commands attention through scale, not emphasis. Nissan Light's slightly thinner stroke makes this readable at 60px where a heavier variant would feel over-declared.

Note on Font Substitutes

Both Nissan Regular and Nissan Light are proprietary typefaces not publicly available. DM Sans at weight 300–400 approximates the Nissan Regular humanist proportions; Plus Jakarta Sans at weight 300 is closer to Nissan Light's thinner display cut. For the tracked uppercase labels, use letter-spacing: 0.2em with any humanist sans at 13px to match the visual behavior.

Layout

Spacing System

• Base unit: approximately 15px — the single most common padding value (10 occurrences) in the extracted spacing data.
• Tokens: {spacing.xs} 5px · {spacing.sm} 10px · {spacing.md} 15px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 30px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Hero and section padding: the primary horizontal padding for nav content is 20px; hero content sections pad to roughly 30px.
• Button padding: {spacing.md} (15px) top/bottom on pill buttons; horizontal padding varies by button width (pill shape auto-adjusts).

Grid & Container

• Max content width: approximately 1440px on the hero; ~1280px on the model carousel and editorial grid.
• Hero: full-bleed photography, financing offer text overlaid white on dark section of image.
• Model selector band: horizontal tab strip with model names in uppercase-tracked Nissan Regular; tab selection reveals model photography, specs, and pill CTA.
• Lifestyle feature: 2-column split — full-bleed photography left, text panel right, stacked on mobile.
• Discover grid: 3-column editorial card grid ("The New 2024 Nissan Pathfinder", "Most Awarded Brand", etc.) — the page's densest content moment.

Rhythm

The page layers photography-first bands (hero, model feature, lifestyle) with information-density bands (model selector, discover grid, financing). The photography bands feel generous — full-bleed, tall, white text with minimal overlay chrome. The information bands feel compact — model chips, card grids, narrow text columns. The alternation creates pacing without requiring section-color contrast (unlike GMC which hard-alternates dark/light bands).

Elevation

The Nissan marketing surface shows no captured shadow values. Surface separation is handled by photography-vs-white contrast: the dark imagery creates visual depth against the white UI chrome without any drawn elevation. Cards in the discover grid are separated from the white page canvas by the mid-gray {colors.mid-gray} border — 1px rule at 67 border occurrences.

• Flat (no shadow): all declared surfaces.
• Card separation: 1px {colors.mid-gray} (#c1c1c1) border on cards; no shadow or surface-color lift.

Shapes

The radius scale is pill-dominant with sharp exceptions.

• {rounded.none} 0px — hero sections, full-bleed photography panels, text areas.
• {rounded.xs} 2px — very subtle rounding on specific small utility elements (2 occurrences).
• {rounded.sm} 16px — a larger button variant observed once.
• {rounded.md} 22px — a mid-size chip button used for certain model-selector contexts (1 occurrence).
• {rounded.pill} 40px — the dominant button shape, 13 occurrences, applied to all primary and secondary CTAs.
• {rounded.full} 50% — circular icon buttons and the Nissan logo mark.

The 40px pill is the shape that defines this brand's interactive identity. At a 44px button height, a 40px radius renders as effectively a stadium pill shape. No other US automotive brand uses a full pill at this scale — it reads as considerably softer and more approachable than the rectilinear (GMC) or small-radius (Ford) button shapes in the competitive set.

Components

button-primary — Charcoal {colors.ink} fill, white text, {rounded.pill} 40px radius, 13px top/bottom padding, 44px height, 1px charcoal border. The dominant CTA shape across the marketing surface — used for "Build & Price," "Explore Models," and financing inquiry actions.

button-secondary — Transparent fill, charcoal text, same {rounded.pill} radius, same dimensions, 1px charcoal border. Used for secondary model-exploration actions.

button-outline-white — Transparent fill, white text and 1px white border, {rounded.pill} radius. Applied over dark photography sections where charcoal buttons would disappear.

top-nav — White {colors.canvas} surface, charcoal text, 60px height, 20px horizontal padding. Nissan logo mark flush left (circular flat mark), model navigation center, search/account cluster right.

nav-link — White border pill, white text, {rounded.pill} radius, 10x50x10x20px padding, 44px height. The captured nav link style renders as a pill outline over the dark hero photography.

hero-heading — Charcoal text, {typography.display-xl} (60px / 400), 0 padding. The captured hero h1 "Discover" — minimal, large, light weight.

section-heading — White text at {typography.display-lg} (50px / 400) on photography sections. "Go the Distance," "Wherever the Road Takes You."

section-heading-ink — Charcoal text at {typography.display-md} (32px / 400) on white canvas sections.

body-paragraph — White text at {typography.body-md} (16px / 400) on photography sections.

body-paragraph-ink — Charcoal text at {typography.body-md} on white canvas sections.

label-tag — Uppercase tracked label at {typography.label-spaced} (13px / 400 / 2.4px tracking) in charcoal. The system's primary categorical label — nav chip text, section pre-header eyebrows.

card — White canvas fill, charcoal text, no border-radius, 15px padding, 1px mid-gray border. Used in the discover editorial grid for article and news cards.

footer — Near-black {colors.canvas-near-black} canvas, white text at {typography.body-sm}, 30x20px padding. Multi-column footer with Nissan logo, site-map category columns, and social icon cluster.

Do's and Don'ts

Do let vehicle photography carry the color. The system's achromatic UI chrome only works because the photography panels provide rich chromatic variety — a brand with less compelling product photography cannot adopt this approach without feeling sterile.

Do use {rounded.pill} (40px) on every button regardless of text length. The pill treatment is the warmest and most distinctive interactive element in the system; mixing pill and sharp-corner buttons in the same layout breaks the shape consistency.

Do use {typography.label-spaced} (13px / uppercase / 2.4px tracking) for any categorical or section-header label. This is the system's only typographic texture moment — it should appear consistently wherever a label distinguishes a section from body copy.

Do render section headings at weight 400 (never 700). The brand's mono-weight commitment means a display headline at weight 700 would immediately read as out of brand — it would look like Toyota's type treatment, not Nissan's.

Don't introduce a brand accent color into button fills or link underlines. The system has zero UI-chrome color for a reason — adding even a muted accent would break the achromatic discipline that makes the photography surfaces pop.

Don't use tight-zero border-radius on buttons. The {rounded.none} 0px treatment belongs to photography panels and hero sections only; sharp-cornered buttons would read as borrowed from GMC or a developer-tool brand.

Don't use the {colors.canvas-deep} (#151519) near-black for anything other than the deepest footer band. It has a very slight blue-violet cast that conflicts with the pure charcoal {colors.ink} used throughout the page — mixing them in adjacent surfaces creates an unintended warm/cool clash.

Don't use bold or heavy weights in display type. Nissan Regular Bold exists as a declared font but does not appear in any heading context in the captured surface. Reaching for weight 700 at 50–60px size destroys the light-weight identity established by Nissan Light.

Known Gaps

• Brand accent state: no active-state, hover-state, or focus-ring color is declared in the captured marketing surface; it is unknown whether Nissan injects a color accent at interaction time or maintains the achromatic discipline through hover states.
• EV-specific surface: Nissan's ARIYA EV sub-site and model pages likely carry additional tokens (the EV badge color, the ARIYA-specific gradient treatment) not represented here.
• Dark-mode surface: the marketing site does not expose a dark-mode toggle; the near-black surfaces ({colors.canvas-near-black}, {colors.canvas-deep}) are structural section colors, not a full-system dark theme.
• Form fields: no input, select, or form element was captured in the marketing surface extraction; form styling for the Build & Price configurator is not represented.
• Icon system: the nav and CTA chevron icons and social media icons are not captured as design tokens.
• Model-page tokens: individual model detail pages (Rogue, Frontier, ARIYA) may carry model-specific color accents for brand differentiation within the lineup.