Ｖ・１９９５・∞

V · 22 / 26

V — Vaporwave

A sunset that never ends, rendered in 1995.

The style

A mall at closing time, forever.

Vaporwave began as music. In 2010 Daniel Lopatin, as Chuck Person, released Eccojams Vol. 1: pop songs slowed down and looped until they sounded like memory. In 2011 Macintosh Plus released Floral Shoppe, and its cover set the look: a Greek bust, a pink grid, Japanese type.

The pictures came from the same place as the sound: the hopeful surfaces of the 1990s. Windows 95, shopping malls, hotel lobbies, palm trees, early 3D, and text set in full-width letters. It is nostalgia for a future that was sold and never arrived, half fond, half joke.

On a screen it means a night that stays at sunset, five neon inks used as light, a striped sun over a pink grid, and grey bevelled windows to read in. Everything moves slowly, and everything that loops can stop.

In use

A desktop from 1995.

A computer that never left the mall. Drag the windows by their title bars, play the radio, open the palette folder and set any colour as the sky, or shut the whole dream down from Start.

  • Windows you can moveDrag a title bar, or focus its grip and use the arrow keys. Close, shrink and bring windows back from the taskbar.
  • Grey for readingEvery window is the same grey face with a two-pixel bevel. Neon stays in the sky, the title bars and the one button that matters.
  • The palette, as filesThe colours live in a folder. Open one to read its hex and contrast, copy it, or set it as the desktop’s sky.
❚❚ PAUSED0:48 / 3:34

♪ Fountain Court — Plaza Dreams

AddressC:\DREAM\PALETTE
7 objectspink.clr selected
14 lines · 53 words
7:45 PM
Shut Down Dream OS
What do you want the computer to do?
The kit

Every part, every state.

The parts that desktop is built from: grey faces with a two-pixel bevel, a gradient title bar, white wells for typing, one neon button. The rows of states hold still for comparison; everything under “Try it” works.

Button

TRY IT

Bevel: 1px white and light grey up, 1px black and dark grey downFocus: a dotted ring inside the faceRadius 0. One neon button per window, for the main thing.

Text field

TRY IT

3 to 12 letters, numbers or _.

Error: a red bevel, plus words and an icon, never colour alone

Select

TRY IT

Behind your windows: Sunset grid.

The list uses the system select, styled only where it sits

Switch, checkbox, radio

TRY IT
Screen saver
Scheme
On is the select violet, plus the mark

Slider

TRY IT
A trackbar: a sunken groove, a raised thumb, ticks below

Progress

TRY ITCopying dream.wav to C:\MALL
0%
Blocks, not a smooth bar: progress in visible steps

Segments and tabs

TRY IT
Sunset grid, 640 × 480, 256 colours.
The open tab rises into its sheet. Arrow keys move along.

List rows

TRY IT
Icons at 16, 20 and 24 on a square grid

Card and loading

Now in the Atrium
Floral
Palm Atrium (slowed)ＤＥＬＵＸＥ ９５ · 4:21 · side B
A card is a small window: title bar, grey face, buttons lastArt sits in a sunken well, never on the bare faceLoading: scanline bars in the shape of what is comingPadding 12; 16 between groups; elevation is only the bevel

Toast

TRY IT
Leaves after 4.5 seconds; × closes it sooner

Modal

TRY IT

Mall Radio

Leave the mall? The music keeps playing without you.
Esc says No. Focus goes back to the button.

Steps

TRY IT
  1. Welcome
  2. Folder
  3. Copy
  4. Finish

Step 1 of 4. This will install Sunset Pad 95 on your computer.

Done steps take a tick and mint, the current one yellow

Badges and avatars

TRY IT
33 unread notes
Tags carry neon on dark type; status is shape and colour together
Signature

Slowed chords, and a sun.

Eight washed-out chords. Hold a pad and the sun swells to it; slow them down, drown them in reverb, or let the progression play. Sound is off until you turn it on, and the pads still light the sun without it.

Press a padThe sun swells to every chord.
ＳＵＮＳＥＴ ＰＡＤ ９５
SoundOff. The pads still light the sun.
Hold a pad, or Enter on a focused pad.
Tokens

The system, in numbers.

A night ground, five neon inks with their contrast, the window greys, two typefaces, four bevels, a spacing scale and five speeds. Copy them as custom properties, with the window, its title, the button and the field.

Colour
  • --night #170b30Ground · ink 16.9:1
  • --ink #fdf0ffText on the night · 16.9:1
  • --ink-2 #cbb8e6Quieter text on the night · 10.2:1
  • --pink #ff71ceSun, neon button · 7.5:1
  • --violet #b967ffSky, title bars · 5.7:1
  • --cyan #01cdfeFocus on the night · 9.9:1
  • --mint #05ffa1On, live · 14.0:1
  • --yellow #fffb96Highlights · 17.3:1
  • --grey #c3c3c7Window faces · win-ink 10.0:1
  • --select #3d1a78Selected rows, white type · white 13.0:1
  • --error #8a0035Errors, on grey · on grey 5.6:1
  • --tip #ffffe1Balloon tips · win-ink 17:1
Type
  • Sunset MallDM Serif Display italic · headings, in chrome
  • C:\DREAM\PALETTESpace Mono 700 · window titles, labels
  • Open late every night.Space Mono 400 · text
  • ＡＥＳＴＨＥＴＩＣFull-width · decoration only
Depth, space and motion
BEVELS, THE ONLY DEPTH
  • RaisedButtons, windows, the taskbar
  • PressedA button held down, a toggle on
  • SunkenFields, lists, wells
  • EtchedGroup boxes, status bars
SPACE, IN PIXELS
  • 2
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 80
MOTION
  • Press0msBevels swap at once, as in 1995
  • Step160ms · steps(3)Switches and progress move in clicks
  • Drift900ms · expo outThings arriving, the sun leaning
  • Floor1.6s · linear, loopsThe grid rolls; one pause stops it
  • Swell1.8s · expo outThe sun, once per chord
tokens.css - Notepad
:root {
  /* A night that stays at sunset */
  --night: #170b30;
  --ink: #fdf0ff;
  --ink-2: #cbb8e6;

  /* Five neon inks: light, never paragraphs */
  --pink: #ff71ce;
  --violet: #b967ff;
  --cyan: #01cdfe;
  --mint: #05ffa1;
  --yellow: #fffb96;

  /* 1995 windows */
  --grey: #c3c3c7;
  --grey-hi: #ffffff;
  --grey-lo: #7b7b84;
  --grey-dk: #0b0912;
  --win-ink: #1c1430;
  --select: #3d1a78;
  --error: #8a0035;

  /* Bevels are the only depth */
  --raised: inset -1px -1px var(--grey-dk), inset 1px 1px var(--grey-hi),
    inset -2px -2px var(--grey-lo), inset 2px 2px #d9d9dd;
  --sunken: inset 1px 1px var(--grey-lo), inset -1px -1px var(--grey-hi),
    inset 2px 2px var(--grey-dk), inset -2px -2px #d9d9dd;

  --sky: linear-gradient(180deg, #12082a, #2a0f55 38%, #6a1f7a 62%, #c2408f 80%, #ff8fb8);
  --title: linear-gradient(90deg, var(--pink), var(--violet) 55%, var(--cyan));
  --font-display: "DM Serif Display", Georgia, serif;
  --font-ui: "Space Mono", ui-monospace, monospace;
}

.window {
  background: var(--grey);
  color: var(--win-ink);
  box-shadow: var(--raised);
  padding: 3px;
}
.window-title {
  background: var(--title);
  color: var(--night);
  font: 700 13px/24px var(--font-ui);
  padding-inline: 6px;
}
.button {
  background: var(--grey);
  box-shadow: var(--raised);
  min-height: 32px;
  padding-inline: 16px;
}
.button:active {
  box-shadow: var(--sunken);
}
.button:active > * {
  transform: translate(1px, 1px);
}
.field {
  background: #fff;
  box-shadow: var(--sunken);
  min-height: 32px;
  padding-inline: 8px;
}

Do

  • Read on grey or on the night. Neon is for light, never for paragraphs.
  • One horizon: the sun sets, the grid runs to it, and nothing else competes.
  • Bevels are the only depth. Two pixels of light, two of shade, no blur.
  • Slow it down. Long fades, steady loops, and every loop can stop.

Don’t

  • Type on the sky

    A paragraph over the gradient and the grid loses half its letters. Put it in a window.

  • Neon on neon

    Pink on cyan looks loud and reads at 1.3:1. Neon goes on the night, and only for a word or two.

  • Every effect at once

    Glow, chromatic split, scanlines and a spin on body text. It is a screen saver, not a page.

In the wild

Where the style shows up outside this page.

  1. Miami Vice

    NBC · 1984–1990The pastels, neon and palms the style later samples.

  2. Windows 95

    Microsoft · 1995Grey bevels and the teal desktop, borrowed whole.

  3. Chuck Person’s Eccojams Vol. 1

    Daniel Lopatin · 2010Slowed, looped pop: the sound before the look.

  4. Floral Shoppe

    Macintosh Plus (Vektroid) · 2011A Roman bust, a checkered floor and Japanese text: the cover that set the look.