StyleKit→
Pastel Goth
DocsAll Styles
Born from 2010s Tumblr

Pastel

Goth

Gothic darkness wrapped in candy-soft pastels. Where skulls smile in rose pink, bats flutter in lavender, and the void smells like cotton candy.

Aesthetic Pillars

The Dark Trinity

Three pillars of pastel goth identity — each one a contradiction, each one a truth.

Creepy Cute

Gothic symbols rendered in candy-soft pastels. The skull smiles in rose pink; the bat sleeps in lavender. Darkness made adorable.

Witching Hour

The crescent moon rises in periwinkle over a deep purple sky. Midnight has never looked so soft, so inviting, so strange.

Twilight Swarm

Lavender bats drift through the near-black void. Their wings catch no light — they are made of it. Pastel creatures of the dark.

UI Components

Dark Elements

Every component shaped by darkness, glowing with pastel candy light.

Deep purple bg + pastel border. Hover amplifies glow shadow. Candy-dark language.

Color System

Candy Palette

Six colors that define the aesthetic — two voids and four sweets. Every palette choice is a contradiction resolved in beauty.

Deep Purple#2d1b3d

The void from which all pastels emerge

Near Black#1a1225

Midnight plum — darker than shadow

Lavender#d4a5e3

The primary candy highlight

Mint Blue#7ec8c8

Cool teal whisper from the void

Soft Pink#f5a5b8

Rose-candy blush, skull-sweet

Periwinkle#b8a5f5

Between violet and indigo dreams

Type Scale

Typography

Bold and playful sizing on deep dark grounds. Pastel colors carry each level of hierarchy.

Display

Pastel Goth

H1

Creepy Cute Aesthetic

H2

Born from Tumblr Darkness

H3

Where shadows bloom in pastel light

Body

Gothic darkness meets candy-sweet aesthetics in one hauntingly beautiful style.

Caption

MIDNIGHT WHISPERINGS FROM THE VOID

Motif Language

Gothic Symbols

Iconic gothic motifs redrawn in pastel ink. Each symbol stripped of menace, filled with candy — creepy cute in its purest form.

Skull#f5a5b8
Bat#d4a5e3
Moon#b8a5f5
Star#7ec8c8
Cross#b8a5f5
Sparkle#f5a5b8
Aesthetic Law

Design Principles

The rules of pastel goth are few but firm. Obey them and the aesthetic sings. Break them and it becomes something ordinary.

Embrace

  • Deep purple bg `#2d1b3d` and near-black `#1a1225`
  • Lavender and mint for all primary text
  • `rounded-2xl` for softness against dark backgrounds
  • Pastel glow shadows with rgba opacity 0.2–0.35
  • Skull, bat, moon, star SVG motifs in pastel colors
  • Pastel glowing borders at 30–60% on hover
  • Dark glass cards with soft-colored border glow
  • Creepy-cute copy: mix gothic and candy tone

Avoid

  • No light or white backgrounds anywhere
  • No fully saturated black-only gothic palette
  • No harsh neons or oversaturated accent colors
  • No corporate or professional visual language
  • No border-2 or thicker hard borders
  • No rounded-none — always preserve softness
  • No bright white text — use tinted pastels only
  • No flat, lifeless shadows without glow

“The contradiction is the aesthetic. Be dark. Be sweet. Be both — always at once.”

Pastel Goth Principle
Glow System

Pastel Glows

The signature technique of pastel goth — dark backgrounds amplify pastel glow until elements seem to radiate ethereal light.

Border Glow States

Restingrgba(212,165,227,0.15)
Hoverrgba(212,165,227,0.4)
Activergba(212,165,227,0.7)
Focus (Pink)rgba(245,165,184,0.6)

Box Shadow Glow Scale

Subtle

0 0 8px #d4a5e326

Moderate

0 0 16px #b8a5f538

Strong

0 0 24px #f5a5b84d

Intense

0 0 36px #7ec8c866

Pastel Goth

Part of StyleKit — a living design system collection

DocsAll StylesHome

粉彩哥特 · Pastel Goth · StyleKit Design System