---
version: alpha
name: Lotus
description: British sports car iconoclasm made digital — near-black cinematic canvas, Lotus Yellow as the sole electric accent, Overpass at ultralight weights for aerodynamic precision, and full-bleed vehicle photography as the system's emotional engine.

colors:
  # Primary surfaces — dark, atmospheric, stage-setting
  background: "#0a0a0a"
  surface: "#111111"         # Slightly lifted dark panel, secondary regions
  surface-mid: "#1a1a1a"     # Card hover, lifted interactive areas
  surface-overlay: "#0d0d0d" # opaque approx of rgba(0,0,0,0.85) overlay — Google format requires hex

  # Text / ink
  ink: "#ffffff"
  ink-secondary: "#999999"   # Captions, metadata, secondary labels
  ink-muted: "#555555"       # Disabled, placeholder text
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#000000"      # Black text on the yellow CTA

  # Lotus Yellow — the signature brand accent
  primary: "#fdef00"         # Lotus Yellow: borders, CTAs, active states
  primary-hover: "#d7cb00"   # Darkened on hover — confirmed from extracted data
  primary-container: "#2a2800" # Dark yellow tint for subtle backgrounds

  # Borders
  border: "#fdef00"          # Yellow hairline borders on buttons and dividers
  border-subtle: "#2a2a2a"   # Near-invisible structural dividers in dark panels
  border-white: "#ffffff"    # White button outlines on dark surfaces

  # State / interaction
  focus-ring: "#fdef00"      # Yellow focus ring matching the accent system
  text-hover: "#757575"      # Dimmed text on hover — extracted from live data

  # Shadow (flat system, no visible box shadows)
  shadow-soft: "#000000"     # Placeholder — system uses no measurable shadows

typography:
  display-hero:
    fontFamily: "Overpass, 'Overpass Light', -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 112px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px
  display:
    fontFamily: "Overpass, 'Overpass Light', -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 4px
  heading-section:
    fontFamily: "'Overpass Light', Overpass, -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 3px
  heading-sub:
    fontFamily: "Overpass, -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 2px
  body-large:
    fontFamily: "Overpass, -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  body:
    fontFamily: "Overpass, -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  nav-link:
    fontFamily: "Overpass, -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Overpass, -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  label-upper:
    fontFamily: "'Overpass Light', Overpass, -apple-system, system-ui, Segoe UI, Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  caption:
    fontFamily: "Overpass, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  micro:
    fontFamily: "Overpass, Arial, Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 56px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  sm: 3px      # Subtle button and interactive element radius
  pill: 20px   # Pill shape for CTA links and filter elements
  full: 9999px # Circular icon badges and avatar containers

components:
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 40px

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-link-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.border-white}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.border}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"

  card-vehicle:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-vehicle-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.on-surface}"

  card-editorial:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 40px

  hero-section:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 80px 40px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  caption-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Lotus Design System

## Overview

The Lotus website operates on a principle that would feel familiar to anyone who has sat in one of the company's cars: extraordinary outcomes through deliberate lightness. The canvas is near-black (`{colors.background}`), nearly indistinguishable from pure black but with just enough warmth to suggest depth rather than void. Over this darkness, full-bleed vehicle photography does the work that other brands might assign to gradients, patterns, or typographic ornament. A Lotus Emira orange against a coastal skyline, backlit in golden hour light, is not decoration — it is the entire design system's emotional core, and every other decision serves it.

Lotus Yellow (`{colors.primary}`) is used with the discipline of a skilled colorist: it appears as button fills, active border strokes, and the small square motif that punctuates the layout, but never as surface fill or background wash. This restraint makes each instance of the color feel like a signal rather than a palette. The typeface is Overpass — self-hosted, deployed in ultralight and thin weights for display, regular for body — a slightly humanist grotesque that avoids the machine-precision austerity of a geometric sans. This gives Lotus's design a warmth that its Porsche or Aston Martin competitors lack: technically precise, but with enough organic character to avoid feeling clinical.

The layout system is generously proportioned and cinematic in scale. Section typography scales from 112px for the largest hero headlines down to a 20px uppercase label tier, with letter-spacing applied progressively at display sizes to open the forms and emphasize the architectural confidence of wide, spaced type. Where buttons exist, they are sharp-cornered with just a 3px radius softening, framed with yellow or white borders — a boundary signal that is unmistakably Lotus without relying on brand color fills everywhere.

**Key Characteristics:**
- Near-black (`{colors.background}`) canvas throughout — atmospheric, stage-quality darkness
- Lotus Yellow (`{colors.primary}`) deployed as accent only — CTAs, borders, active states, motif squares — never as fill
- Overpass self-hosted in four weights: Regular, Light, Thin, and "Lotus Headlines Exlight" variant
- Display text tracked open at 2–4px letter-spacing — width without condensation, precision without coldness
- Full-bleed vehicle photography as the primary chromatic event on every hero section
- Sharp-edged containers (`{rounded.none}`) for structural elements; `{rounded.sm}` (3px) for interactive chrome
- Yellow border language (`{colors.border}`) reinforces interactivity: borders on active elements carry the brand
- No box-shadows — the system is entirely flat; depth comes from photographic contrast and surface color shifts
- 8px-based spacing scale with 56px and 120px as the key structural section increments
- Nine confirmed breakpoints from 374px to 1600px — full coverage with mobile-first responsive logic
- Uppercase label tier (`{typography.label-upper}`) for navigation sublabels and classification markers
- Button corners deliberately sharp at `{rounded.sm}` — a geometric gesture that references the car's angular body panels

## Colors

### Primary Surfaces
- **Near-Black** (`{colors.background}`): The constant canvas. Slightly warmer than pure black, it reads as a stage rather than an absence.
- **Dark Surface** (`{colors.surface}`): Panel separation and card backgrounds — a minimal step above the canvas.
- **Mid Surface** (`{colors.surface-mid}`): Hover and active states, providing interactive feedback without introducing color.

### Text & Ink
- **Pure White** (`{colors.ink}`): Primary text color throughout — headlines, body, navigation, labels.
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, metadata, specification values, secondary descriptors.
- **Ink Muted** (`{colors.ink-muted}`): Disabled states, form placeholder text.

### Brand Accent
- **Lotus Yellow** (`{colors.primary}`): The defining brand mark. Applied to primary CTAs (fill), interactive borders, the decorative square motif, and link hover states. Its restraint makes every appearance feel intentional.
- **Yellow Hover** (`{colors.primary-hover}`): Darkened yellow on hover — confirms interactivity while maintaining the brand color reading.
- **Yellow Container** (`{colors.primary-container}`): Very dark yellow tint for ghost button hover states and subtle accent backgrounds.

### Text States
- **Text Hover** (`{colors.text-hover}`): Link hover color shift — confirmed from live site data.
- **Focus Ring** (`{colors.focus-ring}`): Yellow focus indicator, consistent with the accent language.

### Borders
- **Yellow Border** (`{colors.border}`): The interactive surface border on yellow-accented CTAs and active elements.
- **White Border** (`{colors.border-white}`): Secondary button outlines on dark surfaces — clean contrast without the brand accent.
- **Subtle Border** (`{colors.border-subtle}`): Structural hairlines in dark panels and section divisions.

## Typography

### Font Family
- **Primary**: `Overpass`, self-hosted with four weights: `Overpass-Regular.woff2`, `Overpass-Light.woff2`, `Overpass-Thin.woff2`, and `overpass-headlines-exlight.woff2` (a Lotus-customized ultralight variant)
- **Fallback stack**: `-apple-system, system-ui, Segoe UI, Roboto, sans-serif`
- **No Google Fonts, no Adobe Fonts** — fully self-hosted, with the "Lotus Headlines Exlight" variant as a brand-proprietary cut
- **Weight range**: 100 (Thin) through 400 (Regular); the system never reaches 700

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 112px, 2px tracking — monumental hero headline, one screen at a time |
| `display` | 80px, 4px tracking — section-level cinematic display headings |
| `heading-section` | 56px, 3px tracking — primary section titles in Light weight |
| `heading-sub` | 32px, 2px tracking — subsection headings, feature call-outs |
| `body-large` | 24px — feature descriptions, lead marketing paragraphs |
| `body` | 18px, 1.56 line-height — main body text with comfortable reading rhythm |
| `nav-link` | 16px — navigation items and inline UI text |
| `button-ui` | 16px, 0.5px tracking — CTA buttons and labeled interactive elements |
| `label-upper` | 20px Light — uppercase classification labels and nav sublabels |
| `caption` | 12px — image captions, specification lines, legal text |
| `micro` | 10px — fine print, data footnotes |

### Principles
- **Thin weight as brand statement**: The "Lotus Headlines Exlight" variant at display sizes communicates the marque's philosophy of maximum performance through minimum mass — the letters themselves feel lightweight.
- **Open tracking at display scale**: 2–4px letter-spacing at hero and section sizes opens the word shapes, creating architectural width without requiring a condensed face.
- **Weight never reaches bold**: The heaviest weight in the system is Regular (400). This is a deliberate constraint — authority comes from scale and precision, not typographic weight.
- **Overpass as precision grotesque**: Unlike a purely geometric sans, Overpass has slight humanist features that keep large display text from reading as purely mechanical.
- **Single family discipline**: The entire typographic system — from 112px hero to 10px micro — runs in Overpass and its variants. No secondary serif, no decorative display face.

## Layout

### Spacing System
Base unit: **8px**. The scale follows an 8px grid with larger structural jumps at 56px (section breathing room) and 120px (major section separations). Section padding at the hero level reaches 80px vertical, with 40px horizontal gutters.

### Grid & Container
- Maximum layout width: approximately 1440–1600px (matching breakpoint ceiling)
- Hero: Full-bleed, edge-to-edge photographic imagery with text overlaid via dark gradient
- Vehicle grid: Tile layout, typically 2–3 columns at desktop, collapsing to 1 on mobile
- Editorial sections: Alternating image-and-text layouts with generous whitespace
- Navigation: Full-width transparent header with centered wordmark and right-side account/menu controls

### Whitespace Philosophy
- **Cinematic scale demands generous spacing**: The 112px headlines need proportional breathing room — 80–120px vertical padding is not excess, it is correctness.
- **Photography needs isolation**: Vehicle images presented with surrounding airspace read as art objects; cramped, they read as catalog entries.
- **Sparse text density**: Lotus does not fill screen real estate with paragraphs. Short declarative headlines, a subline, a CTA — white space carries as much meaning as content.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Level 0 (Canvas) | `{colors.background}` flat | The entire page surface |
| Level 1 (Surface) | `{colors.surface}` fill | Card backgrounds, panels, secondary regions |
| Level 2 (Mid) | `{colors.surface-mid}` fill | Hover states, interactive area lifts |
| Level 3 (Photography) | Full-bleed imagery | Vehicle photos provide all chromatic and depth contrast |
| Level 4 (Overlay) | Black-to-transparent gradient | Text legibility over hero photography |
| Focus Ring | `{colors.focus-ring}` 2px outline | Keyboard focus, matching the yellow accent language |

**Shadow Philosophy**: Lotus applies no box-shadows. The system achieves depth entirely through surface color differentiation and full-bleed photography. This is not laziness — it is coherence. Box-shadows would introduce a visual metaphor (layers floating above a surface) that conflicts with the flat, cinematic register the design establishes. The photography already provides infinite depth; artificial shadows would diminish it.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, hero sections, all structural containers — the default |
| `sm` | 3px | Buttons, form inputs — a barely-perceptible softening of corners |
| `pill` | 20px | CTA link pills and filter tags |
| `full` | 9999px | Circular controls and icon badges |

The radius system is nearly binary. The dominant shape language is right-angled — cards, images, content containers, and navigation elements are all sharp rectangles that echo the angular aerodynamics of the cars. The 3px button radius (`{rounded.sm}`) is a functional concession, not a design statement: it softens the interactive object just enough to distinguish it as touchable. The contrast between the sharp structural grid and the rare pill shape creates a clear interactive hierarchy — pill means navigable link, sharp rectangle means content container.

## Components

The complete component spec lives in the `components:` block above.

### Buttons
- **`button-primary`** — Lotus Yellow fill, black text, 3px radius. High-contrast maximum-impact CTA. The yellow fill is the most prominent brand moment in the UI.
- **`button-secondary`** — Dark fill, white text, white border. Secondary action on dark surfaces.
- **`button-ghost`** — Dark fill, yellow text, yellow border. Alternative CTA that deploys the brand color differently — outline, not fill.

### Cards
- **`card-vehicle`** — Full-bleed photographic tile, no radius, no padding. The photograph is the card; the chrome disappears.
- **`card-editorial`** — Dark lifted surface with 40px padding. Editorial and feature content sections.

### Navigation
- **`nav-bar`** — Near-black background, Overpass 16px white links. Transparent-feeling on dark pages; the Lotus wordmark is centered.
- **`nav-link`** — 16px Overpass, padding 8px 16px.

### Inputs
- **`input`** — Dark surface, subtle 3px radius. Yellow border on focus matches the accent system precisely.

### Badges
- **`badge`** — Dark yellow container, yellow text, pill radius. Used for model status labels and classification tags.

## Do's and Don'ts

### Do
- Use near-black (`{colors.background}`) as the only canvas — no light surface panels in primary layouts
- Deploy Lotus Yellow (`{colors.primary}`) sparingly as a signal color: CTAs, active borders, accent squares only
- Apply open letter-spacing (2–4px) at display sizes — this is how Lotus's display type reads as architectural rather than compact
- Keep Overpass at weight 400 or lighter for all text — this brand never reaches bold
- Use full-bleed photography for all hero sections; the image carries all the chromatic information
- Maintain `{rounded.sm}` (3px) on buttons and inputs only — all structural containers use `{rounded.none}`
- Use yellow borders (`{colors.border}`) on interactive elements to reinforce the brand accent beyond just fill
- Apply 56–120px vertical spacing between major sections to preserve the cinematic pacing

### Don't
- Don't fill large surfaces with `{colors.primary}` — Lotus Yellow as a fill color beyond small CTAs loses its precision
- Don't introduce mid-range border-radius (8–16px) — it creates a foreign design language between `{rounded.sm}` and `{rounded.pill}`
- Don't use font weights above 400 — the absence of bold is a brand-level decision
- Don't add box-shadows — the flat photographic system treats elevation through color, not shadow
- Don't introduce additional accent colors — the system is deliberately binary: yellow for brand, white for information, on near-black
- Don't use small type (below 12px) on the dark canvas without sufficient contrast testing
- Don't compress display text with tight or negative letter-spacing — openness is the brand's typographic signature
- Don't place text on photography without a dark gradient overlay — the images are too variable in tone

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <374px | Single column, compressed navigation, stacked hero text |
| Mobile | 374–767px | Single column layout, hamburger navigation, full-width cards |
| Tablet | 768–991px | 2-column vehicle grid, expanded navigation |
| Desktop | 992–1366px | 3-column grids, full navigation revealed |
| Large Desktop | 1366–1600px | Full layout at maximum density |
| Wide | >1600px | Content constrains, photography extends edge-to-edge |

### Touch Targets
- Buttons padded at 12px 24px minimum — meeting 44px minimum touch target height
- Navigation items have generous tap regions via 8px 16px padding

### Collapsing Strategy
- Navigation collapses to hamburger below 768px — the Lotus wordmark and utility icons remain visible
- Vehicle grid collapses from 3-column to 2-column at tablet, to 1-column on mobile
- Hero typography scales down — 112px display reduces proportionally at mobile breakpoints
- Horizontal spacing reduces from 40px gutters to 16–20px on mobile

### Image Behavior
- All hero imagery is full-bleed and aspect-ratio-locked — images never letterbox
- Vehicle photography crops to focus on the car; composition-aware responsive cropping ensures the subject remains visible
- Below 767px, portrait-orientation images may replace landscape hero shots for mobile contexts

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- CTA fill: `{colors.primary}`
- CTA text: `{colors.on-primary}`

### Example Component Prompts

- "Build a full-bleed hero section for Lotus. Background `{colors.background}`. Headline 112px Overpass weight 400, color `{colors.ink}`, letter-spacing 2px. Subline 24px Overpass color `{colors.ink-secondary}`. A single CTA button with background `{colors.primary}`, text `{colors.on-primary}`, 3px border-radius, 12px 24px padding, font-size 16px. Overlay a black-to-transparent linear gradient over a full-bleed car photograph for text legibility."
- "Create a vehicle card grid tile for Lotus. Full-bleed image container, no border-radius, no padding, background `{colors.surface}`. On hover: background shifts to `{colors.surface-mid}`. Below the image: a 24px heading in Overpass 400 `{colors.ink}`, and a model line in 12px `{colors.ink-secondary}`. No box-shadow."
- "Design a primary CTA button in the Lotus system. Background: `{colors.primary}` (Lotus Yellow `#fdef00`). Text: `{colors.on-primary}` (black). Font: Overpass 16px weight 400, 0.5px letter-spacing. Border-radius: 3px. Padding: 12px 24px. On hover: background shifts to `{colors.primary-hover}`."
- "Create a ghost/outline button for Lotus. Background: `{colors.background}`. Text color: `{colors.primary}`. Border: 1px solid `{colors.border}` (yellow). Font: Overpass 16px weight 400. Border-radius: 3px. Padding: 12px 24px. On hover: background `{colors.primary-container}`, text remains `{colors.primary}`."
- "Build the Lotus top navigation bar. Background: `{colors.background}`. Center: 'LOTUS' wordmark in Overpass 16px weight 400, `{colors.ink}`. Right: 'My Lotus' text link in Overpass 14px `{colors.ink}` and a hamburger menu icon. Padding: 16px 40px. Full-width, positioned above the hero photograph."
- "Design a model classification badge for Lotus. Background: `{colors.primary-container}`. Text: `{colors.primary}` in Overpass 12px weight 400 uppercase. Border-radius: 20px (pill). Padding: 4px 10px. Use for model status labels like 'AVAILABLE NOW' or 'REVEAL SOON'."

### Iteration Guide

1. Start with `{colors.background}` — the near-black canvas is non-negotiable; it sets the entire cinematic register
2. Add full-bleed vehicle photography immediately — Lotus pages that lack hero imagery lose the design system's primary emotional instrument
3. Apply Lotus Yellow (`{colors.primary}`) to exactly one element first: the primary CTA. Confirm it reads as a signal before expanding its use
4. Set display type in Overpass 400 with open letter-spacing (2–4px at display sizes) — do not reach for heavier weights
5. Use `{colors.ink-secondary}` for all supporting text (captions, metadata, specs) — white is reserved for primary content only
6. Keep all containers at `{rounded.none}` — only buttons and inputs get the 3px softening
7. Achieve depth through photography and surface color steps (`{colors.surface}`, `{colors.surface-mid}`), never box-shadows

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Lotus. Brand names and trademarks belong to their respective owners.