CURATED · OPEN · FREE

Bugatti

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

EditorialPremiumCleanRestraintReference

↓ Download design system (14 MB)Open in OpenDesign

Visit: https://www.bugatti.com

📦 Browse pack contents →

Identity DNA

luxuryheritageprecisionautomotiveexclusivity

A high-end automotive magazine meets a luxury fashion house

Color

#FFFFFFInk

#000000BG

#999999Muted

rgba(255,255,255,0.2)Line

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

Typography

humanist-sans · monospace

display60px · 400
headline36px · 400
body16px · 400
caption14px · 400
micro12px · 400

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

Spacing

4px

8px

12px

16px

24px

36px

48px

64px

96px

Consistent 4px base unit with generous whitespace for luxury feel

Surfaces

sm · 4px

md · 6px

lg · 8px

pill · 9999px

1px solid rgba(255,255,255,0.2) for interactive elements, otherwise borderless

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

Layout

1440container

2columns

36pxgutter

768 / 1024breakpoints

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

Motion & Interaction

150msmicro

300mssmall

700msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Fade transitions for state changes · Transform-based hover effects · Extended timing for page transitions

Subtle opacity or color transitions · Immediate feedback with reduced opacity

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

Voice & Don'ts

Tone Authoritative, prestigious, understated
Headlines Direct and declarative with mixed case or uppercase
CTAs Action-oriented with imperative verbs like 'Witness' or 'Explore'

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
Avoid: Informal language
Avoid: Excessive exclamation marks
Avoid: Cluttered layouts
Avoid: Bright color accents
Avoid: Decorative typography

Inside the pack — real screenshots

Bugatti — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko