Bugatti

Identity

Automotive

Bundled OpenDesign package for Bugatti, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

Typography

Bugatti DisplayDisplay400

Avenir NextBody400

Ag

SF MonoMono400

--text-4xl · 88pxThe quick brown fox

--text-3xl · 64pxThe quick brown fox

--text-2xl · 42pxThe quick brown fox

--text-xl · 26pxThe quick brown fox

--text-lg · 19pxThe quick brown fox

--text-base · 16pxThe quick brown fox

--text-sm · 14pxThe quick brown fox

--text-xs · 12pxThe quick brown fox

Palette

--bg#07111fPage background — defines the brand canvas.

--surface#101d2fCard / lifted container background.

--surface-warm#16283fTertiary surface tier (kami warm-sand).

--fg#f7fbffPrimary text color.

--fg-2#d6e0eeSecondary text tier (kami dark-warm).

--muted#8fa1b7Subtext / captions.

--meta#b7c7d9Tertiary FG / metadata tier (kami stone).

--border#2c405cDefault border / card edge.

--border-soft#1c2d44Inner row separator that should not visually compete.

--accent#1b4d8fBrand accent. ≤2 visible uses per screen (lint enforced).

--accent-on#ffffffFG when --accent is the bg.

--success#2fbf71Success state.

--warn#d9b45fWarning state.

--danger#c1121fDanger state.

Also named in DESIGN.md

Velvet Black#000000The entire canvas. Not near-black, not warm black — the pure HTML #000. Bugatti treats this as a display-stan…

Silver Mist#999999The single gray in the system. Used for secondary button borders, disabled states, and the thinnest hairline…

Imagery & layout

Radius

--radius-sm8px

--radius-md14px

--radius-lg22px

--radius-pill9999px

Spacing

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

Elevation

--elev-raised

Layout

4–12px between stacked labels; the big jump to 36/48/64 happens between content blocks.

Layout rules

Base unit: 8px.
Scale (from tokens): 4, 6, 12, 36, 48, 64px. Six values. Six. This is one of the smallest spacing scales of any major brand site — Bugatti uses a handful of discrete gaps and refuses to invent in-between values.
Section padding: typically 48–64px vertical. Hero panels are full-viewport-height, which bypasses the scale entirely.
Button padding: 6px 12px (compact) or 12px 24px (primary). Nothing else.
Inline spacing: 4–12px between stacked labels; the big jump to 36/48/64 happens between content blocks.
Max width: 1720px (dembrandt detected breakpoints up to 1720). The site scales to ultra-wide for luxury showroom displays and wide cinema monitors.

Component kit

Light Dark