Playful Cream Sticker DESIGN.md

---
version: 1
name: Playful Cream Sticker Mobile
colors:
  primary: "#F15BB5"
  on-primary: "#FFFFFF"
  secondary: "#00BBF9"
  on-secondary: "#FFFFFF"
  accent: "#FEE440"
  on-accent: "#3D3438"
  surface: "#FFFCF5"
  surface-alt: "#FFFFFF"
  surface-muted: "#FCEFF6"
  on-surface: "#3D3438"
  on-surface-variant: "#8A8186"
  border: "#E8DFD5"
  success: "#4ADE80"
  error: "#FF5C5C"
  illus-pink: "#F15BB5"
  illus-sky: "#00BBF9"
  illus-yellow: "#FEE440"
  illus-violet: "#9B5DE5"
  illus-mint: "#00F5D4"
typography:
  display-lg:
    fontFamily: Rubik
    fontSize: 36px
    fontWeight: 800
    lineHeight: 40px
    letterSpacing: -0.02em
  display-md:
    fontFamily: Rubik
    fontSize: 30px
    fontWeight: 800
    lineHeight: 34px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Rubik
    fontSize: 24px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Rubik
    fontSize: 20px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Rubik
    fontSize: 18px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: 0em
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: 0em
  body-md:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: 0em
  label-md:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: 0em
  label-sm:
    fontFamily: Nunito Sans
    fontSize: 11px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0em
  label-uppercase:
    fontFamily: Nunito Sans
    fontSize: 11px
    fontWeight: 800
    lineHeight: 14px
    letterSpacing: 0.08em
  numeral-lg:
    fontFamily: Rubik
    fontSize: 26px
    fontWeight: 900
    lineHeight: 30px
    letterSpacing: -0.02em
  tab-label:
    fontFamily: Nunito Sans
    fontSize: 10px
    fontWeight: 700
    lineHeight: 12px
    letterSpacing: 0.02em
rounded:
  sm: 12px
  md: 20px
  lg: 24px
  xl: 32px
  xxl: 40px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
  gutter: 24px
  card-padding: 20px
  section-gap: 24px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: 2px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    boxShadow: none
    rounded: "{rounded.xxl}"
    padding: "{spacing.card-padding}"
  card-elevated:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    boxShadow: "4px 4px 0px 0px #E8DFD5"
    rounded: "{rounded.xxl}"
    padding: "{spacing.card-padding}"
  card-tonal:
    backgroundColor: "{colors.surface-muted}"
    borderColor: "{colors.primary}"
    borderWidth: 2px
    boxShadow: none
    rounded: "{rounded.xxl}"
    padding: "{spacing.card-padding}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.md}"
    height: 56px
    paddingX: 24px
    border: none
    boxShadow: "0 8px 20px -5px rgba(241,91,181,0.25)"
    pressedBackground: "darken(8%)"
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.headline-md}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    boxShadow: none
    rounded: "{rounded.md}"
    height: 56px
    paddingX: 24px
  button-cta-dark:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.xl}"
    height: 64px
    paddingX: 24px
    border: none
    boxShadow: "0px 8px 20px -5px rgba(0,0,0,0.2)"
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    border: none
    boxShadow: none
    paddingX: 8px
    paddingY: 4px
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    borderColor: "{colors.primary}"
    borderWidth: 3px
    boxShadow: "4px 4px 0px 0px rgba(241,91,181,0.1)"
    rounded: "{rounded.lg}"
    height: 64px
    paddingX: 24px
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    border: none
    boxShadow: none
    rounded: "{rounded.full}"
    paddingX: 12px
    paddingY: 4px
  badge-pill:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.label-sm}"
    border: none
    boxShadow: "0 4px 8px rgba(0,0,0,0.08)"
    rounded: "{rounded.sm}"
    paddingX: 12px
    paddingY: 6px
  badge-circle:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.surface-alt}"
    border: none
    boxShadow: none
    rounded: "{rounded.full}"
    size: 10px
  avatar:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.primary}"
    borderWidth: 4px
    boxShadow: "0 4px 12px rgba(0,0,0,0.08)"
    rounded: "{rounded.full}"
    size: 80px
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    boxShadow: "2px 2px 0px 0px rgba(0,0,0,0.05)"
    rounded: "{rounded.md}"
    paddingX: 12px
    paddingY: 12px
    gap: 12px
  top-app-bar:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.headline-sm}"
    border: none
    boxShadow: none
    height: 56px
    paddingX: "{spacing.gutter}"
  tab-bar:
    backgroundColor: "{colors.surface-alt}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 -10px 40px -10px rgba(0,0,0,0.1)"
    rounded: "{rounded.xxl}"
    height: 88px
    paddingX: "{spacing.gutter}"
  tab-item-active:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    border: none
    boxShadow: none
    rounded: "{rounded.md}"
    size: 48px
  tab-item-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    border: none
    boxShadow: none
    rounded: "{rounded.md}"
    size: 48px
  fab-center:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    borderColor: "{colors.surface-alt}"
    borderWidth: 4px
    boxShadow: "0 8px 24px rgba(0,0,0,0.15)"
    rounded: "{rounded.full}"
    size: 64px
  icon-button:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border}"
    borderWidth: 2px
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
    rounded: "{rounded.md}"
    size: 48px
---

# Playful Cream Sticker Mobile

## Overview

**Hand-crafted, warmly playful, sticker-book energy.** A cream-paper canvas hosts confetti-bright UI elements that feel like they were peeled off a sheet of vinyl stickers and pressed onto the page — slightly tilted, generously rounded, and outlined in a soft warm border. The aesthetic is cheerful without being childish: it pairs a saturated tri-color palette (hot-pink, sky-blue, sunshine-yellow) with a chunky display sans for headings and a friendly humanist sans for body, then layers little decorations (paw motifs, mini badges, rotated stickers reading "Yay!") that give every screen a scrapbook charm.

The mood is approachable, optimistic, and tactile. Surfaces feel like cardstock — flat, bordered, occasionally with a hard offset shadow that mimics the look of a sticker lifted slightly off the page. Soft pastel ambient blurs hover behind everything as gentle atmospheric color, never competing with foreground content.

## Colors

The system runs on a **cream surface** (`{colors.surface}` `#FFFCF5`) — never pure white at the page level. Cards and inputs sit on top in `{colors.surface-alt}` (`#FFFFFF`) so they read as crisp paper laid on cream.

- `{colors.primary}` — saturated hot-pink, the loudest brand voice. Used for primary CTAs, active tab tint, accent typography highlights, and one-off emphasis (a colored span inside a heading).
- `{colors.secondary}` — bright sky-blue. Used as a peer to primary for categorical contrast — paired headers/cards where two parallel things need to be distinguishable at a glance.
- `{colors.accent}` — sunshine-yellow. Used sparingly for the "celebratory" beat: floating action button, sticker-style callouts ("Yay!", "GOOD BOY!"), the tiny notification dot.
- `{colors.surface-muted}` — `#FCEFF6`, a barely-pink tint, used as the soft tonal background for active tab pills and primary-card variants.
- `{colors.border}` — warm cream-brown `#E8DFD5`, the workhorse hairline used on every card, button, and input. This warm border is a load-bearing aesthetic move: never use a cool gray here.
- `{colors.on-surface}` — soft near-black `#3D3438`, never `#000000`. The page text color leans warm to live happily on cream.
- `{colors.on-surface-variant}` — muted mauve-gray `#8A8186` for secondary copy and metadata.

**Tonal-fill recipe**: For sectioned tinted cards (e.g. low-emphasis category cards), render with `bg-{primary}/10` (or `/5`) background and `border-{primary}/20` outline. The same pattern works with `secondary` and `accent`. Never use a primary/secondary/accent at full saturation as a card background — saturation is reserved for CTAs, active states, and stickers.

**Palette boundaries**: `illus-*` colors are inherent to the chrome palette here — the same hot-pink/sky-blue/yellow live both in UI accents and in any spot illustration. Keep illustration backgrounds either transparent or one of the surface colors; never pure white if it sits inside a cream-surface screen.

## Typography

Two faces, each doing distinct work:

- **Rubik** (Heading face) — geometric sans with a slightly rounded, friendly cut. Used for every display, headline, and numeral role. Weights skew bold-to-extrabold (700–900). Tracked tight (`-0.01em` to `-0.02em`) on display sizes for a chunky, confident feel.
- **Nunito Sans** (Body face) — humanist sans with a warm, soft skeleton. Used for body, labels, and tab labels. Default weight is 600–700 — body copy is **never** Regular 400 in this aesthetic; the system reads as confident and chunky throughout.

Token roles:
- `{typography.display-lg}` and `{typography.display-md}` — hero greetings and detail-screen primary names. Often combine two colors in one line (e.g. `text-foreground` + `<span class="text-primary">`).
- `{typography.headline-lg}` / `{typography.headline-md}` — section anchors at the top of every content block, paired with a small leading icon.
- `{typography.headline-sm}` — card titles inside list rows and tiles.
- `{typography.numeral-lg}` — chunky data numerals (stat tiles, time-of-day cards). Weight 900, tight tracking — they're meant to look hand-stamped.
- `{typography.label-uppercase}` — eyebrows for stat tiles ("AGE", "WEIGHT") with `+0.08em` tracking. The tracked-out caps are a load-bearing visual signal that this is metadata.
- `{typography.body-md}` — workhorse body. Weight 600 minimum.
- `{typography.tab-label}` — 10px bold caps on the bottom navigation.

**Weight rule**: Bold (700) is the default for nearly all chrome text. Extrabold (800) for display headings. Black (900) reserved for stat numerals and stickered shouty bits ("GOOD BOY!"). Regular weights are functionally absent.

## Spacing & Layout

The system breathes generously. Side gutter is `{spacing.gutter}` (24px), card internal padding is `{spacing.card-padding}` (20px), and vertical rhythm between sections sits at `{spacing.section-gap}` (24px) with occasional 32–40px breaks for top-of-screen breathing room.

Density is **balanced-leaning-airy**: enough whitespace that elements feel like they're floating on the cream paper, not packed against each other. Cards never abut — there is always at least `{spacing.md}` between adjacent surfaces.

## Elevation & Depth

Three explicit elevation tiers, all soft:

1. **Flat with hairline** — most cards: `border-2 border-{border}` over `surface-alt`, no shadow. The warm border IS the elevation.
2. **Hard-offset sticker shadow** — a signature treatment: `shadow-[4px_4px_0px_0px_var(--color-border)]` or `shadow-[2px_2px_0px_0px_rgba(0,0,0,0.05)]`. This is the "sticker peeled off the sheet" effect; reserved for hero cards, important CTAs, and inputs.
3. **Soft drop glow** — colored shadows on the primary CTA (`shadow-lg shadow-primary/20`) and the FAB. Used sparingly to make the loudest action feel lifted.

Behind everything, a fixed background layer of three large blurred color blobs (`bg-{accent}/20 blur-3xl`, etc.) provides ambient warmth. These never carry information — they're atmospheric.

**Rule**: never use a generic gray Material-style elevation shadow. Either no shadow, hard offset, or colored-tint glow.

## Shapes

Roundness is the dominant gesture. The base radius is generous — `{rounded.md}` (20px) is the *minimum* for most chrome; cards prefer `{rounded.xxl}` (40px). True pills (`{rounded.full}`) are used for chips, badges, avatars, and the FAB.

Mixed-radius asymmetry is a recurring signature: an input might use `rounded-[1.5rem] rounded-tr-[2rem]` to give one corner extra puff, signaling "hand-cut". Apply this sparingly — one or two corners maximum per element, and only on inputs and form fields where the playfulness reads as inviting.

The bottom tab bar uses a top-only large radius (`rounded-t-[2.5rem]`), making the chrome feel like it's lifting up off the screen.

**Subtle rotation as decoration**: cards, stickers, and avatars are often given a tiny `rotate-[-2deg]` or `rotate-[2deg]` to feel hand-placed. Use it on at most ~30% of elements per screen — never on body text, never on the primary action button, and always reset to `rotate-0` on hover.

## Components

### card

Cream-paper card on `surface-alt`, warm hairline border, generous radius, no shadow by default.

```html
<div class="bg-white rounded-[2rem] p-5 border-2 border-[#E8DFD5]">
  <h3 class="text-lg font-bold font-[Rubik] text-[#3D3438]">[Card title]</h3>
  <p class="text-sm font-semibold text-[#8A8186] mt-1">[Body copy]</p>
</div>
```

### card-elevated

Same as `card` but with the signature hard-offset border-color shadow — used for the hero card on each section.

```html
<div class="bg-white rounded-[2.5rem] p-5 border-2 border-[#E8DFD5] shadow-[4px_4px_0px_0px_#E8DFD5]">
  <h3 class="text-lg font-bold font-[Rubik]">[Card title]</h3>
</div>
```

### card-tonal (recipe, not its own token)

For category-tinted cards, render `card` with `bg-{tone}/10` background and `border-{tone}/20` outline. Example with primary:

```html
<div class="bg-[#F15BB5]/10 p-4 rounded-[2rem] border-2 border-[#F15BB5]/20 flex flex-col items-center text-center">
  <span class="text-xs font-bold text-[#F15BB5]/70 uppercase tracking-wider">[Eyebrow]</span>
  <p class="text-2xl font-black text-[#F15BB5] font-[Rubik] mt-1">[Value]</p>
</div>
```

### button-primary

Hot-pink, chunky, with colored drop-shadow for lift.

```html
<button class="h-14 px-6 bg-[#F15BB5] text-white rounded-2xl font-bold font-[Rubik] flex items-center justify-center gap-2 shadow-lg shadow-[#F15BB5]/20 active:scale-95 transition-all">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  [Action label]
</button>
```

### button-secondary

White on cream with the warm hairline.

```html
<button class="h-14 px-6 bg-white text-[#8A8186] border-2 border-[#E8DFD5] rounded-2xl font-bold font-[Rubik] flex items-center justify-center gap-2 hover:bg-[#FCEFF6] transition-all">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  [Action label]
</button>
```

### button-cta-dark (signature CTA)

For the screen-bottom commit-action — dark, oversized, with subtle bottom border line for a 3D printed-button feel.

```html
<button class="w-full py-4 bg-[#3D3438] text-[#FFFCF5] rounded-[2rem] text-xl font-black font-[Rubik] tracking-wide shadow-[0px_8px_20px_-5px_rgba(0,0,0,0.2)] border-b-4 border-black/40 active:scale-95 transition-all">
  <span class="flex items-center justify-center gap-3">
    [Action label]
    <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  </span>
</button>
```

### input-text

Thick colored hairline border in the form's accent color, with an offset color-tinted shadow and subtle rotation.

```html
<div class="relative">
  <input type="text" placeholder="[Placeholder]"
    class="w-full h-16 px-6 rounded-[1.5rem] rounded-tr-[2rem] bg-white border-[3px] border-[#F15BB5]/30 focus:border-[#F15BB5] text-lg font-bold text-[#3D3438] placeholder:text-[#8A8186]/50 outline-none shadow-[4px_4px_0px_0px_rgba(241,91,181,0.1)] -rotate-1 focus:rotate-0 transition-all" />
  <div class="absolute right-4 top-1/2 -translate-y-1/2 bg-[#F15BB5]/10 p-2 rounded-xl">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-5 text-[#F15BB5]"></iconify-icon>
  </div>
</div>
```

### chip / chip-active

Pill-shaped, with `chip` showing a subtle border and `chip-active` rendering as solid primary.

```html
<span class="inline-flex items-center px-3 py-1 bg-white text-[#8A8186] text-xs font-bold rounded-full border border-[#E8DFD5] shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
  [Chip label]
</span>
<span class="inline-flex items-center px-3 py-1 bg-[#F15BB5] text-white text-xs font-bold rounded-full">
  [Active chip]
</span>
```

### badge-pill (sticker variant)

Yellow rotated callout — the signature "sticker" badge that sits on the corner of cards.

```html
<div class="bg-[#FEE440] text-[#3D3438] text-xs font-bold px-3 py-2 rotate-12 shadow-md rounded-lg border-2 border-white">
  [Sticker label]
</div>
```

### avatar

Circular, with a thick colored ring and slight rotation. Different ring colors carry categorical meaning.

```html
<div class="relative size-20 p-1 bg-white rounded-full border-4 border-[#F15BB5] shadow-lg rotate-[-2deg] hover:rotate-0 transition-transform">
  <img alt="[Subject]" src="[image-url]" class="w-full h-full object-cover rounded-full" />
  <div class="absolute -bottom-1 -right-1 bg-[#F15BB5] text-white text-xs font-bold px-2 py-0.5 rounded-full border-2 border-white">
    [Caption]
  </div>
</div>
```

### list-row

White card with the hard-offset shadow, holding a leading control + body text.

```html
<div class="flex items-center gap-3 bg-white p-3 rounded-2xl border-2 border-[#E8DFD5] shadow-[2px_2px_0px_0px_rgba(0,0,0,0.05)]">
  <div class="size-6 rounded-lg border-2 border-[#8A8186]/30"></div>
  <span class="font-bold text-[#3D3438]">[Row label]</span>
</div>
```

### top-app-bar

Transparent — the page background carries through. Left/right slots hold square chunky icon buttons; the center holds either a tracked-out uppercase label or a 2-tone display heading.

```html
<header class="px-6 pt-12 pb-4 flex items-center justify-between">
  <button class="size-12 bg-white rounded-2xl border-2 border-[#E8DFD5] shadow-sm flex items-center justify-center text-[#8A8186]">
    <iconify-icon icon="solar:arrow-left-linear" class="size-6"></iconify-icon>
  </button>
  <h2 class="text-lg font-bold font-[Rubik] text-[#8A8186] tracking-wide">[SCREEN TITLE]</h2>
  <button class="size-12 bg-[#FEE440] text-[#3D3438] rounded-2xl border-2 border-white shadow-md flex items-center justify-center">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  </button>
</header>
```

### tab-bar with floating fab-center

The tab bar has a large top radius and a single oversized accent FAB punching above the bar's top edge.

```html
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-[#E8DFD5] px-6 pt-3 pb-8 rounded-t-[2.5rem] shadow-[0_-10px_40px_-10px_rgba(0,0,0,0.1)]">
  <div class="flex items-center justify-between max-w-lg mx-auto">
    <button class="flex-1 flex flex-col items-center gap-1 text-[#F15BB5]">
      <div class="size-12 rounded-2xl bg-[#FCEFF6] flex items-center justify-center">
        <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      </div>
      <span class="text-[10px] font-bold">[Tab]</span>
    </button>
    <button class="flex-1 flex flex-col items-center gap-1 text-[#8A8186]">
      <div class="size-12 rounded-2xl flex items-center justify-center">
        <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
      </div>
      <span class="text-[10px] font-bold">[Tab]</span>
    </button>
    <div class="flex-1 flex justify-center -mt-12">
      <a href="#" class="size-16 bg-[#FEE440] text-[#3D3438] rounded-full shadow-lg border-4 border-white flex items-center justify-center hover:scale-110 hover:rotate-12 transition-all">
        <iconify-icon icon="solar:[icon-name]-bold" class="size-8"></iconify-icon>
      </a>
    </div>
    <!-- two more inactive tabs -->
  </div>
</nav>
```

### Composition recipes (NOT separate components)

- **Stat tile** = `card-tonal` + `{typography.label-uppercase}` eyebrow + `{typography.numeral-lg}` value, square aspect, slight rotation. Use a different tone (`primary`, `secondary`, `accent`) per adjacent tile to create a confetti-row.
- **Timeline row** = vertical bar (`w-1 bg-{border} rounded-full`) running through column 1, with a circular `border-4 border-{tone}` icon node on the bar and a `card`-style content card to its right. Use to chain ordered events.
- **Checklist item** = `list-row` with leading round/square checkbox; checked state strikes the label with `line-through decoration-2 decoration-{primary}/50` and reduces opacity to 60%.
- **Sticker callout** = `badge-pill` rendered absolute-positioned on the top-right corner of a card with `-top-3 -right-3 rotate-12` for the "peeled sticker" effect.

## Iconography

**Set**: Solar (Iconify), `bold` variant. The Solar `bold` family has the chunky, slightly-friendly silhouette that pairs perfectly with Rubik's geometry. Active and inactive both use `bold` — inactive is differentiated by color (`{colors.on-surface-variant}`) and lack of pill background, not by switching to `linear`.

For occasional decorative motifs (paw prints, hearts, stars, sparkles), use the same Solar bold set so the iconography stays cohesive. Cute multi-color emoji-style icons (e.g. `noto:cat`, `noto:dog`) are acceptable ONLY inside species/category selectors where the colored emoji read as illustration, never in chrome.

Default size is 24px (`size-6`). Section-header icons are 24px; navigation icons 24px; small inline icons 16–20px.

Icons frequently sit in tinted square containers (`size-12 bg-{tone}/10 rounded-2xl flex items-center justify-center`) to read as their own little stickers.

## Illustration & Imagery

The source uses photographic `<img>` content — close-up portraits of subjects against simple, saturated, single-color backgrounds.

- **Style / Technique**: editorial close-up photography with a single dominant subject filling 60–80% of the frame, set against a flat saturated solid-color backdrop. Natural light, lightly desaturated mid-tones, true-to-life skin/fur tones. NOT studio-glossy, NOT heavily retouched; the photos feel candid-but-considered, like portrait stickers.
- **Palette**: backdrops pull from the same illustration palette as the UI — saturated yellow, mint-green, sky-blue, hot-pink, soft cream. Pick one solid backdrop color per image; never gradients, never multi-color scenes. Inside the photo itself the subject can carry any natural color, but the relationship between subject and backdrop should feel high-contrast.
- **Edge treatment**: no outlines on the subject; the photo is rendered as-is. The "sticker" feeling comes from the *frame*, not from cutting around the subject.
- **Shading & light**: natural soft daylight on the subject; backdrops are flat and unshaded — no gradient, no vignette. The contrast between a softly-lit subject and a flat saturated background is the signature.
- **Composition & framing**: subject centered or slightly off-center, often head-and-shoulders or three-quarter framing for portraits. Generous backdrop on at least two sides; subject may bleed off the bottom edge but not the top. Eye-line of the subject ideally near the upper third.
- **Background within the illustration**: a single saturated solid color from the illus-* palette. No textures, no patterns.
- **Container styling**: framed inside a circular crop (`rounded-full`) for avatars and profile heroes, with a thick white inner ring (`p-1 bg-white`), then a 4px colored outer ring (`border-4 border-{primary|secondary|accent}`). For non-circular use cases, frame inside `{rounded.xxl}` (40px) with a 2px `{colors.border}` hairline. Profile-hero avatars stack two faint rotated outer rings (`scale-105 rotate-[-3deg]` and `scale-110 rotate-[4deg]`) at low opacity behind the photo for a doodle-emphasis aura.
- **CSS treatment on `<img>`**: always `object-cover` and `rounded-full` (or matching frame radius). NO `mix-blend-mode`, NO `opacity` reduction, NO CSS `filter`. The image displays at full saturation.
- **Box-shadow**: avatars get `shadow-lg` (a soft natural drop) — no colored tint, no hard offset. Photo cards inside hero compositions may use `shadow-xl`. Photos inside list rows sit flat with no shadow.
- **Aspect ratio rule**: always preserve the original aspect by cropping to a circle for portraits and to square or 4:5 for body shots. Never letterbox.
- **Anti-references**: NOT 3D-rendered, NOT claymation, NOT vector illustration, NOT line art, NOT pastel washed-out, NOT moody/dark, NOT photorealistic CGI, NOT collage-cutout against textured backgrounds.
- **Style recipe prompt**:

  > *Editorial portrait photograph of [SUBJECT], head-and-shoulders framing, natural soft daylight on the subject, photographed against a single flat saturated backdrop in hot-pink, sky-blue, sunshine-yellow, mint, or cream. The backdrop is one solid unshaded color filling the frame; no gradient, no texture, no scenery. The subject is rendered with true-to-life color and gentle natural shading. Clean, candid, slightly playful — like a portrait sticker on a scrapbook page. Centered or slightly off-center composition. NOT 3D, NOT vector, NOT pastel, NOT moody.*

For any decorative spot graphic that is NOT a photograph (sparkles, paws, hearts, stars), prefer a Solar-bold iconify glyph at large size (`size-8` to `size-32`) with low-opacity tint (`text-{tone}/10` to `/50`) tucked behind a card's content as a watermark. Never mix vector illustrations and photographs in the same component.

## Hierarchy & Emphasis

- **Size + weight** carry primary hierarchy: display headlines are 30–36px Extrabold; body is 14–16px Bold/Semibold. The weight delta between heading and body is large.
- **Saturated color** is reserved for active states, primary CTAs, and emphasis spans inside headings (e.g. `<span class="text-primary">[Word]</span>` inside an otherwise dark heading).
- **The yellow accent** is the loudest, but used least — reserved for the FAB, sticker callouts, and one emphasized chip per screen at most.
- **Tonal categorization**: when two parallel things must be distinguished (morning/evening, two adjacent stat tiles, two timeline nodes), pair `primary` with `secondary` — never two shades of the same color.
- **Metadata always whispers**: muted mauve-gray (`{colors.on-surface-variant}`), 12px or smaller, with regular tracking unless it's an uppercase eyebrow.

## Distinctive Details

1. **Sticker stickers**: small rotated yellow callouts with `border-2 border-white` and a hard shadow, placed at `-top-3 -right-3` of a card. They look like vinyl labels stuck onto the page.
2. **Hard-offset border-color shadow**: `shadow-[4px_4px_0px_0px_var(--border)]` and its colored variants (`rgba(241,91,181,0.1)`) — this is the system's signature elevation, not a generic blur.
3. **Subtle rotation-on-rest, snap-to-zero on hover**: chrome elements sit at `rotate-[-2deg]` to `rotate-[2deg]` and reset to `rotate-0` on hover. A hand-placed feel that responds to interaction.
4. **Mixed asymmetric corner radii on inputs**: a single corner of a form field gets a larger radius than the other three, making each input feel hand-cut.
5. **Background ambient blobs**: three large blurred color circles (`blur-3xl`) fixed behind everything, providing warm atmospheric color without ever competing with foreground content.

## Do's and Don'ts

### Do

- Use the warm cream `#FFFCF5` as the page background and the warm border `#E8DFD5` as the universal hairline.
- Default text weight to Bold/Semibold; reserve Black 900 for stat numerals and stickered shouty text.
- Use `chip-active` and the `primary` CTA as the hottest colors on the screen; let the yellow accent appear once or twice maximum.
- Apply 1–2° rotations to playful elements (avatars, stat tiles, stickers) and reset on hover.
- Layer photos inside thick colored ring frames with a white inner ring.
- Use the hard-offset border-color shadow for any element that should feel "lifted off the page."
- Pair primary + secondary for parallel categorical content (never two pinks, never two blues).
- Use `bg-{tone}/10` + `border-{tone}/20` for category-tinted cards.

### Don't

- Don't use pure white (`#FFFFFF`) as the page background — always cream.
- Don't use cool gray for borders — the warm `{colors.border}` is non-negotiable.
- Don't introduce generic Material-style elevation shadows; use only the three approved depth treatments.
- Don't render body text in Regular 400 — the system has no Regular weight in chrome.
- Don't rotate body paragraphs, the primary CTA, or anything in the bottom nav.
- Don't apply mixed asymmetric corner radii to more than ~30% of elements per screen — it's a seasoning, not a base.
- Don't tint photo `<img>` elements with blend modes, filters, or opacity — photos display at full saturation against their colored frame.
- Don't put saturated `primary`/`secondary`/`accent` at full saturation as a card background — only as CTAs, active states, and stickers.
- Don't use the yellow accent more than twice per screen.
- Don't introduce new typefaces; Rubik + Nunito Sans is the entire system.