jdsadminllc 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