HomeStylesTemplates
StyleKit
StylesTemplates
  1. Home
  2. /Styles
  3. /Neon Retro
Style Catalog/霓虹复古

霓虹复古

Neon Retro

D
53/100Poor

80s-90s retro-futuristic aesthetics with pink-purple gradients, neon colors, and glitch art effects. Includes Vaporwave, Synthwave, and Cyberpunk variants.

蒸汽波复古未来霓虹80年代故障艺术赛博合成波赛博朋克vaporwavesynthwavecyberpunk
View Full Showcase →Templates

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.

View Full Showcase →

Color Palette

Primary

#ff71ce

Secondary

#01cdfe

Accent 1

#05ffa1

Accent 2

#b967ff

Accent 3

#fffb96

Accent 4

#47d9ff

PromptsComponent PreviewExportsRatings & Feedback

Prompts

Hard + Soft Prompts

Copy and generate 霓虹复古 style interfaces with one click. Hard prompts enforce strict consistency, while soft prompts allow flexible implementation within the style direction.

Hard Prompt

High consistency, strictly enforces style rules

STYLEKIT_STYLE_REFERENCE
style_name: Neon Retro
style_slug: vaporwave
style_source: /styles/vaporwave

# Hard Prompt

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
# Neon Retro (霓虹复古) Design System

> 80-90年代复古未来主义美学,粉紫渐变、霓虹色彩、故障艺术效果。包含蒸汽波、合成波、赛博朋克三种变体。

## 核心理念

Vaporwave(蒸汽波)是一种源于2010年代初的网络亚文化美学,融合了80-90年代的消费主义符号、日本文化元素和早期互联网美学。

核心理念:
- 怀旧感:对80-90年代商业美学的戏仿和致敬
- 超现实:希腊雕塑、棕榈树、日落等超现实元素组合
- 霓虹色彩:粉色、青色、紫色的渐变组合
- 故障美学:VHS 故障、扫描线、色差效果

设计原则:
- 视觉一致性:所有组件必须遵循统一的视觉语言,从色彩到字体到间距保持谐调
- 层次分明:通过颜色深浅、字号大小、留白空间建立清晰的信息层级
- 交互反馈:每个可交互元素都必须有明确的 hover、active、focus 状态反馈
- 响应式适配:设计必须在移动端、平板、桌面端上保持一致的体验
- 无障碍性:确保色彩对比度符合 WCAG 2.1 AA 标准,所有交互元素可键盘访问

---

## Token 字典(精确 Class 映射)

### 边框
```
宽度: border
颜色: border-[#ff71ce]/50
圆角: rounded-xl
```

### 阴影
```
小:   shadow-[0_0_8px_rgba(255,113,206,0.4)] md:shadow-[0_0_12px_rgba(255,113,206,0.4)]
中:   shadow-[0_0_16px_rgba(255,113,206,0.5)] md:shadow-[0_0_24px_rgba(255,113,206,0.5)]
大:   shadow-[0_0_24px_rgba(255,113,206,0.6)] md:shadow-[0_0_40px_rgba(255,113,206,0.6)]
悬停: hover:shadow-[0_0_32px_rgba(1,205,254,0.7)]
聚焦: focus:shadow-[0_0_20px_rgba(1,205,254,0.6)]
```

### 交互效果
```
悬停位移: undefined
过渡动画: transition-all duration-300 ease-in-out
按下状态: active:scale-95
```

### 字体
```
标题: font-bold tracking-wide
正文: font-sans
```

### 字号
```
Hero:  text-4xl md:text-6xl lg:text-8xl
H1:    text-3xl md:text-5xl
H2:    text-2xl md:text-4xl
H3:    text-xl md:text-2xl
正文:  text-sm md:text-base
小字:  text-xs md:text-sm
```

### 间距
```
Section: py-12 md:py-20 lg:py-28
容器:    px-4 md:px-8 lg:px-12
卡片:    p-5 md:p-8
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**,生成时必须检查并避免:

### 禁止的 Class
- `rounded-none`
- `border-black`
- `border-2`
- `border-4`
- `bg-white`
- `bg-gray-50`
- `bg-gray-100`
- `text-black`
- `text-gray-900`
- `text-gray-800`
- `shadow-[2px_2px_0px`
- `shadow-[4px_4px_0px`
- `shadow-[8px_8px_0px`
- `font-black`

### 禁止的模式
- 匹配 `^rounded-none$`
- 匹配 `^shadow-\[\d+px_\d+px_0px`
- 匹配 `^bg-gray-(?:[1-4])`
- 匹配 `^text-gray-(?:[7-9])`

### 禁止原因
- `rounded-none`: Vaporwave uses soft rounded shapes (rounded-xl or higher)
- `border-black`: Vaporwave uses neon-colored translucent borders, not solid black
- `shadow-[4px_4px_0px_0px`: Vaporwave uses glow shadows (0_0_Xpx_rgba), not hard-edge
- `bg-white`: Vaporwave uses dark backgrounds with neon accents

> WARNING: 如果你的代码中包含以上任何 class,必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
rounded-xl
shadow-[0_0_16px_rgba(255,113,206,0.5)]
hover:shadow-[0_0_32px_rgba(1,205,254,0.7)]
transition-all duration-300 ease-in-out
font-bold
```

### 卡片必须包含
```
rounded-xl
bg-[#1a0a2e]/80
border border-[#ff71ce]/50
shadow-[0_0_16px_rgba(255,113,206,0.5)]
```

### 输入框必须包含
```
rounded-xl
border border-[#b967ff]/50
bg-[#1a0a2e]/60
text-[#01cdfe]
focus:shadow-[0_0_20px_rgba(1,205,254,0.6)]
focus:outline-none
```

---

## [COMPARE] 错误 vs 正确对比

### 按钮

[WRONG] **错误示例**(使用了圆角和模糊阴影):
```html
<button class="rounded-lg shadow-lg bg-blue-500 text-white px-4 py-2 hover:bg-blue-600">
  点击我
</button>
```

[CORRECT] **正确示例**(使用硬边缘、无圆角、位移效果):
```html
<button class="rounded-xl shadow-[0_0_16px_rgba(255,113,206,0.5)] hover:shadow-[0_0_32px_rgba(1,205,254,0.7)] transition-all duration-300 ease-in-out font-bold bg-[#ff006e] text-white px-4 py-2 md:px-6 md:py-3">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**(使用了渐变和圆角):
```html
<div class="rounded-xl shadow-2xl bg-gradient-to-r from-purple-500 to-pink-500 p-6">
  <h3 class="text-xl font-semibold">标题</h3>
</div>
```

[CORRECT] **正确示例**(纯色背景、硬边缘阴影):
```html
<div class="rounded-xl bg-[#1a0a2e]/80 border border-[#ff71ce]/50 shadow-[0_0_16px_rgba(255,113,206,0.5)] p-5 md:p-8">
  <h3 class="font-bold tracking-wide text-xl md:text-2xl">标题</h3>
</div>
```

### 输入框

[WRONG] **错误示例**(灰色边框、圆角):
```html
<input class="rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500" />
```

[CORRECT] **正确示例**(黑色粗边框、聚焦阴影):
```html
<input class="rounded-xl border border-[#b967ff]/50 bg-[#1a0a2e]/60 text-[#01cdfe] focus:shadow-[0_0_20px_rgba(1,205,254,0.6)] focus:outline-none px-3 py-2 md:px-4 md:py-3" placeholder="请输入..." />
```

---

## [TEMPLATES] 页面骨架模板

使用以下模板生成页面,只需替换 `{PLACEHOLDER}` 部分:

### 导航栏骨架
```html
<nav class="bg-white border-b-2 md:border-b-4 border-black px-4 md:px-8 py-3 md:py-4">
  <div class="flex items-center justify-between max-w-6xl mx-auto">
    <a href="/" class="font-black text-xl md:text-2xl tracking-wider">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-4 md:gap-8 font-mono text-sm md:text-base">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="min-h-[60vh] md:min-h-[80vh] flex items-center px-4 md:px-8 py-12 md:py-0 bg-{ACCENT_COLOR} border-b-2 md:border-b-4 border-black">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-black text-4xl md:text-6xl lg:text-8xl leading-tight tracking-tight mb-4 md:mb-6">
      {HEADLINE}
    </h1>
    <p class="font-mono text-base md:text-xl max-w-xl mb-6 md:mb-8">
      {SUBHEADLINE}
    </p>
    <button class="bg-black text-white font-black px-6 py-3 md:px-8 md:py-4 border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all text-sm md:text-base">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="py-12 md:py-24 px-4 md:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-black text-2xl md:text-4xl mb-8 md:mb-12">{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="bg-white border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-4 md:p-6 hover:shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:hover:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:-translate-y-1 transition-all">
        <h3 class="font-black text-lg md:text-xl mb-2">{CARD_TITLE}</h3>
        <p class="font-mono text-sm md:text-base text-gray-700">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 页脚骨架
```html
<footer class="bg-black text-white py-12 md:py-16 px-4 md:px-8 border-t-2 md:border-t-4 border-black">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <span class="font-black text-xl md:text-2xl">{LOGO_TEXT}</span>
        <p class="font-mono text-sm mt-4 text-gray-400">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-black text-lg mb-4">{COLUMN_TITLE}</h4>
        <ul class="space-y-2 font-mono text-sm text-gray-400">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] 生成后自检清单

**在输出代码前,必须逐项验证以下每一条。如有违反,立即修正后再输出:**

### 1. 圆角检查
- [ ] 搜索代码中的 `rounded-`
- [ ] 确认只有 `rounded-none` 或无圆角
- [ ] 如果发现 `rounded-lg`、`rounded-md` 等,替换为 `rounded-none`

### 2. 阴影检查
- [ ] 搜索代码中的 `shadow-`
- [ ] 确认只使用 `shadow-[Xpx_Xpx_0px_0px_rgba(...)]` 格式
- [ ] 如果发现 `shadow-lg`、`shadow-xl` 等,替换为正确格式

### 3. 边框检查
- [ ] 搜索代码中的 `border-`
- [ ] 确认边框颜色是 `border-black`
- [ ] 如果发现 `border-gray-*`、`border-slate-*`,替换为 `border-black`

### 4. 交互检查
- [ ] 所有按钮都有 `hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]`
- [ ] 所有卡片都有 hover 效果(阴影变色或位移)
- [ ] 都包含 `transition-all`

### 5. 响应式检查
- [ ] 边框有 `border-2 md:border-4`
- [ ] 阴影有 `shadow-[4px...] md:shadow-[8px...]`
- [ ] 间距有 `p-4 md:p-6` 或类似的响应式值
- [ ] 字号有 `text-sm md:text-base` 或类似的响应式值

### 6. 字体检查
- [ ] 标题使用 `font-black`
- [ ] 正文使用 `font-mono`

> CRITICAL: **如果任何一项检查不通过,必须修正后重新生成代码。**

---

## [EXAMPLES] 示例 Prompt

### 1. 复古音乐播放器

80年代风格音乐界面

```
用 Vaporwave 风格创建一个音乐播放器界面,要求:
1. 背景:紫粉渐变 + 网格线
2. 专辑封面:带霓虹边框发光
3. 播放控制:霓虹按钮
4. 进度条:渐变色
5. 添加日文装饰文字
```

### 2. SaaS 着陆页

生成 霓虹复古风格的 SaaS 产品着陆页

```
Create a SaaS landing page using Neon Retro style with hero section, feature grid, testimonials, pricing table, and footer.
```

### 3. 作品集展示

生成 霓虹复古风格的作品集页面

```
Create a portfolio showcase page using Neon Retro style with project grid, about section, contact form, and consistent visual language.
```

Soft Prompt

Preserves style direction, allows flexible implementation

STYLEKIT_STYLE_REFERENCE
style_name: Neon Retro
style_slug: vaporwave
style_source: /styles/vaporwave

# Soft Prompt

Maintain the overall style essence. Implementation details can be adjusted flexibly, but do not deviate from the core visual language.

## Style Signals
- 蒸汽波
- 复古未来
- 霓虹
- 80年代
- 故障艺术
- 赛博

## Prefer
- Use pink-purple-cyan gradients bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500
- Add neon glow effects shadow-[0_0_20px_rgba(255,113,206,0.5)]
- Use glitch/scan line effects as decoration
- Incorporate Japanese text or Greek sculpture elements

## Avoid
- Do NOT use monotone gray color schemes
- Do NOT use overly modern minimalist designs
- Do NOT omit neon glow effects

## Output Guidance
- Ensure overall style recognizability first, then refine details.
- Avoid over-engineering; maintain readability and maintainability.

Component Templates

Component Preview

按钮

蒸汽波风格按钮,霓虹发光效果

Global Styles

Global CSS

css
/* 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

IDE Configuration Export

Download configuration files for AI coding assistants to generate code in this style.

Style Pack

Export 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

Design Philosophy

Vaporwave is an internet subculture aesthetic originating from the early 2010s, blending 80s-90s consumerism symbols, Japanese cultural elements, and early internet aesthetics.

Accessibility

Accessibility Score

WCAG 2.1 compliance analysis based on color contrast and typography readability.

53

Overall Score

Grade: D - Poor

Contrast Ratios

Score: 39/100Average Ratio: 4:1
AA FailAAA Fail
ContextColorsRatioAAAAA
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

Recommended Combinations with Neon Retro

These curated recipes combine this style with layouts and animations, optimized for specific use cases.

Vaporwave Aesthetic

90s internet nostalgia for creative projects.

vaporwavecard-stack+3
retrocreativebold

StyleKit

A curated web design style library to help AI generate better-looking websites.

Navigation

StylesTemplatesGuideBlogChangelog

Resources

UI Design PromptsLanding Page PromptsDashboard PromptsTailwind UI PromptsDark Mode UI PromptsGitHub Repository

Stay Updated

By subscribing, you agree to our Privacy Policy and Terms.


Support Maintenance

If StyleKit helps your workflow, voluntary support helps cover servers, domains, and ongoing upkeep.

Scan to support / View all options

(c) 2026 StyleKit. Open source project.

AboutContactPrivacyTermsBuilt with the Editorial style
Stylekit前端样式库stylekit.top陕ICP备2025065501号-3