A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Bugatti, in one page
Bugatti's marketing surface is the most austere interface in luxury automotive: a near-pure black canvas ({colors.canvas} — #000000) holding white uppercase letterspaced display type and full-bleed automotive photography. The system has no accent color, no surface card decoration, no shadows, no gradients, no chrome — only photography, typography, and the brand wordmark. Every other luxury auto site in this category (BMW M, Aston Martin, Lamborghini) uses some form of accent color or signature element; Bugatti uses nothing. The empty space, the photograph, and the precisely-tracked Bugatti Display headline ARE the brand.
The system runs three custom Bugatti typefaces: Bugatti Display (display headlines, the "BUGATTI" wordmark, all caps with wide tracking), Bugatti Text Regular (body paragraphs, a serif text face), and Bugatti Monospace (button labels, navigation, captions, dates — anywhere precision and machined feel matters). The split is deliberate and unbreakable: never use Bugatti Text in a button, never use Bugatti Monospace in a paragraph.
Display sizes use weight 400 (regular) — never bold. Visual emphasis comes from size and tracking, not weight. Letter-spacing on the wordmark is 6px; on display headlines 2-4px; on uppercase labels 2-2.5px. Tight tracking is a brand violation. The wide spacing creates the "engineered precision" feel that no other luxury maker matches.
Key Characteristics:
- Pure black canvas (
{colors.canvas}— #000000) with white type. The system does not have a light mode. - Three custom Bugatti typefaces: Display (uppercase headlines + wordmark), Text Regular (body serif), Monospace (buttons, captions, nav).
- All display headlines are UPPERCASE with wide letter-spacing (2-4px). Body copy stays sentence-case at standard tracking.
- No accent color. The only non-monochrome color anywhere on the site is
{colors.link}(#c3d9f3) — a desaturated ice-blue used on inline anchor links, and even that appears rarely. - Buttons are pill-shaped (
{rounded.pill}) with transparent background and a 1px white outline. Bugatti is the only luxury-auto brand whose primary CTA is fully transparent. - Photography is the only depth element. No drop shadows. No gradients. No card surfaces. Surface cards are
{colors.surface-card}(#141414) at most — a barely-different-from-black tone. - Section rhythm is generous —
{spacing.section}(120px) between major bands, longer than most marketing sites because Bugatti's pages are mostly photography with minimal text density.
Do's and don'ts
Do
- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off entirely.
- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.
- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.
- Keep
{component.button-primary}transparent with a 1px white outline. The transparent pill IS the brand button. - Use weight 400 everywhere. Bold breaks the brand voice — the system has no bold weight role.
- Use
{spacing.section}(120px) between major editorial bands. The whitespace is part of the brand. - Reserve
{colors.link}(#c3d9f3) for inline anchor links only. It's the system's only non-monochrome color.
Don't
- Don't introduce any accent color outside
{colors.link}. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks the contract. - Don't bold any type. The system has no bold weight — every typeface stays at 400.
- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.
- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.
- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.
- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.
- Don't use Bugatti Display in a button (use Bugatti Monospace) or Bugatti Monospace in a paragraph (use Bugatti Text Regular). The trinity split is the brand voice.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Bugatti design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #ffffff
- ink: #ffffff
- body: #cccccc
- body-strong: #e6e6e6
- muted: #999999
- muted-soft: #666666
- hairline: #262626
- hairline-strong: #3a3a3a
- canvas: #000000
- surface-soft: #0d0d0d
Type:
- families: Bugatti Display, Bugatti Monospace, ui-monospace, Bugatti Text Regular
- scale: 6, 11, 12, 14, 16, 20, 24, 32, 48
- weights: 400
Shape:
- radius: 0
Spacing: 4, 8, 12, 14, 16, 24, 40, 64, 80, 96
Rules:
- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off entirely.
- Keep all display headlines in UPPERCASE Bugatti Display with 2-4px letter-spacing. The wordmark gets 6px.
- Use Bugatti Display for headlines, Bugatti Text Regular (serif!) for body, Bugatti Monospace for buttons + captions + nav. The trinity is unbreakable.
- Keep `{component.button-primary}` transparent with a 1px white outline. The transparent pill IS the brand button.
- Use weight 400 everywhere. Bold breaks the brand voice — the system has no bold weight role.
- Use `{spacing.section}` (120px) between major editorial bands. The whitespace is part of the brand.
Avoid:
- Don't introduce any accent color outside `{colors.link}`. Bugatti's brand discipline is total monochrome + photography. Adding a brand-blue or brand-red breaks…
- Don't bold any type. The system has no bold weight — every typeface stays at 400.
- Don't fill primary buttons. Transparent + outline only. A solid white button reads as off-brand.
- Don't compress whitespace between sections. The 120px rhythm is part of the editorial pacing.
- Don't use rounded corners outside buttons. Cards, photos, inputs all stay at 0px. Rounded cards read as consumer-tech, not luxury-engineered.
- Don't tighten letter-spacing on display headlines. 2-4px tracking on Bugatti Display is non-negotiable.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Brand & Accent
- Primary (
{colors.primary}— #ffffff): The single brand color. White type and white CTA outlines on the black canvas. - Link (
{colors.link}— #c3d9f3): The only non-monochrome color in the system — a desaturated ice-blue used on inline anchor links and rarely on focus states. Bugatti's brand discipline is so tight that this single token is essentially the entire chromatic vocabulary outside black-and-white.
Surface
- Canvas (
{colors.canvas}— #000000): The default page floor across every surface. Pure black. - Surface Soft (
{colors.surface-soft}— #0d0d0d): A barely-different-from-black tone used for spec table rows and dense data sections. - Surface Card (
{colors.surface-card}— #141414): Cards (career callout, newsroom article container, occasional content cards). Even card surfaces stay nearly-black — no contrast jump. - Surface Elevated (
{colors.surface-elevated}— #1f1f1f): One step further from black, used for nested cards on rare dense pages. - Hairline (
{colors.hairline}— #262626): The 1px divider tone. Visible but quiet. Used on table rows, between body sections, around card outlines. - Hairline Strong (
{colors.hairline-strong}— #3a3a3a): A heavier divider used on the underside of input fields (input fields have no border — only an underline hairline).
Text
- Ink / On Dark (
{colors.on-dark}— #ffffff): All headline and primary text on dark canvas. - Body (
{colors.body}— #cccccc): Default running-text color (slightly cooler than pure white). Used in body paragraphs. - Body Strong (
{colors.body-strong}— #e6e6e6): Emphasized body / lead paragraph. - Muted (
{colors.muted}— #999999): Footer links, dates, captions, secondary metadata. Dembrandt's frequency analysis confirms this as palette-2 (count 6, medium confidence). - Muted Soft (
{colors.muted-soft}— #666666): A second-tier muted for very-secondary text (legal disclaimer, copyright line).
Semantic
- Warning (
{colors.warning}— #d4a017): Reserved for technical-warning callouts (specifications, recall notices). Almost never appears on marketing surfaces. - Success (
{colors.success}— #5fa657): Order confirmation states (rare on marketing pages).
Type scaleRead the full spec
Font Family
The system runs three custom Bugatti typefaces as a rigid trinity:
- Bugatti Display — All display headlines (h1, h2, h3), the "BUGATTI" wordmark, model name plates. Uppercase, wide-tracked. The default for any visual emphasis.
- Bugatti Text Regular — A serif text face used exclusively for running body copy, lead paragraphs, model descriptions. Standard sentence-case, no letter-spacing.
- Bugatti Monospace — Button labels, navigation, captions, dates, monospace-precision contexts. Always uppercase with 2-2.5px tracking.
The split is functional and absolute. Bugatti Display in a button breaks the "machined precision" voice; Bugatti Monospace in a paragraph breaks the "engineered elegance" voice; Bugatti Text in a button is unthinkable.
The fallback stack walks -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif for Bugatti Display, Garamond, "Times New Roman", serif for Bugatti Text Regular, and ui-monospace, "SF Mono", "Cascadia Mono", monospace for Bugatti Monospace.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 64px | 400 | 1.1 | 4px | Hero h1 ("THE BUGATTI F.K.P. HOMMAGE", "TOURBILLON") — Bugatti Display, uppercase, wide-tracked |
{typography.display-lg} | 48px | 400 | 1.15 | 3px | Section heads — Bugatti Display, uppercase |
{typography.display-md} | 32px | 400 | 1.2 | 2px | Sub-section heads, model names — Bugatti Display |
{typography.display-sm} | 24px | 400 | 1.3 | 1.5px | Card titles — Bugatti Display |
{typography.wordmark} | 14px | 400 | 1.0 | 6px | The "BUGATTI" brand wordmark in the top nav — Bugatti Display, the widest tracking in the system |
{typography.title-md} | 20px | 400 | 1.3 | 1px | Career listing titles, intro paragraphs — Bugatti Display |
{typography.title-sm} | 16px | 400 | 1.3 | 1.5px | Mid-tier headlines, callout cards |
{typography.caption-uppercase} | 11px | 400 | 1.4 | 2px | Photo captions, metadata, "EXPLORE OUR OPPORTUNITIES" — Bugatti Monospace, uppercase |
{typography.body-md} | 16px | 400 | 1.5 | 0 | Default body — Bugatti Text Regular (a serif face), sentence case, no tracking |
{typography.body-sm} | 14px | 400 | 1.5 | 0 | Footer body, fine-print legal — Bugatti Text Regular |
{typography.button} | 14px | 400 | 1.0 | 2.5px | All button labels — Bugatti Monospace, uppercase, 2.5px tracking |
{typography.nav-link} | 12px | 400 | 1.4 | 2px | Top-nav menu items ("MENU", "STORE") — Bugatti Monospace |
Principles
The system NEVER uses bold weight. Every Bugatti typeface is set at weight 400 (regular). Visual emphasis comes from:
- Size — 64px hero vs 16px body is a 4× hierarchy
- Letter-spacing — 6px wordmark vs 0px body
- Case — Uppercase display vs sentence-case body
- Family contrast — Display vs Text Regular vs Monospace
Going to weight 700 anywhere would break the "modest engineering" feel and make Bugatti read like a generic luxury template.
The serif Bugatti Text Regular sets the brand apart from the all-sans luxury crowd (BMW, Aston Martin, Lamborghini all use sans-serif body type). Bugatti's serif body voice signals literary, considered, slow-reading prose — which is the brand's editorial philosophy.
Note on Font Substitutes
If Bugatti Display, Bugatti Text Regular, and Bugatti Monospace are unavailable, the closest open-source substitutes are:
- Bugatti Display → Saira Condensed (variable, weight 400) at +0.05em letter-spacing
- Bugatti Text Regular → Cormorant Garamond (regular) or EB Garamond
- Bugatti Monospace → JetBrains Mono or IBM Plex Mono (regular weight)
The substitution preserves the three-family split, which is more important than exact typeface match.
Components and layoutRead the full spec
Top Navigation
top-nav — A 56px-tall transparent nav bar overlaid on the hero photo at the top of every page. No fill, no border. Carries "MENU" at left, the centered wordmark-display ("BUGATTI" in 14px Bugatti Display with 6px tracking), and "STORE" at right with a small bag icon. All labels in {typography.nav-link} (Bugatti Monospace, 12px, 2px tracking, uppercase).
wordmark-display — The "BUGATTI" wordmark itself. Bugatti Display at 14px, weight 400, 6px letter-spacing. The widest tracking in the system. Centered in the nav bar at every breakpoint.
Buttons
button-primary — The signature primary CTA. Background transparent, text {colors.on-dark} (white), 1px white outline, rounded {rounded.pill} (9999px), padding 14px × 32px, height 44px. Type {typography.button} — Bugatti Monospace, uppercase, 14px, 2.5px tracking. The transparent fill is unique to Bugatti — every other luxury-auto brand uses a filled or outlined-with-text-shift button. Bugatti's transparent pill IS the button.
button-icon — Circular icon buttons (carousel arrows, share, language switcher). 40 × 40px, transparent background, white outline 1px, rounded {rounded.full}. Same outline-only treatment as the primary button.
text-link — Inline body links in {colors.link} (#c3d9f3, the only non-monochrome color in the system). Underlined by default. Type inherits {typography.body-md} (Bugatti Text Regular, serif).
Cards & Containers
hero-photo-band — Full-width black band with full-bleed automotive photography. The h1 in {typography.display-xl} sits center-aligned over the photo near the top, often paired with a small Bugatti Monospace caption ({typography.caption-uppercase}) below the headline and a single {component.button-primary} further down. Vertical padding 96px-200px depending on photo height.
career-callout-card — A small right-aligned card that floats over the hero photo on the homepage with a recruiting prompt ("Are you ready for a new adventure?"). Background {colors.surface-card}, rounded {rounded.none} (0px), padding {spacing.md} (16px), width 320px. Carries a small thumbnail at top, body line, and a {typography.caption-uppercase} link ("EXPLORE OUR OPPORTUNITIES").
model-photo-card — Used in model showcases (Tourbillon page, model lineup grid). Background {colors.canvas} (no card surface — just photo on black), rounded {rounded.none}. Top: 16:9 or 21:9 hero shot of the model. Below: model name in {typography.display-md} (32px Bugatti Display, 2px tracking), short specs line in {typography.caption-uppercase} (11px Bugatti Monospace), a {component.text-link} ("DISCOVER").
newsroom-article-card — Used on the newsroom page (newsroom.bugatti.com). Background {colors.canvas} with hairline border, rounded {rounded.none}, padding {spacing.lg} (24px). Carries a 16:9 thumbnail, a {component.date-pill} ("12. NOVEMBER 2025"), a {typography.title-md} headline, and a body excerpt in {typography.body-md} (Bugatti Text Regular serif).
career-listing-row — Each row of the careers page job listing. Transparent background, padding 24px vertical, hairline divider between rows. Job title in {typography.title-md} (Bugatti Display 20px) at left; location + department in {typography.caption-uppercase} at right; chevron arrow (→) at far right.
spec-cell — Vehicle technical-spec display on model-detail pages (Tourbillon engine specs). Transparent background with hairline dividers between cells (not between cells inside a card). Each spec shows a value in {typography.title-md} at top and a label in {typography.caption-uppercase} below. Padding 24px vertical.
Inputs & Forms
text-input — Standard text input on dark canvas. Background transparent, text {colors.on-dark}, 1px hairline-strong bottom border only (no top, left, right border), padding 12px × 0px, height 44px. Type {typography.body-md} (Bugatti Text Regular). Placeholder in {colors.muted}. Focus thickens the bottom border to white.
Tags & Captions
caption-overlay — Photo-overlay caption (e.g., "HONORING THE OEYRON AND ITS VISIONARY CREATOR"). Centered or left-aligned over photography in {typography.caption-uppercase} (Bugatti Monospace, 11px, 2px tracking, white).
category-tag + date-pill — Both render as transparent inline labels in {typography.caption-uppercase}, color {colors.muted}. No background fill, no border. The "tag" is the type itself.
CTA / Footer
cta-band-photo — A pre-footer "Discover Bugatti" band with full-bleed photography of a Bugatti car at speed and a centered headline in {typography.display-md} + a {component.button-primary} below. Vertical padding 80px. Inherits the editorial gravity of the hero through full-bleed photography.
footer — Black footer that closes every page. Background {colors.canvas}, text {colors.muted}. 4-column link list at desktop covering Bugatti / Models / Heritage / Connect. Vertical padding 64px. Bottom row carries the copyright line in {typography.body-sm} (Bugatti Text Regular). The wordmark sits center-aligned at the very bottom. The footer never inverts.
Spacing System
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Hamburger nav; hero h1 64→32px; career callout card hides; photo bands stay full-bleed; footer 4 cols → 1 |
| Tablet | 768–1024px | Top nav stays minimal (MENU + wordmark + STORE); 2-up newsroom grid; career rows full-width |
| Desktop | 1024–1440px | Full minimal top-nav; 2-up newsroom grid; spec tables 4-up |
| Wide | > 1440px | Same as desktop with more breathing room; max content 1280px |
Touch Targets
{component.button-primary}renders at minimum 44 × 44px (matches WCAG AAA).{component.button-icon}is exactly 40 × 40px.{component.text-input}height is 44px.- Career listing rows have 24px vertical padding; effective tap area meets 44px+ with surrounding spacing.
Collapsing Strategy
- Top nav stays minimal at all breakpoints (MENU label + wordmark + STORE label). On mobile the labels hide behind a hamburger but the wordmark stays centered.
- Hero photography stays full-bleed at every breakpoint. Photo crops adjust — wider crops at desktop, vertical crops on mobile.
- The career callout card on the homepage hides at < 768px (it's a desktop-only floating element).
- 2-up newsroom grid collapses to 1-up at < 768px.
- Spec cells reflow from 4-up to 2-up to 1-up; values stay at the same display size regardless of column count.
Image Behavior
- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile. Bugatti cars are always shown in motion or at-angle (never flat profiles).
- Newsroom thumbnails retain 16:9 ratio and 0px corners.
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-bugatti {--page-bg: #000000;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #c3d9f3;
--link-hover-color: #98beeb;
--border-color: #2e2e2e;
--card-bg: #000000;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #141414;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #000000;
--footer-text-color: #a6a6a6;
--button-bg: #ffffff;
--button-text-color: #000000;
--button-hover-bg: #e6e6e6;
--button-border: none;
--button-border-radius: 0px;
--button-secondary-bg: #0f0f0f;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #1f1f1f;
--button-secondary-border: 1px solid #2e2e2e;
--prompt-bg: #0d0d0d;
--prompt-text-color: #ffffff;
--base-font: var(--font-mono);
--heading-font: var(--font-serif);
--card-border-radius: 0px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- mitsui fudosan 76.8%
- dddhotel 76.6%
- trunk hotel 76.0%
- hakkaisan 75.4%
- karimoku newstandard 74.1%
Where this came from
- Source document
volt/design-md/bugatti/DESIGN.md· 27.7 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.