# Luma — Marketing Site Design Spec

> Source: lumalabs.ai (live DOM, computed styles), 2026-07-18 (desktop 1512px). Captured page: /app marketing home ("Creative agents that make you prolific").
> Coverage: home / marketing. App/Dream Machine: pending login (`needs-dashboard`). Responsive: breakpoints from tokens only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Cinematic, monochrome AI-video / creative-agents brand: a pure-black canvas set with a clean white Graphik geometric-sans headline at a medium 500 weight and tight negative tracking, centered like a title card. The mood is dreamlike but disciplined — no chromatic accent at all; the entire system is black, white and a ladder of grays, so the generated video shown inside large rounded dark showcase cards carries all the colour and motion. A small animated "Luma" badge pill sits above the hero; buttons are full pills (white primary against a black outlined secondary); a grayscale logo cloud runs beneath. Restraint, black space and cinematic imagery do the work. Feels: cinematic, minimal, dreamlike, premium.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Page background / canvas |
| surface | `#1f1f1f` | Dark showcase cards, badge pill |
| surface-hair | `#141414` | Subtle inset panels |
| light | `#f2f2f2` / `#ededed` | Light sections (teams / inverted blocks) |
| white | `#ffffff` | Primary button, light-surface text |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| text | `#ffffff` | Primary text, headings on black |
| muted | `#8c8c8c` | Secondary / sub-headline |
| muted-2 | `#737373` | Tertiary / logo-cloud caption |
| ink | `#000000` | Text on white surfaces/buttons |

### Accent & semantic
- None. The brand is strictly monochrome (black / white / grays); colour arrives only through generated video imagery. No accent or semantic hues captured.

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| border | `#1f1f1f` / white @ low alpha | Hairline card borders, outlined button |

Rule: the entire UI is black-white-gray; never introduce a brand accent — colour belongs to the video content inside the cards.

## 3. Typography Rules

- One family: `Graphik, ui-sans-serif, system-ui, sans-serif` — a geometric grotesque used across display, body and UI at a consistent medium 500 weight with tight negative tracking.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 52 / 62.4 | 500 | -2.08px (-4%) |
| Section (h2) | 48 / 57.6 | 500 | -1.92px |
| Sub / lead | 22 / 28.6 | 500 | -0.88px, `#8c8c8c` |
| Button | 18 | 500 | tight |
| Nav label | 14 | 500 | UPPERCASE |

Patterns: everything sits at a single medium 500 weight with tight negative tracking; emphasis comes from scale and the black-vs-white contrast, not from bold weights. Nav labels are uppercase.

## 4. Component Stylings

### Buttons (all full pills, weight 500)
- **Primary (white)**: bg `#ffffff`, text `#000000`, full pill, h `48px`, 18px 500. ("Get started".)
- **Secondary (outlined)**: bg `#000000`, text `#ffffff`, 1px light border, full pill, h `48px`. ("Luma for teams".)
- **Nav Sign In**: white full pill, black text, h `32px`, 14px.
- Smaller variants at h `40px` / 16px ("Learn more").

### Nav
- On black: Luma prism/crystal glyph + wordmark left, right uppercase links (PRODUCT / PRICING / API / ENTERPRISE / NEWS / JOIN US) + white Sign-in pill.

### Badge
- Small dark rounded "Luma" badge pill (`#1f1f1f`) with an animated dot-cluster glyph, above the hero headline.

### Cards / showcase
- Large rounded dark showcase cards (radius ~`24px`, `#1f1f1f`/near-black) holding generated video; the signature surface. Grayscale logo cloud below.

### Inputs
- Not prominently captured on marketing. Focus ring not captured.

## 5. Layout Principles

- Centered title-card hero: badge pill, large centered headline, muted sub, two pill CTAs, then a large rounded video showcase card.
- Generous black space; strong vertical rhythm.
- Grayscale customer logo cloud ("The fastest creative teams in the world make here.").
- Button radius full-pill; cards large-rounded.

## 6. Depth & Elevation

- Radii: buttons full-pill; showcase cards large rounded (~24px).
- Elevation: flat — dark cards separated from the black canvas by rounding and a hair of contrast rather than shadows. No prominent drop shadows.

## 7. Motion

- The animated "Luma" badge dot-cluster and autoplaying generated video are the motion story; chrome uses restrained hover micro-transitions. No heavy scroll library confirmed. Ease default cubic-bezier.

## 8. Backgrounds, Effects & WebGL

- Flat pure-black surfaces; the only "background" richness is the autoplaying generated video inside rounded showcase cards.
- No gradient hero, grain or accent glow captured — the brand is deliberately monochrome. The badge glyph animates.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure black `#000000` with white Graphik type.
- Set headings at a single medium 500 weight with tight negative tracking; center the hero like a title card.
- Use full-pill buttons: white primary vs black outlined secondary.
- Let large rounded dark showcase cards carry the generated video and all the colour.
- Keep the whole system monochrome (black / white / grays).

### Don't
- Don't introduce any brand accent colour — colour lives only in the video content.
- Don't add bold weights; everything is 500 with size + contrast doing the work.
- Don't square off the buttons — they are full pills.
- Don't clutter with shadows; depth is rounding + contrast on black.
- Don't switch to a light overall canvas; the marketing surface is black.

## 10. Responsive Behavior

- Fluid centered layout; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#000000` · Text `#ffffff` · Muted `#8c8c8c` · Card surface `#1f1f1f` · Accent: none (monochrome)
- Font: Graphik (one family, 500) · Display 52px, -4% · Body/sub 22px · Radius full-pill button / ~24px card · Button height 48px
- Focus: not captured · Primary hover: subtle dim on white pill

<luma_design_language>
Use the Luma design language: a cinematic, strictly monochrome AI-video / creative-agents brand on a pure-black canvas #000000 with white Graphik geometric-sans type set at a single medium 500 weight and tight negative tracking (h1 52px at -2.08px), centered like a title card over a muted #8c8c8c sub-headline. There is no brand accent at all — the entire system is black, white and a ladder of grays (#8c8c8c, #737373) with dark #1f1f1f showcase cards — so colour and motion arrive only through the autoplaying generated video inside large rounded (~24px) dark cards, plus a small animated Luma badge pill above the hero and a grayscale customer logo cloud below. All buttons are full pills at weight 500: a white primary (#fff bg, #000 text, 48px) against a black outlined secondary (#000 bg, white text, 1px border); the nav Sign-in is a small white pill and nav labels are uppercase. Surfaces are flat with no shadows — depth comes from rounding and contrast on black. Feels: cinematic, minimal, dreamlike, premium. Avoid: introducing any brand accent colour, bold weights, squared-off buttons, drop shadows, or a light overall canvas.
</luma_design_language>