Design System

Beyond
Imagination,
Accelerated.

Forged in darkness, crowned in gold. An uncompromising dark canvas with the intensity of Sant'Agata Bolognese.

20 color tokens 15 type steps 8px grid 5 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Absolute black canvas with signature gold accent. High-contrast palette inspired by forged carbon fiber, brushed metal, and the Lamborghini crest.

Nero
#000000
Primary page background
Carbon
#0a0a0a
Elevated surfaces, modals
Forged Carbon
#141414
Secondary sections
Graphite
#1a1a1a
Card backgrounds
Matte Black
#2a2a2a
Borders, dividers
Dark Chrome
#333333
Inactive states
Bianco
#ffffff
Primary text, icons
Silver
#c0c0c0
Secondary text
Platinum
#e0e0e0
High-contrast labels
Grigio
#888888
Placeholders, labels
Muted Gray
#666666
Helper text, captions
Oro
#ddb321
Primary accent, CTAs
Bright Gold
#f5d547
Highlights, hover states
Pale Gold
#fff1c1
Soft gold tints
Rosso Mars
#cc0000
Destructive, urgent
Verde Mantis
#00cc66
Success states

Gradients

Gold Glow
Gold light emanating from top — hero highlights
Carbon Weave
Carbon fiber texture pattern for surfaces
Dark Gradient
Vertical depth gradient for hero sections
Ember Glow
Subtle red heat glow at bottom of hero areas
Typography

Type Scale

Lamborghini Display for hero headlines (Inter substitute). Suisse Intl for body and UI. Uppercase display with aggressive negative tracking.

Display-XL Beyond Limits 80px / 0.9 / -0.04em
Display Revuelto 64px / 0.95 / -0.04em
Heading-XL Acceleration 48px / 1.0 / -0.03em
Heading-LG Performance 40px / 1.05 / -0.02em
Heading Technical Specs 24px / 1.2 / 0.08px
Subheading Engine configuration details 18px / 1.4 / 0.04px
Body Default body text for readable content 16px / 1.5 / 0.02px
Body-sm Dense data, comparison rows 14px / 1.5 / 0.02px
Caption Meta info · Labels · Specs 12px / 1.5 / 0.08px

Fonts

Display Lamborghini Display 700-800 · 32-40px · Uppercase only
Body Suisse Intl 300-100 · 12-24px · Mixed case
Mono Suisse Intl Mono 400-700 · Specs & data only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 8px. Aggressive density for data, spacious for heroes. Sharp edges — no pills, no soft corners.

Spacing Scale (8px base)

44px
88px
1616px
2424px
3232px
4848px
8080px
120120px

Border Radius

Sharp 0px
Subtle 2px
Default 4px
Large 8px
Elevation

Surfaces

5 distinct surface levels from absolute black to border gray. Elevation through color, not shadow.

Nero #000000
Carbon #0a0a0a
Forged Carbon #141414
Graphite #1a1a1a
Matte Black #2a2a2a
Data Display

Spec Cards

Performance data in Oro gold monospace. Uppercase Grigio labels. The heartbeat of every Lamborghini page.

Power
770
CV
Torque
720
Nm
0-100 km/h
2.8
seconds
Top Speed
350
km/h
Components

Button Variants

Gold primary for maximum impact, outlined gold for secondary actions, ghost for navigation. Sharp edges, uppercase, bold.

Gold Primary Button
Main call to action — maximum visual impact
.btn-primary
Oro (#ddb321) background, Nero (#000000) text, 2px radius, uppercase, font-weight 700, letter-spacing 0.08em. The single most important action on any page.
Outlined Gold Button
Secondary interactive actions
.btn-ghost
Oro text, Oro 1px border, transparent background. Clear interactive target that defers to the primary gold button.
Secondary Button
Tertiary actions, navigation
.btn-secondary
Bianco text, Matte Black border. For less prominent actions that still need visual presence.
Ghost Header Button
Navigation, secondary actions
.btn-ghost-nav
Models Ownership Motorsport
Bianco text, transparent background, 8px padding, no border. Used for top navigation items.
Input Field
User text input
input
Transparent background, Bianco text, 4px radius. Focus state uses Oro border. Placeholder in Grigio, uppercase.
Guidelines

Do's & Don'ts

Do — Embrace
  • Nero (#000000) as primary background — absolute black
  • Oro (#ddb321) exclusively for primary accents and CTAs
  • Uppercase display headings with tight negative tracking
  • 8px-based spacing with aggressive, tight density
  • Sharp border radii (0px) — no pills, no soft edges
  • Carbon weave texture on elevated surfaces
  • Rosso Mars (#cc0000) only for destructive actions
  • Gold–black contrast as the defining visual tension
Don't — Avoid
  • Light backgrounds — the system is dark-only
  • Rounded corners above 4px — they contradict the brand
  • Pastel or soft colors — the palette is high-contrast
  • Oro text on light backgrounds — must sit on dark
  • Decorative drop shadows — use surface color instead
  • Lowercase display headings — always uppercase
  • Multiple accent colors — gold is singular and dominant
  • Cramped hero sections — let the content breathe