Y2K Revival

---
name: y2k-revival
description: Apply the Y2K Revival visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Y2K Revival, mentions y2k aesthetic, cyber y2k, millennium bug chic, or describes liquid chrome lettering, glossy gel pill buttons, hot pink and cyan clashes — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Y2K Revival Design System

Early-2000s techno-optimism reborn: liquid chrome type, glossy gel pill buttons, star sparkles, and clashing hot pink, cyan, and lime over pale silver. It looks like a burned CD sleeve, a flip-phone charm, and a Winamp skin had a fashion label.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Y2K Revival.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (y2k aesthetic, cyber y2k, millennium bug chic, chrome and gel, gen-z retro tech), or describes its traits: liquid chrome lettering; glossy gel pill buttons; hot pink and cyan clashes; star sparkles and lens flares; XP-style floating windows; iridescent gradient shifts.

## Design tokens

### Color palette

- Pale chrome-silver page background: `#e9e9f2` (--color-bg)
- Floating window and card surfaces: `#f7f7fc` (--color-surface)
- Primary near-black text: `#14141f` (--color-text)
- Secondary text and captions: `#4a4a5e` (--color-text-muted)
- Hot pink — hero fills and large display use: `#ff69b4` (--color-accent)
- Electric cyan for glows and gel highlights: `#00ffff` (--color-accent-cyan)
- Lime green sparkle and status accents: `#39ff14` (--color-accent-lime)
- Violet — the text-safe accent for links and small UI: `#9400d3` (--color-accent-violet)
- Chrome silver for metallic gradients and bevels: `#c0c0c0` (--color-chrome)
- Soft metallic borders on windows and fields: `#9a9ab2` (--color-border)

### Typography

- Display / headings: Orbitron (fallback: Eurostile, Arial, sans-serif) (ideal: Clash Display, premium — use Orbitron as the free substitute)
- Body: Poppins (fallback: Verdana, Arial, sans-serif)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0.02em, uppercase
- Body: line-height 1.55, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 72 — Maximalist — elements crowd and overlap like desktop windows; sparkle decorations fill gaps that minimalism would leave empty.
- Border radius: sm 8px, md 16px, lg 24px, pill 999px — Gel buttons are always pills or 16px+; nothing sharp-cornered except faux OS window chrome.
- Border treatment: 1px solid #9a9ab2 — Metallic 1px edges; hero elements upgrade to a 2px chrome-gradient border (silver to white to silver).

### Shadows

- gel: `inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -6px 10px rgba(0,0,0,0.18), 0 4px 10px rgba(20,20,31,0.25)` — Glossy gel buttons and pills
- window: `0 8px 24px rgba(20,20,31,0.2)` — Floating XP-style windows and cards
- glow-pink: `0 0 16px rgba(255,105,180,0.6)` — Hover glow on primary actions
- glow-cyan: `0 0 12px rgba(0,255,255,0.55)` — Focus rings and active sparkle accents

### Layout

- Max content width: 1200px
- Floating window panels with title bars, slightly overlapping
- Hero centered with the chrome word dominating
- Decorative sparkles and orbs scattered at layout edges
- Custom cursor or pixel-cursor easter eggs welcome

### Effects

- Liquid-chrome gradient text on one hero word (silver → white → silver with dark edge)
- Four-point star sparkle SVGs at varying sizes
- Iridescent hue-shift gradients on hover
- Subtle lens-flare highlight on hero imagery

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 120ms / 250ms / 450ms
- Bouncy overshoot on button hover — gel elements feel squishy
- Sparkles twinkle via opacity keyframes, staggered
- Chrome word gets a slow specular sweep every few seconds
- Respect prefers-reduced-motion by freezing sparkles and sweeps

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e9e9f2;
  --color-surface: #f7f7fc;
  --color-text: #14141f;
  --color-text-muted: #4a4a5e;
  --color-accent: #ff69b4;
  --color-accent-cyan: #00ffff;
  --color-accent-lime: #39ff14;
  --color-accent-violet: #9400d3;
  --color-chrome: #c0c0c0;
  --color-border: #9a9ab2;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-gel: inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -6px 10px rgba(0,0,0,0.18), 0 4px 10px rgba(20,20,31,0.25);
  --shadow-window: 0 8px 24px rgba(20,20,31,0.2);
  --shadow-glow-pink: 0 0 16px rgba(255,105,180,0.6);
  --shadow-glow-cyan: 0 0 12px rgba(0,255,255,0.55);
  --border-default: 1px solid #9a9ab2;
  --font-display: Orbitron, Eurostile, Arial, sans-serif;
  --font-body: Poppins, Verdana, Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.55;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Faux OS title-bar strip: surface bg, 1px metallic border, logo in Orbitron, pill gel links; active link gets the cyan glow
- **Hero:** Giant uppercase Orbitron headline with ONE word in liquid chrome, sparkle cluster top-right, gel pill CTA in hot pink with black text
- **Card:** Floating window: surface bg, metallic border, window shadow, optional title bar strip in chrome gradient, 24px padding
- **Button (primary):** Hot pink gel pill: accent bg, black text, gel shadow, glow-pink on hover, squish scale(0.97) on press
- **Button (secondary):** Chrome gel pill: silver gradient bg, dark text, same gel treatment
- **Form fields:** Surface bg, metallic 1px border, 12px radius; focus swaps border to cyan with glow-cyan ring

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

One hero word rendered in liquid chrome — silver gradient fill, dark edge, white specular highlight — surrounded by four-point star sparkles, floating over a pale silver background with gel-glass buttons below. Spend boldness here; keep everything else quiet.

## Do

- Spend the chrome treatment on exactly one hero word — scarcity sells the effect
- Make every button glossy: inner white highlight up top, dark bloom below
- Clash pink, cyan, and lime deliberately; harmony is off-brand
- Scatter star sparkles as decoration, but keep them off body copy

## Don't

- Don't render body text in chrome or neon — legibility dies instantly
- No flat matte buttons; if it isn't glossy it isn't Y2K
- Don't use muted, desaturated pastels — that drifts into vaporwave territory
- Avoid thin hairline typography; Y2K type is techno and confident

## Accessibility notes

- Hot pink (#ff69b4), cyan, and lime all fail 4.5:1 on the silver background — reserve them for large display type and fills with black text; use accent-violet (#9400d3) for links and small interactive text
- Sparkle twinkle and specular sweep animations must pause under prefers-reduced-motion
- Gel gloss reduces effective text contrast on buttons; always test text against the darkest part of the gradient

## Reference sites

- Y2K Aesthetic Institute: https://y2kaestheticinstitute.tumblr.com
- Aesthetics Wiki — Y2K: https://aesthetics.fandom.com/wiki/Y2K_(aesthetic)
- Cherry Bomb One (bubble face): https://fonts.google.com/specimen/Cherry+Bomb+One

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip y2k-revival.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/y2k-revival.json

Settings → Capabilities → Skills → Upload skill → y2k-revival.zip