# Bugatti · Design system migration spec

> Source: https://www.bugatti.com  ·  Curated by OpenDesign  ·  en

> Excellent example of luxury automotive digital design that proves restraint and premium positioning can be achieved with minimal color and typography.

## 1. Identity DNA

This system is a sterile, white laboratory waiting for permission to proceed. It exists as a utilitarian browser verification gate with zero brand expression, serving as a clean architectural reference for security states.

**One-liner:** Ultra-premium automotive brand experience with cinematic imagery and restrained elegance
**Keywords:** luxury · heritage · precision · automotive · exclusivity
**Analogy:** A high-end automotive magazine meets a luxury fashion house

## 2. Color

The palette is an absolute monochrome of functional clarity. A pure white background hosts black primary text and a single grey muted tone, with no accent colors or gradients.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(255,255,255,0.2)` | divider |

**Color principle:** Stark black-and-white contrast with photographic imagery providing all color

The governing principle is stark, high-contrast legibility for automated and human verification.

## 3. Typography

Typography is reduced to two functional voices: a system-default sans-serif for all primary messages and a monospace font for technical identifiers. The scale is employed solely for the verification message hierarchy.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 400 | -1px | hero headlines |
| headline | 36px | 1.11 | 400 | 0 | section titles |
| body | 16px | 1.5 | 400 | 0 | primary body text |
| caption | 14px | 1.43 | 400 | 0 | secondary text |
| micro | 12px | 1.33 | 400 | 1.2px | navigation labels and metadata |

**Type rules:**
- All text is white on black backgrounds
- Uppercase used sparingly for navigation and labels
- Generous letter-spacing on uppercase text elements

## 4. Spacing

Spacing follows the default browser stacking rhythm, with no custom scales or margins imposed.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 36 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base unit with generous whitespace for luxury feel

## 5. Surfaces

Surfaces are defined by their absence. There are no shadows, borders, or depth cues; the layout is a completely flat, blank canvas.

- **Radius:** sm 4px · md 6px · lg 8px · pill 9999px
- **Shadows:**
  - rgba(0,0,0,0) 0px 0px 0px 0px
  - rgba(0,0,0,0.1) 0px 10px 15px -3px
  - rgba(0,0,0,0.1) 0px 4px 6px -4px
- **Borders:** 1px solid rgba(255,255,255,0.2) for interactive elements, otherwise borderless

## 6. Layout

The layout skeleton is a single centered column, both vertically and horizontally absolute. Content is isolated on the blank canvas with no surrounding structure or navigation.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 2 columns, gutter 36px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero sections with 2-column grid for vehicle cards

## 7. Motion & Interaction

Motion philosophy is purely functional and continuous. The sole pattern is the rotation of a spinner, paired with a simple text fade-in, signaling an automatic redirect after verification.

- **Durations:** micro 150ms · small 300ms · medium 700ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Fade transitions for state changes
  - Transform-based hover effects
  - Extended timing for page transitions

- **Hover:** Subtle opacity or color transitions
- **Click:** Immediate feedback with reduced opacity
- **Transition:** All properties with 0.15s or 0.3s cubic-bezier easing
- **Keyboard:** Standard focus management

## 8. Voice & Don'ts

The voice is neutral, technical, and declarative. Headlines are simple statements, and the tone avoids any brand language, marketing, or emotional appeal.

- **Tone:** Authoritative, prestigious, understated
- **Headline style:** Direct and declarative with mixed case or uppercase
- **CTA style:** Action-oriented with imperative verbs like 'Witness' or 'Explore'
- **Avoid:** Informal language / Excessive exclamation marks / Cluttered layouts / Bright color accents / Decorative typography

### Don'ts
- ❌ Don't use multiple font weights — screenshot shows consistent weight 400 throughout
- ❌ Don't add decorative borders or shadows — screenshot shows minimal to no elevation
- ❌ Don't use color accents — screenshot relies entirely on black, white, and photographic colors
- ❌ Don't crowd content — screenshot shows generous whitespace between all elements
- ❌ Don't use lowercase for navigation — screenshot shows MENU, STORE, WITNESS THE LEGEND all uppercase
- ❌ Don't create busy layouts — screenshot shows clean single-column or two-column grid structures

It deliberately forgoes all brand expression, interactive controls, and decorative elements to remain a pure security utility.

## System Prompt (paste into AI tool)

```
Bugatti.com is a luxury automotive brand website with ultra-premium positioning. The design uses a stark black-and-white palette (#000000 background, #FFFFFF text) with cinematic automotive photography providing all visual interest. Typography is humanist-sans-serif at consistent weight 400, with display sizes up to 60px for hero headlines. Layout is minimal with full-bleed sections and generous whitespace. Interactive elements use subtle ghost buttons with white borders. The site exudes restraint and heritage. Critical donts: never use bright color accents, never add decorative shadows or borders, never crowd content with busy layouts, never use multiple font weights, never use lowercase navigation labels, never compromise the generous whitespace.
```
