# Design System Inspiration of Microsoft Copilot (iOS)

## 1. Visual Theme & Atmosphere

Microsoft Copilot's iOS app is a warm, approachable assistant wrapped in Microsoft's Fluent design language. The canvas is clean white (`#FFFFFF`) in light mode and a deep neutral (`#202020`) in dark mode, but the defining material is **Fluent acrylic**: frosted, lightly tinted, blurred surfaces that sit *over* content (the prompt bar, sheets, the suggestion tray) so the UI feels physical and layered rather than flat. Where Gemini is a bare document, Copilot is a soft, tactile workspace — answers arrive in gently rounded cards, surfaces have depth, and the whole thing reads friendly and consumer-warm, not enterprise-cold.

The accent system pairs the Copilot flourish gradient — a warm sweep from coral (`#FF6F61`) to gold (`#FFB900`) — with Microsoft's Fluent Blue (`#0078D4`) as the interactive primary. The flourish gradient is precious: it fills the swirl/flourish logomark, the streaming shimmer, and the focused prompt-bar accent — the brand's "thinking happening" signal. Fluent Blue owns the functional primary (active send, links, selected toggles, the tone selector's active state). Everything else is ink, gray, or an acrylic-tinted surface (`#F3F3F3` light / `#2D2D2D` dark). The warm flourish + cool blue duality is intentional: warmth for personality, blue for action.

Typography is Segoe UI (Microsoft's product typeface), rendered here with Inter as the closest free substitute, at weights 400 / 600 / 700. The hierarchy is friendly and reading-optimized: 12–28pt, with weights at 400 (body/answers), 600 (titles/labels/chips), and 700 (strong emphasis). There are no oversized headlines — the answer text *is* the content, set at 16pt with comfortable 1.5 line-height inside soft cards. The most expressive type moment is the streaming answer card, where text generates with a warm flourish shimmer and the card subtly settles into place with an acrylic blur-fade.

**Key Characteristics:**
- Warm Fluent workspace — white (`#FFFFFF`) light / neutral (`#202020`) dark, layered not flat
- Fluent acrylic surfaces — frosted, tinted, blurred prompt bar / sheets / suggestion tray
- Copilot flourish gradient (`#FF6F61 → #FFB900`) — the swirl mark, streaming shimmer, focus accent
- Fluent Blue (`#0078D4`) as the functional primary — active send, links, selected toggles
- Conversational answer cards — soft rounded cards on the canvas (not bare text)
- Tone / style toggle — segmented control (Creative / Balanced / Precise) shaping responses
- Prompt-suggestion chips — acrylic pills below the greeting and after answers
- Voice button — prominent mic with a flourish pulse while listening
- Top bar + sidebar nav (no bottom tabs) — recent chats + Copilot pages in a drawer
- Segoe UI typeface (Inter fallback), weights 400/600/700, full light + dark parity

## 2. Color Palette & Roles

### Primary
- **Copilot Flourish Gradient**: Linear sweep `#FF6F61` (0%) → `#FFB900` (100%). Used for the flourish mark, streaming shimmer, and the focused prompt accent — never a flat fill behind body text.
- **Fluent Blue** (`#0078D4`): Interactive primary — active send button, links, selected tone, toggles.
- **Blue Pressed** (`#005A9E`): Pressed state for the blue send / primary actions.
- **Blue Tint** (`#DEECF9`): Selected-chip wash, focused-field subtle ring (light).
- **Flourish Coral** (`#FF6F61`): Gradient start; used solo for warm secondary accents (rare).
- **Flourish Gold** (`#FFB900`): Gradient end; used solo for warm highlights / "new" dots.

### Canvas & Surfaces (Light)
- **Canvas White** (`#FFFFFF`): Primary canvas behind the conversation.
- **Surface Acrylic** (`#F3F3F3`): Answer cards, prompt-bar fill, suggestion chips, sidebar (rendered with a frosted blur over content).
- **Surface Raised** (`#FFFFFF` + soft shadow + 1pt hairline): Menus, dialogs.
- **Divider** (`#E0E0E0`): Hairlines, card borders, sidebar separators.
- **Text Primary** (`#242424`): Answer text, titles, primary UI text (warm near-black).
- **Text Secondary** (`#616161`): Timestamps, helper text, placeholders, captions.
- **Text Tertiary** (`#919191`): Disabled labels, very low-emphasis meta.

### Canvas & Surfaces (Dark)
- **Dark Canvas** (`#202020`): Primary dark canvas behind the conversation.
- **Dark Surface Acrylic** (`#2D2D2D`): Answer cards, prompt bar, chips, sidebar (frosted dark blur).
- **Dark Divider** (`#3A3A3A`): Hairlines, card borders, separators.
- **Dark Text Primary** (`#FFFFFF`): Answer text and titles on dark.
- **Dark Text Secondary** (`#A6A6A6`): Helper text and captions on dark.
- **Dark Blue** (`#4DA3E0`): Fluent Blue lightened for AA contrast on the dark canvas.

### Semantic
- **Success Green** (`#107C10` light / `#6CCB5F` dark): "Copied", confirmation toast.
- **Warning Amber** (`#F7630C`): Rate-limit / content notice banner.
- **Error Red** (`#C50F1F` light / `#FF99A4` dark): Generation failed, network error.

## 3. Typography Rules

### Font Family
- **Primary**: `Segoe UI` / `Segoe UI Variable` (Microsoft product typeface)
- **Substitute / Fallback**: `Inter` — closest free humanist-grotesque match
- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`
- **Code blocks**: `Cascadia Code` / `'SF Mono', Menlo, monospace` for fenced code in answers

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Greeting (Hero) | Segoe UI | 28pt | 700 | 1.2 | -0.2pt | "Hi, I'm Copilot" empty-state greeting |
| Screen Title | Segoe UI | 22pt | 700 | 1.25 | -0.1pt | Sidebar header, settings title |
| Section Header | Segoe UI | 18pt | 600 | 1.3 | 0pt | "Recent", "Copilot Pages" in the sidebar |
| Answer Heading | Segoe UI | 20pt | 600 | 1.3 | 0pt | Markdown H2 inside a response card |
| Answer Subheading | Segoe UI | 17pt | 600 | 1.35 | 0pt | Markdown H3 inside a response card |
| Answer Body | Segoe UI | 16pt | 400 | 1.5 | 0pt | The model's prose — the core content |
| User Turn | Segoe UI | 16pt | 400 | 1.45 | 0pt | Text inside the user card/bubble |
| List Item (answer) | Segoe UI | 16pt | 400 | 1.5 | 0pt | Bulleted/numbered list lines in a response |
| Prompt Input | Segoe UI | 16pt | 400 | 1.4 | 0pt | Text typed into the prompt bar |
| Suggestion Chip | Segoe UI | 14pt | 600 | 1.3 | 0pt | Prompt-suggestion pill label |
| Tone Label | Segoe UI | 13pt | 600 | 1.0 | 0.1pt | "Creative / Balanced / Precise" segment |
| Metadata | Segoe UI | 13pt | 400 | 1.3 | 0pt | Timestamps, model label, sidebar subtitle |
| Code | Cascadia Code | 14pt | 400 | 1.5 | 0pt | Fenced code blocks inside answers |
| Label (UPPER) | Segoe UI | 11pt | 600 | 1.2 | 0.6pt | "TODAY" / "LAST 7 DAYS" sidebar labels |
| Button | Segoe UI | 15pt | 600 | 1.0 | 0pt | Text buttons, dialog actions |

### Principles
- **Weights at 400 / 600 / 700**: Regular for all reading text, semibold for titles/labels/chips, bold for the greeting and strong in-answer emphasis — no thin
- **Reading-optimized body**: answer text is 16pt at 1.5 line-height so long responses read comfortably inside cards
- **The flourish gradient never tints body text**: text is always solid ink; the gradient lives in the flourish mark, the streaming edge, and the focus accent
- **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 sidebar labels are layout-pinned

## 4. Component Stylings

### Buttons

**Send Button (prompt bar)**
- Shape: Circle, 36pt diameter, trailing edge of the prompt bar
- Empty state: glyph `arrow.up` 18pt, `#616161`, transparent background
- Active state (text present): background solid `#0078D4`, glyph `#FFFFFF`
- Pressed: scale 0.92, background `#005A9E`, soft haptic
- Generating: morphs to a `stop.fill` square in `#0078D4` to interrupt the stream

**Voice Button**
- Shape: Circle, 44pt; sits beside the prompt bar or as a prominent empty-state CTA
- Idle: acrylic surface fill, mic glyph 20pt `#616161`
- Listening: a flourish-gradient pulse ring radiates; mic glyph turns `#0078D4`
- Pressed: scale 0.94, haptic

**Suggestion Chip**
- Background: acrylic `#F3F3F3` (light) / `#2D2D2D` (dark), 1pt `#E0E0E0` / `#3A3A3A` border
- Text: `#242424` / `#FFFFFF`, 14pt w600
- Padding: 10pt vertical, 16pt horizontal, corner radius 18pt
- Pressed: surface darkens ~6%, scale 0.98
- Optional leading 12pt flourish glyph on AI-action chips

**Icon Action (Mic, Add, Copy, Regenerate, Like/Dislike, Share, More)**
- Size: 22pt glyph, 44pt hit area
- Default: `#616161` (light) / `#A6A6A6` (dark)
- Active/primary: `#0078D4` / `#4DA3E0`
- Like/Dislike feedback: thumbs glyphs; selected thumb fills `#0078D4`

**Text Button (dialog "Cancel" / "Done")**
- Font: Segoe UI, 15pt, weight 600
- Color: `#0078D4` / `#4DA3E0`
- No background, no underline, 44pt hit area

**Pill Button (primary dialog action)**
- Background: `#0078D4`
- Text: `#FFFFFF`, 15pt w600
- Padding: 10pt vertical, 24pt horizontal, corner radius 8pt (Fluent uses softer-rect, not full-pill, for primaries)
- Pressed: `#005A9E`, scale 0.98

### Cards & Containers

**Answer Card (The Signature)**
- Background: acrylic `#F3F3F3` (light) / `#2D2D2D` (dark) — frosted blur over the canvas
- Corner radius: 16pt, soft shadow `rgba(36,36,36,0.06) 0 2px 10px`, optional 1pt hairline
- Padding: 16pt; leading a 22pt flourish glyph marking the start of the response
- Full conversation-column width; 16pt body at 1.5 line-height
- Footer action row after the stream: Copy, Like, Dislike, Regenerate, Share, ⋯
- Streaming: a warm flourish shimmer sweeps the leading edge; the card does an acrylic blur-fade as it first appears

**User Turn**
- Background: `#0078D4` at full (or a soft `#DEECF9` light / `#2D2D2D` dark "neutral" variant per setting)
- Text: white on blue / `#242424` on neutral, 16pt w400
- Corner radius: 16pt (4pt on the bottom-trailing corner), trailing-aligned, max ~80% width
- Padding: 12pt vertical, 16pt horizontal

**Tone Selector**
- A 3-segment pill control: "Creative" / "Balanced" / "Precise"
- Track: acrylic surface; selected segment fills `#0078D4` with white label, others `#616161`
- Sits above/below the prompt bar; changing it visibly re-themes the next answer's accent intensity
- Corner radius 500pt, 13pt w600 labels, 36pt tall

**Code Block (inside an answer card)**
- Background: a deeper acrylic `#EDEDED` (light) / `#1B1B1B` (dark), corner radius 12pt
- Header bar: language label (13pt `#616161`) + a "Copy" text button
- Body: Cascadia Code 14pt, 1.5 line-height, 16pt padding, horizontal scroll
- 1pt `#E0E0E0` / `#3A3A3A` border

**Sidebar Conversation Row**
- Height: 48pt
- Leading: an 18pt chat glyph; title (16pt w400, 1-line truncating)
- Pressed: acrylic `#F3F3F3` / `#2D2D2D` highlight, corner radius 8pt
- Active conversation: persistent acrylic highlight + a 3pt leading `#0078D4` accent bar

**Sheet / Menu**
- Background: acrylic over a scrim, corner radius 16pt top corners, 16pt grabber
- Rows: 52pt, 1pt `#E0E0E0` / `#3A3A3A` dividers, leading 22pt glyph + label

### Navigation

**Top Bar**
- Height: 44pt + safe area
- Leading: sidebar toggle (24pt `#616161`)
- Center: "Copilot" wordmark or model/persona selector with a small chevron, 17pt w600
- Trailing: new-chat icon (22pt) + account avatar (28pt circular)
- Background: acrylic, subtle hairline on scroll

**Sidebar (Drawer)**
- Width: ~80% of screen, slides from the leading edge over a `rgba(0,0,0,0.4)` scrim
- Top: a "New chat" button (acrylic or `#0078D4`) + search field
- Body: recents grouped under uppercase labels ("TODAY", "LAST 7 DAYS"), then "Copilot Pages"
- Bottom: settings + account row
- No bottom tab bar — the sidebar is the sole primary navigation

### Input Fields

**Prompt Bar (The Composer, acrylic)**
- Background: acrylic `#F3F3F3` (light) / `#2D2D2D` (dark) — frosted blur over the conversation
- Corner radius: 24pt, min height 52pt, full-width with 16pt side margins
- Leading: "+" add-content icon (22pt `#616161`) opening image/file/camera
- Center: text field, placeholder "Message Copilot", 16pt w400 `#616161`
- Trailing: voice mic (22pt) and the send button (see Buttons)
- Focused: a 1.5pt accent stroke (Fluent Blue, or a flourish-gradient variant on emphasis)
- Multiline: grows up to ~5 lines, then scrolls internally

**Search Field (sidebar)**
- Background: acrylic with a 1pt `#E0E0E0` / `#3A3A3A` border
- Height: 44pt, corner radius 8pt
- Leading `magnifyingglass` 18pt `#616161`, placeholder "Search chats"

### Distinctive Components

**Flourish Mark**
- The Copilot swirl/flourish, filled with the flourish gradient (`#FF6F61 → #FFB900`)
- Marks the answer card, the empty-state hero, and the app icon — the brand signifier of "Copilot is thinking/here"
- Sizes: 22pt (card marker), 44–56pt (empty-state hero), 12pt (chip accent)

**Fluent Acrylic Surface**
- The defining material: prompt bar, sheets, sidebar, and chips are frosted/blurred and lightly tinted so the UI is layered over content
- Acrylic dims (does not hide) what's behind it; on first appearance a surface does a quick blur-in (opacity + blur ramp)

**Streaming Answer Shimmer**
- As a response generates inside its card, text appears token-by-token; a soft flourish-gradient highlight (~120pt wide, low opacity) sweeps the leading edge
- A 3-dot flourish "thinking" indicator shows before the first token; the send button morphs to a stop control while streaming

**Tone / Style Toggle**
- The Creative / Balanced / Precise segmented control is a Copilot signature — it visibly shapes the response (and the accent intensity) and persists across the session

**Prompt-Suggestion Chips**
- Below the greeting and after each answer: 3–4 horizontally scrolling acrylic chips ("Draft an email", "Explain this", "Make an image")
- AI-action chips carry a 12pt leading flourish glyph; tapping seeds + focuses the prompt bar

## 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 of cards)
- Turn spacing: 16pt between a user turn and its answer card; 24pt between exchanges
- Prompt bar: 16pt side margins, 12pt above the safe-area bottom

### Grid & Container
- Single-column conversation of soft cards — no multi-column
- User turn max width ~80%; answer card spans the full column
- Suggestion chips: horizontal scroll, 8pt gaps, 16pt leading inset
- Sidebar: ~80% width overlay

### Whitespace Philosophy
- **Comfortable, layered reading space**: 1.5 line-height, 16pt card padding, and 16–24pt between turns make long responses calm — Copilot is a reading surface with depth
- **Acrylic creates hierarchy**: blurred, tinted surfaces (not heavy shadows) communicate "this floats above the conversation"
- **The prompt bar is sacred**: always reachable, generously padded, acrylic so it reads as a persistent layer

### Border Radius Scale
- Standard (8pt): Primary pill button, sidebar row highlight, search field
- Code (12pt): Code blocks
- Card (16pt): Answer card, user turn (4pt on the pointing corner), sheets (top corners)
- Chip (18pt): Suggestion chips
- Composer (24pt): The prompt bar
- Pill (500pt): Tone selector
- Circle (50%): Avatar, send button, voice button, flourish accents

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Conversation canvas background |
| Card (Level 1) | `rgba(36,36,36,0.06) 0 2px 10px` + acrylic tint | Answer cards on the canvas |
| Acrylic Layer (Level 2) | Frosted blur (~24 radius) + tint + 1pt hairline | Prompt bar, suggestion tray, chips |
| Sidebar (Level 3) | Acrylic + `rgba(36,36,36,0.16) 0 8px 32px` | Side drawer over the scrim |
| Sheet (Level 4) | Acrylic + `rgba(36,36,36,0.18) 0 -12px 32px` | Menus, model/persona selector |
| Focus Accent | 1.5pt Fluent Blue (or flourish-gradient) stroke, no blur | Focused prompt bar |
| Scrim | `rgba(0,0,0,0.40)` | Behind the sidebar and modal sheets |

**Shadow Philosophy**: Copilot's depth is **material, not just shadow**. Fluent acrylic — a frosted, tinted, blurred layer — is the primary elevation device: the prompt bar, sidebar, and chips read as physical sheets floating over the conversation because you can see content faintly through them. Cards add a whisper of soft shadow on top of their acrylic tint. The flourish gradient handles brand emphasis (mark, streaming edge); Fluent Blue handles the functional focus accent. The conversation canvas itself stays flat — depth lives in the layered surfaces.

### Motion
- **Acrylic blur-in**: surfaces (prompt bar, sheets, a new answer card) ramp opacity + blur over 220ms as they appear
- **Streaming tokens**: text appends at natural reading cadence; a flourish-gradient highlight sweeps the leading edge while generating
- **Thinking indicator**: 3 dots cycling a flourish pulse before the first token
- **Send → stream**: send button morphs (circle → stop square) with a 200ms spring; reverses on completion
- **Tone change**: the selector's pill slides 0.2s spring; the next answer's accent intensity visibly shifts
- **Prompt focus**: the accent stroke fades/scales in over 180ms on focus
- **Sidebar**: slides in from the leading edge, 0.28s ease-out, scrim + acrylic fade in parallel
- **Suggestion chip tap**: scale 0.98 + the chip text flows into the prompt bar (cross-fade)
- **Flourish idle**: a slow gradient-position shimmer on the empty-state hero flourish (respects Reduce Motion)
- **Copy confirm**: a brief acrylic toast "Copied", 1.5s

## 7. Do's and Don'ts

### Do
- Build surfaces as Fluent acrylic — frosted, tinted, blurred sheets that float over the conversation
- Render answers in soft rounded cards (16pt radius, acrylic tint, whisper shadow) — not bare text
- Reserve the flourish gradient (`#FF6F61 → #FFB900`) for the flourish mark, streaming edge, and focus emphasis
- Use solid Fluent Blue (`#0078D4`) for the functional primary — active send, links, selected tone/toggles
- Keep the Creative / Balanced / Precise tone selector visible — it is a Copilot signature
- Stream answers token-by-token with a warm flourish shimmer at the leading edge
- Do an acrylic blur-in (opacity + blur ramp, 220ms) when a surface or new card appears
- Keep answer body at 16pt with 1.5 line-height inside cards
- Provide full light + dark parity; keep the flourish stops identical across themes
- Use Segoe UI (Inter fallback) at weights 400/600/700, Cascadia Code for code

### Don't
- Don't render answers as bare unboxed text — Copilot uses soft acrylic cards
- Don't tint body text with the flourish gradient — text is always solid ink; the gradient is structural
- Don't use the flourish gradient as a button fill or a flat panel background
- Don't make surfaces flat/opaque where acrylic is expected — the frosted layering is the brand
- Don't add a bottom tab bar — the sidebar is the sole primary navigation
- Don't full-pill the primary action button — Fluent primaries use a softer 8pt rounded rect (the tone selector is the pill)
- Don't use thin font weights — the ramp is 400/600/700
- Don't skip the streaming shimmer / thinking indicator — generation must feel alive
- Don't diverge the flourish stops between light and dark — keep `#FF6F61 → #FFB900` exact

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Cards tight to 16pt margins; chips scroll sooner |
| iPhone 13/14/15 | 390pt | Standard single-column card conversation |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in the acrylic top bar |
| iPhone 15/16 Pro Max | 430pt | Wider reading column, larger empty-state flourish |
| iPad | 768pt+ | Persistent sidebar (not overlay) + a centered ~720pt card column |

### Dynamic Type
- Greeting, answer body/headings, user turn, chips: full scale
- Prompt-bar height: grows with text size but base height is layout-pinned
- Sidebar day labels and tone labels: 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 sidebar + centered card column
- Image/attachment viewer: **rotates** to fit media

### Touch Targets
- Send button: 36pt visual, 44pt hit area
- Voice button: 44pt
- Mic / add / card actions: 22pt glyph, 44pt hit area
- Suggestion chips: full chip tappable, ≥ 40pt tall
- Tone segments: each ≥ 44pt wide, 36pt tall
- Sidebar rows: 48pt height, full-row tappable

### Safe Area Handling
- Top: acrylic top bar respects safe area + Dynamic Island
- Bottom: acrylic prompt bar floats above the home indicator with 12pt clearance; KB-aware
- Sidebar: full-height overlay respecting safe area, scrim covers the rest
- Conversation: respects safe area; the prompt bar never overlaps the last card (auto-scroll)

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (light/dark): `#FFFFFF` / `#202020`
- Surface acrylic (light/dark): `#F3F3F3` / `#2D2D2D`
- Divider (light/dark): `#E0E0E0` / `#3A3A3A`
- Text primary (light/dark): `#242424` / `#FFFFFF`
- Text secondary: `#616161` / `#A6A6A6`
- Copilot flourish gradient: `#FF6F61` → `#FFB900`
- Fluent Blue (interactive): `#0078D4` (dark: `#4DA3E0`)
- Blue pressed: `#005A9E`
- Error: `#C50F1F` / `#FF99A4`

### Example Component Prompts
- "Create a SwiftUI Copilot answer card: an acrylic `#F3F3F3` surface (use `.regularMaterial` over the white canvas), 16pt corner radius, soft shadow `rgba(36,36,36,0.06) 0 2px 10px`, 16pt padding. Lead with a 22pt flourish glyph filled with a linear gradient `#FF6F61 → #FFB900`. Body text in Inter 16pt weight 400 `#242424` at 1.5 line-height. Footer row after streaming: Copy, Like, Dislike, Regenerate, Share, ⋯ (22pt `#616161`)."
- "Build the acrylic prompt bar: full-width frosted `#F3F3F3` field (`.regularMaterial` blur over content), 24pt corner radius, min height 52pt, 16pt side margins. Leading '+' icon (22pt `#616161`), placeholder 'Message Copilot' 16pt `#616161`, trailing mic (22pt) and a 36pt send button that is `#616161` when empty and a solid `#0078D4` circle with a white arrow when text is present. On focus, add a 1.5pt `#0078D4` accent stroke."
- "Design the tone selector: a 3-segment pill (Creative / Balanced / Precise) on an acrylic track, 500pt corner radius, 36pt tall, 13pt weight 600 labels. The selected segment fills `#0078D4` with white text; the others are `#616161`. The pill slides 0.2s spring on change."
- "Create the streaming answer: text appends token-by-token inside the card; overlay a ~120pt-wide low-opacity flourish-gradient (`#FF6F61 → #FFB900`) highlight that sweeps the leading edge while generating. Show a 3-dot flourish pulse 'thinking' indicator before the first token. The card does an acrylic blur-in (opacity + blur ramp, 220ms) on first appearance; the send button morphs to a `#0078D4` stop square mid-stream."
- "Build the sidebar: ~80% width acrylic drawer sliding from the leading edge over a `rgba(0,0,0,0.40)` scrim. Top: a 'New chat' button (8pt rounded rect) + a 44pt search field. Body: recents grouped under uppercase labels 'TODAY' / 'LAST 7 DAYS', each row 48pt; the active row gets an acrylic highlight + a 3pt leading `#0078D4` accent bar. No bottom tab bar."

### Iteration Guide
1. Surfaces are Fluent acrylic — frosted, tinted, blurred layers over the conversation, not flat opaque panels
2. Answers live in soft acrylic cards (16pt radius, whisper shadow) — never bare unboxed text
3. The flourish gradient (`#FF6F61 → #FFB900`) is rationed to the flourish mark, streaming edge, and focus emphasis — never a body-text tint or button fill
4. Solid Fluent Blue `#0078D4` is the functional primary (active send, links, selected tone/toggles)
5. The Creative / Balanced / Precise tone selector is a Copilot signature — keep it visible and consequential
6. Stream answers token-by-token with a warm flourish shimmer; show a thinking indicator first; blur-in surfaces (220ms)
7. Navigation is a sidebar only — no bottom tabs; Fluent primaries use an 8pt rounded rect, not a full pill
8. Full light + dark parity; keep the flourish stops identical; Inter fallback, weights 400/600/700, Cascadia Code for code