No preview available
Y2K Glass Candy Minimalism

/y2kGlassCandyMinimalism
A luminous, glassy design system blending Y2K web nostalgia with modern minimalism for mobile profile, creator, and social link pages. Features expressive candy CTA, glass layers, soft gradients, and pixel-detail without clutter.
1 likes
1 bookmark
Jun 24, 2026
Design System Content
# Y2K Glass Candy Minimalism Design System

A clean, expressive light-theme design language for internet-native mobile profile pages, link hubs, creator cards, and compact social landing experiences.

---

## Philosophy

> "Soft chrome, clear glass, tiny pixels, perfect restraint."

This system combines the visual memory of early-web gloss and Y2K interface candy with the precision of modern premium product design. It should feel light, icy, rounded, tactile, and slightly nostalgic without becoming chaotic or novelty-driven.

The interface is built as a centered, single-column mobile canvas. Every element should feel deliberately placed: compact identity block, short intro, restrained social icons, and large fully rounded CTA buttons with glass highlights. Decoration is minimal and atmospheric—subtle gradients, translucent surfaces, delicate outlines, low-depth shadows, faint shimmer, and soft scanline texture.

### Core Beliefs

1. **Candy softness, premium restraint** — Y2K references should appear through gloss, translucency, rounded forms, and pearly color—not through clutter.
2. **Single-column clarity** — The page lives inside a centered mobile canvas with strong vertical rhythm and no sprawling layouts.
3. **Glass is a material, not an effect dump** — Use translucent fills, thin borders, highlights, and backdrop blur with discipline.
4. **Color should feel synthetic and luminous** — Accent colors are holographic, jelly-like, pearlescent, or chrome-tinted rather than generic blue, green, or orange.
5. **Buttons are the main objects** — CTAs are large, pill-shaped, tactile, glossy, and satisfying to tap.
6. **Nostalgia through details** — Pixel-adjacent typography, scanlines, iridescent edges, and early-web shine should be used sparingly.
7. **Depth stays shallow** — Avoid heavy realism. The system uses low-depth shadows, thin borders, inner highlights, and gentle gradients.

### Strict Rules

* **Centered Mobile Canvas Only** — Primary page content must stay in a single centered column, generally between `320px` and `430px` wide.
* **No Decorative Clutter** — Do not add floating stickers, excessive stars, busy icon clusters, random sparkles, or maximal Y2K ornaments.
* **No Generic CTA Blue** — Primary actions must use expressive CTA colors such as holographic grape, jelly cyan, chrome rose, or pearly gradients.
* **No Dark Theme Foundation** — This is a light-theme system. Dark graphite is used for text, not large backgrounds.
* **No Hard Rectangles** — Primary containers and buttons use soft or fully rounded corners.
* **No Harsh Neon** — Colors can glow, but they must remain pastel, translucent, or chrome-soft.
* **No Heavy Shadows** — Use delicate shadows and luminous outlines rather than large blurred drop shadows.
* **No Dense Navigation** — The system is optimized for compact personal pages, link hubs, and mobile-first social experiences.

---

## Color Palette

### Core Light & Glass Scale

The foundation is icy, pearlescent, and translucent. White is not plain white—it is cooled slightly with silver, lavender, and faint bubblegum undertones.

```css
/* Primary Backgrounds */
bg-ice-white              /* Main page canvas (#fbfdff) */
bg-frost-white            /* Elevated mobile shell (#f7faff) */
bg-pearl-white            /* Soft panel base (#ffffff) */
bg-silver-mist            /* Secondary surface (#eef2f7) */
bg-lavender-fog           /* Pale atmospheric background wash (#f0ecff) */
bg-bubblegum-haze         /* Pink translucent haze layer (#ffe8f3) */
bg-cyan-vapor             /* Cool jelly atmosphere (#e4fbff) */

/* Translucent Glass Surfaces */
bg-white/70               /* Primary glass cards and CTA base overlays */
bg-white/55               /* Floating translucent surfaces */
bg-silver-mist/60         /* Soft neutral glass panels */
bg-lavender-fog/45        /* Lavender-tinted glass surface */
bg-bubblegum-haze/35      /* Warm candy glass tint */
bg-cyan-vapor/40          /* Cool jelly glass tint */

/* Structural Highlights */
bg-glass-highlight        /* Top-edge gloss: rgba(255,255,255,0.82) */
bg-chrome-sheen           /* Silver highlight layer (#f8fbff) */
bg-soft-refraction        /* Subtle color shift overlay (#f3efff) */
```

### Text Hierarchy

Text should feel refined and modern. Avoid pure black unless necessary for extreme contrast. Use graphite, cool gray, and soft muted lavender-gray.

```css
/* Text */
text-graphite-950         /* Primary headings and names (#1d1d24) */
text-graphite-850         /* Strong body text (#2b2c35) */
text-graphite-700         /* Secondary body and descriptions (#4a4b57) */
text-graphite-500         /* Muted metadata, captions, icon defaults (#787988) */
text-graphite-400         /* Placeholder text, low-priority labels (#9698a8) */
text-graphite-300         /* Disabled text, ultra-muted details (#b5b8c6) */

/* Soft Colored Text */
text-grape-600            /* Active grape links or selected states (#7b4dff) */
text-cyan-600             /* Cool active states (#009db5) */
text-rose-600             /* Warm selected or special state (#c45b86) */
```

### Borders & Lines

Borders are essential to the glass effect. They should be thin, delicate, and often semi-transparent.

```css
/* Neutral Borders */
border-white/80           /* Inner glass highlight line */
border-white/60           /* Soft translucent edge */
border-silver-200         /* Default card/button outline (#dfe5ee) */
border-silver-300         /* Hover outline (#cfd8e6) */
border-graphite-950/8     /* Hairline structural contrast */
border-graphite-950/12    /* Slightly stronger interaction border */

/* Chromatic Borders */
border-lavender-200/70    /* Pale lavender glass edge (#d9ceff) */
border-cyan-200/70        /* Jelly cyan edge (#aeefff) */
border-rose-200/70        /* Chrome rose edge (#ffc6dc) */
border-grape-300/65       /* Holographic grape CTA edge (#b5a1ff) */
```

### CTA Colors

Primary CTAs should be expressive and non-generic. The color should feel like a glossy object or candy interface element.

```css
/* Holographic Grape */
bg-grape-500              /* Main grape fill (#8a63ff) */
bg-grape-600              /* Pressed grape fill (#744df2) */
bg-grape-400              /* Hover highlight (#a389ff) */
text-grape-700            /* Grape text on pale surfaces (#5c35d8) */

/* Jelly Cyan */
bg-cyan-jelly             /* Main cyan CTA fill (#38d8f2) */
bg-cyan-jelly-dark        /* Pressed cyan state (#13b9d2) */
bg-cyan-jelly-light       /* Hover shine (#8ff1ff) */
text-cyan-jelly-700       /* Cyan text on pale fills (#00869a) */

/* Chrome Rose */
bg-chrome-rose            /* Main rose CTA fill (#f59abb) */
bg-chrome-rose-dark       /* Pressed rose state (#dc729d) */
bg-chrome-rose-light      /* Hover shine (#ffc2d7) */
text-chrome-rose-700      /* Rose text on pale fills (#b94978) */

/* Pearl Neutral CTA */
bg-pearl-button           /* Secondary button fill (#ffffff) */
bg-pearl-button-hover     /* Secondary hover fill (#f6f8ff) */
```

### Gradients

Gradients create the candy-glass identity. They should be glossy, soft, and highly controlled.

```css
/* Page Atmosphere */
bg-y2k-atmosphere:
  radial-gradient(circle at 50% 0%, rgba(208, 225, 255, 0.75), transparent 34%),
  radial-gradient(circle at 22% 18%, rgba(255, 218, 239, 0.65), transparent 28%),
  radial-gradient(circle at 78% 24%, rgba(210, 247, 255, 0.7), transparent 30%),
  linear-gradient(180deg, #fbfdff 0%, #f7f6ff 48%, #ffffff 100%);

/* Holographic Grape CTA */
bg-gradient-grape:
  linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 38%),
  linear-gradient(135deg, #b8a6ff 0%, #8a63ff 44%, #6ee9ff 100%);

/* Jelly Cyan CTA */
bg-gradient-cyan:
  linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 42%),
  linear-gradient(135deg, #b9f7ff 0%, #38d8f2 48%, #bca8ff 100%);

/* Chrome Rose CTA */
bg-gradient-rose:
  linear-gradient(180deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0) 40%),
  linear-gradient(135deg, #ffd8e8 0%, #f59abb 45%, #d9d1ff 100%);

/* Pearl Glass Button */
bg-gradient-pearl:
  linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,250,255,0.76) 100%);

/* Subtle Name Glow */
bg-gradient-name:
  linear-gradient(90deg, #1d1d24 0%, #6f5cf6 42%, #d45f9b 72%, #1d1d24 100%);
```

### Functional Colors

Functional states remain soft and integrated into the palette. Avoid generic saturated green/yellow/red blocks.

```css
/* Success */
bg-mint-glass             /* Success background (#e8fff7) */
text-mint-700             /* Success text (#15805f) */
border-mint-200           /* Success border (#bceedd) */

/* Warning */
bg-cream-glass            /* Warning background (#fff8df) */
text-honey-700            /* Warning text (#9a6a00) */
border-cream-300          /* Warning border (#f2df9f) */

/* Error / Destructive */
bg-rose-glass             /* Error background (#fff0f5) */
text-rose-danger          /* Destructive text (#c23f70) */
border-rose-danger-200    /* Destructive border (#ffc3d8) */
```

---

## Typography

The typography balances modern product precision with optional early-web/pixel-adjacent detail. Primary typography should be clean, geometric, and premium. Pixel flavor appears only in small labels, handles, counters, or micro metadata.

### Recommended Font Stack

```css
/* Primary UI / Display */
font-family: "Space Grotesk", "Geist", "Satoshi", "ABC Diatype", Inter, system-ui, sans-serif;

/* Optional Pixel-Adjacent Detail */
font-family: "Departure Mono", "Pixelify Sans", "Geist Mono", "Berkeley Mono", monospace;
```

### Font Usage Rules

```css
/* Primary Typeface */
font-primary       /* Names, intro, buttons, body, section labels */

/* Detail Typeface */
font-pixel-detail  /* Usernames, handles, micro labels, tiny status tags only */

/* Mono Typeface */
font-mono          /* Short technical strings, counters, tiny metadata */
```

### Font Weights

```css
font-normal        /* Intro text, secondary body, helper text */
font-medium        /* Buttons, handles, compact labels, icon labels */
font-semibold      /* Name block, CTA emphasis, selected states */
font-bold          /* Rare; only for name emphasis or compact hero identity */

/* Avoid excessive heavy typography. Large text should feel soft and polished, not loud. */
```

### Font Size Scale

```css
text-[9px]         /* Micro labels, pixel-detail chips, scanline labels */
text-[10px]        /* Tiny badges, username metadata, icon labels */
text-[11px]        /* Compact status text, secondary annotations */
text-xs            /* Captions, secondary labels, button subtitles */
text-sm            /* Default body text, CTA text on compact screens */
text-[15px]        /* Preferred intro text on mobile */
text-base          /* Large CTA labels, strong body text */
text-lg            /* Name subtitle or compact heading */
text-xl            /* Primary name on very compact layouts */
text-2xl           /* Default name block */
text-3xl           /* Large name block on roomy mobile canvas */
text-4xl           /* Rare display use, top profile identity only */
```

### Letter Spacing & Transforms

```css
tracking-[-0.04em]   /* Large name display, glossy identity text */
tracking-[-0.025em]  /* Section headers and strong text */
tracking-tight       /* CTA labels, compact headings */
tracking-normal      /* Default body and intro text */
tracking-wide        /* Social labels, button subtitles */
tracking-widest      /* Pixel-detail micro labels */

uppercase            /* Micro labels, small status tags only */
lowercase            /* Usernames and handles */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Typeface | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Profile Name | `text-2xl` / `text-3xl` | semibold | `text-graphite-950` or gradient text | `-0.04em` | Primary | none |
| Username / Handle | `text-[11px]` | medium | `text-graphite-500` | `wide` | Pixel-detail or mono | lowercase |
| Intro | `text-[15px]` | normal | `text-graphite-700` | normal | Primary | none |
| CTA Label | `text-base` | semibold | white / graphite | tight | Primary | none |
| CTA Sub Label | `text-xs` | medium | white/75 or graphite-500 | wide | Primary | none |
| Micro Badge | `text-[9px]` | medium | `text-graphite-500` | widest | Pixel-detail | uppercase |
| Social Icon Label | `text-[10px]` | medium | `text-graphite-500` | wide | Primary | none |

---

## Layout System

### Canvas Philosophy

The page is a centered mobile canvas, not a full desktop composition. Desktop view should preserve the mobile object in the center with atmospheric whitespace around it.

```css
/* Page Shell */
min-h-screen
w-full
bg-y2k-atmosphere
flex
justify-center
px-4
py-6
sm:py-10

/* Mobile Canvas */
w-full
max-w-[430px]
mx-auto
relative
```

### Canvas Widths

```css
max-w-[320px]      /* Ultra-compact link card */
max-w-[360px]      /* Small mobile profile */
max-w-[390px]      /* Preferred default mobile canvas */
max-w-[430px]      /* Spacious premium mobile canvas */
```

### Vertical Rhythm

Spacing should feel airy but compact. Avoid long editorial spacing or cramped app-dashboard density.

```css
gap-2              /* Icon rows, micro labels */
gap-3              /* Name block internal spacing */
gap-4              /* Social icons to CTA stack */
gap-5              /* Intro to social row */
gap-6              /* Header block to CTA group */
gap-8              /* Major vertical sections */
gap-10             /* Rare page-level breathing room */
```

### Section Structure

A default page should follow this order:

```tsx
<main className="w-full max-w-[390px] mx-auto">
  <ProfileBlock />
  <IntroBlock />
  <SocialIconRow />
  <CTAStack />
  <FooterMicroLabel />
</main>
```

### Recommended Page Proportions

```css
/* Top breathing room */
pt-8 sm:pt-12

/* Profile block */
mb-4

/* Intro block */
mb-5

/* Social row */
mb-6

/* CTA stack */
space-y-3

/* Footer micro detail */
mt-6
```

---

## Shape & Radius

Rounded forms are critical. Corners should feel soft, candy-like, and touchable.

```css
rounded-sm          /* Rare: tiny pixel labels only */
rounded-md          /* Micro chips, small labels */
rounded-lg          /* Small icon containers */
rounded-xl          /* Compact cards */
rounded-2xl         /* Profile image, glass panels */
rounded-3xl         /* Large cards and grouped containers */
rounded-[28px]      /* Primary glass modules */
rounded-[32px]      /* Large mobile panels */
rounded-full        /* CTA buttons, avatars, social icons, status pills */
```

### Radius Rules

* Primary CTA buttons must use `rounded-full`.
* Social icons should use `rounded-full` or `rounded-2xl`.
* Glass cards should use `rounded-3xl` or `rounded-[28px]`.
* Small pixel-detail labels may use sharper radii, but never hard square corners.
* Avoid mixed radius chaos. Use one primary large radius and one small supporting radius per screen.

---

## Elevation & Glass Material

Depth is created through glass layering, not heavy shadows. Elements should look lightly raised, translucent, and glossy.

### Shadow Scale

```css
shadow-glass-xs:
  0 1px 1px rgba(29, 29, 36, 0.04),
  0 0 0 1px rgba(255,255,255,0.55) inset;

shadow-glass-sm:
  0 4px 14px rgba(77, 72, 112, 0.08),
  0 1px 0 rgba(255,255,255,0.75) inset;

shadow-glass-md:
  0 10px 28px rgba(77, 72, 112, 0.11),
  0 1px 0 rgba(255,255,255,0.82) inset;

shadow-gloss-cta:
  0 10px 22px rgba(104, 87, 190, 0.16),
  0 2px 0 rgba(255,255,255,0.42) inset,
  0 -1px 0 rgba(29,29,36,0.08) inset;

shadow-pressed:
  0 2px 8px rgba(77, 72, 112, 0.12),
  0 1px 0 rgba(255,255,255,0.35) inset;
```

### Glass Surface Formula

```css
/* Standard Glass */
bg-white/65
backdrop-blur-xl
border
border-white/70
shadow-glass-sm

/* Strong Glass */
bg-white/78
backdrop-blur-2xl
border
border-white/80
shadow-glass-md

/* Tinted Glass */
bg-lavender-fog/45
backdrop-blur-xl
border
border-lavender-200/70
shadow-glass-sm
```

### Inner Highlight

All major glass objects should include a subtle highlight layer.

```tsx
<div className="relative overflow-hidden rounded-[28px] bg-white/65 backdrop-blur-xl border border-white/70 shadow-glass-sm">
  <div className="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/70 to-transparent" />
  <div className="relative z-10">
    {/* Content */}
  </div>
</div>
```

---

## Texture System

Texture should be almost invisible. It adds internet-native atmosphere without becoming decorative clutter.

### Scanline Texture

Use only over the page background or large glass panels at very low opacity.

```css
.texture-scanline {
  background-image: linear-gradient(
    rgba(29, 29, 36, 0.035) 1px,
    transparent 1px
  );
  background-size: 100% 4px;
  opacity: 0.35;
  pointer-events: none;
}
```

### Shimmer Texture

Use for CTA gloss, avatar frame edges, or featured link buttons.

```css
.texture-shimmer {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,0.0) 32%,
      rgba(255,255,255,0.55) 48%,
      rgba(255,255,255,0.0) 64%,
      transparent 100%
    );
  background-size: 220% 100%;
}
```

### Noise Texture

Use only if extremely subtle.

```css
.texture-pearl-noise {
  background-image: url("/noise-soft.png");
  opacity: 0.035;
  mix-blend-mode: multiply;
  pointer-events: none;
}
```

### Texture Rules

* Scanlines should never reduce text readability.
* Shimmer should appear mostly during hover, press, or page reveal.
* Noise must be nearly invisible.
* Do not combine heavy noise, scanlines, and shimmer on every element.
* Texture should support glass, not imitate a grunge aesthetic.

---

## Iconography

Icons should be clean, compact, and rounded. Social icons are secondary to CTAs but still tactile.

### Icon Style

```css
stroke-[1.75]
text-graphite-500
transition-all
duration-200
```

### Social Icon Button

```tsx
<button className="
  h-11 w-11
  rounded-full
  bg-white/62
  backdrop-blur-xl
  border border-white/70
  shadow-glass-xs
  text-graphite-500
  flex items-center justify-center
  transition-all duration-200 ease-out
  hover:bg-white/80
  hover:text-graphite-950
  hover:border-white
  active:scale-95
">
  <Icon className="h-[18px] w-[18px]" />
</button>
```

### Icon Rules

* Use simple line icons or restrained filled brand marks.
* Keep social icons in one centered row.
* Avoid large colorful social logos unless the brand mark is essential.
* Default icon color should be graphite, not bright accent.
* Hover may use subtle chromatic tint, but not multiple clashing colors.

---

## Animation System

### Core Philosophy: Glossy Snap

Motion should feel like a soft glass object responding to touch: quick, satisfying, low-bounce, and polished. Page entrance can be slightly dreamy, but interactions must remain crisp.

### Page Entrance

Elements softly rise into focus with a tiny blur reduction.

```tsx
initial={{ opacity: 0, y: 12, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 0.42, ease: [0.22, 1, 0.36, 1] }}
```

### Staggered Single-Column Reveal

```tsx
const container = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.065,
      delayChildren: 0.08
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 10, filter: "blur(8px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { duration: 0.36, ease: [0.22, 1, 0.36, 1] }
  }
};
```

### CTA Tap Feedback

Buttons should compress slightly and brighten or deepen on press.

```tsx
whileTap={{
  scale: 0.975,
  y: 1,
  filter: "brightness(0.98)"
}}

transition={{
  type: "spring",
  stiffness: 520,
  damping: 32,
  mass: 0.7
}}
```

### Hover Lift

Desktop hover states remain subtle. Do not create dramatic floating cards.

```tsx
whileHover={{
  y: -1,
  scale: 1.006
}}

transition={{
  type: "spring",
  stiffness: 360,
  damping: 28
}}
```

### Shimmer Sweep

```css
@keyframes shimmer-sweep {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -80% 0;
  }
}

.animate-shimmer {
  animation: shimmer-sweep 1.35s ease-out;
}
```

### Soft Background Drift

Use for atmospheric background gradients only.

```css
@keyframes vapor-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.025);
  }
}

.animate-vapor-drift {
  animation: vapor-drift 9s ease-in-out infinite;
}
```

---

## UI Components

### Page Background

The background should feel luminous and synthetic, not plain. Use radial haze fields and optional scanline overlay.

```tsx
<div className="
  min-h-screen
  w-full
  flex justify-center
  px-4 py-8
  bg-y2k-atmosphere
  relative overflow-hidden
">
  <div className="pointer-events-none absolute inset-0 texture-scanline opacity-[0.18]" />
  <main className="relative z-10 w-full max-w-[390px]">
    {/* Content */}
  </main>
</div>
```

### Mobile Glass Shell

Use when the entire profile page needs to feel like a contained object.

```tsx
<section className="
  w-full
  rounded-[32px]
  bg-white/48
  backdrop-blur-2xl
  border border-white/70
  shadow-glass-md
  p-5
  relative overflow-hidden
">
  <div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-white/70 to-transparent" />
  <div className="relative z-10">
    {/* Content */}
  </div>
</section>
```

### Compact Name Block

The name block is concise, centered, and high-priority. It should not become a full hero section.

```tsx
<header className="flex flex-col items-center text-center gap-2">
  <div className="
    h-20 w-20
    rounded-full
    p-[1px]
    bg-gradient-to-br from-white via-lavender-fog to-cyan-vapor
    shadow-glass-sm
  ">
    <div className="h-full w-full rounded-full overflow-hidden bg-white/70 border border-white/80">
      {/* Avatar */}
    </div>
  </div>

  <div className="space-y-1">
    <h1 className="
      text-2xl
      font-semibold
      tracking-[-0.04em]
      text-graphite-950
    ">
      Name
    </h1>

    <p className="
      font-pixel-detail
      text-[11px]
      tracking-wide
      text-graphite-500
      lowercase
    ">
      @username
    </p>
  </div>
</header>
```

### Gradient Name Variant

Use sparingly for premium identity moments.

```tsx
<h1 className="
  text-3xl
  font-semibold
  tracking-[-0.045em]
  bg-gradient-name
  bg-clip-text
  text-transparent
">
  Name
</h1>
```

### Intro Block

Short, centered, and readable.

```tsx
<p className="
  mx-auto
  max-w-[310px]
  text-center
  text-[15px]
  leading-relaxed
  text-graphite-700
">
  Short intro text.
</p>
```

### Social Icon Row

```tsx
<div className="flex items-center justify-center gap-2.5">
  <SocialIcon />
  <SocialIcon />
  <SocialIcon />
  <SocialIcon />
</div>
```

### CTA Stack

Buttons are large, rounded, and vertically stacked. Each should be easy to tap.

```tsx
<div className="flex flex-col gap-3">
  <PrimaryCTA />
  <SecondaryCTA />
  <SecondaryCTA />
</div>
```

---

## Component Catalog

### Primary CTA Button — Holographic Grape

The main action button should feel glossy and candy-like while remaining premium.

```tsx
<button className="
  group
  relative
  h-14
  w-full
  overflow-hidden
  rounded-full
  border border-white/70
  bg-gradient-grape
  px-5
  text-white
  shadow-gloss-cta
  transition-all duration-200 ease-out
  hover:brightness-[1.03]
  active:scale-[0.975]
  active:shadow-pressed
">
  <span className="
    pointer-events-none
    absolute inset-x-4 top-[3px] h-[42%]
    rounded-full
    bg-white/35
    blur-[1px]
  " />

  <span className="
    pointer-events-none
    absolute inset-0
    texture-shimmer
    opacity-0
    group-hover:opacity-100
    group-hover:animate-shimmer
  " />

  <span className="relative z-10 flex items-center justify-between gap-3">
    <span className="text-base font-semibold tracking-tight">
      Primary action
    </span>
    <span className="text-xs font-medium text-white/75 tracking-wide">
      label
    </span>
  </span>
</button>
```

### Primary CTA Button — Jelly Cyan

```tsx
<button className="
  relative
  h-14
  w-full
  overflow-hidden
  rounded-full
  border border-cyan-200/70
  bg-gradient-cyan
  px-5
  text-graphite-950
  shadow-gloss-cta
  transition-all duration-200 ease-out
  hover:brightness-[1.025]
  active:scale-[0.975]
">
  <span className="pointer-events-none absolute inset-x-4 top-[3px] h-[42%] rounded-full bg-white/45" />
  <span className="relative z-10 flex items-center justify-center text-base font-semibold tracking-tight">
    Primary action
  </span>
</button>
```

### Primary CTA Button — Chrome Rose

```tsx
<button className="
  relative
  h-14
  w-full
  overflow-hidden
  rounded-full
  border border-rose-200/70
  bg-gradient-rose
  px-5
  text-graphite-950
  shadow-gloss-cta
  transition-all duration-200 ease-out
  hover:brightness-[1.025]
  active:scale-[0.975]
">
  <span className="pointer-events-none absolute inset-x-4 top-[3px] h-[42%] rounded-full bg-white/50" />
  <span className="relative z-10 flex items-center justify-center text-base font-semibold tracking-tight">
    Primary action
  </span>
</button>
```

### Secondary Glass CTA

```tsx
<button className="
  relative
  h-14
  w-full
  overflow-hidden
  rounded-full
  border border-white/75
  bg-white/64
  backdrop-blur-xl
  px-5
  text-graphite-850
  shadow-glass-sm
  transition-all duration-200 ease-out
  hover:bg-white/82
  hover:border-white
  hover:-translate-y-px
  active:translate-y-0
  active:scale-[0.975]
">
  <span className="pointer-events-none absolute inset-x-4 top-[3px] h-[38%] rounded-full bg-white/65" />
  <span className="relative z-10 flex items-center justify-between gap-3">
    <span className="text-base font-semibold tracking-tight">
      Secondary link
    </span>
    <span className="text-graphite-400">
      →
    </span>
  </span>
</button>
```

### Minimal Text CTA

For less important links.

```tsx
<a className="
  inline-flex
  items-center
  justify-center
  rounded-full
  px-4 py-2
  text-sm
  font-medium
  text-graphite-500
  transition-colors duration-200
  hover:text-graphite-950
">
  Text link
</a>
```

### Glass Card

```tsx
<div className="
  relative
  overflow-hidden
  rounded-[28px]
  border border-white/70
  bg-white/58
  backdrop-blur-xl
  p-5
  shadow-glass-sm
">
  <div className="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/65 to-transparent" />
  <div className="relative z-10">
    {/* Card content */}
  </div>
</div>
```

### Profile Avatar

```tsx
<div className="
  relative
  h-20 w-20
  rounded-full
  p-[1px]
  bg-gradient-to-br
  from-white
  via-lavender-fog
  to-cyan-vapor
  shadow-glass-sm
">
  <div className="
    h-full w-full
    overflow-hidden
    rounded-full
    border border-white/80
    bg-white/65
    backdrop-blur-xl
  ">
    {/* Image */}
  </div>

  <div className="
    pointer-events-none
    absolute inset-x-3 top-1 h-5
    rounded-full
    bg-white/45
    blur-[1px]
  " />
</div>
```

### Status Pill

```tsx
<div className="
  inline-flex
  items-center
  gap-1.5
  rounded-full
  border border-white/70
  bg-white/58
  px-3 py-1.5
  backdrop-blur-xl
  shadow-glass-xs
">
  <span className="h-1.5 w-1.5 rounded-full bg-cyan-jelly shadow-[0_0_8px_rgba(56,216,242,0.55)]" />
  <span className="
    font-pixel-detail
    text-[9px]
    uppercase
    tracking-widest
    text-graphite-500
  ">
    label
  </span>
</div>
```

### Micro Label

```tsx
<span className="
  font-pixel-detail
  text-[9px]
  uppercase
  tracking-widest
  text-graphite-400
">
  micro label
</span>
```

### Input Field

Inputs should feel like soft glass wells.

```tsx
<input className="
  h-12
  w-full
  rounded-full
  border border-white/70
  bg-white/58
  px-4
  text-sm
  text-graphite-950
  placeholder:text-graphite-400
  backdrop-blur-xl
  shadow-glass-xs
  outline-none
  transition-all duration-200
  focus:bg-white/82
  focus:border-grape-300/65
  focus:ring-4
  focus:ring-grape-300/15
" />
```

### Toggle Chip

```tsx
<button className="
  rounded-full
  border border-white/70
  bg-white/55
  px-3 py-1.5
  text-xs
  font-medium
  text-graphite-600
  backdrop-blur-xl
  transition-all duration-200
  hover:bg-white/80
  hover:text-graphite-950
  data-[active=true]:bg-lavender-fog/70
  data-[active=true]:text-grape-700
  data-[active=true]:border-grape-300/50
">
  Chip
</button>
```

---

## Interaction States

### Default State

```css
bg-white/60
border-white/70
shadow-glass-sm
text-graphite-850
```

### Hover State

```css
bg-white/82
border-white
shadow-glass-md
translate-y-[-1px]
```

### Pressed State

```css
scale-[0.975]
translate-y-[1px]
brightness-[0.98]
shadow-pressed
```

### Focus State

```css
outline-none
ring-4
ring-grape-300/15
border-grape-300/65
```

### Disabled State

```css
opacity-45
pointer-events-none
saturate-50
```

### Selected State

```css
bg-lavender-fog/70
border-grape-300/55
text-grape-700
shadow-glass-xs
```

---

## Responsive Behavior

### Mobile First

The design is optimized for phones. Desktop should not expand the layout into a complex page.

```css
/* Default */
max-w-[390px]
px-4
py-8

/* Small phones */
max-[360px]:px-3
max-[360px]:text-sm

/* Larger phones */
sm:max-w-[430px]
sm:py-10

/* Desktop */
md:max-w-[430px]
md:py-12
```

### Desktop Presentation

On larger screens, keep the mobile canvas centered.

```tsx
<div className="
  min-h-screen
  w-full
  flex
  items-start
  justify-center
  bg-y2k-atmosphere
  px-4
  md:px-8
">
  <main className="w-full max-w-[430px]">
    {/* Single-column mobile canvas */}
  </main>
</div>
```

### Safe Area

```css
pt-[max(2rem,env(safe-area-inset-top))]
pb-[max(2rem,env(safe-area-inset-bottom))]
```

---

## Accessibility & Legibility

### Contrast

* Primary body text should use `text-graphite-700` or darker.
* Text over colorful CTA gradients should be white only when the gradient is dark enough.
* Jelly cyan and chrome rose CTAs may require `text-graphite-950` instead of white.
* Placeholder and disabled text must remain readable against translucent glass.

### Touch Targets

```css
min-h-[44px]       /* Absolute minimum */
h-11               /* Social icons */
h-12               /* Inputs and compact buttons */
h-14               /* Preferred CTA height */
h-16               /* Large premium CTA */
```

### Focus Rings

Focus rings should be visible but soft.

```css
focus-visible:outline-none
focus-visible:ring-4
focus-visible:ring-grape-300/20
focus-visible:border-grape-300/70
```

### Reduced Motion

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
```

---

## Implementation Tokens

### CSS Variables

```css
:root {
  /* Backgrounds */
  --ice-white: #fbfdff;
  --frost-white: #f7faff;
  --pearl-white: #ffffff;
  --silver-mist: #eef2f7;
  --lavender-fog: #f0ecff;
  --bubblegum-haze: #ffe8f3;
  --cyan-vapor: #e4fbff;

  /* Text */
  --graphite-950: #1d1d24;
  --graphite-850: #2b2c35;
  --graphite-700: #4a4b57;
  --graphite-500: #787988;
  --graphite-400: #9698a8;
  --graphite-300: #b5b8c6;

  /* Accents */
  --grape-400: #a389ff;
  --grape-500: #8a63ff;
  --grape-600: #744df2;
  --grape-700: #5c35d8;

  --cyan-jelly-light: #8ff1ff;
  --cyan-jelly: #38d8f2;
  --cyan-jelly-dark: #13b9d2;
  --cyan-jelly-700: #00869a;

  --chrome-rose-light: #ffc2d7;
  --chrome-rose: #f59abb;
  --chrome-rose-dark: #dc729d;
  --chrome-rose-700: #b94978;

  /* Borders */
  --silver-200: #dfe5ee;
  --silver-300: #cfd8e6;
  --lavender-200: #d9ceff;
  --cyan-200: #aeefff;
  --rose-200: #ffc6dc;

  /* Shadows */
  --shadow-glass-xs:
    0 1px 1px rgba(29, 29, 36, 0.04),
    0 0 0 1px rgba(255,255,255,0.55) inset;

  --shadow-glass-sm:
    0 4px 14px rgba(77, 72, 112, 0.08),
    0 1px 0 rgba(255,255,255,0.75) inset;

  --shadow-glass-md:
    0 10px 28px rgba(77, 72, 112, 0.11),
    0 1px 0 rgba(255,255,255,0.82) inset;

  --shadow-gloss-cta:
    0 10px 22px rgba(104, 87, 190, 0.16),
    0 2px 0 rgba(255,255,255,0.42) inset,
    0 -1px 0 rgba(29,29,36,0.08) inset;
}
```

### Tailwind Token Mapping

```js
theme: {
  extend: {
    colors: {
      "ice-white": "#fbfdff",
      "frost-white": "#f7faff",
      "pearl-white": "#ffffff",
      "silver-mist": "#eef2f7",
      "lavender-fog": "#f0ecff",
      "bubblegum-haze": "#ffe8f3",
      "cyan-vapor": "#e4fbff",

      graphite: {
        950: "#1d1d24",
        850: "#2b2c35",
        700: "#4a4b57",
        500: "#787988",
        400: "#9698a8",
        300: "#b5b8c6"
      },

      grape: {
        400: "#a389ff",
        500: "#8a63ff",
        600: "#744df2",
        700: "#5c35d8"
      },

      cyan: {
        jelly: "#38d8f2",
        "jelly-light": "#8ff1ff",
        "jelly-dark": "#13b9d2",
        "jelly-700": "#00869a"
      },

      chrome: {
        rose: "#f59abb",
        "rose-light": "#ffc2d7",
        "rose-dark": "#dc729d",
        "rose-700": "#b94978"
      }
    },

    boxShadow: {
      "glass-xs": "0 1px 1px rgba(29,29,36,0.04), 0 0 0 1px rgba(255,255,255,0.55) inset",
      "glass-sm": "0 4px 14px rgba(77,72,112,0.08), 0 1px 0 rgba(255,255,255,0.75) inset",
      "glass-md": "0 10px 28px rgba(77,72,112,0.11), 0 1px 0 rgba(255,255,255,0.82) inset",
      "gloss-cta": "0 10px 22px rgba(104,87,190,0.16), 0 2px 0 rgba(255,255,255,0.42) inset, 0 -1px 0 rgba(29,29,36,0.08) inset",
      "pressed": "0 2px 8px rgba(77,72,112,0.12), 0 1px 0 rgba(255,255,255,0.35) inset"
    },

    fontFamily: {
      primary: ["Space Grotesk", "Geist", "Satoshi", "ABC Diatype", "Inter", "system-ui", "sans-serif"],
      "pixel-detail": ["Departure Mono", "Pixelify Sans", "Geist Mono", "monospace"]
    }
  }
}
```

---

## Example Page Composition

```tsx
<main className="
  min-h-screen
  w-full
  bg-y2k-atmosphere
  px-4
  py-8
  flex
  justify-center
  relative
  overflow-hidden
">
  <div className="pointer-events-none absolute inset-0 texture-scanline opacity-[0.16]" />

  <section className="
    relative z-10
    w-full
    max-w-[390px]
    rounded-[32px]
    border border-white/70
    bg-white/48
    backdrop-blur-2xl
    shadow-glass-md
    p-5
    overflow-hidden
  ">
    <div className="pointer-events-none absolute inset-x-0 top-0 h-36 bg-gradient-to-b from-white/70 to-transparent" />

    <div className="relative z-10 flex flex-col items-center">
      <header className="flex flex-col items-center text-center gap-3 pt-3">
        <div className="h-20 w-20 rounded-full p-[1px] bg-gradient-to-br from-white via-lavender-fog to-cyan-vapor shadow-glass-sm">
          <div className="h-full w-full rounded-full bg-white/70 border border-white/80 overflow-hidden" />
        </div>

        <div className="space-y-1">
          <h1 className="text-3xl font-semibold tracking-[-0.045em] text-graphite-950">
            Name
          </h1>
          <p className="font-pixel-detail text-[11px] tracking-wide text-graphite-500 lowercase">
            @username
          </p>
        </div>
      </header>

      <p className="mt-4 max-w-[310px] text-center text-[15px] leading-relaxed text-graphite-700">
        Short intro text.
      </p>

      <div className="mt-5 flex items-center justify-center gap-2.5">
        <SocialIcon />
        <SocialIcon />
        <SocialIcon />
        <SocialIcon />
      </div>

      <div className="mt-6 flex w-full flex-col gap-3">
        <PrimaryCTA />
        <SecondaryCTA />
        <SecondaryCTA />
      </div>

      <div className="mt-6">
        <span className="font-pixel-detail text-[9px] uppercase tracking-widest text-graphite-400">
          micro label
        </span>
      </div>
    </div>
  </section>
</main>
```

---

## Quality Checklist

* [ ] Is the page built as a centered single-column mobile canvas?
* [ ] Does the design use icy white, translucent silver, pale lavender, bubblegum haze, and soft graphite?
* [ ] Are CTA colors expressive and non-generic, such as holographic grape, jelly cyan, or chrome rose?
* [ ] Are the primary CTAs large, fully rounded, glossy, and easy to tap?
* [ ] Are glass effects created with translucent fills, delicate borders, highlights, and low-depth shadows?
* [ ] Is decorative Y2K detail restrained rather than cluttered?
* [ ] Are scanlines, shimmer, and noise subtle enough to avoid harming readability?
* [ ] Is the pixel-adjacent font used only for usernames, handles, micro labels, or tiny metadata?
* [ ] Are social icons compact, centered, and secondary to the CTA stack?
* [ ] Are hover and tap states tactile but not exaggerated?
* [ ] Does the interface remain premium rather than costume-like or overly nostalgic?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Icy white and pearly light backgrounds.
* Translucent silver and lavender glass surfaces.
* Bubblegum haze and cyan vapor used as atmospheric tints.
* Holographic grape, jelly cyan, and chrome rose CTAs.
* Fully rounded CTA buttons with top gloss highlights.
* Single centered mobile canvas layouts.
* Subtle scanline texture at low opacity.
* Gentle shimmer on hover or reveal.
* Pixel-adjacent typography for tiny labels and usernames.
* Thin white borders, inner highlights, and low-depth shadows.
* Compact social icon rows.
* Soft graphite typography.

### ✗ Not Allowed

* Full desktop-width landing page layouts.
* Busy Y2K sticker collages or random decorative icons.
* Generic saturated CTA blue.
* Dark-mode foundations or large black panels.
* Heavy neon glow effects.
* Harsh rectangular cards or sharp primary CTAs.
* Dense navigation bars.
* Multiple competing display fonts.
* Pixel fonts used for body text or primary CTAs.
* Heavy shadows with muddy gray blur.
* Overly saturated rainbow gradients.
* Text placed over gradients without adequate contrast.