What is Bentley's primary brand color?

Bentley's sole chromatic brand accent is Race Green — #394d45, wired as `--bm-primary-living-green` in the CSS. It appears 12 times in the captured surface: 6 as background fill (the primary CTA button), 6 as border. The entire remainder of the marketing site is monochrome near-black (#040404) and white (#ffffff). The system also declares `--bm-primary-teal` (#637a77) and `--bm-primary-blush` (#e7cfb9), but neither appears in the rendered marketing surface — they belong to interior material references and the Mulliner personalization palette. The restraint is intentional: Bentley Race Green is the livery color the brand has used on racing programs since the 1920s Le Mans wins; deploying it once, on the single primary CTA, is the appropriate digital expression.

What typeface does Bentley use, and what weight is it?

Bentley uses a proprietary humanist sans named Bentley, with fallbacks to arial, helvetica, sans-serif. Weight 300 (light) is the default across every display, body, and label tier. The single exception is the uppercase navigation and category-chip labels at 13px / weight 400 / 1.3px tracking — one step above featherweight for the smallest, most legible contexts. Display headlines run 38–48px at weight 300 with normal letter-spacing. Body runs 16px at weight 300 with 0.16px tracking. This means the 48px hero heading and the 11px fine-print label share the same weight — hierarchy comes from size alone. For open-source substitution, Raleway at weight 300 or Jost Light at weight 300 approximates the proportions; avoid Inter and Neue Haas Grotesk, which are too mechanical for the humanist construction.

Why does Bentley use #040404 instead of pure black?

The canvas is #040404 — a fractional step from pure black that prevents the digital harshness that #000000 produces when photographic content sits against it at high contrast. At 407 combined occurrences (text + border), the near-black is the page's primary color, and the difference from pure black is invisible to casual view. The distinction matters when rendering vehicle photography: pure black can cause dark-area photo clipping to read as flat; #040404 allows the shadow areas of a car photograph to separate from the canvas by a perceptible margin. The same reasoning applies at Ferrari (#181818) and Rolls-Royce dark surfaces.

Where does Bentley Race Green appear on the site, and why not elsewhere?

Bentley Race Green (#394d45, `--bm-primary-living-green`) appears in exactly two roles: as the background fill of the primary CTA button (6 background occurrences), and as the border of that same button (6 border occurrences). It does not appear as text, on any card surface, or as a section background. The tonal partner `--bm-primary-teal` (#637a77) is declared in CSS but not rendered. This scarcity replicates how the color functions on physical vehicles: the Bentley race cars at Le Mans wore it as the full body livery, but on the road cars it appears only as a color option — not as chrome, trim, or badging. The digital system makes the same distinction.

Can I use this DESIGN.md to build an ultra-luxury brand marketing site?

Yes — feed the file to Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Bentley's discipline: near-black #040404 canvas, Bentley humanist sans at weight 300, Race Green (#394d45) on the single primary CTA only, uppercase-tracked 13px / 400 / 1.3px labels for navigation, and 0px sharp corners. The 16 component definitions cover the major marketing surfaces — hero, model cards, Mulliner section, editorial grid, ownership link. Important note: the weight-300 typography only holds as the authority signal when combined with vehicle photography at the quality Bentley produces; on a token-only prototype without high-quality imagery, weight 300 at small body sizes can read as thin rather than restrained. Plan for strong photography from the start.

Bentley Design System

Bentley Motors' marketing design system as a DESIGN.md file.

About Bentley DESIGN.md

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

Automotive

Bentley's marketing site uses weight 300 for everything. The 48px hero heading at weight 300. The 24px section headings at weight 300. The 16px body paragraphs at weight 300. The 11px navigation items at weight 400 — the single instance where the weight steps above featherweight. This is not a technical accident; it is the brand's most specific design decision, and it separates Bentley from every other automotive brand in this directory. Where Rolls-Royce uses a thin serif, Ferrari holds to weight 500, and Cadillac goes to weight 100 with extreme tracking, Bentley grounds everything in a single humanist sans at 300, and trusts the photography of quilted leather, engine-turned aluminum, and hand-stitched wool carpet to deliver the material luxury that the typeface refuses to shout about.

The DESIGN.md file packages the Bentley marketing design system into a machine-readable spec. Inside: 12 color tokens from the extracted palette (near-black, Bentley Race Green, white, muted teal, and the blush and moss cream declared in CSS but absent from rendered surfaces), 11 typography tokens running the Bentley proprietary humanist sans at weights 300 and 400 across display through caption tiers, the brand's 0px button radius, 9 spacing tokens on an 8px base, and 16 component definitions covering the primary CTA, nav, hero heading, editorial cards, the Mulliner custom-configurator section, and the ownership-portal link. The CSS variable system (`--bm-spacer-*`, `--bm-primary-*`) reveals a structured token architecture not fully exposed by the marketing surface alone.

Feed this file to Claude or Cursor to reproduce Bentley's discipline: near-black #040404 canvas, Bentley humanist sans at weight 300 for every non-label tier, Race Green (#394d45) reserved exclusively for the primary CTA button fill and border, 0px sharp corners, and full-bleed vehicle photography filling the hero and Mulliner sections. The move worth borrowing only if your brand has comparable photographic assets is the confidence to let weight 300 text sit alone on a dark canvas — the typography does not carry the emotional weight; the photography of a hand-built Continental GT does.

What makes it distinct

Weight 300 at every tierBentley's typeface runs from 48px display to 11px caption at the same featherweight, with no bold tier anywhere in the marketing surface
Race Green CTA#394d45 (Bentley Race Green, wired as --bm-primary-living-green) is the sole chromatic brand accent; the entire hero and body canvas is monochrome dark
Near-black canvas at #040404407 combined occurrences as text and border; a fractional step from pure black that prevents digital harshness
Uppercase tracked labels at 1.3px13px / 400 / uppercase / 1.3px appears on nav and category chips, distinct from the light body weight
Blush cream and moss palette#e7cfb9 (--bm-primary-blush) and #dcd8c0 (--bm-primary-moss) are declared in CSS as material-reference tokens but absent from the rendered marketing surface

Live at bentleymotors.com

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

bentleymotors.com

Explore Bentley

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

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Bentley design system FAQ

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

Bentley Motors — official site

Bentley'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.