Lucid Motors Design System

Overview

Lucid Motors' marketing surface stages California luxury against pure-black studio chrome — not the white-canvas restraint of Tesla, not the cinema-black of Bugatti or Ferrari, but a third position that uses photography for warmth and a single champagne accent for civic signal. The canvas is {colors.canvas} (#000000), the hero h1 runs {typography.display-xl} (Lucid Serif VF at 72px / weight 400 / -0.5px tracking), and the only chromatic voltage in the entire system is {colors.primary} (#d7be96) — Brand Gold — bound to --color-primary-colors-gold, --border-brand-gold, --text-brand-gold, and --surface-brand-gold in the production CSS. The gold surfaces three places: the announcement strip pinned to the top of the page ("Lucid Gravity Touring: 0% APR..."), the DEMO DRIVE primary CTA fill, and a hairline brand border on configurator chips. Nowhere else.

Champagne scarcity: where most luxury-automotive marketing sites splash a heritage accent across every hover state, gradient stop, and chart-line stroke, Lucid scopes Brand Gold to exactly three surfaces and counts only eight occurrences in the captured render. The scarcity is the discipline — the same way Tesla's Electric Blue appears only on primary CTAs, Lucid's gold is reserved for the one civic announcement and the one demo-drive action. Promoting it to hover-fill or hairline-overlay would dilute the brand voltage. The CSS variable names (--color-primary-colors-gold, four token aliases pointing at one hex) make the deliberate scoping explicit.

Type runs Lucid Serif VF for display and Lucid Sans VF for UI, declared on the page through --font-lucid-serif and --font-lucid-sans respectively. The hero h1 sits at 72px / 400 / -0.5px tracking with an 80px line-height; the section h2 drops to 64px / 400 / -0.5px or 48px / 400 / normal depending on band; body copy holds at 16px / 400 / 24px line-height. The brand also declares Lucid Serif Italic VF (an accent span face at 48px / 400), Schnyder S and Schnyder M (editorial display reserves), GTAmerica, Amiri (Arabic), and IBM Plex Sans (the sans-fallback origin). Bold weight does not appear anywhere on the page captured — every typographic role sits at weight 400 except the eyebrow labels at 500 with 2px tracking. Visual emphasis comes from family contrast (serif display vs sans UI), size jump (72px hero vs 16px body), and tracking (-0.5px on display vs normal on body), never from weight promotion.

Serif as luxury signal: Lucid is the only American EV brand running a serif on its hero — Rivian, Tesla, Polestar, and Fisker all default to a geometric sans. Where most American EV brands borrow Detroit's chrome-and-grid vocabulary, Newark borrows from editorial fashion and California atelier print. The serif reframes the company from EV manufacturer to luxury house that happens to manufacture EVs.

The radius vocabulary is binary-with-a-dot. The dominant value is {rounded.sm} (4px, 20 occurrences) repeated across the gold DEMO DRIVE button, the email input, the configurator chips, and the announcement strip; {rounded.full} (50%) appears 14 times scoped to the carousel dot indicators and a few avatar masks; {rounded.inset} (3px) appears three times on inset hairlines; and {rounded.md} (8px) appears once. There is no 12px / 16px / 24px tier — Lucid does not soften photo tiles the way Porsche softens to 32px. The corner vocabulary reads engineered rather than soft-consumer, which matches the brand's California-engineering positioning.

Key Characteristics:

• Single brand voltage {colors.primary} (#d7be96 — Brand Gold) scoped to the announcement strip, the DEMO DRIVE CTA, and brand-border hairlines only. No secondary chromatic accent anywhere.
• Pure black canvas {colors.canvas} (#000000) — the page has no dark-gray surface ladder. Depth comes from full-bleed desert and atelier photography, not from elevated panels.
• Serif-led h1 {typography.display-xl} (Lucid Serif VF, 72px / 400 / -0.5px / 80px line-height) over photography. The h2 drops to 64px / 400 / -0.5px or 48px / 400 / normal.
• Sans-led UI {typography.body-md} (Lucid Sans VF, 16px / 400 / 24px line-height) for every non-display role.
• Weight 400 across every type token captured, except eyebrow labels at weight 500 with 2px uppercase tracking.
• 4px radius repeated 20 times across buttons, inputs, and chips. 50% only on carousel dots. No 12/16/24px tier.
• The announcement strip is the brand's signature header pattern — gold fill, black text, 40px height, financing copy plus an inline View Offers link.
• Full-bleed photography over black does the chromatic work: champagne desert sky behind the Gravity, dusty pavement under the Air Pure, mirrored factory floor under "Technology that drives sustainability."
• No box-shadow tier — every surface is flat. The only elevation move is the 65% opacity scrim behind modals.
• Four custom families on one page: Lucid Serif VF, Lucid Sans VF, Lucid Serif Italic VF, Schnyder S/M. Bold weight does not exist in the system.

Colors

Brand & Accent

• Brand Gold ({colors.primary} — "#d7be96") — frequency 8. Used as text (3), background (2), border (3). The system's only chromatic voltage — a warm champagne tone bound to --color-primary-colors-gold, --border-brand-gold, --text-brand-gold, and --surface-brand-gold. Scoped to the announcement strip fill, the DEMO DRIVE CTA, and hairline brand borders on configurator chips. The scarcity is the discipline.

Canvas & Surfaces

• Canvas ({colors.canvas} — "#000000") — frequency 539. Used as text (270), border (266), background (2), gradient (1). The dominant surface and the dominant text color simultaneously, bound to --color-pure-black, --theme-black-background, --surface-neutral-black-100, --text-neutral-black. The page has no dark-gray base; pure black carries every section.
• Off-Black ({colors.surface-off-black} — "#0f0f0f") — frequency 9. Used as background (9). The barely-perceptible alternate surface for inset bands, bound to --greyscale-colors-off-black and --color-black-2.
• Dark ({colors.surface-dark} — "#1b1b1b") — appears in --theme-dark-background and --surface-neutral-gray-80. A near-black warm tone reserved for dark-theme inset panels and the theme-light-paragraph color when the system inverts.
• Light ({colors.surface-light} — "#dbd4c5") — bound to --theme-light-background and --color-brown-light. A warm putty tone used when the system inverts to a light theme — not visible on the home view but documented for the configurator and finance surfaces.
• Sand ({colors.surface-sand} — "#e1e0dc") — bound to --color-sand, --color-snow, --theme-black-paragraph, --theme-dark-paragraph. A near-white sand surface that doubles as the body-paragraph ink on dark themes.
• Broken White ({colors.surface-broken-white} — "#f0f0f0") — bound to --color-broken-white, --surface-neutral-gray-5, --color-grey-light, --color-fossil-light. The lightest neutral, reserved for light-theme card backgrounds.

Text

• White Ink ({colors.ink} — "#ffffff") — frequency 149. Used as text (72), border (72), background (5). The dominant text color on the black canvas, bound to --color-off-white, --border-neutral-white, --text-neutral-white, --color-white, --surface-neutral-white. Hero h1, section h2, body copy on dark, and nav labels all render in white.
• Black Ink ({colors.ink-dark} — "#000000") — text color inside the gold CTA fill and inside the announcement strip. The same #000000 as the canvas, repurposed as foreground over Brand Gold.
• Paragraph-Dark ({colors.ink-paragraph-dark} — "#e1e0dc") — appears in --theme-black-paragraph and --theme-dark-paragraph. The body-paragraph swatch on the black theme — slightly warmer than white, which keeps long-form body copy from feeling harsh against pure black.
• Body Gray-70 ({colors.body} — "#323232") — frequency 182. Used as text (91), border (91). The mid-gray secondary text and hairline-border color on light surfaces, bound to --border-neutral-gray-70, --border-neutral-gray-80, and --color-greyscale-charcoal.
• Muted Gray-50 ({colors.muted} — "#7f7f7f") — frequency 32. Used as text (16), border (16). Tertiary text on light theme, bound to --color-grey and --text-neutral-gray-50.
• Muted Soft ({colors.muted-soft} — "#999999") — frequency 4. Used as text (2), border (2). A lighter mid-gray used for very subtle hairlines and disabled-state text.
• Muted Light ({colors.muted-light} — "#8e8e8e") — bound to --text-neutral-gray-40. The eyebrow-label color above section h2 headlines, reserved for uppercase 2px-tracked labels.

Hairlines

• Hairline Dark ({colors.hairline-dark} — "#323232") — the default 1px stroke between configurator rows and table cells. Same hex as the body-gray token; the role is structural rather than text.
• Hairline Gold ({colors.hairline-gold} — "#d7be96") — the brand-gold border bound to --border-brand-gold. Reserved for chips and configurator rows that need to signal the active gold state without filling the surface.

Heritage Reserves

• Heritage Brown ({colors.heritage-brown} — "#c2b299") — bound to --theme-dark-heading, --theme-black-heading, and --color-brown. A muted heritage tone reserved for h2 headings on inverted dark themes; not surfaced on the home view but available as a Schnyder display color.
• Heritage Bronze ({colors.heritage-bronze} — "#8a6e33") — bound to --color-yellow-light. A deeper bronze reserved for charts and infographic accent strokes; not surfaced on the marketing home.

Interactive

• Classic Link ({colors.link-classic} — "#0000ee") — frequency 176. Used as text (88), border (88). The browser-default blue, scoped to inline anchor links inside long-form legal and disclosure copy. Lucid deliberately does not restyle the default link blue inside legal disclaimers — the system reads legalese rather than brand-styled prose in those bands.

Semantic

• Alert Error ({colors.alert-error} — "#ff202b") — bound to --text-alert-error. Reserved for form validation error states, never used decoratively.

Typography

Font Family

The system declares four custom families on the page through --font-* CSS variables:

• Lucid Serif VF — the brand's load-bearing display face. Runs the hero h1 at 72px / 400 / -0.5px tracking with 80px line-height and the section h2 at 64px / 400 / -0.5px or 48px / 400 / normal. Declared as "Lucid Serif VF", Georgia, Times, serif.
• Lucid Sans VF — the UI face for body, button labels, navigation, captions, and form inputs. Always at weight 400 except the eyebrow labels at weight 500. Declared as "Lucid Sans VF", "IBM Plex Sans", -apple-system, sans-serif.
• Lucid Serif Italic VF — accent spans at 48px / 400, reserved for editorial pull-quotes and italic emphasis inside Schnyder display layouts.
• Schnyder S and Schnyder M — editorial display reserves declared in --font-schnyder-s and --font-schnyder-m. Did not surface on the home view but documented for inner pages.

Additional declared families: GTAmerica (--font-gt-america), IBM Plex Sans (--font-lucid-ibm-plex-sans), Amiri (--font-lucid-amiri, Arabic), and dirham-symbol (--font-lucid-saudi-riyal, currency glyphs). The page localizes for the Saudi market.

Hierarchy

Principles

Held-at-400 typography. Every display and body role sits at weight 400. The only exceptions are eyebrow and micro labels at weight 500. Promoting any display token to 700 breaks the editorial-luxury voice and makes Lucid read like a generic American auto template.

Family contrast as emphasis. The display/UI split is loud: Lucid Serif VF is a transitional serif with -0.5px display tracking, and Lucid Sans VF is a humanist sans at normal tracking. Switching families inside one band signals hierarchy more strongly than a 2x size jump alone.

Negative tracking only on display. Display tokens at 48–72px sit at -0.5px; everything 24px and under stays at normal. The label tokens at 10–12px push out to 2px uppercase. The tracking scale is non-monotonic on purpose — large display compresses, small caps expands.

Note on Font Substitutes

Lucid Serif VF, Lucid Sans VF, and Lucid Serif Italic VF are commissioned variable fonts unavailable for public licensing. Open-source approximations: Lora at weight 400 with -0.5px tracking for Lucid Serif VF, IBM Plex Sans at weight 400 for Lucid Sans VF (it is also the documented fallback in the system's CSS), and Lora Italic for Lucid Serif Italic VF. Schnyder S and Schnyder M are commercially licensed by Commercial Type. Either substitute set should run at the same captured sizes (72 / 64 / 48 / 24 / 20 / 18 / 16 / 14 / 12 / 10) without further adjustment.

Layout

Spacing System

• Base unit: 4px. The system declares an explicit ladder via --space-size-* CSS variables.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px · {spacing.4xl} 72px · {spacing.5xl} 96px · {spacing.6xl} 120px · {spacing.7xl} 160px.
• Button padding: 12px outer on the gold CTA with flexbox centering, height 48px.
• Section rhythm: vertical bands at {spacing.5xl} 96px or {spacing.6xl} 120px on desktop, with horizontal gutters declared as --spacing-regular-horizontal 250px or --spacing-regular-horizontal-wide 174px.
• Nav heights: --main-navigation-height-regular 80px on desktop, --main-navigation-height-narrow 50px on mobile.

Grid & Container

• Max width: the inner column respects a roughly 1200px reading width with 250px horizontal gutters on desktop.
• Hero band: full-bleed, edge-to-edge photography with a left-aligned headline and four-cell finance row below the hero card.
• Photo grid: a 2-up tile layout pairing the Air or Gravity vehicle photo with a Locations atelier photo at equal width.
• Configurator row: 4-column horizontal grid (Lucid Air monthly price · 0% APR · Order Yours Now CTA · Available Now CTA), repeating identically across Air and Gravity hero cards.

Whitespace Philosophy

The page treats whitespace as the chrome itself. Vertical rhythm between hero cards is {spacing.6xl} 120px, and the photo-tile band below "A New Standard of Electric Excellence" sits in 96px of vertical padding. Horizontal gutters at 250px on desktop pull every section into a centered column. The two photo tiles in the locator grid use no shadow, no border, no overlay gradient — only the photograph and the small Lucid Sans VF label below at {typography.label-eyebrow}.

Border Radius Scale

Elevation & Depth

The system has essentially zero shadow tiers. Lucid commits to a flat surface model and lets photography carry the depth.

• Flat (Level 0): no shadow, no border. The default state for cards, buttons at rest, and photo tiles. 95%+ of surfaces.
• Photography as depth: every hero card uses a full-bleed photograph that handles atmospheric depth — sky gradient, ground shadow, perspective lines. The UI dissolves into the image.
• Brand-gold hairline: the only structural depth move is a 1px Brand Gold border on configurator chips, signaling active state without a fill.
• Modal scrim: rgba(0, 0, 0, 0.65) behind region popups and the cookie banner — a true black scrim, not a mid-gray.

Shadow Philosophy

Lucid avoids box-shadows entirely on the marketing surface. Depth comes from three alternative strategies: z-index layering (the announcement strip and nav sit above hero content through positioning), full-bleed photography (desert sky, atelier floor, two-lane blacktop), and brand-gold hairlines as the only structural elevation cue. Adding UI shadows on a pure-black canvas would create grey halos that compete with the photography, so the system treats them as forbidden.

Shapes

Lucid's corner vocabulary is binary-with-a-dot. The dominant interactive radius is {rounded.sm} (4px), repeated 20 times across the gold DEMO DRIVE button, the email input, the announcement strip, and the configurator chips. The radius is bound to two CSS variables that resolve to the same value — --radius-small: 4px and --border-radius-regular: 4px — which makes the constant explicit in production.

The only other captured radii are {rounded.full} (50%, 14 occurrences) scoped to carousel dot indicators and avatar masks, {rounded.inset} (3px, 3 occurrences) on inset hairlines, and {rounded.md} (8px, 1 occurrence) on a single secondary chip. There is no 12px / 16px / 24px tier — Lucid does not soften photo tiles the way Porsche softens to 32px or BMW softens to 16px. The chrome reads engineered rather than soft-consumer, which mirrors the brand's California-engineering positioning over the consumer-tech radius vocabulary of Apple and Google.

Components

Announcement Strip

announcement-strip — Brand Gold fill ({colors.primary}), black text on gold ({colors.ink-dark}), 40px height, 8px / 24px padding, no radius (or 4px on rounded chips inside), no shadow. Carries a single financing message ("Lucid Gravity Touring: 0% APR... View Offers"). The brand's signature header pattern — gold scarcity surfaces here.

Navigation

top-nav — Pure black canvas, white wordmark and nav labels in Lucid Sans VF 16px, 80px height on desktop and 50px on mobile (--main-navigation-height-regular / -narrow). No border, no shadow. top-nav-narrow — The 50px collapsed variant for mobile and narrow viewports. Same color tokens, reduced height. nav-link — Transparent background, white text ({colors.ink}), Lucid Sans VF 16px / 400, 34px height, 4px / 0px padding. Used for Lucid Air, Lucid Gravity, Pre-Owned, Discover.

Buttons

button-primary — The gold DEMO DRIVE CTA. Brand Gold fill ({colors.primary}), black text ({colors.ink-dark}), Lucid Sans VF 16px / 400, 4px radius ({rounded.sm}), 12px padding, 48px height. The only button on the page with a chromatic fill. button-secondary — Transparent fill, white text, white 1px outline, 4px radius, 12px padding, 48px height. Sits alongside the primary CTA for ORDER YOURS NEXT and AVAILABLE NOW. button-tertiary-link — Plain white text, no background, no border, 12px / 500 uppercase with 2px tracking. Used for LEARN MORE ABOUT LUCID and EXPLORE LOCATIONS — the brand's text-link voice as a label.

Hero

hero-band — Full-bleed black canvas with a hero photograph extending edge-to-edge, the h1 left-aligned in white Lucid Serif VF 72px / 400, and a 4-cell configurator row below ($729/mo · 0% APR · Order Yours Next · Available Now). hero-h1 — White Lucid Serif VF 72px / 400 / -0.5px / 80px line-height over photography. Transparent background. section-h2 — Centered white Lucid Serif VF 64px / 400 / -0.5px or 48px / 400 / normal depending on band. Used for "A New Standard of Electric Excellence."

Labels & Eyebrows

eyebrow-label — Muted-light text ({colors.muted-light}), Lucid Sans VF 12px / 500 with 2px uppercase tracking. Used above h2 sections as the editorial label voice (DESIGNED IN CALIFORNIA, ASSEMBLED IN AMERICA · ENGINEERED TO CHANGE THE WORLD).

Configurator

configurator-row — 4-cell horizontal row inside the hero card carrying monthly price, APR, primary CTA, secondary CTA. Black canvas, white ink, Lucid Sans VF 14px / 400, 16px / 24px padding.

Cards & Photos

photo-tile — Full-bleed photograph with the Lucid Sans VF 24px heading and Lucid Sans VF 12px eyebrow below. No radius, no shadow, no border — the photograph is the entire visual. pricing-meta — Black canvas, paragraph-dark ink ({colors.ink-paragraph-dark} — #e1e0dc), Lucid Sans VF 14px / 400. The small "$/mo" and "0% APR" copy inside the configurator row.

Forms

text-input — White surface ({colors.ink}), black text, black 1px outline, Lucid Sans VF 16px / 400, 48px height, 0 / 0 / 0 / 8px padding. No radius — sharp corners. The email field on the dealer-locator surface. inline-link — Classic-blue ({colors.link-classic} — #0000ee) text inside legal and disclosure copy. The system deliberately does not restyle the browser-default blue inside legalese.

Indicators

carousel-dot — White 8x8px circle ({rounded.full}). Three dots indicate carousel position; the active dot is fully opaque, inactive dots are 40% opacity.

Structural

hairline-divider — 1px Hairline Dark ({colors.hairline-dark} — #323232) stroke between configurator rows. modal-scrim — rgba(0, 0, 0, 0.65) backdrop behind region popups and the cookie banner.

Do's and Don'ts

Do's

• Reserve Brand Gold (#d7be96) for the announcement strip, the DEMO DRIVE CTA, and brand hairline borders. These three surfaces are the only places the brand voltage should appear.
• Run hero h1 as Lucid Serif VF at 72px / 400 / -0.5px tracking with 80px line-height. The serif-on-EV signature is the brand identity move.
• Hold every display and body role at weight 400. Promote to weight 500 only for the 10–12px eyebrow labels with 2px uppercase tracking.
• Pair full-bleed photography with white serif headlines on pure black. The photograph carries the chromatic weight; the typography carries the voice.
• Use 4px ({rounded.sm}) for every interactive radius — buttons, inputs, chips, announcement strip. Reserve 50% ({rounded.full}) for carousel dots only.
• Use the paragraph-dark swatch (#e1e0dc) instead of pure white for long-form body copy on black. The slight warmth keeps disclosure copy from feeling harsh against #000000.

Don'ts

• Don't fill hover states with Brand Gold. The 8 captured gold occurrences are the cap — promoting gold to hover-fill or hairline-overlay dilutes the brand voltage from a scarcity signal to decoration.
• Don't use #0000ee for navigation labels or button text. It is a legal-disclosure inline-link color (88 text + 88 border occurrences across legalese paragraphs); promoting it to UI chrome breaks Lucid's monochrome-plus-gold rule.
• Don't promote any Lucid Serif VF token to weight 700. The face never appears in bold on the captured page. A 700 hero headline reads as Detroit-American rather than California-luxury — the visual identity inverts.
• Don't substitute Lucid Serif VF with a geometric sans like Inter or Helvetica. The serif-on-EV move is what separates Newark from Fremont (Tesla), Plymouth (Rivian), and Gothenburg (Polestar). Open-source substitute is Lora at -0.5px tracking, not Inter.
• Don't soften photo tiles to 16px / 24px / 32px radius. The captured {rounded.sm} 4px is the cap on interactive surfaces and photo tiles run at {rounded.none} 0px. Adding consumer-tech radius vocabulary makes the system read as Apple-adjacent rather than California-engineering.
• Don't add box-shadows on any surface against the #000000 canvas. Shadows on pure black create grey halos that compete with the photography. The system's elevation model is "none plus one hairline."
• Don't use #323232 for body paragraph text on the dark canvas. It is a border-and-secondary-text token (91 text + 91 border occurrences, both on light surfaces). For dark-canvas body copy, use {colors.ink-paragraph-dark} (#e1e0dc) instead.

Known Gaps

• Below-the-fold lazy load: the headless extractor captured the home view as a 1440x926 frame because the page lazy-loads its dealer-locator and footer bands on scroll. The captured token set is fully accurate but covers the home view rather than the full page rhythm. The :root CSS variable map (92 entries) was used to backfill the inferred tokens.
• Configurator surface: the paint pickers, interior pickers, wheel pickers, and range simulator use a denser form pattern with their own button and toggle states. Out of scope for this marketing-focused spec.
• Schnyder display reserves: Schnyder S and Schnyder M are declared in --font-schnyder-s and --font-schnyder-m but did not surface on the home view. Their captured roles are reserve display rather than confirmed h1/h2 — inner brand pages and the press kit likely surface them.
• Animation timings: the exact slide-in curve for the announcement strip, the carousel auto-advance interval, and the hover transition for the gold CTA were not captured by the static extractor.
• In-car infotainment UI: Lucid's vehicle infotainment shares the brand voltage and the Lucid Sans VF family but uses its own touch-optimized component palette — handled by a separate Lucid spec.
• Localized variants: the site declares --font-lucid-amiri (Arabic) and --font-lucid-saudi-riyal (currency symbol). The Saudi-market variant's typographic rhythm is not captured here.