Untitled Design System

### Spacing System

• Base unit: 4px.

• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 40px · {spacing.xxl} 64px · {spacing.section} 120px.

• Section padding: {spacing.section} (120px) — longer than most marketing sites because Bugatti's bands are mostly photography with minimal text. The empty space frames the cars.

• Card internal padding: {spacing.lg} (24px) for newsroom and content cards; {spacing.md} (16px) for the career callout card; {spacing.xxl} (64px) inside hero photo bands.

• Gutters: {spacing.xl} (40px) between cards in 2-up grids — wider than typical because Bugatti's grids are sparse.

### Grid & Container

• Max content width: ~1280px centered. Hero photo bands bleed full-width with no max.

• Editorial body: Single 12-column grid; photo bands are full-bleed.

• Newsroom layout: 2-up article grid at desktop, 1-up at tablet+mobile.

• Career listings: Single column with 80px row spacing.

### Whitespace Philosophy

Bugatti uses whitespace more aggressively than any luxury-auto competitor. The homepage hero is mostly photography + huge whitespace + a single sentence + a single button. The empty black space below the photograph is intentional — it lets the car breathe. Compressing the whitespace to "fit more content" breaks the brand's fundamental contract: that less is more.

### Border Radius Scale

| Token | Value | Use |

|---|---|---|

| {rounded.none} | 0px | All cards, photo containers, inputs, spec cells — the dominant radius |

| {rounded.pill} | 9999px | All buttons (the only rounded element in the system) |

| {rounded.full} | 9999px / 50% | Circular icon buttons, avatar surfaces |

The radius hierarchy is binary: rectangular for everything except buttons, which are pills. No 4px, no 8px, no 12px in between — those would feel "designed" rather than "engineered."

### Photography Geometry

Hero photography fills full-width with no rounding. Photo cards inside grids retain {rounded.none} (0px) corners, edge-to-edge images. Model detail shots use 16:9 or wider cinema-aspect ratios. Newsroom thumbnails use 16:9 with 0px corners. There are no avatars or rounded photo crops anywhere on the marketing site.

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

1. Focus on ONE component at a time. Reference its YAML key ({component.hero-photo-band}, {component.career-callout-card}).

2. New components default to {rounded.none} (0px). Only {component.button-primary} and {component.button-icon} use pill / full radius.

3. Variants live as separate entries in components:.

4. Use {token.refs} everywhere — never inline hex.

5. Never document hover. Default and Active/Pressed states only.

6. Display headlines stay UPPERCASE Bugatti Display 400 with 2-4px tracking. Body stays sentence-case Bugatti Text Regular (serif). Button labels stay Bugatti Monospace 2.5px tracking. The trinity does not blur.

7. When in doubt about emphasis: bigger photography before bigger type.

• The dembrandt frequency analyzer captured only 3 colors at root level (#000000, #999999, #c3d9f3). The white text (#ffffff) and dark surface tones (#0d0d0d, #141414, #1f1f1f) were inferred from screenshot — Bugatti's pages are so monochrome that the frequency-based analyzer didn't surface body text or surface tones as distinct palette entries.

• The three Bugatti typefaces (Display, Text Regular, Monospace) are licensed to Bugatti and not available as web fonts publicly. Substitutes are documented in the typography section.

• Animation and transition timings (photo carousel transitions, hover-reveal of menu, configurator animations) are not in scope.

• Form validation states beyond the underline-only {component.text-input} are not extracted — error / success states are inferred from general standards, not from the analyzed surfaces.

• The configurator surface (vehicle build pages with custom paint / interior pickers) was not in the analyzed URL set; its swatch grid, customization controls, and price-summary card are not documented here.

• The German-language newsroom (newsroom.bugatti.com/de) shares the system with the English Bugatti.com surfaces — no design-system-level differences observed, only language localization.

• The actual Tourbillon page rendered as a sparse minimal page in the captured screenshot, suggesting either lazy-loaded content or an interactive configurator-style UI that doesn't render fully in static screenshots; engine-spec layout is documented from general luxury-auto patterns informed by the captured spec cell tokens.