synthwave
Web and App implementation guide for Synthwave. Trigger when user wants 80s-inspired neon, dark backgrounds, outrun grids, and Miami Vice aesthetics.
Synthwave (Outrun)
"Driving a Ferrari through a neon-lit digital grid at midnight."
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
- Dark Mode by Default: Absolute pitch-black or deep purple backgrounds.
- Neon Glowing Vectors: Bright magenta, cyan, and yellow wireframes, text, and grids. Heavy use of
box-shadowandtext-shadowfor glow effects. - The Perspective Grid: The defining visual is a glowing grid that fades into a vanishing point on the horizon.
Visual DNA
- Colors: Deep space backgrounds (
#0B0C10,#110022). Glowing neon accents: Cyan (#00FFFF), Hot Pink (#FF00FF), Electric Yellow (#FFFF00). - Typography: 80s chrome text, brush script (like a neon sign), and heavy italicized sans-serifs.
- Shadows: Drop shadows are not black; they are the same color as the element, heavily blurred, to create light emission.
Web Implementation
- Rely on
text-shadowfor neon signs and 3D transforms for the floor grid. - CSS Example:
body {
background-color: #090014;
color: #fff;
font-family: 'Montserrat', sans-serif;
overflow-x: hidden;
}
/* Neon Text Glow */
.synth-neon-text {
font-family: 'Mr Dafoe', cursive; /* A classic 80s script */
font-sSubscribers only
The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | self |
|---|---|
| License | — |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md |
| Added | 2026-06-17 |
Related skills
3d-ui
Web and App implementation guide for 3D UI. Trigger when user wants actual 3D objects, perspective effects, and spatial depth.
ai-native-ui
Web and App implementation guide for AI Native UI. Trigger when user wants conversational interfaces, adaptive layouts, and generative AI aesthetics.
aurora-ui
Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric lighting effects.
bento-ui
Web and App implementation guide for Bento UI. Trigger when user wants modular grid cards, Apple-like dashboard style, or sections arranged like a bento box.
brutalism
Web and App implementation guide for Brutalism. Trigger when user wants a raw appearance, intentionally unfinished look, and rejection of standard design conventions.
brutalist-typography
Web and App implementation guide for Brutalist Typography. Trigger when user wants huge fonts, raw presentation, and aggressive layout decisions.
