What is Bugatti's primary brand color?

Bugatti's primary color is white (#ffffff) on a pure black canvas (#000000) — the system has no chromatic brand accent. The only non-monochrome token in the entire spec is #c3d9f3, a desaturated ice-blue reserved for inline anchor links and rarely seen on the page. Bugatti is the only luxury-auto brand in its category without a signature accent: no brand-blue, no brand-red, no heritage stripe. Photography, typography, and the wordmark are the entire visual vocabulary.

What typography does Bugatti use, and what should I use if the Bugatti typefaces aren't available?

Bugatti runs three custom typefaces as a rigid trinity: Bugatti Display (uppercase headlines, the wordmark, all at weight 400 with 2–6px tracking), Bugatti Text Regular (a serif body face at weight 400), and Bugatti Monospace (buttons, captions, nav labels, dates, uppercase with 2–2.5px tracking). All three are licensed to Bugatti and unavailable publicly. Closest open-source substitutes: Saira Condensed for Display (with +0.05em tracking), Cormorant Garamond or EB Garamond for Text Regular, and JetBrains Mono or IBM Plex Mono for Monospace. The three-family split is more important to preserve than exact typeface match.

Why is the primary CTA transparent instead of filled?

The primary CTA is transparent with a 1px white outline and a pill radius (9999px), padding 14px x 32px, height 44px, label in Bugatti Monospace at 14px with 2.5px tracking. Every other luxury-auto brand in this category fills its primary button — Bugatti deliberately does not. The empty fill keeps the photograph visible through the button and signals that nothing on the page competes with the car. A solid white button reads as off-brand. The transparent pill is the brand button.

Can I use this DESIGN.md to build my own React project?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Bugatti's discipline (pure black canvas, weight-400 type, wide letter-spacing, transparent pill buttons, 120px section rhythm) rather than a generic dark-luxury theme. You can also reference the tokens directly: every color, type style, radius, and spacing value in the spec is a quoted value you can paste into Tailwind config, CSS variables, or your own component library. Pair it with the three font substitutes above for a faithful build.

Does Bugatti ever use bold type?

No. Every typeface in the system is set at weight 400 (regular). Visual emphasis comes from size (64px hero vs 16px body), letter-spacing (6px on the wordmark vs 0px on body), case (uppercase display vs sentence-case body), and family contrast (Display vs Text Regular vs Monospace) — never from weight. Promoting any token to 700 breaks the engineered-precision voice and makes Bugatti read like a generic luxury template.

What's missing from this DESIGN.md spec?

A handful of things, documented in the Known Gaps section. The dembrandt frequency analyzer captured only three colors at root (#000000, #999999, #c3d9f3) — the white text and dark surface tones (#0d0d0d, #141414, #1f1f1f) were inferred from screenshots because the pages are so monochrome that the body text didn't surface as a distinct palette entry. The three Bugatti typefaces are licensed and not available as public web fonts (substitutes are documented). Animation timings, the configurator surface (paint and interior pickers), and full form validation states beyond the underline-only input are out of scope.

Bugatti Design System

Bugatti's design system as a DESIGN.md file.

About Bugatti DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source bugatti.com

Automotive

Bugatti's marketing surface is the most austere interface in luxury automotive. The canvas is pure black (#000000), the type is white uppercase Bugatti Display with wide letter-spacing, and the only depth element is full-bleed automotive photography. There is no accent color, no shadow, no gradient, and no decorative element anywhere on the site outside the wordmark itself.

This page packages all of that into a single DESIGN.md file. Inside: 19 colors, 13 type styles built on three custom Bugatti typefaces, a binary radius scale (0px or pill), a 120px section rhythm, and 17 components — every piece you need to build something that looks European-engineered and quietly expensive.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that hold Bugatti's discipline — transparent buttons, weight-400 type everywhere, letter-spacing as the emphasis lever — rather than defaulting to a generic dark-luxury template.

What makes it distinct

Single canvas#000000 pure black with no light mode; white type and full-bleed photography carry every page
Three-typeface trinityBugatti Display, Bugatti Text Regular (serif), Bugatti Monospace, all locked at weight 400
Transparent pill CTAprimary button has no fill, only a 1px white outline and 2.5px-tracked Monospace label
Wide tracking as emphasiswordmark at 6px, display headlines 2–4px; bold weight does not exist in the system
Radius is binary0px on every card, photo, and input; pill (9999px) only on buttons, no mid-step values

Live at bugatti.com

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

bugatti.com

Explore Bugatti

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.

Semantic

Status, errors, success, inline links.

Bugatti design system FAQ

Common questions about Bugatti's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Bugatti in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→