Y2K · 1997–2004

Y · 25 / 26

Y — Y2K

Chrome, bubbles and the optimism of 2000.

The style

The future, in translucent plastic.

In 1998 Apple put a computer in a shell of translucent Bondi Blue plastic, and for a few years everything followed: phones, pagers, game controllers and kettles came in see-through candy colours. The turn of the millennium arrived with two moods at once, the fear of the millennium bug and a giddy faith in whatever came next.

The look of that faith was chrome. Music videos and adverts wrapped type in liquid metal and set it against white, blue and lilac voids. On the desktop, MP3 players and instant messengers let people reskin the whole program, swapping one moulded shell for another, and buddy lists carried away messages written with tildes and stars.

The style came back in the 2020s, first in fashion and then on screens. Built today it means bevelled, glossy plastic surfaces, chrome for big type only, gel buttons split at the middle, pastel iridescence, four-point sparkles, and every piece of reading text kept dark on pale so the shine never costs anyone the words.

In use

Orbit, a player and a buddy list.

A made-up MP3 player docked beside its buddy list. Play the playlist, scrub, set the EQ, shuffle. Change the skin to Chrome, Ice or Lilac and both shells change with it. Your profile shows what you are listening to; message a buddy and wait for a reply, or for someone to sign on.

  • Moulded, not drawnEvery surface is a piece of plastic or chrome: a bevel on top, a shadow under, a gloss across. Nothing is a flat box.
  • Skins change the shellChrome, Ice and Lilac recolour the casing, the gel and the screen. The type, the layout and the controls stay where they are.
  • Text sits on pearlChrome and candy colours are for shells, buttons and big type. Anything you read is navy on white, or bright on the dark LCD.
orbitplayer 2.0 · mix_for_summer2000.m3u
Skin
PAUSED192 KBPS44 KHZSTEREOEQ POP
3. Satellite Twins — Chrome Summer (3:28)
1:243:28
Equaliser
Equaliser preset
Playlist8 tracks · 29:22

sun_sk8r_00Online
3 online · 3 away0 chats
The kit

Every part, every state.

The parts Orbit is built from: gel for the first action, bevelled chrome for the second, fields pressed into the plastic, chrome beads on every slider and switch. The rows of states hold still for comparison; everything else works.

01Button

Hard split at 50%: the top half is the glossPill radius, 44px tall, a 3px aqua focus ring

02Text field

Pressed into the shell; focus lights an aqua glow

3 to 16 letters, numbers or underscores.

03Select

A chrome chevron; the open list is a pearl panel

A 4 MB song takes about 12 min.

04Switch, checkbox, radio

The bead glides on a spring: 320ms
Sign on at start-up
Buddy list shows

05Slider

Gel fills the groove up to the bead

06Progress

Candy stripes roll only while it is working
lilac_dream.skin0% · 0 of 184 KB

07Segments and tabs

View
Chrome Summer · Satellite Twins · 3:28

08List rows

09Card and loading

NEW!

Lilac Dream

Skin of the week. Frosted lilac shell, pink gel, a soft violet screen.

A card is a small shell: same bevel, same glossLoading is pearl bars with a shine, never a spinnerThe menu is a pearl panel that springs open

10Toast

Pearl pills that pop in on the spring

11Modal

A navy veil and a chrome panel; Esc cancels

Install new skin?

Lilac Dream (184 KB) replaces the Chrome skin on the player and the buddy list. You can switch back any time.

12Steps

  1. Screen name, done
  2. 2Connect, current
  3. 3Pick a skin
  4. 4Done
Done is gel with a tick; next is pressed in
Step 2 of 4: Connect

13Badges and avatars

NEW!HOTOnlineAwayOffline
Status always has a word, never only a colour
Signature

A blob of liquid chrome.

Drag across the blob to pull its edge toward the pointer, or use the arrow keys. The light swings with the pointer, the sheen’s hue turns on a dial or drifts by itself, and a mouse leaves a trail of stars. Copy the shape as SVG when you like it.

Drag the edge · arrows on the keyboard

HUE220°LIGHT-12°REACH120–120
  • WobbleOff while reduced motion is on
  • Hue driftOff while reduced motion is on
  • Sparkle trailOff while reduced motion is on

Tokens

The system, in numbers.

Thirteen colours with their contrast, the chrome ramp, three typefaces, a spacing scale, moulded radii, three heights of plastic and three speeds. Copy them as custom properties, with the gel button and chrome type.

Colour
  • --mist #f2f4fbMist: the page
  • --pearl #ffffffPanels, fields, list rows
  • --frost #e4e9f4Wells, tracks, off
  • --ink #161b3dDeep navy: text, 15.2:1
  • --ink-2 #4a5072Second text, 7.1:1
  • --aqua #2fb4ffAqua: gel and fills, never text
  • --aqua-ink #0759b8Aqua for text and links, 6.1:1
  • --lilac #c9b8ffLilac plastic
  • --pink #ff8ad8Bubblegum: fills and sparkles
  • --pink-ink #b0177fPink for text, 5.8:1
  • --ice #b7f0ffIce plastic
  • --lime #c8ff3dLime: on the LCD only
  • --error #c4123fError, 5.5:1
Chrome: sky, a hard horizon, ground
  • Sky 0%#ffffff
  • Haze 38%#c3cad8
  • Glint 49%#f5f7fc
  • Horizon 51%#3a4260
  • Ground 70%#8a94ad
  • Bounce 100%#e9edf6
Type
  • Away messageMichroma · display
  • Away messageExo 2, 700 · headings
  • Away messageExo 2, 400 · text
  • Away messageShare Tech Mono · screens
Space, in pixels
  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 72
Radius
  • Tag 6px
  • Field 10px
  • Panel 18px
  • Shell 32px
  • Pill pill
Elevation
  • InsetFields and wells, pressed into the plastic
  • RaisedButtons and rows: a bevel and a soft drop
  • FloatingShells, toasts and the modal
Motion
  • Click90msA gel button pressing in
  • Glide320msKnobs, toggles, skins changing
  • Sparkle700msStars fading off the pointer
:root {
  /* Surfaces and text */
  --mist: #f2f4fb;
  --pearl: #ffffff;
  --frost: #e4e9f4;
  --ink: #161b3d;
  --ink-2: #4a5072;

  /* Candy plastics: fills, never body text */
  --aqua: #2fb4ff;
  --lilac: #c9b8ff;
  --pink: #ff8ad8;
  --ice: #b7f0ff;
  --lime: #c8ff3d;

  /* The same hues, dark enough for text */
  --aqua-ink: #0759b8;
  --pink-ink: #b0177f;
  --error: #c4123f;

  /* Chrome: sky, a hard horizon, ground, bounce light */
  --chrome: linear-gradient(180deg, #fff 0%, #c3cad8 38%, #f5f7fc 49%,
    #3a4260 51%, #8a94ad 70%, #e9edf6 100%);

  /* Elevation */
  --inset: inset 0 2px 4px rgb(22 27 61 / 0.18), inset 0 -1px 0 #fff;
  --raised: inset 0 1px 0 #fff, 0 1px 0 rgb(22 27 61 / 0.12),
    0 4px 10px -4px rgb(22 27 61 / 0.35);
  --floating: inset 0 1px 0 #fff, 0 2px 0 rgb(22 27 61 / 0.08),
    0 22px 40px -18px rgb(22 27 61 / 0.45);

  /* Radii: everything is moulded */
  --radius-tag: 6px;
  --radius-field: 10px;
  --radius-panel: 18px;
  --radius-shell: 32px;

  --click: 90ms ease-out;
  --glide: 320ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: 'Michroma', system-ui, sans-serif;
  --font-text: 'Exo 2', system-ui, sans-serif;
}

/* Gel: a hard split at the middle, a gloss on top, white type */
.gel {
  position: relative;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid #0a4fa0;
  border-radius: 999px;
  background: linear-gradient(180deg, #4aa8f5 0%, #0d6fd6 50%,
    #0457b5 51%, #1c7fe0 100%);
  color: #fff;
  font: 700 15px var(--font-text);
  text-shadow: 0 -1px 0 rgb(0 30 80 / 0.5);
  box-shadow: inset 0 -2px 4px rgb(140 220 255 / 0.6),
    0 4px 10px -4px rgb(4 60 140 / 0.6);
  transition: transform var(--click);
}
.gel::before {
  content: '';
  position: absolute;
  inset: 2px 10px 50%;
  border-radius: 999px 999px 40% 40%;
  background: linear-gradient(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.1));
}
.gel:active {
  transform: translateY(1px) scale(0.98);
}

/* Chrome type: large sizes only */
.chrome-type {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgb(22 27 61 / 0.35));
}

Do

  • Mould every surface: a bevel, a gloss and a shadow, from one light at the top.
  • Chrome is for big type and casings; reading text stays navy on pearl.
  • Candy colours are fills. Use their dark twins whenever they become text.
  • Let a skin change the shell, never the layout or where a control sits.

Don’t

  • Chrome on small text

    The horizon band runs through the middle of each letter. At body size it reads as grey mush, and its contrast changes with every line.

  • Pastel on pastel

    Lilac on ice is 1.4:1. The candy colours sit close together in lightness; type in them needs the dark twin, or the LCD.

  • Every effect at once

    Glitter, a gradient, a bevel, an outline, a drop shadow and a spin on one word. Pick one finish per element and let the rest stay plain.

In the wild

Where the style shows up outside this page.

  1. Wipeout identity

    The Designers Republic · 1995Team logos and menus like future packaging: chrome, katakana, hard sans.

  2. iMac G3

    Apple · 1998Translucent Bondi Blue plastic, so you could see the machine inside.

  3. Winamp 2 skins

    Nullsoft · 1998Players restyled by fans in chrome, gloss and odd shapes.

  4. Nokia 3310

    Nokia · 2000Swappable covers and a tiny backlit screen.