Retrowave

Applying a Retrowave visual direction

You are being asked to apply a Retrowave visual direction to a web interface. This document gives you framing and recommendations for that direction. It does not tell you what page, product, or feature to build — apply the guidance below to whatever interface you are already working on, at whatever scope that work requires.

What “Retrowave” means here

Retrowave renders a future that never happened: specifically, the future as imagined in the 1980s. A wireframe grid recedes toward a horizon. A banded sun sits in a gradient running from magenta through orange. Neon glows against a nearly black sky. Display type is chromed, extruded, or outlined. Palm trees, wireframe mountains, and speed lines appear as landscape.

It is not nostalgia for the actual 1980s — that would be a different palette and a different set of objects entirely. It is nostalgia for that decade’s science fiction, which is why everything looks synthetic, and why the sun is always setting.

Two constraints matter technically. The direction requires a dark ground: neon is light emitted in darkness, and on a pale background the glow simply disappears. And the glow itself must stay away from anything you actually have to read — a soft colored halo around a headline is the effect working, while the same halo around a paragraph makes every letter blur into the next.

Recommendations

• Build a perspective grid or a set of receding lines somewhere in the composition. It is the single most recognizable element of the direction, and without it the rest reads as generic neon.
• Run a sunset gradient through magenta or violet into orange or cyan. Broad, smooth, and unmistakable — this gradient is the light source for the whole scene.
• Produce glow with a colored shadow at zero offset and a generous blur, so the light radiates evenly rather than falling to one side. An offset shadow reads as a drop shadow, which is the wrong effect entirely.
• Keep the background near black. A dark navy or deep purple works; anything approaching mid-grey kills the neon.
• Set headlines in a period display face — chrome-filled, extruded, or outlined — sized large enough for the treatment to be legible.
• Include at least one landscape motif: a banded sun, palms, wireframe mountains, or speed lines. One is enough; four is a poster rather than an interface.
• Keep glow off body copy. Reading text sits plain on the dark background at full contrast, and the light effects stay on headlines and ornament.

Avoid

• A light background, on which the entire direction stops functioning.
• Offset shadows standing in for glow.
• Glow applied to paragraphs, labels, or form fields.
• A palette of neon colors with no gradient anywhere, which loses the sunset that motivates the light.
• Every element treated with a glow, which leaves nothing dark to glow against.
• Grid, sun, palms, mountains, and speed lines all at once.

How to check your own work

Before considering the result finished, look at it and ask:

• Is the background dark enough? If you can imagine reading a document on it comfortably, it is too light for neon.
• Does the glow have any offset? Set it to zero — glow radiates in all directions, shadows do not.
• Is there anything receding into the distance? Without a grid or perspective lines this is a neon interface rather than this direction.
• Is any body text glowing? Remove it and check that the plain version passes contrast on the dark background.
• How many landscape motifs are on screen? More than two and the interface is competing with its own background.

Retrowave — Specification

Definition

Retrowave is a web-interface design style that renders the future as imagined in the 1980s. A perspective grid recedes toward a horizon, a sunset gradient runs through magenta and orange, neon glow radiates against a near-black ground, and display typography is chromed, extruded, or outlined. The style depends structurally on darkness, since neon is emitted light, and it confines its glow to headlines and ornament so that reading text remains legible.

Core principles

• A synthetic landscape. The composition depicts a place — grid, horizon, sun — rather than arranging abstract shapes.
• Emitted light, not cast shadow. Glow radiates evenly from the element; nothing falls to one side.
• Darkness is structural. The direction ceases to function on a pale background.
• The sunset is the light source. A broad magenta-to-orange gradient motivates every other bright value.
• Effects stay off reading text. Glow belongs to display type and ornament only.

Visual characteristics

• A wireframe perspective grid or receding line set.
• A broad gradient from magenta or violet into orange or cyan.
• Colored glow at zero offset with generous blur.
• A near-black background, sometimes tinted navy or deep purple.
• Chrome-filled, extruded, or outlined display typography.
• Period landscape motifs: banded sun, palms, wireframe mountains, speed lines.

Rules

1. Perspective grid present. The scene recedes. Acceptance criterion: A perspective grid or a set of converging vanishing lines is rendered as a compositional element.

2. Sunset gradient. The light source is depicted. Acceptance criterion: At least one primary gradient runs from magenta or violet into orange or cyan.

3. Glow, not shadow. Light radiates rather than falls. Acceptance criterion: Highlighted elements use a text-shadow or box-shadow in a saturated color with a blur radius of 8px or greater and an offset of 0 on both axes.

4. Period display type. Headlines carry the era. Acceptance criterion: Headline elements use a display family with a chrome fill, outline, or extrusion treatment.

5. Dark ground required. Neon has something to glow against. Acceptance criterion: The page background has a relative luminance of 0.1 or less.

6. Landscape motif present. The scene is identifiable. Acceptance criterion: At least one of a banded sun, palm forms, wireframe mountains, or speed lines is rendered.

7. Reading text stays plain. Effects do not reach body copy. Acceptance criterion: Body text carries no colored shadow and measures at least 4.5:1 against the dark background.

Avoid

• A light background, on which the direction stops functioning entirely.
• Offset shadows substituted for glow.
• Glow applied to paragraphs, labels, or form fields.
• Neon colors used with no gradient present, losing the sunset that motivates them.
• Glow applied to every element, leaving nothing dark for it to register against.
• All available landscape motifs used simultaneously.

Acceptance criteria

• Rule 1: A perspective grid or converging line set is present.
• Rule 2: A magenta-or-violet to orange-or-cyan gradient is present.
• Rule 3: Glow uses zero offset with a blur of 8px or more.
• Rule 4: Headlines use a treated period display family.
• Rule 5: The background luminance is 0.1 or less.
• Rule 6: At least one period landscape motif is rendered.
• Rule 7: Body text is unglowed and meets 4.5:1 on the dark ground.

Blocking failures

• Body copy carries a colored glow, which blurs adjacent glyphs into one another and makes sustained reading impossible regardless of the measured contrast ratio.
• The background is light, so no glow registers and the direction has been applied as a set of colors rather than as a lighting model.
• A form field or control is rendered with glow as its only boundary, making its edges indeterminate and its focus state indistinguishable from its resting state.

These conditions make the work unacceptable to ship; they are not stylistic suggestions and are not subject to designer discretion.

Responsive adaptation guidance

• The perspective grid (Rule 1) is re-drawn for the narrower aspect rather than scaled, since a horizontally compressed grid loses its convergence and stops reading as depth.
• Landscape motifs (Rule 6) reduce to one at narrow viewports; at least one remains at every breakpoint.
• Glow blur (Rule 3) may reduce for performance but never below 8px, and the offset stays at 0 at every breakpoint.
• The dark ground (Rule 5) and the plain-body-text requirement (Rule 7) hold unchanged, and Rule 7 is re-verified whenever reflow moves body text over the gradient rather than the flat background.
• Display type (Rule 4) may reduce in size but keeps its treatment; substituting a plain face at narrow widths ends the style.