# Lamborghini · Design system migration spec

> Source: https://www.lamborghini.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a masterclass in using bold typography and immersive photography to define a luxury brand.

## 1. Identity DNA

The digital presence mirrors a high-end automotive showroom: dramatic lighting, bold presence, and a carefully curated environment where the product is the undeniable focal point. Like a flagship dealership, every element serves to frame the performance and precision of the machine itself.

**One-liner:** A premium automotive brand site that uses full-bleed photography and bold condensed typography to convey power and exclusivity.
**Keywords:** Performance · Luxury · Heritage · Exclusivity · Italian
**Analogy:** A high-end automotive magazine brought to life with cinematic photography and brutalist typography.

## 2. Color

The color system operates on a principle of extreme contrast, using a near-black background and white text to let the hero photography dominate. This high-contrast monochrome palette ensures the car remains the most vibrant element on the screen.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#202020` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#969696` | placeholder |
| `--line` | `rgba(255,255,255,1)` | divider |

**Color principle:** High-contrast monochromatic palette that lets the photography carry the brand's energy.

The strict palette enforces a singular focus: the product must provide all the color.

## 3. Typography

Typography carries the brand's authoritative voice, using bold, condensed sans-serif forms for display headlines. The uppercase treatment and tight tracking create a sense of compressed power and uncompromising confidence.

- **Display:** condensed-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.9 | 400 | -2px | Hero headlines and section titles |
| headline | 27px | 1.37 | 400 | normal | Subheadlines and feature callouts |
| body | 16px | 1.5 | 400 | normal | General body copy and navigation |

**Type rules:**
- All typography is uppercase
- Display type uses a custom condensed sans-serif
- Body copy uses a clean humanist sans-serif

## 4. Spacing

Generous vertical rhythm in the hero section establishes a sense of scale and luxury, providing the breathing room that allows the photography to communicate without visual competition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 24px gutter spacing aligns with the base grid.

## 5. Surfaces

Surfaces are defined by sharp, minimal borders rather than shadows or depth cues. This geometric precision reinforces the automotive aesthetic of clean, engineered lines.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid rgba(255,255,255,1) used for outlines and separators.

## 6. Layout

The layout skeleton is fundamentally immersive, built around a full-bleed hero section that consumes the viewport. Content is left-aligned within this field, anchored by a fixed navigation bar that maintains orientation.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed photography with left-aligned text overlays.

## 7. Motion & Interaction

Motion philosophy prioritizes cinematic smoothness over flashy effects, as seen in the seamless transitions between hero slides. Interaction responses are immediate and direct, reinforcing a sense of precision engineering.

- **Durations:** micro 220ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.12, 1.01, 0.17, 0.98)`
- **Patterns:**
  - Smooth background-color and color transitions on hover
  - Slight transform shifts on interactive elements

- **Hover:** Subtle background-color or color shifts
- **Click:** Immediate visual feedback via transform or opacity changes
- **Transition:** All transitions use a 0.3s ease-in-out or a custom cubic-bezier curve
- **Keyboard:** Focus states likely mirror hover states for accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative and confident, matching the premium automotive context. Language is direct and impactful, using bold condensed uppercase for headlines and clean, functional calls to action.

- **Tone:** Confident, aspirational, and minimalist.
- **Headline style:** Short, powerful, all-caps statements.
- **CTA style:** Direct and action-oriented, often accompanied by an arrow.
- **Avoid:** Casual language / Excessive exclamation marks / Long-form paragraphs / Playful emojis

### Don'ts
- ❌ Don't use lowercase for headlines — screenshot shows all typography is uppercase
- ❌ Don't use rounded corners on primary components — screenshot shows sharp edges
- ❌ Don't use vibrant brand colors — screenshot shows a monochromatic palette
- ❌ Don't use script or serif fonts — screenshot shows only sans-serif typography
- ❌ Don't clutter the layout with multiple overlapping elements — screenshot shows clean, spacious layouts
- ❌ Don't use drop shadows on cards — screenshot shows flat, image-driven components

This system deliberately avoids rounded forms, bright accents, and casual language to maintain its sharp, performance-oriented character.

## System Prompt (paste into AI tool)

```
This is a premium automotive brand website. Positioning is luxury and performance, focusing on high-quality photography and minimal UI. Key colors are #000000 for the background and #FFFFFF for the text, creating a high-contrast monochromatic palette. Font categories include a condensed sans for display and a humanist sans for body. Critical donts: avoid lowercase headlines, avoid rounded corners, avoid vibrant colors. The layout is spacious with 24px gutters, and motion is smooth using cubic-bezier easing.
```
