# Y2K Aesthetic > Millennium pop: bubblegum pink, liquid chrome, holographic foil, twinkling star sparkles and glossy candy pills. - Nickname: Bubblegum chrome - Also called: Y2K, Millennium Pop, Cyber Y2K, Bubblegum Futurism - Category: Retro & Nostalgia - Moods: Playful, Nostalgic, Dreamy, Bold - Industries: E‑commerce, Creative & Portfolio, Media & Entertainment, Kids & Family, Startup & Tech - Style page: https://uilingo.dev/styles/y2k-aesthetic/ Y2K Aesthetic channels the turn of the millennium — flip phones, translucent gadgets, pop-star websites and holographic stickers. Surfaces are white with polished chrome edges; highlights are iridescent foil that shifts pink → lilac → aqua → butter. Buttons are glossy pills with a hard white shine across the top half. Headlines are fat, rounded “bubble” letters in hot pink with a white sticker outline, sprinkled with four-point star sparkles. It is loud, cute and shiny, but stays clean and light. ## Best for - Fashion, beauty and accessories shops - Gen-Z product drops and merch stores - Pop music, fandom and creator pages - Playful consumer apps and campaigns ## Avoid for - B2B SaaS and enterprise tools - Finance, legal and healthcare - Serious editorial or long reading - Minimal premium or luxury brands ## Do - Use hot pink #E0157F + chrome silver as the core pair; iridescent foil only for 1–2 hero surfaces per view - Give every pill a white gloss band on the top half - Scatter 4-point sparkles (✦) at 2–3 sizes around headlines and cards, not everywhere - Keep body text plum on white for contrast ## Don't - Don’t use aqua-and-grass-green nature scenes — that is Frutiger Aero - Don’t add faces, mascots or pastel-only palettes — that is Kawaii - Don’t use flat matte buttons or sharp corners - Don’t put chrome gradients on small text ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Y2K Aesthetic" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Millennium pop: bubblegum pink, liquid chrome, holographic foil, twinkling star sparkles and glossy candy pills. Design keywords: bubblegum pink, liquid chrome, holographic foil, four-point star sparkles, glossy pill buttons, bubble letters, iridescent gradient, millennium pop. ## Visual language Turn-of-the-millennium pop: a pale bubblegum canvas washed with soft holographic haze (pink, lilac, aqua, butter) and sprinkled with four-point star sparkles. Components are bright white with polished chrome rims, like translucent gadgets and lip-gloss packaging; the special surfaces are iridescent foil stickers. Buttons are candy-glossy pills with a hard white shine over the top half, and headlines are fat, rounded hot-pink bubble letters with a white sticker outline and a soft pink under-shadow. Loud, cute and shiny, but airy and light rather than cluttered. ## Signature details (must be visible) - Canvas #FFF0F8 with four large blurred radial washes (pink #FF8CCD top-left, aqua #B9F1FF top-right, lilac #DCC8FF bottom-right, butter #FFF6C4 bottom-left) and a tiled SVG layer of 4-point stars in #FF3FA0 / #7B5CFF at 30–55% opacity - 4-point sparkle shape: path 'M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z', used at 14–46px beside headlines, on eyebrows, list markers, FAQ toggles and foil cards - Chrome rim: 2px transparent border with background linear-gradient(surface) padding-box + linear-gradient(180deg, #FFF, #E6E8F1 22%, #A9AEC2 48%, #F7F8FC 52%, #C9CDDB 78%, #8E93AA) border-box on every card, input, list, nav and tab bar - Holographic foil: linear-gradient(115deg, #FFC2E6, #DCC8FF 22%, #B9F1FF 44%, #FFF6C4 64%, #FFC9EC 82%, #CBB8FF) plus a white radial highlight, reserved for the highlight card, featured card, pull quote, CTA and image placeholders - Glossy pill: radius 999px, background = gloss layer linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.25) 46%, transparent 50%) over linear-gradient(180deg, #FF7CC0, #FF3FA0 50%, #E0157F), inset 0 -3px 6px rgba(120,0,60,.28), 0 6px 16px rgba(224,21,127,.35) - Bubble headline: Unbounded 700 filled with linear-gradient(180deg, #FF9BD0, #FF3FA0 45%, #E0157F 70%, #B5106A) clipped to text (100% × 1lh), white 2px outline built from four drop-shadows, then drop-shadow(0 5px 0 #F5A9D3) - Springy motion: cubic-bezier(.34,1.56,.64,1) at 200ms; buttons lift 2px and scale 1.03 on hover, squash to .96 on press; cards tilt -0.4deg on hover - Type: Unbounded for headings, Quicksand 500 for body; Thai in Mitr (headings) and Kodchasan (body) ## Design tokens — use these exact values Colours (light mode): - background #FFF0F8 - surface #FFFFFF - surface-2 #FFE3F2 - text #2A0F3D - text-muted #74457F - primary #E0157F (text on it #FFFFFF) - secondary #DCDFEA (text on it #2A0F3D) - accent #7B5CFF - border #E8B3D6 - success #14915A · warning #C77A00 · danger #D3204B - chart series #FF2E97, #7B5CFF, #22B8E6, #9BD62E, #FFB13D Radius: sm 10px, md 16px, lg 24px, xl 32px, pill 999px Border width: 2px Shadows: sm `0 3px 10px rgba(224,21,127,0.14)`, md `0 10px 26px rgba(224,21,127,0.18), 0 2px 0 rgba(255,255,255,0.9)`, lg `0 22px 50px rgba(123,92,255,0.22), 0 6px 16px rgba(224,21,127,0.2)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 200ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Unbounded 600/700 with Thai fallback Mitr 500/600/700 - Body: Quicksand 500/600/700 with Thai fallback Kodchasan 500/600/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700&family=Quicksand:wght@500;600;700&family=Mitr:wght@500;600;700&family=Kodchasan:wght@500;600;700&display=swap - CSS stacks: heading `"Unbounded", "Mitr", system-ui, sans-serif`; body `"Quicksand", "Kodchasan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.4rem, 5.6vw, 4.6rem), heading weight 700, heading tracking -0.02em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Mitr’s chunky rounded geometry matches Unbounded’s fat, wide bubble letters; Kodchasan is a loopless, rounded Thai with the same soft terminals as Quicksand. ## Components - Primary button: hot-pink glossy pill with white label and a 1px dark-pink text-shadow; secondary is a chrome pill (horizontal brushed-silver gradient + gloss) with plum text that turns holographic on hover - Cards: white with the chrome rim, 24px radius, pink-tinted soft shadow; the highlight card is holographic foil with a white sparkle in its corner - Icon tiles and avatars: circular holographic bubble with gloss, ringed by 2px white then 1px silver - Inputs: white, 16px radius, silver gradient rim, faint inner shadow; focus swaps the rim to the pink gradient and adds a 4px rgba(255,63,160,.18) ring - Badges and chips: small glossy pills — chrome by default, candy-tinted (mint / butter / blush) for status, hot pink when active - Eyebrow: holographic pill with a chrome rim and a pink sparkle before the text - Switch / checkbox: brushed-silver track with a chrome knob; on = glossy pink track - Charts: pink primary line with a soft pink drop-shadow, pill-topped glossy bars, round heatmap dots, rounded donut caps, pill-shaped funnel steps fading pink → lilac - Nav and tab bar: floating chrome-rimmed white capsule; the active tab icon sits in a glossy pink bubble ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: centred headline with the product visual below it. Navigation: pill style. Sections in order: hero → logos → features → showcase → testimonials → pricing → faq → cta. Feature section as bento. A centred hero: eyebrow pill, a two- or three-line bubble headline flanked by sparkles, short lead, a pink glossy CTA beside a chrome secondary, then a product shot built from chrome-rimmed cards. Features use a bento grid where one big tile is holographic foil. Sections alternate on a faint pink → lilac wash; testimonials, pricing and FAQ use chrome-rimmed white cards with sparkle details; the CTA is a full foil panel. Long reading sits inside a white chrome-rimmed panel so sparkles never sit under paragraphs. Dashboards use a top nav with a glossy pink active pill and bright, rounded charts. ## Content Use realistic product copy (fictional brand) suited to: Fashion, beauty and accessories shops. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use hot pink #E0157F + chrome silver as the core pair; iridescent foil only for 1–2 hero surfaces per view - Give every pill a white gloss band on the top half - Scatter 4-point sparkles (✦) at 2–3 sizes around headlines and cards, not everywhere - Keep body text plum on white for contrast ## Don't - Don’t use aqua-and-grass-green nature scenes — that is Frutiger Aero - Don’t add faces, mascots or pastel-only palettes — that is Kawaii - Don’t use flat matte buttons or sharp corners - Don’t put chrome gradients on small text - Matte flat buttons or square corners — every control is a glossy pill or a rounded chrome tile - Sky-blue/grass-green water bubbles and nature photos — that is Frutiger Aero - Faces, mascots and all-pastel low-contrast palettes — that is Kawaii - Windows-95 title bars, sunsets and grid floors — that is Vaporwave - Chrome or holographic gradients on body text, and sparkles behind paragraphs - Dark mode as the default; the look depends on a bright white and pink base ## Stack notes One self-contained HTML file with a