Style · 18

Y2K

Y2K = chrome gradients, glossy pills, pixel sparkle; the 2001 internet, back.

Chrome gradients, glossy pills, pixel sparkle.

North Search

Shiny again.

Shiny again. Chrome gradients, glossy pills, a pixel star.

Chrome card

Vibe

Chrome

Vertical silver gradient with a top gloss streak.

Gloss

Pill buttons keep a visible highlight on top.

Pop

One bubblegum or holo accent over bright silver.

Showcase

Music drop Y2K

Retro UI Y2K · Game

Glossy card Y2K · Brutalism

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

STYLE
- Y2K: chrome gradients, glossy pills, pixel sparkle, one candy or holo accent over a bright surface
- Background a soft holographic gradient (linear, #E9ECF1 to #FFD9F4 to #CFF7FF); panels are chrome cards with a top gloss streak
- Accent bubblegum #FF5FD2, holo cyan #00E5FF; ink #1C1C1E; chrome #C9CDD4 to #FFFFFF
- Radius 16px on cards, 999px on pills. Every glossy surface keeps a 2px top highlight rgba(255, 255, 255, 0.9); shadow 0 6px 16px rgba(0, 0, 0, 0.18)
- Type: a rounded sans (Inter / SF) for UI, a chunky display for headlines. No grunge, no neon scanlines

LAYOUT
- Container max-width 1120px. Bright holographic wallpaper; every block is a chrome card, never a flat slab
- Top bar is a chrome title bar: wordmark left, two links, Play CTA + min/max/close squares right
- Generous radius everywhere; corners are soft, not sharp

SECTIONS
1. Hero: a big chrome card, headline "Shiny again.", kicker NEW DROP, one dek line, Play CTA plus ghost Listen
2. Three chrome value cards: Glow, Gloss, Pop — kicker, one line, a tiny pixel star each
3. Feature band: two columns, left a chrome cover block with a holo sheen, right a short list of four claims
4. Pricing strip: three chrome columns, the middle one bubblegum-tinted with a brighter gloss
5. Closing CTA band: a wide chrome panel with one bubblegum CTA
6. Three-column chrome footer: Product / Company / Colophon

INTERACTION
- Hover lifts each card 3px and brightens its gloss; accents shift toward holo. Pills press on :active
- Focus is a 2px solid #FF5FD2 outline, never a glow ring
- Pixel stars twinkle subtly on hover only — never a constant disco

MOTION
- Motion is bouncy but short: 160ms ease-out with a 4px overshoot on presses, a slow holo sheen drift
- Use ease-out with a small bounce; keep it playful, not jittery
- Entrance is a 10px rise with gloss fading in, staggered 50ms per card
- prefers-reduced-motion: no bounce, no twinkle, panels appear instantly

TECHNICAL
- React, Tailwind CSS, a .chrome surface utility (vertical gradient + gloss). One homepage route.

DON'Ts
- Do not call this cyberpunk: Y2K is bright silver and candy, cyberpunk is black and neon
- No matte flat fills, no scanlines, no grunge textures, no serif
- No dark title bars, no hard black borders, no monotone gray
- Do not output only a headline plus two empty cells. Do not make every surface fully matte

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Y2K card. Not a page, not a dashboard.

STYLE
- Y2K: a silver chrome surface with a glossy top highlight and a bubblegum or holo accent
- Card fill linear-gradient(180deg, #FFFFFF 0%, #E9ECF1 45%, #C9CDD4 100%); a 2px top gloss streak rgba(255, 255, 255, 0.9)
- Border 1px solid #FFFFFF with a 0 6px 16px rgba(0, 0, 0, 0.18) drop shadow; radius 16px
- Kicker in #FF5FD2, title in #1C1C1E; one tiny pixel-star ✦ accent in #00E5FF

LAYOUT
- One card only: kicker, title, one-line summary, one primary button
- No navbar, no secondary tiles, no image

INTERACTION
- Hover lifts the card 3px and brightens the gloss streak; the accent shifts toward holo. Never a flat fade

CONSTRAINTS
- Gloss is a top highlight, not a full gradient wash; keep the chrome read
- This is not cyberpunk: bright silver and candy color, not black and neon
- No matte flat fills, no serif, no hard black borders

TECHNICAL
- React, Tailwind CSS, a .chrome surface utility (vertical gradient + gloss). One component

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build a Y2K button row only: Play (glossy pill), Save (outline chrome), Skip (ghost). Not a card, not a page.

STYLE
- Radius 999px. Play: linear-gradient(180deg, #FF8FE0, #FF5FD2) with a top gloss highlight, white label
- Save: chrome pill linear-gradient(180deg, #FFF, #C9CDD4), 1px #FFFFFF border, ink label
- Skip: text only in #1C1C1E with a 1px #00E5FF underline

LAYOUT
- One horizontal row, 12px gap. No card chrome, no helper text

INTERACTION
- Hover brightens the gloss and lifts 2px; active presses the pill (scale 0.97). Gloss stays on top

CONSTRAINTS
- Every button keeps a visible top gloss; flat pills lose the Y2K read
- No square corners, no neon text, no matte

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button into glossy pills

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build a Y2K site navbar only, as a Windows-98 style title bar. Not tabs, not a page.

STYLE
- Bar fill linear-gradient(180deg, #FFFFFF, #C9CDD4) with a 1px #FFFFFF top gloss; radius 10px
- Wordmark NORTH in #1C1C1E weight 800; three chrome title squares (min / max / close) on the right, each a small gradient with a 1px rim
- Links Product and Pricing in #1C1C1E; CTA Play: bubblegum pill with gloss

LAYOUT
- Single horizontal chrome: wordmark left, two links, CTA + title squares right. No dropdown

INTERACTION
- Title squares depress on :active (inset shadow). Bar hover brightens the gloss

CONSTRAINTS
- The title-bar squares are the Y2K signature; do not drop them for plain links
- No dark bars, no neon, no flat fills

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation into a chrome title bar

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build a Y2K Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- Tabs are chrome pills with a top gloss; selected tab fill linear-gradient(180deg, #FFF, #C9CDD4) with a 1px #FFFFFF rim and ink label weight 700
- Unselected tabs are text in #1C1C1E at 60% alpha
- Panel: chrome card, 16px radius, top gloss, 0 6px 16px shadow

LAYOUT
- Horizontal pill tablist plus one panel below. No wordmark, no CTA

INTERACTION
- Switching tabs slides a gloss highlight; selected locks brighter. No bounce

CONSTRAINTS
- Panel and selected tab must both read as chrome; no matte panels
- No square tabs, no neon, no hard shadow

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs into chrome pills

What is Y2K?

Y2K is plastic and shiny. Name a vertical chrome gradient, a top gloss highlight, and one bubblegum or holo accent. It is bright where cyberpunk is dark.

Elements

Chrome gradients
Glossy pill buttons
Pixel sparkle

Put this word in the prompt.

Typical colors

#C9CDD4
#FF5FD2
#00E5FF

Use on

Music and media brands
Playful consumer apps
Retro UI drops

Prompt formula

[Component] + Y2K + Chrome gradient + Glossy pill + Pixel sparkle

BUILD - Build a complete Y2K marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs. - Domain from Use on: music and media brands, playful consumer apps, retro UI drops first; enterprise reuses only the chrome, not the sparkle. STYLE - Y2K: chrome gradients, glossy pills, pixel sparkle, one candy or holo accent over a bright surface - Background a soft holographic gradient (linear, #E9ECF1 to #FFD9F4 to #CFF7FF); panels are chrome cards with a top gloss streak - Accent bubblegum #FF5FD2, holo cyan #00E5FF; ink #1C1C1E; chrome #C9CDD4 to #FFFFFF - Radius 16px on cards, 999px on pills. Every glossy surface keeps a 2px top highlight rgba(255, 255, 255, 0.9); shadow 0 6px 16px rgba(0, 0, 0, 0.18) - Type: a rounded sans (Inter / SF) for UI, a chunky display for headlines. No grunge, no neon scanlines LAYOUT - Container max-width 1120px. Bright holographic wallpaper; every block is a chrome card, never a flat slab - Top bar is a chrome title bar: wordmark left, two links, Play CTA + min/max/close squares right - Generous radius everywhere; corners are soft, not sharp SECTIONS 1. Hero: a big chrome card, headline "Shiny again.", kicker NEW DROP, one dek line, Play CTA plus ghost Listen 2. Three chrome value cards: Glow, Gloss, Pop — kicker, one line, a tiny pixel star each 3. Feature band: two columns, left a chrome cover block with a holo sheen, right a short list of four claims 4. Pricing strip: three chrome columns, the middle one bubblegum-tinted with a brighter gloss 5. Closing CTA band: a wide chrome panel with one bubblegum CTA 6. Three-column chrome footer: Product / Company / Colophon INTERACTION - Hover lifts each card 3px and brightens its gloss; accents shift toward holo. Pills press on :active - Focus is a 2px solid #FF5FD2 outline, never a glow ring - Pixel stars twinkle subtly on hover only — never a constant disco MOTION - Motion is bouncy but short: 160ms ease-out with a 4px overshoot on presses, a slow holo sheen drift - Use ease-out with a small bounce; keep it playful, not jittery - Entrance is a 10px rise with gloss fading in, staggered 50ms per card - prefers-reduced-motion: no bounce, no twinkle, panels appear instantly TECHNICAL - React, Tailwind CSS, a .chrome surface utility (vertical gradient + gloss). One homepage route. DON'Ts - Do not call this cyberpunk: Y2K is bright silver and candy, cyberpunk is black and neon - No matte flat fills, no scanlines, no grunge textures, no serif - No dark title bars, no hard black borders, no monotone gray - Do not output only a headline plus two empty cells. Do not make every surface fully matte

Y2K

Shiny again.

Chrome

Gloss

Pop

Y2K

What is Y2K?

Elements

Typical colors

Use on

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns