---
version: alpha
name: Lucid Motors
description: West-coast luxury EV minimalism — a serif display voice over full-bleed automotive photography, a single warm champagne accent, near-black chrome on a light airy canvas, 4px radius, almost no shadow.

colors:
  # Canvas
  background: "#ffffff"
  surface: "#dbd4c5"        # warm "brown-light" panel tint from --color-brown-light
  surface-dark: "#0f0f0f"   # near-black header / cinematic photo sections
  ink: "#000000"
  ink-inverted: "#ffffff"

  # Brand accent — warm champagne / sand, the sole chromatic moment
  primary: "#d7be96"
  on-primary: "#000000"
  accent-gold: "#8a6e33"    # --color-yellow-light — darker gold for text on light

  # Text hierarchy
  on-background: "#000000"
  text-body: "#323232"      # rgb(50,50,50) — primary body grey
  text-secondary: "#555555" # rgb(85,85,85) — secondary UI text
  text-tertiary: "#7f7f7f"  # rgb(127,127,127) — captions, footnotes, muted links
  text-fossil: "#bebbbb"    # --color-greyscale-colors-fossil — faint helper text

  # State / interaction (flattened from rgba)
  link-hover: "#3860be"     # rgb(56,96,190) — universal link hover
  overlay-scrim: "#1c1c1c"  # was rgba(28,28,28,.36) hover overlay — flattened over black
  shadow-soft: "#c7c5c7"    # was rgb(199,197,199) soft card glow — kept opaque

  # Borders + dividers
  border: "#d8d8d8"         # rgb(216,216,216) — hairline divider
  border-strong: "#1b1b1b"  # rgb(27,27,27) — outlined button / emphasized border
  border-warm: "#9d857f"    # rgb(157,133,127) — warm outlined button border

  # Semantic (brand actually exposes these via CSS vars)
  error: "#ff202b"          # --text-alert-error
  error-soft: "#eb5858"     # --color-error-red
  success: "#468254"        # rgb(70,130,84) — success border tint
  info: "#1eaedb"           # rgb(30,174,219) — focus/active field fill

typography:
  display-hero:
    fontFamily: "Lucid Serif VF, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -0.5px
  display:
    fontFamily: "Lucid Serif VF, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Lucid Serif VF, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  display-italic:
    fontFamily: "Lucid Serif Italic VF, Cormorant Garamond, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Lucid Sans VF, IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-large:
    fontFamily: "Lucid Sans VF, IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Lucid Sans VF, IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "GTAmerica, Lucid Sans VF, IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.144px
  button-ui:
    fontFamily: "Lucid Sans VF, IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Lucid Sans VF, IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 2px
  caption:
    fontFamily: "Lucid Sans VF, IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 72px
  4xl: 96px
  5xl: 120px

rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 8px
  pill: 9999px

components:
  # Primary CTA — champagne ground, black text ("DEMO DRIVE")
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "#b7a280"   # darkened champagne hover from extracted hover token
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px

  # Secondary CTA — white ground, black text ("VIEW INVENTORY")
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px

  # Outlined CTA — transparent with dark hairline border ("Cookie Settings")
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.border-strong}"
    borderColor: "{colors.border-strong}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.md}"
    padding: 12px 8px

  # Inverted primary — on dark photographic sections
  button-inverted:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 24px

  # Top nav link
  nav-link:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.nav-link}"
    padding: 8px 16px
  nav-link-hover:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.link-hover}"
    typography: "{typography.nav-link}"
    padding: 8px 16px

  # Text link
  text-link:
    textColor: "{colors.text-tertiary}"
    typography: "{typography.caption}"
  text-link-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.caption}"

  # Content card — warm-tinted or white surface
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.text-body}"
    rounded: "{rounded.md}"
    padding: 24px
  card-warm:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.text-tertiary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 8px
  input-focus:
    backgroundColor: "{colors.info}"
    textColor: "{colors.ink-inverted}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 8px

  # Eyebrow / overline label
  eyebrow:
    textColor: "{colors.text-tertiary}"
    typography: "{typography.eyebrow}"

  # Badge / pill
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  # Dark cinematic nav bar
  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
---

# Lucid Design System

## Overview

Lucid Motors' website reads like the inside of one of its cars — quiet, spacious, and uncommonly refined for an automotive brand. The page opens on a near-black cinematic stage (`{colors.surface-dark}`) where full-bleed photography of the Air and Gravity drifts past, then resolves downward into a bright, airy white canvas (`{colors.background}`) where the editorial story unfolds. Unlike Tesla's clinical white-or-black binary or Polestar's monochrome severity, Lucid splits the difference: the hero is dark and atmospheric, the body is light and breathable, and a single warm champagne accent threads the two together. The result feels less like a configurator and more like the opening spread of a luxury magazine.

The defining gesture is the **serif display voice**. Where every other EV maker reaches for a precise grotesk to signal engineering, Lucid sets its hero statements ("Lucid Gravity Named 2026 World Luxury Car of the Year") in a custom variable serif, `Lucid Serif VF`, at a relaxed weight 400 with gently negative tracking. The serif carries warmth and editorial confidence — it whispers heritage luxury rather than Silicon Valley disruption. Beneath it, body copy and UI switch to `Lucid Sans VF` (a humanist sans whose own fallback is IBM Plex Sans), creating a serif-display / sans-body pairing that feels closer to a fashion house than a car company. An italic serif cut (`{typography.display-italic}`) appears for emphasis pull-quotes.

Color is held in deliberate reserve. The system is functionally a warm neutral scale — pure black ink (`{colors.ink}`), a graphite body grey (`{colors.text-body}`), soft fossil greys, all sitting on white — animated by exactly one chromatic note: the champagne/sand `{colors.primary}`. That champagne is the brand's signature, appearing on the primary CTA ("DEMO DRIVE") and as the warm tint (`{colors.surface}`) on alternating content panels. It is the color of brushed metal and desert light — a West-coast luxury cue rather than the cold blues most EV brands default to. Corners stay tight at 4px (`{rounded.md}`), shadows are nearly absent, and motion is a uniform 0.3s ease-in-out. Lucid trusts photography and whitespace to do the work; the chrome stays out of the way.

**Key Characteristics:**
- Serif display voice — `{typography.display-hero}` in `Lucid Serif VF` at weight 400 for all hero statements, an editorial-luxury choice rare in automotive
- Serif-display / sans-body pairing — `Lucid Sans VF` (fallback IBM Plex Sans) carries every paragraph and UI label
- A single warm champagne accent (`{colors.primary}`) — the brand's only chromatic moment, on the primary CTA and warm panel tints
- Two-canvas structure — near-black cinematic hero (`{colors.surface-dark}`) resolving into a bright white body (`{colors.background}`)
- Warm neutral grey scale (`{colors.text-body}`, `{colors.text-tertiary}`, `{colors.text-fossil}`) — never cool, never blue-grey
- Tight 4px radius (`{rounded.md}`) on buttons, cards, and inputs — refined, not playful
- Near-zero shadow — depth comes from photography and tonal contrast, not elevation
- Uppercase eyebrows with wide 2px tracking (`{typography.eyebrow}`) labeling sections
- Uniform 0.3s ease-in-out transitions on links, buttons, and media
- Full-bleed automotive photography as the primary decorative element

## Colors

### Primary
- **Lucid Champagne** (`{colors.primary}`): The signature warm sand/champagne accent — the system's sole chromatic color. Lives on the primary CTA ground ("DEMO DRIVE") and nowhere decorative. Black text (`{colors.on-primary}`) sits on it for contrast.
- **Pure White** (`{colors.background}`): The body canvas — content sections, cards, the bright editorial half of the page.
- **Near-Black** (`{colors.surface-dark}`): The cinematic header and full-bleed photographic hero sections; all text inverts to `{colors.ink-inverted}` here.

### Brand Accent
- **Lucid Champagne** (`{colors.primary}`): Reserve it for the primary CTA and warm panel tints only — its scarcity is what makes it read as luxury rather than decoration.
- **Deep Gold** (`{colors.accent-gold}`): A darker gold (`#8a6e33`) used when warm-accent text needs sufficient contrast on the light canvas — the champagne is too light to read as text.

### Surface & Background
- **Pure White** (`{colors.background}`): Default content surface.
- **Warm Sand Panel** (`{colors.surface}`): The `--color-brown-light` tint used on alternating content panels and warm cards — adds warmth without introducing a second hue.
- **Near-Black Stage** (`{colors.surface-dark}`): Cinematic hero and nav background.

### Neutrals & Text
- **Black** (`{colors.ink}`): Primary headings and high-emphasis text on light.
- **Graphite** (`{colors.text-body}`): Standard body copy (`#323232`).
- **Slate** (`{colors.text-secondary}`): Secondary UI text (`#555555`).
- **Pewter** (`{colors.text-tertiary}`): Captions, footnotes, muted links (`#7f7f7f`).
- **Fossil** (`{colors.text-fossil}`): Faintest helper text and disabled labels (`#bebbbb`).

### Borders & Dividers
- **Hairline Grey** (`{colors.border}`): 1px dividers between sections and footer columns (`#d8d8d8`).
- **Strong Border** (`{colors.border-strong}`): Outlined-button and emphasized borders (`#1b1b1b`).
- **Warm Border** (`{colors.border-warm}`): A warm-grey 1px outline (`#9d857f`) on select outlined buttons.

### State & Interaction
- **Link Hover Blue** (`{colors.link-hover}`): The universal hover color (`#3860be`) — the one place a blue appears, strictly functional.
- **Field Focus** (`{colors.info}`): An active-field fill (`#1eaedb`) that inverts text to white on focus.
- **Overlay Scrim** (`{colors.overlay-scrim}`): was `rgba(28,28,28,.36)` — flattened to `#1c1c1c` for hover overlays on photography.
- **Soft Shadow Tint** (`{colors.shadow-soft}`): the rare card glow color (`#c7c5c7`), kept opaque.

### Semantic
- **Error** (`{colors.error}`) / **Error Soft** (`{colors.error-soft}`): Form validation reds from `--text-alert-error` and `--color-error-red`.
- **Success** (`{colors.success}`): Confirmation-state border tint (`#468254`).

Lucid avoids gradients almost entirely — the only one found is a top-to-transparent black scrim to seat hero text over photography. Depth is tonal and photographic, not gradient-based.

## Typography

### Font Family
- **Display / Serif**: `Lucid Serif VF`, with fallbacks `Cormorant Garamond, Georgia, Times New Roman, serif` — hero statements and section headings.
- **Display Italic**: `Lucid Serif Italic VF` — emphasis lines and pull-quotes.
- **Body / UI Sans**: `Lucid Sans VF`, with fallbacks `IBM Plex Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif` — all paragraph copy, labels, and UI. IBM Plex Sans is Lucid's own declared first fallback, making it the closest free substitute.
- **Secondary UI**: `GTAmerica` — appears on some nav and micro-UI labels with slight positive tracking.
- **Variable fonts**: All three Lucid faces are variable (`VF`), allowing fine weight modulation; the marketing site stays at weight 400–500.

*Note: For external implementations, **Cormorant Garamond** (Google Fonts) is the closest free serif-display substitute for the warmth of `Lucid Serif VF`; **IBM Plex Sans** (Google Fonts) is the closest body substitute — and is literally Lucid's first declared fallback.*

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 72px serif hero statements over photography |
| `display` | 64px serif — large section openers |
| `heading-section` | 48px serif — feature section titles |
| `display-italic` | 48px italic serif — pull-quotes, emphasis lines |
| `heading-sub` | 24px sans — sub-section heads and lead-ins |
| `body-large` | 20px sans — intro paragraphs |
| `body` | 16px sans — standard reading text |
| `nav-link` | 14.4px sans — top navigation labels |
| `button-ui` | 16px sans — CTA labels |
| `eyebrow` | 12px uppercase 2px-tracked overlines |
| `caption` | 12px sans — footnotes, captions, legal |

### Principles
- **Serif for story, sans for system**: Display and headings are serif (`Lucid Serif VF`); everything functional (body, nav, buttons) is sans (`Lucid Sans VF`). The contrast is the brand's voice.
- **Weight restraint**: Display sits at weight 400; UI rarely exceeds 500. No heavy bold on the marketing site — the serif carries presence at scale, not weight.
- **Negative display tracking**: Hero and large headings tighten to `-0.5px`; body returns to normal tracking for readability.
- **Wide-tracked uppercase eyebrows**: Section overlines use 2px letter-spacing uppercase (`{typography.eyebrow}`) — the one place caps appear.
- **Generous body line-height**: Body copy runs 1.5–1.6 line-height for an open, editorial reading rhythm.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit is 8px, with heavy use of 12px (`count 78`) and 4px micro-spacing, and large section breaks at `{spacing.3xl}` (72px), `{spacing.4xl}` (96px), and `{spacing.5xl}` (120px).

Whitespace is generous and editorial — Lucid leaves room around each statement so the photography and serif headlines can breathe.

### Grid & Container
- Max content width: ~1080px inner column (a recurring extracted value), full-bleed for hero photography
- Hero: edge-to-edge cinematic photography with text seated lower-left over a subtle black scrim
- Content sections: single-column editorial blocks and 2–3-up feature grids
- Warm-tinted panels (`{colors.surface}`) alternate with white to chapter the page

### Whitespace Philosophy
- **Editorial pacing**: Major sections get 72–120px of vertical air — the page reads like spreads, not a feed
- **Tonal chaptering**: White and warm-sand (`{colors.surface}`) panels alternate to separate sections without dividers
- **Photography-anchored**: Imagery is full-bleed; text columns stay narrow and centered or lower-left for an unhurried, premium feel

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default for nearly all elements |
| Hairline (Level 1) | `1px solid {colors.border}` | Section dividers, footer columns, table rows |
| Outline (Level 2) | `1px solid {colors.border-strong}` | Outlined buttons, emphasized cards |
| Soft Card (Level 3) | `0 2px 10px -3px {colors.shadow-soft}` | Rare lifted cards / dropdowns |
| Scrim (Level 4) | top-to-transparent `{colors.surface-dark}` gradient | Seating hero text over photography |
| Focus Ring | field fill swaps to `{colors.info}`, text inverts to white | Active form fields |

**Shadow Philosophy**: Lucid's depth is overwhelmingly **flat and photographic**. Box-shadows are rare and faint (a single soft `0 2px 10px -3px` was found, low confidence). Depth comes from three sources: full-bleed photography, tonal alternation between white and warm-sand panels, and the near-black cinematic stage of the hero. Where competitors stack soft elevation shadows under cards, Lucid lets a card sit flat and gives it whitespace instead. The only "overlay" is the subtle black gradient scrim that lets white serif headlines read over bright sky in the hero imagery.

## Shapes

The complete radius scale is declared in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Inputs, full-width content blocks, image edges |
| `sm` | 2px | Small badges, micro-controls |
| `md` | 4px | The workhorse — buttons, cards, links, inputs |
| `lg` | 8px | Larger surfaces, occasional containers |
| `pill` | 9999px | Carousel dots, icon buttons, fully-rounded chips |

Lucid is a **4px system**. The overwhelming majority of corners are 4px (`{rounded.md}`, 63 occurrences) — tight enough to feel precise and luxurious, never bubbly. Fully-rounded `{rounded.pill}` handles carousel dots and icon buttons; everything else stays tight.

## Components

The full component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`).

### Button variants
- **`button-primary`** — Champagne ground (`{colors.primary}`), black text, 4px radius. The "DEMO DRIVE" CTA — the one place the accent appears as a fill. Hover (`{components.button-primary-hover}`) darkens to a deeper champagne.
- **`button-secondary`** — White ground, black text, 4px radius ("VIEW INVENTORY"). Hover fills to warm sand (`{colors.surface}`).
- **`button-outline`** — Transparent with a dark `{colors.border-strong}` hairline border, smaller UI text. Used for low-emphasis actions ("Cookie Settings").
- **`button-inverted`** — White ground for CTAs sitting on dark photographic sections.

### Cards
- **`card`** — White surface, graphite text, 4px radius, 24px padding, no shadow.
- **`card-warm`** — Warm-sand surface (`{colors.surface}`) for tonal variety, same geometry.

### Inputs
- **`input`** — Transparent/white, 0px radius, thin pewter border (`{colors.text-tertiary}`). On focus (`{components.input-focus}`) the field fills with the active blue (`{colors.info}`) and text inverts to white — a distinctive, assertive focus treatment.

### Eyebrows & Badges
- **`eyebrow`** — Uppercase 2px-tracked overline in pewter, labeling sections.
- **`badge`** — Warm-sand pill with black text, small caption type, 2px radius.

### Navigation
- **`nav-bar`** — Near-black cinematic bar (`{colors.surface-dark}`) with white wordmark and links; `{components.nav-link}` text turns link-hover blue on hover. Sits over the dark hero so the chrome and imagery share one tonal world.

## Do's and Don'ts

### Do
- Set hero statements in serif (`{typography.display-hero}`) at weight 400 — the serif voice is the brand
- Pair serif display with `Lucid Sans VF` body — never set body copy in the serif
- Reserve champagne (`{colors.primary}`) for the primary CTA and warm panel tints only — scarcity is the luxury signal
- Use the two-canvas rhythm — near-black cinematic hero resolving into bright white body
- Keep corners at 4px (`{rounded.md}`) — tight and refined
- Alternate white and warm-sand (`{colors.surface}`) panels to chapter the page without dividers
- Label sections with wide-tracked uppercase eyebrows (`{typography.eyebrow}`)
- Let full-bleed photography carry the visual richness; keep chrome flat
- Keep all transitions at 0.3s ease-in-out for a calm, uniform feel
- Use warm greys (`{colors.text-body}`, `{colors.text-tertiary}`) — never cool blue-greys

### Don't
- Don't set body copy in the serif — `Lucid Sans VF` carries all reading and UI text
- Don't introduce a second chromatic accent — champagne is the only one
- Don't use champagne as decorative fill or glow — it belongs on the CTA
- Don't reach for cool blue-grey neutrals — Lucid's greys are warm
- Don't add heavy box-shadows — the system is flat; use whitespace and tonal contrast for depth
- Don't use large or pill radii on buttons — stay at 4px
- Don't put dark ink on the dark hero — text inverts to white (`{colors.ink-inverted}`) on `{colors.surface-dark}`
- Don't use bold display weights — the serif carries presence at size 400
- Don't clutter sections — generous 72–120px breaks are part of the voice
- Don't use the link-hover blue (`{colors.link-hover}`) as anything but a hover/functional signal

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Small | <375px | Single-column, serif hero drops to ~36–40px, CTAs full-width |
| Mobile | 375–600px | Single-column editorial stack, hamburger nav, hero ~44–48px |
| Tablet | 600–900px | 2-column feature grids begin, hero ~56px |
| Desktop | 900–1280px | Full horizontal nav, 2–3-up grids, hero up to 64px, ~1080px container |
| Large Desktop | ≥1280px | Maximum serif scale (72px hero), photography fills wider viewports |

### Touch Targets
- Primary CTAs: full-width on mobile, ~48px tap height
- Nav links: ~44px tap height in the mobile overlay menu
- Carousel dots: circular (`{rounded.pill}`) with adequate spacing

### Collapsing Strategy
- **Nav**: horizontal dark nav collapses to a hamburger / full-screen overlay on mobile
- **Hero**: serif scales 72px → 64px → 56px → 40px, weight 400 maintained
- **Feature grids**: 3-up → 2-up → single-column stacked
- **Section spacing**: 120px desktop → 64–72px mobile — reduces but keeps editorial pace
- **Warm/white panel alternation** preserved at every breakpoint

### Image Behavior
- Full-bleed photography preserved at all breakpoints with `object-fit: cover`
- Hero crops tighter on mobile but keeps the cinematic lighting
- The top-to-transparent scrim stays so white serif text remains legible over imagery

---

## Agent Prompt Guide

### Quick Color Reference
- Body Background: White `{colors.background}`
- Hero / Nav Background: Near-Black `{colors.surface-dark}`
- Warm Panel: Sand `{colors.surface}`
- Heading Text: Black `{colors.ink}`
- Body Text: Graphite `{colors.text-body}`
- Muted Text: Pewter `{colors.text-tertiary}`
- Brand Accent / CTA: Champagne `{colors.primary}` (black text on it)
- Border: Hairline Grey `{colors.border}`
- Link Hover: Blue `{colors.link-hover}` (functional only)

### Example Component Prompts
- "Create a full-bleed hero on a near-black stage (`{colors.surface-dark}`) with a cinematic car photograph, a subtle top-to-transparent black scrim, and a lower-left serif headline at 72px `Lucid Serif VF` (fallback Cormorant Garamond) weight 400, color white. Below it a 20px `Lucid Sans VF` sub-line and a champagne primary CTA (`{colors.primary}`, black text, 4px radius, 12px 24px padding) labeled 'DEMO DRIVE' beside a white secondary CTA 'VIEW INVENTORY'."
- "Design an editorial content section on white (`{colors.background}`): a 12px uppercase 2px-tracked eyebrow in pewter (`{colors.text-tertiary}`), a 48px serif heading (`{typography.heading-section}`) in black, and a 16px `Lucid Sans VF` body paragraph in graphite (`{colors.text-body}`) — generous 96px vertical padding, narrow centered text column."
- "Build a warm-sand feature card (`{colors.surface}`) with 4px radius, 24px padding, no shadow: a serif title at 24px and a 16px sans paragraph in black, with a pewter text link (`{colors.text-tertiary}`) that turns blue (`{colors.link-hover}`) on hover."
- "Create a primary button: champagne background (`{colors.primary}`), black text, 16px `Lucid Sans VF`, 4px radius, 12px 24px padding; on hover darken the champagne to `#b7a280`. No shadow, 0.3s ease-in-out transition."
- "Design a dark nav bar (`{colors.surface-dark}`) with a white wordmark left, center text links at 14.4px `GTAmerica`/`Lucid Sans VF` in white that shift to blue (`{colors.link-hover}`) on hover, and a champagne 'DEMO DRIVE' CTA on the right — 16px 24px padding, no border, no shadow."
- "Build a focus-state text input: white field, 0px radius, thin pewter border (`{colors.text-tertiary}`); on focus fill the field with the active blue (`{colors.info}`) and invert the text to white."

### Iteration Guide
1. Start with the two-canvas structure — near-black cinematic hero (`{colors.surface-dark}`), bright white editorial body (`{colors.background}`)
2. Set every hero and heading in serif (`Lucid Serif VF` / Cormorant Garamond) at weight 400 — never bold
3. Carry all body and UI in `Lucid Sans VF` (IBM Plex Sans fallback)
4. Use champagne (`{colors.primary}`) only on the primary CTA and warm panel tints — never decorative
5. Keep every corner at 4px (`{rounded.md}`)
6. Keep chrome flat — depth comes from photography and white/warm-sand alternation, not shadow
7. Use warm greys (`{colors.text-body}`, `{colors.text-tertiary}`) and wide-tracked uppercase eyebrows
8. Hold all motion at 0.3s ease-in-out

---

## 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 Lucid Motors. Brand names and trademarks belong to their respective owners.