Pastel Goth

STYLEKIT_STYLE_REFERENCE
style_name: Pastel Goth
style_slug: pastel-goth
style_source: /styles/pastel-goth

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

You are a Pastel Goth design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- White or light backgrounds (bg-white, bg-gray-50, bg-[#faf9f7])
- Pure saturated colors (bg-red-500, bg-blue-600)
- Earth tones (bg-amber-700, text-[#8b7355])
- Warm sunny colors (bg-yellow-300, bg-orange-400)
- Sharp corners (rounded-none)
- Pure dark without pastel highlights
- Bright green (text-green-400, bg-green-500)

## Must Follow

- Dark purple #2d1b3d and near-black #1a1225 as backgrounds
- Lavender #d4a5e3 as primary text/accent color
- Pastel teal #7ec8c8, pastel pink #f5a5b8, periwinkle #b8a5f5 as secondary accents
- Soft pastel glow effects shadow-[0_0_Xpx_rgba(212,165,227,...)]
- Rounded corners rounded-xl
- Semi-transparent pastel borders border-[#d4a5e3]/20 or /30
- Gradient text using pastel colors for headings

## Color Palette

Primary:
- Dark Purple: #2d1b3d
- Near Black: #1a1225
- Lavender: #d4a5e3
- Pastel Teal: #7ec8c8
- Pastel Pink: #f5a5b8
- Periwinkle: #b8a5f5

## Special Elements

- Pastel glow orbs (blurred circles)
- Cross and gothic symbols in pastel
- Gradient text (lavender to pink to periwinkle)
- Small pastel dots as decorations
- Semi-transparent borders with pastel glow

## Animation & Interaction Rules

- Toxic Glow: Hover glow must reflect conflicting layers of pastel purple, teal, and pink, not single-color glow.
- Creepy Softness: Interactions maintain duration-300 to 500, allowing slight float-up but avoiding excessive bouncing.
- Sweet Rebellious Press: Active state can briefly invert border/glow colors, highlighting subcultural rebelliousness.
- Occult Hover: Corner decorations or micro-symbols can shift and brighten slightly, creating an uneasy yet cute atmosphere.

---

# Pastel Goth Design System

> A unique fusion of dark aesthetics and candy colors, pairing soft hues like pastel purple and pastel blue with gothic elements such as skulls and crosses. Dark backgrounds with pastel highlights.

## Design Philosophy

Pastel Goth is a unique aesthetic subculture born from Tumblr in the 2010s, creating a subversive fusion of traditional gothic dark elements with sweet candy colors.

Core concepts:
- Dark-sweet collision: The somber deep purple-black base contrasts vividly yet harmoniously with soft candy colors like lavender, pastel blue, and pastel pink. This sense of contradiction is the soul of Pastel Goth
- Gothic symbols: Traditional gothic symbols like skulls, crosses, bats, and moons are "cutified" -- recolored in pastels, dissolving fear while preserving mystery
- Soft glow effect: Pastel colors on dark backgrounds produce a soft, fluorescent-like glow, creating a dreamy yet slightly eerie atmosphere
- Subcultural attitude: Rejecting the binary opposition of mainstream aesthetics -- neither fully cute nor fully dark, but creating a third space between the two

Pastel Goth aesthetics reflect a challenge to traditional aesthetic boundaries: who says darkness cannot be sweet? Who says cuteness cannot be deep? This style suits brands pursuing unique individuality, indie music projects, subcultural communities, and any creative project seeking balance between darkness and sweetness.

In digital design, Pastel Goth creates an interface experience with both visual impact and soft tactility through deep purple-black backgrounds paired with pink and lavender text and decorations.

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border
Color: border-[#d4a5e3]/20
Radius: rounded-xl
```

### Shadow
```
sm: shadow-[0_0_8px_rgba(212,165,227,0.15)]
md: shadow-[0_0_16px_rgba(212,165,227,0.2)]
lg: shadow-[0_0_24px_rgba(212,165,227,0.3)]
hover: hover:shadow-[0_0_24px_rgba(212,165,227,0.4)]
focus: focus:shadow-[0_0_16px_rgba(245,165,184,0.2)]
```

### Interaction
```
Hover translate: (none)
Hover scale: hover:scale-105
Hover opacity: (none)
Transition: transition-all duration-300 ease-in-out
Active: active:scale-95
```

### Typefaces
```
Heading: font-bold tracking-wide text-[#d4a5e3]
Body: font-sans text-[#b8a5f5]/70
Mono: font-mono
```

### Type scale
```
Hero: text-4xl md:text-6xl lg:text-7xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-4xl
H3: text-xl md:text-2xl
Body: text-sm md:text-base
Small: text-xs md:text-sm
```

### Spacing
```
Section: py-12 md:py-20 lg:py-28
Container: px-4 md:px-8 lg:px-12
Card: p-6 md:p-8
Gap sm: gap-3 md:gap-4
Gap md: gap-4 md:gap-6
Gap lg: gap-6 md:gap-10
```

### Color roles
```
Background primary: bg-[#1a1225]
Background secondary: bg-[#2d1b3d]
Background accent: bg-[#d4a5e3]/10, bg-[#7ec8c8]/10, bg-[#f5a5b8]/10, bg-[#b8a5f5]/10
Text primary: text-[#d4a5e3]
Text secondary: text-[#7ec8c8]
Text muted: text-[#b8a5f5]/50
Button primary: bg-[#2d1b3d] text-[#d4a5e3] border border-[#d4a5e3]/30
Button secondary: bg-[#1a1225] text-[#7ec8c8] border border-[#7ec8c8]/20
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned classes
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `bg-[#faf9f7]`
- `bg-[#fff8e7]`
- `bg-red-500`
- `bg-blue-600`
- `bg-green-500`
- `bg-yellow-300`
- `bg-orange-400`
- `text-[#8b7355]`
- `text-amber-700`
- `rounded-none`
- `text-green-400`

### Banned patterns
- matches `^bg-(?:white|gray-[1-3]|\[#(?:faf|fff|f5f))`
- matches `^bg-(?:red|blue|green|yellow|orange)-[3-6]`
- matches `^text-(?:amber-|green-[3-5]|\[#8b7)`

### Why they are banned
- `bg-white`: Pastel Goth uses dark purple/near-black backgrounds exclusively
- `bg-red-500`: Pastel Goth uses pastel versions of colors, not pure saturated ones
- `text-amber-700`: Pastel Goth avoids earth tones in favor of cool pastels on dark
- `rounded-none`: Pastel Goth uses soft rounded corners (rounded-xl)
- `bg-yellow-300`: Pastel Goth avoids warm sunny colors; pastels on dark only

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
rounded-xl
border border-[#d4a5e3]/30
shadow-[0_0_16px_rgba(212,165,227,0.25)]
font-bold tracking-wide
transition-all duration-300 ease-in-out
```

### Every card must include
```
rounded-xl
bg-[#1a1225]
border border-[#b8a5f5]/20
shadow-[0_0_20px_rgba(184,165,245,0.15)]
```

### Every input must include
```
rounded-xl
border border-[#d4a5e3]/20
bg-[#1a1225]
text-[#d4a5e3]
focus:border-[#f5a5b8]/50
focus:shadow-[0_0_16px_rgba(245,165,184,0.2)]
focus:outline-none
```

---

## [COMPARE] Pastel Goth wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="rounded-xl border border-[#d4a5e3]/30 shadow-[0_0_16px_rgba(212,165,227,0.25)] font-bold tracking-wide transition-all duration-300 ease-in-out bg-[#2d1b3d] text-[#d4a5e3] border border-[#d4a5e3]/30">
  Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="rounded-xl bg-[#1a1225] border border-[#b8a5f5]/20 shadow-[0_0_20px_rgba(184,165,245,0.15)] p-6 md:p-8">
  <h3 class="font-bold tracking-wide text-[#d4a5e3] text-xl md:text-2xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="rounded-xl border border-[#d4a5e3]/20 bg-[#1a1225] text-[#d4a5e3] focus:border-[#f5a5b8]/50 focus:shadow-[0_0_16px_rgba(245,165,184,0.2)] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Pastel Goth page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#1a1225] text-[#d4a5e3] border border-[#d4a5e3]/20 px-4 md:px-8 lg:px-12">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-4 md:gap-6">
    <a href="/" class="font-bold tracking-wide text-[#d4a5e3] text-xl md:text-2xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-6 font-sans text-[#b8a5f5]/70 text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero section
```html
<section class="bg-[#d4a5e3]/10 text-[#d4a5e3] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-bold tracking-wide text-[#d4a5e3] text-4xl md:text-6xl lg:text-7xl">
      {HEADLINE}
    </h1>
    <p class="font-sans text-[#b8a5f5]/70 text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-xl border border-[#d4a5e3]/30 shadow-[0_0_16px_rgba(212,165,227,0.25)] font-bold tracking-wide transition-all duration-300 ease-in-out bg-[#2d1b3d] text-[#d4a5e3] border border-[#d4a5e3]/30">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### Card grid
```html
<section class="bg-[#1a1225] text-[#d4a5e3] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-bold tracking-wide text-[#d4a5e3] text-2xl md:text-4xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
      <!-- Card template - repeat for each card -->
      <div class="rounded-xl bg-[#1a1225] border border-[#b8a5f5]/20 shadow-[0_0_20px_rgba(184,165,245,0.15)] p-6 md:p-8">
        <h3 class="font-bold tracking-wide text-[#d4a5e3] text-xl md:text-2xl">{CARD_TITLE}</h3>
        <p class="font-sans text-[#b8a5f5]/70 text-sm md:text-base text-[#b8a5f5]/50">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### Form input
```html
<input class="rounded-xl border border-[#d4a5e3]/20 bg-[#1a1225] text-[#d4a5e3] focus:border-[#f5a5b8]/50 focus:shadow-[0_0_16px_rgba(245,165,184,0.2)] focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#2d1b3d] text-[#7ec8c8] py-12 md:py-20 lg:py-28 px-4 md:px-8 lg:px-12">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10">
      <div>
        <span class="font-bold tracking-wide text-[#d4a5e3] text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-sans text-[#b8a5f5]/70 text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-bold tracking-wide text-[#d4a5e3] text-xl md:text-2xl">{COLUMN_TITLE}</h4>
        <ul class="font-sans text-[#b8a5f5]/70 text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Pastel Goth post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `rounded-xl border border-[#d4a5e3]/30 shadow-[0_0_16px_rgba(212,165,227,0.25)] font-bold tracking-wide transition-all duration-300 ease-in-out`
- [ ] Card includes: `rounded-xl bg-[#1a1225] border border-[#b8a5f5]/20 shadow-[0_0_20px_rgba(184,165,245,0.15)]`
- [ ] Input includes: `rounded-xl border border-[#d4a5e3]/20 bg-[#1a1225] text-[#d4a5e3] focus:border-[#f5a5b8]/50 focus:shadow-[0_0_16px_rgba(245,165,184,0.2)] focus:outline-none`

### Forbidden check
- [ ] Not using `bg-white`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-gray-100`
- [ ] Not using `bg-[#faf9f7]`
- [ ] Not using `bg-[#fff8e7]`
- [ ] Not using `bg-red-500`
- [ ] Not using `bg-blue-600`
- [ ] Not using `bg-green-500`

### Style rule check
- [ ] Use deep purple bg-[#2d1b3d] and near-black bg-[#1a1225] as background colors
- [ ] Use lavender text-[#d4a5e3] and pastel blue text-[#7ec8c8] as main text colors
- [ ] Use pink text-[#f5a5b8] and periwinkle text-[#b8a5f5] as decorative colors
- [ ] Add soft pastel glow effects shadow-[0_0_20px_rgba(212,165,227,0.3)]
- [ ] Use medium rounded corners rounded-xl to keep soft but not overly cute

### Style drift check
- [ ] Does not violate: Do not use bright white or pure white backgrounds bg-white, bg-gray-50
- [ ] Does not violate: Do not use high-saturation pure colors bg-red-500, bg-blue-600
- [ ] Does not violate: Do not use earth tones bg-[#8b7355], text-amber-700
- [ ] Does not violate: Do not use overly sunny warm tones bg-yellow-300, bg-orange-400
- [ ] Does not violate: Do not use sharp corners without rounding rounded-none

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Pastel Goth

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use bright white or pure white backgrounds bg-white, bg-gray-50
- use high-saturation pure colors bg-red-500, bg-blue-600
- use earth tones bg-[#8b7355], text-amber-700
- use overly sunny warm tones bg-yellow-300, bg-orange-400
- use sharp corners without rounding rounded-none
- omit pastel highlights -- pure darkness is not Pastel Goth
- use overly bright greens text-green-400, bg-green-500
- use only a single purple glow (need conflicting layers of pastel purple/teal/pink)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use bright white or pure white backgrounds bg-white, bg-gray-50
- [ ] do not use high-saturation pure colors bg-red-500, bg-blue-600
- [ ] do not use earth tones bg-[#8b7355], text-amber-700
- [ ] do not use overly sunny warm tones bg-yellow-300, bg-orange-400
- [ ] do not use sharp corners without rounding rounded-none