<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Luma AI
tagline: A cinematic black screening room that opens into a white studio — Graphik set tight, every CTA a full white pill.
updated_at: 2026-05-29T00:00:00.000Z
published_at: 2026-05-28T23:11:02.842Z
author: webdesignhot
source_url: https://lumalabs.ai
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [ai, media]
tags: [dark, minimal, sans, ai, video, cinematic, monochrome]
preview_swatch: ['#ffffff', '#000000', '#0a0a0a']
related: [runway-ml, pika, openai]
description: 'Luma''s site runs a two-act monochrome: a cinematic near-black hero where white **Graphik** headlines (52px, weight 500) float over generated video, opening into a bright white `#ffffff` content studio with pure black `#000000` body type. There is no chromatic accent — the only colour is the model output itself. Every CTA is a full-pill ("Try Luma" white-on-dark, then black-on-white in the light register), and the chrome stays minimal so the generated frames carry the page.'

# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-ink
  muted: text-muted
  border: border
  ring: ring

colors:
  # Primary
  bg: '#ffffff'                   # white content studio — the light register
  bg-dark: '#000000'              # cinematic black hero/footer — the dark register
  bg-near: '#0a0a0a'              # near-black panel, slightly off pure black
  text: '#000000'                 # pure black body on white
  text-invert: '#ffffff'          # white display on the dark hero
  text-muted: '#666666'           # mid-grey secondary / caption on white
  text-soft: '#999999'            # quiet UI label / metadata on white
  text-muted-dark: '#a3a3a3'      # muted copy on the dark register

  # Brand & Dark
  brand: '#000000'                # the brand has no chromatic accent — cinematic black is the brand
  brand-invert: '#ffffff'         # white as the inverse brand register
  on-brand: '#ffffff'             # text on black fills

  # Accent (chromatic accents are intentionally absent)
  accent-ink: '#000000'           # black-on-white emphasis
  accent-snow: '#ffffff'          # white-on-black emphasis
  accent-graphite: '#171717'      # raised dark surface
  accent-fog: '#f5f5f5'           # faint grey wash on white

  # Interactive
  link: '#000000'                 # black link on white, subtle underline
  link-hover: '#666666'           # softens to mid-grey
  link-invert: '#ffffff'          # white link on dark
  link-invert-hover: '#cccccc'    # softens on dark
  selected: '#f0f0f0'             # selected row bg on white
  disabled: '#cccccc'             # muted disabled foreground

  # Neutral scale
  neutral-0: '#ffffff'
  neutral-50: '#fafafa'
  neutral-100: '#f5f5f5'
  neutral-200: '#e5e5e5'
  neutral-300: '#d4d4d4'
  neutral-400: '#a3a3a3'
  neutral-500: '#737373'
  neutral-600: '#525252'
  neutral-700: '#404040'
  neutral-800: '#262626'
  neutral-900: '#171717'
  neutral-950: '#0a0a0a'
  neutral-1000: '#000000'

  # Surface & Borders
  surface: '#ffffff'              # default card on white ground
  surface-fog: '#f5f5f5'          # faint grey inset on white
  surface-dark: '#0a0a0a'         # raised panel on the dark register
  surface-graphite: '#171717'     # deeper dark surface
  border: '#e5e5e5'               # hairline divider on white
  border-strong: '#d4d4d4'        # visible divider on white
  border-dark: '#ffffff1f'        # 12% white hairline on dark
  border-dark-soft: '#ffffff0d'   # 5% white hairline on dark
  ring: '#000000'                 # focus ring on white
  ring-invert: '#ffffff'          # focus ring on dark

  # Shadow colors
  shadow-ambient: 'rgba(0,0,0,0.06)'
  shadow-standard: 'rgba(0,0,0,0.10)'
  shadow-elevated: 'rgba(0,0,0,0.16)'
  shadow-dark: 'rgba(0,0,0,0.6)'

  # Semantic
  success: '#16a34a'
  success-bg: '#f0fdf4'
  success-text: '#15803d'
  warning: '#d97706'
  warning-bg: '#fffbeb'
  warning-text: '#b45309'
  danger: '#dc2626'
  danger-bg: '#fef2f2'
  danger-text: '#b91c1c'
  info: '#2563eb'
  info-bg: '#eff6ff'
  info-text: '#1d4ed8'

typography:
  display:
    family: '"__graphik_7126cf", Graphik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [500, 600, 700]
  body:
    family: '"__graphik_7126cf", Graphik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 600, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-large:   { size: 64, weight: 600, lineHeight: 1.04, tracking: '-0.025em', family: display }
    h1:              { size: 52, weight: 500, lineHeight: 1.06, tracking: '-0.02em',  family: display }
    h2:              { size: 40, weight: 600, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h3:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h4:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h5:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-large:      { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-small:      { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    overline:        { size: 11, weight: 600, lineHeight: 1.3,  tracking: '0.08em',   family: body }
    button:          { size: 15, weight: 500, lineHeight: 1.0,  tracking: '-0.005em', family: body }
    nav-link:        { size: 14, weight: 500, lineHeight: 1.0,  tracking: '0',        family: body }
    mono:            { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  card: 12
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64
  hero-min-height: 720

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  ambient: 'rgba(0,0,0,0.06) 0 1px 2px'
  standard: 'rgba(0,0,0,0.10) 0 4px 16px -2px'
  elevated: 'rgba(0,0,0,0.16) 0 16px 32px -8px'
  dark: 'rgba(0,0,0,0.6) 0 24px 48px -12px'
  ring: '0 0 0 2px #000000'
  ring-invert: '0 0 0 2px #ffffff'

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
  ease-in: 'cubic-bezier(0.4, 0, 1, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  duration-page: 480
  reduced-motion: 'respects prefers-reduced-motion: reduce — video autoplay disabled, parallax and transforms degrade to opacity-only fades'

accessibility:
  contrast-text-on-bg: 21.0           # #000 on #ffffff, AAA (maximum)
  contrast-invert-on-dark: 21.0       # #ffffff on #000000, AAA (maximum)
  contrast-muted-on-bg: 5.7           # #666666 on #ffffff, AA
  contrast-soft-on-bg: 2.8            # #999999 on #ffffff, fails AA — decorative metadata only
  contrast-muted-on-dark: 8.9         # #a3a3a3 on #000000, AAA at large
  focus-ring: '2px solid #000000 with 2px offset on white; 2px solid #ffffff on dark'
  focus-ring-offset-color: '#ffffff'
  reduced-motion-honored: true
  keyboard-nav: 'full tab traversal; ESC closes lightbox/menu; arrow keys advance gallery; Space toggles video playback when focused'

components:
  button-primary:
    bg: '#000000'
    text: '#ffffff'
    border: 'none'
    radius: 9999
    padding: '12px 24px'
    font: 'body 15/1.0 weight 500 tracking -0.005em'
    hover: 'bg #171717'
    active: 'bg #262626'
    focus: '2px ring #000000 + 2px offset'
  button-invert:
    bg: '#ffffff'
    text: '#000000'
    border: 'none'
    radius: 9999
    padding: '12px 24px'
    font: 'body 15/1.0 weight 500 tracking -0.005em'
    hover: 'bg #f0f0f0'
    active: 'bg #e5e5e5'
    focus: '2px ring #ffffff + 2px offset (on dark hero)'
  button-ghost:
    bg: 'transparent'
    text: '#000000'
    border: '1px solid #e5e5e5'
    radius: 9999
    padding: '12px 24px'
    font: 'body 15/1.0 weight 500'
    hover: 'border #000000, bg #fafafa'
    active: 'bg #f0f0f0'
  button-ghost-dark:
    bg: 'transparent'
    text: '#ffffff'
    border: '1px solid #ffffff1f'
    radius: 9999
    padding: '12px 24px'
    font: 'body 15/1.0 weight 500'
    hover: 'border #ffffff5f, bg #ffffff0d'
    active: 'bg #ffffff14'
  card:
    bg: '#ffffff'
    border: '1px solid #e5e5e5'
    radius: 12
    padding: '24px'
    shadow: 'ambient'
    hover: 'shadow standard, border #d4d4d4'
  card-dark:
    bg: '#0a0a0a'
    border: '1px solid #ffffff0d'
    radius: 12
    padding: '24px'
    shadow: 'none'
    hover: 'border #ffffff1f'
  input:
    bg: '#ffffff'
    text: '#000000'
    placeholder: '#999999'
    border: '1px solid #e5e5e5'
    radius: 8
    padding: '10px 14px'
    font: 'body 15/1.5 weight 400'
    focus: 'border #000000, ring 2px #000000'
  badge:
    bg: '#f5f5f5'
    text: '#000000'
    border: 'none'
    radius: 9999
    padding: '4px 12px'
    font: 'body 12/1.4 weight 500 tracking 0.02em'
  badge-dark:
    bg: 'transparent'
    text: '#ffffff'
    border: '1px solid #ffffff3f'
    radius: 9999
    padding: '4px 12px'
    font: 'body 12/1.4 weight 500 tracking 0.02em'

lineage:
  summary: |
    Luma is a screening room that opens into a studio. The hero is
    cinematic black `#000000` with white **Graphik** headlines (52px,
    weight 500) floating over generated video — then the page resolves
    into a bright white `#ffffff` content surface with pure black body
    type. The two-act monochrome is the brand's structural move: the
    dark register frames the work like a theatre, the light register
    presents it like a gallery wall. There is no chromatic accent in
    the chrome — the only saturation on the page comes from the model's
    own output. Graphik (Commercial Type's neo-grotesque workhorse)
    carries everything from hero to footer at a single quiet voice;
    weight does the hierarchy, never colour. Every call to action is a
    full white pill ("Try Luma") that inverts to black-on-white once it
    crosses into the light register. The result reads like Apple's
    product-film register crossed with a film studio's press kit:
    maximal contrast, minimal hue, the chrome silent so the frames can
    speak.
  influences:
    - name: Commercial Type (Graphik)
      role: Graphik neo-grotesque as the single editorial voice across display and body.
      url: https://commercialtype.com/catalog/graphik
    - name: Apple
      role: Product-film register — pure black/white maximal contrast, chrome quiet so the work dominates.
      url: https://apple.com
    - name: Runway
      role: AI-video peer — near-black screening-room hero, no chromatic accent, generated frames carry the colour.
      url: https://runwayml.com
    - name: A24
      role: Film-studio editorial mood — cinematic dark frames, restrained typographic chrome.
      url: https://a24films.com
    - name: Vercel
      role: High-contrast monochrome marketing surface — black/white discipline, full-pill CTAs.
      url: https://vercel.com

dark-mode: dual        # Luma alternates a cinematic dark hero/footer with a white content body — neither is a "theme toggle"
---

## 1. Visual Theme & Atmosphere

Luma is a screening room that opens into a studio. The page begins in cinematic black `#000000` — a full-bleed dark hero where a white **Graphik** headline (52px, weight 500) floats low over generated video, the way a film title sits over an establishing shot. There is no panel, no card, no gradient scrim; the headline is simply white-on-black, and the only colour on the screen is the motion behind it. Then, as you scroll, the page resolves into a bright white `#ffffff` content surface with pure black `#000000` body type — the work pinned to a gallery wall in maximum contrast. This two-act monochrome is the entire brand.

The chrome refuses to compete with the work. Buttons are stark pills — a white "Try Luma" on the dark hero, inverting to black-on-white once the page crosses into the light register. Links are quiet black underlines that soften to grey on hover. There is no brand hue anywhere in the wrapper: no accent blue, no gradient, no glow. The discipline is total, and it is the point — every pixel of saturation on a Luma page comes from the model's own output, the generated frames and B-roll, never from the interface around them.

Where many AI-creative sites reach for neon and aurora gradients to signal "generative," Luma reaches for the opposite: the restraint of a product film. The contrast is maximal (21:1 both directions, white-on-black and black-on-white), the hue is zero, and the typography is a single neo-grotesque held at one quiet voice from hero to footer. Hierarchy is carried by weight and scale, never by colour. The effect is closer to an Apple keynote slide or an A24 title card than to a typical SaaS dashboard.

The sensory metaphor is the cut between theatre and gallery. The dark register is the auditorium — lights down, frame lit, attention forward. The light register is the lobby afterward — bright, clean, the stills hung in rows for close inspection. A Luma page moves between the two registers within a single scroll, and the seam between black and white is where the rhythm lives. The chrome stays silent on both sides so the generated video can carry the page.

**Key Characteristics**

- Two-act monochrome: cinematic black `#000000` hero/footer opening into white `#ffffff` content body
- White Graphik headlines (52px, weight 500) floating over generated video in the dark register
- Pure black `#000000` body type on white in the light register — maximum 21:1 contrast both ways
- No chromatic accent anywhere in the chrome — saturation comes from model output only
- Full-pill CTAs (radius 9999): white-on-dark in the hero, black-on-white in the light body
- Single-family typography — Graphik carries display and body; hierarchy by weight, never colour
- Minimal, cinematic atmosphere — product-film register, not dashboard register
- Generous whitespace; full-bleed video; chrome held quiet
- Hierarchy by weight (500/600/700) and scale, never by hue
- Hairline borders (`#e5e5e5` on white, 5–12% white on dark) instead of heavy shadows

## 2. Color Palette & Roles

### Primary

- **bg** (`#ffffff`): the white content studio — the light register where body copy lives
- **bg-dark** (`#000000`): cinematic black hero and footer — the dark register
- **bg-near** (`#0a0a0a`): near-black panel, a half-step off pure black for inset zones
- **text** (`#000000`): pure black body type on the white surface
- **text-invert** (`#ffffff`): white display copy on the dark hero (the live h1 colour)

### Brand & Dark

- **brand** (`#000000`): the brand has no chromatic accent — cinematic black IS the brand
- **brand-invert** (`#ffffff`): white as the inverse brand register, used on the dark hero
- **on-brand** (`#ffffff`): text on black fills (primary button label)

### Accent (intentionally non-chromatic)

- **accent-ink** (`#000000`): black-on-white emphasis, the only "accent" in the light register
- **accent-snow** (`#ffffff`): white-on-black emphasis in the dark register
- **accent-graphite** (`#171717`): raised dark surface / primary button hover
- **accent-fog** (`#f5f5f5`): faint grey wash for insets on white

The accent set is monochromatic by intent. Luma's only saturation is in the imagery — generated video, model stills, B-roll. The interface itself has no hue. If a Luma page shows colour, it is coming from the work, not the wrapper.

### Interactive

- **link** (`#000000`): default black link on white, subtle underline
- **link-hover** (`#666666`): softens to mid-grey on hover
- **link-invert** (`#ffffff`): white link on the dark register
- **link-invert-hover** (`#cccccc`): softens on hover over dark
- **selected** (`#f0f0f0`): selected list-item background on white
- **disabled** (`#cccccc`): muted disabled foreground

### Neutral Scale

A pure neutral ladder runs `#ffffff` → `#fafafa` → `#f5f5f5` → `#e5e5e5` → `#d4d4d4` → `#a3a3a3` → `#737373` → `#525252` → `#404040` → `#262626` → `#171717` → `#0a0a0a` → `#000000`. The ramp is strictly achromatic — no warm or cool bias — because any hue tint would read as a brand colour, which Luma refuses. `#666666` is the signature secondary-text grey on white; `#a3a3a3` is its counterpart on dark.

### Surface & Borders

- **surface** (`#ffffff`): default card on the white ground
- **surface-fog** (`#f5f5f5`): faint grey inset / quiet panel on white
- **surface-dark** (`#0a0a0a`): raised panel on the dark register
- **surface-graphite** (`#171717`): deeper dark surface
- **border** (`#e5e5e5`): hairline divider on white — never heavy
- **border-strong** (`#d4d4d4`): visible divider on white, card hover edge
- **border-dark** (`#ffffff1f`): 12% white hairline on dark
- **border-dark-soft** (`#ffffff0d`): 5% white hairline on dark
- **ring** (`#000000`) / **ring-invert** (`#ffffff`): focus rings, black on white / white on dark

### Shadow Colors

- **shadow-ambient** (`rgba(0,0,0,0.06)`): the lightest card lift on white
- **shadow-standard** (`rgba(0,0,0,0.10)`): hover lift on white cards
- **shadow-elevated** (`rgba(0,0,0,0.16)`): popovers, menus on white
- **shadow-dark** (`rgba(0,0,0,0.6)`): modal elevation over the dark register

Shadows are used sparingly and softly on the white surface; on the dark register, depth is tonal (`#000000` → `#0a0a0a` → `#171717`) rather than cast. The interface prefers a hairline border to a heavy shadow.

### Semantic

- **success** (`#16a34a`) — green, in-product only; never marketing
- **warning** (`#d97706`) — amber for system messages
- **danger** (`#dc2626`) — destructive actions only, never marketing
- **info** (`#2563eb`) — system info; the rare blue is functional, not brand

## 3. Typography Rules

### Font Family

- **Display & Body**: `"__graphik_7126cf", Graphik, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif` — weights 400/500/600/700. **Graphik** is Commercial Type's neo-grotesque; the `__graphik_7126cf` token is the production webfont hash. A single family carries the entire site.
- **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace` — weights 400/500, reserved for technical metadata
- **OpenType**: default ligatures and kerning on; tabular figures (`tnum`) in any numeric/metric columns; no decorative stylistic sets

### Hierarchy

| Role          | Font    | Size | Weight | Line H | Tracking   | Notes |
|---------------|---------|------|--------|--------|------------|-------|
| display-hero  | Graphik | 80   | 600    | 1.00   | -0.03em    | rare full-bleed marquee |
| display-large | Graphik | 64   | 600    | 1.04   | -0.025em   | major section heads |
| h1            | Graphik | 52   | 500    | 1.06   | -0.02em    | the canonical Luma hero headline (white on black) |
| h2            | Graphik | 40   | 600    | 1.10   | -0.018em   | feature heads |
| h3            | Graphik | 32   | 600    | 1.20   | -0.012em   | sub-section heads |
| h4            | Graphik | 24   | 600    | 1.25   | -0.005em   | card titles |
| h5            | Graphik | 20   | 600    | 1.30   | 0          | small label heads |
| body-large    | Graphik | 18   | 400    | 1.55   | 0          | hero supporting copy |
| body          | Graphik | 16   | 400    | 1.55   | 0          | default body (the live body token) |
| body-small    | Graphik | 14   | 400    | 1.50   | 0          | secondary copy |
| label         | Graphik | 13   | 500    | 1.40   | 0          | form labels, UI |
| caption       | Graphik | 12   | 500    | 1.40   | 0.02em     | image captions |
| overline      | Graphik | 11   | 600    | 1.30   | 0.08em     | section eyebrow, uppercase |
| button        | Graphik | 15   | 500    | 1.00   | -0.005em   | CTA label |
| nav-link      | Graphik | 14   | 500    | 1.00   | 0          | top nav |
| mono          | mono    | 13   | 400    | 1.50   | 0          | model versions, technical IDs |

### Principles

- **One family, one voice**: Graphik carries display and body. There is no second sans, no serif, no display face. The voice stays consistent from hero to footer.
- **Weight is the hierarchy**: display uses 500–700, body uses 400, labels use 500. Emphasis comes from weight and scale — never from colour, because there is no brand colour to reach for.
- **The hero is weight 500, not 700**: the live h1 sits at 52px / weight 500 — a confident medium, not a heavy bold. Graphik's even neo-grotesque rhythm reads cleanly at 500 on black.
- **Tracking tightens as size grows**: display heads pull `-0.02em` to `-0.03em`; body sits at 0; the caption/overline open up to positive `+0.02em` to `+0.08em` for small-cap legibility.
- **Body breathes at 1.55 line-height**: long-form copy on the white surface uses a generous 1.55 leading. Display copy compresses toward 1.0–1.1.
- **Mono is metadata only**: model versions, render IDs, technical captions. Never marketing copy.
- **No italics, no decorative case**: emphasis is structural — weight, scale, and the black/white register flip. Uppercase appears only in the overline eyebrow and caption.
- **Contrast over colour**: at 21:1 in both registers, type never needs colour to separate from ground. The maximal contrast is the legibility strategy.

## 4. Component Stylings

### Buttons

All buttons are **full pills** (radius 9999) — the live CTA radius (`3.35e7px`) is a full-pill artifact. Padding `12px 24px`, label Graphik 15/1.0 weight 500.

**button-primary** — the black pill on white (light register)
- Background: `#000000`
- Text: `#ffffff`, Graphik 15/1.0 weight 500, tracking `-0.005em`
- Border: none
- Radius: 9999 (full pill)
- Padding: `12px 24px`
- Hover: bg `#171717`
- Active: bg `#262626`
- Focus: 2px black ring + 2px offset
- Use: "Try Luma", "Get started" in the white content body

**button-invert** — the white pill on the dark hero (the live CTA)
- Background: `#ffffff`
- Text: `#000000`, Graphik 15/1.0 weight 500
- Border: none
- Radius: 9999
- Padding: `12px 24px`
- Hover: bg `#f0f0f0`
- Active: bg `#e5e5e5`
- Focus: 2px white ring + 2px offset (on `#000000`)
- Use: the hero "Try Luma" — white-on-black over the cinematic video

**button-ghost** — outlined pill on white
- Background: transparent
- Text: `#000000`, Graphik 15/1.0 weight 500
- Border: `1px solid #e5e5e5`
- Radius: 9999
- Hover: border lifts to `#000000`, bg `#fafafa`
- Active: bg `#f0f0f0`
- Use: secondary actions ("Learn more", "Watch") in the light register

**button-ghost-dark** — outlined pill on the dark hero
- Background: transparent
- Text: `#ffffff`, Graphik 15/1.0 weight 500
- Border: `1px solid #ffffff1f`
- Radius: 9999
- Hover: border `#ffffff5f`, bg `#ffffff0d`
- Active: bg `#ffffff14`
- Use: secondary CTA beside the white pill in the hero ("Watch the film")

### Cards

**White card** (feature, gallery on light):
- Background: `#ffffff`
- Border: `1px solid #e5e5e5`
- Radius: 12px
- Padding: `24px`
- Shadow: ambient `rgba(0,0,0,0.06) 0 1px 2px`
- Hover: shadow lifts to standard, border darkens to `#d4d4d4`

**Dark card** (panel on the cinematic register):
- Background: `#0a0a0a`
- Border: `1px solid #ffffff0d`
- Radius: 12px
- Padding: `24px`
- Shadow: none — depth is tonal
- Hover: border lifts to `#ffffff1f`

### Badges / Tags / Pills

**Light badge:**
- Background: `#f5f5f5`
- Text: `#000000`, Graphik 12/1.4 weight 500 tracking 0.02em
- Border: none
- Radius: 9999
- Padding: `4px 12px`
- Use: feature tags, "New" on the white surface

**Dark badge:**
- Background: transparent
- Text: `#ffffff`, Graphik 12/1.4 weight 500
- Border: `1px solid #ffffff3f`
- Radius: 9999
- Padding: `4px 12px`
- Use: model versions ("Ray2", "Dream Machine") on the dark hero

### Inputs / Forms

**Text input:**
- Background: `#ffffff`
- Text: `#000000`, Graphik 15/1.5
- Placeholder: `#999999`
- Border: `1px solid #e5e5e5`
- Radius: 8px
- Padding: `10px 14px`
- Focus: border `#000000`, 2px black ring

On the dark register, inputs invert: bg `#0a0a0a`, text `#ffffff`, border `#ffffff1f`, placeholder `#666666`, focus ring `#ffffff`.

### Navigation

- Top bar: 64px tall; transparent over the dark hero, white `#ffffff` with a `1px #e5e5e5` bottom rule once scrolled into the light register
- Wordmark: hard-left, Graphik weight 600, inherits the register's foreground (white on dark, black on white)
- Link list: hard-right, Graphik 14/1.0 weight 500, gap 24–32px
- Primary CTA pill sits at the far right (white pill on dark, black pill on white)
- Mobile: hamburger collapses into a full-bleed sheet that matches the active register

## 5. Layout Principles

### Spacing System

Base 4px. Scale: `0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128, 160`. Section padding lands at 96 or 128 in the marketing flow; component internal padding clusters at 16–24. The rhythm is generous — Luma gives the work room to breathe rather than packing density.

### Grid & Container

- Page max width: **1280px**, with full-bleed video sections breaking the container
- Prose max width: **720px** for long-form copy in the light register
- Hero is full-bleed video at `#000000` with the headline floated low-left in a narrow column (typically 560–720px)
- Feature grids: 12-column, 24–32px gutters; gallery tiles serve generated video at native aspect ratio
- Footer returns to the dark register, full-bleed

### Whitespace Philosophy

Whitespace is structural, not decorative. The hero gives the headline a large quiet margin so the video reads clearly behind it. In the light register, sections separate with generous 96–128px vertical padding and the white surface itself acts as breathing room. Density is low; the frames are the content, and they need air.

### Section Cadence

A Luma page alternates registers: a cinematic black hero → a white content band (features, capabilities) → a full-bleed dark video showcase → a white grid of model outputs → a dark footer. The register flip between sections is the rhythm. Each dark band is a screening; each white band is the lobby. The seam between `#000000` and `#ffffff` is intentional and frequent.

## 6. Shapes & Radius Scale

| Tier        | px    | Use |
|-------------|-------|-----|
| Micro       | 2     | inline chips, tight metadata |
| Standard    | 4     | small controls, tags |
| Comfortable | 8     | inputs, in-product chrome |
| Relaxed     | 12    | cards, gallery tiles |
| Large       | 16    | featured panels, media frames |
| Pill        | 9999  | all buttons, badges, status pills |

The signature is the **full-pill button** (9999) against **soft-relaxed cards** (12–16). There is no hard-brutalist 0 corner here — even media frames carry a gentle 12–16px radius — and there is no SaaS-default 6px. The contrast is between the pill and the gently rounded card. Buttons are pills or nothing.

## 7. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| 0 | Flat, no shadow | bg surfaces, full-bleed video, hero |
| 1 | `ambient` shadow `rgba(0,0,0,0.06) 0 1px 2px` | resting white cards |
| 2 | `standard` shadow `rgba(0,0,0,0.10) 0 4px 16px -2px` | white card hover, raised panels |
| 3 | Tonal step (`#0a0a0a` / `#171717` on `#000000`) | dark inset panels — no shadow |
| 4 | `elevated` shadow `rgba(0,0,0,0.16) 0 16px 32px -8px` | popovers, menus on white |
| 5 | `dark` shadow `rgba(0,0,0,0.6) 0 24px 48px -12px` | modals, lightbox over dark |

### Shadow Philosophy

Elevation is handled two different ways depending on register. On the white surface, shadows are soft, low-opacity, and short-throw — a card barely lifts off the page (0.06–0.16 alpha). On the dark register, depth is achieved through **tonal stepping** (`#000000` → `#0a0a0a` → `#171717`) and hairline white borders rather than cast shadow, because a shadow disappears against black. The interface prefers a `1px` hairline to a heavy shadow in both registers; depth reads as restraint, never as plastic lift.

## 8. Interaction & Motion ✨

### Easing

- `ease-standard` `cubic-bezier(0.4, 0, 0.2, 1)` — default for hovers and state changes
- `ease-emphasized` `cubic-bezier(0.2, 0, 0, 1)` — entrances, reveals, register transitions
- `ease-out` `cubic-bezier(0, 0, 0.2, 1)` — exits, dismissals
- `ease-in` `cubic-bezier(0.4, 0, 1, 1)` — rare, for elements leaving the viewport

### Durations

- `duration-fast` **150ms** — focus rings, micro hovers, button state
- `duration-standard` **240ms** — card hovers, menu opens, nav background fade
- `duration-slow` **320ms** — reveals, modal opens
- `duration-page` **480ms** — section reveals, video crossfades, register transitions

### Per-Component Micro-States

- **Button hover**: bg shifts in 150ms `ease-standard`. Black primary lifts to `#171717`; white invert drops to `#f0f0f0`. No scale, no glow.
- **Card hover (white)**: shadow lifts from ambient to standard over 240ms; border darkens `#e5e5e5` → `#d4d4d4`. Nested media may scale 1.02 over 320ms `ease-emphasized`.
- **Card hover (dark)**: border lifts from `#ffffff0d` to `#ffffff1f` over 240ms — tonal only.
- **Link hover**: black underline softens to `#666666` (white to `#cccccc` on dark) over 150ms; no colour shift to a brand hue.
- **Hero video**: autoplays muted, loops full-bleed; scenes crossfade over 480ms.
- **Nav on scroll**: background fades from transparent to `#ffffff` (with a `1px #e5e5e5` rule) over 240ms as the page leaves the dark hero.

### Page Transitions

Section content reveals via `IntersectionObserver` — a fade-up over 480ms `ease-emphasized` with a 16px transform-y. The register flip (black ↔ white band) is a hard cut between sections, not a gradient; the contrast itself is the transition. Hero video autoplays muted and loops; gallery tiles reveal in staggered fade-up.

### Reduced Motion

Respects `prefers-reduced-motion: reduce`. Video autoplay is disabled and a still poster frame is shown. All transforms (scale, translate-y, parallax) are dropped; transitions degrade to opacity-only fades capped at 200ms. This matters because Luma's surface leans on motion — the reduced-motion path must stay coherent with static frames.

## 9. Accessibility & A11y ✨

### Contrast Pairs

- `#000000` on `#ffffff` (body on white): **21.0:1** — AAA, the theoretical maximum
- `#ffffff` on `#000000` (hero h1 on black): **21.0:1** — AAA, the maximum, in the opposite direction
- `#666666` on `#ffffff` (muted secondary on white): **5.7:1** — AA at all sizes
- `#999999` on `#ffffff` (soft metadata on white): **2.8:1** — fails AA; reserve for decorative/non-essential labels only, or darken to `#666666` for any readable text
- `#a3a3a3` on `#000000` (muted on dark): **8.9:1** — AAA at large sizes
- `#000000` pill on `#ffffff` ground (primary button): **21.0:1** label-to-ground — AAA

Because the brand runs pure black and pure white, both primary registers clear AAA with margin to spare. The only contrast risk is the soft grey `#999999` — keep it off essential text.

### Focus Indicators

- 2px solid `#000000` ring with 2px offset on the white surface
- 2px solid `#ffffff` ring with 2px offset on the dark register
- Never removed; `:focus-visible` only so mouse users don't see rings

### ARIA Patterns

- **Dialog**: lightbox/video modal uses `role="dialog"` `aria-modal="true"` with `aria-labelledby`
- **Status**: video/generation loading uses `role="status"` with `aria-live="polite"`
- **Listbox / grid**: gallery of model outputs uses appropriate `role="list"` / `role="listitem"` with arrow-key traversal
- **Region**: each register band is a `<section>` with an accessible name

### Keyboard Navigation

- Tab order follows visual flow, register to register
- ESC closes lightbox, modal, and the mobile menu sheet
- Arrow keys advance gallery items
- Enter activates a gallery tile / opens the lightbox
- Space toggles video play/pause when a video element is focused

### Screen Reader Hints

- Generated/demo videos carry a descriptive `aria-label`; decorative B-roll uses `aria-hidden="true"`
- Mono labels (model versions, render IDs) read as visible text — no `aria-label` override
- Icon-only buttons require an `aria-label`
- The register flip is purely visual and carries no semantic meaning — do not announce it

### Reduced Motion

Video autoplay disabled (poster frame shown). All decorative motion (scale, translate, parallax) suppressed. Functional motion (focus, modal) capped at 200ms opacity-only.

## 10. Responsive Behavior

| Breakpoint | px       | Behavior |
|------------|----------|----------|
| mobile     | 0–639    | single column, stacked nav (hamburger), 16px gutters; hero headline drops to ~32px |
| tablet     | 640–1023 | 2-column feature grid, condensed nav, headline ~40px |
| desktop    | 1024–1279| 3-column gallery, full nav, headline ~52px |
| wide       | 1280+    | full layout at 1280 max; full-bleed video breaks the container; headline up to 80px on marquee |

### Touch Targets

44×44px minimum on mobile. Pill buttons retain a ~44px tap height and gain horizontal padding on touch surfaces. Gallery tile tap zones expand to fill the cell.

### Collapsing Strategy

- **Nav**: full-link list above 1024; hamburger sheet (matching the active register) below
- **Hero**: headline tracking relaxes slightly below 768 to avoid character collision; video stays full-bleed, aspect-ratio adapts 16:9 → 4:5 on portrait mobile
- **Feature grid**: 3-col → 2-col → 1-col as width drops; gutters tighten 32 → 16
- **Prose**: 720px max above 1024; full-width with 16–24px horizontal padding below

### Image / Video Behavior

Generated video and model output is served at native aspect ratio. `loading="lazy"` on below-the-fold media; `<video>` uses `preload="metadata"` with a poster frame; `srcset` for retina stills. The dark register's full-bleed video is the LCP element and should be prioritized.

### Container Queries

Gallery tiles use `@container` queries to switch from a horizontal media-plus-caption layout to a stacked layout under ~480px container width.

## 11. Content & Voice ✨

### Tone

Confident, plain, cinematic. Luma writes like a film studio describing its tools — short declarative statements, no hype, no exclamation. The product is "AI Agents for Creative Work"; the sentences stay that clean and direct. The voice trusts the work to be impressive and refuses to oversell it in words.

### Microcopy Patterns

- **Buttons**: "Try Luma", "Get started", "Watch", "Learn more" — single clear verbs, never "Get started for free!"
- **Errors**: "Generation failed. Try again." — terminal period, no apology
- **Success**: "Done." / "Saved." — single word, period
- **Loading**: "Generating…" / "Rendering…" — present participle, ellipsis

### Empty States

- Gallery empty: "Nothing here yet." — plain, no recovery copy
- Search empty: "No results." — two words
- Error empty: "Something went wrong." — calm, no blame

### CTA Verb Conventions

- "Try Luma" (the canonical CTA — product name as object, not "Sign up")
- "Get started" (single allowed marketing verb)
- "Watch" (single verb, not "Watch the demo video")
- "Learn more" (secondary, restrained)
- "Open" (in-product transition)

The voice's signature is restraint: declarative statements where SaaS would use imperative-with-promise, full stops where SaaS would use exclamation. Marketing intensifiers ("powerful", "revolutionary", "magical") are absent — the generated frames make that argument.

## 12. Dark Mode & Theming ✨

Luma is **dual-register by design** — not a light theme with a dark toggle, and not a dark-by-default app. The cinematic black `#000000` hero and footer and the bright white `#ffffff` content body are two halves of a single composition that always appear together. A page is meant to flip between them as you scroll.

Neither register is a user-selectable theme. There is no `prefers-color-scheme` toggle that swaps the whole page light or dark; the registers are authored, fixed bands. The dark register frames the work like a theatre; the light register presents it like a gallery wall. Both run pure monochrome, so the only thing that changes across the seam is which of black and white is foreground.

If you implement a Luma-style page, build both registers and place the flip at the section boundary — do not collapse the page to a single tone. The contrast between the two acts is the brand. A dark-only or white-only Luma page misses the screening-room-into-studio move that defines it.

## 13. Lineage & Influences

Luma's surface inherits from three traditions.

**The product-film register** — Apple's keynote slides, the dark-frame-with-white-headline establishing shot, and A24's title cards. Luma's cinematic black hero with white Graphik floating over generated video is the same move: lights down, frame lit, type quiet and confident. The maximal black/white contrast and the refusal of any brand hue both trace to this product-film discipline, where the work on screen is the only colour allowed.

**The AI-video peer set** — Runway above all, and the broader generative-video field. The near-black screening-room hero, the no-chromatic-accent chrome, and the principle that the generated frames carry all the saturation are shared DNA across the category. Luma differs by leaning harder into the *white studio* second act — Runway oscillates into a warm paper register, while Luma flips to pure white. Vercel contributes the high-contrast monochrome marketing surface and the full-pill CTA grammar.

What Luma rejects: the neon/aurora gradients that signal "generative AI" elsewhere, any brand colour in the chrome, glows on buttons, and dense SaaS-dashboard layouts. The page stays minimal and cinematic so the model output can speak.

**Named influences:**

- Commercial Type (Graphik) — `https://commercialtype.com/catalog/graphik` — the single neo-grotesque editorial voice
- Apple — `https://apple.com` — product-film register, maximal monochrome contrast
- Runway — `https://runwayml.com` — AI-video screening-room hero, no chromatic accent
- A24 — `https://a24films.com` — cinematic film-studio editorial mood
- Vercel — `https://vercel.com` — high-contrast monochrome surface, full-pill CTA grammar

## 14. Do's and Don'ts

### Do

- Build the page as two registers — a cinematic black hero/footer and a white content body — and flip between them at section seams
- Float white Graphik headlines (52px, weight 500) low over full-bleed generated video in the hero
- Keep body type pure black `#000000` on pure white `#ffffff` in the light register — the 21:1 contrast is the brand
- Make every CTA a full pill (radius 9999): white-on-dark in the hero, black-on-white in the body
- Carry hierarchy with weight (500/600/700) and scale, never with colour
- Let the generated frames be the only saturation on the page
- Use Graphik for everything — display and body, one voice from hero to footer
- Keep borders hairline (`#e5e5e5` on white; 5–12% white on dark) instead of heavy shadows
- Keep section padding generous (96–128px) so the work breathes
- Honor reduced-motion by disabling video autoplay and showing a poster frame
- Use terminal periods in microcopy; refuse exclamation marks
- Soften links to grey on hover, never to a brand hue

### Don't

- Introduce a brand colour — saturation belongs to the model output, not the chrome
- Add neon/aurora gradients to signal "generative AI" — Luma deliberately rejects them
- Collapse the page to a single register — a dark-only or white-only Luma misses the screening-room-into-studio move
- Use a second typeface — Graphik carries the whole site
- Make the hero headline bold (700) — it is weight 500; medium, not heavy
- Use 0 (hard brutalist) or 6px (SaaS default) on buttons — they are full pills or nothing
- Apply heavy drop shadows; on white keep them soft (≤0.16 alpha), on dark use tonal steps
- Tint the neutral ramp warm or cool — any hue reads as an unwanted brand colour
- Use `#999999` for readable body text — it fails AA on white; darken to `#666666`
- Animate decoratively under reduced-motion
- Use SaaS-CTA verbs ("Get started for free", "Sign up free", "Try it now!")
- Crop the generated video to a thumbnail in the hero — it is full-bleed or nothing

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg (light):     #ffffff   (white content studio)
bg (dark):      #000000   (cinematic hero/footer)
near-black:     #0a0a0a   (dark inset panel)
text:           #000000   (body on white)
text-invert:    #ffffff   (hero headline on black)
muted:          #666666   (secondary on white, AA)
soft:           #999999   (decorative metadata only — fails AA)
muted-dark:     #a3a3a3   (muted on black, AAA large)
border:         #e5e5e5   (hairline on white)
border-dark:    #ffffff1f (12% white on dark)
graphite:       #171717   (primary button hover)
ring:           #000000 / #ffffff (focus, by register)
```

### Example Component Prompts

1. **"Create a cinematic hero on `#000000` with a full-bleed muted-autoplay generated video, a white Graphik headline at 52px weight 500 line-height 1.06 tracking `-0.02em` floated low-left in a 640px column reading 'AI Agents for Creative Work', an 18px supporting line in `#a3a3a3`, and a white full-pill button 'Try Luma' with `#000000` text beside a ghost-dark pill 'Watch the film'."**

2. **"Design a white content section at `#ffffff`: a 720px prose column, a Graphik h2 at 40/1.1 weight 600 tracking `-0.018em` in `#000000`, body at 16/1.55 in `#000000`, secondary lines in `#666666`, and a black full-pill button 'Get started' with `#ffffff` text."**

3. **"Build a gallery grid on `#ffffff`: three white cards at 12px radius with `1px #e5e5e5` border and a soft `rgba(0,0,0,0.06)` shadow, each holding a generated video at native aspect ratio on top, a Graphik h4 at 24/1.25 weight 600, and a `#666666` caption. Hover lifts the shadow to `rgba(0,0,0,0.10)` and scales the video 1.02."**

4. **"Make a top nav, transparent over the dark hero: Graphik wordmark weight 600 in white hard-left, link list 14/1.0 weight 500 in white hard-right (Research, Dream Machine, Pricing, Sign in) with a white full-pill 'Try Luma' at the far right. On scroll past the hero, fade the background to `#ffffff` with a `1px #e5e5e5` bottom rule and flip the foreground to `#000000`."**

5. **"Compose a dark showcase band on `#000000`: a full-bleed looping video, a small transparent badge with `1px #ffffff3f` border reading 'Ray2' in white 12px, and a white Graphik h3 at 32/1.2 weight 600 caption beneath. No shadow — depth is tonal."**

6. **"Design a model-output lightbox: a `role=dialog` modal over a 0.6-alpha black scrim, the generated video centered at 16px radius, a mono `13px` render-ID label in `#a3a3a3`, ESC to close, white focus ring on the close button."**

### Iteration Guide

1. **Build both registers first**: if your page is all-white or all-black, you've missed the brand. Add the opposite-register band and flip at the section seam.
2. **Refuse colour**: when a CTA or section looks weak, do not add an accent hue — strengthen contrast or weight. The white/black pill is the answer.
3. **Drop the headline to weight 500**: if the hero reads heavy or shouty, it's probably at 700 — pull it to 500. Graphik medium is the Luma voice.
4. **Let the video carry the saturation**: if the page feels flat, the fix is more/better generated video, not a gradient behind the text.
5. **Pill or nothing on buttons**: if you're reaching for 6px or 8px button radius, you're in SaaS register — go to full pill (9999).
6. **Keep shadows soft on white, tonal on dark**: a heavy drop shadow reads as plastic. On white cap alpha at 0.16; on black use `#0a0a0a`/`#171717` steps and a hairline border instead.
7. **Darken `#999999` for any real text**: it fails AA on white. Reserve it for decoration; use `#666666` where copy must be read.
8. **Strip the adjectives**: if you wrote "powerful", "magical", or "revolutionary", cut them. State what it does and let the frames argue.