# 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`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 0.96px, 0.225px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### Default for everything — buttons, cards, containers, images · `--font-family-2`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 0px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### Subtle span elements · `--font-family-3`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 1px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### Badges, close buttons, cookie elements — barely perceptible · `--font-family-4`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 2px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### Toggle switches only — the sole rounded element · `--font-family-5`
- **Substitute:** Inter, system-ui, sans-serif
- **Weights:** 400
- **Sizes:** 20px
- **Line height:** 1.5
- **Letter spacing:** 0
- **Role:** Brand typography family observed across the documented type scale.

### 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

- **Section gap:** 64px
- **Card padding:** 24px
- **Element gap:** 16px
- **Max content width:** 1200px

## Components

### buttons
**Role:** buttons component

- **description:** `Buttons treatment documented in the source analysis.`

### cards containers
**Role:** cards containers component

- **description:** `Cards & Containers treatment documented in the source analysis.`

### inputs forms
**Role:** inputs forms component

- **description:** `Inputs & Forms treatment documented in the source analysis.`

### navigation
**Role:** navigation component

- **description:** `Navigation treatment documented in the source analysis.`

### image treatment
**Role:** image treatment component

- **description:** `Image Treatment treatment documented in the source analysis.`

### distinctive components
**Role:** distinctive components component

- **description:** `Distinctive Components treatment documented in the source analysis.`

## Do's and Don'ts

### Do

- Use the documented primary token for the brand's primary interaction treatment.
- Keep page surfaces anchored to the documented canvas token.
- Preserve every typography style's documented size, line height, and letter spacing.
- Compare major implementation decisions against [the live Lamborghini website](https://www.lamborghini.com/).

### Don't

- Do not introduce colors outside the documented color token set.
- Do not replace `--color-gold-text` with an arbitrary neutral.
- Do not flatten documented component states or spacing relationships.
- Do not treat this extracted snapshot as newer than the live source website.

## 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/).