Y2K Aesthetic

Also called: Y2K, Millennium Pop, Cyber Y2K, Bubblegum Futurism

Millennium pop: bubblegum pink, liquid chrome, holographic foil, twinkling star sparkles and glossy candy pills.

“Bubblegum chrome”Retro & NostalgiaEra: 1998–2004, revived 2020sPlayfulNostalgicDreamyBold

y2k-aesthetic / landingEN

y2k-aesthetic / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm10pxRadius md16pxRadius lg24pxRadius xl32pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

bubblegum pinkliquid chromeholographic foilfour-point star sparklesglossy pill buttonsbubble lettersiridescent gradientmillennium pop

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

Not to be confused with

Frutiger Aero →Frutiger Aero is sky-blue and grass-green glossy optimism with water bubbles and nature; Y2K is hot pink, chrome and holographic foil with star sparkles.Kawaii / Cute →Kawaii is soft pastel with faces, mascots and rounded calm; Y2K is shinier and louder — chrome edges, glossy highlights and hot-pink bubble type.Vaporwave →Vaporwave is a hazy pink-cyan sunset with Windows-95 windows and statues; Y2K is clean white surfaces with chrome rims, gloss and iridescent stickers.

On mobile

Mobile is where Y2K feels most at home: a holographic featured card, glossy pink pill CTAs with a springy press, chrome-rimmed list cards and a floating chrome tab bar with a pink bubble behind the active icon. Keep sparkles to the header and featured card so lists stay calm.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinUnbounded · 600/700

The quick brown fox

Heading · ThaiMitr · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinQuicksand · 500/600/700

Clear words make shared decisions.

Body · ThaiKodchasan · 500/600/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Design tokens

Radius	`sm 10px · md 16px · lg 24px · xl 32px · pill 999px`
Border	`2px`
Shadow	`0 10px 26px rgba(224,21,127,0.18), 0 2px 0 rgba(255,255,255,0.9)`
Display	`clamp(2.4rem, 5.6vw, 4.6rem)`
Motion	`200ms cubic-bezier(.34,1.56,.64,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Y2K Aesthetic (y2k-aesthetic) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 24px;
  --background: #FFF0F8;
  --foreground: #2A0F3D;
  --card: #FFFFFF;
  --card-foreground: #2A0F3D;
  --popover: #FFFFFF;
  --popover-foreground: #2A0F3D;
  --primary: #E0157F;
  --primary-foreground: #FFFFFF;
  --secondary: #DCDFEA;
  --secondary-foreground: #2A0F3D;
  --muted: #FFE3F2;
  --muted-foreground: #74457F;
  --accent: #FFE3F2;
  --accent-foreground: #2A0F3D;
  --destructive: #D3204B;
  --border: #E8B3D6;
  --input: #E8B3D6;
  --ring: #E0157F;
  --chart-1: #FF2E97;
  --chart-2: #7B5CFF;
  --chart-3: #22B8E6;
  --chart-4: #9BD62E;
  --chart-5: #FFB13D;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #2A0F3D;
  --sidebar-primary: #E0157F;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #FFE3F2;
  --sidebar-accent-foreground: #2A0F3D;
  --sidebar-border: #E8B3D6;
  --sidebar-ring: #E0157F;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Y2K Aesthetic (y2k-aesthetic) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FFF0F8;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFE3F2;
  --color-text: #2A0F3D;
  --color-text-muted: #74457F;
  --color-primary: #E0157F;
  --color-on-primary: #FFFFFF;
  --color-secondary: #DCDFEA;
  --color-on-secondary: #2A0F3D;
  --color-accent: #7B5CFF;
  --color-border: #E8B3D6;
  --color-success: #14915A;
  --color-warning: #C77A00;
  --color-danger: #D3204B;
  --color-chart-1: #FF2E97;
  --color-chart-2: #7B5CFF;
  --color-chart-3: #22B8E6;
  --color-chart-4: #9BD62E;
  --color-chart-5: #FFB13D;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow-sm: 0 3px 10px rgba(224,21,127,0.14);
  --shadow-md: 0 10px 26px rgba(224,21,127,0.18), 0 2px 0 rgba(255,255,255,0.9);
  --shadow-lg: 0 22px 50px rgba(123,92,255,0.22), 0 6px 16px rgba(224,21,127,0.2);
  --font-heading: "Unbounded", "Mitr", system-ui, sans-serif;
  --font-body: "Quicksand", "Kodchasan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Kodchasan", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Y2K Aesthetic (y2k-aesthetic). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9412,
            0.9725
          ],
          "hex": "#fff0f8"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8902,
            0.949
          ],
          "hex": "#ffe3f2"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0588,
            0.2392
          ],
          "hex": "#2a0f3d"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4549,
            0.2706,
            0.498
          ],
          "hex": "#74457f"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.0824,
            0.498
          ],
          "hex": "#e0157f"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8627,
            0.8745,
            0.9176
          ],
          "hex": "#dcdfea"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0588,
            0.2392
          ],
          "hex": "#2a0f3d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.3608,
            1
          ],
          "hex": "#7b5cff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.702,
            0.8392
          ],
          "hex": "#e8b3d6"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.5686,
            0.3529
          ],
          "hex": "#14915a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7804,
            0.4784,
            0
          ],
          "hex": "#c77a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.1255,
            0.2941
          ],
          "hex": "#d3204b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1804,
            0.5922
          ],
          "hex": "#ff2e97"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.3608,
            1
          ],
          "hex": "#7b5cff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.7216,
            0.902
          ],
          "hex": "#22b8e6"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.8392,
            0.1804
          ],
          "hex": "#9bd62e"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6941,
            0.2392
          ],
          "hex": "#ffb13d"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.8784,
              0.0824,
              0.498
            ],
            "hex": "#e0157f",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 3,
            "unit": "px"
          },
          "blur": {
            "value": 10,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.8784,
              0.0824,
              0.498
            ],
            "hex": "#e0157f",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 26,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.9
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.4824,
              0.3608,
              1
            ],
            "hex": "#7b5cff",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 22,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.8784,
              0.0824,
              0.498
            ],
            "hex": "#e0157f",
            "alpha": 0.2
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 16,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Unbounded",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Quicksand",
        "Kodchasan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Kodchasan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 500
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.56,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!