# Lamborghini — Design System
> Official website for the Italian luxury sports car manufacturer.
- **Canonical:** https://uiuxskills.com/library/automobili-lamborghini
- **Source:** https://www.lamborghini.com
- **Category:** Automotive
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:33.520Z

---

---
version: alpha
name: Automobili Lamborghini
description: Official digital presence for the Italian luxury super sports car manufacturer.
tone: Authoritative, visionary, and uncompromisingly bold.
color-scheme: light
colors:
  primary: "#000000"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  surface-dim: "#F4F4F4"
  surface-container: "#EAEAEA"
  outline: "#CCCCCC"
  error: "#D32F2F"
  success: "#388E3C"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: Helvetica, Arial, sans-serif
    fontSize: 12px
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 0px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    height: 40px
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#666666"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

The Lamborghini digital experience is an exercise in high-contrast, aggressive luxury. The visual language is defined by a stark black-and-white palette, sharp geometric typography, and cinematic, full-bleed imagery that prioritizes power and exclusivity.

## Colors

The color strategy relies on a strict monochrome foundation to ensure the brand's automotive photography remains the focal point.

*   Primary (#000000): The core brand color for backgrounds, structural elements, and primary CTAs.
*   On-primary (#FFFFFF): High-contrast text color for use against black surfaces.
*   Surface (#FFFFFF): The standard light background for content areas and cards.
*   On-surface (#000000): Primary text color for light surfaces.
*   Surface-dim (inferred) (#F4F4F4): Subtle background variation used for section separation.
*   Surface-container (inferred) (#EAEAEA): Container background for cards and interactive modules.
*   Outline (inferred) (#CCCCCC): Border color for dividers and input fields.
*   Error (inferred) (#D32F2F): Semantic color reserved for critical alerts.
*   Success (inferred) (#388E3C): Semantic color for positive status indicators.
*   Focus-ring (inferred) (#000000): High-contrast indicator for accessibility and navigation.

## Typography

The typography utilizes a clean, sans-serif family (Helvetica/Arial) to maintain a technical and authoritative tone.

*   Display-lg (inferred): Used for high-impact hero headlines.
*   Display-md (inferred): Used for secondary hero headlines.
*   Headline-lg (inferred): Primary section titles.
*   Headline-md (inferred): Card titles and sub-headers.
*   Body-md (inferred): Standard paragraph text for readability.
*   Label-sm (inferred): Metadata, small labels, and button text.

## Layout

The site employs a full-width grid system that emphasizes negative space and large-scale visual assets. Section order follows a logical flow: nav, hero, model-showcase, configurator-teaser, news, and footer. The hero pattern features a full-bleed image with centered typography and a single primary CTA. The design is mobile-first, collapsing complex grids into single-column stacks on smaller viewports. Use {spacing.lg} for section margins to maintain consistent breathing room, and avoid {spacing.xs} for primary layout gutters.

## Elevation & Depth

Depth is achieved through high-contrast color shifts and layered photography rather than traditional drop shadows. Elevation tokens are inferred to support standard UI components.
*   elevation.sm: Minimal lift for subtle UI elements.
*   elevation.md: Standard card lift.
*   elevation.lg: Used for modal or drawer overlays.

## Shapes

The brand identity is strictly sharp-edged. All components, including buttons and cards, utilize a 0px border-radius. This reinforces a technical, precise, and aggressive aesthetic. Do not introduce rounded corners to any UI elements.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Buttons
Primary buttons use {colors.primary} with {typography.label-sm} text. They must remain sharp-edged with 0px radius. Secondary buttons are transparent with a {colors.primary} border.

### Cards
Cards utilize {colors.surface} or {colors.surface-dim} backgrounds. They are strictly rectangular and should not feature drop shadows, relying instead on the {components.divider} or subtle background shifts to define boundaries.

### Input Fields
Inputs are 40px in height with {colors.outline} borders. Upon interaction, the border transitions to {colors.focus-ring} to maintain accessibility.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs | Never use rounded corners on {components.button-primary} |
| Apply {typography.display-lg} for hero headlines | Avoid using {colors.error} for non-critical UI |
| Use {colors.on-primary} text on {colors.primary} backgrounds | Do not mix {typography.body-md} with decorative serifs |
| Maintain strict 0px radius on all {components.card} | Never apply drop shadows to {components.card} |
| Use {spacing.lg} for section margins | Avoid low-contrast text on {colors.surface} |
| Ensure {components.link} are clearly distinguishable | Do not use {spacing.xs} for primary layout gutters |
| Use {components.input-field-focus} for active states | Avoid cluttered layouts that obscure imagery |
| Use {components.badge-success} for status indicators | Never use soft or rounded shapes for buttons |

## Content Style

CTA labels are imperative, concise, and action-oriented (e.g., "Discover More," "Start configuration"). They should be direct and avoid unnecessary fluff.

Headings are evocative, aspirational, and minimalist. They should be used sparingly to allow the visual imagery to communicate the brand's power and exclusivity.

Copy density is sparse. Prioritize impact over volume, using whitespace to frame text and prevent visual fatigue.

## Imagery & Icons

Imagery is high-fidelity, professional automotive photography characterized by dramatic lighting and high contrast. Images are typically full-bleed to create an immersive, cinematic experience. Icons should be minimal and sharp, adhering to the same 0px radius philosophy as the rest of the UI.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Automobili Lamborghini, an authoritative and uncompromisingly bold luxury automotive brand. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{spacing.lg}` — never hardcode hex values, font sizes, or pixel lengths.
2. Respect component definitions under `components:` exactly. Do not introduce variants (e.g. rounded buttons, soft cards) the spec does not list.
3. All border-radius is `{rounded.sm}` (0px) without exception. The Shapes section is authoritative: sharp edges are non-negotiable across every element.
4. When the Do's and Don'ts table conflicts with a user request, surface the conflict explicitly before proceeding — do not silently override the spec.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, component metadata) is available, those values take precedence.

## Output contract

**Must:**
- Use named tokens for every color, type scale, spacing, and radius value.
- Cover hover, focus, and disabled states for interactive components where the spec defines them (`{components.button-primary-hover}`, `{components.input-field-focus}`, `{components.link-hover}`).
- Apply `{spacing.lg}` for section margins; use `{spacing.md}` and above for primary layout gutters.
- Set hero headlines in `{typography.display-lg}` only when the layout calls for a full-bleed hero treatment per the Layout section.
- Keep CTA copy imperative and concise, matching the Content Style section.

**Must NOT:**
- Invent colors, radii, or font families absent from the spec.
- Apply any border-radius greater than 0px to buttons, cards, inputs, badges, or icons.
- Apply drop shadows to `{components.card}` — use background shifts or `{components.divider}` for boundaries.
- Use `{colors.error}` for non-critical UI elements.
- Rewrite, replace, or invent page copy, headings, navigation items, or routes as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- For ambiguous backgrounds, default to `{colors.surface}`; for text on those backgrounds, use `{colors.on-surface}`.
- Prefer composing existing components over introducing new tokens.
- For unspecified breakpoints, follow the mobile-first approach in Layout with one breakpoint at 768px.
- When torn between two valid options, choose the higher-contrast, sharper, more minimal solution — it aligns with the brand's core aesthetic.