# Lummi — Free AI Stock Images, Illustrations & 3D — Design System

## North Star
> AI-generated stock photography that doesn't look stock — every visual is a high-resolution mood.

**Theme:** light
**Category:** ai
**Tags:** `achromatic` · `monochrome` · `pill-buttons` · `sans-only` · `dark` · `vibrant` · `spacious` · `ai` · `creative` · `minimal`

## Description
Lummi is a dark-themed visual library where the imagery is the entire interface. A black canvas, brutalist all-caps display headline ('no more stock design'), and a dense Pinterest-style mosaic of AI-generated photography below. UI chrome is minimal: a thin top filter bar, a floating 'What's new' card with feature drops. The whole system is built so users can scan thousands of images per scroll without distraction.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-900 | `#09090b` | neutral | neutral step 900 | `zinc-950` (Δ0) |
| neutral-50 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| neutral-500 | `#71717a` | neutral | neutral step 500 | `zinc-500` (Δ0.002) |
| neutral-100 | `#e4e4e7` | neutral | neutral step 100 | `zinc-200` (Δ0) |
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-800 | `#18181b` | neutral | neutral step 800 | `zinc-900` (Δ0) |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#e4e4e7` | Cards / elevated panels |
| 2 | surface-2 | `#71717a` | Elevation tier 2 |
| 3 | surface-3 | `#18181b` | Elevation tier 3 |
| 4 | surface-4 | `#09090b` | Elevation tier 4 |
| 5 | surface-floor | `#000000` | Elevation tier 5 |

**Elevation philosophy.** Two tiers: the dark canvas and the floating modal/feature card. Image tiles stay flat with thin gutters — no shadows, no borders, just imagery against the void.

## Typography

### Inter — weight 400
*body*

### Apple Color Emoji — weight 400
*body*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `display` | 141.12px | 1.02 | -7.056 |
| `h3` | 24px | 1.33 | -0.144 |
| `h2` | 20px | 1.4 | -0.5 |
| `body` | 16px | 1.5 |  |
| `link` | 14px | 1.71 |  |
| `ui-action` | 14px | 1.71 |  |
| `ui-input` | 14px | 1.71 |  |

## Spacing & Radius

**Radius**
- `none`: 0
- `full`: 9999px
- `sm`: 4px

**Spacing**
- `base`: 2px

## Layout
Top filter bar with category chips, then a 4-5 column dense masonry grid of images extending forever. A single floating modal-ish card announces new features.

## Imagery
The entire site IS imagery — a Pinterest-style mosaic of AI-generated photography across moods (cinematic blue tones, warm earth tones, portraiture, still life, landscapes). Tiles vary in aspect ratio.

## Do
- Stay dark by default — the imagery pops harder against a black canvas
- Use a dense masonry grid; let images dictate aspect ratios
- Keep the top filter bar thin and high-contrast for scannable category navigation
- Use display-scale all-caps for hero headline; everything else is small sans labels

## Don't
- Don't add white-canvas sections — the visual identity depends on the dark frame
- Don't crop images uniformly; aspect-ratio variety creates the mosaic rhythm
- Don't introduce competing accent colors; let the photography bring color in
- Don't shadow the cards — flat tiles on dark canvas, separated by gutter alone