designmd-forge 1.2.0

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

@@ -0,0 +1,351 @@
+# Design System Inspiration of Google Gemini (iOS)
+
+## 1. Visual Theme & Atmosphere
+
+Google Gemini's iOS app is a calm, conversational surface where the only chrome is the conversation itself. The canvas is clean white (`#FFFFFF`) in light mode and a deep neutral charcoal (`#1E1E1E`) in dark mode — there are no cards, no boxes, no list furniture. A conversation reads like a document: the user's turn sits in a soft gray chip aligned to the trailing edge, and the assistant's reply is plain flowing text on the canvas, marked only by a small gradient sparkle. This document-not-feed posture is the whole point: Gemini wants the model's words to feel like thinking made visible, not UI.
+
+The accent system is a single, unmistakable gesture: the Gemini gradient — a smooth sweep from Google Blue (`#4285F4`) through violet (`#9B72CB`) to coral (`#D96570`). It is rationed to brand moments: the sparkle ✦ logomark, the streaming shimmer that runs across text as it generates, the focused state of the prompt bar, and the suggestion-chip accents. Solid Google Blue (`#4285F4`) is the interactive primary (send button active, links). Everything else is ink, gray, or the soft surface (`#F0F4F9` light / `#282A2C` dark). The gradient is precious — it appears where intelligence is happening.
+
+Typography is Google Sans (Google's product typeface), rendered here with Inter as the closest free substitute, at weights 400 / 500 / 700. The hierarchy is restrained and reading-optimized: 12–28pt, weights concentrated at 400 (body/answers) and 500 (titles/labels). There are no oversized hero headlines — the answer text *is* the content, set at a comfortable 16pt with generous 1.55 line-height so long responses read like prose. The most expressive type moment is the streaming answer: text appears token-by-token with a soft gradient shimmer sweeping the leading edge as it writes.
+
+**Key Characteristics:**
+- Document-not-feed canvas — white (`#FFFFFF`) light / charcoal (`#1E1E1E`) dark, no cards
+- The Gemini gradient (`#4285F4 → #9B72CB → #D96570`) as the only accent, rationed to brand moments
+- Sparkle ✦ logomark — the gradient mark for "intelligence here"
+- User turn = soft gray chip (trailing-aligned); assistant turn = plain text on canvas
+- Streaming gradient shimmer — text generates token-by-token with a gradient edge sweep
+- Prompt bar with mic + image add — the persistent, focused composer
+- Suggestion chips — soft pills with gradient hairline accents below the greeting
+- Side drawer navigation (no bottom tabs) — recent conversations + Gems
+- Google Sans typeface (Inter fallback), weights 400/500/700, reading-optimized
+- Full light + dark parity — the gradient is identical across themes
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Gemini Gradient**: Linear sweep `#4285F4` (0%) → `#9B72CB` (50%) → `#D96570` (100%). Used for the sparkle, streaming shimmer, focused prompt-bar ring, and chip accents — never as a flat fill behind body text.
+- **Google Blue** (`#4285F4`): Interactive primary — active send button, links, selected states.
+- **Blue Pressed** (`#3367D6`): Pressed state for the blue send button.
+- **Gradient Violet** (`#9B72CB`): Mid-stop; used solo for subtle secondary accents.
+- **Gradient Coral** (`#D96570`): End-stop; used solo for warm highlights (rare).
+
+### Canvas & Surfaces (Light)
+- **Canvas White** (`#FFFFFF`): Primary canvas — the conversation document.
+- **Surface Soft** (`#F0F4F9`): User-turn chip, prompt-bar fill, suggestion chips, drawer.
+- **Surface Raised** (`#FFFFFF` + hairline): Sheets, menus.
+- **Divider** (`#E3E3E3`): Hairlines, chip borders, drawer separators.
+- **Text Primary** (`#1F1F1F`): Answer text, titles, primary UI text.
+- **Text Secondary** (`#5F6368`): Timestamps, helper text, placeholders, captions.
+- **Text Tertiary** (`#9AA0A6`): Disabled labels, very low-emphasis meta.
+
+### Canvas & Surfaces (Dark)
+- **Dark Canvas** (`#1E1E1E`): Primary dark canvas — the conversation document.
+- **Dark Surface** (`#282A2C`): User-turn chip, prompt-bar fill, suggestion chips, drawer.
+- **Dark Divider** (`#3C3C3C`): Hairlines, chip borders, separators.
+- **Dark Text Primary** (`#E3E3E3`): Answer text and titles on dark.
+- **Dark Text Secondary** (`#9AA0A6`): Helper text and captions on dark.
+- **Dark Blue** (`#8AB4F8`): Google Blue lightened for AA contrast on dark (links, send).
+
+### Semantic
+- **Success Green** (`#1E8E3E` light / `#81C995` dark): "Copied", confirmation toast.
+- **Warning Amber** (`#F9AB00`): Rate-limit / safety notice banner.
+- **Error Red** (`#D93025` light / `#F28B82` dark): Generation failed, network error.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Google Sans` (Google product typeface) + `Google Sans Text` for body
+- **Substitute / Fallback**: `Inter` — closest free geometric-humanist match
+- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
+- **Code blocks**: `Roboto Mono` / `'SF Mono', Menlo, monospace` for fenced code in answers
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Greeting (Hero) | Google Sans | 28pt | 500 | 1.2 | -0.2pt | "Hello, Alex" empty-conversation greeting |
+| Screen Title | Google Sans | 22pt | 500 | 1.25 | -0.1pt | Drawer header, settings title |
+| Section Header | Google Sans | 18pt | 500 | 1.3 | 0pt | "Recent", "Gems" in the drawer |
+| Answer Heading | Google Sans | 20pt | 500 | 1.3 | 0pt | Markdown H2 inside a response |
+| Answer Subheading | Google Sans | 17pt | 500 | 1.35 | 0pt | Markdown H3 inside a response |
+| Answer Body | Google Sans Text | 16pt | 400 | 1.55 | 0pt | The model's prose — the core content |
+| User Turn | Google Sans Text | 16pt | 400 | 1.45 | 0pt | Text inside the gray user chip |
+| List Item (answer) | Google Sans Text | 16pt | 400 | 1.5 | 0pt | Bulleted/numbered list lines in a response |
+| Prompt Input | Google Sans Text | 16pt | 400 | 1.4 | 0pt | Text typed into the prompt bar |
+| Suggestion Chip | Google Sans Text | 14pt | 500 | 1.3 | 0pt | Prompt-suggestion pill label |
+| Metadata | Google Sans Text | 13pt | 400 | 1.3 | 0pt | Timestamps, model label, drawer subtitle |
+| Code | Roboto Mono | 14pt | 400 | 1.5 | 0pt | Fenced code blocks inside answers |
+| Label (UPPER) | Google Sans | 11pt | 500 | 1.2 | 0.6pt | "TODAY" / "PREVIOUS 7 DAYS" drawer labels |
+| Button | Google Sans | 15pt | 500 | 1.0 | 0pt | Text buttons, dialog actions |
+
+### Principles
+- **Weights at 400 / 500 / 700**: Regular for all reading text, medium for titles/labels/chips, bold reserved for strong emphasis inside answers — no thin
+- **Reading-optimized body**: answer text is 16pt at 1.55 line-height so long responses read like prose, not chat snippets
+- **The gradient never tints body text**: text is always solid ink; the gradient lives in the sparkle, the streaming edge, and chip accents
+- **Negative tracking only on the greeting/titles**: -0.2pt at 28pt; body sits at 0pt
+- **Dynamic Type respected**: greeting, answers, body scale; the prompt-bar height and drawer labels are layout-pinned
+
+## 4. Component Stylings
+
+### Buttons
+
+**Send Button (prompt bar)**
+- Shape: Circle, 36pt diameter, sits at the trailing edge of the prompt bar
+- Empty state: glyph `arrow.up` 18pt, `#9AA0A6`, transparent background
+- Active state (text present): background solid `#4285F4`, glyph `#FFFFFF`
+- Pressed: scale 0.92, background `#3367D6`, soft haptic
+- Generating: morphs to a `stop.fill` square in `#4285F4` to interrupt the stream
+
+**Suggestion Chip**
+- Background: `#F0F4F9` (light) / `#282A2C` (dark)
+- Border: 1pt `#E3E3E3` (light) / `#3C3C3C` (dark) — OR a 1pt gradient hairline on featured chips
+- Text: `#1F1F1F` / `#E3E3E3`, 14pt w500
+- Padding: 10pt vertical, 16pt horizontal, corner radius 18pt
+- Pressed: background darkens ~6%, scale 0.98
+- Optional leading sparkle (12pt gradient) on AI-action chips
+
+**Icon Action (Mic, Add image, Copy, Regenerate, Share, More)**
+- Size: 22pt glyph, 44pt hit area
+- Default: `#5F6368` (light) / `#9AA0A6` (dark)
+- Active/primary: `#4285F4` / `#8AB4F8`
+- Mic in the prompt bar: 22pt `#5F6368`; while listening it gets a gradient pulse ring
+
+**Text Button (dialog "Cancel" / "Done")**
+- Font: Google Sans, 15pt, weight 500
+- Color: `#4285F4` / `#8AB4F8`
+- No background, no underline, 44pt hit area
+
+**Pill Button (primary dialog action)**
+- Background: `#4285F4`
+- Text: `#FFFFFF`, 15pt w500
+- Padding: 10pt vertical, 24pt horizontal, corner radius 500pt
+- Pressed: `#3367D6`, scale 0.98
+
+### Cards & Containers
+
+**User Turn Chip (The Signature)**
+- Background: `#F0F4F9` (light) / `#282A2C` (dark)
+- Text: `#1F1F1F` / `#E3E3E3`, 16pt w400
+- Corner radius: 20pt (4pt on the bottom-trailing corner to "point" at the sender)
+- Padding: 12pt vertical, 16pt horizontal
+- Max width: ~80% of the conversation column, aligned to the trailing edge
+- No avatar, no name — minimalism is the point
+
+**Assistant Turn (The Signature)**
+- No bubble, no background — plain markdown text directly on the canvas
+- Leading: a small gradient sparkle ✦ (20pt) marking the start of the response
+- Full conversation-column width, 16pt body at 1.55 line-height
+- Footer action row appears after the stream completes: Copy, Regenerate, Share, ⋯ (22pt, `#5F6368`)
+- Streaming: tokens append left→right with a soft gradient shimmer at the leading edge
+
+**Code Block (inside an answer)**
+- Background: `#F0F4F9` (light) / `#282A2C` (dark), corner radius 12pt
+- Header bar: language label (13pt `#5F6368`) + a "Copy" text button
+- Body: Roboto Mono 14pt, 1.5 line-height, 16pt padding, horizontal scroll
+- Subtle 1pt `#E3E3E3` / `#3C3C3C` border
+
+**Drawer Conversation Row**
+- Height: 48pt
+- Leading: a 18pt chat/sparkle glyph; title (16pt w400, 1-line truncating)
+- Pressed: background `#F0F4F9` / `#282A2C`, corner radius 24pt (full-height pill highlight)
+- Active conversation: persistent `#F0F4F9` / `#282A2C` pill + `#1F1F1F` text
+
+**Sheet / Menu**
+- Background: `#FFFFFF` / `#1E1E1E`, corner radius 20pt top corners, 16pt grabber
+- Rows: 52pt, 1pt `#E3E3E3` / `#3C3C3C` dividers, leading 22pt glyph + label
+
+### Navigation
+
+**Top Bar**
+- Height: 44pt + safe area
+- Leading: hamburger / drawer toggle (24pt `#5F6368`)
+- Center: model selector — "Gemini" with a small chevron, tappable to switch model (e.g., Flash / Pro), 17pt w500
+- Trailing: new-chat / compose icon (22pt) + account avatar (28pt circular)
+- Background: matches canvas; subtle hairline on scroll only
+
+**Side Drawer**
+- Width: ~82% of screen, slides from the leading edge over a `rgba(0,0,0,0.4)` scrim
+- Top: a "New chat" pill (gradient-hairline or solid `#F0F4F9`) + search field
+- Body: grouped recents under uppercase day labels ("TODAY", "PREVIOUS 7 DAYS"), then "Gems"
+- Bottom: settings + account row
+- No bottom tab bar — the drawer is the sole primary navigation
+
+### Input Fields
+
+**Prompt Bar (The Composer)**
+- Background: `#F0F4F9` (light) / `#282A2C` (dark)
+- Corner radius: 26pt, min height 52pt, full-width with 16pt side margins
+- Leading: "+" add-content icon (22pt `#5F6368`) opening image/file/camera
+- Center: text field, placeholder "Ask Gemini", 16pt w400 `#5F6368`
+- Trailing: mic icon (22pt) and the send button (see Buttons)
+- Focused: a 1.5pt **gradient ring** wraps the bar (the focus signal)
+- Multiline: grows up to ~5 lines, then scrolls internally
+
+**Search Field (drawer)**
+- Background: `#FFFFFF` / `#1E1E1E` with a 1pt `#E3E3E3` / `#3C3C3C` border
+- Height: 44pt, corner radius 22pt
+- Leading `magnifyingglass` 18pt `#5F6368`, placeholder "Search chats"
+
+### Distinctive Components
+
+**Gradient Sparkle Mark**
+- The ✦ four-point sparkle filled with the Gemini gradient (`#4285F4 → #9B72CB → #D96570`)
+- Marks the assistant turn, the empty-state hero, and the app icon — the single brand signifier of "intelligence here"
+- Sizes: 20pt (turn marker), 40–56pt (empty-state hero), 12pt (chip accent)
+
+**Streaming Answer Shimmer**
+- As a response generates, text appears token-by-token; a soft gradient highlight (~120pt wide, the Gemini gradient at low opacity) sweeps the leading edge of the newest text
+- A 3-dot gradient "thinking" indicator shows before the first token arrives
+- The send button morphs to a stop control while streaming
+
+**Suggestion Chip Row**
+- Below the empty-state greeting: 3–4 horizontally scrolling chips ("Brainstorm ideas", "Summarize a document", "Help me write")
+- Featured/AI chips carry a 1pt gradient hairline border and a leading 12pt sparkle
+- Tapping a chip seeds the prompt bar and focuses it
+
+**Model Selector**
+- A tappable "Gemini ⌄" in the top bar opens a sheet listing models (e.g., "2.5 Flash — fast", "2.5 Pro — most capable") with a gradient-sparkle leading each, current model checked
+
+**Multimodal Attach Tray**
+- The "+" opens a row of soft tiles: Camera, Photos, Files — each a 56pt rounded-square with a centered glyph; attached items appear as 64pt thumbnails above the prompt text with a remove ✕
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 4pt
+- Scale: 4, 8, 12, 16, 20, 24, 32, 40, 56
+- Conversation column: full width with 16pt side margins (single readable column)
+- Turn spacing: 24pt between a user turn and the assistant reply; 32pt between exchanges
+- Prompt bar: 16pt side margins, 12pt above the safe-area bottom
+
+### Grid & Container
+- Single-column conversation — no multi-column, no cards; reading flow is the grid
+- User chip max width ~80%; assistant text spans the full column
+- Suggestion chips: horizontal scroll, 8pt gaps, 16pt leading inset
+- Drawer: ~82% width overlay
+
+### Whitespace Philosophy
+- **Document-grade reading space**: 1.55 line-height on answers and 24–32pt between turns make long responses calm to read — Gemini is a reading surface first
+- **Minimal chrome**: no boxes around the assistant turn; whitespace and the sparkle do the structuring
+- **The prompt bar is sacred**: always reachable, generously padded, never cramped
+
+### Border Radius Scale
+- Standard (12pt): Code blocks, small surfaces
+- Chip (18pt): Suggestion chips
+- Turn (20pt): User-turn chip (4pt on the pointing corner)
+- Sheet (20pt): Bottom sheets / menus (top corners)
+- Composer (26pt): The prompt bar
+- Pill (500pt): "New chat" pill, dialog primary, drawer row highlight
+- Circle (50%): Avatar, send button, mic, attach tiles
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Conversation canvas, assistant turn, user chip |
+| Prompt Bar (Level 1) | `rgba(31,31,31,0.06) 0 1px 4px` (light) / subtle on dark | The composer floating above the canvas |
+| Drawer (Level 2) | `rgba(31,31,31,0.16) 0 8px 32px` | Side drawer over the scrim |
+| Sheet (Level 3) | `rgba(31,31,31,0.18) 0 -12px 32px` | Model selector, menus, attach tray |
+| Focus Ring | 1.5pt **gradient** stroke (no blur) | The focused prompt bar — the gradient *is* the elevation cue |
+| Scrim | `rgba(0,0,0,0.40)` | Behind the drawer and modal sheets |
+
+**Shadow Philosophy**: Gemini is almost shadowless — a reading document does not stack. The only real elevation is the prompt bar (a whisper of shadow so it floats over scrolling text) and overlay surfaces (drawer/sheets). The single most important "elevation" device is non-shadow: the **gradient focus ring** on the prompt bar. Where most apps use a blue glow, Gemini uses its brand gradient to say "the model is listening." Everything in the conversation itself stays perfectly flat.
+
+### Motion
+- **Streaming tokens**: text appends at ~natural reading cadence; a gradient highlight sweeps the leading edge continuously while generating
+- **Thinking indicator**: 3 dots cycling a gradient pulse before the first token
+- **Send → stream**: send button morphs (circle → stop square) with a 200ms spring; on completion it morphs back
+- **Prompt focus**: the gradient ring fades/scales in over 180ms when the field gains focus
+- **Drawer**: slides in from the leading edge, 0.28s ease-out, scrim fades in parallel
+- **Suggestion chip tap**: scale 0.98 + the chip's text flows into the prompt bar (cross-fade)
+- **Sparkle idle**: a subtle, slow gradient-position shimmer on the empty-state hero sparkle (respects Reduce Motion)
+- **Copy confirm**: a brief gradient-edged toast "Copied", 1.5s
+
+## 7. Do's and Don'ts
+
+### Do
+- Treat the conversation as a document — white/charcoal canvas, no cards around turns
+- Reserve the Gemini gradient for brand moments: the sparkle, streaming edge, focus ring, chip accents
+- Render the user turn as a soft gray chip (trailing-aligned, 4pt pointing corner); the assistant turn as plain text with a leading gradient sparkle
+- Use solid Google Blue (`#4285F4`) for the interactive send button and links — the gradient is not a button fill
+- Stream answers token-by-token with a gradient shimmer at the leading edge
+- Use the gradient focus ring on the prompt bar — it is the signature "listening" cue
+- Keep answer body at 16pt with 1.55 line-height so long responses read like prose
+- Provide full light + dark parity; the gradient is identical across themes
+- Use Google Sans (Inter fallback) at weights 400/500/700, with Roboto Mono for code
+
+### Don't
+- Don't bubble the assistant turn — it is plain text on the canvas, not a card
+- Don't tint body text with the gradient — text is always solid ink; the gradient is structural
+- Don't use the gradient as a flat fill behind paragraphs or as a button background
+- Don't add a bottom tab bar — the side drawer is the sole primary navigation
+- Don't crowd the prompt bar or remove its generous padding — it is always reachable
+- Don't use thin font weights — the ramp is 400/500/700
+- Don't over-shadow — the conversation is flat; only the prompt bar and overlays elevate
+- Don't skip the streaming shimmer / thinking indicator — generation must feel alive
+- Don't diverge the gradient stops between light and dark — keep `#4285F4 → #9B72CB → #D96570` exact
+
+## 8. Responsive Behavior
+
+### Device Sizes
+| Device | Width | Key Changes |
+|--------|-------|-------------|
+| iPhone SE (3rd gen) | 375pt | Conversation column tight to 16pt margins; chips scroll sooner |
+| iPhone 13/14/15 | 390pt | Standard single-column conversation |
+| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the top bar |
+| iPhone 15/16 Pro Max | 430pt | Wider reading column, larger empty-state sparkle |
+| iPad | 768pt+ | Persistent drawer (not overlay) + a centered ~720pt reading column |
+
+### Dynamic Type
+- Greeting, answer body/headings, user turn, list items: full scale
+- Prompt-bar height: grows with text size but base height is layout-pinned
+- Drawer day labels and metadata: fixed sizes
+- Code blocks: scale but preserve monospace alignment
+
+### Orientation
+- Conversation: **portrait-primary**; landscape supported (column re-centers, max readable width)
+- iPad: **all orientations**, persistent drawer + centered column
+- Image/attachment viewer: **rotates** to fit media
+
+### Touch Targets
+- Send button: 36pt visual, 44pt hit area
+- Mic / add / answer actions: 22pt glyph, 44pt hit area
+- Suggestion chips: full chip tappable, ≥ 40pt tall
+- Drawer rows: 48pt height, full-row tappable
+- Model selector: full "Gemini ⌄" label tappable, 44pt tall
+
+### Safe Area Handling
+- Top: top bar respects safe area + Dynamic Island
+- Bottom: prompt bar floats above the home indicator with 12pt clearance; KB-aware
+- Drawer: full-height overlay respecting safe area, scrim covers the rest
+- Conversation: respects safe area top/bottom; the prompt bar never overlaps the last turn (auto-scroll)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Canvas (light/dark): `#FFFFFF` / `#1E1E1E`
+- Surface soft (light/dark): `#F0F4F9` / `#282A2C`
+- Divider (light/dark): `#E3E3E3` / `#3C3C3C`
+- Text primary (light/dark): `#1F1F1F` / `#E3E3E3`
+- Text secondary: `#5F6368` / `#9AA0A6`
+- Gemini gradient: `#4285F4` → `#9B72CB` → `#D96570`
+- Google Blue (interactive): `#4285F4` (dark: `#8AB4F8`)
+- Blue pressed: `#3367D6`
+- Error: `#D93025` / `#F28B82`
+
+### Example Component Prompts
+- "Create a SwiftUI Gemini conversation: a trailing-aligned user chip with `#F0F4F9` background, `#1F1F1F` text in Inter 16pt weight 400, 20pt corner radius with a 4pt bottom-trailing corner, max width 80%. Below it the assistant turn: NO bubble — plain markdown text on the white canvas, full-width, 16pt at 1.55 line-height, led by a 20pt sparkle filled with a linear gradient `#4285F4 → #9B72CB → #D96570`."
+- "Build the prompt bar: full-width `#F0F4F9` field, 26pt corner radius, min height 52pt, 16pt side margins. Leading '+' add icon (22pt `#5F6368`), placeholder 'Ask Gemini' 16pt `#5F6368`, trailing mic (22pt) and a 36pt send button. Send is `#9AA0A6` arrow when empty and a solid `#4285F4` circle with a white arrow when text is present. On focus, wrap the whole bar in a 1.5pt gradient ring (`#4285F4 → #9B72CB → #D96570`)."
+- "Design the streaming answer: assistant text appends token-by-token; overlay a ~120pt-wide soft gradient highlight that sweeps the leading edge while generating. Before the first token, show a 3-dot gradient pulse 'thinking' indicator. The send button morphs to a `#4285F4` stop square during streaming."
+- "Create the suggestion chip row under a 28pt weight 500 greeting 'Hello, Alex': 3 horizontally scrolling chips, `#F0F4F9` fill, 18pt corner radius, 14pt weight 500 label, featured chips get a 1pt gradient hairline border and a 12pt leading sparkle. Tapping a chip seeds and focuses the prompt bar."
+- "Build the side drawer: ~82% width, slides from the leading edge over a `rgba(0,0,0,0.40)` scrim. Top: a 'New chat' pill + a search field (44pt, 1pt `#E3E3E3` border). Body: recents grouped under uppercase labels 'TODAY' / 'PREVIOUS 7 DAYS', each row 48pt with a leading 18pt glyph; the active row gets a `#F0F4F9` full-height pill highlight. No bottom tab bar."
+
+### Iteration Guide
+1. The conversation is a document — white/charcoal canvas, no cards; user = gray chip, assistant = plain text
+2. The Gemini gradient (`#4285F4 → #9B72CB → #D96570`) is rationed to the sparkle, streaming edge, focus ring, and chip accents — never a body-text tint or button fill
+3. Solid Google Blue `#4285F4` is the interactive primary (send active, links)
+4. Stream answers token-by-token with a gradient leading-edge shimmer; show a thinking indicator first
+5. The prompt bar's gradient focus ring is the signature "listening" cue
+6. Body answers are 16pt at 1.55 line-height — a reading surface, not chat snippets
+7. Navigation is a side drawer only — no bottom tabs
+8. Full light + dark parity; keep the gradient stops identical across themes; Inter fallback, 400/500/700