Y2K

# Y2K (Y2K Aesthetic)

You are building a frontend UI. Apply the **Y2K** visual style consistently to every screen and component. Treat the tokens and rules below as hard constraints, not suggestions.

## Essence

A digital aesthetic from the late 1990s and early 2000s: translucent plastic, liquid chrome, jelly buttons, sparkles and glows, paired with sci-fi typefaces. It carries the era’s excitement and optimism about the internet and the new millennium.

## Design tokens

### Colors

- `background` `#D8E2F2` — page background
- `surface` `#F4F7FC` — cards, panels and raised surfaces
- `text` `#0B1A3A` — primary text
- `muted` `#44506B` — secondary text, captions, placeholders
- `accent` `#1E5BFF` — primary actions, links, key highlights
- `on-accent` `#FFFFFF` — text and icons placed on the accent color
- `border` `#8A98B8` — dividers, outlines, input borders
- `highlight` `#FF3FD1` — secondary emphasis, badges, selection

### Typography

- Display / headings: `Orbitron` (Google Fonts, weights 700 / 900) → fallback `"Eurostile", "Arial Black", sans-serif`
- Body text: `Verdana` (system font, weights 400 / 700) → fallback `Tahoma, Geneva, sans-serif`
- Type scale (px): 11 · 13 · 15 · 18 · 24 · 34 · 52

### Spacing & Shape

- Base unit: 4px · Spacing scale (px): 4 · 8 · 12 · 16 · 24 · 32 · 48
- Corner radius (sm / md / lg): 6 / 14 / 24 px
- Border: 1px solid
- Shadows (sm / md / lg): `0 1px 2px rgba(11, 26, 58, 0.3)` / `0 4px 12px rgba(11, 26, 58, 0.25)` / `0 12px 30px rgba(11, 26, 58, 0.3)`

### Motion

- Durations (fast / base): 120ms / 400ms
- Easing: `cubic-bezier(0.34, 1.56, 0.64, 1)`

### Signature effects

- `--chrome`: `linear-gradient(180deg, #FFFFFF 0%, #C9D3E3 45%, #8C9AB3 50%, #DCE3EE 75%, #FFFFFF 100%)`
- `--sky`: `radial-gradient(ellipse at 15% 0%, #FFFFFF 0, transparent 45%), radial-gradient(circle at 90% 30%, rgba(255, 63, 209, 0.25) 0, transparent 35%), linear-gradient(180deg, #B9CEFF 0%, #E6ECFA 55%, #D8E2F2 100%)`
- `--gloss`: `linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0) 52%)`
- `--glow`: `0 0 14px rgba(30, 91, 255, 0.6)`
- `--pink-glow`: `0 0 16px rgba(255, 63, 209, 0.65)`
- `--cyber-lime`: `#C6FF3D`

## Do

- Imitate chrome with multi-stop linear gradients on headlines, borders and button shells.
- Style primary buttons as jelly pills: gradient fill, highlight on the upper half, matching outer glow.
- Use electric blue #1E5BFF and hot pink #FF3FD1 as primary and accent, over a sky-like pale blue gradient background.
- Set headlines in a wide sci-fi typeface, uppercase with wide tracking; use Verdana for body text.
- Express "the future" with sparkles, orbs and similar decorations.

## Don't

- Do not use flat solid buttons or thin line icons.
- Do not use muted desaturated palettes or plain black and white.
- Do not place small text on chrome gradients.
- Do not use serif typefaces or minimalist whitespace-heavy layouts.

## Components

- **Buttons**: Pill-shaped jelly buttons: an electric blue or hot pink gradient with a highlight on the upper half and a matching outer glow. Secondary buttons have a chrome shell.
- **Cards**: Light translucent panels with chrome outlines and large radii; the title bar carries a gradient like an old software window.
- **Forms**: Rounded inputs with inner shadows and metallic borders that glow blue on focus; checkboxes look like tiny glowing buttons.
- **Navigation**: A chrome pill navigation bar with the current item as a glowing blue "jelly".
- **Layout**: Large centered headlines with floating decorations (stars, orbs); sections look like software windows.
- **Imagery & icons**: 3D-rendered orbs, liquid metal, sparkles and pixel icons; photos can take a blue tint and a glow.

## Accessibility

- Put only large bold text on hot pink and electric blue, and check contrast; keep body copy dark on light.
- Respect prefers-reduced-motion for sparkle and glow animations, and avoid continuous flashing.

_Generated by Style Museum._