Dopamine Design

STYLEKIT_STYLE_REFERENCE
style_name: Dopamine Design
style_slug: dopamine-design
style_source: /styles/dopamine-design

# 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 Dopamine Design expert. This is the 2025-2026 design mega-trend centered on high-saturation colors, bold typography, and joyful energy.

## Design Tokens (Strict)
### Color System
- Primary: #ff006e (Hot Pink) — CTA, key actions, hero accents
- Secondary: #8338ec (Electric Purple) — cards, gradients, secondary actions
- Accent-Yellow: #ffbe0b — badges, highlights, warnings
- Accent-Blue: #3a86ff — links, info states, secondary gradients
- Accent-Green: #06d6a0 — success states, positive indicators
- Accent-Orange: #fb5607 — notifications, energy accents
- Surface-Light: #ffffff — card backgrounds (light mode)
- Surface-Dark: #1a0a2e — card backgrounds (dark variant)
- Text-Primary: #1a1a2e — headings on light bg
- Text-On-Color: #ffffff — text on colored surfaces

### Typography Scale
- Hero: text-5xl md:text-7xl font-black tracking-tight leading-[0.95]
- Section Title: text-3xl md:text-5xl font-extrabold tracking-tight
- Card Title: text-xl md:text-2xl font-bold
- Body: text-base font-medium leading-relaxed
- Caption: text-sm font-semibold uppercase tracking-widest
- Font Stack: 'Inter', 'SF Pro Display', system-ui, sans-serif

### Spacing & Radius
- Card padding: p-6 md:p-8
- Section gap: py-16 md:py-24
- Button: px-8 py-4 (desktop), px-6 py-3 (mobile)
- Border-radius: rounded-3xl (cards), rounded-full (buttons, badges), rounded-2xl (inputs)

### Shadows (Always Colored)
- Pink glow: shadow-[0_8px_30px_rgba(255,0,110,0.4)]
- Purple glow: shadow-[0_8px_30px_rgba(131,56,236,0.35)]
- Blue glow: shadow-[0_8px_30px_rgba(58,134,255,0.3)]
- Hover amplify: increase spread by 30%, add hover:-translate-y-0.5

## Absolute Constraints
1. ZERO gray backgrounds — replace bg-gray-* with tinted surfaces (bg-pink-50, bg-purple-50, bg-[#f8f0ff])
2. ZERO gray text — use text-[#1a1a2e] for primary, colored text for secondary
3. ZERO gray shadows — every shadow must carry a hue from the palette
4. ZERO small radius — rounded-2xl is the minimum for any container
5. ZERO thin font weights — font-semibold minimum for body, font-black for headings
6. ZERO serif fonts — sans-serif only, Inter preferred
7. ALL buttons must be pill-shaped (rounded-full) with colored shadow
8. ALL interactive elements must have hover:scale-105 + active:scale-95

## Decorative Elements (Anti-"AI Taste")
- Replace generic emoji with: SVG geometric shapes (circles, triangles, hexagons), CSS gradient orbs, abstract blob shapes via clip-path
- Use CSS geometric decorations: rotating gradient borders, animated dot grids, color-shifting orbs
- Background patterns: radial gradient blobs, mesh gradients, animated grain texture
- Icon style: Lucide or Phosphor icons with colored fills, never outline-only

## Motion System
- Hover: scale(1.05) + shadow amplify, duration-200, ease-out
- Press: scale(0.95), duration-100
- Enter: fadeInUp with 0.6s cubic-bezier(0.16,1,0.3,1)
- Stagger: 0.08s delay between siblings
- Gradient animation: background-size 200% with 3s infinite alternate

## Self-Check Mechanism
Before outputting any component, verify:
1. Does every surface have a non-gray color or gradient?
2. Are all shadows colored (not black/gray)?
3. Is border-radius >= rounded-2xl for containers?
4. Are headings font-bold or heavier?
5. Do interactive elements have scale + shadow hover effects?
If any check fails, fix before output.

## Responsive
- Mobile: text-3xl hero, px-6 py-3 buttons, rounded-2xl cards, single column
- Desktop: text-7xl hero, px-8 py-4 buttons, rounded-3xl cards, multi-column grid

---

# Dopamine Design Design System

> 、、。2025-2026 ，，。

## Design Philosophy

Dopamine Design is the hottest design trend of 2025-2026. The core idea is to use highly saturated colors, bold typography, and energetic visual elements to directly stimulate feelings of joy and excitement.

Core principles:
- Color explosion: 5-6 high-saturation colors, no dull or muted tones
- Bold typography: oversized fonts, heavy weights, tight leading
- Rounded & friendly: large border-radius, pill shapes, bubble elements
- Playful motion: elastic animations, overshoot, joyful micro-interactions
- Anti-gray: minimize gray usage, replace neutrals with color

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#ff006e]/20
Radius: rounded-3xl
```

### Shadow
```
sm: shadow-[0_4px_15px_rgba(255,0,110,0.25)]
md: shadow-[0_8px_30px_rgba(255,0,110,0.4)]
lg: shadow-[0_12px_40px_rgba(131,56,236,0.5)]
hover: hover:shadow-[0_12px_40px_rgba(255,0,110,0.6)]
focus: focus:shadow-[0_0_0_4px_rgba(255,0,110,0.15)]
```

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

### Typefaces
```
Heading: font-sans font-black tracking-tight
Body: font-sans text-base font-medium
Mono: font-mono
```

### Type scale
```
Hero: text-5xl md:text-7xl font-black tracking-tight leading-[0.95]
H1: text-3xl md:text-5xl font-extrabold tracking-tight
H2: text-xl md:text-2xl font-bold
H3: text-lg font-bold
Body: text-base font-medium
Small: text-sm font-semibold
```

### Spacing
```
Section: py-16 md:py-24
Container: px-6 md:px-8
Card: p-6 md:p-8
Gap sm: gap-3
Gap md: gap-6
Gap lg: gap-8
```

### Color roles
```
Background primary: bg-white
Background secondary: bg-[#f8f0ff]
Background accent: bg-[#ff006e], bg-[#8338ec], bg-[#3a86ff]
Text primary: text-[#1a1a2e]
Text secondary: text-[#1a1a2e]/70
Text muted: text-[#1a1a2e]/50
Button primary: bg-[#ff006e] text-white shadow-[0_8px_30px_rgba(255,0,110,0.4)]
Button secondary: bg-[#8338ec] text-white shadow-[0_8px_30px_rgba(131,56,236,0.35)]
```

---

## [FORBIDDEN]

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

### Banned classes
- `text-gray-500`
- `text-gray-400`
- `text-gray-300`
- `bg-gray-100`
- `bg-gray-50`
- `bg-gray-200`
- `shadow-sm`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `rounded-sm`
- `rounded-md`
- `rounded-none`
- `font-serif`
- `font-mono`
- `font-normal`
- `font-light`
- `font-thin`

### Banned patterns
- matches `^text-gray-\d+$`
- matches `^bg-gray-\d+$`
- matches `^shadow-(sm|md|lg|xl)$`
- matches `^rounded-(none|sm|md)$`
- matches `^font-(serif|mono|normal|light|thin)$`

### Why they are banned
- `text-gray-*`: Dopamine Design never uses gray text — use colored or #1a1a2e
- `bg-gray-*`: Replace gray surfaces with tinted pastels (pink-50, purple-50)
- `shadow-sm`: Use colored shadows only (pink, purple, blue glows)
- `rounded-sm`: Minimum radius is rounded-2xl; buttons must be rounded-full
- `font-serif`: Sans-serif only (Inter preferred)
- `font-normal`: Minimum weight is font-semibold for body, font-black for headings

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

---

## [REQUIRED]

### Every button must include
```
rounded-full
font-bold
shadow-[0_8px_30px_rgba(255,0,110,0.4)]
hover:scale-105
active:scale-95
transition-all duration-300
```

### Every card must include
```
rounded-3xl
```

### Every input must include
```
rounded-2xl
border-2
focus:outline-none
```

---

## [COMPARE] Dopamine Design 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-full font-bold shadow-[0_8px_30px_rgba(255,0,110,0.4)] hover:scale-105 active:scale-95 transition-all duration-300 bg-[#ff006e] text-white shadow-[0_8px_30px_rgba(255,0,110,0.4)]">
 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-3xl p-6 md:p-8">
 <h3 class="font-sans font-black tracking-tight text-lg font-bold">{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-2xl border-2 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Dopamine Design page skeletons

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

### Navigation
```html
<nav class="bg-white text-[#1a1a2e] border-2 border-[#ff006e]/20 px-6 md:px-8">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-6">
 <a href="/" class="font-sans font-black tracking-tight text-lg font-bold">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-6 font-sans text-base font-medium text-sm font-semibold">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#ff006e] text-[#1a1a2e] py-16 md:py-24 px-6 md:px-8">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-sans font-black tracking-tight text-5xl md:text-7xl font-black tracking-tight leading-[0.95]">
 {HEADLINE}
 </h1>
 <p class="font-sans text-base font-medium text-base font-medium max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="rounded-full font-bold shadow-[0_8px_30px_rgba(255,0,110,0.4)] hover:scale-105 active:scale-95 transition-all duration-300 bg-[#ff006e] text-white shadow-[0_8px_30px_rgba(255,0,110,0.4)]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-white text-[#1a1a2e] py-16 md:py-24 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-sans font-black tracking-tight text-xl md:text-2xl font-bold">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- Card template - repeat for each card -->
 <div class="rounded-3xl p-6 md:p-8">
 <h3 class="font-sans font-black tracking-tight text-lg font-bold">{CARD_TITLE}</h3>
 <p class="font-sans text-base font-medium text-base font-medium text-[#1a1a2e]/50">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="rounded-2xl border-2 focus:outline-none" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#f8f0ff] text-[#1a1a2e]/70 py-16 md:py-24 px-6 md:px-8">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div>
 <span class="font-sans font-black tracking-tight text-lg font-bold">{LOGO_TEXT}</span>
 <p class="font-sans text-base font-medium text-sm font-semibold">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-sans font-black tracking-tight text-lg font-bold">{COLUMN_TITLE}</h4>
 <ul class="font-sans text-base font-medium text-sm font-semibold">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Dopamine Design post-generation self check

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

### Token check
- [ ] Button includes: `rounded-full font-bold shadow-[0_8px_30px_rgba(255,0,110,0.4)] hover:scale-105 active:scale-95 transition-all duration-300`
- [ ] Card includes: `rounded-3xl`
- [ ] Input includes: `rounded-2xl border-2 focus:outline-none`

### Forbidden check
- [ ] Not using `text-gray-500`
- [ ] Not using `text-gray-400`
- [ ] Not using `text-gray-300`
- [ ] Not using `bg-gray-100`
- [ ] Not using `bg-gray-50`
- [ ] Not using `bg-gray-200`
- [ ] Not using `shadow-sm`
- [ ] Not using `shadow-md`

### Style rule check
- [ ] Use high-saturation colors: bg-[#ff006e] bg-[#8338ec] bg-[#ffbe0b] bg-[#3a86ff]
- [ ] Maximum border-radius: rounded-full rounded-3xl rounded-2xl
- [ ] Oversized headings: text-5xl md:text-7xl font-black
- [ ] Pill-shaped buttons: rounded-full px-8
- [ ] Colored shadows: shadow-[0_8px_30px_rgba(255,0,110,0.4)]

### Style drift check
- [ ] Does not violate: No large gray areas: text-gray-500 bg-gray-100
- [ ] Does not violate: No desaturated/pastel colors
- [ ] Does not violate: No small border-radius: rounded-sm rounded-md
- [ ] Does not violate: No serious/corporate typography
- [ ] Does not violate: No serif fonts

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

## Absolute Bans (Match and Refuse)

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

- large gray areas: text-gray-500 bg-gray-100
- desaturated/pastel colors
- No small border-radius: rounded-sm rounded-md
- serious/corporate typography
- serif fonts
- black/gray shadows: shadow-lg

## 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
- [ ] no large gray areas: text-gray-500 bg-gray-100
- [ ] no desaturated/pastel colors
- [ ] No no small border-radius: rounded-sm rounded-md
- [ ] no serious/corporate typography
- [ ] no serif fonts