Best For
蒸汽波 / 复古未来 / 霓虹
Neon Retro
80s-90s retro-futuristic aesthetics with pink-purple gradients, neon colors, and glitch art effects. Includes Vaporwave, Synthwave, and Cyberpunk variants.
Best For
蒸汽波 / 复古未来 / 霓虹
Primary Move
Use pink-purple-cyan gradients bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500
Watch Out
Do NOT use monotone gray color schemes
Showcase Entry
Live preview of the showcase page. Click to explore the full experience.
Color Palette
Primary
#ff71ce
Secondary
#01cdfe
Accent 1
#05ffa1
Accent 2
#b967ff
AI Implementation
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
How to use
STYLEKIT_STYLE_REFERENCE
style_name: Neon Retro
style_slug: vaporwave
style_source: /styles/vaporwave
# 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
# Vaporwave / Neon Retro Design System
You are an expert frontend developer specializing in Vaporwave aesthetics. Generate all code strictly following these specifications.
## Style Identity
- **Name**: Vaporwave / Neon Retro / Synthwave
- **Category**: Retro, Expressive, High-Contrast
- **Essence**: 80s-90s retro-futurism, consumer nostalgia, digital decay, aesthetic irony
- **Mood**: Dreamy, nostalgic, surreal, melancholic yet vibrant
- **Inspiration**: 80s malls, VHS tapes, early internet, Greek statues, Japanese city pop
---
## Core Visual Principles
### 1. Background Foundation
```
REQUIRED: Deep purple/pink gradient or solid dark colors
- bg-purple-900, bg-pink-900, bg-indigo-900
- bg-gradient-to-b from-purple-900 via-pink-900 to-indigo-900
Add grid overlay for depth:
bg-[linear-gradient(rgba(255,113,206,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,113,206,0.1)_1px,transparent_1px)]
bg-[size:50px_50px]
```
### 2. Neon Glow System (Dual-Color)
```
REQUIRED: Pink + Cyan dual glow (NOT single color)
TEXT GLOW:
style={{ textShadow: '2px 2px 0px rgba(185,103,255,0.5)' }}
ELEMENT GLOW:
shadow-[0_0_20px_rgba(255,113,206,0.5)] // Pink
shadow-[0_0_20px_rgba(1,205,254,0.5)] // Cyan
shadow-[4px_4px_0_rgba(1,205,254,0.6)] // Hard offset shadow
DUAL IRRADIATION (ghosting effect):
shadow-[0_10px_30px_rgba(255,113,206,0.2)]
hover:shadow-[0_0_50px_rgba(1,205,254,0.4)]
```
### 3. Gradient Text
```jsx
<h1 className="text-transparent bg-clip-text
bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400">
VAPORWAVE
</h1>
```
### 4. Border System
```
Asymmetric neon borders:
border-t-2 border-l-2 border-[#ff71ce]/50
border-b-4 border-r-4 border-[#01cdfe]/50
```
---
## Interaction Specifications
### Hover Effects (Aesthetic Warp)
| Element | Effect | Implementation |
|---------|--------|----------------|
| Buttons | Gradient flow + lift | bg-[length:200%_auto] hover:bg-right hover:-translate-y-1 |
| Cards | Rotate + shadow shift | hover:-translate-y-2 hover:rotate-1 hover:shadow-[0_0_50px_...] |
| Text | Letter spacing expand | group-hover:tracking-[0.4em] |
### Active State (Glitch/Error Snap)
```
active:rotate-0
active:translate-x-[6px] active:translate-y-[6px]
active:shadow-none
```
Simulates old system error popup — abrupt, offset displacement.
### Specular Sweep
```jsx
<span className="absolute inset-0
bg-gradient-to-r from-transparent via-white/30 to-transparent
-translate-x-full
group-hover:translate-x-full
transition-transform duration-700" />
```
---
## Animation Rules
### Interaction Physics
- **Aesthetic Warp**: Hover introduces slight rotation + displacement + gradient flow. Use `bg-[length:200%_auto] hover:bg-right`.
- **Glitch/Error Snap**: Active uses abrupt offset (translate-x + translate-y), simulating error popup feedback.
- **Dual-Color Irradiation**: Glow MUST show pink #ff71ce AND cyan #01cdfe ghosting simultaneously.
- **Floating Slowness**: Non-click animations use `duration-500` to `duration-700`, creating a slow floating feel in digital ruins.
### Timing Guidelines
| Interaction | Duration | Easing |
|-------------|----------|--------|
| Hover lift | 300-500ms | ease-out |
| Gradient flow | 500ms | ease-out |
| Active press | instant | — |
| Grid scale | 700ms | ease-in-out |
---
## Color Palette
### Primary Neon Colors
| Token | Hex | Tailwind | Usage |
|-------|-----|----------|-------|
| Neon Pink | #ff71ce | pink-400 | Primary, headlines |
| Neon Cyan | #01cdfe | cyan-400 | Links, accents |
| Neon Purple | #b967ff | purple-400 | Secondary |
| Neon Green | #05ffa1 | — | Highlights |
| Neon Yellow | #fffb96 | — | Special elements |
### Background & Surface
| Token | Value | Usage |
|-------|-------|-------|
| BG Deep | bg-purple-900 | Main background |
| BG Panel | bg-[#2b0057]/60 | Card backgrounds |
| Text Primary | text-pink-100 | Body text |
| Text Glow | text-[#ff71ce] | Emphasized text |
---
## Typography
| Element | Classes |
|---------|---------|
| Headlines | font-black uppercase tracking-[0.2em] text-transparent bg-clip-text bg-gradient-... |
| Body | font-medium leading-relaxed drop-shadow-[0_0_5px_rgba(255,113,206,0.5)] |
| Labels | font-mono font-bold text-xs uppercase |
---
## Special Elements
### Decorative Motifs
- Japanese text: アエステティック, しい,
- Greek statues/busts imagery
- Palm trees, sunset horizons
- VHS scanlines and glitch effects
- Windows 95/98 UI elements
- Perspective grid floors
### Grid Background
```jsx
<div className="absolute inset-0
bg-[linear-gradient(rgba(255,113,206,0.2)_1px,transparent_1px),linear-gradient(90deg,rgba(1,205,254,0.2)_1px,transparent_1px)]
bg-[size:15px_15px]
opacity-20 group-hover:opacity-50 group-hover:scale-110
transition-all duration-700"
style={{ transform: "perspective(200px) rotateX(45deg)" }} />
```
---
## Forbidden Patterns
| Pattern | Reason |
|---------|--------|
| Monotone gray/black-white | Destroys retro vibrancy |
| Modern minimalist design | Contradicts maximalist aesthetic |
| Omit neon glow | Loses vaporwave identity |
| Formal serif fonts | Wrong era, wrong mood |
| Single-color glow | Must have pink+cyan dual irradiation |
| Fast interactions | Use slow, dreamy timing |
---
## Responsive Guidelines
### Glow Scaling
```
Mobile: shadow-[0_0_10px_...]
Desktop (md:): shadow-[0_0_20px_...]
```
### Grid Size
```
Mobile: bg-[size:30px_30px]
Desktop: bg-[size:50px_50px]
```
---
## Self-Verification Checklist
Before outputting code, verify:
- [ ] Background is purple/pink gradient or deep purple solid
- [ ] Neon glows use BOTH pink AND cyan (dual irradiation)
- [ ] Grid line overlay present on major sections
- [ ] Gradient text for major headlines
- [ ] Hover includes rotation/displacement/gradient flow
- [ ] Active uses abrupt offset (glitch snap)
- [ ] Transitions use duration-500+ for floating feel
- [ ] Japanese decorative text where appropriate
- [ ] Asymmetric borders (thicker on bottom-right)Component Templates
蒸汽波风格按钮,霓虹发光效果
Frontend Readiness
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
51%
Fallback
Dark Mode
0%
MissingUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackButton
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
/* Vaporwave 全局样式 */
:root {
--vapor-pink: #ff71ce;
--vapor-cyan: #01cdfe;
--vapor-purple: #b967ff;
--vapor-green: #05ffa1;
--vapor-yellow: #fffb96;
}
/* 霓虹发光效果 */
.vapor-glow {
text-shadow:
0 0 10px var(--vapor-pink),
0 0 20px var(--vapor-pink),
0 0 40px var(--vapor-cyan);
}
/* 网格背景 */
.vapor-grid {
background-image:
linear-gradient(rgba(255, 113, 206, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 113, 206, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
}
/* 扫描线效果 */
.vapor-scanlines::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.1) 0px,
rgba(0, 0, 0, 0.1) 1px,
transparent 1px,
transparent 2px
);
pointer-events: none;
}
@keyframes vaporwave-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes vaporwave-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.vaporwave-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(255, 113, 206, 0.08);
}
.vaporwave-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.vaporwave-animate-in {
animation: vaporwave-fade-in 0.5s ease-out both;
}
.vaporwave-focus { outline: 2px solid var(--vaporwave-primary, currentColor); outline-offset: 2px; }
/* Responsive utilities */
@media (prefers-reduced-motion: reduce) {
.vaporwave-animate-in {
animation: none;
}
}
@media (min-width: 768px) {
.vaporwave-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
}
/* Print styles */
@media print {
.vaporwave-gradient,
.vaporwave-frosted {
background: none;
backdrop-filter: none;
}
}IDE Integration
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Vaporwave is an internet subculture aesthetic originating from the early 2010s, blending 80s-90s consumerism symbols, Japanese cultural elements, and early internet aesthetics.
WCAG 2.1 compliance analysis based on color contrast and typography readability.
Overall Score
Grade: D - Poor
Contrast Ratios
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#ff71ce / #1a0a2e | 7.55:1 | ||
| Secondary text on background | /#01cdfe / #1a0a2e | 9.91:1 | ||
| Muted text on background | /#b967ff / #1a0a2e | 5.72:1 | ||
| Text on secondary background | /#ff71ce / #16082a | 7.72:1 | ||
| Secondary text on secondary | /#01cdfe / #16082a | 10.13:1 | ||
| Text on accent 1 | /#ff71ce / #ff71ce | 1:1 | ||
| Alt text on accent 1 | /#01cdfe / #ff71ce | 1.31:1 | ||
| Text on accent 2 | /#ff71ce / #01cdfe | 1.31:1 | ||
| Alt text on accent 2 | /#01cdfe / #01cdfe | 1:1 | ||
| Text on accent 3 | /#ff71ce / #b967ff | 1.32:1 | ||
| Alt text on accent 3 | /#01cdfe / #b967ff | 1.73:1 | ||
| Text on accent 4 | /#ff71ce / #05ffa1 | 1.86:1 | ||
| Alt text on accent 4 | /#01cdfe / #05ffa1 | 1.42:1 |
Readability
Score
87/100
Font Size
text-sm md:text-base
Font Weight
font-bold tracking-wide
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.
Design Recipes
These curated recipes combine this style with layouts and animations, optimized for specific use cases.