# DESIGN.md — Round12.de

> A cinematic casting platform for everything needed in film production — Menschen, Locations, Vehicles, Props, Tiere, Kostüme, Social-Media.
> Format follows [Google Stitch DESIGN.md](https://stitch.withgoogle.com/docs/design-md/format/) and extended sections from [VoltAgent/awesome-design-md](https://github.com/VoltAgent/awesome-design-md).

---

## 1. Visual Theme & Atmosphere

Round12.de is **cinema rendered as interface**. The product lives in the same tonal universe as a 35mm rushes theatre: obsidian darkness, warm tungsten highlights, grain, and generous negative space. It is editorial, not enterprise. It feels **curated**, not automated — like The Criterion Collection met Linear inside a Berlin screening room.

- **Mood:** Cinematic, editorial, confident, quietly technical.
- **Density:** Low-to-medium. Generous whitespace; full-bleed hero imagery; never cluttered.
- **Philosophy:** *Subtraction before decoration.* Every pixel earns its place. Motion is restrained; typography does the heavy lifting.
- **Default surface:** Dark-first (obsidian canvas). A cream-editorial light mode exists for long-form reading (brandbook, specs).
- **Signature treatments:** Film-grain texture, gold hairline dividers, editorial serif display paired with neutral sans UI, subtle viewport-scaling marquees that evoke film-credits crawl.

---

## 2. Color Palette & Roles

### Core Palette

| Token | Hex | Role |
|---|---|---|
| `obsidian` | `#08080A` | Canvas / primary background (dark) |
| `film` | `#0F0F12` | Elevated surfaces, cards on canvas |
| `surface` | `#17171A` | Popovers, inputs, secondary cards |
| `ink` | `#1F1F24` | Hover surface / keyboard-ring base |
| `cream` | `#F5F1E8` | Primary text on dark / editorial light canvas |
| `paper` | `#FAF6EC` | Light-mode canvas (brandbook/specs reading mode) |
| `ash` | `#8A8A93` | Secondary/muted text |
| `smoke` | `#4A4A52` | Tertiary text, disabled |
| `hairline` | `#2A2A30` | Dividers, 1px borders on dark |
| `hairline-light` | `#E7E1D0` | Dividers on cream |

### Accent Palette

| Token | Hex | Role |
|---|---|---|
| `gold` | `#E9B949` | **Primary accent** — CTAs, active states, focus ring |
| `gold-deep` | `#C89626` | Hover on gold / pressed |
| `gold-soft` | `#F6E4B8` | Gold on light bg / tag fill |
| `ruby` | `#C6383E` | Destructive / urgent badges (casting deadline) |
| `midnight` | `#0F1830` | Deep navy — secondary accent in data viz |
| `sage` | `#7A8F6E` | Confirmation / verified badge |
| `clay` | `#B67250` | Warm editorial accent for illustrations |

### Semantic Tokens

| Semantic | Dark | Light |
|---|---|---|
| `background` | `#08080A` | `#FAF6EC` |
| `foreground` | `#F5F1E8` | `#0F0F12` |
| `card` | `#0F0F12` | `#FFFDF7` |
| `card-foreground` | `#F5F1E8` | `#0F0F12` |
| `muted` | `#17171A` | `#EFE9D8` |
| `muted-foreground` | `#8A8A93` | `#5A5A60` |
| `primary` | `#E9B949` | `#C89626` |
| `primary-foreground` | `#08080A` | `#0F0F12` |
| `border` | `#2A2A30` | `#E7E1D0` |
| `ring` | `#E9B949` | `#C89626` |

### Chart Palette (data viz, analytics dashboards)

`#E9B949` · `#7A8F6E` · `#C6383E` · `#B67250` · `#0F1830`

---

## 3. Typography Rules

### Families

| Role | Family | Fallback | Source |
|---|---|---|---|
| **Display / Editorial** | `Fraunces` | `"Times New Roman", Georgia, serif` | Google Fonts, variable |
| **UI / Body** | `Inter` | `ui-sans-serif, system-ui, sans-serif` | Google Fonts, variable |
| **Mono / Code / Call-sheet numerals** | `JetBrains Mono` | `"SF Mono", Menlo, monospace` | Google Fonts |

### Hierarchy

| Scale | Usage | Family | Size (desktop) | Line-height | Weight | Tracking |
|---|---|---|---|---|---|---|
| `display-xl` | Marquee hero | Fraunces (opsz 144) | `clamp(72px, 11vw, 184px)` | `0.92` | 300 | `-0.03em` |
| `display-lg` | Page hero | Fraunces (opsz 96) | `clamp(56px, 7vw, 112px)` | `0.95` | 300 | `-0.025em` |
| `display-md` | Section hero | Fraunces | `clamp(40px, 5vw, 72px)` | `1.0` | 400 | `-0.02em` |
| `h1` | Page title | Fraunces | `48px` | `1.05` | 500 | `-0.02em` |
| `h2` | Section title | Fraunces | `36px` | `1.1` | 500 | `-0.015em` |
| `h3` | Subsection | Inter | `24px` | `1.2` | 600 | `-0.01em` |
| `h4` | Card title | Inter | `18px` | `1.3` | 600 | `-0.005em` |
| `body-lg` | Lede | Inter | `18px` | `1.6` | 400 | `0` |
| `body` | Default | Inter | `15px` | `1.65` | 400 | `0` |
| `body-sm` | Meta / caption | Inter | `13px` | `1.5` | 400 | `0.01em` |
| `overline` | Kicker / category | Inter | `11px` | `1.2` | 600 | `0.18em` uppercase |
| `mono` | Code, IDs, timestamps | JetBrains Mono | `13px` | `1.55` | 400 | `0` |

### Rules

- Display serif is **always Fraunces with low weight (300–400)**. Never bold serif — we want elegance, not gravity.
- **Italic Fraunces** (optical italic) is used sparingly for editorial pull-quotes and brand tagline.
- UI sans (Inter) uses `font-feature-settings: "ss01", "cv11"` for a slightly geometric feel.
- Uppercase is reserved for `overline` kickers and navigation — always with `letter-spacing ≥ 0.15em`.
- Numerals in call-sheets, pricing, and stats use **tabular mono** (JetBrains Mono, `font-variant-numeric: tabular-nums`).

---

## 4. Component Stylings

### Buttons

| Variant | Background | Text | Border | Hover |
|---|---|---|---|---|
| `primary` | `gold` | `obsidian` | none | `gold-deep`, y-translate `-1px` |
| `ghost-dark` | transparent | `cream` | `1px hairline` | bg `ink`, border `gold` |
| `ghost-light` | transparent | `obsidian` | `1px hairline-light` | bg `muted` |
| `destructive` | `ruby` | `cream` | none | darker ruby |
| `link` | transparent | `gold` | underline on hover | `gold-deep` |

- Radius: **`6px`** (consistently tight — never pill).
- Padding: `12px 20px` (md), `10px 16px` (sm), `16px 28px` (lg).
- Font: `Inter 500, 14px, letter-spacing 0.01em`.
- Primary CTA labels are **sentence-case** ("Jetzt casten") — never all-caps except on overlines.
- Focus: `2px gold ring` offset by `2px obsidian/paper`.

### Cards

- **Production Card** (casting calls):
  - Surface `film`, border `1px hairline`, radius `8px`.
  - Full-bleed 16:9 image top; gold hairline under image.
  - Title Fraunces 500 / 22px; meta mono 12px (date, location, role count).
  - Hover: border lifts to `gold`, image scales `1.015`, 400ms cubic-bezier.

- **Profile Card** (extras):
  - Portrait 3:4 aspect, grayscale until hover → gains color.
  - Overlay gradient `rgba(8,8,10,0.0) → rgba(8,8,10,0.9)` bottom 40%.
  - Name Fraunces 400 / 20px, attributes mono 11px.
  - Verified badge: `sage` 6px dot + "Verifiziert" mono 10px.

- **Stat Card**:
  - No border. Top hairline `1px gold` (8px wide, not full).
  - Value Fraunces 300 / 72px tabular.
  - Label overline 11px ash.

### Inputs

- Background `surface`, border `1px hairline`, radius `6px`, height `44px`.
- Focus: border `gold`, no shadow (we are minimal).
- Label overline 11px above input, gap `6px`.
- Placeholder `ash`, value `cream`.
- Search input: leading magnifier icon `16px`, mono font, monospace baseline.

### Navigation

- Top nav: `72px` tall, `obsidian` with bottom `1px hairline`.
- Logo left (wordmark `Round12.de` Fraunces 400 / 22px, letter-spacing `0.04em`).
- Links: overline style, 11px, ash default → cream on hover, `gold` underline on active.
- CTA right: primary button + "Anmelden" ghost link.
- Mobile: full-viewport overlay nav, huge display serif links (52px), gold dividers between.

### Badges & Tags

- `default`: `ink` bg, `ash` text, 11px mono.
- `gold-outline`: transparent, `1px gold` border, `gold` text.
- `verified`: `sage` dot + `cream` text, no bg.
- `urgent`: `ruby` bg, `cream` text, 10px uppercase overline.

### Avatar

- Circle, `1px hairline` ring default; active ring `2px gold`.
- Stack/group: `-12px` overlap, white-space hairline around each.
- Fallback: initials in Fraunces 400, `gold` on `ink`.

---

## 5. Layout Principles

### Spacing Scale (4-pt based)

`4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192` px.

Tokens: `xs=4, sm=8, md=16, lg=24, xl=32, 2xl=48, 3xl=64, 4xl=96, 5xl=128, 6xl=192`.

### Grid

- **Desktop:** 12-column, `72px` outer gutter, `24px` column gap, max content width `1360px`.
- **Tablet:** 8-column, `32px` outer, `20px` gap.
- **Mobile:** 4-column, `20px` outer, `16px` gap.

### Section Rhythm

- Hero: `min-height: 92vh`, copy block occupies columns 2–8.
- Standard section: `padding-block: 128px` desktop / `80px` mobile.
- Editorial section (brandbook, specs): max reading column `720px`, centered; hairlines separate chapters.

### Whitespace Philosophy

> **Air is a design element.** If a component can breathe, it should. If in doubt: add 32px.

- Never fill a section edge-to-edge with text. Image bleeds OK; text does not.
- Vertical rhythm locked to 8px baseline grid; type scale is snapped.

---

## 6. Depth & Elevation

Round12.de uses **light, not shadow** for depth. Shadows are extremely restrained.

| Layer | Treatment |
|---|---|
| Canvas | `obsidian` flat |
| Card | `film` flat + `1px hairline` border |
| Popover | `surface` flat + `1px hairline` + `shadow-sm` (`0 1px 2px rgba(0,0,0,0.4)`) |
| Dialog | `film` + `1px hairline` + `shadow-md` (`0 8px 32px rgba(0,0,0,0.5)`) + 20px backdrop-blur |
| Toast | `ink` + `1px gold` border (never shadow) |

Never use multi-stop drop-shadows. Never use inner shadows on inputs. Depth comes from **hairlines + slight surface-tint shift**.

---

## 7. Do's and Don'ts

### DO

- ✅ Use Fraunces for every display heading, even tiny ones ≥ 22px.
- ✅ Treat gold as a **spotlight** — one primary CTA per viewport, never two competing golds.
- ✅ Let photographs breathe full-bleed — they are the product.
- ✅ Use mono numerals for dates, rates, IDs, shoot times.
- ✅ Animate with `cubic-bezier(0.22, 1, 0.36, 1)` at `300–500ms` — cinematic, unhurried.
- ✅ Use `-0.02em` tracking on all display serif.
- ✅ Pair every full-bleed hero image with a text overlay at the bottom-left third (film poster lockup).

### DON'T

- ❌ Never use gradients on text. (Ever.)
- ❌ Never use rounded-full buttons or pills. Radius stays ≤ 8px.
- ❌ No emoji in product UI. Lucide icons only.
- ❌ No drop-shadows on text, no glow effects, no neon.
- ❌ Do not mix serif weights heavier than 500 — we are editorial, not theatrical.
- ❌ No more than 3 accent colors in a single view (gold + one secondary + optional ruby).
- ❌ Never center body copy longer than one sentence.
- ❌ No stock-photo-smiling-business-people. Ever. Portraits are editorial, black-and-white-first, cinematic.

---

## 8. Responsive Behavior

### Breakpoints

| Name | Min width | Columns | Outer gutter |
|---|---|---|---|
| `xs` | 0 | 4 | 20px |
| `sm` | 640 | 4 | 24px |
| `md` | 768 | 8 | 32px |
| `lg` | 1024 | 12 | 48px |
| `xl` | 1280 | 12 | 72px |
| `2xl` | 1536 | 12 | 96px |

### Touch targets

- Minimum `44 × 44 px` for any interactive element on mobile.
- Primary CTA grows to `52px` height on mobile with `18px` label.

### Collapsing strategy

- Desktop 3-col grid → tablet 2-col → mobile 1-col stacked.
- Nav collapses to overlay at `< md`.
- Hero type scales via `clamp()` — display-xl shrinks to `72px` on smallest viewport, never wraps awkwardly.
- Component library sidebar: drawer on mobile, persistent on `≥ lg`.

### Mobile-specific

- Thumb-reach primary CTA is pinned bottom-right with `24px` margin on marketing pages after hero.
- Swipe-dismiss for modals/sheets.
- Image grids use `scroll-snap-x` horizontally on mobile where columns would be too narrow.

---

## 9. Agent Prompt Guide

### Quick color reference

```
Canvas: #08080A (obsidian)
Text: #F5F1E8 (cream)
Primary: #E9B949 (gold)
Border: #2A2A30 (hairline)
Muted text: #8A8A93 (ash)
```

### Ready-to-use prompts

> *"Build a casting call card for Round12.de. Dark canvas (#08080A), card surface #0F0F12 with 1px #2A2A30 border, 8px radius. Top full-bleed 16:9 image, gold hairline under image. Title in Fraunces 500 at 22px, meta in JetBrains Mono 12px. Hover: border shifts to #E9B949, image scales 1.015 over 400ms."*

> *"Build a hero section for Round12.de. Full-bleed dark background #08080A with optional black-and-white photo overlay at 30% opacity. Huge Fraunces display heading, weight 300, clamp(72px, 11vw, 184px), tracking -0.03em, color #F5F1E8. Gold overline kicker (#E9B949, 11px, 0.18em tracking, uppercase). Primary gold CTA below."*

> *"Make a profile card for an extra. 3:4 portrait, grayscale by default. On hover, color returns and a gold hairline appears below. Name in Fraunces 400/20px, attributes (age range, height) in JetBrains Mono 11px ash (#8A8A93). Small sage dot + Verifiziert label if verified."*

### Voice & tone

- German-first, English fluent.
- Confident, understated. Never shout.
- Industry vocabulary: *Casting, Rolle, Gage, Call-Sheet, Self-Tape, Agentur, Produktion, Drehtag*.
- Speak like a casting director talks to a producer over coffee — warm, precise, no jargon-waste.

### Taglines (brand voice examples)

- "Die Crew hinter jedem Shot."
- "Jedes Gesicht. Jede Rolle. Jede Produktion."
- "Gecastet in Minuten. Am Set in Tagen."
- "Das Casting-Call-Sheet, neu gedacht."

---

*Document version: 1.0 — June 2025 — Maintained by the Round12.de design team.*