# Dramatic

> Cinematic dark aesthetic with high-impact hero sections and sweeping visuals

- Skill: `jdsadminllc/dramatic` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jdsadminllc/dramatic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jdsadminllc/dramatic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: jdsadminllc (https://skillmd.com/u/jdsadminllc)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/jdsadminllc/dramatic

---

# 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