# Design System Inspiration of DeepSeek (iOS)

## 1. Visual Theme & Atmosphere

DeepSeek's iOS app is a focused, near-monochrome chat interface organized around one idea: **show the model thinking before it answers**. The canvas is a deep near-black (`#0E0E10` in dark; a clean white `#FFFFFF` in light), and the only saturated color anywhere is **DeepSeek Blue** (`#4D6BFE`) — a vivid indigo-blue that appears on the whale logomark, the user's message bubble, the send button, and the active **DeepThink (R1)** / **Search** toggles. Everything else is a restrained grey ramp. The result feels like a research tool: serious, quiet, and engineered to make the *reasoning* the spectacle rather than the chrome.

The signature interaction — and the thing that must be reproduced faithfully — is the **reasoning trace**. When DeepThink (R1) is enabled, the assistant's reply is preceded by a collapsible **reasoning panel**: a recessed surface (`#16171A` in dark — deliberately *darker* than the canvas) with a 2pt DeepSeek-Blue left-bar, a header that reads "Thought for N seconds · tap to collapse", and the model's chain-of-thought rendered in **dimmed italic** (`#8A8B90`). Below the panel sits the final answer in full-contrast text (`#ECECEC`). The visual hierarchy is intentional: the reasoning is present but subordinate; the answer is primary. Tapping the header collapses the trace to a single line. This "thinking-then-answering" pattern is DeepSeek's entire identity.

The second pillar is the **two-toggle composer**. Above the input pill sit two pill toggles: **DeepThink (R1)** — switches from the fast V3 model to the R1 reasoning model (which produces the trace) — and **Search** — grounds the answer in live web results with inline citations. When active, a toggle fills with a soft blue tint (`#1E2240`), a blue border (`#4D6BFE`), and blue text/icon. These two toggles are the primary controls of the product; the input field itself is a quiet rounded pill.

Typography is the platform sans (Inter as the open fallback, SF Pro on device) — no custom display face. Message body is 15pt regular; the reasoning trace is 13pt **italic** (the italicization is a deliberate "this is internal monologue" signal); code is monospace on a `#232428` chip with a faintly blue-tinted token color (`#C5CDFF`). The type system is conventional on purpose: DeepSeek's personality lives in the reasoning trace and the single electric blue, not in the letterforms.

**Key Characteristics:**
- Near-black canvas (`#0E0E10`) dark / white (`#FFFFFF`) light — quiet, research-tool calm
- Single accent: DeepSeek Blue `#4D6BFE` — whale mark, user bubble, send button, active toggles only
- Reasoning trace — collapsible recessed panel (`#16171A`) with a blue left-bar, chain-of-thought in dimmed italic, subordinate to the answer
- "Thought for N seconds" header — tap to collapse/expand the trace
- DeepThink (R1) toggle — switches V3 (fast) → R1 (reasoning, produces the trace)
- Search toggle — grounds answers in web results with inline citations
- User bubble: soft-blue fill (`#1E2240`) with asymmetric corner (18/18/4/18); AI replies: no bubble, full-width
- Whale logomark — the brand glyph, always in DeepSeek Blue
- Monospace code chips with a blue-tinted token color (`#C5CDFF`)
- Minimal chrome: bottom tabs (Chat / History / Settings), thin top bar with the whale wordmark

## 2. Color Palette & Roles

### Primary (Interactive)
- **DeepSeek Blue** (`#4D6BFE`): The single accent — whale logomark, send button, active toggle border/text/icon, links, primary CTA fill.
- **DeepSeek Blue Pressed** (`#3B57E0`): Pressed state of blue-filled buttons.
- **DeepSeek Blue Soft** (`#1E2240` dark / `#EBEFFF` light): User-bubble fill, active-toggle fill, soft-button background.
- **Blue Token** (`#C5CDFF` dark / `#3B57E0` light): Inline-code token color (a blue-tinted mono).

### Canvas & Surfaces (Dark)
- **Canvas** (`#0E0E10`): Primary dark canvas — near-black, faintly cool.
- **Surface 1** (`#1A1B1E`): Composer field, toggle resting background, cards, sections.
- **Surface 2** (`#232428`): Code chips, raised rows, hovered surfaces.
- **Surface 3** (`#2C2D31`): Pressed surface, menu rows.
- **Reasoning BG** (`#16171A`): The reasoning-trace panel — intentionally *darker* than the canvas to recede.
- **Divider** (`#2E2F33`): Hairline dividers, input/toggle borders.

### Canvas & Surfaces (Light)
- **Canvas White** (`#FFFFFF`): Primary light canvas.
- **Surface 1 Light** (`#F5F6F8`): Composer field, cards.
- **Surface 2 Light** (`#ECEEF2`): Code chips, raised rows.
- **Reasoning BG Light** (`#F7F8FA`): Reasoning-trace panel (slightly off-white to recede).
- **Divider Light** (`#E4E6EB`): Hairlines, borders.

### Text
- **Text Primary** (`#ECECEC` dark / `#1A1B1E` light): Final answer, message body, titles.
- **Text Secondary** (`#9A9BA0` dark / `#6A6B70` light): Metadata ("Thought for N seconds"), model name, sub-labels.
- **Text Tertiary** (`#6A6B70` dark / `#9A9BA0` light): Placeholder, disabled.
- **Reasoning Text** (`#8A8B90` dark / `#6E6F74` light): Chain-of-thought inside the trace — dimmed, italic.

### Semantic
- **Success Green** (`#2EBD85`): "Copied", positive feedback (thumbs-up filled).
- **Error Red** (`#E5484D`): Failed generation, network error, stop.
- **Citation Blue** (`#4D6BFE`): Inline web-search citation chips `[1] [2]` when Search is on.
- **Stop Red** (`#E5484D`): Stop-generating button while streaming.

### Color Usage Rules
| Token | Dark | Light | Where |
|-------|------|-------|-------|
| Canvas | `#0E0E10` | `#FFFFFF` | Behind everything |
| Surface 1 | `#1A1B1E` | `#F5F6F8` | Composer, cards |
| Reasoning BG | `#16171A` | `#F7F8FA` | The reasoning trace panel |
| Divider | `#2E2F33` | `#E4E6EB` | Hairlines, borders |
| DeepSeek Blue | `#4D6BFE` | `#4D6BFE` | Whale, send, active toggle, links |
| Blue Soft | `#1E2240` | `#EBEFFF` | User bubble, active toggle fill |
| Text primary | `#ECECEC` | `#1A1B1E` | Answer, body |
| Reasoning text | `#8A8B90` | `#6E6F74` | Chain-of-thought (italic) |

## 3. Typography Rules

### Font Family
- **Primary**: System sans — **SF Pro Text / SF Pro Display** on iOS; `Inter` (by Rasmus Andersson, SIL OFL) as the open/web fallback. No custom display face.
- **Monospace**: `SF Mono` on iOS (`'SF Mono', ui-monospace, Menlo, monospace`) — code blocks/chips and any verbatim tokens.
- **Fallback Stack**: `-apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Screen Title | Inter / SF Pro | 32pt | 800 | 1.15 | -0.4pt | App title / large nav |
| Empty-State Headline | Inter / SF Pro | 26pt | 700 | 1.25 | -0.3pt | "How can I help today?" |
| Section Heading | Inter / SF Pro | 18pt | 700 | 1.3 | -0.2pt | History date groups |
| Message Body | Inter / SF Pro | 15pt | 400 | 1.6 | 0pt | User & assistant text |
| Toggle / Action | Inter / SF Pro | 15pt | 600 | 1.0 | 0pt | DeepThink, Search, primary action |
| Card / List Title | Inter / SF Pro | 15pt | 600 | 1.3 | 0pt | History conversation titles |
| Reasoning Trace | Inter / SF Pro | 13pt | 400 *italic* | 1.55 | 0pt | Chain-of-thought — dimmed italic |
| Metadata | Inter / SF Pro | 14pt | 400 | 1.4 | 0pt | "Thought for 14 seconds" |
| Caption | Inter / SF Pro | 12pt | 500 | 1.3 | 0pt | Model name, timestamps |
| Code Inline | SF Mono | 13pt | 400 | 1.4 | 0pt | `inline code` — blue token `#C5CDFF` |
| Code Block | SF Mono | 13pt | 400 | 1.5 | 0pt | Fenced code blocks |
| Citation Chip | SF Mono | 11pt | 600 | 1.0 | 0pt | `[1] [2]` web-search citations |
| Tab Label | Inter / SF Pro | 10pt | 500 | 1.0 | 0.1pt | Bottom tab labels |
| Placeholder | Inter / SF Pro | 15pt | 400 | 1.4 | 0pt | "Message DeepSeek" |

### Principles
- **Reasoning is italic, answer is upright**: the chain-of-thought is always italic and dimmed (`#8A8B90`); the final answer is upright and full-contrast (`#ECECEC`). The italic *is* the "this is internal monologue" signal — never render the trace upright.
- **Weight concentrated at 400 / 500 / 600 / 700 / 800**: regular body, medium captions, semibold toggles/actions, bold headings, extrabold title. No thin, no light.
- **One accent, used sparingly**: blue appears on the whale, user bubble, send, active toggles, links, citations — nowhere else. Body text is never blue.
- **Conventional letterforms by design**: personality lives in the reasoning trace and the single blue, not the typeface.
- **Dynamic Type**: message body, headings, reasoning text scale; tab labels, citation chips, toggle text stay fixed.

## 4. Component Stylings

### Buttons

**Primary Button (New chat / Send action)**
- Shape: Full pill, 999pt corner radius (or 50% circle for the composer send)
- Background: `#4D6BFE` (DeepSeek Blue)
- Text / icon: `#FFFFFF`
- Padding: 14pt vertical, 28pt horizontal (pill); 36pt circle for send
- Font: Inter 15–16pt weight 600
- Pressed: background `#3B57E0` + scale 0.98
- Disabled (empty input): background `#232428`, icon `#6A6B70`

**Secondary / Outline Button (Regenerate)**
- Background: transparent
- Text: `#ECECEC`
- Border: 1pt `#2E2F33`
- Corner radius: 999pt
- Padding: 12pt vertical, 20pt horizontal
- Font: Inter 14pt weight 500
- Pressed: background `#1A1B1E`

**Soft Button (Continue reasoning / inline secondary)**
- Background: `#1E2240` (Blue Soft)
- Text / icon: `#4D6BFE`
- Border: 1pt `#2A3360`
- Corner radius: 999pt
- Padding: 10pt vertical, 18pt horizontal
- Font: Inter 14pt weight 600

**Text Button (Clear conversation / Delete)**
- Font: Inter 14pt weight 500
- Color: `#9A9BA0` (or `#E5484D` for destructive)
- No background, no border
- Pressed: color → `#ECECEC`

### Toggle Pills (the core control)

**DeepThink (R1) / Search Toggle**
- Shape: pill, 999pt corner radius
- Off: background `#1A1B1E`, border 1pt `#2E2F33`, text/icon `#9A9BA0`
- On: background `#1E2240` (Blue Soft), border 1pt `#4D6BFE`, text/icon `#4D6BFE`
- Leading icon: 14pt (brain glyph for DeepThink, magnifier for Search)
- Font: Inter 13pt weight 600
- Padding: 7pt vertical, 13pt horizontal
- Transition: 150ms ease — fill + border + content color crossfade
- DeepThink ON ⇒ replies include the reasoning trace; Search ON ⇒ replies include `[n]` citations

### Reasoning Trace (signature component)

The defining element of DeepSeek. When DeepThink (R1) is on, every assistant reply is preceded by this panel.

- Container: `#16171A` (dark) / `#F7F8FA` (light) — intentionally recessed vs. canvas
- Left bar: 2pt solid `#4D6BFE` (DeepSeek Blue), full-height
- Corner radius: 10pt
- Padding: 12pt vertical, 14–16pt horizontal
- Header row: brain glyph (14pt `#4D6BFE`) + "Thought for N seconds" (Inter 12pt w600 `#9A9BA0`) + "· tap to collapse" (`#6A6B70`)
- Body: chain-of-thought in Inter 13pt **w400 italic** `#8A8B90`, line-height 1.55
- Collapsed state: header only (single line); expands with a 200ms height animation + chevron
- While streaming: the trace types in live (token-by-token) with a blinking caret; the duration counts up
- Subordination rule: the trace is always *visually quieter* than the answer below it — dimmer text, recessed background, smaller size

### Message Bubbles

**User Message**
- Background: `#1E2240` (Blue Soft), border 1pt `#2A3360`
- Text: `#ECECEC`, Inter 15pt w400, line-height 1.5
- Corner radius: asymmetric `18 / 18 / 4 / 18` (the 4pt corner points to the sender, bottom-right)
- Padding: 12pt vertical, 16pt horizontal
- Max width: 78% of content width, right-aligned

**Assistant Message**
- No bubble — full content width, left-aligned
- Header: whale glyph (18pt `#4D6BFE`) + model name ("DeepSeek-R1" / "DeepSeek-V3", Inter 13pt w600 `#9A9BA0`)
- Body: `#ECECEC`, Inter 15pt w400, line-height 1.6
- Action row below: copy, thumbs-up, thumbs-down, regenerate, share — 16pt glyphs `#6A6B70`
- Code blocks: `#232428` background, 8pt radius, SF Mono 13pt, blue token `#C5CDFF`, "Copy" affordance top-right

### Composer (signature input)

- Toggle row on top: DeepThink (R1) + Search pills (see Toggle Pills), 8pt gap, 8pt bottom margin
- Input pill: 50pt tall, `#1A1B1E` background, 1pt `#2E2F33` border, 25pt corner radius
- Leading 18pt inset, placeholder "Message DeepSeek" in `#6A6B70`
- Trailing: 36pt circular send button — `#4D6BFE` fill, `#FFFFFF` up-arrow glyph (turns into a red `#E5484D` stop square while streaming)
- Attach (+) affordance optional at the leading edge for image/file upload
- On focus: border brightens to `#3A3B40`

### Navigation

**Bottom Tab Bar**
- Height: 68pt + safe area
- Background: `rgba(14,14,16,0.94)` with `backdrop-filter: blur(20px)`, 0.5pt top border `#2E2F33`
- Tabs (3): Chat, History, Settings
- Icon size: 22pt
- Active: glyph + label `#4D6BFE` (the single accent), slightly thicker stroke
- Inactive: `#6A6B70`
- Labels: Inter 10pt w500, always shown

**Top Bar**
- Height: 44pt + safe area
- Leading: hamburger / history icon (22pt `#9A9BA0`)
- Center: whale glyph (22pt `#4D6BFE`) + "DeepSeek" wordmark (Inter 16pt w700; "Seek" tinted `#4D6BFE`)
- Trailing: new-chat (+) icon (22pt `#9A9BA0`)

### Input Fields

**Search Bar (History)**
- Height: 44pt
- Background: `#1A1B1E`, no border
- Corner radius: 10pt
- Leading `magnifyingglass` 18pt `#6A6B70`
- Placeholder "Search chats" 14pt `#6A6B70`
- Focus: 1pt `#4D6BFE` border

### Distinctive Components

**Reasoning Trace Panel** — see above; the product's signature.

**DeepThink / Search Toggle Pair** — the primary controls; soft-blue active state.

**Streaming Answer with Live Trace**
- The reasoning panel types in token-by-token first (duration counting up), then the upright answer streams below it. A blinking blue caret marks the active position.

**Web-Search Citation Chips**
- When Search is on, inline `[1] [2]` chips in SF Mono 11pt w600 `#4D6BFE` on a faint `#1E2240` pill; tapping opens a source sheet listing titles + domains.

**Model Switcher**
- A small pill in the empty state / settings to pick DeepSeek-V3 (fast) vs DeepSeek-R1 (reasoning). R1 implies the trace.

**Empty State**
- Centered whale glyph (44pt `#4D6BFE`) + "How can I help today?" (26pt w700) + 3–4 example-prompt chips (`#1A1B1E`, 1pt `#2E2F33`, pill)

**Code Block**
- `#232428` background, 8pt radius, language label top-left (`#6A6B70` 11pt), "Copy" top-right, SF Mono 13pt body with blue-tinted tokens

## 5. Layout Principles

### Spacing System
- Base unit: 4pt — scale: 4, 8, 10, 12, 16, 18, 24, 32, 48
- Message vertical gap: 18pt
- Reasoning-panel internal padding: 12/14pt; gap to answer: 10pt
- Screen horizontal inset: 16pt

### Grid & Container
- iPhone: chat at 16pt horizontal insets; user bubble max 78% right-aligned; assistant full-width
- iPad: chat column centered, max-width 720pt; History becomes a 2-pane (list + chat)
- Composer pinned to bottom; toggle row sits directly above the input pill
- Reasoning panel spans the full assistant content width (no extra inset)

### Whitespace Philosophy
- **Calm and recessive**: surfaces differ by only a few percent luminance; the reasoning panel is *darker* than the canvas so it reads as "behind/internal"
- **Answer-forward**: the most contrast in the screen is on the final answer (`#ECECEC` on `#0E0E10`); reasoning is deliberately lower-contrast
- **One spark of color**: blue is rationed — its rarity is what makes the toggles and citations legible
- **Generous line-height**: 1.6 on the answer for long-form reading; 1.55 on the (smaller) trace

### Border Radius Scale
- Square (0pt): dividers, full-bleed media
- Subtle (4pt): inline code chips, the bubble's sender-pointing corner
- Small (8pt): code blocks, source-sheet rows
- Standard (10pt): reasoning panel, search bar, cards
- Bubble (18pt): user message bubble (3 corners)
- Composer (25pt): the input pill
- Pill (999pt): toggles, primary buttons, citation chips
- Circle (50%): send button, avatars

## 6. Depth & Elevation

DeepSeek is flat and recessive. Depth is conveyed by *recession* (the trace sits visually behind) more than by elevation.

| Level | Treatment | Use |
|-------|-----------|-----|
| Recessed (Level -1) | `#16171A` (darker than canvas) + 2pt blue left-bar | Reasoning trace panel |
| Flat (Level 0) | No shadow | Messages, composer, content |
| Hairline (Level 1) | 1pt `#2E2F33` border | Composer, toggles, cards, code blocks |
| Floating (Level 2) | `rgba(0,0,0,0.5) 0 8px 24px` + 1pt `#2E2F33` | Source sheet, model menu, bottom sheets |
| Scrim (Level 3) | `rgba(0,0,0,0.6)` overlay | Behind modals and sheets |

**Shadow Philosophy**: On near-black, shadows barely register, so a 1pt `#2E2F33` border is the primary "this is a distinct surface" cue. The reasoning trace inverts the usual logic — it uses a *darker* fill (not a shadow) to communicate "this is the model's inner monologue, behind the answer." Sheets get a faint shadow plus a border.

### Motion
- **Toggle on/off**: fill + border + content color crossfade over 150ms ease; soft haptic on engage
- **Reasoning stream**: trace text types in token-by-token (~30–60 tok/s feel), duration label counts up live; a blue caret blinks at the cursor
- **Trace collapse/expand**: chevron rotates 90° in 150ms; panel height animates 0 ↔ auto over 200ms ease-out
- **Answer stream**: upright answer types in below the trace after reasoning completes; same caret hands off
- **Send**: send button scales 1 → 0.94 → 1 (120ms) then morphs to a red stop-square while streaming; reverts on completion
- **Message append**: new user bubble slides up + fades in over 200ms ease-out
- **Citation tap**: source sheet slides up 300ms ease-out
- **Tab change**: instant color swap (no slide)
- **Haptic feedback**: soft impact on toggle engage and send; success haptic on copy

## 7. Do's and Don'ts

### Do
- Use a near-black `#0E0E10` canvas (dark) / clean `#FFFFFF` (light) — quiet research-tool calm
- Ration DeepSeek Blue `#4D6BFE` to the whale, user bubble, send, active toggles, links, citations
- Render the reasoning trace in a recessed `#16171A` panel with a 2pt blue left-bar
- Keep the chain-of-thought dimmed italic `#8A8B90` — italic IS the "internal monologue" signal
- Keep the answer upright and full-contrast `#ECECEC` — visually dominant over the trace
- Make the trace collapsible with a "Thought for N seconds · tap to collapse" header
- Use soft-blue active state (`#1E2240` fill + `#4D6BFE` border) for DeepThink / Search toggles
- Give the user bubble the asymmetric `18/18/4/18` corner (4pt points at the sender)
- Stream the trace token-by-token with a live duration counter, then the answer
- Show `[n]` citation chips when Search is on; open a source sheet on tap

### Don't
- Don't render the reasoning trace upright or full-contrast — it must be dimmer/italic/recessed
- Don't make the trace background lighter than the canvas — it recedes by being *darker*
- Don't use blue for body text — blue is reserved for accents/toggles/links/citations only
- Don't give assistant messages a bubble — only the user gets a bubble; AI is full-width
- Don't add a second accent color — DeepSeek has exactly one (`#4D6BFE`)
- Don't show the trace when DeepThink (R1) is off (V3 fast mode answers directly, no trace)
- Don't use a heavy custom display font — DeepSeek uses the platform sans
- Don't elevate the trace with a shadow — it uses a darker fill, not elevation
- Don't keep the trace expanded by default on long answers — collapse after completion is fine
- Don't tint the active tab with a pill — active is just `#4D6BFE` glyph + label

## 8. Responsive Behavior

### Device Sizes
| Device | Width | Key Changes |
|--------|-------|-------------|
| iPhone SE (3rd gen) | 375pt | Bubble max 80%; toggles may wrap to 2 rows |
| iPhone 13/14/15 | 390pt | Standard layout |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
| iPhone 15/16 Pro Max | 430pt | Wider chat column; larger trace text |
| iPad (portrait) | 768pt | Chat centered max 720pt; History 2-pane |
| iPad (landscape) | 1024pt+ | Persistent History sidebar + chat; trace inline |

### Dynamic Type
- Message body, headings, reasoning text: full scale
- Tab labels, citation chips, toggle text: FIXED (layout-sensitive)
- Code blocks: scale to XL (stay monospace)

### Orientation
- All screens support rotation
- iPad split view: History list (primary) + active chat (secondary); the trace stays inline within the assistant message

### Touch Targets
- Toggle pill: 44pt min hit, 13pt label
- Trace header (collapse/expand): full-width 36pt hit
- Tab bar icons: 22pt glyph, 44pt hit
- Send button: 36pt circle, 44pt hit
- Citation chip: 24pt hit, 11pt glyph

### Safe Area Handling
- Top: top bar respects safe area and Dynamic Island
- Bottom: composer (toggles + input) and tab bar respect home indicator
- Keyboard: chat scrolls above keyboard; composer (with toggle row) docks above the keyboard
- Sides: 16pt content inset

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (dark): `#0E0E10` · (light): `#FFFFFF`
- Surface 1: `#1A1B1E` dark / `#F5F6F8` light
- Reasoning BG: `#16171A` dark / `#F7F8FA` light (darker/recessed)
- Divider: `#2E2F33` dark / `#E4E6EB` light
- DeepSeek Blue: `#4D6BFE`
- Blue pressed: `#3B57E0`
- Blue soft: `#1E2240` dark / `#EBEFFF` light
- Text primary: `#ECECEC` dark / `#1A1B1E` light
- Reasoning text: `#8A8B90` dark / `#6E6F74` light (italic)
- Text secondary: `#9A9BA0` dark / `#6A6B70` light
- Success: `#2EBD85` · Error/Stop: `#E5484D`

### Example Component Prompts
- "Build the DeepSeek reasoning trace in SwiftUI: a recessed panel, background `#16171A` (darker than the `#0E0E10` canvas), a 2pt `#4D6BFE` left bar, 10pt corner radius. Header row: brain SF Symbol 14pt `#4D6BFE` + 'Thought for 14 seconds' (Inter 12pt w600 `#9A9BA0`) + '· tap to collapse' (`#6A6B70`). Body: chain-of-thought in Inter 13pt w400 **italic** `#8A8B90`, line-height 1.55. Tap header → 200ms height collapse to a single line with a chevron rotation."

- "Create the DeepSeek composer: a toggle row above a pill input. Two toggle pills — 'DeepThink (R1)' (brain icon) and 'Search' (magnifier) — off = `#1A1B1E` bg / 1pt `#2E2F33` border / `#9A9BA0` text; on = `#1E2240` bg / 1pt `#4D6BFE` border / `#4D6BFE` text+icon, 150ms crossfade. Below: 50pt pill, `#1A1B1E` bg, 1pt `#2E2F33` border, 25pt radius, placeholder 'Message DeepSeek' `#6A6B70`, trailing 36pt circular send (`#4D6BFE` fill, white up-arrow; morphs to a red `#E5484D` stop square while streaming)."

- "Render a DeepSeek assistant message: no bubble, full content width. Header: whale glyph 18pt `#4D6BFE` + 'DeepSeek-R1' (Inter 13pt w600 `#9A9BA0`). If DeepThink is on, a reasoning trace panel precedes the answer. Answer body: Inter 15pt w400 `#ECECEC`, line-height 1.6. Inline code: SF Mono 13pt on `#232428` chip with token color `#C5CDFF`. Action row: copy / thumbs-up / thumbs-down / regenerate, 16pt `#6A6B70`."

- "Build the DeepSeek user bubble: background `#1E2240`, 1pt `#2A3360` border, text `#ECECEC` Inter 15pt w400 line-height 1.5, asymmetric corner radius 18/18/4/18 (4pt corner bottom-right pointing at the sender), 12pt×16pt padding, max width 78% right-aligned."

- "Create the DeepSeek streaming sequence: when DeepThink (R1) is on, first the reasoning panel types in token-by-token with a blinking `#4D6BFE` caret and a live-counting 'Thought for N seconds' label; when reasoning finishes, the upright answer streams below in `#ECECEC` and the caret hands off. While streaming, the send button is a red `#E5484D` stop square."

- "Build the DeepSeek bottom tab bar: 68pt + safe area, `rgba(14,14,16,0.94)` 20px blur, 0.5pt `#2E2F33` top border. Three tabs: Chat, History, Settings — 22pt glyphs, Inter 10pt w500 labels. Active = `#4D6BFE` glyph+label (slightly thicker stroke, NO tint pill). Inactive = `#6A6B70`."

### Iteration Guide
1. Canvas is near-black `#0E0E10` (dark) / clean white `#FFFFFF` (light) — calm, research-tool quiet
2. Exactly one accent: DeepSeek Blue `#4D6BFE` — whale, user bubble, send, active toggles, links, citations; never body text
3. The reasoning trace is THE signature — a recessed `#16171A` panel (darker than canvas) with a 2pt blue left-bar
4. Chain-of-thought is dimmed `#8A8B90` **italic** 13pt; the answer is upright `#ECECEC` 15pt and visually dominant
5. The trace header reads "Thought for N seconds · tap to collapse" — tap collapses with a 200ms height animation
6. DeepThink (R1) toggle ⇒ shows the trace; Search toggle ⇒ adds `[n]` citation chips — both use soft-blue active state
7. User messages get a `#1E2240` bubble with an asymmetric 18/18/4/18 corner; assistant messages have no bubble
8. Stream the trace token-by-token with a live duration counter, THEN the upright answer below it
9. Surfaces differ by only a few % luminance; the trace recedes by being darker, not by a shadow
10. The active tab is just `#4D6BFE` glyph+label — no tinted pill; DeepSeek has no second accent