---
version: alpha
name: "Nissan"
website: "https://www.nissanusa.com"
description: >-
  A Japanese automaker whose US marketing site runs a nearly monochrome palette
  — charcoal text and borders on a white canvas, with pure black used only for
  full-bleed photography backgrounds and near-black for footer surfaces — with
  no brand color accent visible anywhere in the marketing chrome. The proprietary
  Nissan Regular and Nissan Light typefaces carry every tier at weight 400,
  with a 40px radius pill as the dominant button shape, and 13px uppercase
  spaced-track labels providing the system's only typographic warmth. The
  "Defy Ordinary" positioning and a recent logo rebrand to a circular chrome
  mark sit in deliberate tension with a UI that defaults to quiet restraint.

seo:
  title: "Nissan Design System for React — monochrome restraint, Nissan Regular, 13 components"
  metaDescription: "Nissan USA's marketing-site design system as a DESIGN.md file. Monochrome charcoal-on-white canvas with no brand color in the UI chrome, Nissan Regular/Light typefaces, 40px pill buttons, uppercase-tracked labels. For React, Next.js, and AI coding tools."
  highlights:
    - "Zero brand color in UI chrome — the entire navigation, button, card, and label system uses only charcoal, mid-gray, light gray, and white; photography carries all color"
    - "Pill-dominant button shape — 40px border-radius on every CTA makes buttons fully rounded at standard heights, the softest shape in the truck-and-SUV competitive set"
    - "Weight-400 across all tiers — neither Nissan Regular nor Nissan Light goes above weight 400 in the marketing surface; no bold heading tier exists"
    - "Uppercase spaced tracking as decoration — 13px / 2–2.4px letter-spacing uppercase labels appear for nav categories and section labels, the system's only typographic texture"
    - "Alternating photography bands — hero, model-feature, and lifestyle sections each run as full-bleed photography panels with text overlaid in white or charcoal depending on background"
  tags:
    - "Automotive"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Nissan's US marketing site opens with a white page, a thin black logo, a navigation bar in charcoal, and a full-bleed hero photograph of a current offer. The brand's recent 2020 logo rebrand — from the bulky chrome three-dimensional mark to a flat circular ring — is visible in the top-left corner, but the UI chrome around it offers no color signal at all. Charcoal text, charcoal borders, light-gray dividers, white canvas: the entire interactive layer is monochrome. Honda, Toyota, and Hyundai all inject at least one brand accent (Honda's red, Toyota's red, Hyundai's blue) into their button fills; Nissan holds every surface in the achromatic register.

    The typography is equally restrained. Nissan Regular and Nissan Light — proprietary typefaces designed for the 2020 rebrand — run at weight 400 throughout; there is no bold display variant on the marketing site. The hero h1 captured in extraction is 60px Nissan Light at weight 400. Section h2s run at 50px Nissan Light. The 32px h2/h3 tier and 20px body fill out the scale, all in the same family at the same weight. The single texture moment is the 13px uppercase label at 2–2.4px letter-spacing, used for navigation category chips and section pre-headers. This is closer to a luxury-adjacent Japanese aesthetic (think Muji or Uniqlo's UI conventions) than to the heavy-weight American truck brand posture.

    The 40px border-radius pill on buttons is the system's warmest element and its most distinctive shape move. Where GMC's buttons are sharp-cornered rectangles and Ford's are small-radius chips, Nissan fully rounds every standard-height button into a pill, and the extraction confirms 13 occurrences of exactly 40px across interactive surfaces. Feed this file to an AI coding tool and it will reproduce the specific Nissan combination: achromatic UI chrome with photography carrying color, Nissan Light at weight 400 for every display moment, and fully-rounded pill buttons as the signature interactive affordance.
  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.nissanusa.com"
      title: "Nissan — official site"
      description: "Nissan USA'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: "nissan-brand-color"
      title: "Does Nissan have a brand color in their marketing UI?"
      answer: "No — the captured Nissan USA marketing surface has zero brand-color occurrences in the UI chrome. All 11 extracted color tokens are achromatic: charcoal, white, various mid-grays, near-black, and light gray. There is no blue, no red, and no accent of any kind declared as a CSS variable or appearing in the interactive layer. The brand's only color comes from vehicle photography. This is intentional and consistent with Nissan's 2020 rebrand direction, which pushed toward a quieter global design language. Competitors Toyota and Honda both inject their brand red into CTA fills; Nissan holds every interactive surface in the monochrome register."
    - id: "nissan-typeface"
      title: "What typefaces does Nissan use and what should I substitute?"
      answer: "Nissan's marketing site runs two proprietary typefaces: Nissan Regular (with Nissan Bold as a weight variant) and Nissan Light. Both are custom typefaces designed for the 2020 brand rebrand with fallbacks to Verdana and Arial. Display headlines (h1 at 60px, h2 at 50px) use Nissan Light at weight 400. Body copy and interactive labels run on Nissan Regular at weight 400. Uppercase tracked labels at 13px use Nissan Regular with 2–2.4px letter-spacing. For open-source substitutes: DM Sans or Plus Jakarta Sans replicate the humanist proportions of Nissan Regular; Figtree or Outfit at weight 300 approximates the slightly thinner Nissan Light display look."
    - id: "nissan-button-shape"
      title: "What is Nissan's button border-radius?"
      answer: "Nissan uses a 40px border-radius as the dominant button shape — the extraction shows 13 occurrences of this exact value, more than any other radius. At the standard button height of 44px, a 40px radius renders as a nearly-full pill. A 22px value appears once (for a smaller chip button), and a 16px value appears once for a larger button variant. The system also uses 50% radius for circular icon buttons (the logo mark and icon-only controls). The dominant 40px pill treatment is the signature interactive shape — fully rounded, never sharp, closer to luxury-brand softness than to the rectilinear truck-brand conventions of GMC or Ram."
    - id: "nissan-canvas"
      title: "What does Nissan's canvas color system look like?"
      answer: "Nissan's surface hierarchy is four-level: pure white (#ffffff) as the primary page canvas and card surface; a warm near-white merged from #efefef, #eeeeee, and #f0ece8 (combined into the surface-1 token) for section dividers and soft background bands; charcoal (#343434) as the dominant text and border tone; and a near-pure black (#1e1e1e) used as the background on full-bleed dark photography sections. Pure black (#000000) appears in gradients on photography overlays. The palette is deliberately achromatic — five grays from near-white to near-black with no tinted tones."
    - id: "nissan-uppercase-labels"
      title: "What is the role of uppercase letter-spaced labels in Nissan's system?"
      answer: "Nissan's 13px / 2–2.4px letter-spacing uppercase labels appear in two specific roles: navigation category links (the 'Build & Price', 'Electric Vehicles', 'Offers' items in the top nav carousel) and section pre-header labels above display headings. The choice of a tight 13px size with maximum tracking (2.4px = roughly 18% of the type size) creates a strong horizontal texture at small sizes that reads as a category or label separator rather than body copy. This convention appears across Japanese brand marketing sites — Muji, Uniqlo, Toyota Lexus — where it signals restraint and precision rather than the loud category-label treatment seen in US truck-brand navigation."

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

colors:
  ink: "#343434"
  canvas: "#ffffff"
  mid-gray: "#c1c1c1"
  canvas-dark: "#000000"
  surface-1: "#efefef"
  ink-soft: "#5c5c5c"
  ink-muted: "#666666"
  canvas-near-black: "#1e1e1e"
  canvas-deep: "#151519"
  hairline: "#d2d2d2"

typography:
  display-xl:
    fontFamily: "\"Nissan Light\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 96px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"Nissan Light\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: "0.1px"
  display-md:
    fontFamily: "\"Nissan Light\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: "0.32px"
  body-md:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0
  body-xs:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: "0.1px"
  label-spaced:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 20.4286px
    letterSpacing: "2.4px"
    textTransform: "uppercase"
  label-spaced-alt:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 18.5714px
    letterSpacing: "2px"
    textTransform: "uppercase"
  button-lg:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.1429px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"Nissan Regular\", \"Nissan Regular\", Verdana, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "16px"
  md: "22px"
  pill: "40px"
  full: "50%"

spacing:
  xs: "5px"
  sm: "10px"
  md: "15px"
  base: "16px"
  lg: "20px"
  xl: "30px"
  2xl: "48px"
  3xl: "64px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-lg}"
    rounded: "{rounded.pill}"
    padding: "13px 0px"
    height: "44px"
    borderColor: "{colors.ink}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "13px 0px"
    height: "44px"
    borderColor: "{colors.ink}"
  button-outline-white:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "8px 45px 8px 20px"
    height: "44px"
    borderColor: "{colors.canvas}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 20px"
    height: "60px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: "10px 50px 10px 20px"
    height: "44px"
    borderColor: "{colors.canvas}"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
    padding: "0px"
  section-heading-ink:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
  body-paragraph-ink:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  label-tag:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-spaced}"
    padding: "0px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "15px"
    borderColor: "{colors.mid-gray}"
  footer:
    backgroundColor: "{colors.canvas-near-black}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    padding: "30px 20px"
---

## 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

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 60px | 400 | 96px | 0 | Hero h1 ("Discover") |
| `{typography.display-lg}` | 50px | 400 | 64px | 0.1px | Section h2 ("Go the Distance") |
| `{typography.display-md}` | 32px | 400 | 40px | 0 | Sub-section h2 / h3 |
| `{typography.body-lg}` | 20px | 400 | 25px | 0.32px | Lead paragraph, model tagline spans |
| `{typography.body-md}` | 16px | 400 | 24px | 0 | Default running text, button labels |
| `{typography.body-sm}` | 14px | 400 | 22px | 0 | Nav links, card captions |
| `{typography.body-xs}` | 13px | 400 | 18px | 0.1px | Section sub-labels, h2 eyebrow markers |
| `{typography.label-spaced}` | 13px | 400 | 20.43px | 2.4px | Uppercase nav category chips |
| `{typography.label-spaced-alt}` | 13px | 400 | 18.57px | 2px | Uppercase section pre-header labels |
| `{typography.button-lg}` | 18px | 400 | 18px | 0 | Primary pill button labels |
| `{typography.button-md}` | 16px | 400 | 25.14px | 0 | Secondary button and link-style CTA |
| `{typography.nav-link}` | 14px | 400 | 22px | 0 | Top-nav link items |

### 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.