Gothic / Dark Dramatic

---
name: gothic-dramatic
description: Apply the Gothic / Dark Dramatic visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Gothic / Dark Dramatic, mentions gothic, dark ornate, blackletter gothic, or describes near-black with blood red and silver, blackletter display accents, ornamental filigree frames — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Gothic / Dark Dramatic Design System

High-contrast dramatic darkness: near-black grounds, blood red and silver, bone-white serifs, blackletter display accents, symmetrical layouts framed in filigree ornament. Cathedral drama and metal-band theatricality as a design system.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Gothic / Dark Dramatic.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (gothic, dark ornate, blackletter gothic, dramatic dark), or describes its traits: near-black with blood red and silver; blackletter display accents; ornamental filigree frames; centered symmetrical layout; heavy dramatic shadows; high-contrast serif body.

## Design tokens

### Color palette

- Near-black page background: `#0a0a0a` (--color-bg)
- Panel background, slightly warmed black: `#151313` (--color-surface)
- Bone white — primary text: `#e8e4db` (--color-text)
- Silver — secondary text and ornament: `#c0c0c0` (--color-text-muted)
- Blood red — dramatic fills, ornament, and hover states; decorative at this depth: `#8b0000` (--color-accent)
- Brighter blood red for large accents needing more presence: `#c1121f` (--color-accent-bright)
- Charcoal rules and frame lines: `#3a3535` (--color-border)

### Typography

- Display / headings: UnifrakturMaguntia (fallback: Old English Text MT, serif)
- Body: Cormorant Garamond (fallback: Garamond, Georgia, serif)
- Type scale: 1.333 ratio, base 17px — computed steps: 17px / 23px / 30px / 40px / 54px / 72px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.15, letter-spacing 0.01em
- Body: line-height 1.6, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96, 128 — Dramatic and vertical: vast dark space above and below centered content, like a nave; ornament fills what whitespace does elsewhere.
- Border radius: none 0px — Strictly square. Curves belong to the filigree ornament, never to the structure.
- Border treatment: 1px solid #3a3535 — Frames matter: featured panels get double rules with corner filigree; silver 1px rules divide sections like engraved plates.

### Shadows

- abyss: `0 12px 40px rgba(0, 0, 0, 0.7)` — Heavy elevation for modals and featured imagery
- blood-glow: `0 0 30px rgba(139, 0, 0, 0.35)` — Ominous red aura behind key CTAs and hero ornament
- vignette: `inset 0 0 120px rgba(0, 0, 0, 0.8)` — Inner darkness pulling edges of hero and image frames toward black

### Layout

- Max content width: 1140px
- Strict central symmetry — the axis is sacred
- One blackletter statement per view; everything else in serif
- Ornamental frames and dividers built from mirrored filigree SVG
- Full-bleed imagery darkened with vignette so bone text floats above

### Effects

- Mirrored filigree and thorn-vine SVG ornament
- Deep vignette on all photography
- Faint smoke or fog drift in hero backgrounds
- Silver foil texture on rules and small caps labels

### Motion

- Easing: cubic-bezier(0.6, 0, 0.2, 1); durations 200ms / 400ms / 900ms
- Slow, ceremonial fades — content emerges from black
- Ornament draws in symmetrically from the center line
- Hover ignites: silver rules and links warm to blood red
- Smoke drift loops are near-imperceptibly slow

## CSS variables (drop-in)

```css
:root {
  --color-bg: #0a0a0a;
  --color-surface: #151313;
  --color-text: #e8e4db;
  --color-text-muted: #c0c0c0;
  --color-accent: #8b0000;
  --color-accent-bright: #c1121f;
  --color-border: #3a3535;
  --radius-none: 0px;
  --shadow-abyss: 0 12px 40px rgba(0, 0, 0, 0.7);
  --shadow-blood-glow: 0 0 30px rgba(139, 0, 0, 0.35);
  --shadow-vignette: inset 0 0 120px rgba(0, 0, 0, 0.8);
  --border-default: 1px solid #3a3535;
  --font-display: UnifrakturMaguntia, "Old English Text MT", serif;
  --font-body: "Cormorant Garamond", Garamond, Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.15;
  --leading-body: 1.6;
  --tracking-heading: 0.01em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.6, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 900ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=UnifrakturMaguntia:wght@400&family=Cormorant+Garamond:wght@400;500;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Black bar with 1px silver bottom rule; small blackletter monogram center or left, serif small-caps links; active link underlined in blood red
- **Hero:** Vignetted full-bleed image or pure black, centered blackletter headline in bone, filigree flourish above and below, serif subline, bordered CTA
- **Card:** Warmed-black surface, 1px charcoal frame with corner ornament on featured items, bone serif title, silver metadata, abyss shadow on hover
- **Button (primary):** Blood red #8b0000 fill with bone text, square corners, blood-glow on hover
- **Button (secondary):** Transparent, 1px silver border, bone text; border and text warm to blood red on hover
- **Form fields:** Black field, 1px charcoal border, bone serif text; focus draws a 1px blood-red border with a faint red glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Blackletter display type (UnifrakturMaguntia) reserved for one dramatic headline per view, framed by symmetrical filigree ornament and a thin silver rule, over a vignette-darkened ground. Spend boldness here; keep everything else quiet.

## Do

- Ration the blackletter to one headline per view — scarcity is what keeps it legible and dramatic
- Build symmetrically around a strong central axis
- Use vignettes and heavy shadow to keep every edge falling into darkness
- Let hover states 'ignite' from silver to blood red

## Don't

- No bright cheerful color; even the red stays dried-blood deep
- No rounded corners or soft friendly shadows
- Never set body copy in blackletter — it is display-only
- Don't crowd the ornament; filigree needs black space around it

## Accessibility notes

- Honest contrast warning: blood red #8b0000 on near-black is roughly 2:1 — it is decorative and for fills only, never for text or meaningful icons; text on red fills must be bone #e8e4db (~7:1 on #8b0000)
- Bone on black (~15:1) and silver on black (~11:1) carry all reading content
- Blackletter is hard to parse for many readers — duplicate any blackletter heading's meaning in accessible serif text or aria-labels where wording matters
- Smoke and glow animations must respect prefers-reduced-motion

## Reference sites

- KILLSTAR: https://www.killstar.com
- Ghost (band): https://ghost-official.com
- Behemoth: https://behemoth.pl

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip gothic-dramatic.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/gothic-dramatic.json

Settings → Capabilities → Skills → Upload skill → gothic-dramatic.zip