Dracula

---
name: dracula
description: Apply the Dracula visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Dracula, mentions dracula theme, dracula dark, vampire theme, or describes charcoal-violet background, electric purple and pink accents, vivid neon syntax rainbow — 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
---

# Dracula Design System

The world's most-ported dark theme as a web style: a cool charcoal-violet base with electric purple, pink, cyan, and green accents at full brightness. Playful, high-energy dark mode with a vampire wink — neon syntax colors treated as brand.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Dracula.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (dracula theme, dracula dark, vampire theme, purple dark theme), or describes its traits: charcoal-violet background; electric purple and pink accents; vivid neon syntax rainbow; high-energy dark mode; playful vampire branding.

## Design tokens

### Color palette

- Page background — Dracula Background: `#282a36` (--color-bg)
- Cards, code blocks, selection — Dracula Current Line/Selection: `#44475a` (--color-surface)
- Borders and dividers — Current Line doubles as the line color: `#44475a` (--color-border)
- Primary text — Dracula Foreground: `#f8f8f2` (--color-text)
- Secondary text and captions — Dracula Comment: `#6272a4` (--color-text-muted)
- Primary accent, links and buttons — Dracula Purple: `#bd93f9` (--color-accent)
- Secondary accent, highlights and hovers — Dracula Pink: `#ff79c6` (--color-accent-2)
- Info accents and inline code — Dracula Cyan: `#8be9fd` (--color-cyan)
- Success states, strings, diffs — Dracula Green: `#50fa7b` (--color-green)
- Warnings and parameters — Dracula Orange: `#ffb86c` (--color-orange)
- Errors and destructive actions — Dracula Red: `#ff5555` (--color-red)
- Highlights and marks — Dracula Yellow: `#f1fa8c` (--color-yellow)

### Typography

- Display / headings: Fira Code (fallback: SFMono-Regular, Menlo, monospace)
- Body: DM Sans (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: Fira Code (fallback: SFMono-Regular, Menlo, monospace)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.15, letter-spacing -0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Medium density with confident gaps — the neon accents are loud, so surfaces need enough dark space between them to keep the energy fun rather than chaotic.
- Border radius: sm 6px, md 10px, full 999px — Friendly rounding; the official brand leans playful, not sharp.
- Border treatment: 1px solid #44475a — Current Line #44475a is both surface and border; accent-colored 1px borders mark active or featured elements.

### Shadows

- none: `none` — Default for cards — color contrast does the layering
- glow-purple: `0 0 24px rgba(189, 147, 249, 0.35)` — Featured cards, primary CTA hover — a restrained neon halo
- modal: `0 12px 40px rgba(0, 0, 0, 0.5)` — Modals and dropdowns over the page

### Layout

- Max content width: 1200px
- Two-layer world: everything is either bg #282a36 or surface #44475a — no deeper ladder exists in the spec
- Syntax colors are assigned web jobs and kept consistent (green = success, red = danger, cyan = info, yellow = highlight)
- Code blocks are the centerpiece: full Dracula syntax highlighting on #282a36 with #44475a line-highlight bars

### Effects

- Selection styled as #44475a with pink text, echoing the editor's current-line highlight
- Occasional purple→pink gradient text on hero keywords, used once per page

### Motion

- Easing: cubic-bezier(0.2, 0.8, 0.2, 1); durations 120ms / 200ms / 320ms
- Snappy and playful — quick color flips between purple and pink on hover
- Glow effects fade in on hover rather than sitting on by default

## CSS variables (drop-in)

```css
:root {
  --color-bg: #282a36;
  --color-surface: #44475a;
  --color-border: #44475a;
  --color-text: #f8f8f2;
  --color-text-muted: #6272a4;
  --color-accent: #bd93f9;
  --color-accent-2: #ff79c6;
  --color-cyan: #8be9fd;
  --color-green: #50fa7b;
  --color-orange: #ffb86c;
  --color-red: #ff5555;
  --color-yellow: #f1fa8c;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-full: 999px;
  --shadow-glow-purple: 0 0 24px rgba(189, 147, 249, 0.35);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
  --border-default: 1px solid #44475a;
  --font-display: "Fira Code", SFMono-Regular, Menlo, monospace;
  --font-body: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", SFMono-Regular, Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.15;
  --leading-body: 1.65;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600;700&family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Bar on #282a36 with links in Foreground; active link in Purple with a 2px purple underline; a small bat or fang glyph next to the wordmark is on-brand.
- **Hero:** Big Fira Code headline in Foreground with one keyword in a purple→pink gradient; sub-copy in Comment #6272a4 at large size; dual CTAs — purple solid and pink outline.
- **Card:** Surface #44475a at low opacity or solid on bg, 10px radius, 24px padding; title Foreground, meta Comment, top border in one of the syntax accents to categorize the card.
- **Button (primary):** Purple #bd93f9 fill with #282a36 text, 6px radius, 700 weight; hover swaps to Pink #ff79c6 with a soft purple glow.
- **Button (secondary):** Transparent with 1px #bd93f9 border and purple text; hover fills #44475a and shifts text to pink.
- **Form fields:** Input on #44475a with no border at rest, 6px radius; focus adds a 2px Purple border and cyan caret; placeholder in Comment #6272a4.

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

The purple-to-pink one-two punch: #bd93f9 purple UI accents with #ff79c6 pink highlights snapping against the #282a36 background — instantly legible as Dracula to anyone who has opened a code editor since 2013. Spend boldness here; keep everything else quiet.

## Do

- Use the 11 spec colors verbatim — the palette is trademarked territory for fans and instantly recognized
- Let purple lead and pink punctuate; the other accents play semantic supporting roles
- Put dark #282a36 text on any neon-filled button or badge
- Show off code blocks — Dracula is first and foremost a syntax theme

## Don't

- Don't dim or desaturate the accents into pastels — Dracula's register is electric, not soothing
- Don't invent extra background shades; the spec's two-layer bg/surface world is part of the look
- Don't set long body copy in Comment #6272a4 — it is a low-contrast accent, not a text tier

## Accessibility notes

- Foreground #f8f8f2 on bg #282a36 is excellent (~13:1)
- Comment #6272a4 on bg measures ~3:1 — fails AA for body text; use it only for large text, captions, or decorative comment-style copy, with #f8f8f2 for anything that must be read
- Neon accents (green, cyan, yellow, pink) pass easily as text on bg but require dark text when used as fills
- Red #ff5555 on bg is ~4:1 — pair error text with an icon or bold weight rather than color alone

## Reference sites

- Dracula theme specification: https://draculatheme.com/contribute
- Dracula GitHub organization: https://github.com/dracula/dracula-theme

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

Install this skill

unzip dracula.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → dracula.zip