Cinematic, strictly monochrome AI-video and creative-agents brand: a pure-black canvas with white Graphik geometric sans at a single 500 weight and tight negative tracking, a centered title-card hero, full-pill buttons (white primary vs black outlined secondary), an animated badge pill, and no accent colour at all — all colour comes from generated video inside large rounded dark showcase cards.
Browse Luma in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.