designmd-forge 1.2.0

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

@@ -0,0 +1,406 @@
+# Design System Inspiration of Clubhouse (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Clubhouse's iOS app feels like a warm, well-lit hallway in someone's home rather than a tech product. The canvas is a soft, paper-like cream (`#F2EFE4`) — not white, not gray, a deliberately analog off-cream that reads like recycled stationery. On top of that hallway sits a flow of rounded, hand-drawn-feeling elements: circular profile photos with playful illustrated avatars, fully pill-shaped buttons, and — the defining typographic gesture — room and screen titles set in a **serif display face** (Clubhouse uses a humanist serif; DM Serif Display is the closest free substitute). The combination of cream paper + serif headlines + circular faces gives Clubhouse an intimate, salon, almost literary feel that is the opposite of the cold blue-gray of most social apps.
+
+The product is entirely audio, so the interface is **a stage of faces, not a feed of posts**. The signature screen is a **live Room**: a serif room title at top, then a responsive grid of circular speaker avatars grouped into "Speakers", "Followed by the speakers", and "Others in the room", and a bottom control bar with the famous **"✋ Raise hand"** pill and a quiet **"✌️ Leave quietly"** exit. The single most important visual signal in the entire product is the **emerald speaking ring** (`#38B569`): when someone is talking, their circular avatar gets a 3px emerald ring plus a soft pulsing halo (`rgba(56,181,105,0.18)`). This green pulse is Clubhouse's "now playing" — it is how you read a silent screen and know who has the floor. Hosts get a small 🎙️ pin; moderators a gold accent; muted users dim to ~55% opacity.
+
+The color system is warm and restrained. The hero is cream paper; the one true accent is the Speaking Emerald (used almost exclusively for the speaking ring and the primary "Start a room" CTA). A warm moderator gold (`#E9C46A`) and a soft leave-red (`#E5575C`) are the only other chromatic colors. Avatars carry their own warm gradient palette (peach, sage, lavender, coral, sky) — these provide most of the screen's color, the way photography does for other apps. There is no blue, no cold gray; even the dark mode is a warm near-black (`#1A1A1A`), never a slate.
+
+Typography is a deliberate two-face pairing: a **serif display** for all titles (room titles, screen headers, the "Good morning" greeting, pull-quotes) and a clean **sans (Inter / SF Pro)** for every piece of UI text (names, roles, metadata, buttons, body). The serif is what makes Clubhouse feel like a printed invitation; the sans keeps the controls legible and modern. Nothing is uppercase except tiny overlines; the voice is warm sentence-case throughout.
+
+**Key Characteristics:**
+- Cream "hallway" canvas (`#F2EFE4`) light / warm near-black room (`#1A1A1A`) dark — paper, never white/slate
+- Serif display titles + sans UI — the signature literary-salon pairing
+- Circular illustrated avatars everywhere — the product is faces, not cards
+- Emerald speaking ring (`#38B569`) — 3px ring + soft pulse halo = "who has the floor"
+- Live Room = grid of speaker circles grouped Speakers / Followed / Others
+- "✋ Raise hand" + "✌️ Leave quietly" — emoji-led pill controls with a human voice
+- Everything is a pill — buttons, chips, status badges; almost no rectangles
+- Host 🎙️ pin + moderator gold + muted 55% dim — role state read at a glance
+- The Hallway — a scrollable list of live & upcoming rooms with stacked avatar previews
+- Warm gradient avatar palette (peach / sage / lavender / coral / sky) carries the color
+- No blue, no cold gray — the whole system is warm; dark mode stays warm
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Speaking Emerald** (`#38B569`): The single brand accent — speaking ring/halo, primary "Start a room" CTA, "Open" room status, active toggles.
+- **Emerald Deep** (`#2E9A58`): Pressed state of the emerald CTA.
+- **Emerald Soft** (`#38B569` @ 18% — `rgba(56,181,105,0.18)`): The pulse-halo behind a speaking avatar, emerald chip backgrounds.
+
+### Canvas & Surfaces (Light — the Hallway)
+- **Cream Hallway** (`#F2EFE4`): Primary light canvas — every screen background.
+- **Cream Card** (`#FBF9F1`): Slightly lighter card / sheet / row surface lifted off the hallway.
+- **Cream Pressed** (`#EAE6D8`): Pressed rows, selected cells.
+- **Divider** (`#DDD8C8`): Hairline separators on cream.
+
+### Canvas & Surfaces (Dark — the Room)
+- **Dark Room** (`#1A1A1A`): Primary dark canvas — a *warm* near-black, NOT a slate/blue-gray.
+- **Dark Surface 1** (`#242220`): Cards, sheets, the room footer — warm-tinted, not neutral.
+- **Dark Surface 2** (`#2E2B27`): Soft buttons, pressed rows, mute badges.
+- **Dark Divider** (`#3A372F`): Hairline separators on dark.
+
+### Text
+- **Ink** (`#1A1A1A`): Primary text on cream (titles, names) — a warm near-black.
+- **Ink Secondary** (`#6B6453`): Metadata, roles, captions on cream.
+- **Ink Tertiary** (`#9A9483`): Group overlines, disabled on cream.
+- **Cream Text Primary** (`#F2EFE4`): Primary text on the dark room.
+- **Cream Text Secondary** (`#B8B2A0`): Metadata on dark.
+- **Cream Text Tertiary** (`#837D6D`): Overlines, disabled on dark.
+
+### Light + Dark Token Map
+
+| Role | Light (Hallway) | Dark (Room) |
+|------|-----------------|-------------|
+| Canvas | `#F2EFE4` | `#1A1A1A` |
+| Surface 1 | `#FBF9F1` | `#242220` |
+| Surface 2 | `#EAE6D8` | `#2E2B27` |
+| Divider | `#DDD8C8` | `#3A372F` |
+| Text Primary | `#1A1A1A` | `#F2EFE4` |
+| Text Secondary | `#6B6453` | `#B8B2A0` |
+| Speaking Emerald | `#38B569` | `#38B569` (identical) |
+| Moderator Gold | `#E9C46A` | `#E9C46A` (identical) |
+| Leave / Error | `#D9534F` | `#E5575C` |
+
+### Avatar Gradient Palette (content color)
+Illustrated avatars carry most of the screen's color — assign one per user, deterministically by id.
+
+| Name | Gradient |
+|------|----------|
+| Peach | `#F4C77B → #E0A24B` |
+| Sage | `#9FD8B4 → #5FB484` |
+| Lavender | `#C9B6E8 → #9C7FD0` |
+| Coral | `#F2A9A0 → #D9776B` |
+| Sky | `#A9C7E8 → #6E9CD0` |
+
+### Semantic
+- **Speaking** (`#38B569`): The speaking ring + pulse — the most important state in the app.
+- **Host / Moderator** (`#E9C46A`): Host 🎙️ pin tint, moderator name accent.
+- **Leave / Destructive** (`#E5575C`): "Leave quietly", "End room", remove-from-stage.
+- **Muted**: not a color — the speaker's avatar drops to ~55% opacity + a small mute badge.
+- **Success** (`#38B569`): "Room scheduled", "Now following" — reuses the emerald.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display (Titles)**: Clubhouse uses a humanist serif display for headlines. Closest free substitute: **`DM Serif Display`** (Google Fonts, by Colophon, SIL OFL) — high-contrast, warm, literary.
+- **Serif Alternate**: `Lora` (Google Fonts, SIL OFL) — for longer-form serif body if needed (room descriptions in serif).
+- **UI / Sans**: `Inter` (by Rasmus Andersson, SIL OFL) — names, roles, metadata, buttons, body. Falls back to SF Pro on iOS.
+- **Fallback Stack (serif)**: `'DM Serif Display', Georgia, 'Times New Roman', serif`
+- **Fallback Stack (sans)**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Room Title | DM Serif Display | 28pt | 400 | 1.2 | -0.2pt | The room's topic — the hero of a Room |
+| Screen Title | DM Serif Display | 24pt | 400 | 1.2 | -0.2pt | "Good morning, Jia", "Explore" |
+| Pull-Quote | DM Serif Display Italic | 20pt | 400 (italic) | 1.3 | 0pt | Onboarding / empty-state lines |
+| Section Header | Inter | 18pt | 700 | 1.3 | -0.1pt | "Upcoming for you", "Happening now" |
+| Subsection | Inter | 16pt | 700 | 1.3 | 0pt | Card titles in the Hallway list |
+| Body | Inter | 16pt | 400 | 1.5 | 0pt | Room descriptions, bios |
+| Speaker Name | Inter | 15pt | 600 | 1.2 | 0pt | Under each avatar circle |
+| Button | Inter | 16pt | 700 | 1.0 | 0pt | All pill buttons |
+| Meta | Inter | 14pt | 400 | 1.4 | 0pt | "218 in the room · 24 speakers" |
+| Role Tag | Inter | 12pt | 600 | 1.2 | 0pt | "Host", "Speaker", "Moderator" |
+| Overline | Inter | 11pt | 700 | 1.0 | +0.8pt | UPPERCASE group labels ("SPEAKERS") |
+| Tab Label | Inter | 10pt | 600 | 1.0 | 0pt | Bottom tab labels |
+
+### Principles
+- **Serif for content, sans for chrome**: every title/topic/greeting/quote is the serif display; every name/role/button/meta is Inter. Never set a button or a name in serif; never set a room title in sans.
+- **Warm sentence-case voice**: only the tiny group overlines are UPPERCASE. Buttons, titles, and rooms use sentence case ("Raise hand", "Leave quietly", not "RAISE HAND").
+- **Weights stay 400 / 600 / 700**: serif at 400 (its high contrast carries the emphasis), sans names at 600, sans headers/buttons at 700. No thin, no black.
+- **Emoji are first-class glyphs**: ✋ ✌️ 🎙️ ☕️ are part of the type voice — buttons and room titles routinely lead or end with an emoji. Render them inline at text size.
+- **Dynamic Type**: serif titles, section headers, body, names scale; role tags, overlines, tab labels stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button ("Start a room" / "Join")**
+- Shape: Full pill (corner radius = half height, ~26pt on a 52pt button)
+- Background: `#38B569` (Speaking Emerald) / text `#07210F` (deep green-black for warmth, AA on emerald)
+- Padding: 14pt vertical, 28pt horizontal
+- Font: Inter 16pt weight 700
+- Often leads with a glyph: "✚ Start a room"
+- Pressed: background `#2E9A58` + scale 0.98
+
+**Outline / Secondary Button ("Follow")**
+- Background: transparent
+- Text: Ink (`#1A1A1A`) / Cream (`#F2EFE4`) on dark
+- Border: 1.5pt solid current text color
+- Padding: 12pt vertical, 24pt horizontal
+- Corner radius: full pill
+- Pressed: 8% fill of text color
+
+**Soft Button ("Raise hand ✋")**
+- Background: Surface 2 (`#EAE6D8` light / `#2E2B27` dark)
+- Text: Ink / Cream, Inter 14–16pt weight 700
+- Corner radius: full pill
+- Padding: 12pt vertical, 20pt horizontal
+- Trailing/leading emoji at text size
+- Pressed: surface darkens ~6%
+
+**Leave / Destructive Button ("✌️ Leave quietly")**
+- Background: Surface 2 (`#2E2B27`) — NOT a red fill
+- Text: Leave Red (`#E5575C`), Inter 14pt weight 700
+- Corner radius: full pill
+- The voice is gentle — "Leave quietly", never "Exit"
+
+**Icon Button (room top bar — info, share, ⋯)**
+- Glyph: 20–22pt stroke, `stroke-width` 2
+- Hit area: 44pt
+- Color: Text Secondary; pressed → Text Primary
+- No background ring
+
+### Speaker Avatar (the core atom)
+
+The defining component. A circular face with state.
+- **Shape**: perfect circle, 56–64pt in the Room grid (larger for the active speaker), illustrated/photo fill
+- **Idle**: no ring
+- **Speaking**: 3pt solid `#38B569` ring + an animated pulse halo `rgba(56,181,105,0.18)` that breathes 1.0 → 1.12 scale at ~0.9s loop while audio is detected
+- **Muted**: avatar opacity → ~55% + a 22pt circular mute-badge bottom-right (`#2E2B27` fill, stroke mic-slash, 2pt canvas-colored border)
+- **Host**: 🎙️ pin top-right in a 20pt circular badge
+- **Moderator**: name rendered in Moderator Gold (`#E9C46A`)
+- **Name**: below the circle, Inter 15pt w600, centered, 1-line truncate; optional role line Inter 10–12pt Text Tertiary
+- New-speaker entrance: scale 0.8 → 1.0 + fade, 200ms ease-out, soft haptic
+
+### Room Stage (grid of speakers)
+
+- Grouped sections with UPPERCASE overlines: "SPEAKERS", "FOLLOWED BY THE SPEAKERS", "OTHERS IN THE ROOM · {n}"
+- Grid: 4 columns on phone (3 on small), 14pt row gap, 6pt column gap
+- Speakers section uses the largest circles; "Others" can be smaller (44pt)
+- Scrolls vertically; the room title + top bar are sticky, the footer control bar is pinned
+
+### Navigation
+
+**Room Top Bar**
+- Height: 52pt + safe area
+- Leading: down-chevron (collapse room to a mini-bar) — 18pt stroke `#B8B2A0`
+- Trailing: add-people (`person.badge.plus`), share/⋯ — 20pt stroke icons
+- Background: canvas, no border (the serif title sits just below it)
+
+**Room Footer / Hand Bar**
+- Height: ~72pt + safe area
+- `border-top` 0.5pt divider, background = canvas
+- Left: "✋ Raise hand" soft pill (becomes "✋ Hand raised" emerald-tinted when active)
+- Right: a small speaking-pulse dot + your own mic toggle (mic / mic-slash), 22pt
+- When you are a speaker, the left pill becomes a mute/unmute pill instead
+
+**Bottom Tab Bar** (Hallway / Explore / Activity / Profile)
+- Height: 52pt + safe area
+- Background: canvas with 0.5pt top divider
+- 4 tabs: Hallway (house), Explore (compass/search), Activity (bell), Profile (avatar)
+- Active: Ink / Cream filled icon + label; inactive: Text Tertiary
+- Center "+" optional: a circular emerald FAB-style "Start a room" on the Hallway
+
+**Hallway List Row (a live/upcoming room card)**
+- Surface 1 card, 16pt corner radius, 16pt padding, 12pt vertical gap between cards
+- Top line: club name + status pill ("● Open" emerald / "Social" / "Closed")
+- Title: serif 20pt
+- Stacked avatar cluster (3–5 overlapping circles, -10pt overlap) + speaker count
+- Trailing: a soft "Join" pill (emerald-tinted if live) or "🔔 reminder" if upcoming
+
+### Input Fields
+
+**Search (Explore / Find people)**
+- Height: 44pt
+- Background: Surface 1 (`#FBF9F1` / `#242220`)
+- Border: none
+- Corner radius: full pill
+- Leading magnifier 16pt Text Secondary
+- Placeholder: "Find people and rooms" Inter 15pt Text Secondary
+- Focus: 1.5pt `#38B569` ring
+
+**Room Topic Composer (Start a room sheet)**
+- A large serif text input ("What do you want to talk about?") on the canvas, no box, placeholder in Text Tertiary serif
+- Audience selector below as three pills: Open / Social / Closed (selected = emerald-tinted)
+
+### Distinctive Components
+
+**Speaking Pulse Ring**
+- See Speaker Avatar — the 3pt emerald ring + breathing halo. The single most identifiable Clubhouse element.
+
+**Raise-Hand Bar**
+- The "✋ Raise hand" pill at the footer; tapping animates the hand emoji with a small wave (rotate -15° ↔ +15°, 2 cycles) + soft haptic, then the pill flips to "✋ Hand raised" emerald-tinted with a tiny "Waiting" state. Moderators see raised hands as a queue tray that slides up.
+
+**Stacked Avatar Cluster**
+- 3–5 circular avatars overlapping by ~10pt (z-ordered left-on-top), used in Hallway cards and "X, Y and 218 others" rows. A trailing "+218" pill chip when overflowing.
+
+**Club Header**
+- A club page leads with a serif club name, a circular club icon, member count, and an emerald "Follow"/"Member" pill — same warm card language.
+
+**Ping / Invite Sheet**
+- A bottom sheet with a search field + a grid of circular friend avatars; tap to "ping" them into the room (a soft bell animation on the pinged avatar).
+
+**Mini Room Bar**
+- When you collapse a room (down-chevron), it docks as a thin pill bar above the tab bar: room title (truncated serif), the active speaker's pulsing circle, and a leave ✕. Tap to re-expand (sheet slides up 300ms).
+
+**Schedule Card**
+- An upcoming room: serif title, date/time chip, host avatars, and a "🔔 Set a reminder" pill that toggles to "🔔 Reminder set" emerald-tinted.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 14, 16, 20, 24, 28, 32, 40, 48
+- Speaker grid: 14pt row gap, 6pt column gap, 16pt screen inset
+- Card padding: 16pt; inter-card gap: 12pt
+- Room title: 22pt horizontal inset, 14pt below the top bar
+
+### Grid & Container
+- iPhone: speaker grid 4-up (3-up on SE); Hallway cards full-width minus 16pt
+- iPad: speaker grid 6–8-up; Hallway cards in a 2-column masonry, max content ~760pt centered
+- The room footer + top bar are pinned; only the speaker stage scrolls
+- Stacked avatar clusters overlap -10pt and cap at 5 visible + a "+N" pill
+
+### Whitespace Philosophy
+- **Faces, not boxes**: the screen is mostly circular avatars on cream — generous gaps so faces breathe; the grid is airy, never dense
+- **The serif title gets room**: room/screen titles sit on their own with 14–20pt of clearance, like a printed headline
+- **Cards are soft and spaced**: Hallway rows are rounded cards with 12pt between them, never edge-to-edge list rows
+- **The emerald is precious**: green appears only for speaking + the primary CTA + open status — never as decoration
+
+### Border Radius Scale
+- Square (0pt): essentially unused — Clubhouse avoids hard rectangles
+- Soft (8pt): inline chips, small tags
+- Standard (12pt): bottom-sheet handles, inputs-as-rect (rare)
+- Comfortable (16pt): Hallway room cards, sheets
+- Large (24pt): modal sheets, onboarding cards
+- Pill (500pt): ALL buttons, status badges, search fields — the default
+- Circle (50%): every avatar, the mute badge, the host pin, the speaking ring
+
+## 6. Depth & Elevation
+
+Clubhouse is soft and nearly flat — warmth comes from color and roundness, not heavy shadow.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | The hallway canvas, speaker grid, overlines |
+| Card (Level 1) | `rgba(0,0,0,0.05) 0 2px 10px` (light) / none + `#242220` lift (dark) | Hallway room cards |
+| Speaking Halo | `0 0 0 8px rgba(56,181,105,0.18)` + breathing scale | The pulse around a speaking avatar (a glow, not a drop shadow) |
+| Sheet (Level 2) | `rgba(0,0,0,0.12) 0 -6px 24px`, 24pt top radius | Start-a-room sheet, ping sheet, raised-hands tray |
+| Mini Bar (Level 2) | `rgba(0,0,0,0.16) 0 4px 16px` | The collapsed room mini-bar above the tab bar |
+| Modal Scrim | `rgba(20,18,16,0.5)` (warm, not pure black) | Behind sheets |
+
+**Shadow Philosophy**: Clubhouse uses minimal, very soft shadows. Hallway cards get a barely-there `0 2px 10px` lift on cream; in dark they rely on the warm `#242220` surface against `#1A1A1A`, not shadow. The one "elevation" that matters is not a shadow at all — it is the **emerald glow halo** around speaking avatars, which is an additive colored glow that breathes. Scrims are warm-tinted (`rgba(20,18,16,0.5)`), never cold black, to preserve the hallway warmth.
+
+### Motion
+- **Speaking pulse**: avatar ring + halo breathe scale 1.0 → 1.12 over ~0.9s ease-in-out, looping while voice activity is detected; stops smoothly (200ms) on silence
+- **New speaker joins stage**: avatar scales 0.8 → 1.0 + fades in over 200ms ease-out + soft haptic; existing avatars reflow with 200ms ease-out
+- **Raise hand**: ✋ emoji waves (rotate ±15°, 2 cycles, 600ms) + soft haptic; pill cross-fades to "Hand raised" emerald-tinted
+- **Moderator invites you up**: a celebratory bottom sheet slides up 300ms + medium haptic; your avatar animates from "Others" into the "Speakers" group
+- **Room enter**: room sheet slides up full-screen 300ms ease-out; serif title fades + rises 8pt
+- **Collapse to mini-bar**: room sheet slides down to a thin docked pill 280ms ease-in; the speaking pulse continues in the mini-bar
+- **Leave quietly**: sheet dismisses down 250ms, no confirmation drama — the voice is calm
+- **Tab switch**: cross-fade 200ms
+- **Pull-to-refresh Hallway**: a custom warm spinner; rooms re-stack with 200ms ease-out
+- **Haptics**: soft impact on raise-hand, new-speaker, ping; medium on invited-to-speak; selection tick on audience-pill change
+- **Reduce Motion**: the speaking pulse becomes a static 3pt ring (no breathing); sheet transitions become cross-fades; hand-wave is skipped
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the cream hallway (`#F2EFE4`) as the light canvas — warm paper, never white
+- Keep dark mode warm (`#1A1A1A` / `#242220`) — a warm near-black, never a slate/blue-gray
+- Set every title, topic, and greeting in the serif display; every name/role/button in Inter
+- Make the emerald speaking ring (`#38B569`, 3pt + soft pulse halo) the primary signal of "who's talking"
+- Render every button, status badge, and search field as a full pill
+- Make every avatar a perfect circle; use the warm gradient palette for illustrated avatars
+- Dim muted speakers to ~55% opacity + a circular mute badge
+- Lead controls with emoji where it adds warmth ("✋ Raise hand", "✌️ Leave quietly")
+- Group the stage into Speakers / Followed by speakers / Others with UPPERCASE overlines
+- Use a warm scrim (`rgba(20,18,16,0.5)`) behind sheets, not cold black
+- Keep the voice gentle and human in all copy ("Leave quietly", not "Exit room")
+
+### Don't
+- Don't use white or cold gray as the canvas — it must be warm cream / warm near-black
+- Don't set room titles or greetings in a sans face — the serif IS the brand
+- Don't use rectangles for buttons — everything is a pill
+- Don't introduce blue or a cold accent — the only accent is Speaking Emerald
+- Don't show "who's talking" with a color fill or a waveform bar — it is the emerald ring + pulse
+- Don't make the speaker grid dense — faces need air; it is a salon, not a contact sheet
+- Don't use square avatars or rounded-rect cards for people — people are always circles
+- Don't make "Leave" a red destructive alarm — the exit is calm and quiet
+- Don't animate the speaking pulse aggressively — it is a slow ~0.9s breath, not a strobe
+- Don't drop heavy drop-shadows — depth is soft color + roundness, plus the emerald glow
+- Don't uppercase buttons or titles — only the tiny group overlines are caps
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Speaker grid 3-up; smaller 52pt avatars; Hallway cards full-bleed |
+| iPhone 13/14/15 | 390pt | Standard layout; 4-up speaker grid, 60pt avatars |
+| iPhone 15/16 Pro | 393pt | Dynamic Island clears the room top bar |
+| iPhone 15/16 Pro Max | 430pt | Larger 64pt avatars; serif title can go 30pt |
+| iPad (portrait) | 768pt | Speaker grid 6-up; Hallway 2-column masonry; content max ~760pt centered |
+| iPad (landscape) | 1024pt+ | Speaker grid 8-up; room footer becomes a centered rail; Hallway 2–3 columns |
+
+### Dynamic Type
+- Serif titles, section headers, body, speaker names: full scale
+- Role tags, group overlines, tab labels, the "+N" cluster chip: FIXED (layout-critical)
+- Speaker names truncate to 1 line; the role line hides at the largest accessibility sizes
+
+### Orientation
+- Room supports rotation; the speaker grid reflows column count; footer stays pinned
+- Mini room-bar persists across orientation
+- Hallway list reflows to a wider card / multi-column on landscape iPad
+
+### Touch Targets
+- Speaker avatar: 56–64pt circle, the whole circle + name is the tap target (opens profile card)
+- Raise-hand pill: ≥44pt tall
+- Mic toggle: 22pt glyph, 44pt hit
+- Top-bar icons: 20pt glyph, 44pt hit
+- Tab bar: 24pt glyph, 44pt hit
+- Hallway card: full card is tappable to enter the room
+
+### Safe Area Handling
+- Top: room top bar + serif title respect safe area + Dynamic Island
+- Bottom: room footer / hand bar + tab bar respect the home indicator
+- Sheets (start-a-room, ping, raised-hands) respect bottom safe area
+- Mini room-bar docks just above the tab bar within the safe area
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light hallway): `#F2EFE4`
+- Canvas (dark room): `#1A1A1A` (warm near-black, NOT slate)
+- Surface 1: `#FBF9F1` light / `#242220` dark
+- Surface 2: `#EAE6D8` light / `#2E2B27` dark
+- Divider: `#DDD8C8` light / `#3A372F` dark
+- Text primary: `#1A1A1A` light / `#F2EFE4` dark
+- Text secondary: `#6B6453` light / `#B8B2A0` dark
+- Speaking Emerald (the accent): `#38B569`
+- Emerald deep (pressed): `#2E9A58`
+- Emerald soft (pulse halo): `rgba(56,181,105,0.18)`
+- Moderator gold: `#E9C46A`
+- Leave / error: `#E5575C`
+- Avatar gradients: Peach `#F4C77B→#E0A24B`, Sage `#9FD8B4→#5FB484`, Lavender `#C9B6E8→#9C7FD0`, Coral `#F2A9A0→#D9776B`, Sky `#A9C7E8→#6E9CD0`
+
+### Example Component Prompts
+- "Build the Clubhouse live Room screen in SwiftUI on a warm dark canvas (`#1A1A1A`). Top bar 52pt: leading down-chevron (collapse, 18pt `#B8B2A0`), trailing add-people + share icons. Below: a small club overline ('Design Mornings · Open', Inter 12pt `#B8B2A0` with a 6pt `#38B569` dot) and the room title in DM Serif Display 28pt `#F2EFE4`. Then a scrolling stage: an UPPERCASE overline 'SPEAKERS' (Inter 11pt 700 `+0.8` `#837D6D`) and a 4-column grid of 60pt circular avatars, 14pt row gap. A speaking avatar has a 3pt `#38B569` ring + a breathing halo `rgba(56,181,105,0.18)`; the host has a 🎙️ pin badge; a muted speaker is 55% opacity with a mute badge. Footer (72pt, `border-top` 0.5pt `#3A372F`): a soft pill '✋ Raise hand' (`#2E2B27` bg) on the left, a small emerald pulse dot + your mic toggle on the right."
+
+- "Create the Clubhouse speaker avatar component: a perfect circle (60pt) filled with the user's warm gradient (e.g. Sage `#9FD8B4 → #5FB484`) and their initials in Inter 20pt 700 `#2A2620`. States: idle = no ring; speaking = a 3pt solid `#38B569` ring plus an animated halo `rgba(56,181,105,0.18)` breathing scale 1.0 → 1.12 over 0.9s ease-in-out on loop; muted = avatar opacity 55% + a 22pt circular mute badge bottom-right (`#2E2B27` fill, mic-slash stroke, 2pt canvas-colored border); host = a 🎙️ pin in a 20pt badge top-right. Below the circle: the name in Inter 15pt 600 centered, 1-line truncate, with an optional role line in Inter 11pt `#837D6D`."
+
+- "Build the Clubhouse Hallway room card: a `#FBF9F1` card (16pt corner radius, 16pt padding, `0 2px 10px rgba(0,0,0,0.05)`, 12pt gap between cards) on the cream canvas. Top row: club name (Inter 14pt 600 `#6B6453`) + a status pill ('● Open' in `rgba(56,181,105,0.18)` / `#38B569`, full pill). Title: DM Serif Display 20pt `#1A1A1A`. Then a stacked avatar cluster — 4 circular 32pt avatars overlapping -10pt, left-on-top — plus '218 in the room' Inter 14pt `#6B6453`. Trailing: a soft 'Join' pill (emerald-tinted if live)."
+
+- "Create the Clubhouse 'Raise hand' bar: a full-pill soft button (`#2E2B27` bg, Inter 16pt 700 `#F2EFE4`, 12pt/20pt padding) reading '✋ Raise hand'. On tap, the ✋ emoji waves (rotate ±15°, 2 cycles, 600ms) with a soft haptic, then the pill cross-fades to '✋ Hand raised' with an emerald-tinted background (`rgba(56,181,105,0.18)` / text `#38B569`) and a subtle 'Waiting' sublabel."
+
+- "Build the Clubhouse primary CTA: a full-pill button, `#38B569` background, text `#07210F`, Inter 16pt weight 700, 14pt/28pt padding, leading '✚' glyph reading '✚ Start a room'. Pressed: background `#2E9A58` + scale 0.98. Place it as a floating pill on the Hallway."
+
+- "Render the Clubhouse collapsed mini room-bar: a thin docked pill above the tab bar (`#242220`, 16pt radius, `0 4px 16px rgba(0,0,0,0.16)`) showing the room title truncated in DM Serif Display 15pt `#F2EFE4`, the current speaker's 28pt circular avatar with its live `#38B569` pulse still breathing, and a trailing leave ✕ in `#E5575C`. Tap re-expands the room sheet (slide up 300ms ease-out)."
+
+### Iteration Guide
+1. Canvas is warm cream `#F2EFE4` (light) / warm near-black `#1A1A1A` (dark) — paper, never white or slate
+2. Titles/topics/greetings are DM Serif Display; names/roles/buttons/meta are Inter — never mix the registers
+3. The Speaking Emerald `#38B569` is the only accent — a 3pt ring + breathing `rgba(56,181,105,0.18)` halo = "who's talking"
+4. Every button, badge, status pill, and search field is a FULL pill; every avatar is a perfect circle
+5. The Room is a grid of speaker circles grouped Speakers / Followed by speakers / Others — faces, not a feed
+6. Muted = 55% opacity + circular mute badge; host = 🎙️ pin; moderator = gold name — read state at a glance
+7. Avatar warm gradients (peach/sage/lavender/coral/sky) carry the screen's color, like photography elsewhere
+8. The voice is gentle and emoji-led — "✋ Raise hand", "✌️ Leave quietly", never "EXIT"
+9. Depth is soft color + roundness + the emerald glow halo — not heavy drop-shadows; scrims are warm
+10. Motion is calm — the speaking pulse is a slow ~0.9s breath, sheets slide 300ms, leaving is undramatic