packages/shared-skills/skills/frontend/references/design/bugatti.md
Bugatti.com does not behave like a website — it behaves like a feature-length car film that a visitor happens to be standing inside. The canvas is pure #000000, the only color that appears at rest is white, and the entire page is carried by full-bleed hero video and photography with a single typographic moment laid over the top. There are no cards, no grids, no promotional modules, no newsletter signups, no three-column editorial layouts. It is one continuous cinema-black channel, interrupted only by the cars themselves and a few pill-shaped calls to action that quietly say things like "EXPLORE OUR OPPORTUNITIES" in ALL CAPS monospace.
The single most distinctive move in the entire system is scale: the Bugatti Display typeface runs at 288px at hero moments. Two hundred and eighty-eight pixels. That is not a typo — the dembrandt sweep extracted a heading style rendered at an 18rem size, ALL CAPS, line-height 1.0, meant to be read the way you read a brand mark on the front of a Chiron: from across a showroom floor. At 288px the headline is no longer text, it is architecture. The secondary display scale of 60px feels almost miniature next to it, and the 36px mid-display feels like fine print. This typographic hierarchy is the most extreme of any production brand website in this catalog, and it is what gives Bugatti.com its sculptural, couture-showroom presence.
The other signature is monochromatic austerity. The entire homepage uses exactly three colors at rest: #000000, #ffffff, and #999999 (mid gray for disabled/tertiary states). There is no accent, no brand blue, no hazard color, no commerce orange, no gradient wash. The designers have made a conscious decision that Bugatti's color system should be the car paint itself — the page is a black velvet display stand, and the only color that exists is whatever blue-on-black lacquer the hero vehicle happens to be wearing today. This discipline is the exact opposite of PlayStation's PlayStation Blue or The Verge's Jelly Mint: Bugatti refuses to compete with its own product.
Key Characteristics:
#000000 canvas for the entire page — no gradients, no tints, no accentsBugatti Display ALL-CAPS headline — the most extreme display scale in the catalogBugatti Display (sculptural), Bugatti Monospace (UI labels), Bugatti Text Regular (body)#999999 mid gray for tertiary/disabled9999px radius — transparent with a 1px white border, padding 12px 24px#000000): The entire canvas. Not near-black, not warm black — the pure HTML #000. Bugatti treats this as a display-stand surface, the way a jewelry brand treats a black velvet cloth.#ffffff): All text, all borders, all CTAs. White is the only color that appears at rest on the chrome. It has the weight of typeset print on a matte museum label.#999999): The single gray in the system. Used for secondary button borders, disabled states, and the thinnest hairline dividers. Treat this as the "75%-volume" version of white — never a color, just a quieter version of the same voice.#000000): The only surface. There is no secondary surface, no elevated card, no modal backdrop. If something needs to feel "separate", it sits on the same black and is marked with a thin #999999 border — no color change.#ffffff): All headlines, body copy, button labels, and navigation items.#999999): Disclaimer text, placeholder labels, and the faintest supporting metadata. Used sparingly — Bugatti prefers to hide secondary content rather than dim it.rgba(59, 130, 246, 0.5)): A Tailwind default --tw-ring-color leaks into the extracted tokens from the build system — this is not part of the Bugatti brand palette. Ignore it. If a real focus state is needed, use a 1px #ffffff ring instead.None. There are zero decorative gradients on Bugatti.com. The only "gradient" on the page is whatever natural light gradient exists inside the hero video of the car itself. The brand refuses to apply any chrome gradient that could compete with the atmospheric lighting of the product photography.
ui-sans-serif, system-ui. A proprietary custom display typeface used only at very large sizes for hero and mid-display headlines. Designed to be read at architectural scale — at 288px, its geometry doubles as a visual element, not just text. The face carries a faint hint of early-20th-century Grand Prix typography (the period when Ettore Bugatti was racing) without ever becoming nostalgic.ui-sans-serif, system-ui. A custom monospaced face reserved for every UI label on the site. It handles all navigation links, all button labels, all captions, and all UPPERCASE metadata. The strict mono tracking (1.2–1.4px letter-spacing on all usages) gives the UI the appearance of a technical dossier or dashboard telemetry printout — appropriate for a company that builds 1600-horsepower hypercars.ui-sans-serif, system-ui. The body copy workhorse, used for the rare paragraph and inline reading text. Weights and styles are restrained — this font exists to be invisible when the display type is shouting and the monospace is whispering.| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Hero Display (Monumental) | Bugatti Display | 288px / 18.00rem | 400 | 1.00 | — | ALL CAPS — the largest display scale in this catalog, architectural in presence |
| Mid Display (Feature) | Bugatti Display | 60px / 3.75rem | 400 | 1.00 | 1.4px | Feature-panel headlines, ALL CAPS optional |
| Mid Display (Subfeature) | Bugatti Display | 60px / 3.75rem | 400 | 1.00 | — | Secondary feature headlines |
| Section Heading | Bugatti Display | 36px / 2.25rem | 400 | 1.11 | — | Section-level title |
| Monumental Mono Headline | Bugatti Monospace | 60px / 3.75rem | 400 | 1.00 | — | UPPERCASE — reserved for technical/section labels at hero scale |
| Body Small (Display) | Bugatti Display | 16px / 1.00rem | 400 | 1.50 | — | Display face used sparingly at body size for marketing copy |
| Lead Body | Bugatti Text Regular | 20px / 1.25rem | 400 | 1.40 | — | Paragraph lead |
| Body Regular | Bugatti Text Regular | 16px / 1.00rem | 400 | 1.50 | — | Standard reading body |
| Body Compact | Bugatti Text Regular | 14px / 0.88rem | 400 | 1.43 | — | Dense body |
| UI Link (Caps) | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | UPPERCASE — primary navigation and primary link style |
| UI Link (Mono Plain) | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | — | Plain-case mono link — rare, used for disclaimer links |
| Button Label (CAPS) | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | UPPERCASE — primary pill-button label |
| Button Label (Compact) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | 1.2px | UPPERCASE — small pill-button label |
| Button Label (Unstyled) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | — | Plain-case mono — footer microbutton |
| Caption CAPS Wide | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | UPPERCASE — section eyebrows and tech-spec labels |
| Caption Plain Wide | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | Plain-case with 1.4px tracking — the "mid-formal" register |
| Caption Plain | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | — | Plain mono caption |
| Caption Micro (Text) | Bugatti Text Regular | 14px / 0.88rem | 400 | 1.43 | — | Body-face caption |
| Caption Micro (CAPS) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | 1.2px | UPPERCASE — smallest tagging label |
| Caption Micro (Plain) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | — | Smallest plain-case mono |
The 1.00 line-height and 288px display scale both assume the proprietary Bugatti Display face, which is drawn with compact vertical metrics purpose-built for architectural scale. If you substitute with open-source extended geometric displays like Unbounded, Big Shoulders Display, or Archivo Black, make two adjustments: (1) loosen line-height to ~1.05–1.10 to prevent ascender collisions, and (2) cap the maximum display size at ~104–128px on most viewports — these substitutes have wider horizontal metrics than Bugatti Display, so a 288px monumental headline will wrap across 4+ lines and overwhelm the layout. Reserve the 200px+ scale only for single-word monumental moments (e.g., "BUGATTI" alone). Bugatti Monospace substitutes (Space Mono, JetBrains Mono) and Bugatti Text Regular substitutes (Inter, DM Sans) work at the token values without adjustment.
Primary — White Outlined Pill
#ffffff, Bugatti Monospace 14px / 400 / 1.4px tracking, UPPERCASE1px solid #ffffff9999px — full pill12px 24pxrgb(255, 255, 255) none 0px at rest#ffffff with black text, or a subtle opacity dim (the extracted token set did not capture a bespoke hover — treat this as a safe assumption since the default Bugatti interaction is restraint)#ffffff outer ring via box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #000000 for contrastSecondary — Gray Rounded Button
#ffffff, Bugatti Monospace 12px / 400 / 1.2px tracking, UPPERCASE1px solid #999999 (Silver Mist)6px — subtle corner, the only non-pill non-zero radius in the system6px 12px#ffffff, text stays whiteGhost — Unbordered Link Button
#ffffff, Bugatti Monospace 12px / 400 — plain or UPPERCASE1px solid #999999 frame, a 6px border radius, and #000000 interior. These are reserved for cookie-consent notices and modal-style dialogues, not editorial content.⚠ Inputs: 0 styles). This is because Bugatti.com has essentially no forms on the homepage — no newsletter signup, no search bar, no contact form, no email capture. When forms do appear (on deeper pages), apply these defaults consistent with the rest of the system:
#000000 background, 1px solid #999999 border, 6px radius, #ffffff text in Bugatti Text Regular 16px, placeholder #999999.#ffffff, no glow — the border change IS the focus signal.#999999 inline message below. Bugatti does not use red error colors — it stays in the monochrome palette.#000000) thin strip with the Bugatti "EB" monogram or full "BUGATTI" wordmark centered, a hamburger "MENU" link left, and a "STORE" link right. Both nav links are Bugatti Monospace 14px UPPERCASE with 1.4px tracking.#ffffff — the hover signal is a subtle text-decoration underline or an opacity shift to ~0.75. No color change.6px.#ffffff at ~1.2px tracking, placed below the media or in the lower-left corner.loading="lazy" on every image below the fold; hero video is preloaded.rgba(0, 0, 0, 0.4) linear gradient from bottom (40% black) to top (transparent) — the only "shadow-like" effect in the system. It's a vignette, not a drop shadow.Bugatti's whitespace philosophy is cinematic negative space — the page is 90% empty even when content is present, because the content is usually a video or photograph of a single car. The rhythm is: full-bleed media → monumental headline → single pill CTA → scroll → next full-bleed media. There is no "information density" anywhere. The page breathes the way a museum breathes, with each exhibit getting its own silent room.
Three values. No 12px, no 24px, no 20px. Bugatti's radius system is the most restrained of any site in this catalog — the brand has made an active decision that "slightly rounded rectangle" is a vulgar shape, and committed to either true rectangle or true pill.
| Level | Treatment | Use |
|---|---|---|
| 0 | No shadow, no border | Default text and media on #000000 |
| 1 | 1px solid #999999 | Secondary containers, cookie-style dialogs |
| 2 | 1px solid #ffffff | Primary button outline, active state indicators |
| 3 | Bottom-to-top rgba(0, 0, 0, 0.4) → transparent vignette | Text-legibility gradient when type sits over video |
That is the entire depth system. There are 1 shadows in the extracted token set (zero meaningful box-shadow values — just a placeholder). Bugatti does not use drop shadows. It does not use elevation rings. It does not use glowing focus states. Depth is implied by the 1px hairline of a border or the presence of a vignette gradient — nothing more.
None. Zero gradients (except the subtle text-legibility vignette), zero blurs, zero glows, zero atmospheric effects. The decorative depth of Bugatti's site comes entirely from the lighting baked into the product photography. The chrome does not compete.
#000000. No off-black, no near-black, no warm black. Bugatti is pure black.#999999 is only for disabled, tertiary, and thin borders.box-shadow in its chrome.rgba(0, 0, 0, 0.4) bottom-up vignette if legibility is at risk.| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, hamburger "MENU", hero video locked to 9:16 or 16:9, hero headline scales to ~48–72px |
| Small Tablet | 640–767px | Still single column, padding opens slightly, typography scales up |
| Tablet | 768–1023px | Still single column for content, nav expands to include wordmark, headline scales to ~120px |
| Small Desktop | 1024–1279px | Full desktop nav, headline scales to ~200px |
| Desktop | 1280–1535px | Full layout, headline at 240–260px |
| Large Desktop | 1536–1719px | Max headline scale (288px), ultra-wide hero video |
| Ultra-Wide | ≥1720px | Container caps, hero video locks at 21:9 or wider, everything else stays proportional |
The dembrandt sweep detected 6 breakpoints (1720 → 1536 → 1280 → 1024 → 768 → 640). This is a narrower responsive set than PlayStation's 30 — Bugatti tunes for six clean thresholds rather than micro-adjusting every device boundary. The brand's assumption is that its visitors are either on a high-end laptop, a desktop monitor, or a phone, and the site doesn't need to fuss over everything in between.
12px 24px padded with 14px text — approximately 38–42px tall. This falls slightly below WCAG AAA 44px recommendations. For derivative work, bump vertical padding to 14–16px to hit 44px+.6px 12px padding are about 28–32px tall — definitely below touch-target minimums. Use these only on desktop pointer contexts.12–14px vertical padding on mobile to make them touchable.MENU / BUGATTI wordmark / STORE. Mobile keeps the same layout — there is no drawer, because there are only three items.poster= fallback.loading="lazy" with srcset art direction.imgix — you'll see bugatti.imgix.net URLs with transformation parameters.#000000)"#ffffff)"#999999)"#ffffff text on a pure #000000 canvas, line-height 1.0, no letter-spacing. Place a full-bleed 21:9 hero video behind it with a rgba(0, 0, 0, 0.4) → transparent bottom-up vignette for legibility."#ffffff border, 9999px border radius, 12px × 24px padding, Bugatti Monospace 14px / 400 / 1.4px letter-spacing UPPERCASE label in #ffffff. Hover state fills the background white with black text, 250ms ease."#000000 background, MENU link left, centered BUGATTI wordmark (128×29px), STORE link right. All links in Bugatti Monospace 14px UPPERCASE with 1.4px letter-spacing in #ffffff. No dividers, no hover color — just a slight opacity dim on hover."#ffffff, line-height 1.0, centered over a full-bleed photograph. Place a single primary pill CTA 48–64px below the headline."#999999 border, 6px border radius, 6px × 12px padding, Bugatti Monospace 12px / 400 / 1.2px tracking UPPERCASE label in #ffffff."When refining existing screens generated with this design system:
#000000, change it. Bugatti does not tolerate off-black.#000000, #ffffff, or #999999 is drift. Remove it — that includes ALL accent colors, including common defaults like #0070cc Tailwind blue.box-shadow. Strip every gradient except the one legibility vignette over video. Bugatti's chrome is silent.0, 6px, or 9999px. If you see 12px, 16px, 20px, 24px, correct to the nearest Bugatti value (almost always 6px or 9999px).bold or 700 anywhere, change it. Scale, not weight, is the hierarchy.