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 and extended sections from 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.