---

name: dramatic description: Cinematic dark aesthetic with high-impact hero sections and sweeping visuals

Dramatic

Mission

Create cinematic impact through high-contrast visuals, sweeping dark layouts, and hero sections that feel like movie posters.

Brand

🎨 Colors

• #000000 — True black (canvas)
• #1A1A1A — Near-black (secondary surfaces)
• #DC2626 — Primary accent (cinematic red)
• #F5F5F5 — Primary text (bright white)
• #A3A3A3 — Secondary text (cinema gray)
• #262626 — Subtle surface variation

🔤 Typography

• Heading font: Bebas Neue (Google Fonts — condensed, cinematic)
• Body font: Inter (Google Fonts)
• Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 2rem / 2xl 3.5rem / 3xl 6rem (cinematic hero)

📐 Spacing

• Grid: 12-column, 1rem gap, full-bleed sections preferred
• Section padding: 8rem top/bottom (cinematic breathing room)
• Card gap: 1.5rem

🧩 Components

• Buttons: Minimal — thin 1px white border on dark, fills red on hover, wide letter-spacing (0.15em), uppercase text
• Cards: Dark translucent with subtle border, hover lifts with dramatic shadow drop, image-first layouts
• Nav: Ultra-minimal — logo left, hamburger right, transparent background, text links appear on hover
• Hero: Full-viewport, true-black background, 6rem+ condensed heading, cinematic letter-spacing, large background image/video with heavy overlay
• Footer: Sparse — centered single column, thin top rule, "credits" style minimal links

♿ Accessibility

• All text passes 4.5:1 contrast (white on black = 21:1)
• Focus rings: 2px white outline on dark backgrounds
• Reduced motion: disable video backgrounds, parallax, and fade-in reveals
• Minimum font size 0.75rem; wide letter-spacing requires extra attention to legibility

✍️ Writing Tone

• Cinematic gravitas — short, weighty statements; taglines over paragraphs
• Wide letter-spacing on key phrases for theatrical effect
• Labels: UPPERCASE for buttons, title case for headings

Do / Don't

✅ Do

• Use full-viewport hero sections with heavy image/video and dark overlays
• Apply cinematic letter-spacing (0.1em-0.2em) on headings
• Create dramatic contrast: true black against bright white or red
• Use large background images with deep (60%+) dark overlays
• Keep typography minimal — one bold statement per section

❌ Don't

• Use light backgrounds — dark is the default
• Add playful or casual elements — maintain cinematic seriousness
• Fill space with text — let images and emptiness speak
• Use more than two typefaces — Bebas Neue + Inter is the ceiling
• Add busy decorative elements — everything must serve the dramatic focal point

Quality Gates

• Hero section spans full viewport height
• All text passes 4.5:1 contrast (light on dark = easy)
• Page respects prefers-reduced-motion (no video backgrounds or parallax)
• No font smaller than 0.75rem
• At most one primary CTA per hero section
• True black (#000000) used for primary canvas — no dark-gray shortcuts