Soft Trophy DESIGN.md

---
version: 1
name: "Soft Trophy Mobile"
colors:
  primary: "#34C759"
  on-primary: "#FFFFFF"
  secondary: "#D4A852"
  on-secondary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-alt: "#F2F2F7"
  on-surface: "#1A1A1A"
  on-surface-variant: "#8A8A8E"
  border: "#E5E5EA"
  error: "#FF3B30"
  illus-sky: "#B6DCEC"
  illus-cream: "#EFE7D8"
  illus-gold: "#D4A852"
  illus-vermilion: "#E63A2E"
  illus-stone: "#9C9C9C"
typography:
  display-lg:
    fontFamily: "Schibsted Grotesk"
    fontSize: 36px
    fontWeight: 900
    lineHeight: 40px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 22px
    letterSpacing: -0.01em
  body-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: 0em
  body-sm:
    fontFamily: "Schibsted Grotesk"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0em
  label-lg:
    fontFamily: "Schibsted Grotesk"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: -0.01em
  label-md:
    fontFamily: "Schibsted Grotesk"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 18px
    letterSpacing: -0.01em
  caption:
    fontFamily: "Schibsted Grotesk"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0em
  numeral-stat:
    fontFamily: "Schibsted Grotesk"
    fontSize: 20px
    fontWeight: 900
    lineHeight: 22px
    letterSpacing: -0.02em
  label-uppercase:
    fontFamily: "Schibsted Grotesk"
    fontSize: 10px
    fontWeight: 900
    lineHeight: 14px
    letterSpacing: 0.2em
  tab-label:
    fontFamily: "Schibsted Grotesk"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: -0.01em
rounded:
  sm: 8px
  md: 14px
  lg: 16px
  xl: 24px
  "2xl": 32px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  "2xl": 48px
  gutter: 24px
  card-padding: 24px
  section-gap: 80px
icons:
  set: phosphor
  default_variant: regular
  active_variant: fill
  stroke_weight: 1.5px
  default_size: 28px
components:
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
    rounded: "{rounded.2xl}"
    padding: "{spacing.card-padding}"
  card-glass:
    backgroundColor: "rgba(255,255,255,0.5)"
    borderColor: "rgba(229,229,234,0.4)"
    borderWidth: 1px
    boxShadow: "0 1px 2px rgba(0,0,0,0.04)"
    rounded: "{rounded.2xl}"
    padding: "{spacing.card-padding}"
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    height: 64px
    paddingX: 32px
    gap: 12px
    border: none
    boxShadow: "0 12px 24px -8px rgba(26,26,26,0.18)"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 2px 6px rgba(0,0,0,0.06)"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 12px
    gap: 8px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    border: none
    boxShadow: none
    paddingX: 0px
    paddingY: 8px
  button-icon:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.full}"
    size: 40px
    iconSize: 20px
    border: none
    boxShadow: none
  input-text:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.sm}"
    paddingX: 0px
    paddingY: 8px
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    paddingX: 28px
    paddingY: 12px
    border: none
    boxShadow: none
  chip-active:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    paddingX: 28px
    paddingY: 12px
    border: none
    boxShadow: "0 1px 2px rgba(0,0,0,0.06)"
  badge-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: "0 4px 10px rgba(0,0,0,0.06)"
    rounded: "{rounded.full}"
    paddingX: 20px
    paddingY: 12px
    gap: 8px
  badge-circle:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.full}"
    size: 40px
    border: none
    boxShadow: none
  avatar:
    backgroundColor: "{colors.surface-alt}"
    rounded: "{rounded.full}"
    size: 40px
    borderColor: "{colors.surface}"
    borderWidth: 2px
    boxShadow: "0 1px 2px rgba(0,0,0,0.08)"
  list-row:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    paddingX: 0px
    paddingY: 16px
    gap: 12px
    border: none
    boxShadow: none
  top-app-bar:
    backgroundColor: "rgba(255,255,255,0.8)"
    textColor: "{colors.on-surface}"
    height: 56px
    paddingX: "{spacing.gutter}"
    border: none
    boxShadow: none
  tab-bar:
    backgroundColor: "rgba(255,255,255,0.95)"
    height: 96px
    paddingX: "{spacing.gutter}"
    paddingY: 12px
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
  tab-item-active:
    textColor: "{colors.primary}"
    typography: "{typography.tab-label}"
    iconSize: 30px
    gap: 2px
    backgroundColor: "transparent"
    border: none
    boxShadow: none
  tab-item-inactive:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.tab-label}"
    iconSize: 30px
    gap: 2px
    backgroundColor: "transparent"
    border: none
    boxShadow: none
---

# Soft Trophy Mobile

## Overview

**Playful, collectible, and physically tactile.** The aesthetic feels like a curated cabinet of small soft-clay objects — each piece lit, posed, and sitting on a clean white shelf with a soft drop-shadow underneath. The chrome is the opposite: crisp, ultra-flat, almost stationary-store minimal — generous whitespace, near-monochrome surfaces, and a single saturated accent color for affirmation.

The tension between **chunky 3D objects** and **flat, restrained UI** is the entire point. The objects do the emoting; the UI gets out of the way.

Two voices share the page: a heavy, almost editorial display weight (Schibsted Grotesk Black) for screen titles, and a tracked-out micro-uppercase for kickers and metadata that reads like museum-card labeling.

## Colors

The palette is intentionally restrained on the chrome side and intentionally rich on the object side.

**Chrome roles** — `{colors.surface}` (pure white) is the canvas. `{colors.surface-alt}` is the soft cool-gray fill used for inactive chips, icon-button backgrounds, and inputs. `{colors.on-surface}` is a near-black used for primary type and the inverted primary button. `{colors.on-surface-variant}` is the muted gray for metadata, secondary captions, and inactive tab labels. `{colors.border}` is a hairline that appears at extremely low intensity around glass cards and the bottom tab bar.

**Brand accent** — `{colors.primary}` is a saturated affirmation green. It is used **only** for: positive status pills, active tab icons, presence dots, and the ring/focus state. It is never a fill on a large surface, never a card background, never a button background. The primary CTA is intentionally `{colors.on-surface}`-on-`{colors.surface}` (inverted, not green) — green is reserved for "this thing is collected / live / active."

**Secondary accent** — `{colors.secondary}` (warm gold) marks rarity, trophy-tier metadata, and sparkle motifs. Treat it like a highlight pen, not a fill.

**Illustration palette** — `illus-sky`, `illus-cream`, `illus-gold`, `illus-vermilion`, `illus-stone` are the matte plasticine tones used inside rendered objects. **These never appear on UI chrome** — no gold buttons, no sky-blue cards. Crossing that line collapses the dual-voice quality of the aesthetic.

## Typography

**Schibsted Grotesk** is the entire UI voice, used at extreme weight contrast: **Black (900)** for display, headlines, stats, and tab labels; **Bold (700)** for buttons, chips, and titles inside cards; **Semibold (600)** for body; **Medium (500)** for captions. Light and Regular weights are not used — the workhorse weight is 700, and 900 is loaded for any moment that wants to feel like a chapter heading.

Roles:
- `{typography.display-lg}` — screen titles ("chapter" weight, 36/40, -0.02em). Always 900.
- `{typography.headline-md}` — card-internal section heads, item titles in grid tiles.
- `{typography.body-md}` / `{typography.body-sm}` — descriptive copy and supporting text. 600 weight; the design has no true regular-weight body.
- `{typography.label-lg}` / `{typography.label-md}` — buttons and chips. 700.
- `{typography.label-uppercase}` — the signature tracked-out micro-kicker (10px, 900, +0.2em letter-spacing). Used for section eyebrows ("Recently Collected"), card metadata field labels, and stat counters in the top header. **The +0.2em tracking is load-bearing** — it's what makes the chrome feel like museum cataloging.
- `{typography.numeral-stat}` — large 900-weight counts in compact stat clusters.
- `{typography.caption}` — date/place captions under grid tiles, often combined with `uppercase tracking-tight` to echo the label-uppercase voice at a softer scale.
- `{typography.tab-label}` — bottom-bar text. Always 700, never inflected.

Mono (`JetBrains Mono`) and serif (`Playfair Display`) are loaded but unused in the captured screens — leave them out unless a brief specifically asks for a typographic switch.

## Spacing & Layout

The aesthetic is **airy, never dense**. Side gutter is `{spacing.gutter}` (24px). Vertical rhythm between sections is generous — `{spacing.section-gap}` (~80px) between an "eyebrow + content" block and the next, much wider than typical mobile spacing. Inside cards, padding is a uniform `{spacing.card-padding}` (24px).

Grid tiles in collection-style layouts use **wide horizontal gaps** (40px between columns) and **even wider vertical gaps** (~48px between rows) so each rendered object reads as a standalone specimen on a shelf, not a packed thumbnail grid. Object thumbnails are sized at `aspect-square` and scaled slightly larger (110%) than their container so they spill confidently into the gutter air.

Top header content uses ultra-tight internal spacing (4–8px between kicker and number) so each stat reads as one micro-block, separated from neighbors by hairline vertical dividers.

## Elevation & Depth

The system uses **three depth tiers** and they don't blur into each other:

1. **Flat** — every chip, input, list row, and tab bar. No shadow, optionally a 1px `{colors.border}` hairline. The default state for almost all chrome.
2. **Soft cards** — translucent or solid white surfaces with a 1px hairline border + a barely-there shadow (`0 1px 2px rgba(0,0,0,0.04)`). Used for the floating top-header cluster, the detail-screen info card, the in-globe location preview tooltip.
3. **Lifted CTA** — only the primary action button gets a real elevation (`0 12px 24px -8px rgba(26,26,26,0.18)`), and only when it sits in a footer region. This is the one moment the UI permits itself to feel weighty.

The far more important "depth" in this aesthetic is the **shadow underneath every illustration**: a soft elliptical blur at the base of every rendered object (`bg-black/5 rounded-full blur-md`). This is what makes the objects feel placed-on-a-surface rather than pasted-on-a-canvas. Treat it as mandatory anywhere an `<img>` of an illustrated object appears.

## Shapes

The radius scale skews soft and round.

- `{rounded.sm}` (8px) — subtle inputs, dividers.
- `{rounded.md}` (14px) — small inline pills not at full-pill scale.
- `{rounded.lg}` (16px) — base radius unit.
- `{rounded.xl}` (24px) — secondary cards, the floating top-header card.
- `{rounded.2xl}` (32px) — primary cards (info card on detail screen).
- `{rounded.full}` — every button, every chip, every avatar, every badge, every icon-button. **Pill-everything is the rule**; rectangles only exist for cards.

The shape language is: rounded objects on a rounded UI. Sharp corners do not appear anywhere — even the small directional notches under tooltips are 45°-rotated rounded squares, not triangular SVGs.

## Components

### card

Surface container with hairline border and a whisper of shadow. Two flavors: solid white (default) and `bg-white/50 backdrop-blur-sm` for "info card laid over an atmospheric background."

```html
<div class="bg-white border border-[#E5E5EA] rounded-[32px] p-6 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
  [Card contents]
</div>
```

### button-primary

The dark-on-light inverted CTA — heavy, full-pill, with a generous 64px height and a pronounced soft drop shadow. Lives in footer regions; usually full-width.

```html
<button class="w-full h-16 px-8 rounded-full bg-[#1A1A1A] text-white flex items-center justify-center gap-3 shadow-[0_12px_24px_-8px_rgba(26,26,26,0.18)] active:scale-[0.98] transition-transform">
  <iconify-icon icon="ph:[icon-name]-bold" class="size-5"></iconify-icon>
  <span class="font-bold text-base tracking-[-0.01em]">[Action label]</span>
</button>
```

### button-secondary

White pill with hairline + soft shadow, used as a floating contextual action ("Nearby", "Open detail"). Always sits over the canvas, never inside a card.

```html
<button class="flex items-center gap-2 bg-white border border-[#E5E5EA] rounded-full px-5 py-3 shadow-[0_2px_6px_rgba(0,0,0,0.06)] active:scale-95 transition-transform">
  <span class="text-sm font-semibold text-[#1A1A1A]">[Label]</span>
  <iconify-icon icon="ph:caret-right-bold" class="size-3.5 text-[#8A8A8E]"></iconify-icon>
</button>
```

### button-icon

Compact circular icon button — `surface-alt` filled, no border, no shadow. Used for header utility actions (close, search, filter).

```html
<button class="size-10 rounded-full bg-[#F2F2F7] flex items-center justify-center active:scale-90 transition-transform">
  <iconify-icon icon="ph:[icon-name]" class="size-5 text-[#1A1A1A]"></iconify-icon>
</button>
```

### input-text

Inline, borderless-on-three-sides input that reveals a bottom hairline when focused. Pairs with a leading icon. The visual restraint is deliberate — inputs are presented as journal-style annotation slots, not obvious form fields.

```html
<div class="relative">
  <iconify-icon icon="ph:[icon-name]" class="absolute left-0 top-1/2 -translate-y-1/2 size-4 text-[#8A8A8E]"></iconify-icon>
  <input
    type="text"
    placeholder="[Placeholder]"
    class="w-full bg-transparent pl-8 py-2 text-base font-semibold focus:outline-none placeholder:text-[#8A8A8E]/50 border-b border-transparent focus:border-[#34C759]/20 transition-colors"
  />
</div>
```

### chip / chip-active

Filter chips at horizontal-scroll scale. Inactive uses `surface-alt`; active inverts to dark-on-light. No borders. The active state is a pill-button, not a recolored chip — it carries enough weight to read as a selected mode.

```html
<!-- inactive -->
<button class="px-7 py-3 bg-[#F2F2F7] text-[#8A8A8E] rounded-full text-base font-semibold whitespace-nowrap active:scale-95 transition-transform">[Label]</button>

<!-- active -->
<button class="px-7 py-3 bg-[#1A1A1A] text-white rounded-full text-base font-semibold whitespace-nowrap shadow-sm active:scale-95 transition-transform">[Label]</button>
```

### badge-pill

A floating contextual pill with a leading status dot (often a pulsing presence indicator). Used to surface a single live notification on top of a visual canvas.

```html
<div class="inline-flex items-center gap-2 bg-white border border-[#E5E5EA] rounded-full px-5 py-3 shadow-[0_4px_10px_rgba(0,0,0,0.06)]">
  <span class="relative flex size-3">
    <span class="animate-ping absolute inline-flex size-full rounded-full bg-[#34C759] opacity-75"></span>
    <span class="relative inline-flex rounded-full size-3 bg-[#34C759]"></span>
  </span>
  <span class="text-sm font-semibold text-[#1A1A1A]">[Status label]</span>
</div>
```

### avatar

Circular portrait with a 2px white ring — designed to overlap cleanly when stacked with negative left-margin.

```html
<img alt="[Alt]" src="[url]" class="size-10 rounded-full border-2 border-white object-cover shadow-[0_1px_2px_rgba(0,0,0,0.08)]" />
```

Avatar stack composition: wrap multiple avatars in `flex -space-x-3`, optionally followed by a `+N` badge-circle styled identically.

### list-row

Borderless row, vertical padding only, used inside cards as a stat field. No dividers between rows — vertical rhythm is created by gap, not lines.

### top-app-bar

A floating translucent header — `bg-white/80 backdrop-blur-md` inside a rounded-2xl card with hairline border. Holds either a left-aligned title block or a row of equally-weighted stat clusters separated by `w-px h-8 bg-[#E5E5EA]/60` vertical dividers.

```html
<header class="absolute top-0 inset-x-0 pt-14 pb-4 px-6">
  <div class="flex justify-between items-center bg-white/80 backdrop-blur-md rounded-2xl p-4 shadow-[0_1px_2px_rgba(0,0,0,0.04)] border border-[#E5E5EA]/50">
    <div class="flex flex-col items-center flex-1">
      <span class="text-[10px] text-[#8A8A8E] font-black uppercase tracking-[0.1em] mb-1">[Kicker]</span>
      <span class="text-xl font-black text-[#1A1A1A]">[Value]</span>
    </div>
    <div class="w-px h-8 bg-[#E5E5EA]/60"></div>
    <!-- repeat -->
  </div>
</header>
```

### tab-bar

Bottom navigation, 96px tall (extra height for safe area), translucent white with `backdrop-blur-lg` and a 1px top border. Three to five items, evenly distributed. Active items use `{colors.primary}` and the **filled** icon variant; inactive items use `{colors.on-surface-variant}` and the **regular** (unsuffixed) icon variant. Both states carry a 700-weight label.

```html
<nav class="fixed bottom-0 inset-x-0 h-24 bg-white/95 backdrop-blur-lg border-t border-[#E5E5EA]/40 flex justify-around items-start pt-3 px-6">
  <button class="flex flex-col items-center gap-0.5 text-[#34C759] w-20">
    <iconify-icon icon="ph:[icon-name]-fill" class="size-8"></iconify-icon>
    <span class="text-sm font-bold tracking-tight">[Label]</span>
  </button>
  <button class="flex flex-col items-center gap-0.5 text-[#8A8A8E] w-20">
    <iconify-icon icon="ph:[icon-name]" class="size-8"></iconify-icon>
    <span class="text-sm font-bold tracking-tight">[Label]</span>
  </button>
</nav>
```

### Compositional recipes (not standalone components)

- **Stat cluster** (the trio in the top header): three flex-1 children, each rendered as a `{typography.label-uppercase}` kicker over a `{typography.numeral-stat}` value, separated by `w-px h-8 bg-[#E5E5EA]/60` dividers. The third stat may use `{colors.secondary}` for its number to mark a "rare/highlight" tier.
- **Object grid tile**: `aspect-square` thumbnail container scaled to 110%, with the elliptical floor-shadow primitive (see Illustration & Imagery → Box-shadow), followed by a centered `{typography.headline-md}` title and a `{typography.caption}` line in `uppercase tracking-tight` for place/date.
- **Wishlist / locked tile**: identical to the grid tile but with `opacity-30 grayscale` on the image, and the title rendered in `{colors.on-surface-variant}/50`.
- **Map pin**: an iconify location icon (e.g. `mingcute:location-fill`) in `{colors.primary}` with a four-direction 1–1.5px `drop-shadow` filter creating an outlined-sticker effect — the offset shadows produce a black outline around the pin without needing an SVG stroke. Sizes scale by importance (24/32/40px) and lower-priority pins use `opacity-70`–`-80`.
- **Tooltip popover** (over the canvas): a small `bg-white rounded-2xl p-2 shadow-2xl border border-[#E5E5EA]/50` card with a 45°-rotated `w-2 h-2 bg-white -mt-1 border-r border-b` notch glued to its bottom-center. Holds a thumbnail (with the floor-shadow primitive) and a 700-weight micro-uppercase caption.

### Tonal recipes (not standalone components)

- **Soft-affirmation pill**: render `chip-active` shape with `bg-[#34C759]/10` background and `text-[#34C759]` foreground when a "completed/collected" state needs to read as positive without inverting to dark.
- **Inverted glass card**: `card` with `bg-white/50 backdrop-blur-sm border-[#E5E5EA]/40` for the "info card laid over a soft atmospheric blob" treatment.

## Iconography

**Phosphor** (`ph:`) is the icon system. Use the **regular** variant (no suffix) for inactive states and the **fill** variant (`-fill` suffix) for active states. Use `-bold` only on small directional glyphs (`caret-right-bold`, `x-bold`) where the regular weight would feel too thin against 700-weight type.

**Critical Phosphor naming rule**: the "regular" variant has **no suffix**. Do not write `ph:user-regular` — that icon does not exist and renders as a missing glyph. Write `ph:user`. Phosphor's actual variant suffixes are `-bold`, `-fill`, `-light`, `-thin`, `-duotone`. The bare name IS the regular variant.

Icon sizing inside chrome: 20px (small button), 24–28px (standard), 30–32px (tab bar). Always size with Tailwind `size-*` classes, never with HTML `width`/`height` attributes.

One exception lives outside Phosphor: small flag glyphs may come from `twemoji:` (e.g. `twemoji:flag-france`) for a chunky, cheerful country marker that visually rhymes with the 3D-clay illustration tone.

## Illustration & Imagery

Imagery is the soul of the aesthetic. The 3D rendered objects do most of the emotional work; the UI is intentionally subdued so they shine.

- **Style / Technique**: **Soft 3D matte-clay / plasticine renders**. Each subject reads as a small handheld physical object — chunky, slightly stylized proportions, rounded edges everywhere (no hard mechanical bevels). Studio render with soft top-down key light, ambient fill, and gentle specular highlights that suggest a matte-but-slightly-waxy plastic/ceramic surface. Subtle surface micro-texture (very fine grain or fingerprint-of-clay) is visible at full-size. This is **not** glossy 3D, **not** photoreal, **not** low-poly, **not** vector.
- **Palette**: each object uses **one dominant matte color** plus mild value variation for shading — e.g. cream + sky-blue (globe), monochrome warm gold (gilded trophy), saturated vermilion (red phone box), warm sandstone tan (colosseum), neutral concrete gray (locked/unclaimed silhouettes). Reference `illus-sky`, `illus-cream`, `illus-gold`, `illus-vermilion`, `illus-stone`. **Maximum 2 colors per object** outside neutral shading, ideally 1.
- **Edge treatment**: no outlines. Edges are defined entirely by light falloff and the soft drop-shadow on the surface below. Corners and intersections are filleted, never sharp.
- **Shading & light**: smooth global-illumination-style soft shading. Top key light, ~45° front-right; barely-there ambient occlusion in crevices; gentle highlight roll on convex surfaces. No hard cel-shading, no rim light, no dramatic contrast.
- **Composition & framing**: subject occupies ~70–80% of a square canvas, sitting on an implied invisible surface. Slight isometric/three-quarter view (~30° rotation) so the object reads as dimensional. Centered horizontally; the base of the subject sits on a horizontal floor-shadow ellipse roughly 60% the width of the subject. Generous negative space above the subject.
- **Background within the illustration**: **transparent** (PNG) — every illustration is rendered floating on its own with no painted background. The page surface shows through.
- **Container styling**: illustrations are NOT framed in cards. They render directly into a transparent container — typically a `relative w-full aspect-square` div, with the subject often scaled `110%` to confidently spill into the surrounding air. No border, no padding, no card background.
- **CSS treatment on the `<img>` element**: `object-contain` (always — never crop a 3D-clay subject), `relative z-10` to sit above the floor-shadow primitive. For "wishlist / locked" states apply `opacity-30 grayscale`. No blend modes, no filters in the active state.
- **Box-shadow on the image or its frame**: no CSS box-shadow on the `<img>` itself. Instead, a **floor-shadow primitive** lives as an absolutely-positioned sibling beneath the image: a horizontal ellipse, `bg-black/5 rounded-full blur-md` (or `blur-xl` at hero scale), about 60% the subject's width and 8–12% of its height, positioned at the bottom of the container. This is mandatory — it's what grounds the object on the page.
- **Aspect ratio rule**: source illustrations are always **1:1 square** PNGs. Containers are also square; never crop.
- **Anti-references**: NOT photographic, NOT glossy 3D, NOT low-poly, NOT flat vector, NOT line art, NOT hand-drawn / sketchy, NOT outlined, NOT cartoon-with-thick-strokes, NOT pastel-watercolor, NOT isometric pixel.
- **Style recipe prompt**:

> *A small soft matte-clay [SUBJECT], rendered in 3D with smooth filleted edges, gently stylized chunky proportions, and a slightly waxy plasticine surface with very fine grain texture. Single dominant matte color (saturated but not glossy) with soft global-illumination shading — top-front key light, gentle ambient fill, no hard highlights, no outlines. Three-quarter view, centered on a transparent square canvas, occupying roughly 75% of frame, with subtle soft drop-shadow on an implied floor below the subject. Studio-product feel. NOT photoreal, NOT glossy, NOT low-poly, NOT flat vector, NOT outlined, NOT sketchy, NOT pastel.*

For "locked / unclaimed" placeholder states, the same recipe applies but in **neutral concrete gray** (`illus-stone`) — same form language, drained of color.

## Hierarchy & Emphasis

- The **rendered object is always the loudest element on the screen** — bigger than any heading, more saturated than any chrome, surrounded by the most whitespace.
- **Display weight (900) is reserved for screen titles and counters**. Card titles drop to 700. Body drops to 600. Captions drop to 500. Weight is the primary hierarchy axis; size is secondary.
- **Saturated color signals state, not importance.** `{colors.primary}` only on active/live/positive moments. `{colors.secondary}` only on rarity/trophy moments. The primary CTA is dark, not green.
- **Tracked-out micro-uppercase whispers metadata.** Anytime a label needs to step back and become a museum tag, render as `{typography.label-uppercase}`.

## Distinctive Details

1. **The floor-shadow primitive under every illustration.** A soft elliptical `bg-black/5 blur-md` sibling underneath every rendered object, anchoring it to the page. Without this, the illustrations float and the entire shelf-of-collectibles feeling collapses.
2. **Outlined sticker pins.** Map / location markers built from a colored Phosphor `location-fill` icon plus a four-direction tiny `drop-shadow` filter, producing a black outline around the icon without any SVG stroke. The outlined-sticker treatment is reserved for canvas-overlay markers and never applied to chrome icons.
3. **Inverted dark-pill primary CTA with elevated drop shadow.** Where most of the UI is hairline-flat, the primary action is the one moment the design permits weight — a 64px-tall dark pill that visibly hovers over the page. This single elevation event carries enormous emphasis precisely because nothing else in the chrome competes.
4. **Tracked-out 900-weight micro-uppercase as metadata grammar.** 10–11px, weight 900, +0.2em letter-spacing — used as section eyebrows, stat kickers, and field labels inside cards. The combination of extreme weight + extreme tracking at small size is the typographic signature.

## Do's and Don'ts

### Do

- Render every collected/owned object as a soft matte 3D-clay PNG on a transparent background.
- Always pair an object image with the elliptical floor-shadow primitive as its sibling.
- Use `{colors.primary}` only for active/live/positive states — tab active, status dots, focus rings.
- Make the primary CTA a dark inverted pill with the `0 12px 24px -8px rgba(26,26,26,0.18)` shadow.
- Reach for `{typography.label-uppercase}` (10px / 900 / +0.2em) whenever a label is acting as metadata.
- Keep grids airy — wide column gaps, even wider row gaps. Treat each tile like a specimen on a shelf.
- Use Phosphor `regular` (no suffix) for inactive icons and `-fill` for active icons.

### Don't

- Don't apply illustration palette colors (`illus-*`) to UI chrome surfaces, buttons, or backgrounds.
- Don't put illustrations inside framed/bordered cards — they render directly on the page surface.
- Don't make the primary CTA green. Green is for state, not action.
- Don't write `ph:[name]-regular` — that icon does not exist. The regular variant has no suffix.
- Don't use Light or Regular type weights anywhere — the design starts at 500 (Medium) and climbs.
- Don't add hard shadows, hard outlines, or hard corners to any rendered object — every edge is filleted.
- Don't size icons with HTML `width`/`height` attributes; always use Tailwind `size-*` classes.
- Don't crowd object grids; if it feels tight, double the gap.