Luma — Design System
Luma AI runs Dream Machine in all-Graphik: 52px/500 headlines ('Luma takes you from idea to finished'), 18-22px body, and white full-pill CTAs over generated film. Use-case grids dense with AI video keep the page product-first — a creative-model lab wearing a working studio's plain uniform.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/luma.
Tokens
Luma's decoded design system: background #FFFFFF, text #000000, accent #000000, link #000000, primary #000000; type scale h1 52px / h2 48px / body 22px; 8px spacing base; 0px base radius. The single interactive/action color is #000000 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #000000 |
| accent | #000000 |
| link | #000000 |
| button_bg | #000000 |
| button_text | #FFFFFF |
Using these colors
- Action color
#000000— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#000000— one role, not several (the action color).- accent
#000000— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- Heading: Graphik
- Body: Graphik
- h1: 52px
- h2: 48px
- body: 22px
Spacing
- base unit: 8px
- scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
Radii
- base: 0px
- button: 9999px
Per-section tokens (7)
Export: DESIGN.md
# Luma — Design System
> light, modern, medium, tailwind
Luma AI runs Dream Machine in all-Graphik: 52px/500 headlines ('Luma takes you from idea to finished'), 18-22px body, and white full-pill CTAs over generated film. Use-case grids dense with AI video keep the page product-first — a creative-model lab wearing a working studio's plain uniform.
## Colors
| Role | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#EFEFEF` |
| border | `#D8D8D8` |
| text | `#000000` |
| text_muted | `#606060` |
| primary | `#000000` |
| accent | `#000000` |
| link | `#000000` |
| button_bg | `#000000` |
| button_text | `#FFFFFF` |
**Using these colors**
- **Action color** `#000000` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds.
- `primary`, `accent`, `link`, `button_bg` are all `#000000` — one role, not several (your action color).
- **accent** `#000000` — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
## Typography
- Heading: **Graphik** _(free fallback: Inter)_
- Body: **Graphik** _(free fallback: Inter)_
- h1: 52px
- h2: 48px
- body: 22px
> **Fonts —** Graphik is proprietary — closest free match: Inter (Google). Load Inter; keep Graphik first so licensed users still get it.
## Spacing
- base unit: 8px
- scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
## Radius
- base: 0px
- button: 9999px
## Primary button
- bg `#000000` · text `#FFFFFF` · radius 9999px
## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.Export: Tailwind v4 (@theme)
@theme {
/* action color #000000 — the one interactive color; buttons/links/emphasis only, never large fills. */
--color-bg: #FFFFFF;
--color-surface: #EFEFEF;
--color-border: #D8D8D8;
--color-text: #000000;
--color-text-muted: #606060;
--color-primary: #000000; /* ≈ the text color — a foreground/text color, not an action color (action = #000000). */
--color-accent: #000000; /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
--color-link: #000000; /* inline text links — shares the action color. */
--color-button-bg: #000000; /* primary-button fill — the main call-to-action color. */
--color-button-text: #FFFFFF;
/* fonts: Graphik is proprietary — closest free match: Inter (Google). Load Inter; keep Graphik first so licensed users still get it. */
--font-heading: "Graphik", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: "Graphik", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--text-h1: 52px;
--text-h2: 48px;
--text-body: 22px;
--radius-base: 0px;
--radius-button: 9999px;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 24px;
--spacing-6: 32px;
--spacing-7: 48px;
--spacing-8: 64px;
}Export: CSS variables
:root {
/* action color #000000 — the one interactive color; buttons/links/emphasis only, never large fills. */
--bg: #FFFFFF;
--surface: #EFEFEF;
--border: #D8D8D8;
--text: #000000;
--text-muted: #606060;
--primary: #000000; /* ≈ the text color — a foreground/text color, not an action color (action = #000000). */
--accent: #000000; /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
--link: #000000; /* inline text links — shares the action color. */
--button-bg: #000000; /* primary-button fill — the main call-to-action color. */
--button-text: #FFFFFF;
--font-heading: "Graphik", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-body: "Graphik", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
--radius: 0px;
--radius-button: 9999px;
}
/* fonts: Graphik is proprietary — closest free match: Inter (Google). Load Inter; keep Graphik first so licensed users still get it. */