designmd-forge 1.2.0

package/dist/data/designs/ios-character-ai.md

@@ -0,0 +1,392 @@
+# Design System Inspiration of Character.AI (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Character.AI's iOS app exists to do one thing exceptionally well: let you have a believable, immersive conversation with an AI **persona**. Every design decision flows from that. The canvas is a near-black neutral (`#0F0F10`) — dark-first, so nothing competes with the conversation for attention. The signature screen is the **chat**: you open a character and you're greeted by a single circular **character avatar** (a soft radial gradient — blue or lilac), the character's name and one-line description centered beneath it ("Aria — A curious starship navigator · by @lumen"), and then the dialogue itself flowing upward as a stream of message bubbles. The first AI message is the character's **greeting** — its in-character hello.
+
+The defining component is the **asymmetric chat bubble**. AI messages and user messages are deliberately set in *very close* grey tones (`#1C1C1F` for the AI, `#26262A` for the user) — Character.AI does **not** color-code speakers with a bright "user blue." Instead, the speaker is signaled by a single **tucked corner**: the AI bubble has a sharp 4pt top-left corner (the "tail" pointing back at the avatar) with the other three corners at 18pt; the user bubble mirrors it with a sharp 4pt top-right corner. This subtle, almost typographic differentiation keeps the screen calm and book-like, which is the point — you're meant to feel like you're *reading a story you're co-writing*. Inside bubbles, **roleplay actions** wrapped in asterisks (`*she looks up from the charts*`) render as muted-italic secondary text — a Character.AI signature that makes narration feel different from speech.
+
+The single brand accent is a calm, confident **blue** (`#3A7BFD`). It is rationed hard: it appears on the **send button** (a filled circle in the composer), primary CTAs ("Start chat", "Create a Character"), links, and the active tab — and **never** as a bubble fill. A secondary **lilac** (`#9D7BFF`) appears only as an alternate avatar gradient, giving characters subtle visual variety without introducing a second UI color. Supporting surfaces are the **Discover** grid of character cards (avatar + name + short description + chat-count), the **typing indicator** (three dimming dots in an AI-shaped bubble), and the **persona/creation** flow.
+
+Typography is a geometric, slightly futuristic sans for identity — **Sora** (its open, technical letterforms feel right for an AI product) — used for the wordmark, screen titles, character names, and buttons; paired with **Inter** for message text and descriptions, where reading comfort over long conversations is paramount. Weights stay in the 400/500/600/700 band. Geometry is soft and quiet: bubbles at 18pt (with the 4pt tuck), cards at 16pt, avatars are circles, buttons are full pills. The overall feeling is focused, immersive, intelligent, and unobtrusive — a dark room where the only thing lit is the conversation.
+
+**Key Characteristics:**
+- Near-black canvas (`#0F0F10`) — dark-first; nothing competes with the conversation
+- The chat IS the product — circular character avatar + centered greeting + upward message stream
+- Asymmetric bubbles — AI vs user differentiated by a 4pt tucked corner, NOT by color
+- AI bubble `#1C1C1F` / user bubble `#26262A` — deliberately close greys, calm and book-like
+- Italic `*roleplay actions*` rendered as muted secondary text — a Character.AI signature
+- One rationed accent blue `#3A7BFD` — send button, CTAs, links, active tab; never a bubble
+- Lilac `#9D7BFF` as an alternate avatar gradient only — variety without a second UI color
+- Character greeting — the first AI message is the persona's in-character hello
+- Typing indicator — three dimming dots in an AI-shaped (4pt-tuck) bubble
+- Discover grid — character cards: avatar + name + one-line description + chat-count
+- Sora (wordmark/titles/names/buttons) + Inter (message text/descriptions)
+- Soft quiet geometry — 18pt bubbles, 16pt cards, circular avatars, 500pt pill buttons
+
+## 2. Color Palette & Roles
+
+### Primary (Interactive)
+- **Accent Blue** (`#3A7BFD`): The single brand accent — send button, primary CTAs, links, active tab, selection. Rationed; never a bubble fill.
+- **Accent Pressed** (`#2E63D6`): Pressed state of blue surfaces.
+- **Accent Soft** (`#1B2A4A`): Tinted secondary-button background (text `#9FC0FF`).
+- **Lilac** (`#9D7BFF`): Alternate character-avatar gradient end; not a UI control color.
+
+### Canvas & Surfaces (Dark — primary)
+- **Canvas** (`#0F0F10`): Primary dark canvas — near-black neutral, not pure black.
+- **Surface 1** (`#161618`): Sheets, settings rows, elevated panels.
+- **AI Bubble** (`#1C1C1F`): Assistant message bubble fill, typing-indicator bubble.
+- **User Bubble** (`#26262A`): User message bubble fill, also Surface 3 / pressed.
+- **Surface 2** (`#1E1E21`): Composer field, character-card background.
+- **Divider** (`#2A2A2E`): Hairline dividers, bubble borders, header underline.
+
+### Light Mode
+Character.AI is dark-first. A light theme exists; pair these (the accent stays identical).
+
+| Role | Light Mode | Dark Mode |
+|------|-----------|-----------|
+| Canvas | `#FFFFFF` | `#0F0F10` |
+| Surface 1 | `#F4F4F6` | `#161618` |
+| AI Bubble | `#F1F1F3` | `#1C1C1F` |
+| User Bubble | `#E4E8F2` | `#26262A` |
+| Divider | `#E6E6EA` | `#2A2A2E` |
+| Text Primary | `#16161A` | `#ECECEE` |
+| Text Secondary | `#66666E` | `#9A9AA2` |
+| Accent Blue | `#3A7BFD` | `#3A7BFD` |
+| Lilac | `#9D7BFF` | `#9D7BFF` |
+
+### Text
+- **Text Primary** (`#ECECEE` dark / `#16161A` light): Message text, names, primary content.
+- **Text Secondary** (`#9A9AA2` dark / `#66666E` light): Descriptions, italic roleplay actions, metadata.
+- **Text Tertiary** (`#66666E` dark / `#9A9AA6` light): Timestamps, "by @creator", placeholders, typing dots.
+- **On-Accent** (`#FFFFFF`): Text/icon on blue fills.
+- **Link** (`#3A7BFD`): Inline links and "@creator" mentions when tappable.
+
+### Semantic
+- **Success** (`#4ED99A`): "Character saved", positive confirmation.
+- **Error** (`#FF6B6B`): Generation error, message-failed retry, form errors.
+- **Warning** (`#FFB454`): Content/safety notices (used sparingly, never near bubbles as accent).
+- **Selection** (`rgba(58,123,253,0.20)`): Highlighted/selected text or row.
+
+## 3. Typography Rules
+
+### Font Family
+- **Wordmark / Titles / Names / Buttons**: `Sora` (by Jonathan Barnbrook / Soulcraft, Google Fonts, SIL OFL) — a geometric sans with open counters and a subtly technical character that suits an AI product; approximates Character.AI's clean modern brand type.
+- **Message Text / Descriptions / Body**: `Inter` (by Rasmus Andersson, SIL OFL) — engineered for screen legibility over long reading sessions; correct for multi-paragraph AI replies and bios.
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- Character.AI's production app uses a clean geometric/system pairing; **Sora + Inter** is the closest free, well-hinted match.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Sora | 32pt | 700 | 1.2 | -0.5pt | Onboarding / empty-state hero |
+| Screen Title | Sora | 24pt | 600 | 1.25 | -0.3pt | "Discover", "Create" |
+| Greeting Name | Sora | 20pt | 600 | 1.3 | -0.2pt | Character name above the greeting |
+| Header Name | Sora | 17pt | 600 | 1.3 | -0.1pt | Character name in chat header |
+| Card Name | Sora | 15pt | 600 | 1.3 | 0pt | Character name on Discover card |
+| Message | Inter | 15pt | 400 | 1.5 | 0pt | AI / user bubble text (primary) |
+| Bubble (Dense) | Inter | 14pt | 400 | 1.5 | 0pt | Compact bubble text variant |
+| Roleplay Action | Inter | 15pt | 400 *italic* | 1.5 | 0pt | `*action*` — color Text Secondary |
+| Card Description | Inter | 13pt | 400 | 1.45 | 0pt | One-line character description |
+| Body | Inter | 16pt | 400 | 1.55 | 0pt | Persona editor, settings copy |
+| Meta | Inter | 11pt | 500 | 1.3 | 0.1pt | "by @lumen · 2.4M chats", timestamps |
+| Button | Sora | 15pt | 600 | 1.0 | 0pt | Primary / soft / outline CTA |
+| Tab Label | Sora | 10pt | 600 | 1.0 | 0.2pt | Bottom tab labels |
+
+### Principles
+- **Two-font system**: Sora carries identity (wordmark, titles, names, buttons); Inter carries reading comfort (all message text, descriptions, long body). Never set message text in Sora.
+- **Weights 400/500/600/700 only** — no thin, no black.
+- **Roleplay actions are italic + secondary**: any `*…*` span renders Inter 15pt *italic* in Text Secondary `#9A9AA2`. This is a load-bearing Character.AI signature — it separates narration from speech.
+- **Generous message line-height (1.5)**: AI replies are long; comfortable leading prevents fatigue.
+- **Quiet meta**: "by @creator · N chats" stays at 11pt Text Tertiary — present, never competing with the name.
+- **Dynamic Type**: display, titles, names, message text, body scale; tab labels and meta stay fixed.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Start chat / Send / Continue)**
+- Shape: Full pill, 500pt corner radius (send = 40pt circle)
+- Background: `#3A7BFD` (Accent Blue)
+- Text/Icon: `#FFFFFF`
+- Padding: 13pt vertical, 26pt horizontal
+- Font: Sora 15pt weight 600
+- Pressed: background `#2E63D6` + scale 0.98
+
+**Soft Button (Create a Character / secondary CTA)**
+- Background: `#1B2A4A` (Accent Soft tint)
+- Text: `#9FC0FF`
+- Shape: pill 500pt
+- Padding: 13pt / 26pt
+- Pressed: background `#22315A`
+
+**Outline Button (Edit persona / tertiary)**
+- Background: transparent
+- Text: `#ECECEE`
+- Border: 1pt `#2A2A2E`
+- Shape: pill 500pt
+- Padding: 12pt / 22pt
+- Pressed: background `#1E1E21`
+
+**Text Button (New chat / inline action)**
+- Background: none
+- Text: `#3A7BFD`, Sora 14pt weight 600
+- No underline
+- Pressed: opacity 0.7
+
+**Send Button (composer)**
+- 40pt circle, `#3A7BFD`, up-arrow glyph 18pt `#FFFFFF`, stroke 2.4pt
+- Disabled (empty field): `#26262A` fill, `#66666E` glyph
+- Pressed: `#2E63D6` + scale 0.94
+
+### Chat Bubble (the core atom)
+
+**AI Bubble**
+- Background: `#1C1C1F`
+- Border: 1pt `#2A2A2E`
+- Text: Inter 15pt `#ECECEE`, line-height 1.5
+- Corner radius: **4pt top-left**, 18pt top-right, 18pt bottom-right, 18pt bottom-left (the 4pt tuck points back at the avatar)
+- Padding: 11pt vertical, 14pt horizontal
+- Max width: 86% of content width
+- Leading: 26pt circular character avatar, 9pt gap, top-aligned
+- Roleplay spans (`*…*`): Inter 15pt *italic* `#9A9AA2`
+
+**User Bubble**
+- Background: `#26262A`
+- Border: none
+- Text: Inter 15pt `#ECECEE`
+- Corner radius: 18pt top-left, **4pt top-right**, 18pt bottom-right, 18pt bottom-left (mirrored tuck)
+- Padding: 11pt / 14pt
+- Aligned to trailing edge; no avatar
+- Max width: 86%
+
+**Typing Indicator**
+- An AI-shaped bubble (`#1C1C1F`, 1pt `#2A2A2E`, 4pt-tuck) with three 6pt dots `#66666E`
+- Dots animate opacity 1 → 0.4 in sequence (see Motion)
+
+**Message Group**
+- 12pt vertical gap between messages
+- Consecutive same-speaker messages: 4pt gap, avatar shown only on the first
+
+### Character Avatar
+
+- Circular, radial gradient
+- Default (blue): `radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0)`
+- Alternate (lilac): `radial-gradient(circle at 36% 30%, #C7A8FF, #9D7BFF 55%, #6A47C9)`
+- Sizes: 64pt (greeting), 40pt (chat header), 48pt (Discover card), 26pt (per-message)
+- Real character art (when present) fills the circle; gradient is the fallback/placeholder
+- The single warm focal point on an otherwise neutral screen
+
+### Character Card (Discover)
+
+- Shape: rounded rect, 16pt corner radius
+- Background: `#1E1E21`, 1pt `#2A2A2E` border
+- Padding: 16pt; internal gap 8pt
+- Contents (vertical): 48pt avatar · name (Sora 15pt w600 `#ECECEE`) · description (Inter 13pt `#9A9AA2`, 2 lines max) · footer row (chat-bubble glyph 11pt + "2.4M chats" Inter 11pt `#66666E`)
+- Grid: 2-up on phone, 12pt gap
+- Pressed: background `#26262A` + scale 0.99
+
+### Navigation
+
+**Chat Header**
+- Height: 48pt + safe area
+- Leading: back chevron 18pt `#ECECEE`
+- 40pt character avatar + name (Sora 17pt w600) + sub ("by @lumen · 2.4M chats" Inter 11pt `#9A9AA2`)
+- Trailing: ⋮ overflow (new chat, persona, restart, share) 18pt `#9A9AA2`
+- Underline: 0.5pt `#2A2A2E`
+- Background: canvas (no blur needed; chat scrolls under cleanly)
+
+**Bottom Tab Bar**
+- Height: 60pt + safe area
+- Background: `#0F0F10` with 0.5pt top border `#2A2A2E`
+- Tabs (4): Discover · Chats · Create · Profile
+- Icon: 23pt
+- Active: icon + label `#3A7BFD` Sora 10pt w600
+- Inactive: `#66666E`
+- No tint pill — accent color is the active signal
+
+### Input Fields
+
+**Composer**
+- Height: 44pt pill, `#1E1E21`, 1pt `#2A2A2E`
+- Placeholder: "Message {Character}…" Inter 14pt `#66666E`
+- Padding: 0 / 16pt; multiline expands up to ~5 lines then scrolls
+- Trailing: 40pt blue send circle (disabled grey when empty)
+- Focus: 1pt `#3A7BFD` border
+
+**Persona / Search Field**
+- Height: 44pt, `#1E1E21`, 12pt radius (search) or auto-grow (persona editor)
+- Leading magnifier 16pt `#9A9AA2`; placeholder Inter 14pt `#66666E`
+
+### Distinctive Components
+
+**Asymmetric Tuck Bubble** — the signature: speaker identity comes from a single 4pt corner, not color.
+
+**Roleplay Action Styling** — `*…*` rendered italic + secondary; narration visually distinct from speech.
+
+**Character Greeting Header** — every chat opens with avatar + name + one-line description + the persona's in-character first message.
+
+**Typing Indicator** — three sequentially-dimming dots inside an AI-shaped bubble.
+
+**Character Card** — the Discover unit: avatar, name, one-line hook, chat-count social proof.
+
+**Persona / Definition Editor** — long-form auto-grow text area where users author a character's voice (Sora label, Inter body, accent-blue save).
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 9, 11, 12, 14, 16, 18, 24, 32, 40, 48, 64
+- Message-to-message gap: 12pt (4pt within a same-speaker group)
+- Bubble padding: 11pt vertical / 14pt horizontal
+- Screen side inset: 14–16pt
+
+### Grid & Container
+- iPhone: single chat column, 14pt side insets; Discover = 2-up card grid (12pt gap)
+- Bubble max-width: 86% of content width
+- iPad: chat max-width 720pt centered; Discover = 3–4-up grid
+- No multi-column chat — the conversation is a single focused stream
+
+### Whitespace Philosophy
+- **The conversation owns the screen**: chrome is minimal (thin header, thin tab bar) so the message stream dominates
+- **Calm bubble rhythm**: 12pt between messages, generous 1.5 line-height — long AI replies stay readable
+- **The avatar is the only warmth**: one gradient circle per screen; everything else is neutral grey
+- **Greeting centered, dialogue left/right**: the opening is a centered "title card"; the conversation then flows asymmetrically
+
+### Border Radius Scale
+- Square (0pt): full-bleed dividers
+- Tuck (4pt): the speaker-side bubble corner; small chips
+- Subtle (8pt): inline tags, small affordances
+- Standard (12pt): search field, sheet sub-elements
+- Card (16pt): Discover character cards
+- Bubble (18pt): the three non-tucked bubble corners
+- Pill (500pt): all buttons, composer field
+- Circle (50%): avatars, send button, tab hit areas
+
+## 6. Depth & Elevation
+
+Character.AI is flat and quiet — elevation is barely-there; the conversation, not shadow, carries focus.
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Canvas, bubbles, header, tab bar |
+| Bubble (Level 0.5) | 1pt `#2A2A2E` border (AI only) | AI bubble + typing bubble edge definition |
+| Card (Level 1) | 1pt `#2A2A2E` border (dark) / `0 1px 2px rgba(0,0,0,0.05)` (light) | Discover cards |
+| Sheet (Level 2) | `0 -8px 32px rgba(0,0,0,0.5)` | Persona editor, settings, share sheets |
+| Scrim | `rgba(0,0,0,0.5)` | Dim behind modals and bottom sheets |
+
+**Shadow Philosophy**: Character.AI uses essentially no drop shadows. The AI bubble's 1pt border is the only "edge" treatment — it separates the assistant's words from the near-black canvas without adding visual noise. User bubbles need no border (the lighter grey `#26262A` lifts off the canvas on its own). Sheets get a soft upward shadow only so they read as dismissible layers. The design philosophy is *flat, focused, and out of the way* — depth would distract from the conversation.
+
+### Motion
+- **Message send**: user bubble appears with a 120ms fade + 8pt upward slide; list auto-scrolls to bottom 250ms ease-out
+- **AI streaming**: text streams token-by-token into the AI bubble; the bubble height grows smoothly (no layout jump); a subtle caret/cursor blinks at the tail while streaming
+- **Typing indicator**: three dots each animate opacity 1 → 0.4 → 1 on a 1.2s loop, staggered 0.16s apart
+- **Greeting entrance**: avatar fades+scales (0.92 → 1.0) 260ms ease-out, then name and description fade in 120ms later; the greeting bubble slides up 200ms
+- **Bubble tap (long-press)**: scale 0.98 + reveal context actions (Copy, Retry, Rate) in a 150ms fade
+- **Tab switch**: icon+label tint cross-dissolves to blue 180ms; no pill slide
+- **Card press**: scale 0.99 + 80ms ease-out
+- **Sheet present**: bottom sheet slides up 320ms ease-out; scrim fades in parallel
+- **Stop generation**: send button morphs to a stop square 150ms while streaming; reverts on completion
+- **Haptics**: light selection on send, soft tick on tab switch, light impact on long-press actions; none during streaming (it would buzz continuously)
+
+## 7. Do's and Don'ts
+
+### Do
+- Make the chat the centerpiece — circular avatar, centered greeting, upward message stream on a near-black canvas
+- Differentiate AI vs user by the 4pt tucked corner, NOT by color
+- Keep AI `#1C1C1F` and user `#26262A` as close, calm greys
+- Render `*roleplay actions*` as muted-italic secondary text — it's a load-bearing signature
+- Ration accent blue `#3A7BFD` to the send button, CTAs, links, and active tab — never a bubble
+- Use the character avatar gradient (blue or lilac) as the single warm focal point per screen
+- Open every chat with the persona's in-character greeting
+- Show the typing indicator as three dimming dots in an AI-shaped bubble
+- Use Sora for identity (titles, names, buttons), Inter for all message text
+- Stream AI replies token-by-token with smooth height growth and a blinking tail caret
+- Keep chrome minimal — thin header, thin tab bar
+
+### Don't
+- Don't color-code speakers with a bright "user blue" bubble — the tuck does the work
+- Don't use the accent blue as any bubble fill (it breaks the calm reading surface)
+- Don't render roleplay `*actions*` as plain body text — they must be italic + secondary
+- Don't set message text in Sora — Inter carries long-read comfort
+- Don't add drop shadows to bubbles — the AI 1pt border is the only edge treatment
+- Don't tint the whole active tab (pill/label block) — the accent color is enough
+- Don't make the character description louder than the name on cards
+- Don't use pure black for the canvas — `#0F0F10` near-black keeps bubbles legible
+- Don't buzz haptics during streaming — it would be continuous and annoying
+- Don't introduce a second UI accent — lilac is an avatar gradient only, not a control color
+- Don't crowd the greeting — it's a centered, breathing "title card" before dialogue begins
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Bubble max-width 88%; greeting avatar 56pt; Discover stays 2-up tighter gap |
+| iPhone 13/14/15 | 390pt | Standard layout |
+| iPhone 15/16 Pro | 393pt | Dynamic Island; header starts below island |
+| iPhone 15/16 Pro Max | 430pt | Greeting avatar 72pt; message text may step to 16pt; bubble max 84% |
+| iPad (portrait) | 768pt | Chat max-width 720pt centered; Discover 3-up grid |
+| iPad (landscape) | 1024pt+ | Split: chat list / conversation; Discover 4-up |
+
+### Dynamic Type
+- Display, titles, greeting/header/card names, message text, body: full scale
+- Tab labels, "by @creator · N chats" meta, typing dots: FIXED (layout-sensitive)
+- Message text scales generously; bubble grows with it (max-width % constant)
+
+### Orientation
+- Chat supports rotation; bubbles reflow to the wider max-width
+- iPad landscape uses a list + conversation split
+- Persona editor rotates freely
+
+### Touch Targets
+- Send button: 40pt circle (≥ 44pt hit via padding)
+- Bubble long-press: full bubble is the target
+- Tab icon: 23pt glyph, 48pt hit
+- Header back / overflow: 30pt glyph, 44pt hit
+- Character card: full card tappable (→ chat)
+
+### Safe Area Handling
+- Top: header respects Dynamic Island / notch
+- Bottom: composer + home indicator respected; messages scroll clear of the composer
+- Keyboard: composer rises with keyboard; message list scrolls above it; greeting stays scrolled out cleanly
+- Sides: 14–16pt content inset
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas: `#0F0F10` dark / `#FFFFFF` light (near-black, not pure black)
+- Surface 1 / 2: `#161618` / `#1E1E21`
+- AI bubble / user bubble: `#1C1C1F` / `#26262A`
+- Divider / bubble border: `#2A2A2E`
+- Text primary / secondary / tertiary: `#ECECEE` / `#9A9AA2` / `#66666E`
+- Accent blue: `#3A7BFD` (pressed `#2E63D6`, soft `#1B2A4A`)
+- Lilac (avatar gradient only): `#9D7BFF`
+- On-accent text: `#FFFFFF`
+- Success / Error: `#4ED99A` / `#FF6B6B`
+
+### Example Component Prompts
+- "Build the Character.AI chat screen in SwiftUI: near-black `#0F0F10` canvas. Header (48pt): back chevron, 40pt circular avatar with `radial-gradient(circle at 36% 30%, #6FA0FF, #3A7BFD 55%, #274FB0)`, name Sora 17pt w600 `#ECECEE`, sub 'by @lumen · 2.4M chats' Inter 11pt `#9A9AA2`, trailing ⋮. Greeting block (centered): 64pt avatar, name Sora 20pt w600, one-line description Inter 13pt `#66666E`. Then the message stream with 12pt gaps."
+
+- "Create the Character.AI AI bubble: background `#1C1C1F`, 1pt `#2A2A2E` border, text Inter 15pt `#ECECEE` line-height 1.5, padding 11/14pt, max-width 86%. Corner radii: top-left 4pt, the other three 18pt (the 4pt tuck points back at a 26pt leading circular avatar with 9pt gap). Any `*…*` span renders Inter 15pt italic `#9A9AA2`."
+
+- "Create the Character.AI user bubble: background `#26262A`, no border, text Inter 15pt `#ECECEE`, padding 11/14pt, max-width 86%, trailing-aligned, no avatar. Corner radii: top-right 4pt, the other three 18pt (mirrored tuck). Do NOT use the accent blue as the fill."
+
+- "Build the Character.AI typing indicator: an AI-shaped bubble (`#1C1C1F`, 1pt `#2A2A2E`, top-left 4pt / others 18pt) containing three 6pt `#66666E` dots; each dot animates opacity 1 → 0.4 → 1 on a 1.2s loop, staggered 0.16s apart."
+
+- "Render a Character.AI Discover card: 16pt radius, `#1E1E21` bg, 1pt `#2A2A2E` border, 16pt padding, 8pt internal gap. Vertical: 48pt circular avatar (blue or lilac radial gradient), name Sora 15pt w600 `#ECECEE`, description Inter 13pt `#9A9AA2` (2 lines max), footer = chat-bubble glyph 11pt + '2.4M chats' Inter 11pt `#66666E`. 2-up grid, 12pt gap. Press: scale 0.99 + bg `#26262A`."
+
+- "Build the Character.AI composer: 44pt pill `#1E1E21` + 1pt `#2A2A2E`, placeholder 'Message Aria…' Inter 14pt `#66666E`, auto-grow to ~5 lines. Trailing 40pt circle send button: `#3A7BFD` with white up-arrow when text present, `#26262A`/`#66666E` when empty. While streaming, morph the send circle to a stop square over 150ms."
+
+### Iteration Guide
+1. The chat is the product — near-black `#0F0F10` canvas, circular avatar, centered greeting, upward stream
+2. AI vs user is the 4pt tucked corner, NOT color — keep `#1C1C1F` and `#26262A` close and calm
+3. `*Roleplay actions*` MUST render italic + secondary `#9A9AA2` — load-bearing signature
+4. Accent blue `#3A7BFD` is rationed: send button, CTAs, links, active tab — never a bubble fill
+5. The avatar gradient (blue default, lilac alt) is the only warmth — lilac is NOT a UI control color
+6. Every chat opens with the persona's in-character greeting under a centered name + description
+7. Type is two-font: Sora for identity (titles/names/buttons), Inter for all message text/descriptions
+8. Stream AI replies token-by-token with smooth height growth + a blinking tail caret; no haptics while streaming
+9. Chrome is minimal — thin header, thin tab bar; no drop shadows (AI 1pt border is the only edge)
+10. Canvas is near-black `#0F0F10`, not pure black; bubbles read calmly against it