Peach Sticker DESIGN.md

---
version: 1
name: Peach Sticker Mobile
colors:
  primary: "#FF7E5F"
  on-primary: "#FFFFFF"
  secondary: "#6BC5FF"
  accent: "#FFD23F"
  surface: "#FFF2E8"
  surface-alt: "#FFFFFF"
  surface-muted: "#F0E0D6"
  on-surface: "#2D2320"
  on-surface-variant: "#8A756E"
  border: "#EAD9CE"
  success: "#5EDBA8"
  error: "#FF4D4D"
  illus-coral: "#FF7E5F"
  illus-sky: "#6BC5FF"
  illus-butter: "#FFD23F"
  illus-mint: "#C9E8C9"
  illus-cream: "#FFF6E0"
  illus-blush: "#F4B8B0"
  illus-cocoa: "#4A2E26"
typography:
  display-xl:
    fontFamily: Bricolage Grotesque
    fontSize: 80px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.03em
  display-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 60px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.04em
  display-md:
    fontFamily: Bricolage Grotesque
    fontSize: 36px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 30px
    fontWeight: 900
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Bricolage Grotesque
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Bricolage Grotesque
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0em
  body-md:
    fontFamily: Nunito Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.45
    letterSpacing: 0em
  body-sm:
    fontFamily: Nunito Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0em
  label-lg:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.05em
  label-md:
    fontFamily: Nunito Sans
    fontSize: 13px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0em
  label-sm:
    fontFamily: Nunito Sans
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0em
rounded:
  sm: 12px
  md: 18px
  lg: 20px
  xl: 28px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  gutter: 24px
  card-padding: 24px
  section-gap: 20px
icons:
  set: material-symbols
  default_variant: rounded
  active_variant: rounded
  stroke_weight: 2.5px
  default_size: 24px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.card-padding}"
    border: none
    boxShadow: "0 3px 12px rgba(0,0,0,0.06)"
  card-selected:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.primary}"
    borderWidth: 4px
    rounded: "{rounded.lg}"
    padding: 16px
    boxShadow: "0 3px 12px rgba(0,0,0,0.06)"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    paddingX: 32px
    paddingY: 22px
    border: none
    boxShadow: "0 8px 30px rgba(255,126,95,0.3)"
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 24px
    paddingY: 14px
    border: none
    boxShadow: "0 2px 8px rgba(0,0,0,0.04)"
  button-text:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    paddingX: 0px
    paddingY: 8px
    border: none
    boxShadow: none
  button-icon:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    size: 48px
    rounded: "{rounded.full}"
    iconSize: 28px
    border: none
    boxShadow: "0 4px 16px rgba(255,126,95,0.3)"
  button-icon-soft:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    size: 40px
    rounded: "{rounded.full}"
    iconSize: 22px
    border: none
    boxShadow: "0 2px 8px rgba(0,0,0,0.04)"
  input-text:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    paddingX: 18px
    paddingY: 14px
    border: none
    boxShadow: "0 2px 8px rgba(0,0,0,0.04)"
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 14px
    paddingY: 8px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    paddingX: 14px
    paddingY: 8px
    border: none
    boxShadow: none
  badge-pill:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    paddingX: 10px
    paddingY: 4px
    border: none
    boxShadow: none
  badge-circle:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    size: 24px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-muted}"
    size: 48px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    paddingX: 20px
    paddingY: 18px
    border: none
    boxShadow: "0 3px 12px rgba(0,0,0,0.06)"
  toggle-switch:
    backgroundColor: "{colors.surface-muted}"
    width: 56px
    height: 32px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  toggle-switch-on:
    backgroundColor: "{colors.primary}"
    width: 56px
    height: 32px
    rounded: "{rounded.full}"
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.headline-lg}"
    paddingX: "{spacing.gutter}"
    paddingY: 16px
    border: none
    boxShadow: none
---

# Peach Sticker Mobile

## Overview

**Cozy, sticker-bright, sticker-soft.** A warm peach-cream surface system populated with chunky black-displayed numerals, fully-rounded pill controls, and oversized kawaii vector mascots that sit on cards like vinyl stickers. The aesthetic feels handmade and affectionate — high-saturation coral for primary action, buttery yellow for celebration, sky blue for calm — all anchored to a deep cocoa text color so nothing reads as washed out.

The mood is playful but legible: typography does the structural work (very heavy display weights, generous tracking compression on numerals), while imagery does the emotional work (rounded illustrated characters with rosy blush cheeks). It's an aesthetic that wants to make daily-use moments feel friendly without becoming childish — adjacent to greeting-card and stationery design rather than children's app design.

## Colors

The system splits into three palettes that must not bleed:

- **Surface palette** — `{colors.surface}` is the warm cream page background; `{colors.surface-alt}` is pure white, used exclusively for cards and lifted controls; `{colors.surface-muted}` is the dustier peach used for inactive toggle tracks, inactive day pills, and other "off" states.
- **Brand & action palette** — `{colors.primary}` (warm coral) is the single saturated CTA color, used for the primary button, the active toggle fill, the active day-pill, and selection borders. `{colors.secondary}` (sky blue) and `{colors.accent}` (butter yellow) appear in support roles: accent for streak/celebration moments at low alpha tints, secondary as a calm complement reserved for atmospheric or supporting contexts.
- **Text palette** — `{colors.on-surface}` is a near-black warm cocoa; `{colors.on-surface-variant}` is a dusty mauve-taupe for metadata, helper copy, and inactive labels. The `border` color is a faint peach-tan, used only when a hairline separation is necessary; most separation is achieved with shadow + white-on-cream contrast.

Illustration colors (`illus-*`) are reserved for generated character art only. Never use them as UI fills, button backgrounds, or chip colors. Conversely, the `primary` coral is for chrome only; it should not be used as a fill inside a generated illustration.

## Typography

Two families do all the work:

- **Bricolage Grotesque** at weight 900 (Black) handles every display, headline, and numeric centerpiece. Its compressed, slightly-wonky display cut is what gives the aesthetic its toy-poster character. Tracking is pulled tighter (`-0.02em` to `-0.04em`) at large sizes so numerals feel like a single sculpted block.
- **Nunito Sans** at weights 600–900 covers all body, label, and metadata copy. The very heavy weights (800/900) for short labels are a load-bearing decision — labels in this system shout politely.

Role assignments:
- `display-xl` / `display-lg` — clock-style numerals and hero counters; tracking-tight, weight 900.
- `display-md` / `headline-lg` — top-of-screen titles.
- `headline-sm` — card title inside selection tiles.
- `body-lg` — emphasized in-card primary text (e.g. row label).
- `body-md` / `body-sm` — descriptive copy and helper text.
- `label-lg` — primary button text, uppercased with `+0.05em` tracking.
- `label-md` — chip / secondary button text.
- `label-sm` — initial inside a day-pill, badge digits.

There is no italic except for a single inline-italic helper-copy gesture used to mark locked / unavailable states.

## Spacing & Layout

Generous and breathing. Screen gutters are `{spacing.gutter}` (24px). Cards stack with `{spacing.lg}` (20px) between them — this gap is intentionally a touch larger than feels efficient, because the empty cream surface between cards is part of the aesthetic. Internal card padding is `{spacing.card-padding}` (24px), giving content room around oversized numerals and stickered illustrations.

Grids of selection tiles use 2 columns with `{spacing.md}` gap. Vertical rhythm inside cards stacks at 12–16px between sub-blocks.

## Elevation & Depth

Depth is conveyed by **soft drop-shadows on white cards over a cream surface** — never by borders. The canonical shadow is `0 3px 12px rgba(0,0,0,0.06)` for resting cards. Primary buttons carry a colored shadow tinted with the button's own hue: `0 8px 30px rgba(255,126,95,0.3)` — this creates a warm "glow" beneath CTAs that reinforces the sticker / candy quality of the aesthetic.

Press states scale the element to `0.95–0.98` (no shadow change). Hover is generally a no-op on touch surfaces.

There is no glass / blur / translucency vocabulary. The system is opaque and warm.

## Shapes

Radii are large and pillow-soft:
- `{rounded.sm}` (12px) — never used on chrome; rare inline accents.
- `{rounded.md}` (18px) — inputs.
- `{rounded.lg}` (20px) — the workhorse card and list-row radius.
- `{rounded.xl}` (28px) — large hero containers.
- `{rounded.full}` — every button, every chip, every toggle, every avatar / day-pill / icon-button. **Default to `full` for any interactive control that isn't a card.**

The shape philosophy: cards are squircle-ish soft rectangles; controls are pills. There are no sharp 90° interactive elements anywhere.

## Components

### card

Resting white surface on the cream page. Soft drop-shadow, no border (selected state is the exception — see `card-selected`).

```html
<div class="bg-white rounded-[20px] p-6 shadow-[0_3px_12px_rgba(0,0,0,0.06)]">
  <h3 class="text-xl font-black font-heading">[Card title]</h3>
  <p class="text-sm text-[#8A756E] mt-2">[Body copy]</p>
</div>
```

### card-selected

For selection-grid tiles, selection is shown via a 4px coral border that replaces some inner padding (so layout doesn't jump). A small coral check-circle pinned top-right confirms.

```html
<div class="bg-white rounded-[20px] p-4 shadow-[0_3px_12px_rgba(0,0,0,0.06)] border-4 border-[#FF7E5F] relative">
  <div class="absolute top-2 right-2 size-6 rounded-full bg-[#FF7E5F] text-white flex items-center justify-center">
    <iconify-icon icon="material-symbols:check-rounded" class="size-4"></iconify-icon>
  </div>
  <!-- tile content -->
</div>
```

For locked / unavailable tiles in the same grid, render the tile with `grayscale opacity-60` and overlay a centered white-translucent lock badge:

```html
<div class="absolute inset-0 flex items-center justify-center z-10">
  <div class="bg-white/80 p-2 rounded-full shadow-md">
    <iconify-icon icon="solar:lock-bold" class="size-6"></iconify-icon>
  </div>
</div>
```

### button-primary

The shouting CTA. Uppercased, heavy-tracked label; coral fill; warm coral-tinted glow shadow. Always pill-shaped.

```html
<button class="px-8 py-[22px] rounded-full bg-[#FF7E5F] text-white font-black text-base tracking-[0.05em] uppercase shadow-[0_8px_30px_rgba(255,126,95,0.3)] active:scale-95 transition-transform">
  [LABEL]
</button>
```

For full-width hero CTAs, add `w-full max-w-xs`. The `text-2xl` size is used for the largest hero variant (oversized hero CTA at ~24px).

### button-secondary / button-text

Secondary is a white pill with the soft generic shadow. `button-text` is a plain bold underlined link, used for low-attention dismiss actions ("Snooze for 9m"–style negative-space CTAs):

```html
<button class="text-lg font-bold text-[#2D2320]/70 underline underline-offset-4 decoration-2 hover:text-[#2D2320]">
  [Tertiary action]
</button>
```

### button-icon

Circular coral floating action button with the same coral glow as `button-primary`, used wherever a single-icon "add / new" affordance is needed.

```html
<button class="size-12 rounded-full bg-[#FF7E5F] text-white flex items-center justify-center shadow-[0_4px_16px_rgba(255,126,95,0.3)] active:scale-95">
  <iconify-icon icon="material-symbols:[icon-name]-rounded" class="size-7"></iconify-icon>
</button>
```

For the soft variant (e.g. a back-arrow in the top app bar), use `button-icon-soft`: smaller size-10, white background with a subtle generic shadow, on-surface foreground.

### toggle-switch

iOS-style pill toggle. Track is `{colors.surface-muted}` when off and `{colors.primary}` when on. White thumb at 20px diameter with 6px inset.

```html
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer" checked />
  <div class="w-14 h-8 bg-[#F0E0D6] rounded-full peer peer-checked:bg-[#FF7E5F] peer-checked:after:translate-x-6 after:content-[''] after:absolute after:top-[6px] after:left-[6px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
</label>
```

### chip / chip-active

Small pill labels. The signature use is the **day-of-week pill row**: a strip of 7 size-6 circles, each containing a single bold uppercase initial in `{typography.label-sm}`. Active days fill coral with white text; inactive days fill `surface-muted` with `on-surface-variant` text. This is a composition of `chip` + `chip-active` at circular size — not a separate component.

```html
<div class="flex gap-2">
  <div class="size-6 rounded-full bg-[#FF7E5F] text-white flex items-center justify-center text-[10px] font-bold">M</div>
  <div class="size-6 rounded-full bg-[#F0E0D6] text-[#8A756E] flex items-center justify-center text-[10px] font-bold">T</div>
  <!-- ... -->
</div>
```

### badge-pill / badge-circle

Pill badges use accent-yellow fill at full or 20% alpha; circular badges use the primary coral. The accent-tint card recipe — `bg-[#FFD23F]/20` with a `border-2 border-[#FFD23F]/30` — is the standard recipe for celebratory / streak callouts.

### list-row

Cards-as-rows. Use `{components.card}` styling but with the row's content (label left, control right). Reserve `list-row` for screens that genuinely list multiple homogeneous items; otherwise just compose with `card`.

### top-app-bar

Flat — no shadow, no fill differentiation from the cream page. Just generous top padding (`pt-16`) and a left-aligned heavy display title with an optional right-aligned `button-icon` for the primary screen action.

```html
<div class="flex items-center justify-between px-6 pt-16 pb-6">
  <h1 class="text-4xl font-black font-heading tracking-tight">[Screen title]</h1>
  <button class="size-12 rounded-full bg-[#FF7E5F] text-white flex items-center justify-center shadow-[0_4px_16px_rgba(255,126,95,0.3)]">
    <iconify-icon icon="material-symbols:[icon-name]-rounded" class="size-7"></iconify-icon>
  </button>
</div>
```

### Composition recipes (not components)

- **Hero numeral block** — render the value in `display-xl` or `display-lg` with `tracking-tighter` next to a smaller `text-xl font-bold text-muted-foreground` qualifier (e.g. unit, suffix). The qualifier baseline-aligns with the numeral via `flex items-baseline gap-2`.
- **Disabled / inactive item** — wrap the entire card in `opacity-60` and recolor the headline numeral to `on-surface-variant`; do not change the card's shadow or radius.
- **Streak / celebratory callout** — `bg-[#FFD23F]/20` fill, `border-2 border-[#FFD23F]/30`, padding `{spacing.lg}`, an accent-yellow circle holding a single emoji or icon on the left.
- **Accent-tint card** — to reserve a low-attention non-white card for special content, use any palette color at `/20` alpha background with a `border-2` of the same color at `/30` alpha. Never use full-saturation accent or primary as a card fill.

## Iconography

`material-symbols:*-rounded` is the primary chrome icon set — its softened terminals match the pillow-shaped pill controls. `solar:*-bold` and `hugeicons:*` appear for icons not available in material-symbols-rounded (lock states, directional chevrons). Stroke-weight feel is medium-heavy; never use thin / light variants. Default chrome size is 24px (`size-6`); FAB-scale icons are 28px (`size-7`); inline label icons are 16–18px.

For decorative emoji moments (e.g. a streak fire), `fluent-emoji:*` is acceptable — used sparingly inside accent-tint callouts only, never as a primary-action icon.

## Illustration & Imagery

Illustrations are the soul of this aesthetic — the chrome is plain enough that the imagery does most of the personality work. Treat them as the most carefully-styled element on the page.

- **Style / Technique**: Flat 2D vector kawaii sticker illustrations. Each character is a single rounded silhouette with a thick uniform dark-cocoa outline (`{colors.illus-cocoa}`, ~6–8% of the canvas width in stroke). Big sparkling cartoon eyes (two large dark circles, each with two white highlight dots), a tiny smiling mouth, and two blush-pink oval cheek dots. Simplified anatomy — no fingers, no toes, often no limbs at all. Sticker-style: each illustration reads as a die-cut peel-off vinyl sticker.
- **Palette**: 2–4 colors per illustration drawn from `{colors.illus-coral}`, `{colors.illus-sky}`, `{colors.illus-butter}`, `{colors.illus-mint}`, `{colors.illus-cream}`, `{colors.illus-blush}`, plus `{colors.illus-cocoa}` for the outline and facial features. Saturation is medium-soft — not pastel, not neon. Each character body is one flat dominant color with at most one secondary fill (belly, ear, accent) and the universal blush-pink cheek dots.
- **Edge treatment**: Always outlined. Uniform stroke weight, dark cocoa color, slightly rounded line-caps. Outlines are NEVER skipped, NEVER tapered, NEVER colored to match the fill. The outline IS the aesthetic.
- **Shading & light**: Flat fills with at most ONE soft tonal step (e.g. a slightly darker rim along one curve to suggest volume), and a small white specular highlight inside the eyes. No gradients, no airbrush, no cel-shaded planes.
- **Composition & framing**: Subject is centered, fills 70–85% of the canvas, faces forward (toward the viewer), and sits on a transparent background. Generous symmetrical margin around the silhouette so the sticker reads cleanly when placed over a card. Subjects are roughly square in aspect.
- **Background within the illustration**: Always transparent PNG. The character must read on any surface color in the system.
- **Container styling**: Most illustrations are placed *unframed* — directly on a card surface as a sticker. When pinned to a card corner, size is roughly 56×56px (`w-14 h-14`) with a small tilt (`rotate-[-12deg]` to `rotate-[8deg]`) to reinforce the stuck-on-by-hand sticker feeling. When used as a tile centerpiece, size is roughly 96×96px (`w-24 h-24`) with no rotation. When used as a hero (alarm-ringing-style screens), size scales up to 288×288px (`w-72 h-72`) and may sit over an atmospheric gradient backdrop.
- **CSS treatment on the `<img>` element**: `object-contain` is implicit (illustrations are square PNGs). The signature treatments are: `drop-shadow-sm` for the small sticker shadow under each character (this is what sells the sticker quality — a tiny offset shadow as if the vinyl is sitting just above the surface); for hero-scale uses, `drop-shadow-2xl` for a more dramatic floating feel. For locked / unavailable states, apply `grayscale opacity-60` (or `grayscale-[50%]` for partial) — never blur, never recolor.
- **Box-shadow on the image or its frame**: None on the container — the illustration's own `drop-shadow-sm` does the work. Containers stay flat shadow-wise; the sticker has its own micro-shadow.
- **Aspect ratio rule**: Always 1:1 square. Crop / pad the source to a square canvas before placement. Do not stretch.
- **Atmospheric / scenic imagery**: Beyond character stickers, the system also accepts soft minimal landscape backdrops — gradient sky from cream-peach (bottom) to soft sky-blue (top), with simplified rolling hills as flat shapes in 2–3 mint/sage tones, and a small cluster of rounded white clouds. No outlines on these landscapes (this is the one place the outline rule is suspended — atmospheres are flat, character stickers are outlined). Used as full-screen backgrounds on hero / full-bleed moments only.
- **Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT pastel-washed-out, NOT line-art-only (no fills), NOT realistic anatomy, NOT detailed textures, NOT painterly, NOT pixel art, NOT chibi-anime (the proportions are rounder and simpler than anime chibi).
- **Style recipe prompt**: *Flat 2D vector kawaii sticker illustration of [SUBJECT], centered on a transparent background, square 1:1 canvas. Single rounded silhouette with a thick uniform dark cocoa-brown outline (#4A2E26) of consistent stroke weight. Big sparkling cartoon eyes (two large dark cocoa circles each with two small white highlight dots), a tiny simple smiling mouth, two soft pink-blush oval cheek dots. Body filled with a single medium-saturation color from this palette: warm coral, sky blue, butter yellow, soft mint, cream, blush pink. At most one secondary accent fill (belly, ear, tuft). Flat fills with at most one subtle tonal step for volume, no gradients, no airbrush, no cel-shaded planes. Subject fills 70–85% of canvas, faces forward, generous symmetrical margins. Reads as a die-cut vinyl peel-off sticker. NOT 3D, NOT claymation, NOT photoreal, NOT pastel-washed-out, NOT realistic anatomy, NOT pixel art, NOT anime.*

## Hierarchy & Emphasis

Weight (Bricolage Black 900) and *size* carry hierarchy more than color does. Coral is reserved — it appears at most twice on a screen (the FAB and an active toggle, or a primary CTA). Inactive / disabled states drop the entire element to `opacity-60` rather than recoloring piece by piece. Metadata always whispers in `on-surface-variant` at body-sm; never in coral.

## Distinctive Details

1. **Sticker-on-card placement**: oversized illustrated mascots pinned to card corners with a slight rotation (`rotate-[-12deg]` to `rotate-[8deg]`) and a `drop-shadow-sm`. This is the single most identifying gesture — flat cards become tactile when the sticker breaks the corner.
2. **Coral-tinted glow shadow on primary CTAs**: `0 8px 30px rgba(255,126,95,0.3)` rather than a neutral shadow. Buttons appear to *radiate* warmth.
3. **Day-of-week initial pills**: a strip of seven `size-6` circles with single bold initials, fully replacing what other systems do with checkboxes or 5-letter abbreviations. Becomes a decorative micro-pattern in itself.

## Do's and Don'ts

### Do
- Use Bricolage Grotesque Black for any number that matters; tracking-tight at large sizes.
- Default every interactive control (buttons, chips, toggles, day-pills) to fully rounded.
- Stick to the white-card-on-cream-surface contrast; let shadow do the lifting.
- Pin character stickers to card corners with a small rotation and a `drop-shadow-sm`.
- Reserve coral for primary action — at most one or two coral elements per screen.
- Use `opacity-60` (with optional `grayscale`) to communicate locked / disabled / past states.

### Don't
- Don't use coral as a card background — it's a chrome accent, never a surface.
- Don't add borders to resting cards (selected state is the only exception, with a 4px coral border).
- Don't use thin or light icon variants — chrome icons are always rounded, medium-heavy.
- Don't reach for gradient fills or glassy backdrop blurs — the system is opaque and warm.
- Don't use the illustration palette colors (`illus-*`) as UI fills; they live inside generated PNGs only.
- Don't use Playfair Display or JetBrains Mono — they're loaded historically but not part of this aesthetic's working set.
- Don't render character illustrations without their dark cocoa outline; the outline is the aesthetic.
- Don't crop a sticker tightly to its silhouette; preserve its symmetric square margin.