Complete AI TrainingYourJobSkills for your job

Skills / design-it

synthwave

Web and App implementation guide for Synthwave. Trigger when user wants 80s-inspired neon, dark backgrounds, outrun grids, and Miami Vice aesthetics.

Design & UX

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

  1. Dark Mode by Default: Absolute pitch-black or deep purple backgrounds.
  2. Neon Glowing Vectors: Bright magenta, cyan, and yellow wireframes, text, and grids. Heavy use of box-shadow and text-shadow for glow effects.
  3. 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-shadow for 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-s

Subscribers only

The full skill, its 1 bundled files and every download is included with every paid Complete AI plan.

Details

Sourceself
License
Risk labelsafe ("critical" means the skill may run commands or touch files — read before use)
FilesSKILL.md
Added2026-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.