Automobili Lamborghini
Design System · 38 colors · 57 type tokens · 20 spacing steps · 13 motion tokens · 25 breakpoints
April 2026
Color Palette
Background Colors
Black
#000000
Dark Gray 3
#181818
Dark Gray
#202020
Dark Gray 9
#525252
Mid Gray 2
#7D7D7D
Mid Gray
#969696
Light Gray
#F2F1F1
White 3
#F8F8F8
White
#FFFFFF
Dark Yellow
#917300
Brand & Accent Colors
Yellow
#FFC000
Orange
#FFCE3E
Cyan
#29ABE2
Cyan 2
#32AE88
Dark Blue
#27455C
Blue
#3860BE
Text Colors
White 2
#F5F5F5
Dark Gray 2
#313131
Dark Gray 6
#494949
Dark Gray 4
#555555
Dark Gray 8
#656565
Mid Gray 3
#696969
Border Colors
Light Gray 2
#DDDDDD
Light Gray 6
#D8D8D8
Light Gray 7
#D1D1D1
Light Gray 5
#C1C1C1
Light Gray 8
#BBBBBB
Cyan 2
#32AE88
Typography
Primary Font · LamboType Variable
LamboType
Lamborghini — Where Performance Meets Art
Light · 300 Regular · 400 Medium · 500 Semibold · 600 Bold · 700
Secondary Font · Open Sans
Open Sans
Precision engineering. Superior design. Every detail matters.
Regular · 400 Semibold · 600 Bold · 700
URUS SE
Display Hero · 80px · Light · line-height: 90px · letter-spacing: −0.42px
Huracán
Heading XL · 54px · Light · line-height: 64px · letter-spacing: −0.36px
Revuelto
Heading Large · 40px · Regular · line-height: 46px
V12 Hybrid Architecture
Heading Medium · 27px · Regular · line-height: 37px
The Revuelto redefines what a super sports car can be, combining the iconic naturally aspirated V12 with a revolutionary plug-in hybrid system.
Body Large · 18px · Regular · line-height: 28px
Discover the complete range of Lamborghini supercars, SUVs and open-top models.
Body Default · 16px · Regular · line-height: 24px
Engine output · 1001 CV · 0-100 km/h in 2.5 sec · Top speed: 350+ km/h
Body Small · 14px · Regular · line-height: 20px
SPECIFICATIONS · PERFORMANCE · CONFIGURATOR
Caption / Label · 10px · Semibold · line-height: 14px · letter-spacing: 0.96px
Line Heights
Tight
10px
Normal
12px
Relaxed
16px
Loose
20px
Spacious
24px
Open
28px
Heading
37px
Display
46px
Hero
64px
Grand
70px
Monumental
90px
Letter Spacing
Lamborghini
Tight
−0.42px · display headlines
Performance
Wide
0.16px · body / subheadings
MODEL
Widest
0.96px · uppercase labels
Spacing
Spacing Scale
20 tokens — 4px → 439px
4
8
12
16
24
32
40
48
50
56
64
78
80
86
160
260+
Borders
Border Radii
Small
1px
Medium
2px
Large
2.5px
X-Large
3px
2X-Large
17px
Full
20px
R7
50px
R8 / Circle
100%
Border Widths
Hairline
1px · ×252
Thin
2px · ×11
Base
12px · ×4
Shadow / Elevation
Shadow Tokens
5 tokens
Small
×1
rgb(128,128,128) 0px 0px 5px · subtle depth
Medium
×1
rgba(0,0,0,.2) 0px 0px 18px · cards, panels
Large
×1
rgb(153,153,153) 2px 10px −3px · elevated surfaces
Z-Index
LayerValueUsage
z-1 (Background)-1000Background decorative elements, off-canvas layers
z-2 (Base)1Default content layer
z-7 (Navigation)10Sticky navigation bars
z-11 (Overlay)20Dropdowns, popovers
z-12 (High)99Fixed banners, tooltips
z-13 (Modal)100Modal dialogs
z-15 (Toast)999Notifications, toast messages
z-16 (Urgent)1010Critical overlays
z-17 (Top)1040Max context menus
z-18 (Apex)9999Loading screens, critical alerts
z-21 (Max)2147483647Absolute highest layer (INT_MAX)
Breakpoints
XS
400px
SM
425px
MD
426px
LG
450px
XL
476px
2XL
530px
3XL
550px
BP-9
576px
BP-13
768px
BP-19
992px
BP-21
1024px
BP-23
1200px
BP-24
1280px
BP-25
1440px
25 breakpoints defined — from 400px (mobile) through 1440px (wide desktop). Fine-grained responsiveness across all viewports.
Opacity
Opacity Scale
18 tokens — 0.10 → 0.99
Ghost
10%
Faint
25%
Dim
40%
Half
50%
Muted
60%
Soft
73%
Strong
82%
Near Full
90%
Opaque
95%
Full
99%
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
White 2 (#F5F5F5)Black (#000000)19.26:1AAA
White 2 (#F5F5F5)Dark Gray (#202020)14.94:1AAA
White 2 (#F5F5F5)Dark Gray 3 (#181818)16.29:1AAA
White 2 (#F5F5F5)White (#FFFFFF)1.09:1Fail
White 2 (#F5F5F5)Mid Gray (#969696)2.71:1Fail
Dark Gray 2 (#313131)White (#FFFFFF)13.01:1AAA
Dark Gray 2 (#313131)Mid Gray (#969696)4.4:1AA Large
Dark Gray 2 (#313131)Black (#000000)1.61:1Fail
Dark Gray 4 (#555555)White (#FFFFFF)7.46:1AAA
Dark Gray 4 (#555555)Black (#000000)2.82:1Fail
Dark Gray 6 (#494949)White (#FFFFFF)9.0:1AAA
Dark Gray 6 (#494949)Mid Gray (#969696)3.04:1AA Large
Dark Gray 7 (#2F2F2F)White (#FFFFFF)13.39:1AAA
Dark Gray 7 (#2F2F2F)Mid Gray (#969696)4.53:1AA
CSS Variables Reference
Background Colors 19 tokens
Black--color-black#000000
Dark Gray 3--color-dark-gray-3#181818
Dark Gray--color-dark-gray#202020
Dark Gray 10--color-dark-gray-10#424242
Dark Gray 9--color-dark-gray-9#525252
Dark Gray 11--color-dark-gray-11#666666
Mid Gray 2--color-mid-gray-2#7D7D7D
Mid Gray--color-mid-gray#969696
Dark Yellow--color-dark-yellow#917300
Yellow--color-yellow#FFC000
Light Gray 4--color-light-gray-4#E6E6E6
Light Gray--color-light-gray#F2F1F1
White 3--color-white-3#F8F8F8
White--color-white#FFFFFF
Cyan--color-cyan#29ABE2
Dark Blue--color-dark-blue#27455C
Blue--color-blue#3860BE
Dark Blue 2--color-dark-blue-2#2E3644
White 4--color-white-4#F9FFFA
Text, Border & Shadow Colors 19 tokens
White 2 (Text Primary)--color-white-2#F5F5F5
Dark Gray 2--color-dark-gray-2#313131
Dark Gray 6--color-dark-gray-6#494949
Dark Gray 4--color-dark-gray-4#555555
Dark Gray 8--color-dark-gray-8#656565
Mid Gray 3--color-mid-gray-3#696969
Dark Gray 7--color-dark-gray-7#2F2F2F
Dark Gray 5--color-dark-gray-5#333333
Orange (Text Accent)--color-orange#FFCE3E
Light Gray 2 (Border)--color-light-gray-2#DDDDDD
Light Gray 5 (Border)--color-light-gray-5#C1C1C1
Light Gray 6 (Border)--color-light-gray-6#D8D8D8
Light Gray 7 (Border)--color-light-gray-7#D1D1D1
Light Gray 8 (Border)--color-light-gray-8#BBBBBB
Cyan 2 (Border)--color-cyan-2#32AE88
Light Gray 3 (Shadow)--color-light-gray-3#C7C5C7
Mid Gray 4 (Shadow)--color-mid-gray-4#808080
Mid Gray 5 (Shadow)--color-mid-gray-5#999999
Typography 57 tokens
LamboType Variable--font-family-2LamboType
Open Sans (Secondary)--font-family-3Open Sans
Sans-serif (Base)--font-family-basesans-serif
Light--font-weight-light300
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
2xs--font-size-2xs7.33px
xs--font-size-xs8.8px
sm--font-size-sm10px
base--font-size-base11px
16px--font-size-16px16px
27px--font-size-27px27px
40px--font-size-40px40px
54px--font-size-54px54px
80px--font-size-80px80px
120px--font-size-120px120px
Tight Tracking--letter-spacing-tight−0.42px
Normal Tracking--letter-spacing-normal−0.36px
Wide Tracking--letter-spacing-wide0.13px
Widest Tracking--letter-spacing-widest0.16px
Max Tracking--letter-spacing-ls-80.96px
Spacing 20 tokens
Space 1--space-14px
Space 2--space-28px
Space 3--space-312px
Space 4--space-416px
Space 5 (SM)--space-524px
Space 6 (MD)--space-632px
Space 8 (LG)--space-840px
Space 10 (XL)--space-1048px
Space 12--space-1250px
Space 16--space-1656px
Space 20 (2XL)--space-2064px
Space 24--space-2478px
Space 32--space-3280px
Space 40--space-4086.5px
Space 48--space-48160px
Space 64--space-64260px
Space 80--space-80296px
Space 128--space-128439px
Borders & Radius 11 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base12px
Small--radius-sm1px
Medium--radius-md2px
Large--radius-lg2.5px
X-Large--radius-xl3px
2X-Large--radius-2xl17px
Full--radius-full20px
R7--radius-r750px
R8 / Circle--radius-r8100%
Motion, Opacity & Layers 35+ tokens
Instant--duration-instant0.1s
Fast--duration-fast0.2s
Normal--duration-normal0.25s
Slow--duration-slow0.3s
Slower--duration-slower0.4s
Extended--duration-duration-60.5s
Cinematic--duration-duration-94s
Ease In-Out--easing-ease-in-outease-in-out
Ease Out--easing-ease-outease-out
Ghost 10%--opacity-100.1
Dim 40%--opacity-400.4
Half 50%--opacity-500.5
Soft 73%--opacity-730.73
Near Full 90%--opacity-900.9
Background--z-1-1000
Base--z-21
Navigation--z-710
Modal--z-13100
Toast--z-15999
Apex--z-189999
Max--z-212147483647
Automobili Lamborghini Design System · Generated 15/04/2026 · 38 color tokens · 57 type tokens · 20 spacing steps · 8 border radii · 3 border widths · 5 shadows · 9 durations · 4 easings · 21 z-index layers · 25 breakpoints · 18 opacity tokens