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.

The hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a "MENU" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.

Typography is the voice of this darkness. LamboType — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.

**Key Characteristics:**

| Role | Size | Weight | Line Height | Letter Spacing | Notes |

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

| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |

| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |

| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |

| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |

| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |

| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |

| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |

| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |

| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |

| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |

| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |

| Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |

| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |

| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |

All buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.

**Gold Accent CTA** — The primary action:

**Transparent Ghost** — The secondary action on dark backgrounds:

**White Filled** — Light-mode primary:

**Black Filled** — Dark filled variant:

**Gray Neutral** — Subtle action:

Lamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.

| Value | Context |

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

| 0px | Default for everything — buttons, cards, containers, images |

| 1px | Subtle span elements |

| 2px | Badges, close buttons, cookie elements — barely perceptible |

| 20px | Toggle switches only — the sole rounded element |

| Level | Treatment | Use |

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

| Level 0 (Abyss) | `#000000` flat | Page background, deepest layer |

| Level 1 (Surface) | `#181818` or `#202020` | Cards, content panels, elevated sections |

| Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrops, video dimming |

| Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlays, hover states |

| Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |

Lamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: `#000000` → `#181818` → `#202020` → `#494949`. This "darkness gradient" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.

| Name | Width | Key Changes |

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

| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |

| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |

| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |

| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |

| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |

| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |

| Wide | >1440px | Content centered, margins expand, hero fills viewport |

When refining existing screens generated with this design system:

1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive

2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors

3. Use natural language descriptions, not CSS values — "sharp-cut golden rectangle" not "border-radius: 0px; background: #FFC000"

4. Describe the desired "feel" alongside specific measurements — "floating in total darkness" communicates the black canvas better than "background: #000000"

5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be