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

Y2K / Retro-futurism specimen

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.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

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