多巴胺设计

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 Global Styles */
@layer base {
  body {
    @apply bg-white text-zinc-900 antialiased;
    font-family: 'Inter', 'SF Pro Display', -apple-system, system-ui, sans-serif;
  }
}

@layer utilities {
  .dopamine-gradient-text {
    background: linear-gradient(135deg, #ff006e, #8338ec, #3a86ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .dopamine-glow-pink {
    box-shadow: 0 8px 30px rgba(255, 0, 110, 0.4);
  }

  .dopamine-glow-purple {
    box-shadow: 0 8px 30px rgba(131, 56, 236, 0.4);
  }

  .dopamine-glow-blue {
    box-shadow: 0 8px 30px rgba(58, 134, 255, 0.4);
  }
}
/* Dopamine Design Design Tokens */
:root {
  --dopamine-design-primary: #ff006e;
  --dopamine-design-secondary: #8338ec;
  --dopamine-design-accent: #ffbe0b;
  --dopamine-design-glow: rgba(255, 0, 110, 0.3);
}

@keyframes dopamine-design-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dopamine-design-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.dopamine-design-card {
  position: relative;
  overflow: hidden;
}

.dopamine-design-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: linear-gradient(135deg, rgba(255, 0, 110, 0.05), transparent);
  pointer-events: none;
}

.dopamine-design-card:hover::before {
  opacity: 1;
}

.dopamine-design-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 0, 110, 0.08);
}

.dopamine-design-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.dopamine-design-animate-in {
  animation: dopamine-design-fade-in 0.5s ease-out both;
}

{
  "border": {
    "width": "border-2",
    "color": "border-[#ff006e]/20",
    "radius": "rounded-3xl",
    "style": "border-solid"
  },
  "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)]",
    "none": "shadow-none",
    "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)]",
    "colored": {
      "pink": "shadow-[0_8px_30px_rgba(255,0,110,0.4)]",
      "purple": "shadow-[0_8px_30px_rgba(131,56,236,0.35)]",
      "blue": "shadow-[0_8px_30px_rgba(58,134,255,0.3)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300",
    "active": "active:scale-95",
    "hoverTranslate": "hover:scale-105 hover:-translate-y-0.5"
  },
  "typography": {
    "heading": "font-sans font-black tracking-tight",
    "body": "font-sans text-base font-medium",
    "mono": "font-mono",
    "sizes": {
      "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",
      "md": "gap-6",
      "lg": "gap-8"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-white",
      "secondary": "bg-[#f8f0ff]",
      "accent": [
        "bg-[#ff006e]",
        "bg-[#8338ec]",
        "bg-[#3a86ff]"
      ]
    },
    "text": {
      "primary": "text-[#1a1a2e]",
      "secondary": "text-[#1a1a2e]/70",
      "muted": "text-[#1a1a2e]/50"
    },
    "button": {
      "primary": "bg-[#ff006e] text-white shadow-[0_8px_30px_rgba(255,0,110,0.4)]",
      "secondary": "bg-[#8338ec] text-white shadow-[0_8px_30px_rgba(131,56,236,0.35)]",
      "danger": "bg-[#fb5607] text-white shadow-[0_8px_30px_rgba(251,86,7,0.35)]"
    }
  },
  "forbidden": {
    "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"
    ],
    "patterns": [
      "^text-gray-\\d+$",
      "^bg-gray-\\d+$",
      "^shadow-(sm|md|lg|xl)$",
      "^rounded-(none|sm|md)$",
      "^font-(serif|mono|normal|light|thin)$"
    ],
    "reasons": {
      "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"
    }
  },
  "required": {
    "button": [
      "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": [
      "rounded-3xl"
    ],
    "input": [
      "rounded-2xl",
      "border-2",
      "focus:outline-none"
    ]
  }
}