Lamborghini

Identity

Automotive

Bundled OpenDesign package for Lamborghini, derived from curated DESIGN.md, tokens.css, and components.html fixtures.

Typography

LamborghiniDisplay

InterBody300 / 200

Ag

SF MonoMono

--text-4xl · 90pxThe quick brown fox

--text-3xl · 64pxThe quick brown fox

--text-2xl · 42pxThe quick brown fox

--text-xl · 26pxThe quick brown fox

--text-lg · 18pxThe quick brown fox

--text-base · 16pxThe quick brown fox

--text-sm · 14pxThe quick brown fox

--text-xs · 12pxThe quick brown fox

Palette

--bg#050505Page background — defines the brand canvas.

--surface#141414Card / lifted container background.

--surface-warm#211b0bTertiary surface tier (kami warm-sand).

--fg#f8f4e6Primary text color.

--fg-2#d8ceb0Secondary text tier (kami dark-warm).

--muted#9b927dSubtext / captions.

--meta#d4af37Tertiary FG / metadata tier (kami stone).

--border#3a321dDefault border / card edge.

--border-soft#282315Inner row separator that should not visually compete.

--accent#d4af37Brand accent. ≤2 visible uses per screen (lint enforced).

--accent-on#050505FG when --accent is the bg.

--success#39a852Success state.

--warn#f7c948Warning state.

--danger#e63946Danger state.

Also named in DESIGN.md

Lamborghini Gold#ffc000The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary acti…

Pure White#ffffffPrimary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice th…

Dark Gold#917300Hover/pressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interac…

Gold Text#ffce3eSlightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels

Cyan Pulse#29abe2Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight

Link Blue#3860beMedium blue (rgb 56, 96, 190) used universally for link hover states across all text colors

Absolute Black#000000The dominant surface color — used for page background, hero sections, header, footer, and most containers

Charcoal#202020Elevated dark surface (rgb 32, 32, 32) — the primary "dark gray" for cards, panels, and text containers sitti…

Dark Iron#181818Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections

Near White#f8f8f8Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections

Mist#e6e6e6Light gray surface for secondary light-mode containers

Smoke#f5f5f5Secondary text on dark surfaces — slightly softer than pure white

Imagery & layout

Radius

--radius-sm2px

--radius-md6px

--radius-lg10px

--radius-pill9999px

Spacing

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 20px

--space-6 · 24px

--space-8 · 32px

--space-12 · 48px

Elevation

--elev-raised

Layout

2–5px for fine adjustments (badge padding, border spacing)

Layout rules

Base unit: 8px
Full scale: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px
Button padding: 16px (ghost), 24px (gold accent)
Section padding: 48–56px vertical, 40px horizontal
Small spacing: 2–5px for fine adjustments (badge padding, border spacing)
Framework: Bootstrap grid system (container + row + col)

Component kit

Light Dark