Does Nissan have a brand color in their marketing UI?

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.

What typefaces does Nissan use and what should I substitute?

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.

What is Nissan's button border-radius?

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.

What does Nissan's canvas color system look like?

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.

What is the role of uppercase letter-spaced labels in Nissan's system?

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.

Nissan Design System

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

About Nissan DESIGN.md

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

Automotive

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.

What makes it distinct

Zero brand color in UI chromethe entire navigation, button, card, and label system uses only charcoal, mid-gray, light gray, and white; photography carries all color
Pill-dominant button shape40px 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 tiersneither Nissan Regular nor Nissan Light goes above weight 400 in the marketing surface; no bold heading tier exists
Uppercase spaced tracking as decoration13px / 2–2.4px letter-spacing uppercase labels appear for nav categories and section labels, the system's only typographic texture
Alternating photography bandshero, model-feature, and lifestyle sections each run as full-bleed photography panels with text overlaid in white or charcoal depending on background

Live at nissanusa.com

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

nissanusa.com

Explore Nissan

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

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Nissan design system FAQ

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

Nissan — official site

Nissan USA'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.