Bugatti

version alpha

name Bugatti

description An austere luxury-automotive interface that uses near-pure black canvas, white uppercase letterspaced display, and full-bleed automotive photography as the only voltage. The system runs three custom Bugatti typefaces — Bugatti Display, Bugatti Text Regular, and Bugatti Monospace — and combines them at modest weights with wide tracking to feel European-engineered, hyper-minimal, and quietly expensive. There is no accent color, no decorative element, no chrome — only photography, typography, and the brand wordmark.

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" surface-card: "#141414" surface-elevated: "#1f1f1f" on-primary: "#000000" on-dark: "#ffffff" on-photo: "#ffffff" link: "#c3d9f3" warning: "#d4a017" success: "#5fa657"

typography display-xl: fontFamily: "Bugatti Display, sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.1 letterSpacing: 4px display-lg: fontFamily: "Bugatti Display, sans-serif" fontSize: 48px fontWeight: 400 lineHeight: 1.15 letterSpacing: 3px display-md: fontFamily: "Bugatti Display, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 2px display-sm: fontFamily: "Bugatti Display, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 1.5px wordmark: fontFamily: "Bugatti Display, serif" fontSize: 14px fontWeight: 400 lineHeight: 1 letterSpacing: 6px title-md: fontFamily: "Bugatti Display, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.3 letterSpacing: 1px title-sm: fontFamily: "Bugatti Display, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.3 letterSpacing: 1.5px caption-uppercase: fontFamily: "Bugatti Monospace, ui-monospace, monospace" fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 2px body-md: fontFamily: "Bugatti Text Regular, serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "Bugatti Text Regular, serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button: fontFamily: "Bugatti Monospace, ui-monospace, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1 letterSpacing: 2.5px nav-link: fontFamily: "Bugatti Monospace, ui-monospace, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 2px

rounded none: 0px pill: 9999px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 40px xxl: 64px section: 120px

components button-primary: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 14px 32px height: 44px button-icon: backgroundColor: transparent textColor: "{colors.on-dark}" rounded: "{rounded.full}" size: 40px text-link: backgroundColor: transparent textColor: "{colors.link}" typography: "{typography.button}" top-nav: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.nav-link}" height: 56px wordmark-display: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.wordmark}" hero-photo-band: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 96px caption-overlay: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.caption-uppercase}" career-callout-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 16px width: 320px model-photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" rounded: "{rounded.none}" newsroom-article-card: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px career-listing-row: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.title-md}" padding: 24px 0 text-input: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 12px 0 height: 44px spec-cell: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.title-md}" padding: 24px 0 date-pill: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.caption-uppercase}" category-tag: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.caption-uppercase}" cta-band-photo: backgroundColor: "{colors.canvas}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" padding: 80px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-sm}" padding: 64px

Overview

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.

Colors

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).

Typography

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