Whimsigothic

---
name: whimsigothic
description: Apply the Whimsigothic visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Whimsigothic, mentions whimsigoth, whimsy goth, celestial goth, or describes deep purple and jewel-tone palette, gold celestial motifs (suns, moons, stars), velvet and brocade texture cues — 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
---

# Whimsigothic Design System

Celestial boho-goth from the 1990s, revived by TikTok: deep aubergine and midnight jewel tones, gold suns, moons, and stars, velvet and brocade textures, stained-glass lamplight, and curly mystical serifs. Dramatic but cozy — a fortune-teller's living room, not a crypt.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Whimsigothic.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (whimsigoth, whimsy goth, celestial goth, 90s witchy, stevie nicks aesthetic), or describes its traits: deep purple and jewel-tone palette; gold celestial motifs (suns, moons, stars); velvet and brocade texture cues; warm candlelight glows on dark grounds; ornate tarot-card serif display type; curved, Victorian-inspired framing.

## Design tokens

### Color palette

- Deep aubergine night — the velvet wall: `#241733` (--color-bg)
- Raised panels and cards, lighter plum velvet: `#34244d` (--color-surface)
- Candlelit parchment cream for body text: `#f2e9db` (--color-text)
- Faded lavender for secondary text: `#c6b4dc` (--color-text-muted)
- Celestial gold — suns, moons, links, key actions: `#d9a441` (--color-accent)
- Wine velvet for decorative fills and tags: `#8e3b5c` (--color-accent-burgundy)
- Silver moonlight blue for secondary decoration: `#b9c8ea` (--color-accent-moon)
- Dark botanical green for alternate sections: `#2e4238` (--color-forest)
- Dusky violet hairlines and ornament strokes: `#5a4378` (--color-border)

### Typography

- Display / headings: Cinzel Decorative (fallback: Cormorant Garamond, Georgia, serif)
- Body: Lora (fallback: Georgia, serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.2, letter-spacing 0.04em
- Body: line-height 1.65, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Rich but unhurried; sections breathe like rooms lit by separate lamps, with ornamental dividers rather than hard rules between them.
- Border radius: sm 6px, md 14px, arch 160px 160px 8px 8px — Arched tops on feature cards and imagery echo Victorian windows and tarot-card frames; small radii elsewhere.
- Border treatment: 1px solid #5a4378 — Thin violet hairlines; important frames get a double border or a gold inner keyline (1px solid #d9a441 inset by 4px).

### Shadows

- candle-glow: `0 0 24px rgba(217, 164, 65, 0.25)` — Warm halo behind celestial icons and primary buttons
- veil: `0 10px 32px rgba(10, 5, 22, 0.55)` — Card and modal elevation against the night background
- velvet-inset: `inset 0 1px 0 rgba(255, 255, 255, 0.06)` — Subtle top sheen on surfaces to suggest fabric nap

### Layout

- Max content width: 1140px
- Centered, symmetrical compositions like an altar or mantel arrangement
- Arched image frames and scalloped or ornamental section dividers
- Scattered small star glyphs as background texture, never dense enough to distract
- Generous dark margins so gold elements read as jewelry

### Effects

- Fine noise or fabric-grain overlay at 2-4% opacity to suggest velvet
- Slow twinkle (opacity 0.6 to 1) on decorative star glyphs
- Radial warm gradient behind hero content like lamplight

### Motion

- Easing: cubic-bezier(0.33, 0, 0.2, 1); durations 180ms / 320ms / 700ms
- Slow fades and gentle drifts; nothing snaps
- Star twinkle loops run at 3s+ so they read as ambience
- Hover states brighten the gold glow rather than moving elements

## CSS variables (drop-in)

```css
:root {
  --color-bg: #241733;
  --color-surface: #34244d;
  --color-text: #f2e9db;
  --color-text-muted: #c6b4dc;
  --color-accent: #d9a441;
  --color-accent-burgundy: #8e3b5c;
  --color-accent-moon: #b9c8ea;
  --color-forest: #2e4238;
  --color-border: #5a4378;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-arch: 160px 160px 8px 8px;
  --shadow-candle-glow: 0 0 24px rgba(217, 164, 65, 0.25);
  --shadow-veil: 0 10px 32px rgba(10, 5, 22, 0.55);
  --shadow-velvet-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --border-default: 1px solid #5a4378;
  --font-display: "Cinzel Decorative", "Cormorant Garamond", Georgia, serif;
  --font-body: Lora, Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-heading: 0.04em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;
}
```

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

## Component recipes

- **Nav:** Transparent over the night background, centered wordmark in Cinzel Decorative flanked by small star glyphs; links in cream with gold underline on hover.
- **Hero:** Centered arched frame with a radiant sun or crescent illustration in gold, headline in Cinzel Decorative, candle-glow radial gradient behind, scattered twinkling stars.
- **Card:** Plum surface with arch-top variant for features, thin violet border, gold icon or star marker, veil shadow; title serif, body Lora.
- **Button (primary):** Gold #d9a441 fill with deep-plum text, 6px radius, candle-glow shadow on hover; small star glyph before the label optional.
- **Button (secondary):** Transparent with 1px gold border and gold text; fills to a faint gold wash (rgba(217,164,65,0.12)) on hover.
- **Form fields:** Dark surface input with violet hairline border, cream text, gold focus ring (0 0 0 2px rgba(217,164,65,0.4)); labels in small-caps-styled Lora.

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

Gold celestial iconography — a radiant sun face, crescent moons, scattered eight-point stars — glowing softly against deep aubergine velvet, framed by ornate curved borders. Spend boldness here; keep everything else quiet.

## Do

- Commit to the dark jewel-tone ground; whimsigoth dies on white
- Use gold sparingly, as jewelry — icons, keylines, one primary action
- Mix celestial motifs with botanical and moth/moon imagery for range
- Let arches and curves soften an otherwise gothic structure

## Don't

- Don't drift into full horror-goth: no blood reds, skulls, or grunge distress
- Don't use cool neon purples — this palette is warm, dusty, and lamplit
- Don't set long body copy in the decorative display face
- Don't confuse it with dark academia: whimsigoth is mystical and domestic, not scholarly

## Accessibility notes

- Core pairs pass AA: cream text (#f2e9db) and gold accent (#d9a441) both exceed 4.5:1 on the aubergine background.
- accent-burgundy and forest are decorative fills only — they lack contrast against the background for text.
- Star-twinkle ambience must respect prefers-reduced-motion and stay below flash thresholds.

## Reference sites

- Whimsigoth — Wikipedia: https://en.wikipedia.org/wiki/Whimsigoth
- Whimsigothic — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Whimsigothic
- Stevie Nicks (style touchstone) — Wikipedia: https://en.wikipedia.org/wiki/Stevie_Nicks

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

Install this skill

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

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

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