332 lines
13 KiB
Markdown
332 lines
13 KiB
Markdown
---
|
||
name: vaporwave
|
||
description: Web and App implementation guide for Vaporwave. Trigger when user wants neon colors, retro digital aesthetics, 90s OS elements, and Roman statues.
|
||
date_added: "2026-06-17"
|
||
risk: safe
|
||
source: self
|
||
source_type: self
|
||
---
|
||
|
||
# Vaporwave
|
||
|
||
> "A surreal, nostalgic dream of 90s computing and pastel neon."
|
||
|
||
|
||
## When to Use
|
||
Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the `design-it` skill and is not meant to be triggered directly.
|
||
|
||
## Core Principles
|
||
1. **Windows 95 / Mac OS 9 Motifs**: UI elements designed to look explicitly like 1990s operating systems (grey boxes, hard bevels, blue title bars).
|
||
2. **Surreal Pastels & Neons**: A mix of soft pinks, cyans, and harsh neon overlays.
|
||
3. **Collage Aesthetic**: Mixing classical art (Roman busts), early 3D renders (checkerboard floors), and Japanese text (Kanji/Katakana).
|
||
|
||
## Visual DNA
|
||
- **Colors**: Cyan (`#00FFFF`), Magenta (`#FF00FF`), Lavender (`#E6E6FA`), and classic Windows Grey (`#C0C0C0`).
|
||
- **Typography**: `MS Sans Serif`, `Tahoma`, or pixel fonts. Fullwidth characters (ＡＥＳＴＨＥＴＩＣ) are highly encouraged for headers.
|
||
- **Styling**: Hard, 1px outsets and insets to simulate 90s 3D buttons.
|
||
|
||
## Web Implementation
|
||
- Use standard CSS borders to create the classic 90s button look.
|
||
- **CSS Example**:
|
||
```css
|
||
body {
|
||
background: linear-gradient(180deg, #ff99cc 0%, #99ccff 100%);
|
||
color: #000;
|
||
font-family: 'Tahoma', sans-serif;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Windows 95 Style Window */
|
||
.vapor-window {
|
||
background-color: #C0C0C0;
|
||
border: 2px outset #fff;
|
||
border-right-color: #808080;
|
||
border-bottom-color: #808080;
|
||
width: 400px;
|
||
padding: 2px;
|
||
}
|
||
|
||
.vapor-titlebar {
|
||
background: linear-gradient(90deg, #000080, #1084d0);
|
||
color: white;
|
||
font-weight: bold;
|
||
padding: 4px 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.vapor-button {
|
||
background-color: #C0C0C0;
|
||
border: 2px outset #fff;
|
||
border-right-color: #808080;
|
||
border-bottom-color: #808080;
|
||
padding: 4px 12px;
|
||
}
|
||
.vapor-button:active {
|
||
border-style: inset;
|
||
}
|
||
|
||
/* The iconic vaporwave sun/grid */
|
||
.vapor-sun {
|
||
width: 200px; height: 200px;
|
||
background: linear-gradient(to bottom, #ff00ff, #ffff00);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 20px #ff00ff;
|
||
}
|
||
```
|
||
|
||
## App Implementation
|
||
|
||
### SwiftUI
|
||
```swift
|
||
struct VaporwaveView: View {
|
||
var body: some View {
|
||
ZStack {
|
||
// Neon Gradient Background
|
||
LinearGradient(colors: [Color(hex: "ff99cc"), Color(hex: "99ccff")], startPoint: .top, endPoint: .bottom)
|
||
.ignoresSafeArea()
|
||
|
||
// Win95 Window
|
||
VStack(spacing: 0) {
|
||
// Title Bar
|
||
HStack {
|
||
Text("ＡＥＳＴＨＥＴＩＣ.exe")
|
||
.font(.system(size: 14, weight: .bold, design: .monospaced))
|
||
.foregroundColor(.white)
|
||
Spacer()
|
||
Text("X")
|
||
.font(.system(size: 12, weight: .bold))
|
||
.padding(.horizontal, 6)
|
||
.background(Color(hex: "C0C0C0"))
|
||
.border(.white, width: 1) // Faux 3D
|
||
}
|
||
.padding(4)
|
||
.background(LinearGradient(colors: [Color(hex: "000080"), Color(hex: "1084d0")], startPoint: .leading, endPoint: .trailing))
|
||
|
||
// Content
|
||
VStack {
|
||
Text("It's all in your head.")
|
||
.font(.custom("Tahoma", size: 16))
|
||
.padding()
|
||
|
||
// Win95 Button
|
||
Button(action: {}) {
|
||
Text("ＯＫ")
|
||
.foregroundColor(.black)
|
||
.padding(.horizontal, 24)
|
||
.padding(.vertical, 8)
|
||
}
|
||
.background(Color(hex: "C0C0C0"))
|
||
// Complex borders to simulate Outset
|
||
.overlay(
|
||
Rectangle().stroke(Color.black, lineWidth: 1) // Outer bottom/right
|
||
)
|
||
.overlay(
|
||
Rectangle().stroke(Color.white, lineWidth: 1).padding(1) // Inner top/left
|
||
)
|
||
}
|
||
.frame(maxWidth: .infinity)
|
||
.padding(16)
|
||
.background(Color(hex: "C0C0C0"))
|
||
}
|
||
.frame(width: 300)
|
||
// Outset border for window
|
||
.border(Color(hex: "808080"), width: 2)
|
||
.padding()
|
||
}
|
||
}
|
||
}
|
||
```
|
||
- You cannot use `.cornerRadius()` anywhere in Vaporwave design.
|
||
- The Win95 3D bevel is achieved by stacking `.border()` and `.overlay(Rectangle().stroke())` with different colors (white for top/left, dark gray for bottom/right).
|
||
|
||
### Flutter
|
||
```dart
|
||
class VaporwaveScreen extends StatelessWidget {
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
body: Container(
|
||
decoration: const BoxDecoration(
|
||
gradient: LinearGradient(begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [Color(0xFFFF99CC), Color(0xFF99CCFF)]),
|
||
),
|
||
child: Center(
|
||
child: Container(
|
||
width: 300,
|
||
decoration: const BoxDecoration(
|
||
color: Color(0xFFC0C0C0),
|
||
// Classic Win95 Outset Border
|
||
border: Border(
|
||
top: BorderSide(color: Colors.white, width: 2),
|
||
left: BorderSide(color: Colors.white, width: 2),
|
||
bottom: BorderSide(color: Color(0xFF808080), width: 2),
|
||
right: BorderSide(color: Color(0xFF808080), width: 2),
|
||
),
|
||
),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
// Title Bar
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
|
||
margin: const EdgeInsets.all(2),
|
||
decoration: const BoxDecoration(gradient: LinearGradient(colors: [Color(0xFF000080), Color(0xFF1084D0)])),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
const Text('ＡＥＳＴＨＥＴＩＣ.exe', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
|
||
Container(color: const Color(0xFFC0C0C0), padding: const EdgeInsets.symmetric(horizontal: 4), child: const Text('X', style: TextStyle(fontWeight: FontWeight.bold))),
|
||
],
|
||
),
|
||
),
|
||
// Content
|
||
Padding(
|
||
padding: const EdgeInsets.all(16.0),
|
||
child: Column(
|
||
children: [
|
||
const Text('nostalgia.sys loaded.', style: TextStyle(fontFamily: 'Tahoma')),
|
||
const SizedBox(height: 16),
|
||
// Outset Button
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
|
||
decoration: const BoxDecoration(
|
||
color: Color(0xFFC0C0C0),
|
||
border: Border(
|
||
top: BorderSide(color: Colors.white, width: 2), left: BorderSide(color: Colors.white, width: 2),
|
||
bottom: BorderSide(color: Color(0xFF808080), width: 2), right: BorderSide(color: Color(0xFF808080), width: 2),
|
||
),
|
||
),
|
||
child: const Text('ＯＫ'),
|
||
)
|
||
],
|
||
),
|
||
)
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
```
|
||
- Flutter's `BoxDecoration` supports complex `Border` definitions where you can set `BorderSide` colors independently. This perfectly recreates CSS `outset` / `inset`.
|
||
|
||
### React Native
|
||
```jsx
|
||
const VaporwaveScreen = () => {
|
||
return (
|
||
<LinearGradient colors={['#ff99cc', '#99ccff']} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||
|
||
{/* Window */}
|
||
<View style={{
|
||
backgroundColor: '#C0C0C0', width: 300,
|
||
borderTopWidth: 2, borderLeftWidth: 2, borderTopColor: '#FFF', borderLeftColor: '#FFF',
|
||
borderBottomWidth: 2, borderRightWidth: 2, borderBottomColor: '#808080', borderRightColor: '#808080',
|
||
padding: 2
|
||
}}>
|
||
|
||
{/* Title Bar */}
|
||
<LinearGradient colors={['#000080', '#1084d0']} start={{x: 0, y: 0}} end={{x: 1, y: 0}} style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 4 }}>
|
||
<Text style={{ color: '#FFF', fontWeight: 'bold' }}>ＡＥＳＴＨＥＴＩＣ.exe</Text>
|
||
<View style={{ backgroundColor: '#C0C0C0', paddingHorizontal: 4 }}><Text style={{ fontWeight: 'bold' }}>X</Text></View>
|
||
</LinearGradient>
|
||
|
||
<View style={{ padding: 16, alignItems: 'center' }}>
|
||
<Text style={{ fontFamily: 'monospace', marginBottom: 16 }}>nostalgia.sys</Text>
|
||
|
||
{/* Outset Button */}
|
||
<TouchableOpacity style={{
|
||
backgroundColor: '#C0C0C0', paddingHorizontal: 24, paddingVertical: 8,
|
||
borderTopWidth: 2, borderLeftWidth: 2, borderTopColor: '#FFF', borderLeftColor: '#FFF',
|
||
borderBottomWidth: 2, borderRightWidth: 2, borderBottomColor: '#808080', borderRightColor: '#808080',
|
||
}}>
|
||
<Text style={{ fontWeight: 'bold' }}>ＯＫ</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
</View>
|
||
|
||
</LinearGradient>
|
||
);
|
||
};
|
||
```
|
||
- Use independent border color styles (`borderTopColor: '#FFF'`, `borderBottomColor: '#808080'`) to build 90s OS chroming.
|
||
- Make sure to use Japanese fullwidth characters for text for maximum vaporwave aesthetic.
|
||
|
||
### Jetpack Compose
|
||
```kotlin
|
||
@Composable
|
||
fun VaporwaveScreen() {
|
||
Box(
|
||
modifier = Modifier
|
||
.fillMaxSize()
|
||
.background(Brush.verticalGradient(listOf(Color(0xFFFF99CC), Color(0xFF99CCFF)))),
|
||
contentAlignment = Alignment.Center
|
||
) {
|
||
// Window
|
||
Column(
|
||
modifier = Modifier
|
||
.width(300.dp)
|
||
// Custom drawn Outset border
|
||
.drawBehind {
|
||
val stroke = 4f
|
||
// Bottom/Right (Dark)
|
||
drawLine(Color(0xFF808080), Offset(0f, size.height), Offset(size.width, size.height), stroke)
|
||
drawLine(Color(0xFF808080), Offset(size.width, 0f), Offset(size.width, size.height), stroke)
|
||
// Top/Left (Light)
|
||
drawLine(Color.White, Offset(0f, 0f), Offset(size.width, 0f), stroke)
|
||
drawLine(Color.White, Offset(0f, 0f), Offset(0f, size.height), stroke)
|
||
}
|
||
.background(Color(0xFFC0C0C0))
|
||
.padding(2.dp)
|
||
) {
|
||
// Title Bar
|
||
Row(
|
||
modifier = Modifier
|
||
.fillMaxWidth()
|
||
.background(Brush.horizontalGradient(listOf(Color(0xFF000080), Color(0xFF1084D0))))
|
||
.padding(4.dp),
|
||
horizontalArrangement = Arrangement.SpaceBetween
|
||
) {
|
||
Text("ＡＥＳＴＨＥＴＩＣ.exe", color = Color.White, fontWeight = FontWeight.Bold)
|
||
Box(modifier = Modifier.background(Color(0xFFC0C0C0)).padding(horizontal = 4.dp)) {
|
||
Text("X", fontWeight = FontWeight.Bold)
|
||
}
|
||
}
|
||
|
||
// Content
|
||
Column(modifier = Modifier.fillMaxWidth().padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally) {
|
||
Text("Welcome to the 90s.", fontFamily = FontFamily.Monospace)
|
||
Spacer(Modifier.height(16.dp))
|
||
|
||
// Win95 Button
|
||
Box(
|
||
modifier = Modifier
|
||
.clickable { }
|
||
.drawBehind {
|
||
val stroke = 4f
|
||
drawLine(Color(0xFF808080), Offset(0f, size.height), Offset(size.width, size.height), stroke)
|
||
drawLine(Color(0xFF808080), Offset(size.width, 0f), Offset(size.width, size.height), stroke)
|
||
drawLine(Color.White, Offset(0f, 0f), Offset(size.width, 0f), stroke)
|
||
drawLine(Color.White, Offset(0f, 0f), Offset(0f, size.height), stroke)
|
||
}
|
||
.padding(horizontal = 24.dp, vertical = 8.dp)
|
||
) {
|
||
Text("ＯＫ", fontWeight = FontWeight.Bold)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
- Compose's `Modifier.border` draws on all sides equally. To achieve the 90s outset look, you must use `Modifier.drawBehind` and manually draw the top/left lines in white and bottom/right lines in dark gray.
|
||
|
||
## Do's and Don'ts
|
||
- **DO**: Use authentic 90s icons (pixelated hourglasses, folders, error dialogs).
|
||
- **DON'T**: Use modern drop shadows or rounded corners. The 90s UI was sharp and jagged.
|
||
|
||
## Limitations
|
||
- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
|
||
- Ensure appropriate contrast ratios and responsive behaviors are verified separately.
|