Extracted · 9 sections · 17 colors · grade C
lamborghini.com
Accent #5e6ad2 · LamboType — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.
17
colors
2
faces
7
keyframes
25
breakpoints
rendu réel · source de vérité
lamborghini.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(41, 171, 226) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside LamboType as the primary typeface. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 7 keyframe animations plus transition-driven interactions.
01
Color — roles, semantics & the full census
17 colors measured · click any swatch to copy
Semantic states
error#dc3545success#28a745warning#dfb400info#17a2b8
4 semantic roles found.
17 colors mined from the live renderexpand
02
Type — the ladder, in the real face
5 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy
display xl
display-xl120px · 400
headline
headline40px · 400 · ×3.00
body
body10px · 400 · ×4.00
caption sm
caption-sm10px · 400 · ×1.00
button
button32px · 400 · ×0.31
03
Spacing & radius, made spatial
9 spacing steps · 7 radii · bars are exact px widths
Spacing scale
xxs · 2px
xs · 4px
sm · 8px
md · 12px
base · 16px
lg · 24px
xl · 32px
2xl · 48px
3xl · 64px
Radius
none
0px
0px
xs
4px
4px
sm
8px
8px
md
14px
14px
lg
20px
20px
xl
32px
32px
full
9999px
9999px
05
Motion — easings, transitions & live keyframes
3 easing curves · 7 keyframes · hover a tile to preview
Easing & transitions
transition-2linear
transition-3ease-out
transition-4ease-in-out
7 keyframe animations extracted
swiper-preloader-spin
fadeIn
animation-115gyof
line
sk-scaleout
onetrust-fade-in
slide-down-custom
06
Components — the closed vocabulary
12 component families · 66 variants counted on the live DOM
| Component | Variants found |
|---|---|
| buttons | ×10 |
| cards | ×10 |
| tabs | ×10 |
| links | ×10 |
| nav Links | ×6 |
| heading H3 | ×5 |
| badges | ×4 |
| footer Links | ×4 |
| cta Banner | ×2 |
| heading H2 | ×2 |
| heading H4 | ×2 |
| heading H1 | ×1 |
Component style specs (§4)expand
Buttons
Ghost
- Background:
transparent - Text:
#ffffff{colors.primary-focus} - Padding: 8px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: backgroundColor:
#181818, color:#c4c4c4, border:0px none rgb(196, 196, 196) - Focus: outline:
rgb(255, 255, 255) none 0px
Outline
- Background:
transparent - Text:
#ffffff{colors.primary-focus} - Padding: 16px
- Radius: 0px
- Border: 1px solid rgb(255, 255, 255)
- Font: 32px weight 400
- Use: Secondary action with border
- Hover: backgroundColor:
#181818, color:#c4c4c4, border:0px none rgb(196, 196, 196) - Focus: outline:
rgb(255, 255, 255) none 0px
Ghost
- Background:
transparent - Text:
#ffffff{colors.primary-focus} - Padding: 16px 0px
- Radius: 0px
- Font: 18px weight 400
- Use: Subtle action, toolbar, nav button
- Hover: backgroundColor:
#181818, color:#c4c4c4, border:0px none rgb(196, 196, 196) - Focus: outline:
rgb(255, 255, 255) none 0px
Icon Button
- Background:
transparent - Text:
#000000 - Padding: 2px
- Radius: 0px
- Font: 16px weight 400
- Use: Toolbar/UI icons
- Hover: backgroundColor:
#181818, color:#c4c4c4, border:0px none rgb(196, 196, 196) - Focus: outline:
rgb(255, 255, 255) none 0px
CTA Banners
Full-width CTA
- Background:
#ffffff{colors.primary-focus} - Text:
#000000 - Padding: 24px
- Radius: 0px
- Font: 16px weight 400
- Use: Full-width conversion strip with headline + button
- Hover: backgroundColor:
#181818, color:#c4c4c4, border:0px none rgb(196, 196, 196) - Focus: outline:
rgb(255, 255, 255) none 0px
07
Layout — structure & dimensions
4 layout metrics measured
max Width1200px
header Height104px
sidebar Width0px
container Padding0px
08
Responsive — real breakpoints
24 media-query stops read from the live CSS
400px
425px
426px
450px
476px
530px
550px
575px
576px
600px
767px
768px
769px
890px
896px
897px
991px
992px
1023px
1024px
1199px
1200px
1280px
1440px
09
Do's & Don'ts
15 enforceable rules pulled verbatim from the spec
Do
Use Near-Black (`#202020`) for text — not pure black, it's warmer and more readable
Use LamboType as the primary typeface — it defines the brand personality
The system uses a single text weight (400) — hierarchy comes from size and color, not weight
Use Sky Bright (`#29abe2`) as the primary accent — it's the brand's signature interactive color
Maintain nav height at 104px — consistent vertical space for the navigation bar
Transition button background to Near-Black (`#181818`) on hover — this is the extracted interactive state
Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
Each card includes a top image — imagery is part of the card identity, not optional
Don't
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't introduce bolder or lighter weights — 400 is the only weight in this system
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
Don't use opacity or brightness filter for button hover — the design uses an explicit background color change
Don't make the nav sticky — this design lets it scroll away to maximize content focus
10
Agent guide & export
Paste-ready prompt + the real files behind this page
Build a UI in the lamborghini.com design system.
Canvas #ffffff · ink #202020 · accent #29abe2.
Type: LamboType — respect the size/weight ladder in §3.
Radius, spacing, shadow: use only the extracted scales (no magic numbers).
Full spec follows — paste the DESIGN.md below into your agent.
Every value above was getComputedStyle-verified.