---
version: alpha
name: Lamborghini
description: "A black hangar, one bar of Giallo gold, type milled like a chassis."
colors:
  on-surface-variant: "#969696"
  surface: "#ffffff"
  outline: "#7d7d7d"
  primary: "#ffc000"
  on-surface: "#000000"
  gold-pressed: "#cc9a00"
  gold-deep: "#997300"
  surface-1: "#181818"
  surface-2: "#313131"
  surface-3: "#494949"
  text-primary: "#f5f5f5"
  stroke-4: "#313131"
  alert-red: "#e62d37"
  focus-blue: "#1e90ff"
typography:
  micro-label:
    fontFamily: LamboType
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.25rem
    letterSpacing: 0.36px
  caption-legal:
    fontFamily: LamboType
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.375rem
    letterSpacing: 0.36px
  body-small:
    fontFamily: LamboType
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.625rem
    letterSpacing: 0em
  body:
    fontFamily: LamboType
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75rem
    letterSpacing: 0em
  lead:
    fontFamily: LamboType
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.75rem
    letterSpacing: 0em
  subheading:
    fontFamily: LamboType
    fontSize: 27px
    fontWeight: 400
    lineHeight: 2.3125rem
    letterSpacing: 0em
  section-heading:
    fontFamily: LamboType
    fontSize: 40px
    fontWeight: 400
    lineHeight: 2.75rem
    letterSpacing: 0em
  statement:
    fontFamily: LamboType
    fontSize: 54px
    fontWeight: 400
    lineHeight: 3.75rem
    letterSpacing: 0em
  display:
    fontFamily: LamboType
    fontSize: 80px
    fontWeight: 400
    lineHeight: 5rem
    letterSpacing: 0em
  hero-display:
    fontFamily: LamboType
    fontSize: 120px
    fontWeight: 400
    lineHeight: 5rem
    letterSpacing: 0em
rounded:
  buttons-cards-inputs: 0px
  measured-ui-minimum: 2px
  rare-rounded-surface: 4px
  max-in-system: 16px
spacing:
  "0": 0.25rem
  "1": 0.5rem
  "2": 1rem
  "3": 1.5rem
  "4": 2rem
  "5": 2.5rem
  "6": 3rem
  "8": 4rem
  "10": 5rem
  "11": 5.5rem
  grid: 3.75rem
---
# Lamborghini — Style Reference
> A black hangar, one bar of Giallo gold, type milled like a chassis.

**Theme:** dark

Lamborghini's system is a black stage lit by a single accent: Giallo gold (`#ffc000`), and nothing else competes for it. The canvas is a graded void — pure black through `#181818`, `#313131`, `#494949` — so the product (and the one gold CTA) reads like it's caught in a spotlight. Type is the other protagonist: LamboType, a variable family with ultra-condensed Black cuts, set in giant uppercase and stacked tight (120px headlines on a 100px line) so a word like "URUS AT ITS PEAK" behaves like sheet metal, not a sentence. Corners are effectively square (0–2px) — no softness anywhere, because the shapes are meant to feel cut, not molded. The grey ramp is engineered to eleven precise steps for surfaces, strokes, and body text, but restraint is the whole point: gold is a scalpel used once per view, red is reserved for the brake-caliper moment of an error, and blue only ever appears as a focus ring.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Lamborghini White | `#ffffff` | `--global-brand-brand-1` | Brand mark, default interactive fill, light-mode canvas; the only pure white — reserve it for the logo, primary type on dark, and outlined controls. |
| Lamborghini Black | `#000000` | `--global-brand-brand-2` / `--surface-surface-0` | The void. Hero canvas and deepest surface; the stage everything else performs on. |
| Giallo (Gold) | `#ffc000` | `--global-active-active-1` / `--interactive-accent-accent-default` / `--typography-label-accent-1` | THE signature. One gold moment per view — the primary CTA and accent labels. Never tint surfaces with it, never use it for body text. |
| Gold Pressed | `#cc9a00` | `--global-active-active-2` / `--interactive-accent-accent-pressed` | Pressed state of the gold CTA only. |
| Gold Deep | `#997300` | `--global-active-active-3` / `--interactive-accent-accent-hover` | Hover state of the gold CTA; also the darkest step of the gold family. |
| Surface 1 | `#181818` | `--surface-surface-1` / `--global-grey-grey-10` | Near-black panel — the first lift off the void; cards, sheets, nav backdrops. |
| Surface 2 | `#313131` | `--surface-surface-2` / `--global-grey-grey-9` | Second elevation; inset panels and raised rows. |
| Surface 3 | `#494949` | `--surface-surface-3` / `--global-grey-grey-8` | Highest dark surface; the ceiling of the elevation ladder. |
| Text Primary | `#f5f5f5` | `--typography-text-1` / `--global-grey-grey-1` | Body and heading text on dark — an off-white, never full `#ffffff`, to soften glare. |
| Grey 5 (Muted) | `#969696` | `--global-grey-grey-5` / `--typography-text-5` | Muted / disabled text, legal disclaimers, captions. |
| Stroke 1 | `#7d7d7d` | `--stroke-stroke-1` / `--global-grey-grey-6` | Primary hairline border on dark; dividers and outlines. |
| Stroke 4 | `#313131` | `--stroke-stroke-4` | Quietest divider — nearly invisible separation between dark surfaces. |
| Alert Red | `#e62d37` | `--global-signal-signal-alert-1` / `--typography-label-alert-1` | Brake-caliper red. Errors and destructive actions ONLY — never decorative. |
| Focus Blue | `#1e90ff` | `--global-miscellaneous-blu-1` / `--interactive-base-base-focus-border` | Focus ring only. The single blue in the system; never a fill or a link color. |

*(Full grey ramp — greys 0–11 — plus the warning/info/success signals and gradient scrims are frozen intact in Quick Start.)*

## Tokens — Typography
### LamboType — the entire voice: headlines, labels, body, everything · `--font-families-lambotype-variable`
A bespoke variable typeface. Display uses the ultra-condensed Black cut set huge and uppercase; supporting text uses the Regular and Condensed Bold cuts. There is no secondary typeface in the identity — the family stretches across every role, which is why width (condensed vs. ultra-condensed) does the work a second font usually would.
- **Substitute:** Roboto Condensed, Oswald, Helvetica Neue Condensed (declared fallback stack: `LamboType, Roboto, Helvetica Neue, Arial`)
- **Weights:** 300 (Light), 400 (Regular), 500 (Medium); display cuts render as Bold / UltraCnd Bold / UltraCnd Black
- **Cuts:** Variable — Regular, Bold, Cnd Bold, UltraCnd Bold, UltraCnd Black, Italic
- **Sizes:** 10px · 12px · 13px · 14px · 16px · 18px · 27px · 40px · 54px · 80px · 120px
- **Line height:** Tight on display (120px type on a 100px line, `--line-heights-1`), opening to ~1.75rem–1.4× for body
- **Letter spacing:** Near-zero; a faint `0.36px` (`--letter-spacing-2`) on small uppercase labels for legibility
- **Role:** Everything. Ultra-condensed uppercase for the hero, Regular for prose, small uppercase for kickers and nav.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro label | 10px | 1.25rem | 0.36px | `--font-size-0` |
| Caption / legal | 12px | 1.375rem | 0.36px | `--font-size-1` |
| Body small | 14px | 1.625rem | 0 | — |
| Body | 16px | 1.75rem | 0 | `--font-size-2` |
| Lead | 18px | 1.75rem | 0 | `--font-size-3` |
| Subheading | 27px | 2.3125rem | 0 | — |
| Section heading | 40px | 2.75rem | 0 | — |
| Statement | 54px | 3.75rem | 0 | — |
| Display | 80px | 5rem | 0 | `--font-size-15` |
| Hero display | 120px | 5rem | 0 | `--font-size-17`* |

*Hero renders at 120px measured against `--line-heights-1` (5rem) — the headline is deliberately set below its own cap height for a stacked, carved feel.

## Tokens — Spacing & Shapes
**Base unit:** 4px (`0.25rem`)   **Density:** comfortable, architectural — generous vertical rhythm, full-bleed horizontals

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 0 | 0.25rem (4px) | `--scale-spacing-0` |
| 1 | 0.5rem (8px) | `--scale-spacing-1` |
| 2 | 1rem (16px) | `--scale-spacing-2` |
| 3 | 1.5rem (24px) | `--scale-spacing-3` |
| 4 | 2rem (32px) | `--scale-spacing-4` |
| 5 | 2.5rem (40px) | `--scale-spacing-5` |
| 6 | 3rem (48px) | `--scale-spacing-6` |
| 8 | 4rem (64px) | `--scale-spacing-8` |
| 10 | 5rem (80px) | `--scale-spacing-10` |
| 11 | 5.5rem (88px) | `--scale-spacing-11` |
| Grid | 3.75rem (60px) | `--scale-spacing-grid` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, cards, inputs | 0px (`--border-radius-radius-0`) |
| Measured UI minimum | 2px |
| Rare rounded surface | 4px (`--border-radius-radius-1`) |
| Max in system | 16px (`--border-radius-radius-4`) — reserved, essentially unused |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Ambient glow | `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` | — |

### Layout
- **Page max-width:** Full-bleed hero; content grid on a 60px (`--scale-spacing-grid`) rhythm
- **Section gap:** 80px (`--scale-spacing-10`), opening to card padding of 80px vertical on feature blocks
- **Card padding:** 0 to `80px 0px` (measured) — content bleeds edge-to-edge; padding is vertical, not boxed
- **Element gap:** 16px (`--scale-spacing-2`) baseline

## Components
### Primary CTA — Gold
**Role:** The one action per view worth spending gold on ("EXPLORE THE MODEL").
Fill `#ffc000`, label `#000000`, radius 0px, padding ~16px, LamboType uppercase ~16px/400, trailing arrow (→) icon. Hover → `#997300`, pressed → `#cc9a00`. No shadow, no rounding — a solid gold slab. Use exactly once in the viewport.

### Ghost Button — Outlined
**Role:** Secondary action that must not steal the gold moment.
Transparent fill, `1px #ffffff` border, white text, radius 0px, padding 16px, up to 32px type. Reads as an engraved outline on the black stage.

### Text Link / Inline Action
**Role:** Quiet navigation and inline links.
No underline, `#ffffff` label, radius 0, padding `16px 0`, 12–18px uppercase. On dark, links are white; blue is never used for links (blue is focus only).

### Menu Trigger
**Role:** Top-left hamburger + "MENU" wordmark — the single global nav entry.
Small uppercase LamboType label beside a three-bar icon, white on black, no chrome.

### Hero Display Heading
**Role:** The statement — one carved phrase per hero.
LamboType UltraCnd Black, uppercase, 120px on a 5rem line (`#ffffff` or `#f5f5f5`), padding 0. Set intentionally condensed and stacked so the words behave like a physical object.

### Kicker / Eyebrow Label
**Role:** Model or section tag above the headline ("URUS SE PERFORMANTE").
27px LamboType uppercase, white, tracked `0.36px`, sitting directly on the hero.

### Section Heading
**Role:** Mid-page titles on dark or light.
27–54px LamboType; `#f5f5f5` on dark, `#181818` on light spec surfaces. Radius 0, padding 0.

### Editorial Card
**Role:** Model / news tile.
No border, no radius, no fill — content bleeds directly. Vertical padding `80px 0` on feature blocks, text `#202020`/`#181818` on light or `#f5f5f5` on dark. Depth comes from the image and surface step, not a boxed container.

### Icon Button (Compare / Search)
**Role:** Utility controls, top-right of the header.
Bare white glyphs (Lambo-icons font), no fill, no border, ~12px hit label.

### Legal / Disclaimer Text
**Role:** Regulatory fine print pinned under the hero.
12px LamboType, `#969696`, left-aligned, generous line height — present but recessive.

### Focus Ring
**Role:** Keyboard-focus indicator, the system's only blue.
`1px #1e90ff` outline on the focused control; never a fill, never persistent.

### Header Scrim
**Role:** Legibility gradient behind the top nav.
`linear-gradient(180deg, #f5f5f5 0%, #18181800 100%)` (`--gradient-header`) on light, mirrored dark scrims (`--gradient-bottom`, `--gradient-top`) to seat the fixed nav over imagery.

## Do's and Don'ts
### Do
- Keep the stage black. Build depth from the surface ladder `#000000 → #181818 → #313131 → #494949`, not from color.
- Spend gold once. `#ffc000` is the primary CTA and the occasional accent label — full stop.
- Set headlines huge, uppercase, and condensed in LamboType, on a line height tighter than the cap height.
- Keep every corner square (0–2px). Sharpness is the identity.
- Use off-white `#f5f5f5` for text on dark, not pure `#ffffff` (which is reserved for the mark and outlines).
- Reserve red `#e62d37` for real errors and blue `#1e90ff` for focus rings — nothing else.

### Don't
- Don't round anything. A 12px radius breaks the whole language.
- Don't add a second brand color. There is no purple, no teal, no gradient accent — only gold on black-and-grey. (Ignore the Bootstrap `--blue/--purple/--yellow` defaults in the stylesheet; they are framework junk, not brand tokens.)
- Don't tint surfaces gold or use gold for body text.
- Don't introduce a second typeface — stretch LamboType's widths instead.
- Don't box editorial content in bordered cards; let images and surface steps carry structure.
- Don't use blue as a link color.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Void | `#000000` | Hero canvas, deepest ground (`--surface-surface-0`). |
| 1 | Surface 1 | `#181818` | First panel lift; nav backdrops, sheets. |
| 2 | Surface 2 | `#313131` | Inset and raised rows. |
| 3 | Surface 3 | `#494949` | Top of the dark ladder. |
| — | Light canvas | `#ffffff` | Light-mode spec sheets / configurator surfaces (`--global-grey-grey-0`). |

## Elevation
Depth is luminance, not shadow. The dark surfaces step upward in equal-ish increments (`#000` → `#181818` → `#313131` → `#494949`), and that step is how you read a raised panel. The single defined shadow — `rgba(0,0,0,0.2) 0 0 18px` — is an ambient glow used sparingly to lift a floating element off imagery, never a directional drop shadow. Borders are hairline strokes (`--stroke-*`, 1px) used to separate same-luminance surfaces where a lift isn't available. On light spec surfaces, elevation inverts to a plain white canvas with hairline dividers.

## Imagery
Photography IS the product — full-bleed studio and location shots of the cars, dramatically lit against black or a saturated environmental backdrop (the hero's red steel-mesh set). Vehicles are the only true color in the frame, so the rest of the system stays monochrome to avoid competing. Treatment is cinematic: low key, hard speculars on carbon and paint, deep shadow rolloff into the black canvas. Icons are a bespoke pictographic set (`Lambo-icons`), thin and geometric. No illustration, no stock, no decorative texture — the metal does the talking.

## Layout
Full-bleed, cinematic. The hero is edge-to-edge imagery with type and CTA overlaid bottom-left, nav floating over the top with a legibility scrim. A minimal fixed header — "MENU" hamburger top-left, brand bull centered, utility icons (compare, search) top-right — is the entire global chrome. Below the hero, content sits on a 60px grid with tall 80px section rhythm; feature blocks bleed their imagery to the viewport edges while text respects the grid. Everything is vertically stacked and generously spaced — the layout is calm so the cars and the one gold CTA carry the energy.

## Typography Signature
Two moves define the voice. First, **width as hierarchy**: instead of a second font, Lamborghini switches LamboType's cut — ultra-condensed Black for the shouted hero, Regular for prose, condensed Bold for mid-titles. Second, **sub-cap line height**: the 120px hero is set on a 100px line, so ascenders and the next line nearly interlock, compressing the headline into a single sculptural block. Uppercase is near-universal for display and labels, with a whisper of `0.36px` tracking only at small sizes to keep tight caps legible. The result reads as engineered typography — precise, mechanical, and unmistakably fast.

## Agent Prompt Guide
## Quick Color Reference
- background: `#000000` (dark canvas) / `#ffffff` (light canvas)
- text: `#f5f5f5` on dark, `#000000`/`#181818` on light
- surface: `#181818` → `#313131` → `#494949`
- border: `#7d7d7d` (`--stroke-stroke-1`), quiet `#313131`
- accent: `#ffc000` (Giallo gold — the one accent)
- primary action: `#ffc000` fill with `#000000` label, square corners

## Example Component Prompts
1. **Hero**: Full-bleed black hero, cinematic studio photo of the vehicle as the only color. Overlay bottom-left: a 27px uppercase LamboType kicker (`#ffffff`), then a 120px UltraCnd Black uppercase headline (`#f5f5f5`) on a 100px line height. Bottom-right: a solid gold button `#ffc000` with black `#000000` uppercase label, 0px radius, 16px padding, trailing → arrow.
2. **Primary CTA**: Rectangular button, fill `#ffc000`, label `#000000`, LamboType uppercase 16px/400, radius 0px, padding 16px 24px, no shadow. Hover `#997300`, pressed `#cc9a00`. Use once per view.
3. **Ghost button**: Transparent fill, `1px solid #ffffff` border, white uppercase LamboType label, 0px radius, 16px padding — for the secondary action beside the gold CTA.
4. **Dark surface card**: Background `#181818`, no border, no radius, off-white `#f5f5f5` heading at 27px and `#969696` caption at 12px; content bleeds edge-to-edge, vertical padding 80px 0.
5. **Global header**: Fixed bar over imagery — top-left three-bar icon + "MENU" (white uppercase 12px), centered brand mark, top-right compare + search glyphs; seated on `linear-gradient(180deg, #f5f5f5 0%, #18181800 100%)` scrim.

## Similar Brands
- **Porsche** — the same black-stage-plus-product photography discipline and restrained, engineering-led type; kindred cinematic monochrome.
- **Bugatti** — shared ultra-luxury automotive minimalism where the car is the only color and the UI recedes to black.
- **Balenciaga** — condensed all-caps display type as brand and severe monochrome; the closest fashion analog to LamboType's carved headlines.
- **Aston Martin** — dark hero, single warm-metal accent, gridded editorial calm below the fold.
- **Bang & Olufsen** — precision-object aesthetic: black surfaces, hairline strokes, one restrained accent, product-as-hero.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — Brand */
  --color-brand-white: #ffffff;
  --color-brand-black: #000000;

  /* Colors — Giallo (gold accent) */
  --color-active-1: #ffc000;   /* primary CTA / accent */
  --color-active-2: #cc9a00;   /* pressed */
  --color-active-3: #997300;   /* hover / deep gold */

  /* Colors — Grey ramp (0–11) */
  --color-grey-0:  #ffffff;
  --color-grey-1:  #f5f5f5;
  --color-grey-2:  #dcdcdc;
  --color-grey-3:  #c4c4c4;
  --color-grey-4:  #ababab;
  --color-grey-5:  #969696;
  --color-grey-6:  #7d7d7d;
  --color-grey-7:  #626262;
  --color-grey-8:  #494949;
  --color-grey-9:  #313131;
  --color-grey-10: #181818;
  --color-grey-11: #000000;

  /* Surfaces */
  --surface-0: #000000;
  --surface-1: #181818;
  --surface-2: #313131;
  --surface-3: #494949;

  /* Typography colors */
  --typography-text-1: #f5f5f5;
  --typography-text-2: #dcdcdc;
  --typography-text-3: #c4c4c4;
  --typography-text-4: #ababab;
  --typography-text-5: #969696;
  --typography-label-1: #000000;
  --typography-label-2: #ffffff;
  --typography-label-accent-1: #ffc000;
  --typography-label-alert-1: #e62d37;

  /* Interactive */
  --interactive-base-default: #ffffff;
  --interactive-base-hover: #c4c4c4;
  --interactive-base-pressed: #f5f5f5;
  --interactive-base-disabled: #969696;
  --interactive-base-focus-border: #1e90ff;
  --interactive-accent-default: #ffc000;
  --interactive-accent-hover: #997300;
  --interactive-accent-pressed: #cc9a00;
  --interactive-danger-default: #e62d37;
  --interactive-danger-hover: #9b121a;
  --interactive-danger-pressed: #c91821;

  /* Strokes */
  --stroke-1: #7d7d7d;
  --stroke-2: #626262;
  --stroke-3: #494949;
  --stroke-4: #313131;

  /* Signals */
  --signal-alert-1: #e62d37;
  --signal-alert-2: #c91821;
  --signal-alert-3: #9b121a;
  --signal-warning: #ff822d;
  --signal-info: #2d73d7;
  --signal-success: #37d200;
  --color-blu-1: #1e90ff;

  /* Gradients / scrims */
  --gradient-1: linear-gradient(180deg, #18181833 0%, #181818 100%);
  --gradient-2: linear-gradient(180deg, #1818181a 56.08%, #181818 100%);
  --gradient-3: linear-gradient(180deg, #00000000 0%, #f5f5f5 100%);
  --gradient-header: linear-gradient(180deg, #f5f5f5 0%, #18181800 100%);
  --gradient-top: linear-gradient(180deg, #ffffff 9.72%, #00000000 63.89%);
  --gradient-bottom: linear-gradient(180deg, #00000000 0%, #000000 100%);

  /* Typography — Families */
  --font-lambotype: 'Lambotype Variable', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-lambotype-black: 'Lambotype Variable UltraCnd Black', 'Roboto Condensed', 'Oswald', sans-serif;
  --font-lambotype-cnd-bold: 'Lambotype Variable Cnd Bold', 'Roboto Condensed', sans-serif;

  /* Typography — Scale */
  --text-0:  0.625rem;   /* 10px */
  --text-1:  0.75rem;    /* 12px */
  --text-2:  1rem;       /* 16px */
  --text-3:  1.125rem;   /* 18px */
  --text-4:  1.5rem;     /* 24px */
  --text-5:  1.6875rem;  /* 27px */
  --text-9:  2.5rem;     /* 40px */
  --text-13: 3.75rem;    /* 54px range */
  --text-15: 5rem;       /* 80px */
  --text-17: 7.5rem;     /* 120px */
  --text-18: 8.5rem;     /* 136px */

  /* Line heights */
  --leading-hero: 5rem;      /* 120px display, sub-cap */
  --leading-display: 6.25rem;
  --leading-body: 1.75rem;
  --leading-tight: 1.25rem;

  /* Letter spacing */
  --tracking-caps: 0.36px;

  /* Spacing (base 4px) */
  --spacing-0: 0.25rem;
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;
  --spacing-5: 2.5rem;
  --spacing-6: 3rem;
  --spacing-7: 3.5rem;
  --spacing-8: 4rem;
  --spacing-9: 4.5rem;
  --spacing-10: 5rem;
  --spacing-11: 5.5rem;
  --spacing-grid: 3.75rem;

  /* Border width */
  --border-0: 0px;
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 4px;
  --border-4: 8px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-4: 16px;

  /* Shadow */
  --shadow-ambient: rgba(0, 0, 0, 0.2) 0px 0px 18px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors — Brand */
  --color-brand-white: #ffffff;
  --color-brand-black: #000000;

  /* Colors — Giallo (gold accent) */
  --color-active-1: #ffc000;
  --color-active-2: #cc9a00;
  --color-active-3: #997300;

  /* Colors — Grey ramp */
  --color-grey-0:  #ffffff;
  --color-grey-1:  #f5f5f5;
  --color-grey-2:  #dcdcdc;
  --color-grey-3:  #c4c4c4;
  --color-grey-4:  #ababab;
  --color-grey-5:  #969696;
  --color-grey-6:  #7d7d7d;
  --color-grey-7:  #626262;
  --color-grey-8:  #494949;
  --color-grey-9:  #313131;
  --color-grey-10: #181818;
  --color-grey-11: #000000;

  /* Surfaces */
  --color-surface-0: #000000;
  --color-surface-1: #181818;
  --color-surface-2: #313131;
  --color-surface-3: #494949;

  /* Typography colors */
  --color-text-1: #f5f5f5;
  --color-text-2: #dcdcdc;
  --color-text-3: #c4c4c4;
  --color-text-4: #ababab;
  --color-text-5: #969696;
  --color-label-1: #000000;
  --color-label-2: #ffffff;
  --color-label-accent: #ffc000;
  --color-label-alert: #e62d37;

  /* Interactive */
  --color-interactive-base: #ffffff;
  --color-interactive-base-hover: #c4c4c4;
  --color-interactive-base-pressed: #f5f5f5;
  --color-interactive-base-disabled: #969696;
  --color-interactive-focus-border: #1e90ff;
  --color-interactive-accent: #ffc000;
  --color-interactive-accent-hover: #997300;
  --color-interactive-accent-pressed: #cc9a00;
  --color-interactive-danger: #e62d37;
  --color-interactive-danger-hover: #9b121a;
  --color-interactive-danger-pressed: #c91821;

  /* Strokes */
  --color-stroke-1: #7d7d7d;
  --color-stroke-2: #626262;
  --color-stroke-3: #494949;
  --color-stroke-4: #313131;

  /* Signals */
  --color-signal-alert-1: #e62d37;
  --color-signal-alert-2: #c91821;
  --color-signal-alert-3: #9b121a;
  --color-signal-warning: #ff822d;
  --color-signal-info: #2d73d7;
  --color-signal-success: #37d200;
  --color-blu-1: #1e90ff;

  /* Typography — Families */
  --font-lambotype: 'Lambotype Variable', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-lambotype-black: 'Lambotype Variable UltraCnd Black', 'Roboto Condensed', 'Oswald', sans-serif;
  --font-lambotype-cnd-bold: 'Lambotype Variable Cnd Bold', 'Roboto Condensed', sans-serif;

  /* Typography — Scale */
  --text-micro: 0.625rem;
  --text-caption: 0.75rem;
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-subheading: 1.6875rem;
  --text-section: 2.5rem;
  --text-statement: 3.75rem;
  --text-display: 5rem;
  --text-hero: 7.5rem;

  --leading-hero: 5rem;
  --leading-display: 6.25rem;
  --leading-body: 1.75rem;
  --tracking-caps: 0.36px;

  /* Spacing */
  --spacing-0: 0.25rem;
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;
  --spacing-6: 3rem;
  --spacing-8: 4rem;
  --spacing-10: 5rem;
  --spacing-grid: 3.75rem;

  /* Border Radius */
  --radius-0: 0px;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-4: 16px;

  /* Shadow */
  --shadow-ambient: 0px 0px 18px 0px rgba(0, 0, 0, 0.2);
}
```