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.

## 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