Synthwave (Outrun)

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-size: 4rem;
  color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #FF00FF,
    0 0 40px #FF00FF,
    0 0 80px #FF00FF;