---
name: Luma AI
description: "This site is a masterclass in using a restrained, dark-mode UI to let high-quality, AI-generated media take center stage."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  secondary: "#737373"
  neutral: "#737373"
  bg-soft: "#0a0a0a"
  line: "rgba(115,115,115,0.3)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.28px"
  headline:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.66px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.4px"
  label:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-0.4px"

rounded:
  sm: 8px
  md: 24px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Creative agents that make you prolific.

*A cinematic studio for physical AI generation*

## Colors

High-contrast cinematic dark mode with monochromatic UI to let generated media pop.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#737373`)** — uses `ink-soft` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(115,115,115,0.3)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** geometric-sans

- Use tight negative letter-spacing on headlines for a cinematic feel.
- Navigation links are uppercase and tracked out.
- Body text is set in a clean, highly legible geometric sans.

## Layout

Edge-to-edge hero sections transitioning into centered content containers with a clear 12-column grid.

*Rhythm:* Consistent 4px base grid with generous section padding (160px).

## Elevation & Depth

- 0 4px 24px rgba(0,0,0,0.5)
- Borders: 1px solid rgba(115,115,115,0.3)

## Shapes

- `sm`: 8px
- `md`: 24px
- `lg`: 24px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with either solid white background and black text, or bordered transparent styles with white text.
- **card:** Image-forward cards with generous rounded corners (24px) and soft shadows.
- **input:** Clean, minimal input fields with a subtle border and high-contrast text.
- **hero:** Full-viewport immersive video or image backgrounds with centered white typography.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated accent colors — screenshot shows a strictly monochromatic UI with no dominant accent.
- Don't use decorative or script fonts for headlines — screenshot shows a clean, elegant serif.
- Don't use sharp, 0px corners — screenshot shows rounded buttons (pill) and cards (24px radius).
- Don't use light mode themes — screenshot shows a deep black background with white text.
- Don't use centered, multi-line text blocks — screenshot shows centered, concise headlines.
- Don't use busy, patterned backgrounds — screenshot shows either solid black or high-quality, blurred photography.

---

## System Prompt (paste into AI agent)

```
Luma AI is a premium, cinematic dark-mode web experience for an AI video generation platform. The identity is sophisticated and visionary, centered around a deep black background (#000000) and pure white text (#ffffff). The typography uses a clean geometric sans for body text and an elegant transitional serif for display headlines. Critical don'ts include: never use bright, saturated accent colors; never use sharp, square corners for UI elements; and never use light mode themes. The layout is spacious and immersive, prioritizing high-quality generated media over dense text. Interactive elements use subtle, smooth transitions (0.15s) to maintain a fluid, high-end feel.
```