---
version: alpha
name: Luma
description: A pure binary contrast system — absolute black canvas against absolute white — where Graphik's medium weight carries every headline at negative tracking, pill-radius swallows every interactive element, and zero chromatic color leaves AI-generated video and imagery as the only spectacle on screen.

colors:
  # Surface / canvas
  background: "#000000"          # pure black marketing canvas
  surface: "#0a0a0a"             # deep-black section panels, modal backdrops
  surface-raised: "#141414"      # elevated cards, feature tiles on dark
  surface-light: "#ffffff"       # white-mode sections (pricing, about)
  surface-muted: "#f5f5f5"       # faint off-white fill areas on light sections

  # Ink / text
  ink: "#ffffff"                 # primary text on black canvas
  ink-strong: "#000000"          # primary text on white sections
  ink-secondary: "#8c8c8c"       # supporting copy, quiet labels — extracted #8c8c8c
  ink-muted: "#737373"           # captions, metadata, helper text — extracted #737373
  on-primary: "#000000"          # ink that sits on the white pill CTA

  # Brand accent — deliberately achromatic
  primary: "#ffffff"             # white pill — primary CTA and interactive surface on dark
  primary-dark: "#000000"        # black pill — primary CTA on white sections
  primary-hover: "#e6e6e6"       # white pill hover (slightly dimmed)
  primary-dark-hover: "#1a1a1a"  # black pill hover (slightly lightened)

  # Borders
  border: "#2a2a2a"              # hairline dividers on dark canvas
  border-light: "#e5e5e5"        # hairline dividers on white sections

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.25) — Google format requires hex
  shadow-deep: "#000000"         # was rgba(0,0,0,0.5) — Google format requires hex

  # Gradient scrim (hero overlay — used to softly blend edge of generative video)
  scrim-light: "#ffffff"         # was oklab(near-white / 0.5) — Google format requires hex
  scrim-dark: "#000000"          # was oklab(0 0 0 / 0.5) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -2.08px
  display:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1.92px
  heading:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1.28px
  heading-sub:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.66px
  body-large:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.54px
  body:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.4px
  body-medium:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.4px
  nav-link:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.4px
  button-ui:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: -0.4px
  label-caps:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -0.42px
  caption:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
    letterSpacing: -0.4px
  badge-label:
    fontFamily: "Graphik, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -0.42px

spacing:
  xs: 6px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 80px
  5xl: 160px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-dark:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-dark-hover:
    backgroundColor: "{colors.primary-dark-hover}"
    textColor: "{colors.primary}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
  button-ghost-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
  card:
    backgroundColor: "{colors.surface-raised}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-light:
    backgroundColor: "{colors.surface-muted}"
    rounded: "{rounded.lg}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 16px
    border: "1px solid {colors.border}"
  input-focus:
    border: "1px solid {colors.ink-secondary}"
    backgroundColor: "{colors.surface}"
  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.badge-label}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
    border: "1px solid {colors.ink-secondary}"
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
---

# Luma Design System

## Overview

Luma AI operates at the extreme of constraint: two colors, one typeface, and the full-bleed generative output of its own models doing all the visual work. The {colors.background} canvas is pure black — not charcoal or near-black, but `#000000` — which means every piece of AI-generated video and photography gains maximum luminosity simply by existing on the page. The interface doesn't compete with the product; it disappears behind it.

Graphik Medium anchors every headline at aggressive negative tracking (−2.08px at the largest size), producing the same quiet confidence seen in tech brands that trust their output over decoration. Where competitors lean on gradient washes or chromatic accents to signal forward motion, Luma reserves that energy entirely for the AI imagery. The {colors.primary} white pill CTA is a surgical exception: a single high-contrast interrupt against the dark canvas that says "start here" without shouting.

The dual-mode flip between {colors.background} black sections and {colors.surface-light} white sections follows a rhythm used for pricing and informational segments, anchoring the experience in sharp binary contrast rather than a sliding grayscale. This is a design philosophy of aggressive restraint — nothing that isn't earning its presence on screen gets to stay.

**Key Characteristics:**
- {colors.background} `#000000` pure black canvas — not near-black, literal black — to maximize generative media luminosity
- {colors.primary} white pill with `{rounded.pill}` radius is the singular CTA device; every button is a pill
- Graphik Medium at weight 500 for all display text — confident geometric neutrality
- Tight negative tracking across the entire scale (−2.08px at hero, −0.4px at body)
- Zero chromatic color — no accent hues, no brand colors, just black, white, and two neutrals
- {colors.ink-secondary} `#8c8c8c` and {colors.ink-muted} `#737373` as the only tonal relief in the system
- `{rounded.lg}` 24px cards echo the pill softness in structural containers
- 8px radius on badge/tag frames — the same label component used across product categories
- Generative video as hero media — the product demonstrates itself, no mockups needed
- Dual-mode sections: {colors.background} black for hero/features, {colors.surface-light} white for pricing/utility
- Uppercase tracking in badge labels for product category labeling (`DREAM MACHINE`, `GENIE`)
- Motion limited to subtle scale transitions (0.15s ease) — camera takes precedence over UI animation

## Colors

### Primary
- **Pure Black** (`{colors.background}`): The foundational canvas. Every hero, feature section, and app frame sits on `#000000`. This is an intentional choice to maximize perceived quality and depth of AI-generated video thumbnails.
- **Pure White** (`{colors.surface-light}`): Used for pricing, documentation, and utility sections. The stark flip reinforces the binary philosophy.
- **Near-White Ink** (`{colors.ink}`): Primary text on the dark canvas. Absolute white for headlines and key copy.

### Brand Accent
- **White Pill** (`{colors.primary}`): The only interactive accent. Applied exclusively to primary CTAs and the signed-in product prompts. Its restraint preserves the stamp quality — it only appears once per section.
- **Black Pill** (`{colors.primary-dark}`): The dark-section equivalent for white backgrounds, keeping the binary logic intact.

### Text States
- **Secondary Ink** (`{colors.ink-secondary}`): Used for supporting copy, quiet labels, and badge borders. At `#8c8c8c` it reads as "subdued but legible."
- **Muted Ink** (`{colors.ink-muted}`): Captions, metadata, and helper text. At `#737373` it sits at the edge of minimum readability.
- **Borders** (`{colors.border}`): `#2a2a2a` hairlines on dark sections — barely perceptible, creating structure without drawing attention.
- **Light Borders** (`{colors.border-light}`): `#e5e5e5` dividers on white sections.
- **Shadow tints** (`{colors.shadow-soft}`, `{colors.shadow-deep}`): Both flatten to black — shadow is additive darkness on an already dark canvas.

## Typography

### Font Family
- **Primary**: `Graphik`, with fallbacks: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif`
- Graphik is a geometric grotesque with humanist warmth — less rigid than Helvetica, less quirky than Futura. Its neutrality is the point.

### Hierarchy

The complete type scale is in the `typography:` token block above. Use tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Primary hero headlines (52px / 500 / −2.08px tracking) |
| `display` | Section-level headlines, feature titles |
| `heading` | Card titles, sub-feature heads |
| `heading-sub` | Supporting sub-heads (22px) |
| `body-large` | Hero supporting copy, feature descriptions |
| `body` | Standard paragraph text |
| `body-medium` | Emphasized body (nav links, active states) |
| `nav-link` | Navigation bar items |
| `button-ui` | All button and CTA labels |
| `label-caps` | Uppercase product badges (DREAM MACHINE, GENIE) |
| `caption` | Metadata, fine print, timestamps |
| `badge-label` | Category and product type labels |

### Principles
- Negative tracking is mandatory at every size above 14px — the tighter the text, the more authority it carries
- Weight 500 throughout headings — not 600 or 700; Graphik Medium is confident without asserting
- No italic or condensed variants in the system
- Uppercase is reserved for product category labels only — never body copy or navigation

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Luma's spacing is generous at the outer edges and compressed at the inner detail. The `{spacing.5xl}` 160px value governs vertical section breathing room — the wide intervals between hero, feature grid, and pricing keep the AI media from feeling crowded.

### Grid & Container
- Max content width: 1280px
- Full-bleed hero media (edge to edge, no inset)
- Feature grids: typically 3-column at desktop
- Narrow prose columns (640px max) for product description copy

### Whitespace Philosophy
- Section-level vertical rhythm uses `{spacing.5xl}` (160px) intervals — generous enough for video thumbnails to read clearly
- Inner card padding uses `{spacing.xl}` (24px)
- The wide whitespace is a form of restraint: the product needs room to breathe

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Most UI surfaces on dark canvas |
| Subtle (Level 1) | `0px 4px 6px -1px rgba(0,0,0,0.1)` | Shallow card lift |
| Card (Level 2) | `0px 20px 25px -5px rgba(0,0,0,0.1)` | Feature card hover state |
| Elevated (Level 3) | Deep shadow on {colors.surface-raised} | Modal, overlay panels |
| Dialog (Level 4+) | Full scrim overlay | Video lightbox, generation overlay |
| Focus Ring | `outline: 2px solid {colors.ink-secondary}` | Keyboard navigation |

**Shadow Philosophy**: On a pure-black canvas, traditional shadows are invisible. Luma achieves depth through surface color stepping — {colors.background} `#000000`, {colors.surface} `#0a0a0a`, {colors.surface-raised} `#141414` — rather than drop shadows. The elevation system is light and utilitarian; the real depth cue is the generative media itself.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, horizontal rules |
| `sm` | 8px | Badges, tags, small utility chips |
| `md` | 16px | Input fields, form areas |
| `lg` | 24px | Feature cards, product tiles |
| `pill` | 9999px | All buttons and primary CTAs |

The system is effectively binary at the interaction layer: everything you can click is a pill (`{rounded.pill}`), everything you read sits in a card (`{rounded.lg}` or flat). The `{rounded.sm}` 8px value appears only in badge/label contexts.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — White pill on dark canvas. `{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.pill}`. The singular call-to-action device. Never more than one per section.
- **`button-primary-dark`** — Black pill on white sections. Same pill geometry, inverted values.
- **`button-ghost`** — Transparent fill with `{colors.border}` 1px stroke and `{colors.ink}` label. Used for secondary actions alongside the primary pill.

### Cards
{colors.surface-raised} fill at `{rounded.lg}` 24px with 24px padding. On white sections, `{colors.surface-muted}` replaces the dark fill. Cards hold feature descriptions, pricing tiers, and product category tiles.

### Inputs
Pill radius (`{rounded.pill}`) on the primary prompt input — consistent with the button language. Standard `{rounded.md}` for multi-line form fields. Border transitions from `{colors.border}` at rest to `{colors.ink-secondary}` on focus.

### Badges / Tags
8px radius (`{rounded.sm}`), 1px solid `{colors.ink-secondary}` border, transparent fill. Uppercase tracking in `{typography.badge-label}` identifies product categories (DREAM MACHINE, GENIE, IMAGINE). The badge is the only place uppercase appears.

### Navigation
Transparent background sticky bar, `{colors.ink}` text, `{typography.nav-link}`. The nav disappears against the black canvas — it's present but not dominant.

## Do's and Don'ts

### Do
- Use `{colors.background}` `#000000` as the canvas for any hero or product section — near-black is not the same thing
- Apply `{rounded.pill}` to every interactive button without exception — the pill is the system's signature gesture
- Let AI-generated media carry the visual weight; UI chrome should recede
- Use `{colors.ink-secondary}` `#8c8c8c` for secondary labels and badge borders — it's the system's only tonal step below white
- Track display text at −2px or tighter per the `{typography.display-hero}` spec; loose tracking reads wrong here
- Maintain the dual-mode pattern: {colors.background} black for feature sections, {colors.surface-light} white for utility/pricing
- Use uppercase text only in `{typography.badge-label}` contexts for product category names
- Keep the single-CTA-per-section rule; stacking two white pills dilutes the stamp effect

### Don't
- Don't introduce any chromatic color (blue, purple, green, orange) — the system is strictly achromatic
- Don't use near-black surfaces (`#111`, `#1a1a1a`) as the primary canvas — `{colors.background}` is literal `#000000`
- Don't round buttons with `{rounded.sm}` (8px) or `{rounded.lg}` (24px) — CTAs are pills only
- Don't add drop shadows to dark-surface cards; use surface-color stepping for elevation instead
- Don't place text at weight 600 or 700 in display contexts — Graphik Medium (500) is the ceiling
- Don't use decorative gradients on backgrounds; the only gradient is the hero video scrim overlay
- Don't put more than one `{colors.primary}` white pill CTA on-screen at once without clear hierarchy
- Don't deviate from negative letter-spacing at text sizes above 14px — loose tracking breaks the system's authority

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, hero copy scales to 32px |
| Mobile | 375–767px | Full-bleed video, stacked feature rows, pill buttons full-width |
| Tablet | 768–1023px | 2-column feature grid, video thumbnails appear |
| Desktop | 1024–1279px | 3-column grid, nav bar fully expanded |
| Large Desktop | ≥1280px | Max content width 1280px, extra whitespace flanks |

### Touch Targets
- All pill buttons have minimum 44px height regardless of padding — touch target floor
- Badge/label chips minimum 36px height to ensure tappability
- Nav links minimum 44px tap zone even when visually shorter

### Collapsing Strategy
- Hero video transitions from autoplay ambient loop to static poster on mobile (bandwidth)
- 3-column feature grids collapse to 1-column stacked cards
- Navigation collapses to hamburger; pill CTA persists in mobile nav header
- Section vertical spacing scales from `{spacing.5xl}` (160px) desktop to `{spacing.3xl}` (48px) mobile

### Image Behavior
- All generative media is 16:9 or 1:1 aspect ratio — maintained with `aspect-ratio` CSS
- Full-bleed hero remains full-bleed on mobile (no padding insets)
- Thumbnail grids shift from fixed 3-up to 2-up scroll on tablet, 1-up on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent / primary CTA: `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- White section canvas: `{colors.surface-light}`

### Example Component Prompts

- "Create a hero section using `{colors.background}` canvas with a full-bleed 16:9 video placeholder, centered `{typography.display-hero}` headline in `{colors.ink}` at 52px weight 500 with −2.08px tracking, a `{typography.body-large}` subtitle in `{colors.ink-secondary}`, and a single `{components.button-primary}` pill CTA."
- "Build a feature card using `{components.card}` spec: `{colors.surface-raised}` background, `{rounded.lg}` 24px radius, 24px padding, `{typography.heading}` title in `{colors.ink}`, `{typography.body}` description in `{colors.ink-secondary}`, and a `{typography.badge-label}` uppercase chip using `{components.badge}` in the upper corner."
- "Create a navigation bar with `{colors.background}` background, `{typography.nav-link}` links in `{colors.ink}`, a wordmark on the left, and a `{components.button-primary}` pill CTA on the right — 16px 24px padding, no border, transparent backdrop."
- "Generate a pricing card in `{colors.surface-light}` section mode: `{colors.surface-muted}` card fill, `{rounded.lg}`, 24px padding, `{typography.heading}` price in `{colors.ink-strong}`, `{typography.body}` feature list, and `{components.button-primary-dark}` black pill CTA."
- "Design a product badge chip using `{components.badge}`: transparent fill, 1px solid `{colors.ink-secondary}` border, `{rounded.sm}` 8px, 6px 12px padding, `{typography.badge-label}` at 14px / 600 / uppercase / −0.42px tracking, label in `{colors.ink-secondary}`."

### Iteration Guide

1. Start with `{colors.background}` `#000000` as the literal canvas color — swap any dark gray immediately
2. Apply `{rounded.pill}` to every clickable button; no exceptions in interactive elements
3. Use only Graphik at weight 500 for display text; weight 400 for body; never 600+ in headlines
4. Negative track every heading: at 52px use −2.08px, scale proportionally down to −0.4px at 16px body
5. Limit chromatic color to zero; the system runs on black, white, and two neutral grays
6. Build elevation through surface-color stepping ({colors.surface} → {colors.surface-raised}), not drop shadows
7. Place AI-generated video or imagery as the dominant visual; UI chrome should occupy no more than 20% of any hero viewport

---

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