Y2K Candy Chrome DESIGN.md

---
version: 1
name: Y2K Candy Chrome Mobile
description: A maximal, hyper-saturated mobile aesthetic that fuses late-90s/early-2000s candy-pop colors (hot magenta, electric cyan, acid lime) with chrome-button skeuomorphism — every interactive surface has dual-axis gradients, inset highlights, hard drop shadows, and crisp 1px white text-shadows that fake an embossed, sticker-like depth. Backgrounds drift from a cool baby-blue sky to soft white; cards float on a pillow of inner-light and outer-shadow; CTAs pop like glossy candy buttons with a "press-down" stack-shadow. Black geometric sans (Space Grotesk) headlines hit hard against a humanist sans (Nunito Sans) body in heavy weights, with EVERY label set in tracked-out uppercase black. The whole thing feels like a polished plastic toy dashboard.
colors:
  primary: "#FF00CC"
  on-primary: "#FFFFFF"
  secondary: "#CCFF00"
  on-secondary: "#000000"
  accent: "#00CCFF"
  on-accent: "#000000"
  surface: "#F0F8FF"
  surface-alt: "#FFFFFF"
  surface-muted: "#E0E7FF"
  surface-sky-top: "#B3D9FF"
  surface-sky-bottom: "#DBEAFE"
  on-surface: "#000033"
  on-surface-variant: "#505080"
  border: "#3B82F6"
  border-soft: "rgba(255,255,255,0.6)"
  success: "#99CC00"
  success-deep: "#669900"
  error: "#FF3333"
  destructive: "#FF8080"
  warning: "#FF9900"
  chart-1: "#FF00CC"
  chart-2: "#CCFF00"
  chart-3: "#00CCFF"
  chart-4: "#9900FF"
  chart-5: "#FF9900"
typography:
  display-lg:
    fontFamily: Space Grotesk
    fontSize: 36px
    fontWeight: 900
    lineHeight: 40px
    letterSpacing: -0.02em
  display-md:
    fontFamily: Space Grotesk
    fontSize: 24px
    fontWeight: 900
    lineHeight: 28px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Space Grotesk
    fontSize: 20px
    fontWeight: 900
    lineHeight: 24px
    letterSpacing: -0.01em
  numeral-card:
    fontFamily: Space Grotesk
    fontSize: 20px
    fontWeight: 900
    lineHeight: 24px
    letterSpacing: -0.01em
  body-md:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 900
    lineHeight: 14px
    letterSpacing: 0.08em
  label-uppercase-sm:
    fontFamily: Nunito Sans
    fontSize: 10px
    fontWeight: 900
    lineHeight: 12px
    letterSpacing: 0.1em
  caption:
    fontFamily: Nunito Sans
    fontSize: 11px
    fontWeight: 600
    lineHeight: 14px
    letterSpacing: 0em
  mono-numeric:
    fontFamily: JetBrains Mono
    fontSize: 18px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: 0.15em
rounded:
  sm: 8px
  md: 14px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  gutter: 24px
  card-padding: 20px
  section-gap: 24px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "#FFFFFF"
    borderWidth: 1px
    boxShadow: "0px 4px 8px rgba(0,0,0,0.1), 0px 1px 0px #E0E7FF"
    rounded: "{rounded.2xl}"
    padding: "{spacing.card-padding}"
  card-hero:
    backgroundColor: "{colors.accent}"
    textColor: "#FFFFFF"
    borderColor: "rgba(255,255,255,0.2)"
    borderWidth: 1px
    boxShadow: "4px 4px 10px rgba(0,0,0,0.25), inset 2px 2px 4px rgba(255,255,255,0.3)"
    rounded: "{rounded.3xl}"
    padding: "{spacing.xl}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-uppercase}"
    borderColor: "#FFCCFF"
    borderWidth: 1px
    boxShadow: "0px 4px 0px #990066, 0px 8px 10px rgba(0,0,0,0.2)"
    rounded: "{rounded.xl}"
    height: 64px
    paddingX: 20px
    paddingY: 16px
    pressedBackground: "darken(8%)"
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-uppercase}"
    borderColor: "rgba(255,255,255,0.6)"
    borderWidth: 1px
    boxShadow: "4px 4px 10px rgba(0,0,0,0.05)"
    rounded: "{rounded.2xl}"
    paddingX: 16px
    paddingY: 12px
  button-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.border}"
    typography: "{typography.label-uppercase-sm}"
    borderColor: "rgba(59,130,246,0.3)"
    borderWidth: 1px
    boxShadow: "0px 1px 2px rgba(0,0,0,0.06)"
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 4px
  button-icon-chrome:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    boxShadow: "inset 2px 2px 4px rgba(255,255,255,0.9), 2px 2px 4px rgba(0,0,0,0.15)"
    rounded: "{rounded.full}"
    size: 40px
  input-text:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "#FFFFFF"
    borderWidth: 2px
    boxShadow: "inset 2px 2px 4px rgba(0,0,0,0.08)"
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
    focusRingColor: "{colors.ring}"
  chip:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    border: none
    boxShadow: "inset 1px 1px 2px rgba(0,0,0,0.08)"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
  chip-active:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-uppercase-sm}"
    borderColor: "rgba(255,255,255,0.5)"
    borderWidth: 1px
    boxShadow: "2px 2px 0px rgba(0,0,0,0.2)"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
  badge-pill:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.label-uppercase-sm}"
    borderColor: "rgba(255,255,255,0.5)"
    borderWidth: 1px
    boxShadow: "2px 2px 0px rgba(0,0,0,0.2)"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
  badge-circle:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
    borderColor: "#FFFFFF"
    borderWidth: 2px
    boxShadow: "0px 1px 2px rgba(0,0,0,0.2)"
    rounded: "{rounded.full}"
    size: 16px
  avatar:
    backgroundColor: "transparent"
    borderColor: "#FFFFFF"
    borderWidth: 2px
    boxShadow: "2px 2px 4px rgba(0,0,0,0.2)"
    rounded: "{rounded.full}"
    size: 40px
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "#FFFFFF"
    borderWidth: 1px
    boxShadow: "0px 4px 6px rgba(0,0,0,0.05), 0px 1px 0px #E0E7FF"
    rounded: "{rounded.lg}"
    paddingX: 12px
    paddingY: 12px
    gap: 12px
  icon-tile-pastel:
    backgroundColor: "transparent"
    borderColor: "#FFFFFF"
    borderWidth: 1px
    boxShadow: "inset 2px 2px 4px rgba(255,255,255,0.6), 2px 2px 4px rgba(0,0,0,0.1)"
    rounded: "{rounded.md}"
    size: 48px
  progress-bar:
    backgroundColor: "{colors.surface-muted}"
    borderColor: "#FFFFFF"
    borderWidth: 2px
    boxShadow: "inset 2px 2px 6px rgba(0,0,0,0.1)"
    rounded: "{rounded.full}"
    height: 12px
  top-app-bar:
    backgroundColor: "{colors.surface-sky-top}"
    textColor: "{colors.on-surface}"
    borderColor: "rgba(255,255,255,0.5)"
    borderWidth: 2px
    boxShadow: "0px 1px 2px rgba(0,0,0,0.04)"
    rounded: 0px
    height: 96px
    paddingX: "{spacing.gutter}"
  tab-bar:
    backgroundColor: "{colors.surface-sky-bottom}"
    borderColor: "rgba(255,255,255,0.6)"
    borderWidth: 2px
    boxShadow: "0px -4px 10px rgba(0,0,0,0.05)"
    rounded: 0px
    height: 96px
    paddingX: 16px
  tab-item-active:
    backgroundColor: "{colors.accent}"
    textColor: "#FFFFFF"
    typography: "{typography.label-uppercase-sm}"
    borderColor: "#CCEEFF"
    borderWidth: 1px
    boxShadow: "0px 4px 6px rgba(0,0,0,0.2), inset 1px 1px 2px rgba(255,255,255,0.4)"
    rounded: "{rounded.xl}"
    size: 48px
  tab-item-inactive:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase-sm}"
    borderColor: "#FFFFFF"
    borderWidth: 1px
    boxShadow: "inset 2px 2px 4px rgba(0,0,0,0.1)"
    rounded: "{rounded.xl}"
    size: 40px
---

# Y2K Candy Chrome Mobile

## Overview

**Maximal, glossy, plastic, candy-saturated.** Every surface looks injection-molded — gradients on gradients, embossed inset highlights, hard cast shadows, and 1px white text-shadows that make labels read like vinyl stickers on a glossy toy. The aesthetic is unapologetically loud: hot magenta, electric cyan, and acid lime stacked next to a cool baby-blue sky background.

The personality is **late-90s/Y2K dashboard meets modern fintech skeuomorphism**. Confident, playful, slightly maximalist — designed to feel tactile and "pressable." Every interactive element invites you to push it; primary CTAs literally sit on a stack-shadow that compresses on press.

Density is moderate — generous gutters and chunky 16-24px corner radii prevent the saturation from feeling claustrophobic. Type carries authority: black-weight Space Grotesk headlines and tracked-out uppercase Nunito Sans labels lock the whole system into a graphic, sticker-pack rhythm.

## Colors

The palette runs three parallel tracks; **never let them bleed**:

- **Chrome / surface palette** — `{colors.surface}` (cool baby blue), `{colors.surface-alt}` (white cards), `{colors.surface-muted}` (lavender-tinted input fill), `{colors.surface-sky-top}`/`{colors.surface-sky-bottom}` (the sky-fade that anchors the top bar and tab bar), and `{colors.on-surface}` (near-black navy `#000033`). This is the "stage" — restrained, cool, lots of white.
- **Brand candy palette** — `{colors.primary}` magenta, `{colors.secondary}` lime, `{colors.accent}` cyan. These three are the loud actors. Use them on CTAs, hero gradients, active states, and category accents. **Never use a candy color as a screen background** — they're always contained inside a card, a button, or a chart fill.
- **Chart / categorical palette** — `{colors.chart-1}` through `{colors.chart-5}` extend the candy palette with violet `#9900FF` and orange `#FF9900`. Reserved for data viz, category dots, and per-row accent stripes.

Every candy fill is rendered as a **dual-stop gradient** from the base hex to a 20-30% darker sibling (e.g. `#FF00CC → #990066`) — a flat candy color is rare. The base hex in the YAML is the lighter top-stop; the bottom-stop is hand-darkened by the implementer.

`{colors.border}` is a saturated blue used as a hairline on chrome icon buttons; it does NOT appear on cards. `{colors.error}` is reserved for negative numerical values and unread-count dots.

## Typography

Two display families plus mono:
- **Space Grotesk** (`font-heading`) — geometric sans, used at weight **900 (black)** for every headline and large numeral. Hard, modern, slightly compressed.
- **Nunito Sans** (`font-sans`) — humanist sans, used at weights **600/700/900** for body, labels, and metadata. Rounded terminals soften the candy-pop loudness.
- **JetBrains Mono** (`font-mono`) — for masked card numerals only (`•••• 4829`). Wide letter-spacing (`0.15em`) emphasizes the digital-receipt feel.

**Weight strategy:** the system avoids anything below 600. Body copy is bold; labels are black. This creates a graphic, poster-like rhythm where contrast comes from size + tracking, not weight ramps.

**Tracking philosophy:** every short label is uppercase with `0.08–0.1em` tracking (`{typography.label-uppercase}`, `{typography.label-uppercase-sm}`). Headlines use slight negative tracking (`-0.01em` to `-0.02em`) to compress.

**Signature trick:** nearly every text element on the cool surface gets a `drop-shadow-[1px_1px_0px_white]` (or similar). This 1px hard white shadow is THE most identifying typographic move — it makes type look embossed/stickered onto the surface. Apply to: section eyebrows, headlines on light backgrounds, transaction labels, list-row titles. Skip on white-on-saturated text (those use `drop-shadow-[2px_2px_0px_rgba(0,0,0,0.3)]` instead, a hard dark shadow that does the inverse).

Role usage:
- `{typography.display-lg}` — hero balance numerals, primary screen titles inside hero cards.
- `{typography.display-md}` — top-app-bar screen titles.
- `{typography.headline-md}` — user-name headers, profile names.
- `{typography.numeral-card}` — stat numerals inside small candy cards.
- `{typography.label-uppercase}` — section eyebrows ("QUICK ACTIONS"), button labels, metadata kickers.
- `{typography.label-uppercase-sm}` — tab labels, chip labels, micro-stats ("+12%").
- `{typography.body-md}` — list-row primary text, paragraph copy.
- `{typography.body-sm}` — list-row metadata, timestamps.
- `{typography.caption}` — helper text under inputs.
- `{typography.mono-numeric}` — masked card numbers only.

## Spacing & Layout

Gutter is a generous **24px** (`{spacing.gutter}`); cards have **20px** internal padding (`{spacing.card-padding}`). Vertical section gap is **24px**. Horizontal stat-card grids use a tight **12px** gap so three cards fit comfortably across.

Density is **balanced** — never list-dense, never spa-airy. Every screen has at least one large hero/feature card pushing visual weight up top, then either a horizontal scroller or a vertical stack of list rows.

The top of every screen has a fixed **96px** chrome zone with a baby-blue → background sky gradient and a hairline white border at the bottom. The bottom of every screen has a **96px** tab bar with the inverse fade direction.

## Elevation & Depth

This is the load-bearing chapter of the aesthetic. There are **four elevation tiers** and they all coexist on a single screen:

1. **Embedded / inset** — inputs, progress-bar tracks, inactive tab tiles. `boxShadow: "inset 2px 2px 4px rgba(0,0,0,0.1)"`. Looks pressed-INTO the surface.
2. **Resting card** — standard cards and list rows. `boxShadow: "0px 4px 6px rgba(0,0,0,0.05), 0px 1px 0px #E0E7FF"`. A soft drop shadow plus a 1px lavender bottom-edge that fakes a printed-sticker shelf.
3. **Lifted candy button (signature)** — the primary CTA. `boxShadow: "0px 4px 0px {color-deep}, 0px 8px 10px rgba(0,0,0,0.2)"`. The first shadow is a HARD, no-blur stack of the same hue 30% darker — this is what creates the "candy stack" feel. On press: `active:translate-y-1` plus collapse to inset.
4. **Hero floating card** — large gradient hero blocks. `boxShadow: "4px 4px 10px rgba(0,0,0,0.25), inset 2px 2px 4px rgba(255,255,255,0.3)"`. A combo of a strong drop shadow AND an inset top-left highlight that fakes lighting from above-left.

**Inset highlights are mandatory on candy fills.** Any chunky button or hero card gets a top half overlay (`absolute top-0 left-0 right-0 h-1/2 bg-white/30 rounded-t-[same-radius]`) to fake a glossy shine. Without this, candy fills look flat and break the aesthetic.

## Shapes

Radii are deliberately chunky and round. The shape philosophy: **everything that can be rounded, is rounded**. Corners are forgiving and soft; sharp 90° angles never appear except on tiny dividers.

- `{rounded.sm}` (8px) — micro chips, "View All" pill buttons.
- `{rounded.md}` (14px) — small icon-tile containers (48px squares).
- `{rounded.lg}` (16px) — list rows, default cards.
- `{rounded.xl}` (20px) — large action buttons, tab-active tiles.
- `{rounded.2xl}` (24px) — hero stat cards, content cards.
- `{rounded.3xl}` (32px) — flagship hero card with the largest balance/numeral.
- `{rounded.full}` — avatars, pills, chips, progress tracks, chrome icon buttons, status dots.

## Components

### card

Default content surface. White fill, hairline white border (yes — even on white, the border catches the inset highlight), soft drop shadow with a 1px lavender bottom-edge.

```html
<div class="bg-white rounded-[24px] p-5 border border-white shadow-[0px_4px_8px_rgba(0,0,0,0.1),0px_1px_0px_#E0E7FF] relative overflow-hidden">
  <h3 class="font-sans text-[12px] font-black tracking-[0.08em] text-[#000033] uppercase flex items-center gap-2 drop-shadow-[1px_1px_0px_rgba(255,255,255,1)] mb-3">
    <span class="size-2 rounded-full bg-[#FF00CC]"></span>[Section title]
  </h3>
  <!-- card body -->
</div>
```

### card-hero

The flagship candy gradient card. Used once per screen for the hero numeral. Three nested layers: outer gradient frame (1rem padding to fake a thick bezel), inner inset highlight overlay, then content. Always a 3-stop diagonal gradient from a candy color through a mid tone to near-black or a deep sibling.

```html
<div class="relative overflow-hidden rounded-[32px] bg-gradient-to-br from-[#00CCFF] via-[#3B82F6] to-[#000033] p-1 shadow-[4px_4px_10px_rgba(0,0,0,0.25),inset_2px_2px_4px_rgba(255,255,255,0.3)]">
  <div class="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white/30 to-transparent rounded-t-[28px]"></div>
  <div class="relative rounded-[28px] bg-gradient-to-br from-[#3B82F6] to-[#000033] p-6 border border-white/20">
    <p class="text-[#CCFF00] font-sans font-black tracking-[0.1em] text-[12px] uppercase mb-1 drop-shadow-[1px_1px_0px_rgba(0,0,0,0.5)]">[Eyebrow]</p>
    <h1 class="font-heading text-[36px] font-black text-white tracking-[-0.02em] drop-shadow-[2px_2px_0px_rgba(0,0,0,0.3),-1px_-1px_0px_rgba(255,255,255,0.2)]">[Hero numeral]</h1>
    <div class="mt-4 flex items-center gap-2">
      <span class="px-3 py-1 bg-[#CCFF00] text-[#000033] text-[10px] font-black tracking-[0.1em] uppercase rounded-full shadow-[2px_2px_0px_rgba(0,0,0,0.2)] border border-white/50">[Delta]</span>
      <span class="text-white/80 text-[12px] font-semibold drop-shadow-md">[Comparator]</span>
    </div>
  </div>
</div>
```

### button-primary

The signature candy stack-button. Hard `0px 4px 0px [deeper-hue]` stack-shadow + a soft outer drop. White inset top-half overlay for gloss. On press: `active:translate-y-1` and shadow collapses to inset. Used inline as a 64px chunky tile, not a wide bar. ALWAYS inside a `flex flex-col items-center` with a label below.

```html
<button class="flex flex-col items-center gap-2">
  <div class="size-16 rounded-[20px] bg-gradient-to-b from-[#FF00CC] to-[#CC0099] shadow-[0px_4px_0px_#990066,0px_8px_10px_rgba(0,0,0,0.2)] border-t border-l border-[#FFCCFF] active:translate-y-1 active:shadow-[0px_0px_0px_#990066,inset_0px_2px_4px_rgba(0,0,0,0.2)] transition-all flex items-center justify-center relative overflow-hidden">
    <div class="absolute top-0 left-0 right-0 h-1/2 bg-white/30 rounded-t-[18px]"></div>
    <iconify-icon icon="solar:[icon-name]-bold" class="text-white drop-shadow-[1px_1px_0px_rgba(0,0,0,0.2)] z-10 size-8"></iconify-icon>
  </div>
  <span class="text-[12px] font-black tracking-[0.08em] uppercase text-[#505080] drop-shadow-[1px_1px_0px_white]">[Action]</span>
</button>
```

For tonal variants, swap the `from`/`to` and matching `shadow-[0px_4px_0px_]` and border colors using one of the candy hues. The stack-shadow color must always be ~30% darker than the bottom gradient stop.

### button-secondary

Glassy white pill, used for paired-button rows like Settings/Privacy. Semi-transparent white fill (`bg-white/40`) with backdrop-blur and a hairline white border.

```html
<button class="flex-1 py-3 px-4 bg-white/40 backdrop-blur-md rounded-[24px] border border-white/60 shadow-[4px_4px_10px_rgba(0,0,0,0.05)] flex items-center justify-center gap-2 active:scale-95 transition-all">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-[#FF00CC] size-5"></iconify-icon>
  <span class="text-[12px] font-black tracking-[0.08em] uppercase">[Label]</span>
</button>
```

### button-text

Mini "View All" pill — white fill, blue hairline border, blue label. Sits in the top-right of section headers.

```html
<button class="text-[#3B82F6] text-[10px] font-black uppercase tracking-[0.1em] bg-white px-2 py-1 rounded-md shadow-sm border border-[#3B82F6]/30 active:translate-y-px">[Label]</button>
```

### button-icon-chrome

The signature chrome icon button — a fully rounded chrome bezel, magenta icon, hard 2px blue border, dual inset+outer shadow. Used for top-bar utilities.

```html
<button class="relative size-10 rounded-full bg-gradient-to-br from-white to-[#E0E7FF] border-2 border-[#3B82F6] shadow-[inset_2px_2px_4px_rgba(255,255,255,0.9),2px_2px_4px_rgba(0,0,0,0.15)] flex items-center justify-center active:translate-y-0.5 active:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.1)]">
  <iconify-icon icon="solar:[icon-name]-bold" class="text-[#FF00CC] drop-shadow-[1px_1px_0px_rgba(0,0,0,0.1)] size-5"></iconify-icon>
</button>
```

### input-text

Inset lavender pill with thick white border. Looks pressed-into the surface. *Inferred — not present in source HTML; matches the inset language of other muted-fill primitives.*

```html
<input class="w-full bg-[#E0E7FF] text-[#000033] font-sans text-[14px] font-bold border-2 border-white rounded-[16px] px-4 py-3 shadow-[inset_2px_2px_4px_rgba(0,0,0,0.08)] focus:outline-none focus:ring-2 focus:ring-[#FF00CC]" placeholder="[Placeholder]" />
```

### chip / chip-active

Inactive chip is an inset lavender pill; active chip flips to acid lime with a hard 2px black-shifted shadow.

```html
<span class="px-3 py-1 bg-[#E0E7FF] text-[#505080] text-[10px] font-black tracking-[0.1em] uppercase rounded-full shadow-[inset_1px_1px_2px_rgba(0,0,0,0.08)]">[Label]</span>
<span class="px-3 py-1 bg-[#CCFF00] text-[#000033] text-[10px] font-black tracking-[0.1em] uppercase rounded-full shadow-[2px_2px_0px_rgba(0,0,0,0.2)] border border-white/50">[Active label]</span>
```

### badge-pill

Same shape as `chip-active`. Used for delta indicators (`+3.5%`) on hero cards. The hard `2px 2px 0px` no-blur black-shifted shadow is the giveaway.

### badge-circle

Tiny error/notification dot. Red fill, 2px white border, optional pulse animation.

```html
<span class="absolute -top-1 -right-1 size-4 bg-[#FF3333] rounded-full border-2 border-white shadow-sm animate-pulse"></span>
```

### avatar

Circular gradient ring (magenta→cyan) with a 0.5–1rem padding gap, then a 2-4px white inner border on the photo itself. Larger sizes (96px profile hero) use 4px white border.

```html
<div class="size-10 rounded-full bg-gradient-to-tr from-[#00CCFF] to-[#FF00CC] p-0.5 shadow-[2px_2px_4px_rgba(0,0,0,0.2)]">
  <img alt="[Alt]" src="[URL]" class="w-full h-full rounded-full border-2 border-white object-cover" />
</div>
```

### list-row

White card with a vertical 4px candy-gradient stripe pinned to the left edge. The stripe is the categorical accent and changes hue per row.

```html
<div class="bg-white rounded-[16px] p-3 flex items-center justify-between shadow-[0px_4px_6px_rgba(0,0,0,0.05),0px_1px_0px_#E0E7FF] border border-white relative overflow-hidden active:bg-[#F9FCFF]">
  <div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-[#FF00CC] to-[#9900FF]"></div>
  <div class="flex items-center gap-3">
    <div class="size-12 rounded-[14px] bg-gradient-to-br from-[#FFCCFF] to-[#FFE6F9] border border-[#FFB3E6] flex items-center justify-center shadow-inner">
      <iconify-icon icon="solar:[icon-name]-bold" class="text-[#FF00CC] drop-shadow-[1px_1px_0px_rgba(255,255,255,0.8)] size-6"></iconify-icon>
    </div>
    <div>
      <p class="font-sans text-[14px] font-bold text-[#000033] drop-shadow-[0.5px_0.5px_0px_rgba(255,255,255,1)]">[Primary]</p>
      <p class="text-[11px] text-[#505080] font-semibold">[Metadata]</p>
    </div>
  </div>
  <p class="font-heading font-black text-[#000033] drop-shadow-[0.5px_0.5px_0px_rgba(255,255,255,1)]">[Value]</p>
</div>
```

### icon-tile-pastel

The 48px square pastel-gradient tile that holds an iconified glyph inside list rows. Always a soft pastel-of-the-accent gradient (`from-[pastel] to-[lighter-pastel]`) with a tinted 1px border in the same hue family. Six recurring tile palettes: pink/magenta, cyan/blue, lime/green, peach/orange, lavender/violet, neutral grey.

### progress-bar

Inset lavender track, candy-gradient fill with a top white inset highlight and a 2px white border on the filled segment. Track has 2px white outer border. *Used in the source as bar-chart columns; same recipe applies for a horizontal progress bar.*

```html
<div class="w-full bg-[#E0E7FF] rounded-full h-3 relative overflow-hidden shadow-[inset_2px_2px_6px_rgba(0,0,0,0.1)] border-2 border-white">
  <div class="absolute top-0 bottom-0 left-0 w-[75%] bg-gradient-to-r from-[#FF00CC] to-[#FF66DD] rounded-full shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4)] border border-white/60"></div>
</div>
```

### top-app-bar

Sky-fade gradient (baby-blue → background) with a hairline white-50% bottom border and a soft drop shadow. Houses an avatar+greeting block on the left, a chrome icon button on the right.

```html
<header class="pt-8 pb-4 px-6 bg-gradient-to-b from-[#B3D9FF] to-[#F0F8FF] border-b-2 border-white/50 shadow-sm flex justify-between items-center sticky top-0 z-10">
  <!-- avatar + welcome block -->
  <!-- button-icon-chrome -->
</header>
```

### tab-bar / tab-item-active / tab-item-inactive

Fixed 96px footer with the inverse sky-fade. Active tab is a -2px lifted candy-gradient tile (cyan or magenta) at 48px; inactive tabs are 40px inset lavender tiles. Active label uses the brand color and gets a white drop-shadow.

```html
<nav class="fixed bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-[#DBEAFE] to-[#F0F8FF] border-t-2 border-white/60 shadow-[0px_-4px_10px_rgba(0,0,0,0.05)] px-4 flex justify-between items-center pb-2 z-50">
  <button class="flex-1 flex flex-col items-center gap-1">
    <div class="size-12 rounded-[20px] bg-gradient-to-br from-[#00CCFF] to-[#0066CC] flex items-center justify-center shadow-[0px_4px_6px_rgba(0,0,0,0.2),inset_1px_1px_2px_rgba(255,255,255,0.4)] border border-[#CCEEFF] -translate-y-2">
      <iconify-icon icon="solar:[icon-name]-bold" class="text-white drop-shadow-md size-6"></iconify-icon>
    </div>
    <span class="text-[10px] font-black tracking-[0.1em] uppercase text-[#0066CC] drop-shadow-[0.5px_0.5px_0px_white]">[Active]</span>
  </button>
  <button class="flex-1 flex flex-col items-center gap-1 opacity-70">
    <div class="size-10 rounded-[20px] bg-[#E0E7FF] flex items-center justify-center shadow-[inset_2px_2px_4px_rgba(0,0,0,0.1)] border border-white">
      <iconify-icon icon="solar:[icon-name]-bold" class="text-[#505080] size-6"></iconify-icon>
    </div>
    <span class="text-[10px] font-black tracking-[0.1em] uppercase text-[#505080]">[Tab]</span>
  </button>
  <!-- ... -->
</nav>
```

### Composition recipes (Tier 3 — prose, not YAML)

- **Section eyebrow with dot**: render `{typography.label-uppercase}` in `{colors.on-surface}` with a `drop-shadow-[1px_1px_0px_white]`, prefixed by a 8px `rounded-full` candy-color dot. Pair with a right-aligned `button-text` "View All" pill on the same row.
- **Stat tile (3-up grid)**: a small variant of `card-hero` at `rounded-[24px]`, single column candy gradient, ~80px tall, with a label in white-80 text on top, a `{typography.numeral-card}` numeral below, and a tiny delta row (`{typography.label-uppercase-sm}` + arrow icon) at the bottom.
- **Section title with category dot**: same as section eyebrow but at `{typography.headline-md}` weight inside cards.

## Iconography

- **Set**: `solar` (bold variant) is the workhorse. Confident, friendly, fully-filled glyphs with rounded terminals — the visual weight pairs well with the candy fills.
- Occasional use of `mdi` (Material Design Icons) is acceptable for brand-mark glyphs (contactless payment chip, etc.) where solar lacks a clear equivalent.
- **Variant convention**: `solar:[name]-bold` everywhere. Line variants are not used in this aesthetic — the bold filled forms match the chunky plastic vibe.
- **Default size**: 24px (`size-6`) for inline list-row icons; 20px (`size-5`) inside small chrome buttons; 32px (`size-8`) inside primary candy CTA tiles.
- **Treatment**: every icon gets a `drop-shadow-[1px_1px_0px_rgba(255,255,255,0.8)]` on light backgrounds or `drop-shadow-[1px_1px_0px_rgba(0,0,0,0.2)]` on saturated fills — same embossing language as type.

## Illustration & Imagery

**Note**: only a single profile-photo `<img>` appears in source HTML (no decorative illustrations). Photographic guidance below is extracted directly from the source; illustration guidance is *inferred* from the system's color, shape, and shadow language — treat the illustration sub-fields as a starting point.

- **Style / Technique**: For the rare illustration this aesthetic would tolerate, use **flat 2D vector with chunky white-or-pastel outlines and a single inset highlight** to echo the gloss-button language. Subjects rendered in the candy palette only — magenta, lime, cyan, violet, orange — never realistic skin/wood/sky tones. Alternative acceptable techniques: glossy-3D-icon (Figma-style isometric with strong top-light), or candy-Y2K vector clipart with starburst/sparkle motifs.
- **Palette**: pull strictly from `{colors.chart-1}` through `{colors.chart-5}` plus white. Maximum 3–4 colors per illustration. Backgrounds inside an illustration container are usually a soft pastel (`#FFCCFF`, `#CCF2FF`, `#F2FFCC`, `#FFE6CC`, `#E6CCFF`) — pull from the existing icon-tile pastel set.
- **Edge treatment**: 2px white outer outline OR no outline; never a dark stroke. Internal lines are a 1.5px slightly-darker shade of the fill.
- **Shading & light**: a single white inset highlight on the top half of every form (matching the button gloss). No soft gradient shading, no airbrush. Hard cel-shading style.
- **Composition & framing**: subject centered, 70-80% of canvas, generous pastel padding around. Optional Y2K decoration sparkles, four-point stars, or concentric ring motifs in a contrasting candy color.
- **Background within the illustration**: flat solid pastel from the icon-tile palette, OR a soft 2-stop pastel gradient. Never photographic, never transparent.
- **Container styling**: square or 4:3 frame at `{rounded.2xl}` (24px) with a 1px white border, no padding inside the container around the image, white card background showing through. Matches `card` recipe.
- **CSS treatment on `<img>`**: `object-cover`, no blend modes, no filters, full opacity.
- **Box-shadow on the image / frame**: matches `card` — `0px 4px 8px rgba(0,0,0,0.1), 0px 1px 0px #E0E7FF`. The image itself does NOT carry an additional shadow.
- **Aspect ratio rule**: prefer 1:1 (square). Fixed-ratio frames with `object-cover` are correct; do not preserve arbitrary source ratios.
- **Anti-references**: NOT photographic, NOT 3D claymation, NOT watercolor, NOT hand-drawn-sketchy, NOT muted/desaturated, NOT minimalist line art, NOT pastel-only (the candy-saturated colors must remain dominant), NOT realistic.
- **Style recipe prompt**: *Flat 2D vector illustration of [SUBJECT] in a Y2K candy-pop style. Limited palette of hot magenta `#FF00CC`, electric cyan `#00CCFF`, acid lime `#CCFF00`, plus violet `#9900FF` and orange `#FF9900` — maximum 4 colors. Forms have crisp 2px white outer outlines and a single white inset highlight on the top half of each shape, faking a glossy plastic surface. Optional Y2K decorative motifs: four-point sparkles, concentric rings, small starbursts, all in a contrasting candy color. Soft pastel solid background (e.g. light pink, mint, sky-blue). Subject centered, 70-80% of canvas. NOT photographic, NOT 3D, NOT muted, NOT line art, NOT watercolor.*

**Photographic profile imagery (extracted from source):** when a real photo is required (avatars, profile heroes), present it inside the gradient-ring avatar treatment — a magenta→cyan circular gradient ring with 2-4px padding, then a 2-4px white inner border on the photo itself, `object-cover`, full opacity, no filter. The gradient ring is NOT optional — it's the only correct way to frame a photo in this aesthetic.

## Do's and Don'ts

### Do

- Use a candy-gradient stack-button (`0px 4px 0px [deep-sibling]` shadow) for every primary CTA.
- Apply a 1px white text-shadow to every label that sits on the cool-blue surface.
- Add an inset top-half white-30% overlay to every chunky candy fill (buttons, hero cards, stat cards) to fake gloss.
- Pair Space Grotesk black headlines with Nunito Sans heavy/black uppercase tracked labels.
- Use the chrome icon button (white→lavender gradient, blue 2px border, dual shadow) for top-bar utilities.
- Frame photos with the magenta→cyan gradient ring + white inner border.
- Use one (and only one) hero card per screen; everything else is supporting.
- Leave generous 24px gutters — the saturation needs whitespace to breathe.

### Don't

- Don't use a candy color (magenta, lime, cyan) as a screen background — the candy palette only fills cards/buttons.
- Don't use type below weight 600. There is no "regular weight" in this system.
- Don't use a dark hairline border. Borders are white, blue (`#3B82F6` chrome only), or the same hue as their fill.
- Don't drop the 1px white text-shadow on labels — it's the most identifying typographic move.
- Don't render flat candy fills. Every candy color is a 2-3 stop gradient with an inset highlight.
- Don't mix solar-line icons with solar-bold; the bold filled forms are the only correct variant.
- Don't render illustrations in muted/realistic tones — they must use the candy palette.
- Don't omit the bottom-edge `0px 1px 0px #E0E7FF` lavender shelf-shadow on white cards.
- Don't let chart colors bleed into UI chrome roles, or chrome surface-muted into illustration palettes.
- Don't stack more than two candy colors adjacent without a white or pastel buffer.