---
name: Bugatti
description: "Excellent example of luxury automotive digital design that proves restraint and premium positioning can be achieved with minimal color and typography."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#999999"
  line: "rgba(255,255,255,0.2)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  headline:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.11
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "0"
  micro:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "1.2px"

rounded:
  sm: 4px
  md: 6px
  lg: 8px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 36px
  3xl: 48px

---

## Overview

Ultra-premium automotive brand experience with cinematic imagery and restrained elegance

*A high-end automotive magazine meets a luxury fashion house*

## Colors

Stark black-and-white contrast with photographic imagery providing all color

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 4px base unit with generous whitespace for luxury feel

## Elevation & Depth

- 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

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 8px
- `pill`: 9999px

## Components

- **button:** Minimal ghost buttons with 1px white border, pill-shaped or rectangular with 6px radius
- **card:** Full-bleed image cards with text overlay, no visible container borders
- **chip:** Not prominently used
- **input:** Not prominently used
- **hero:** Full-viewport cinematic imagery with centered white text, vertical rhythm

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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