LumaLabs

---
version: alpha
name: LumaLabs-design-analysis
description: A cinematic, image-forward AI-product interface built on a pure white canvas and pure black ink, where full-bleed photographic/video heroes carry the brand voltage and the UI chrome stays deliberately quiet. The system pairs the Graphik neo-grotesque (tight negative tracking, weight 500) with soft pill buttons, heavily rounded cards (~24px), and a single deep near-black "Research" band that inverts the page. Restraint is the point — color is almost entirely monochrome, with rare muted accents (tan, navy, green) borrowed from product imagery rather than a painted accent palette.

colors:
  ink: "#000000"
  body: "#202020"
  muted: "#737373"
  muted-soft: "#8c8c8c"
  muted-softer: "#a6a6a6"
  canvas: "#ffffff"
  surface-soft: "#f1f1f1"
  surface-softer: "#f2f2f2"
  hairline: "#e5e5e5"
  border-soft: "#cccccc"
  surface-dark: "#050607"
  surface-dark-elevated: "#191d20"
  surface-graphite: "#202020"
  accent-navy: "#0b1a2e"
  accent-green: "#1aa30d"
  accent-tan: "#a1876b"
  on-primary: "#000000"
  on-dark: "#ffffff"

typography:
  display-xl:
    fontFamily: "Graphik, Inter, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -2.08px
  display-lg:
    fontFamily: "Graphik, Inter, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1.92px
  title-md:
    fontFamily: "Graphik, Inter, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.66px
  body-md:
    fontFamily: "Graphik, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.4px
  button:
    fontFamily: "Graphik, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.4px

rounded:
  sm: 8px
  md: 16px
  lg: 24px

spacing:
  xxs: 6px
  xs: 8px
  sm: 10px
  md: 12px
  base: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 80px
  section-lg: 160px

components:
  top-nav:
    backgroundColor: transparent
    textColor: "{colors.on-dark}"
    typography: "{typography.body-md}"
  button-light:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
  button-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
  prompt-input-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 24px
  text-input:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.muted}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 16px 20px
  suggestion-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 8px 16px
  announcement-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.body}"
    typography: "{typography.button}"
    rounded: "{rounded.lg}"
    padding: 8px 16px
  product-mockup-card:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.lg}"
    padding: 20px
  research-band:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-lg}"
    padding: 80px
  research-hero-card:
    backgroundColor: "{colors.surface-dark-elevated}"
    textColor: "{colors.on-dark}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.lg}"
    padding: 40px
  model-card:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.title-md}"
    rounded: "{rounded.md}"
    padding: 20px
  news-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.lg}"
    padding: 20px
  tag-badge:
    backgroundColor: transparent
    textColor: "{colors.muted}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 6px 10px
---

## Overview

Luma's marketing surface is a cinematic, image-forward AI-product interface — a pure white canvas (`{colors.canvas}` — #ffffff) with pure black ink (`{colors.ink}` — #000000), where the brand voltage comes entirely from full-bleed photographic and video heroes (a peach-chamomile product render, a blurred retail interior, model-generated cinematic frames) rather than from any painted accent palette. The chrome is deliberately quiet: pill buttons, tightly-tracked Graphik headlines, generous whitespace, and a single deep near-black "Research" band that inverts the entire page midway down the scroll.

Type runs on a single family — **Graphik** — across every role, from the 52px hero h1 down to 16px body and button labels. The voice is neo-grotesque and confident: weight 500 almost everywhere, with aggressive negative letter-spacing (-2.08px on the hero, -0.4px even on body) that pulls the type tight and gives it an editorial, premium feel. Luma never reaches for a second display face; hierarchy is built from size and tracking alone.

The two interaction signatures are the **soft pill buttons** (white pills on imagery, black pills on light editorial sections) and the **glassy prompt-input card** that floats over the hero — a "Type a prompt below" panel that invites you straight into the product. Below the fold, suggestion pills ("Create a Pitch Deck", "Apply Cinematic Style") and an announcement pill ("Ray 3.2 Is Here") continue the rounded-pill language.

The deep near-black **Research band** (`{colors.surface-dark}` — #050607) is the system's one inversion — it closes the upper marketing flow, frames the "Open Physical AI Lab" and the model cards (RAY3.2, UNI-1), and gives the page a film-credits gravity before returning to white for the news grid.

**Key Characteristics:**
- Monochrome at the core — pure black ink on pure white canvas. Almost no chromatic accent in the chrome; the few measured accents (`{colors.accent-tan}` #a1876b, `{colors.accent-navy}` #0b1a2e, `{colors.accent-green}` #1aa30d) are sampled from product imagery, not applied as brand color.
- Single typeface — Graphik at weight 500 with tight negative tracking carries the entire hierarchy (substituted with Inter here; see Typography).
- Soft pill buttons (`{component.button-light}` / `{component.button-dark}`) — heavily rounded, low-contrast labels, white-on-imagery or black-on-white.
- Full-bleed photographic/video heroes do the persuading; the UI floats restraint on top of them.
- A floating glass prompt-input card (`{component.prompt-input-card}`) sits over the hero, pulling the visitor into the product immediately.
- One deep near-black Research band (`{colors.surface-dark}` — #050607) inverts the page; it is the only dark surface in the flow.
- Heavily rounded geometry — cards at `{rounded.lg}` (24px), inputs at `{rounded.md}` (16px), small tags at `{rounded.sm}` (8px).
- Soft, low-alpha drop shadows (`0 4px 6px -1px rgba(0,0,0,0.1)` and `0 20px 25px -5px rgba(0,0,0,0.1)`) lift floating panels off imagery — never heavy.

## Colors

### Brand & Accent
Luma is a near-monochrome system. There is no brand accent in the chrome — black and white do all the work.
- **Accent Tan** (`{colors.accent-tan}` — #a1876b): A warm earth tone sampled from product/hero imagery; appears only inside image content and warm-toned heroes.
- **Accent Navy** (`{colors.accent-navy}` — #0b1a2e): A deep blue sampled from imagery and the dark-band gradients.
- **Accent Green** (`{colors.accent-green}` — #1aa30d): A single saturated green measured at low frequency — used for a "NEW" tag accent or status dot, never on large surfaces.

These accents are documented because they were measured, but they are incidental — borrowed from photography rather than a deliberate accent palette.

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): The default page floor for the upper marketing flow and the lower news grid.
- **Surface Soft** (`{colors.surface-soft}` — #f1f1f1): The prompt-input field fill and soft section panels.
- **Surface Softer** (`{colors.surface-softer}` — #f2f2f2): A barely-distinct alternate light fill.
- **Surface Dark** (`{colors.surface-dark}` — #050607): The Research band background — the single deep near-black inversion in the page.
- **Surface Dark Elevated** (`{colors.surface-dark-elevated}` — #191d20): The "Open Physical AI Lab" hero card nested inside the dark band.
- **Surface Graphite** (`{colors.surface-graphite}` — #202020): A dark neutral used for dense dark text and graphite fills.
- **Hairline** (`{colors.hairline}` — #e5e5e5): The 1px divider tone on light surfaces (news-grid separators).
- **Border Soft** (`{colors.border-soft}` — #cccccc): A slightly stronger light border tone, used sparingly.

### Text
- **Ink** (`{colors.ink}` — #000000): All headlines and primary type on light surfaces.
- **Body** (`{colors.body}` — #202020): Default running-text and sub-heads.
- **Muted** (`{colors.muted}` — #737373): Secondary text, captions, suggestion-pill labels, tag labels.
- **Muted Soft** (`{colors.muted-soft}` — #8c8c8c): Tertiary text, placeholder copy.
- **Muted Softer** (`{colors.muted-softer}` — #a6a6a6): Fine-print and the faintest captions.
- **On Primary** (`{colors.on-primary}` — #000000): Black label text on the white pill buttons.
- **On Dark** (`{colors.on-dark}` — #ffffff): All text on the Research band, model cards, and dark mockup frames.

### Semantic
No dedicated success/warning/error palette was measured on these marketing pages. `{colors.accent-green}` (#1aa30d) is the closest measured value to a positive/status signal but is not confirmed as a semantic token. See Known Gaps.

## Typography

### Font Family
The entire system runs on **Graphik** — a neo-grotesque sans (measured as the obfuscated web-font handle `__graphik_7126cf`). There is no secondary display or mono face; Graphik carries headlines, body, and button labels alike. The defining trait is its tracking: aggressively negative letter-spacing across every role (-2.08px at the hero scale, narrowing to -0.4px at body size). The fallback stack walks `Inter, sans-serif`.

### Note on Font Substitutes
Graphik is a commercial typeface licensed from Commercial Type and cannot be shipped freely as a web font. Although it was not flagged in `fonts_licensed`, it is a paid face — do not assume distribution rights. A close open-source substitute is **Inter** (weight 500) with letter-spacing tightened to roughly -0.04em to approximate Graphik's tracking signature. **Hanken Grotesk** and **Manrope** are alternative open-source neo-grotesques that preserve the tight, modern character. The frontmatter `fontFamily` stacks list `Graphik, Inter, sans-serif` accordingly.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 52px | 500 | 1.2 | -2.08px | Hero h1 ("Creative agents that make you prolific") |
| `{typography.display-lg}` | 48px | 500 | 1.2 | -1.92px | Section heads ("Our Mission is to build unified general intelligence…", "Open Physical AI Lab") |
| `{typography.title-md}` | 22px | 500 | 1.4 | -0.66px | Card titles, model names (RAY3.2, UNI-1), sub-section heads |
| `{typography.body-md}` | 16px | 500 | 1.5 | -0.4px | Default running-text, nav links, captions |
| `{typography.button}` | 16px | 400 | 1.5 | -0.4px | Button labels, pill labels (one weight step lighter than body) |

### Principles
Everything is Graphik 500 except button/pill labels, which drop to weight 400 — the only weight contrast in the system. Hierarchy is built almost entirely from size: the gap from 52px display down to 22px titles to 16px body is large and deliberate, so the heroes read as cinematic title cards. The negative tracking is non-negotiable — Graphik set with default tracking loses the editorial tightness that defines the voice. Never bold beyond 500; the system stays mid-weight to feel premium-quiet rather than loud.

## Layout

### Spacing System
- **Base unit:** measurements cluster on a loose 4px-ish grid but skew toward even values (8, 12, 16, 20, 24, 32).
- **Tokens:** `{spacing.xxs}` 6px · `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.xxxl}` 40px · `{spacing.section}` 80px · `{spacing.section-lg}` 160px.
- **Section padding:** `{spacing.section}` (80px) for standard vertical band rhythm; `{spacing.section-lg}` (160px) for the most generous editorial gaps (measured 5×). A single 144px value was also measured (derived as an intermediate band gap — see Known Gaps).
- **Card internal padding:** clusters at `{spacing.lg}` (20px) and `{spacing.xl}` (24px); `{spacing.xxxl}` (40px) on the larger Research hero card.
- **Tight rhythm:** the 8/10/12/16/20px band handles intra-component gaps (pill padding, list spacing, input padding).

### Grid & Container
- **Hero:** single centered column — headline + button stacked over a full-bleed background, with the prompt-input card floating below, overlapping the hero base.
- **Logo strip:** a single horizontal row of partner logos ("The fastest creative teams in the world make here.") in muted grayscale.
- **Model cards:** 2-up at desktop (RAY3.2 / UNI-1) inside the Research band.
- **News grid:** 3-up article cards at desktop ("Recent News"), reducing on smaller widths.

### Whitespace Philosophy
Luma is generous to the point of cinematic — the 80px and 160px section gaps leave large empty fields between bands so each full-bleed image and each tightly-tracked headline lands as its own beat. The page reads slowly and deliberately, like film titles rather than a dense SaaS landing.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Body sections, top nav, editorial text bands |
| Soft lift | `0 4px 6px -1px rgba(0,0,0,0.1)` (low-alpha) | Pills and small floating chips over imagery |
| Floating panel | `0 20px 25px -5px rgba(0,0,0,0.1)` | The prompt-input card lifting off the hero image |
| Inverted band | `{colors.surface-dark}` (#050607) background, no shadow | The Research band — color inversion does the depth work |

The elevation philosophy is **soft and atmospheric**. Shadows stay at 10% alpha and are large/diffuse rather than tight, so floating panels feel like they hover over film stills rather than sit in a flat UI. The single deep inversion (Research band) carries more depth than any shadow — color contrast, not elevation, is the strongest depth signal in the system.

### Decorative Depth
- Full-bleed hero imagery is blurred/darkened at the edges to let white headline type sit legibly on top — the depth here is photographic, not token-driven.
- The product-mockup card (`{component.product-mockup-card}`) shows the actual Luma app chrome inside a black rounded frame, with its own internal UI shadows belonging to the product, not the marketing system.

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.sm}` | 8px | Tag badges (ENGINEERING / PRODUCT / COMPANY), small chips |
| `{rounded.md}` | 16px | Prompt-input field, model cards |
| `{rounded.lg}` | 24px | Content cards, product-mockup frame, pill buttons, prompt-input card, suggestion/announcement pills |

The system is consistently round-cornered, with `{rounded.lg}` (24px) as the dominant radius (measured 14×) — it applies to nearly every container and, applied to short buttons, produces the soft full-pill silhouette seen on "Try Luma" and "Sign In". There is no sharp-cornered surface anywhere in the marketing flow.

### Photography Geometry
Hero and model imagery fills its container edge-to-edge, clipped to the parent radius (`{rounded.lg}`). The hero product render runs full-bleed behind the headline with no rounding. Partner logos in the brand strip are flat monochrome marks with no container.

## Components

### Top Navigation

**`top-nav`** — Transparent bar pinned over the hero image. Left: the Luma wordmark + mark in `{colors.on-dark}` (white over the dark hero). Center-right: text menu (PRODUCT, PRICING, API, ENTERPRISE, NEWS, JOIN US) in `{typography.body-md}`, white over imagery. Far right: a "Sign In" white pill (`{component.button-light}`). The nav carries no background fill — it relies on the darkened hero for contrast.

### Buttons

**`button-light`** — The primary CTA over imagery and dark surfaces. Background `{colors.canvas}` (white), label `{colors.on-primary}` (black), type `{typography.button}` (Graphik 16px / 400), rounded `{rounded.lg}` (24px) producing a full-pill shape, padding ~12px × 24px (derived from the spacing scale — measured component radius/padding returned 0, so the pill geometry is taken from screenshot ground-truth). Used for "Try Luma" and "Sign In".

**`button-dark`** — The inverse CTA used on light editorial sections. Background `{colors.ink}` (black), label `{colors.on-dark}` (white), same type, radius, and pill geometry. Used for "Learn more", "All news", "Discover Ray3.2", "Discover Uni-1".

### Prompt & Inputs

**`prompt-input-card`** — A floating glass panel overlapping the hero base ("Type a prompt below. See what's possible."). Background `{colors.canvas}`, rounded `{rounded.lg}` (24px), internal padding `{spacing.xl}` (24px), lifted with the large floating-panel shadow. Holds a heading and the prompt text input.

**`text-input`** — The prompt field inside the card ("Make a travel montage of Tokyo with smooth transitions and lo-fi vibes"). Background `{colors.surface-soft}` (#f1f1f1), placeholder text `{colors.muted}`, type `{typography.body-md}`, rounded `{rounded.md}` (16px), padding ~16px × 20px. A small send affordance sits at the right edge. (Measured input radius returned 0px; the rounded value is taken from screenshot ground-truth — see Known Gaps.)

**`suggestion-pill`** — Quick-start chips below the prompt card ("Create a Pitch Deck", "Turn Product into Hero Shots", "Apply Cinematic Style"). Background `{colors.canvas}`, label `{colors.body}`, type `{typography.button}`, rounded `{rounded.lg}` (full pill), padding ~8px × 16px.

**`announcement-pill`** — A wide pill announcing model releases ("Ray 3.2 Is Here: Direct Every Frame Finish Every Cut" with "Try Free" / "Learn more" links). Same pill treatment as suggestion-pill, slightly wider.

### Cards & Containers

**`product-mockup-card`** — A black rounded frame ("Where ideas become the work") showing the actual Luma app UI inside — asset grids, a channel-launch panel. Background `{colors.ink}`, text `{colors.on-dark}`, rounded `{rounded.lg}` (24px), padding `{spacing.lg}` (20px). The product chrome inside carries its own internal styling.

**`research-band`** — The page's single dark inversion ("Research / Speed like this doesn't come from a wrapper"). Background `{colors.surface-dark}` (#050607), text `{colors.on-dark}`, section padding `{spacing.section}` (80px). Frames the Open Physical AI Lab card, the model cards, and engineering article links.

**`research-hero-card`** — The "Open Physical AI Lab" headline card nested in the Research band. Background `{colors.surface-dark-elevated}` (#191d20), text `{colors.on-dark}`, type `{typography.display-lg}`, rounded `{rounded.lg}`, padding `{spacing.xxxl}` (40px). Carries the Luma mark + large headline.

**`model-card`** — Model feature cards (RAY3.2, UNI-1) in a 2-up row inside the dark band. Background `{colors.surface-dark}`, text `{colors.on-dark}`, title in `{typography.title-md}`, rounded `{rounded.md}` (16px), padding `{spacing.lg}` (20px). Each carries a thumbnail, a "NEW" tag, a description, and a `{component.button-dark}`-style "Discover" pill.

**`news-card`** — Article cards in the "Recent News" 3-up grid on white canvas. Background `{colors.canvas}`, title in `{typography.title-md}`, rounded `{rounded.lg}`, padding `{spacing.lg}` (20px). Each leads with a `{component.tag-badge}` (PRODUCT / COMPANY) + date, then a headline.

### Tags / Badges

**`tag-badge`** — Small category labels (ENGINEERING, PRODUCT, COMPANY, NEW). Transparent or hairline-outlined background, text `{colors.muted}`, type `{typography.button}`, rounded `{rounded.sm}` (8px), padding ~6px × 10px. The "NEW" badge near RAY3.2 is the rare spot where `{colors.accent-green}` may appear.

## Do's and Don'ts

### Do
- Keep the chrome monochrome — black ink, white canvas. Let full-bleed imagery carry all the color and energy.
- Set Graphik (or Inter substitute) at weight 500 with tight negative tracking. The tracking is the voice.
- Build hierarchy from size, not weight — 52px hero down to 16px body, all at 500.
- Use `{component.button-light}` (white pill) over imagery and dark bands; use `{component.button-dark}` (black pill) on white editorial sections.
- Float the prompt-input card over the hero with the large soft shadow — it's the system's invitation into the product.
- Reserve `{colors.surface-dark}` (#050607) for the single Research inversion. The page is white above and white below it.
- Keep radii round and consistent — `{rounded.lg}` (24px) is the default container shape.

### Don't
- Don't introduce a brand accent color into the chrome. The measured tans, navies, and greens are sampled from imagery, not a palette — don't paint buttons or links with them.
- Don't bold type beyond weight 500, and don't set Graphik with default/positive tracking.
- Don't add a second display typeface; Graphik does every role.
- Don't add multiple dark surfaces — the Research band is the only inversion. Extra dark cards dilute its impact.
- Don't use heavy or tight drop shadows. Shadows stay at 10% alpha, large and diffuse.
- Don't sharpen corners. There is no square-cornered surface in the system.
- Don't document hover styling — only default and active/pressed states.

## Responsive Behavior

### Breakpoints
Specific breakpoint widths were not measured on these captures. The following is inferred from the layout structure and should be confirmed against the live site (see Known Gaps).

| Name | Width (inferred) | Key Changes |
|---|---|---|
| Mobile | < 768px | Top-nav menu collapses; hero h1 scales down from 52px; model cards and news grid stack 1-up; prompt card spans full width |
| Tablet | 768–1024px | Nav tightens; news grid 2-up; model cards may stay 2-up or stack |
| Desktop | 1024–1440px | Full horizontal nav; news grid 3-up; model cards 2-up |
| Wide | > 1440px | Same as desktop with larger outer margins; section gaps widen toward `{spacing.section-lg}` (160px) |

### Touch Targets
- `{component.button-light}` / `{component.button-dark}` pills sit at ~12px × 24px padding — comfortably above 44px tall with the line-height included.
- `{component.suggestion-pill}` at ~8px × 16px padding clears tap-target minimums with surrounding gap.
- `{component.text-input}` at ~16px × 20px padding is a large, easy target.

### Collapsing Strategy
- The hero stays single-column and image-centric at every breakpoint; the prompt card reflows to full width on mobile.
- Suggestion and announcement pills wrap to multiple rows rather than shrinking.
- The Research band keeps its dark inversion at all widths; model cards stack vertically on narrow screens.
- The news grid reduces columns (3 → 2 → 1) rather than scaling cards down.

### Image Behavior
- Hero imagery stays full-bleed and crops to fill; the headline overlay stays centered.
- Card imagery clips to the parent `{rounded.lg}` radius and scales proportionally.
- Partner logos in the brand strip stay monochrome and wrap on narrow widths.

## Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly (`{component.prompt-input-card}`, `{component.model-card}`).
2. Variants (`button-light` vs `button-dark`, future `-active` / `-disabled` states) live as separate entries in `components:`.
3. Use `{token.refs}` everywhere — never inline a hex into a component.
4. Never document hover. Default and active/pressed states only.
5. Headlines stay Graphik 500 with negative tracking; labels drop to 400. That one-step weight contrast is the only weight variation — don't add more.
6. The Research band is the only dark surface. Don't add other dark cards on the white flow.
7. When in doubt about emphasis: bigger Graphik before bolder Graphik.

## Known Gaps

- The component scraper returned `radius: 0px` and `padding: 0px` for `button-primary`, `card`, and `input` — these are clearly default/unstyled fallbacks that conflict with the visibly rounded pills and cards in the screenshots. Button and input geometry (pill radius, padding) is documented from screenshot ground-truth plus the measured radius scale; exact values should be confirmed against the live CSS.
- Graphik is a commercial typeface (Commercial Type) even though it was not flagged in `fonts_licensed`. Open-source substitutes (Inter, Hanken Grotesk, Manrope) are documented; do not ship Graphik without a license.
- No true pill/full radius token (9999px) was measured — the pill silhouette is achieved with `{rounded.lg}` (24px) on short elements. If the live buttons use a larger/full radius, add a `pill` token.
- The measured 144px spacing value (frequency 1) is treated as a derived one-off band gap and not tokenized separately.
- Accent colors (tan #a1876b, navy #0b1a2e, green #1aa30d) were measured at low frequency and appear to be sampled from imagery rather than applied as a brand palette; their intended semantic/usage role is unconfirmed.
- No footer was captured in the analysis; its styling and dark/light treatment are out of scope.
- Breakpoint widths, animation/transition timings (hero video playback, prompt-card entrance, pill interactions), and form validation/error states were not measured.
- The actual Luma app surface (asset grids, channel-launch panel shown inside `{component.product-mockup-card}`) is the product, not a marketing surface, and is out of scope.

<!-- Documented by duply · real-world design systems as ready-to-use DESIGN.md for AI coding agents · https://duply.ai/lumalabs/design-md -->