Bugatti Design System
Dark · Generated 14/04/2026 · 42 colors · 68 type tokens · 34 spacing steps · 10 motion tokens
v1.0.0
Color Palette
Background Colors
White
#FFFFFF
Black
#000000
Light Gray
#E1E1E1
Blue
#004BFA
Dark Gray
#171717
Red
#E11D48
Dark Gray 5
#1F1F1F
Dark Gray 7
rgba(23,23,23,.4)
Text Colors
Red 2
#BE123C
White 2
#FAFAFA
Border Colors
Dark Gray 6
rgba(23,23,23,.1)
Shadow Colors
Light Cyan
rgba(168,232,226,.1)
Fill & Gradient Colors
Light Gray 2
rgba(225,225,225,.1)
Blue 2
#006FCF
Dark Gray 2
#1D1C1C
Dark Gray 3
#231F20
Blue 3
#3086C8
Dark Gray 4
#232323
Red 3
#EB001B
Dark Blue
#1E3764
Orange
#F48120
Green
#34A853
Typography
Body Font · BugattiRegular / Josefin Sans
BugattiRegular
The world's most powerful production car. Form follows function.
Regular · 400 Medium · 500 Bold · 700 Black · 900
Display Font · BugattiBold / Cormorant Garamond
Bugatti Bold
Veyron · Chiron · Tourbillon · La Voiture Noire
Regular · 400 Bold · 700
Chiron
Display Hero · 75px · BugattiBold · line-height: 75px · letter-spacing: −3px
The Legend Returns
Display 54 · 53.5px · BugattiBold · line-height: 53.5px · letter-spacing: −2.14px
Tourbillon — A New Era
Heading 38 · 38.1px · BugattiBold · line-height: 38.1px · letter-spacing: −1.14px
Performance. Heritage. Excellence.
Heading 24 · 24px · Bold · line-height: 24px · letter-spacing: −0.96px
Experience the pinnacle of automotive engineering, handcrafted in Molsheim, Alsace.
Body Large · 20px · Medium · line-height: 30px · letter-spacing: −0.6px
Every Bugatti is individually tailored to its owner, embodying the spirit of La Belle Époque.
Body Default · 16px · Regular · line-height: 24px · letter-spacing: −0.4px
CHIRON · TOURBILLON · MISTRAL · BOLIDE
Caption / Label · 12px · Medium · line-height: 16px · letter-spacing: 1px
Line Heights
Tight
10px
Snug
11.83px
Normal
12.82px
Relaxed
14px
Loose
14.78px
LH-6
16px
LH-7
17.5px
LH-8
19.1px
LH-9
19.5px
LH-10
20.59px
LH-13
24px
LH-19
30px
LH-21
38.16px
LH-22
53.59px
LH-23
75px
LH-20
32px
Letter Spacing
Bugatti
Tight
−3px · hero display
Chiron
Normal
−2.14px · headings
Tourbillon
Wide
−1.14px · sub-headings
Molsheim Atelier
LS-13
−0.4px · body text
EB W16 ENGINE
LS-14
+1px · labels, caps
Spacing
Spacing Scale
34 tokens — 1.9px → 100px
1.9
2
2.7
3.1
4
4.3
5
6
6.5
8
9.5
14
16
17
18
20
22
23.8
24
26
28
30
32
35
36
40
48
52
56
60
70
72
95.4
100
Borders
Border Radii
SM
0 0 16px 16px
MD
0 34px 34px 0
LG
0 0 17.9px 17.9px
XL
0 0 8px 8px
2XL
6px
Full
8px 8px 0 0
R7
10px
R8
11.93px
R9
11.93px 11.93px 0 0
R11
12px
R13
17.88px
R14
24px 24px 0 0
Circle
50%
R18
60px
Pill
∞
Border Widths
Hairline
1px · ×28
Thin
2px · ×4
Two border widths used throughout the system. Hairline for fine details and separators, Thin for buttons and interactive borders. --border-width-hairline: 1px · --border-width-thin: 2px
Shadows / Elevation
Shadow Tokens
2 tokens — cyan-tinted ambient system
Flat
×122
rgba(168,232,226,0) — fully transparent; surface defined by border alone
Cyan Glow
×32
rgba(168,232,226,.1) — subtle cyan ambient glow; active states, hover cards
No easing functions detected in the Bugatti design system. Motion uses duration tokens only — --animation-nav, --animation-primary, --animation-smooth are defined in the site's custom CSS layer.
Z-Index
LayerValueUsage
Deep Background-100Deepest canvas elements, video backgrounds
Behind-1Elements behind base content
Base1Base content layer
Raised2Slightly elevated elements
Above3Content above base
Navigation10Header, sticky navigation
Popover20Dropdowns, tooltips, popovers
Drawer25Side panels, drawers
Overlay30Modal overlays, backdrops
Above Overlay35Elements above overlay backdrop
Dialog40Modals, dialogs, toasts
Top50Critical system elements, announcements
Breakpoints
XS
400px
Extra small
SM
639px
Small / portrait
MD
640px
Tablet start
LG
750px
Large tablet
XL
767px
Tablet end
2XL
768px
Desktop start
3XL
1023px
Desktop
BP-8
1024px
Wide desktop
BP-9
1200px
Large desktop
BP-10
1279px
Near XL
BP-11
1280px
XL desktop
BP-12
1400px
Wide layout
BP-13
1536px
2K / QHD
BP-14
1920px
Full HD
BP-15
2200px
Ultra-wide
Opacity
Opacity Tokens
8 tokens — 0.07 → 0.80
Ghost
7% · ×11
Faint
20% · ×1
Dim
30% · ×7
Light
35% · ×1
Muted
40% · ×6
Half
60% · ×5
Soft
65% · ×2
Strong
80% · ×1
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
Red 2White6.29:1AA
Red 2Black3.34:1AA Large
Red 2Light Gray4.81:1AA
Red 2Blue1.01:1Fail
Red 2Dark Gray2.85:1Fail
White 2White1.04:1Fail
White 2Black20.12:1AAA
White 2Light Gray1.25:1Fail
White 2Blue5.94:1AA
White 2Dark Gray17.18:1AAA
CSS Variables Reference
Background Colors 8 tokens
White--color-white#FFFFFF
Black--color-black#000000
Light Gray--color-light-gray#E1E1E1
Blue--color-blue#004BFA
Dark Gray--color-dark-gray#171717
Red--color-red#E11D48
Dark Gray 5--color-dark-gray-5#1F1F1F
Dark Gray 7--color-dark-gray-7rgba(23,23,23,.4)
Text, Border & Fill Colors 34 tokens
Red 2--color-red-2#BE123C
White 2--color-white-2#FAFAFA
Dark Gray 6--color-dark-gray-6rgba(23,23,23,.1)
Light Cyan--color-light-cyanrgba(168,232,226,.1)
Blue 2--color-blue-2#006FCF
Blue 3--color-blue-3#3086C8
Dark Gray 2--color-dark-gray-2#1D1C1C
Dark Gray 3--color-dark-gray-3#231F20
Dark Gray 4--color-dark-gray-4#232323
Red 3--color-red-3#EB001B
Dark Blue--color-dark-blue#1E3764
Orange--color-orange#F48120
Green--color-green#34A853
Typography 68 tokens
Body Font--font-family-2BugattiRegular
Display Font--font-family-3BugattiBold
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
Black--font-weight-black900
Caption--font-size-2xs10px
XS--font-size-xs11.83px
SM--font-size-sm12px
Base--font-size-base12.82px
Body--font-size-5xl16px
Body LG--font-size-20px20px
Heading 24--font-size-24px24px
Heading 30--font-size-30px30px
Heading 32--font-size-32px32px
Heading 38--font-size-38px38.16px
Display 54--font-size-54px53.59px
Display 75--font-size-75px75px
Tight--letter-spacing-tight−3px
Normal--letter-spacing-normal−2.14px
Wide--letter-spacing-wide−1.14px
LS-13--letter-spacing-ls-13−0.4px
LS-14--letter-spacing-ls-14+1px
Spacing 34 tokens
Space 1--space-11.91px
Space 2--space-22px
Space 5--space-54px
Space 8--space-85px
Space 10--space-106px
Space 16--space-168px
Space 40--space-4014px
Space 48--space-4816px
Space 80--space-8018px
Space 96--space-9620px
Space 128--space-12822px
Space 192--space-19224px
Space 256--space-25626px
Space 23--space-2328px
Space 24--space-2430px
Space 25--space-2532px
Space 26--space-2635px
Space 27--space-2736px
Space 28--space-2840px
Space 29--space-2948px
Space 30--space-3052px
Space 31--space-3156px
Space 32--space-3260px
Space 33--space-3370px
Space 34--space-3472px
Space 35--space-3595.41px
Space 36--space-36100px
Borders & Radius 21 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Bottom Round SM--radius-sm0 0 16px 16px
Right Pill--radius-md0 34px 34px 0
Bottom Round XL--radius-xl0 0 8px 8px
Small--radius-2xl6px
Top Round--radius-full8px 8px 0 0
Medium--radius-r710px
Card--radius-r811.93px
Large--radius-r1112px
XL--radius-r1317.88px
Left Pill--radius-r1534px 0 0 34px
Circle--radius-r1750%
Super Pill--radius-r1860px
Infinity--radius-r19∞
Motion, Opacity & Layers 30 tokens
Instant--duration-instant100ms
Fast--duration-fast200ms
Normal--duration-normal250ms
Slow--duration-slow300ms
Slower--duration-slower500ms
600ms--duration-duration-6600ms
700ms--duration-duration-7700ms
800ms--duration-duration-8800ms
1s--duration-duration-91000ms
2s--duration-duration-102000ms
No easing tokens detected — uses custom cubic-bezier easing in site CSS.
Ghost--opacity-77%
Faint--opacity-2020%
Dim--opacity-3030%
Muted--opacity-4040%
Half--opacity-6060%
Strong--opacity-8080%
Deep Background--z-1-100
Behind--z-2-1
Base--z-31
Raised--z-42
Above--z-53
Navigation--z-610
Popover--z-720
Drawer--z-825
Overlay--z-930
Above Overlay--z-1035
Dialog--z-1140
Top--z-1250
Design System Preview · Official Bugatti Store (Dark) · Generated 14/04/2026 · 42 color tokens · 24 font-size · 3 font-family · 4 font-weight · 23 line-height · 14 letter-spacing · 34 spacing · 19 radius · 2 border-width · 2 shadow · 10 duration · 0 easing · 12 z-index · 15 breakpoint · 8 opacity