Bentley Design System

Overview

Bentley's marketing site is built on a single typographic conviction: weight as restraint. The Bentley proprietary humanist sans runs at weight 300 from the 48px hero heading down to the 16px body paragraph — the same featherweight regardless of scale. Where Rolls-Royce uses thin-stroke serif to signal old-money heritage, where Bentley's corporate sibling Porsche holds display at weight 700, and where Ferrari stops at weight 500, Bentley goes lighter than all of them. The logic is not minimalism for its own sake; it is the typographic equivalent of the hand-stitched leather and hand-beaten aluminum the brand builds into every vehicle — the restraint is the product.

The chromatic palette is near-monochrome. A near-black canvas at #040404 (407 combined occurrences) holds white text and photography. The single chromatic accent is Race Green at #394d45 — Bentley's historic Le Mans racing livery color, appearing in exactly 12 occurrences: 6 as the primary CTA fill, 6 as its border. Nothing else carries color. The CSS declares --bm-primary-blush (#e7cfb9) and --bm-primary-moss (#dcd8c0) — references to the interior material palette — but neither renders in the captured marketing surface. The marketing site stays monochrome and delegates material warmth entirely to photography.

The shape language is zero-radius sharp, consistent with the brand's architectural DNA: the Bentley grille is a strict rectilinear mesh, the Flying B mascot extends on a straight line. Every button, card, and editorial surface carries 0px corners.

Key Characteristics:

• Weight 300 at every typographic tier from 48px display to 16px body — the featherweight-as-authority move, unique in this directory at this scale.
• Race Green (#394d45) appears in exactly 12 occurrences — CTA fill and border only — making it the most color-restrained automotive brand in the directory.
• Near-black canvas at #040404 with 407 combined occurrences as the page's structural color.
• White canvas bands (#ffffff, 307 occurrences) appear inside the editorial Bentley Motors section and model-grid areas.
• Uppercase label tier at 13px / weight 400 / 1.3px tracking — the only weight-400 tier in the system, reserved for the smallest navigational labels.
• 0px border-radius universally.
• The CSS spacer system (--bm-spacer--3 through --bm-spacer--13) maps to 16–112px on an 8px base, revealing structured spacing discipline not visible from the marketing surface alone.

Colors

Brand

• Primary ({colors.primary} — #394d45): frequency 12. Used as background (6), border (6). Bentley Race Green — the exact green of the 1920s Le Mans Bentley Boys team cars, wired as --bm-primary-living-green. Never as text; never as a section background. The single color in an otherwise monochrome system.
• Primary Teal ({colors.primary-teal} — #637a77): wired as --bm-primary-teal. A lighter, more muted version of the Race Green — declared but absent from the rendered marketing surface; likely reserved for the Mulliner personalization configurator.
• Blush ({colors.blush} — #e7cfb9): wired as --bm-primary-blush and --bm-primary-moss. A warm pale cream referencing the interior material palette — Bentley's hand-stitched leather and wool carpet. Absent from the rendered marketing surface; a material-reference token rather than a marketing-surface color.

Canvas & Surfaces

• Ink ({colors.ink} — #040404): frequency 407. Used as text (201), border (201), background (5). The near-black page canvas — a fractional step from pure black that prevents photographic dark-area clipping. Wired across multiple --bm-* variables as the base structural tone.
• Canvas ({colors.canvas} — #ffffff): frequency 307. Used as text (149), border (143), background (10), gradient (5). The white editorial-band surface and the nav/label text on the dark canvas. Wired as --bm-basic-white and --bm-primary-moss--10.
• Ink Black ({colors.ink-black} — #000000): frequency 10. A pure-black accent layer for overlay gradients and scrim backgrounds, wired as --bm-basic-black and --bm-transparent.
• Surface-1 ({colors.surface-1} — #f0f0f0): frequency 2. A near-white gradient stop — used in editorial transitions between dark and light bands.
• Hairline ({colors.hairline} — #ffffff): used at low opacity as the border tone on dark surfaces, 143 occurrences. White-with-alpha is the only hairline tone that reads against near-black.

Typography

Font Family

The system runs Bentley — a proprietary humanist sans that shares proportions with Gill Sans or Optima but at a clearly custom point of difference. Fallbacks walk to arial, helvetica, sans-serif. There is no secondary family; Bentley carries every tier from caption to display. The humanist construction (slightly modulated stroke widths, open apertures) is visible at 38–48px display sizes and is why the weight-300 setting reads as restrained craft rather than as hollow thinness.

Hierarchy

Principles

Weight 300 is the single setting for every body, heading, button, and display tier — eight of the eleven typography tokens share this weight. The hierarchy is size-only. This is an intentionally difficult constraint: at small sizes, weight 300 requires precise rendering and good screen clarity; on substandard displays it reads as thin. The system accepts that risk because the ultra-luxury audience encounters the brand on high-resolution devices in contexts where the rendering quality is reliable.

Font Substitutes

Bentley is proprietary. Raleway at weight 300 is the closest open-source humanist substitute — the moderate-contrast stroke structure and open apertures carry over. Jost Light (300) is slightly more geometric but works at body sizes. Avoid weight 300 of mechanically neutral fonts like Inter at small sizes — the lack of stroke modulation makes ultra-light text read as a rendering artifact rather than a typographic decision.

Layout

Spacing System

• Base unit: 8px. The CSS declares --bm-spacer--3 (16px) through --bm-spacer--13 (112px) on a structured ladder.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 48px · {spacing.4xl} 64px.
• Grid margin: --bm-grid-margin 48px — the outer page margin on desktop.
• Grid gutter: --bm-grid-gutter 24px — the column gutter between editorial grid cells.
• Section padding: 40px on the Mulliner and editorial-light sections; 48px on the model grid.

Grid & Container

• Hero: full-bleed vehicle photography at 1440px, with the headline and CTA positioned at the lower-left of the image (not centered) — a compositional preference that reads as editorial magazine rather than standard SaaS hero.
• Model grid: 4-column editorial card grid on desktop, each card containing a vehicle photograph, name, and Race Green CTA button.
• Bentley Motors editorial: white canvas section with running body paragraph and then 4-column photo editorial strip.
• Mulliner section: Race Green (#394d45) full-bleed panel — the single large-surface application of the brand accent color.

Rhythm

The page alternates: near-black hero (photography-dominant) → white editorial band → near-black model grid → Race Green Mulliner panel → gold vehicle close-up photography → white ownership/app section. The rhythm is sparser than most automotive sites — fewer bands, more pause per band — consistent with the "hand-crafted takes time" brand positioning.

Elevation

No shadow tier appears in the captured surface. The near-black canvas creates depth through two mechanisms: photography (the vehicle images create the only spatial depth on the page) and the white editorial band's contrast with the surrounding dark canvas. There are no drop shadows on buttons, cards, or navs.

• Flat (no shadow): 100% of captured surfaces.
• Depth from photography: the hero and model photography provide the page's only spatial dimensionality.
• Hairline borders: the 1px white hairline (white-alpha) separates nav from hero on dark surfaces; it is the page's finest structural line.

Shapes

The radius scale is absolute zero, consistent with every ultra-luxury automotive brand in this directory. Every component — primary button, secondary button, model card, editorial card, Mulliner panel — carries 0px border-radius. The sharp geometry is the digital translation of the Bentley grille's rectilinear mesh: precision lines rather than softened curves. Unlike Cloudflare, which uses a pill for its primary CTA, Bentley applies the sharp rule even to the single most important action surface.

Components

button-primary — Race Green (#394d45) fill, white text, Bentley 16px / 300 / 0.16px tracking, 0px radius, 16×22px padding, 50px height. The single chromatic CTA in the system. "Explore" is the canonical label instance.

button-secondary — Transparent fill, white text, 1px white border, 0px radius, 12×18px padding, 44px height. Used for secondary navigation actions on dark-canvas surfaces.

top-nav — Transparent background over the hero photography, white text in nav-link (16px / 300), 48px horizontal page margin, 55px height. The Bentley winged-B mark centered above the nav; links flush right.

nav-link — Transparent background, white text, 16px / 300 / 0.16px, 8px top/bottom padding.

hero-heading — White text on photography overlay, Bentley 48px / 300 / normal tracking. Lower-left positioned rather than center-aligned — the editorial compositional move.

section-heading — White text at 24px / 300, used on dark-canvas sections ("Models").

section-heading-dark — Ink text at 24px / 300, used on white-canvas editorial sections ("Bentley Motors").

body-paragraph — Ink text at 16px / 300 / 0.16px — the editorial body in white-canvas sections.

body-paragraph-light — White text at 16px / 300 / 0.16px — the body on dark-canvas sections.

label-caps — The uppercase label tier: 13px / 400 / 1.3px tracking — the only weight-400 surface, used for category navigation and chip labels. Transparent background, white text on dark.

editorial-card — Near-black fill, white text, 0px radius, 24px padding. Model cards in the lineup grid.

model-card — Near-black fill, white body-sm text, 0px radius, 16px padding. The smaller tile format for secondary model links.

mulliner-section — Race Green (#394d45) fill, white text, 40px × 48px padding. The single large application of the brand accent color, used for the Mulliner custom-configurator section.

editorial-light-section — White canvas fill, ink text, 40px × 48px padding. The "Bentley Motors" editorial band between the model grid and the Mulliner section.

card — White canvas, ink text, 0px radius, 24px padding. The content card used on light-canvas surfaces.

text-input — White canvas, ink text, surface-1 (#f0f0f0) border, 0px radius, 12×16px padding, 48px height.

Do's and Don'ts

Do hold every typographic tier at weight 300. The move is indivisible — the moment a heading steps to weight 500 or 700, the discipline that distinguishes Bentley from other dark-canvas automotive brands disappears. Weight 300 at 48px reads as ultra-luxury precisely because it takes confidence in the photography to leave the heading so light.

Do keep Race Green (#394d45) off every surface except the primary CTA button and its border. The 12 total occurrences in the captured surface are not a bug — they are the entire chromatic statement. Using the color on section dividers, labels, or secondary buttons would dilute the single-voltage discipline.

Do use the lower-left headline positioning in hero sections rather than center-aligned. Bentley's hero typography sits at the bottom-left of the vehicle image, reading as editorial magazine rather than SaaS landing page — the vehicle composition fills the right two-thirds of the frame.

Do use the uppercase tracked label tier ({typography.label-caps} — 13px / 400 / 1.3px) for every navigation label and category chip. It is the only tier where the system breaks from weight 300, and its tracked uppercase provides the navigational legibility that the light-weight body would not at 13px.

Don't introduce the blush cream (#e7cfb9, wired as --bm-primary-blush) on the marketing surface. It is a material-reference token for the Mulliner configurator interior palette — deployed on digital surfaces outside the configurator context, it reads as a generic warm cream rather than as a reference to Bentley's hand-stitched leather.

Don't add drop shadows to the Race Green CTA button or any card surface. The system has zero shadow occurrences; the button reads as the sole elevated element purely through its Race Green fill against the near-black canvas. A shadow would add visual weight that contradicts the featherweight-text discipline.

Don't round the primary button corners above 0px. At 16px padding and 50px height, even 4px rounding softens the sharp geometry that echoes the Bentley grille's rectilinear matrix. The button is a precision object, not a tappable pill.

Don't run Bentley typeface below 11px at weight 300. The humanist construction's modulated stroke widths become ambiguous at very small sizes in weight 300; the system avoids this by stepping to weight 400 at the 11px caption tier, and you should maintain that floor.

Known Gaps

• Configurator surfaces: the Bentley configurator and Mulliner personalization tools at bentleymotors.com/en/configurator carry their own token layer — material swatches, exterior color pickers, interior leather options — using the blush (#e7cfb9) and moss (#dcd8c0) tokens not present in the marketing capture.
• Ownership portal / app: the {component.ownership} section links to the Bentley Connect app, which likely carries a distinct mobile-surface token set.
• Hover and focus states: no hover captures were present in the extracted components; the primary button hover state is not documented here.
• Dark-mode / light-mode toggle: the CSS declares no explicit dark/light toggle variable, suggesting the site is dark-by-default without a user preference API.
• EWB / Mulsanne model pages: individual model deep-dive pages (e.g., Bentayga EWB) may expose additional accent tones for trim and specification tables not present in the homepage capture.
• Motion: the hero photography transitions and the Mulliner section scroll reveal are not captured — the spec covers end-state values only.