Vaporwave

Applying a Vaporwave visual direction

You are being asked to apply a Vaporwave 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 “Vaporwave” means here

Vaporwave builds its surface out of discarded digital material. Pale pink and cyan gradients. A window frame borrowed from an operating system nobody supports anymore. A marble bust dropped into the middle of a web page. A checkerboard floor receding into nothing. A heading whose color channels have slipped a few pixels apart. Compositions tend to be symmetrical and oddly still, like a screensaver.

The tone is nostalgic and slightly ironic at the same time — an affection for the commercial digital culture of the 1990s combined with an awareness that it was mostly selling you something. That doubled quality is why the material is always secondhand: obsolete interfaces, stock imagery, classical sculpture pulled out of a museum context.

It is worth distinguishing it from the neon-on-black direction it is often confused with. That one is dark, kinetic, and imagines a future. This one is pale, still, and looks backward at a past that was itself imagining a future. Almost every visual property is opposite.

Recommendations

• Build the ground from pale magenta and cyan. Mid-range saturation and high lightness — washed out rather than vivid, which is what separates this from ordinary neon.
• Include a real image artifact somewhere: channel separation on a heading, visible color banding in a gradient, scanlines, a compression block. The material should look degraded by having been copied too many times.
• Use classical statuary — a bust, a torso, a column. Use a source you are actually entitled to use; museum open-access collections are the straightforward route and many are explicitly licensed for reuse.
• Quote an obsolete interface: a window frame with a title bar, a beveled button, a scrollbar rendered the way one looked thirty years ago. One quoted component is enough to set the register.
• Compose symmetrically. Center the main elements on a vertical axis. The stillness is part of the effect, and asymmetry pulls the composition toward a different style entirely.
• If you use a non-Latin writing system, use real, correct text with a documented translation. The style has a long habit of treating Japanese characters as texture, which produces either nonsense or a language used as ornament. Neither is good work, and correct text costs nothing.
• Keep informational text clean. Glitch and channel offset belong on display type and ornament; a paragraph with separated channels is unreadable.

Avoid

• Vivid, high-saturation neon, which belongs to a darker and more kinetic direction.
• A composition with no artifact anywhere, which reads as pastel decoration rather than as degraded material.
• Non-Latin characters chosen for their shapes, with no meaning or verified translation.
• Asymmetric, dynamic layouts.
• Channel offset or glitch applied to body copy, labels, or form fields.
• Classical imagery pulled from a source whose license you have not checked.

How to check your own work

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

• Are the colors washed out or vivid? Vivid means you have drifted toward a different style.
• Is there anything on the page that looks damaged or degraded? Without it the surface is merely pastel.
• Is the composition symmetrical about a vertical axis? If it is dynamic and angled, the stillness is missing.
• If there is text in another writing system, can you say exactly what it means and where the translation came from? If not, remove it — that is the honest fix, not a smaller version of it.
• Is any body text glitched? Clean it and keep the effect on the display type.

Vaporwave — Specification

Definition

Vaporwave is a web-interface design style assembled from discarded consumer-digital material: pale magenta and cyan gradients, obsolete interface chrome, classical statuary, and visible image artifacts, arranged in still, symmetrical compositions. Its register is nostalgic and faintly ironic, and its material is always secondhand. It is distinguished from neon retro-futurism by being pale, static, and backward-looking rather than dark, kinetic, and speculative.

Core principles

• Secondhand material. Every element looks recovered from somewhere rather than made for this page.
• Degradation is visible. Artifacts show that the material has been copied, compressed, or displayed on failing hardware.
• Stillness over motion. Symmetrical, centered composition produces a screensaver-like calm.
• Washed rather than vivid. Color sits pale and mid-saturation, not at full neon intensity.
• Borrowed material is used correctly. Imagery is licensed and quoted text is real.

Visual characteristics

• Pale magenta and cyan gradient grounds.
• Channel separation, color banding, scanlines, or compression artifacts.
• Classical busts, torsos, or columns.
• Window frames, beveled buttons, and scrollbars quoted from obsolete operating systems.
• Receding checkerboard planes.
• Symmetrical composition about a vertical axis.

Rules

1. Pale magenta and cyan. The palette is washed rather than vivid. Acceptance criterion: The dominant colors measure between 20% and 60% saturation with a relative luminance of 0.5 or greater, centered on magenta and cyan.

2. Visible artifact. The material shows degradation. Acceptance criterion: At least one element carries a rendered chromatic channel offset, visible banding, scanlines, or compression blocking.

3. Classical reference, licensed. Statuary is present and legitimately sourced. Acceptance criterion: At least one classical sculpture, bust, or marble motif is present, and its source and license are recorded.

4. Obsolete interface quotation. A discarded convention is reproduced. Acceptance criterion: At least one component reproduces a 1990s GUI convention — title bar, bevel, or window frame.

5. Non-Latin text is real text. Borrowed writing systems carry meaning. Acceptance criterion: Any non-Latin script rendered on the page is correct text with a documented translation; characters selected for their visual form alone do not satisfy this rule.

6. Symmetrical composition. The layout is still. Acceptance criterion: The primary composition is symmetrical about the vertical center axis.

7. Artifacts stay off information. Degradation does not reach reading text. Acceptance criterion: Informational text carries no channel offset or glitch treatment and measures at least 4.5:1 against its background.

Avoid

• Vivid, high-saturation neon.
• A composition with no visible artifact.
• Non-Latin characters chosen for their shapes rather than their meaning.
• Asymmetric or dynamic layouts.
• Glitch treatment applied to body copy, labels, or form fields.
• Classical imagery whose license has not been verified.

Acceptance criteria

• Rule 1: Dominant colors are 20–60% saturation at 0.5+ luminance in magenta and cyan.
• Rule 2: At least one visible degradation artifact is rendered.
• Rule 3: A classical motif is present with recorded source and license.
• Rule 4: At least one obsolete GUI convention is reproduced.
• Rule 5: All non-Latin text is correct and documented.
• Rule 6: The primary composition is vertically symmetrical.
• Rule 7: Informational text is unglitched and meets 4.5:1.

Blocking failures

• Non-Latin characters appear as decoration with no meaning or verified translation, which publishes either nonsense or another language used as ornament.
• Classical or archival imagery is used without a verified license, since the material this style draws on is frequently under museum or photographer rights despite the age of the original work.
• Glitch or channel offset is applied to reading text, form labels, or control text, making them illegible regardless of measured contrast.

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

Responsive adaptation guidance

• Symmetry (Rule 6) is preserved as the layout stacks: elements remain centered on the vertical axis rather than collapsing to a left-aligned column.
• Artifacts (Rule 2) reduce in quantity but at least one remains at every breakpoint; scaling an artifact down until it is invisible does not satisfy the rule.
• Quoted GUI components (Rule 4) are re-drawn at a workable size rather than shrunk, since a scaled-down title bar loses the detail that makes the quotation legible.
• Rules 3, 5, and 7 are independent of viewport and hold unchanged at every breakpoint.