Lamborghini — Style Reference

> Lamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black — true, uncompromising black (`#000000`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (`#FFC000`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.

**Theme:** light

**Source website:** [https://www.lamborghini.com/](https://www.lamborghini.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| color 1 | `#000000` | `--color-color-1` | color 1 role extracted from the source design |

| color 2 | `#FFC000` | `--color-color-2` | color 2 role extracted from the source design |

| pure white | `#FFFFFF` | `--color-pure-white` | pure white role extracted from the source design |

| dark gold | `#917300` | `--color-dark-gold` | dark gold role extracted from the source design |

| gold text | `#FFCE3E` | `--color-gold-text` | gold text role extracted from the source design |

| cyan pulse | `#29ABE2` | `--color-cyan-pulse` | cyan pulse role extracted from the source design |

| link blue | `#3860BE` | `--color-link-blue` | link blue role extracted from the source design |

| charcoal | `#202020` | `--color-charcoal` | charcoal role extracted from the source design |

| dark iron | `#181818` | `--color-dark-iron` | dark iron role extracted from the source design |

| overlay black | `rgba(0,0,0,0.7)` | `--color-overlay-black` | overlay black role extracted from the source design |

| near white | `#F8F8F8` | `--color-near-white` | near white role extracted from the source design |

| mist | `#E6E6E6` | `--color-mist` | mist role extracted from the source design |

| smoke | `#F5F5F5` | `--color-smoke` | smoke role extracted from the source design |

| graphite | `#494949` | `--color-graphite` | graphite role extracted from the source design |

| ash | `#7D7D7D` | `--color-ash` | ash role extracted from the source design |

| steel | `#969696` | `--color-steel` | steel role extracted from the source design |

| slate | `#666666` | `--color-slate` | slate role extracted from the source design |

| iron | `#555555` | `--color-iron` | iron role extracted from the source design |

| shadow | `#313131` | `--color-shadow` | shadow role extracted from the source design |

| teal action | `#1EAEDB` | `--color-teal-action` | teal action role extracted from the source design |

| color 21 | `#DDDDDD` | `--color-color-21` | color 21 role extracted from the source design |

| color 22 | `rgba(0,0,0,0.5)` | `--color-color-22` | color 22 role extracted from the source design |

| color 23 | `rgba(0,0,0,0.25)` | `--color-color-23` | color 23 role extracted from the source design |

Tokens — Typography

Inter, system-ui, sans-serif · `--font-primary`

Default for everything — buttons, cards, containers, images · `--font-family-2`

Subtle span elements · `--font-family-3`

Badges, close buttons, cookie elements — barely perceptible · `--font-family-4`

Toggle switches only — the sole rounded element · `--font-family-5`

Type Scale

| Role | Size | Line Height | Letter Spacing | Token |

|---|---|---|---|---|

| label | 0.96px | 1.5 | 0 | `--text-label` |

| micro | 0.225px | 1.5 | 0 | `--text-micro` |

| 0px | 0px | 1.5 | 0 | `--text-0px` |

| 1px | 1px | 1.5 | 0 | `--text-1px` |

| 2px | 2px | 1.5 | 0 | `--text-2px` |

| 20px | 20px | 1.5 | 0 | `--text-20px` |

Tokens — Spacing & Shapes

**Density:** comfortable

Spacing Scale

| Name | Value | Token |

|---|---|---|

| 4 | 4px | `--spacing-4` |

| 8 | 8px | `--spacing-8` |

| 12 | 12px | `--spacing-12` |

| 16 | 16px | `--spacing-16` |

| 20 | 20px | `--spacing-20` |

| 24 | 24px | `--spacing-24` |

| 32 | 32px | `--spacing-32` |

| 40 | 40px | `--spacing-40` |

| 48 | 48px | `--spacing-48` |

| 80 | 80px | `--spacing-80` |

| 96 | 96px | `--spacing-96` |

Border Radius

| Name | Value | Token |

|---|---|---|

| sm | 0px | `--radius-sm` |

| md | 1px | `--radius-md` |

| lg | 2px | `--radius-lg` |

| xl | 4px | `--radius-xl` |

Layout

Components

buttons

**Role:** buttons component

cards containers

**Role:** cards containers component

inputs forms

**Role:** inputs forms component

navigation

**Role:** navigation component

image treatment

**Role:** image treatment component

distinctive components

**Role:** distinctive components component

Do's and Don'ts

Do

Don't

Layout

Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.lamborghini.com/).