Get started
All interface styles

Y2K / Retro-futurism

Late-nineties optimism rendered in generic geometry: chrome-like gradients, glossy pills, starbursts and a confident techno-futurist tone.

Also called: y2k, cyber, chrome UI, frutiger aero, millennium

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Y2K / Retro-futurism changes

Surface material, borders, shape, depth, component layout, states, and motion.

Y2K / Retro-futurism specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Y2K / Retro-futurism applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: Every shape here is CSS geometry — gradients, radii and conic sweeps — not artwork, and no logo, product or brand chrome from the era is reproduced. The gloss sits behind the label so contrast is measured against the gradient itself.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Y2K / Retro-futurism to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

What you see

The perceptual fingerprint, in the order you notice it.

  • Metallic gradients running through elements rather than flat fills
  • Glossy highlights across the top half of buttons and pills
  • Starburst, ellipse and lens-flare shapes built from CSS primitives
  • Saturated blues, silvers and acid accents against dark or bright fields
  • Chunky, wide, slightly stretched display type

Best for

  • Culture, music, fashion and community products aimed at a young audience
  • Campaign microsites where the period reference is the concept
  • Brands that can carry a joke and still be legible

Avoid when

  • The audience needs to trust you with money or data
  • Content is long-form; the gloss fights sustained reading
  • You cannot commit fully — half-hearted Y2K reads as dated, not referential

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Gradient fills mean text contrast varies across the element. Verify at the lightest and darkest stop under the label.
  • Gloss overlays sit above the label in the paint order if implemented carelessly; keep highlights behind content or at very low alpha.
  • Saturated acid accents on saturated fields cause chromatic vibration; separate them with a neutral edge rather than butting them together.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Turn-of-millennium chrome, neon, gloss and blur — frutiger-aero, cyber, vaporwave-adjacent retro-future.

Implementation bundle

Pro

What an agent needs in order to actually build Y2K / Retro-futurism on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • chrome-gradient
  • gloss-highlight
  • starburst-geometry
  • acid-accent
  • retro-future