Clubhouse DESIGN.md

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

Avatar Gradient Palette (content color)

Illustrated avatars carry most of the screen's color — assign one per user, deterministically by id.

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

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.

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

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