Expiry Tracker — Stage & Spotlight Home

Senior product designer + React Native engineer. Build the home screen of an expiry & recharge reminder app whose centre is a character, not a chart.

React + TypeScript (React Native) + Tailwind-style tokens via a theme object + Reanimated for motion (Framer Motion equivalent on web previews).

"Stage & Spotlight": top 55% is a stage — the squirrel mascot stands under a spotlight holding today's single most urgent item (nearest expiry or due recharge). Below: a horizontal shelf of category dens (Fridge, Medicine, Batteries, Tasks) as colourful burrow cards with counts of items due this week. Bottom nav: Home / Add (+) centre-raised / Calendar / Settings. Four home states: all-clear (mascot relaxes), one-urgent (spotlight), many-urgent (spotlight + queue chips), empty (mascot invites first item).

Display: rounded font, 1.75rem for the spotlight item name. Body: system sans 1rem. Counts: 0.85rem/700 in category colour.

--background: 36 100% 96%; --surface: 0 0% 100%; --ink: 25 30% 15%; --primary: 205 100% 50%; category colours ≥70% saturation: fridge 190 90% 45%, medicine 350 85% 55%, battery 45 100% 50%, tasks 265 80% 62%.

8pt rhythm; shelf cards 1rem radius 1.5rem; stage padding 1.5rem; bottom nav height 4.5rem + safe area.

Spotlight cone sways gently (3s ease-in-out loop); mascot blinks; urgent item card pulses once on entry. Completing an item: mascot does a happy hop + confetti of leaves, and the reward + undo are one idempotent transaction (same event id never double-counts).

Designed 390px first; stage scales down to 360px without overlap; large-text accessibility keeps spotlight item fully visible.

Spotlight: "Greek yogurt — expires tomorrow"; All-clear: "Nothing needs you today. Tuck is napping."; Battery card: "Headphones — time to top up to ~50%".