designmd-forge 1.2.0

package/dist/data/designs/ios-locket.md

@@ -0,0 +1,381 @@
+# Design System Inspiration of Locket (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Locket's iOS app is built around a single, radical idea: the app is not the destination — **the Home Screen widget is**. Locket Widget lets a tiny circle of your closest friends post a live photo directly to a square widget on your phone's Home Screen. You don't open an app to "check a feed"; a friend's face just appears on your home screen, intimately, like a locket photo you carry. Every design decision flows from this: the aesthetic is warm, cozy, analog-nostalgic, and tiny-circle-intimate — the opposite of a cold, public, infinite social network. The world is a soft **cream-and-gold** palette: a cream canvas (`#FFF7EC`) under a gentle peach gradient (`#FFE9CC → #FFD9A8`), with **Locket Gold** (`#FFB02E`) as the one warm brand accent. It is light-UI by design — there is no dark mode in spirit; the warmth IS the brand.
+
+The signature surface, in-app, is the **camera capture screen**: a large **square, full-bleed friend photo** in a very rounded viewfinder (40pt corners), with the sender's name on a frosted chip ("from Ava") and an optional caption pill ("golden hour on the roof ✨") floating over the image. Below it sits the **big white circular capture button** — an 84pt white disc with a gold inner ring, flanked by a flip-camera and a small effects/flash control. This capture button is the most physical, recognizable interaction in the app: press it and the photo is instantly sent to your whole tiny friend circle and lands on their Home Screen widgets. The third signature is the **friends photo-history grid** — a tidy 4-column grid of square thumbnails of the recent photos your friends have sent, each with a small avatar dot, that you scroll back through like flipping a photo album.
+
+Color is warm and singular. Locket Gold (`#FFB02E`) is the brand; a deeper amber (`#F08A1D`) is used for text/icons on cream where gold lacks contrast; a friendly **warm coral** (`#FF7A59`) is the only secondary accent (used sparingly for hearts/reactions and avatar gradients). White (`#FFFFFF`) cards and the capture button pop off the warm gradient. Text is a warm near-black brown (`#2C2014`) — never pure black, to keep the cozy feel — with a muted taupe (`#8A7A63`) for metadata. Shadows are **honey-tinted** (`rgba(180,120,30,…)`), never neutral gray, so depth feels warm. Typography is **Poppins** — a warm, rounded, geometric sans — set at friendly weights (600–800). Everything about Locket is small, warm, close, and personal: a few friends, one photo, on your Home Screen.
+
+**Key Characteristics:**
+- **Widget-first** — the real product surface is the Home Screen widget; the app is the camera + history behind it
+- Warm cream-and-gold world — cream canvas (`#FFF7EC`), peach gradient (`#FFE9CC → #FFD9A8`); light-UI by design, no dark mode in spirit
+- **Square full-bleed friend photo** in a very-rounded viewfinder (40pt corners) — the in-app hero
+- Sender chip + caption pill — "from Ava" + optional caption floating over the photo on frosted glass
+- **Big white circular capture button** — 84pt white disc with a gold inner ring; instant send to your tiny circle
+- **Friends photo-history grid** — 4-up square thumbnails with avatar dots; scroll back like a photo album
+- Single warm brand accent — Locket Gold (`#FFB02E`), with deep amber (`#F08A1D`) on cream and warm coral (`#FF7A59`) secondary
+- Honey-tinted shadows (`rgba(180,120,30,…)`) — never gray; depth feels cozy
+- Poppins typography at warm rounded weights (600–800)
+- Tiny-circle intimacy — close-friends-only, no public profiles, no followers, no infinite feed
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Locket Gold** (`#FFB02E`): The single brand accent — primary CTA fill, capture-button inner ring, active tab, widget chrome.
+- **Locket Amber** (`#FF9E2C`): Slightly deeper gold for gradient partners and hover/secondary fills.
+- **Locket Deep** (`#F08A1D`): The on-cream accent — text links, active labels, "See all" — used where `#FFB02E` lacks contrast on cream.
+- **Gold Pressed** (`#DC7A12`): Pressed state for gold buttons.
+- **On-Gold Ink** (`#3A2400`): Text/glyph placed on a Locket Gold fill (warm dark brown, not black).
+
+### Canvas & Surfaces
+- **Cream Canvas** (`#FFF7EC`): The base background tone.
+- **App Gradient** (`#FFE9CC → #FFD9A8`): The full-bleed warm peach world behind content (top → bottom).
+- **Card White** (`#FFFFFF`): Pills, the capture button, info cards — pops off the warm gradient.
+- **Surface Warm** (`#FFF1DD`): Secondary surfaces (pressed rows, sub-panels) — a soft tan.
+- **Divider** (`#F2E2C9`): Hairline dividers on cream — a warm wheat.
+- **Frosted Chip** (`rgba(44,32,20,0.32)` + blur): Sender/caption chips over photos — a warm dark glass, never gray.
+- **Scrim** (`rgba(44,32,20,0.45)`): Dim behind modals/sheets — warm brown, never gray-black.
+
+> Locket is light-and-warm by design. There is no separate dark theme; the cozy cream-gold identity *is* the brand. (If a system dark accommodation is ever required, deepen to a warm espresso `#1A1409` canvas keeping gold accents and white capture button — but product intent is always warm/light.)
+
+### Text
+- **Text Primary** (`#2C2014`): Sender names, titles, captions — a warm near-black brown (never pure black).
+- **Text Secondary** (`#8A7A63`): Body, descriptions, metadata — a muted taupe.
+- **Text Tertiary** (`#B8A88E`): Timestamps, inactive labels, hints — light warm gray.
+- **Text on Gold** (`#3A2400`): On Locket Gold fills.
+- **Text on Photo** (`#FFFFFF`): On the sender/caption frosted chips over a photo.
+
+### Accent & Reactions
+- **Warm Coral** (`#FF7A59`): The single secondary accent — reaction hearts, avatar gradient partner, occasional emphasis. Used sparingly.
+- **Reaction Set**: Emoji reactions (❤️ 😂 🔥 😮) — rendered as emoji, not tinted shapes.
+
+### Semantic
+- **Success** (`#38C172`): "Sent!" confirmation toast.
+- **Error** (`#FF5A5A`): Failed send, validation (a soft warm red, never harsh).
+- **Warning** (`#F08A1D`): Reuses Locket Deep for soft warnings (palette discipline).
+- **Online Dot** (`#38C172`): Friend-active indicator.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Poppins` (by Indian Type Foundry / Jonny Pinhorn, SIL OFL) — a geometric sans with rounded, friendly proportions and even color. Its warm, approachable geometry matches Locket's cozy, personal feel. Closest free Google Font to Locket's rounded product type.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Weight philosophy**: Locket runs warm-medium — 600 (SemiBold) to 800 (ExtraBold) for emphasis, 500 for body. Avoid light weights; the friendly heft is part of the warmth.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Poppins | 32pt | 800 | 1.15 | -0.4pt | "Locket", big onboarding titles |
+| Screen Title | Poppins | 26pt | 700 | 1.2 | -0.3pt | "From your friends", "History" |
+| Section Header | Poppins | 22pt | 700 | 1.25 | -0.2pt | "Add to Home Screen" |
+| Sender Name | Poppins | 18pt | 700 | 1.3 | -0.1pt | "from Ava" over the photo |
+| Caption | Poppins | 16pt | 600 | 1.35 | 0pt | The optional caption on a photo |
+| Body | Poppins | 15pt | 500 | 1.45 | 0pt | Card body, onboarding copy |
+| Big Number | Poppins | 28pt | 800 | 1.0 | -0.5pt | Friend counts, streak counts |
+| Metadata | Poppins | 13pt | 400 | 1.3 | 0pt | "2 minutes ago · sent to 5 friends" |
+| Label | Poppins | 12pt | 700 | 1.0 | 0.4pt | "FROM YOUR FRIENDS" uppercase |
+| Button | Poppins | 16pt | 700 | 1.0 | 0.2pt | Primary CTA |
+| Pill | Poppins | 14pt | 700 | 1.0 | 0pt | Friends pill, soft buttons |
+| Tab Label | Poppins | 10pt | 700 | 1.0 | 0.1pt | Bottom tab labels |
+| Link / Action | Poppins | 13pt | 700 | 1.0 | 0pt | "See all ›", text links (`#F08A1D`) |
+
+### Principles
+- **Warm and friendly, never austere**: Poppins at 600–800 — rounded and cozy; avoid thin weights entirely.
+- **Photo-first, type-supporting**: type frames the photo (sender, caption, time) — it never competes with the image.
+- **Brown, not black**: primary text is `#2C2014` to preserve the warm, analog mood.
+- **Emoji are first-class**: captions and reactions use emoji freely — they ARE the personal voice.
+- **Dynamic Type**: sender names, captions, body scale; tab labels, uppercase labels, the capture button stay fixed (layout-critical).
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Send to friends)**
+- Shape: Full pill, 999pt corner radius
+- Background: `#FFB02E` (Locket Gold)
+- Text: `#3A2400` (warm dark brown), Poppins 16pt weight 700
+- Padding: 14pt vertical, 28pt horizontal
+- Pressed: background `#F08A1D` + scale 0.97
+- Shadow: `0 8px 20px rgba(180,120,30,0.30)` — a warm honey glow
+
+**Soft Button (Add widget / secondary)**
+- Background: `#FFFFFF`
+- Text: `#F08A1D`, Poppins 15pt weight 700
+- Corner radius: 999pt
+- Shadow: `0 6px 16px rgba(180,120,30,0.18)` (white card lifts off the warm world)
+- Pressed: background `#FFF1DD`
+
+**Outline Button (Invite a friend)**
+- Background: transparent
+- Border: 2pt `#FFB02E`
+- Text: `#F08A1D`, Poppins 15pt weight 700
+- Corner radius: 999pt
+- Pressed: background `rgba(255,176,46,0.12)`
+
+**Text Button (See all photos)**
+- Text: `#F08A1D`, Poppins 13–15pt weight 700
+- Often paired with "›"
+- No background; pressed: 70% opacity
+
+### Core Atoms
+
+**Capture Button (the signature interaction)**
+- Outer: 84pt white circle (`#FFFFFF`) with a 5pt `rgba(255,255,255,0.55)` translucent border ring
+- Inner: a 66pt circle with a 4pt `#FFB02E` gold ring (the ring is the recognizable mark)
+- Shadow: `0 10px 26px rgba(180,120,30,0.32)`
+- Press: scales to 0.92 then springs back; a quick gold ring pulse + shutter haptic on capture
+- Centered in the capture row, flanked by 50pt translucent-white side controls (flip camera, flash/effects)
+
+**Square Friend Photo / Viewfinder**
+- Aspect ratio: 1:1 (always square — like a locket)
+- Corner radius: 40pt (very round — soft and friendly)
+- Full-bleed image; subtle inner radial warm glow
+- Shadow: `0 24px 48px -22px rgba(160,100,20,0.55)`
+
+**Sender Chip (over photo)**
+- Frosted: `rgba(44,32,20,0.32)` + 6pt blur, 999pt radius
+- Leading 24pt avatar circle + "from {name}" Poppins 13pt weight 700 white
+- Top-left at 16pt inset
+
+**Caption Pill (over photo)**
+- Frosted: `rgba(44,32,20,0.36)` + 6pt blur, 16pt radius
+- Caption text Poppins 15pt weight 600 white, centered
+- Bottom-center at 18pt inset
+
+**Friends Pill (top bar)**
+- White (`#FFFFFF`) pill, soft honey shadow
+- Overlapping avatar stack (22pt circles, 2pt white borders, -8pt overlap) + "{n} friends" Poppins 13pt weight 700 `#2C2014`
+
+**History Cell**
+- 1:1 square thumbnail, 14pt corner radius
+- Small 14pt avatar dot bottom-left (who sent it)
+- Tap → opens that photo full-screen with sender/caption
+
+**Card (generic)**
+- Background: `#FFFFFF`, 20–24pt radius
+- Honey shadow `0 12px 26px -14px rgba(180,120,30,0.30)`
+- Internal padding 18–20pt
+
+### Navigation
+
+**Top Bar**
+- Height: 44pt + safe area, transparent over the gradient
+- Leading: a 38pt white circle icon button (add friend)
+- Center: the Friends pill (avatar stack + count)
+- Trailing: a 38pt white circle icon button (messages/chat)
+- No border (floats over the warm world)
+
+**Bottom Tab Bar**
+- Height: ~48pt + safe area (64pt visual), transparent over the gradient (no frosted bar — Locket keeps it minimal)
+- 3 slots: **Camera** (default/center-of-attention), History, You
+- Icon size: 24pt
+- Active color: `#F08A1D` (icons fill); inactive: `#B8A88E`
+- Labels: Poppins 10pt weight 700, always shown
+- Camera is the home tab — the app opens straight to the viewfinder
+
+**Widget (the real product surface — outside the app)**
+- Square Home Screen widget (small/medium): full-bleed latest friend photo, 24pt system-rounded corners
+- Optional tiny frosted "from {name}" chip bottom-left
+- Tap → deep-links into the Locket camera
+
+### Input Fields
+
+**Caption Field (on capture)**
+- A frosted pill over the photo before sending; tap to type
+- Text Poppins 15pt weight 600 white, placeholder "Add a message…" at 70% white
+
+**Friend Search / Invite**
+- Background: `#FFFFFF`, 999pt pill, soft honey shadow
+- Leading magnifier `#B8A88E`
+- Placeholder: "Search contacts" Poppins 15pt weight 500 `#B8A88E`
+
+### Distinctive Components
+
+**Capture → Send Flow (the signature)**
+- Square viewfinder → press the 84pt capture button → photo freezes with a quick gold ring pulse → optional caption pill → "Send to friends" gold pill → instant delivery to every friend's Home Screen widget
+- Confirmation: a brief "Sent ✨" toast + success haptic; no feed to return to — you just go back to the viewfinder
+
+**Friends Photo-History Grid**
+- 4-column square grid, 8pt gaps, 14pt cell radius
+- Each cell: a friend's photo + a small avatar dot (sender)
+- Scrolls vertically like an album; tap any cell → full-screen with sender + caption + reactions
+
+**Home Screen Widget Mock (in onboarding)**
+- A 116pt rounded-24pt square showing a sample friend photo with a "from {name}" chip
+- Used heavily in onboarding because the widget IS the product — "Add to Home Screen" is the core activation
+
+**Reaction Bar (on a full-screen photo)**
+- A frosted pill with emoji reactions (❤️ 😂 🔥 😮) + a quick "send a photo back" shortcut
+- Tapping an emoji floats it up with a small bounce; warm coral accent for the heart
+
+**Friends Pill / Tiny Circle**
+- Locket caps your circle small — the pill (avatar stack + count) reinforces intimacy ("5 friends", not "5,000 followers")
+
+**Streak / Moments (optional)**
+- Lightweight warm streak counter for daily photo exchange — gold flame-ish, Poppins 28pt weight 800 number — but secondary to the core loop
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 18, 20, 24, 28, 40, 48
+- Viewfinder side inset: 18pt; capture row vertical padding 24/14pt
+- History grid gap: 8pt
+- Sender chip inset: 16pt; caption pill inset: 18pt
+
+### Grid & Container
+- iPhone: single column — viewfinder (square) above, capture row, then a 4-up history strip
+- History: strict 4-column square grid (album feel)
+- iPad: viewfinder centered with a max-width (~480pt) — Locket stays phone-shaped and intimate; never a wide multi-pane
+- One photo in focus at a time; history is the only scroll
+
+### Whitespace Philosophy
+- **The photo is everything**: the warm gradient is generous negative space framing one square photo
+- **Cozy, not sparse**: warm tones make even empty space feel intimate, not cold
+- **Minimal chrome**: transparent top/bottom bars, white pills floating — the photo and capture button dominate
+- **Album rhythm**: the history grid is tidy and even, like flipping a physical photo book
+
+### Border Radius Scale
+- Square (0pt): rare — full-bleed gradient only
+- Standard (8pt): tiny chips
+- Comfortable (14pt): history cells, small panels
+- Card (20–24pt): info cards, the Home Screen widget (24pt system)
+- Pill (16pt): caption pill over photo
+- Hero (40pt): the square friend photo / viewfinder — the signature very-round corner
+- Full Pill (500pt): primary CTAs, friends pill, sender chip, search
+- Circle (50%): the capture button, avatars, side controls
+
+## 6. Depth & Elevation
+
+Locket uses warm, soft depth — white elements float gently off the cream-gold world with honey-tinted shadows (never neutral gray), reinforcing the cozy, tactile feel.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| World (Level 0) | The warm gradient, no shadow | App background |
+| Photo (Level 1) | `rgba(160,100,20,0.55) 0 24px 48px -22px` | The square friend photo / viewfinder |
+| Capture Button (Level 1.5) | `rgba(180,120,30,0.32) 0 10px 26px` | The 84pt white capture disc |
+| White Pill / Card (Level 1) | `rgba(180,120,30,0.18–0.30) 0 6–12px 16–26px` | Friends pill, soft buttons, info cards |
+| Sheet (Level 2) | `rgba(160,100,20,0.4) 0 -8px 28px` + 28pt top radius | Bottom sheets (share, invite) |
+| Scrim | `rgba(44,32,20,0.45)` | Dim behind modals — warm brown, never gray |
+
+**Shadow Philosophy**: Every shadow carries a *honey/amber tint* (`rgba(180,120,30,…)` or `rgba(160,100,20,…)`) rather than neutral black, so depth feels warm and analog — like sunlight, not a UI drop shadow. The square photo gets the deepest, softest shadow so it reads as a physical print you could hold. White pills lift gently off the gradient with a subtle warm glow.
+
+### Motion
+- **Capture press**: button scales 1.0 → 0.92 (90ms) then springs back; a gold ring pulse expands outward (250ms) + shutter haptic
+- **Photo freeze → send**: captured photo does a tiny scale-down "snapshot" bounce; on send it lifts and fades upward (320ms ease-in) with a "Sent ✨" toast
+- **Incoming photo**: the new friend photo cross-dissolves into the viewfinder/widget with a soft 280ms fade + gentle scale 1.03 → 1.0
+- **History open**: tapped cell scales up into a full-screen photo (shared-element-style, 300ms spring)
+- **Reaction**: tapped emoji bounces and floats up ~40pt with fade (500ms), warm coral heart pulse
+- **Friends pill**: avatars do a subtle staggered pop-in when the circle updates
+- **Tab switch**: warm cross-fade 220ms; active icon eases to `#F08A1D`
+- **Widget refresh**: on the Home Screen, the photo updates with a gentle fade (system-paced)
+- **Haptics**: a satisfying shutter impact on capture, soft tick on reaction, success haptic on "Sent", light tick on tab change
+
+## 7. Do's and Don'ts
+
+### Do
+- Treat the **Home Screen widget as the primary product** — the app is the camera + history behind it
+- Use the warm cream-gold world (`#FFF7EC` / `#FFE9CC → #FFD9A8`) — Locket is light & warm by design
+- Make the friend photo a **square, full-bleed, very-rounded (40pt)** hero
+- Use the big white circular capture button with a gold inner ring as the signature interaction
+- Float the sender chip + optional caption on **warm frosted glass** over the photo
+- Show a tidy 4-up friends photo-history grid — scroll it like an album
+- Keep Locket Gold (`#FFB02E`) as the single brand accent (deep amber `#F08A1D` on cream, coral `#FF7A59` secondary)
+- Use honey-tinted shadows (`rgba(180,120,30,…)`) — never neutral gray
+- Use warm brown text (`#2C2014`) — never pure black
+- Keep the circle tiny — close-friends-only; reinforce intimacy ("5 friends", not followers)
+
+### Don't
+- Don't ship a dark theme — Locket's identity is warm cream-gold; light by design
+- Don't build a public feed or follower graph — it's a tiny private circle posting to your Home Screen
+- Don't make the photo rectangular or sharp-cornered — it's a square with a very round (40pt) corner, like a locket
+- Don't use neutral gray shadows — all elevation is honey/amber tinted
+- Don't use pure black text — warm brown `#2C2014` keeps the cozy mood
+- Don't add a second brand color beyond gold (+ the single warm coral secondary)
+- Don't bury the "Add widget" activation — the widget IS the product; surface it prominently in onboarding
+- Don't make it feel corporate, cold, or minimal-techy — Locket is warm, analog, and personal
+- Don't add infinite scroll — only the history grid scrolls; the core is one photo at a time
+- Don't crop a friend's photo aggressively — keep the square frame honest and full-bleed
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Viewfinder 36pt corners; capture button 76pt; 4-up history stays 4-up |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated; top pills clear it |
+| iPhone 15/16 Pro Max | 430pt | Larger viewfinder; 88pt capture button; more breathing room |
+| iPad (portrait) | 768pt | Viewfinder centered, max-width ~480pt — phone-shaped & intimate, not a wide pane |
+| iPad (landscape) | 1024pt+ | Same centered square viewfinder; warm gradient fills the rest |
+
+### Dynamic Type
+- Scales: sender names, captions, body, onboarding copy
+- Fixed: tab labels, uppercase labels, the capture button, history-cell chrome (layout-critical)
+- Long captions wrap to 2 lines on the pill then truncate
+
+### Orientation
+- Portrait-first (a quick one-handed camera app)
+- Landscape supported for capture only; viewfinder stays square and centered
+- The Home Screen widget is square in all cases (system-driven)
+
+### Touch Targets
+- Capture button: 84pt visual, ≥ 84pt hit (the primary action — generous)
+- Side controls (flip/flash): 50pt circle, 50pt hit
+- Top icon buttons: 38pt circle, 44pt hit
+- History cells: full cell tappable
+- Tab items: 24pt glyph, 48pt hit
+
+### Safe Area Handling
+- Top: friends pill + icon buttons respect the Dynamic Island
+- Bottom: tab bar + home indicator respected; nothing crowds the capture button
+- Sides: 18pt gutter from screen edge to the viewfinder
+- The warm gradient extends fully edge-to-edge (it's the world)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- App gradient: `#FFE9CC → #FFD9A8`
+- Cream canvas: `#FFF7EC`
+- Locket Gold (brand): `#FFB02E`
+- Locket Amber: `#FF9E2C`
+- Locket Deep (on-cream accent): `#F08A1D`
+- Gold pressed: `#DC7A12`
+- On-gold ink: `#3A2400`
+- Warm Coral (secondary): `#FF7A59`
+- Card white: `#FFFFFF`
+- Surface warm: `#FFF1DD`
+- Divider: `#F2E2C9`
+- Text primary: `#2C2014` (warm brown, not black)
+- Text secondary: `#8A7A63`
+- Text tertiary: `#B8A88E`
+- Frosted chip: `rgba(44,32,20,0.32)` + blur
+- Success: `#38C172` · Error: `#FF5A5A`
+
+### Example Component Prompts
+- "Build the Locket capture button in SwiftUI: an 84pt white (`#FFFFFF`) circle with a 5pt `rgba(255,255,255,0.55)` translucent border; inside, a 66pt circle bordered with a 4pt `#FFB02E` gold ring. Apply a warm shadow `rgba(180,120,30,0.32)` blur 26 y 10. On press, scale to 0.92 then spring back, and on capture pulse an expanding gold ring outward over 250ms with a shutter haptic."
+
+- "Create the Locket square viewfinder: a 1:1 aspect container with a 40pt corner radius, full-bleed friend photo, a subtle inner radial warm glow, and a soft shadow `rgba(160,100,20,0.55)` blur 48 y 24 spread -22. Overlay a top-left frosted sender chip: `rgba(44,32,20,0.32)` + 6pt blur, 999pt radius, a 24pt avatar circle + 'from {name}' in Poppins 13pt weight 700 white. Overlay a bottom-center caption pill: `rgba(44,32,20,0.36)` + 6pt blur, 16pt radius, caption in Poppins 15pt weight 600 white."
+
+- "Build the Locket friends photo-history grid: a 4-column grid of 1:1 square cells, 8pt gaps, 14pt corner radius each, on the warm cream world. Each cell shows a friend's photo with a 14pt avatar dot bottom-left (sender). Tapping a cell scales it up into a full-screen photo (300ms spring) showing sender + caption + a frosted reaction bar."
+
+- "Create the Locket primary button: a full pill (999pt) filled `#FFB02E`, text `#3A2400` in Poppins 16pt weight 700, 14pt vertical / 28pt horizontal padding, with a warm shadow `rgba(180,120,30,0.30)` blur 20 y 8. Pressed: background `#F08A1D` + scale 0.97."
+
+- "Build the Locket friends pill for the top bar: a white (`#FFFFFF`) pill with a soft honey shadow `rgba(180,120,30,0.18)`, containing an overlapping avatar stack (22pt circles, 2pt white borders, -8pt overlap, gradient fills) and '{n} friends' in Poppins 13pt weight 700 `#2C2014`. 8pt vertical / 16pt horizontal padding, 999pt radius."
+
+- "Create the Locket Home Screen widget mock for onboarding: a 116pt square with 24pt corner radius, a full-bleed sample friend photo, and a small bottom-left frosted 'from {name}' chip in Poppins 10pt weight 700 white. Add a warm shadow `rgba(160,100,20,0.40)` blur 26 y 12. Caption it 'The widget IS the product — tap it to open the camera.'"
+
+### Iteration Guide
+1. The **widget is the product** — design the Home Screen widget first; the app is the camera + history behind it
+2. The world is warm cream-gold (`#FFF7EC`, `#FFE9CC → #FFD9A8`) — Locket is LIGHT & WARM by design; never a dark theme
+3. The friend photo is a SQUARE, full-bleed image with a very round 40pt corner — like a locket, never rectangular/sharp
+4. The signature interaction is the 84pt white circular capture button with a gold (`#FFB02E`) inner ring
+5. Sender + caption float on WARM frosted glass (`rgba(44,32,20,…)`) over the photo — never gray glass
+6. Locket Gold `#FFB02E` is the single brand accent (deep amber `#F08A1D` on cream, warm coral `#FF7A59` secondary only)
+7. The friends photo-history is a tidy 4-up square grid scrolled like a photo album
+8. All shadows are honey/amber tinted (`rgba(180,120,30,…)`) — never neutral gray
+9. Text is warm brown `#2C2014`, never pure black; type is Poppins at warm 600–800 weights
+10. Keep the circle TINY and private — close-friends-only, no public feed, no followers; intimacy over scale