Generate Synthwave (Outrun) UI Designs and Code

Synthwave (Outrun) is a design-it sub-style built on three principles: dark mode by default (pitch-black or deep-purple backgrounds), neon glowing vectors (magenta, cyan, and yellow wireframes and text rendered with heavy box-shadow/text-shadow glow), and a perspective grid that recedes toward a vanishing point on the horizon - the defining visual of the aesthetic. It is a child reference of design-it, matched when a request calls for this specific look rather than triggered on its own.

Use this sub-style for retro-futuristic "outrun" interfaces - neon signage typography, a glowing 3D floor grid, and a near-black background with only cyan (#00FFFF), hot pink (#FF00FF), and electric yellow (#FFFF00) as accents. Its own rule is absolute: shadows must never be plain, subtle, or black - every shadow in this style is a neon glow the same color as the element it's attached to, so a design that needs conventional soft-gray drop shadows is the wrong fit.

On web, neon text uses stacked text-shadow layers of increasing blur and radius (0 0 5px #fff, 0 0 20px #FF00FF, 0 0 80px #FF00FF) to simulate light bloom, and the horizon grid is a repeating CSS linear-gradient background transformed with perspective(500px) rotateX(60deg) and faded out via mask-image. Native mobile frameworks diverge sharply here: SwiftUI can stack multiple .shadow(color:radius:) modifiers directly for the glow effect, but the skill notes that SwiftUI has no easy way to draw an infinite 3D floor grid natively - a pre-rendered image asset is recommended instead of building it with SceneKit. React Native and Jetpack Compose share a harder constraint: neither textShadow nor Compose's TextStyle supports more than one shadow per text element, so both require the same workaround - rendering the identical text 3-4 times, absolutely positioned on top of each other, each with a different shadow blur radius, topped by a solid white core layer.

.synth-neon-text {
  text-shadow: 0 0 5px #fff, 0 0 20px #FF00FF, 0 0 40px #FF00FF, 0 0 80px #FF00FF;
}

As a design-it sub-style, it's applied through the parent skill rather than invoked directly, with consistent glow-and-grid treatment expected across web CSS, SwiftUI, Flutter, React Native, and Jetpack Compose - accepting that the perspective grid is best delivered as a pre-rendered image asset on every mobile platform rather than computed live.

Designers and developers building an 80s-retro-futurist "synthwave"/outrun interface who need the neon-glow and horizon-grid look reproduced consistently across web and native platforms, including workarounds for React Native's and Jetpack Compose's single-shadow limitation that would otherwise flatten the signature multi-layer bloom effect.