---
title: "Lamborghini design system"
variant: extended
source: https://www.lamborghini.com/en-en
captured_at: 2026-10-12
theme: light
industry: automotive
generator: Design DNA (https://four.wiralomi.com/style/lamborghini-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Lamborghini · Design System

> Automotive drama, refined by restraint

**Theme:** light · **Industry:** automotive · **Source:** https://www.lamborghini.com/en-en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Lamborghini’s homepage pairs cinematic vehicle imagery with restrained typography and sharply contrasting light and dark sections. Spacious model discovery and configuration experiences keep the cars, rather than decorative interface elements, at the center.

## North star

Let cinematic vehicle imagery lead, and use restrained typography, stark contrast, and minimal controls to keep attention on the car.

## Overview

The visual strategy balances a Gallery White (#ffffff) canvas and near-black sections with cinematic full-bleed vehicle imagery. Ink (#000000) anchors the footer and dark product configurator; Carbon (#181818) provides a softer dark surface. Pale text creates contrast over media, while the two measured gold accents distinguish model exploration from configuration actions. LamboType carries the system across navigation, headings, body copy, and buttons: headings are uppercase and tightly composed, with an especially condensed display treatment for the hero model name. The page moves from a dramatic video hero into a spacious white model carousel, then a dealer locator image band and a dark configuration showcase. Generous measured section spacing gives the imagery room, while model tabs, restrained rules, and simple square-corner controls keep navigation legible. Photography and rendered vehicle imagery dominate; interface chrome stays quiet and flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Main canvas, white model-discovery section, and reversed text or controls over dark media. |
| Obsidian | `#000000` | `--color-obsidian` | surface | Footer background, dark configurator base, and primary text or links on light sections. |
| Carbon | `#181818` | `--color-carbon` | surface | Secondary dark surface and subtle dark-to-transparent media overlay. |
| Mist White | `#f5f5f5` | `--color-mist-white` | neutral | Light text on dark surfaces, especially footer and media-led areas. |
| Antique Gold | `#917300` | `--color-antique-gold` | accent | Explore the Model button on the white model carousel. |
| Signal Gold | `#ffc000` | `--color-signal-gold` | accent | Start Configuration emphasis and small interactive accents. |
| Steel Gray | `#7d7d7d` | `--color-steel-gray` | neutral | Measured borders and subdued button or navigation outlines. |
| Graphite Gray | `#494949` | `--color-graphite-gray` | neutral | Secondary navigation details, text, and dark interface borders. |
| Ash Gray | `#969696` | `--color-ash-gray` | neutral | Low-emphasis button details and muted interface text. |
| Silver Mist | `#dcdcdc` | `--color-silver-mist` | neutral | Subdued footer copy and secondary light-surface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Obsidian) · `--color-surface-2` → `#181818` (Carbon) · `--color-text` → `#000000` (Obsidian) · `--color-text-muted` → `#f5f5f5` (Mist White) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#7d7d7d` (Steel Gray) · `--color-accent` → `#917300` (Antique Gold) · `--color-accent-2` → `#ffc000` (Signal Gold) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#181818` | 1.18:1 | fail |
| `#f5f5f5` | `#ffffff` | 1.09:1 | fail |
| `#f5f5f5` | `#000000` | 19.26:1 | AAA |
| `#f5f5f5` | `#181818` | 16.29:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#181818` | 17.76:1 | AAA |
| `#917300` | `#ffffff` | 4.51:1 | AA |
| `#917300` | `#000000` | 4.66:1 | AA |
| `#917300` | `#181818` | 3.94:1 | AA-large |

### Gradients

- `linear-gradient(rgb(24, 24, 24), rgba(24, 24, 24, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| LamboType | `--font-body` | webfont | 400 | Site-wide display, headings, navigation, body copy, captions, and buttons. | Barlow Condensed |

- **LamboType:** Measured weight 400 throughout. Headings and navigation use uppercase; body and captions stay sentence case. Hero display is markedly condensed.

### Type scale — Golden Ratio (ratio ≈ 1.655, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 400 | 0.92 | 0 | uppercase | LamboType | Oversized uppercase hero model name. |
| h1 | 80px | 400 | 1.13 | 0 | uppercase | LamboType | Primary feature and model-section headlines. |
| h2 | 40px | 400 | 1.15 | 0 | uppercase | LamboType | Section titles and prominent feature headings. |
| h3 | 27px | 400 | 1.37 | 0 | uppercase | LamboType | Model names and compact subsection headings. |
| body | 16px | 400 | 1.63 | 0 | — | LamboType | Standard descriptions, explanatory copy, and supporting content. |
| caption | 12px | 400 | 1.83 | 0 | — | LamboType | Vehicle disclaimers and fine-print details. |
| button | 16px | 400 | 1.63 | 0 | uppercase | LamboType | Uppercase CTA labels and action controls. |
| nav | 16px | 400 | 1.63 | 0 | uppercase | LamboType | Uppercase main navigation and model tabs. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 48, 80 px.
- Section rhythm 80px · element gap 24px · card padding — · max content width 1296px.

The page uses broad full-bleed media bands alternating with a white model carousel and a dark configurator. Measured page max width is 1296px, with a comfortable density and an 8px base spacing unit. Sections are separated by a measured 80px rhythm and elements commonly use 24px gaps. The hero aligns copy to the lower left and places its CTA opposite; model content is centered, while the configuration section aligns copy left beside the vehicle. The footer shifts to a compact two-column information layout.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-out` on interactive elements.

The interface is largely flat, with no measured shadow system or rounded component radii. Strong contrast between white and dark sections provides depth, while full-bleed media and dark overlays create layering. Thin gray borders and understated underlines separate tabs and utility controls without adding card-like elevation.

## Imagery

Large cinematic video and photographic or rendered vehicle imagery carry the page. The hero crops close to the car and applies a darkened, cool-toned treatment so white type remains clear. Model presentation isolates side-profile vehicles against white, while the dealer locator uses a full-width real-world setting. The configurator places a high-detail vehicle render against a nearly black field.

## Components

### Hero navigation

Minimal overlay navigation with menu at left, centered brand mark, and search icon at right; use light controls over dark media.

### Cinematic hero

Full-bleed video with lower-left uppercase campaign copy and a white rectangular Discover More action.

### Model carousel

White model showcase with centered vehicle imagery, adjacent carousel controls, model tabs, and a fine-print disclaimer.

### Model actions

Square-corner CTAs pair Antique Gold (#917300) exploration with Signal Gold (#ffc000) configuration emphasis where measured.

### Dealer locator band

Full-width location photography with a large light heading and a compact white Find Your Dealer control.

### Configuration showcase

Dark Carbon and Obsidian feature band with vehicle tabs, oversized model title, configuration actions, and a vehicle render.

### Footer

Black two-column utility and social links followed by fine-print legal copy and a centered brand mark.

### Measured component styles

- **Primary button** (“EXPLORE THE MODEL”): background #917300 · text #ffffff · radius 0px · padding 24px · 400 16px LamboType
- **Secondary button** (“START CONFIGURATION”): background #ffc000 · text #000000 · radius 0px · padding 24px · 400 16px LamboType
- **Link** (“DISCOVER ALL MODELS”): transparent background · text #000000 · radius 0px · padding 24px 0px · 400 16px LamboType
- **Navigation item** (“MENU”): transparent background · text #202020 · radius 0px · padding 0px 12px · 400 16px LamboType

## Do

- Use cinematic vehicle media as the primary visual anchor.
- Alternate bright discovery areas with near-black feature sections.
- Keep headings uppercase and visually assertive.
- Reserve gold accents for meaningful model actions.
- Use square-corner, low-chrome controls.
- Give full-width imagery and section transitions room to breathe.

## Don't

- Do not add rounded cards or decorative shadows.
- Do not let interface controls compete with the vehicle imagery.
- Do not introduce unmeasured brand colors.
- Do not use playful or casual typography.
- Do not compress the page into a dense card grid.
- Do not place dark text over dark media without contrast.

## Agent prompt

Build a new luxury automotive page using Lamborghini’s restrained, cinematic visual language. Use Gallery White (#ffffff) for open discovery areas, Obsidian (#000000) and Carbon (#181818) for dark feature sections, and Mist White (#f5f5f5) for reversed text. Keep Antique Gold (#917300) and Signal Gold (#ffc000) reserved for prominent vehicle actions. Use a condensed display-style sans such as Barlow Condensed to approximate LamboType; set large headings in uppercase and keep body text simple. Lead with full-bleed vehicle photography or video, then alternate spacious light sections and dark product showcases. Align copy with clear editorial intent, keep controls square and quiet, and use fine borders rather than shadows. Prioritize the vehicle, preserve generous section breathing room, and avoid decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport video hero; menu and search flank a centered mark, with copy low left and CTA opposite. | video backdrop, primary discovery CTA | overlay navigation, uppercase display title, white rectangular button |
| 2 | category-nav | Spacious white transition band with a section label on the left and an all-models link on the right. | browse all models | minimal section heading, understated text link |
| 3 | product-showcase | Centered carousel on white, with vehicle imagery, model selectors, and actions arranged below. | carousel controls, model selection, configuration actions | gold CTA, thin tab underline, fine-print disclaimer |
| 4 | contact | Full-width photographic band with heading and locator action aligned over the image. | dealer lookup | image overlay, white text, compact light CTA |
| 5 | product-detail | Dark full-width configurator with model tabs, left-aligned copy and actions, and car render to the right. | model switching, start configuration, enquire | dark background, gold action button, vehicle render |
| 6 | footer | Black footer with compact two-column navigation, social links, and stacked legal copy separated by fine rules. | site navigation, social links, legal information | white and muted text, thin separators, centered brand mark |

## Source CSS custom properties (selected)

```css
--global-brand-brand-1: #ffffff;
--global-brand-brand-2: #000000;
--surface-surface-1: #181818;
--surface-surface-2: #313131;
--surface-surface-3: #494949;
--surface-surface-0: #000000;
--typography-text-1: #f5f5f5;
--typography-text-2: #dcdcdc;
--typography-text-3: #c4c4c4;
--typography-text-4: #ababab;
--typography-text-5: #969696;
--typography-label-accent-1: #ffc000;
--interactive-base-base-focus-border: #1e90ff;
--interactive-accent-accent-default: #ffc000;
--interactive-accent-accent-hover: #997300;
--interactive-accent-accent-focus: #ffc000;
--interactive-accent-accent-pressed: #cc9a00;
--on-surface-base-on-surface-1: #ffffff;
--on-surface-base-on-surface-2: #f5f5f5;
--on-surface-base-on-surface-3: #c4c4c4;
--on-surface-base-on-surface-4: #7d7d7d;
--on-surface-base-on-surface-5: #181818;
--on-surface-base-on-surface-6: #000000;
--on-surface-signal-on-surface-signal-alert: #e62d37;
--on-surface-signal-on-surface-signal-warning: #ff822d;
--on-surface-signal-on-surface-signal-info: #2d73d7;
--on-surface-signal-on-surface-signal-success: #37d200;
--scale-spacing-0: 0.25rem;
--scale-spacing-1: 0.5rem;
--scale-spacing-2: 1rem;
--scale-spacing-3: 1.5rem;
--scale-spacing-4: 2rem;
--scale-spacing-5: 2.5rem;
--scale-spacing-6: 3rem;
--scale-spacing-7: 3.5rem;
--scale-spacing-8: 4rem;
--scale-spacing-none: 0rem;
--scale-spacing-9: 4.5rem;
--scale-spacing-10: 5rem;
--scale-spacing-11: 5.5rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lamborghini-com