A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
9type steps
2radius steps
7pxspacing base
Deepseek, in one page
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
Do's and don'ts
Do
- Use a near-black
#0E0E10canvas (dark) / clean#FFFFFF(light) — quiet research-tool calm - Ration DeepSeek Blue
#4D6BFEto the whale, user bubble, send, active toggles, links, citations - Render the reasoning trace in a recessed
#16171Apanel 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 (
#1E2240fill +#4D6BFEborder) for DeepThink / Search toggles - Give the user bubble the asymmetric
18/18/4/18corner (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
#4D6BFEglyph + label
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Deepseek design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- DeepSeek Blue: #4d6bfe
- dimmed italic: #8a8b90
- DeepSeek Blue Pressed: #3b57e0
- DeepSeek Blue Soft: #1e2240
- Blue Token: #c5cdff
- Canvas: #0e0e10
- Surface 1: #1a1b1e
- Surface 2: #232428
- Surface 3: #2c2d31
- Reasoning BG: #16171a
Type:
- families: Inter, SF Mono, Monospace, Fallback Stack
- scale: 10, 11, 12, 13, 14, 15, 18, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 10, 18
- elevation: Don't elevate the trace with a shadow — it uses a darker fill, not elevation
Spacing: 7, 10, 12, 14, 18
Rules:
- 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
Avoid:
- 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)
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
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 (
#1E2240dark /#EBEFFFlight): User-bubble fill, active-toggle fill, soft-button background. - Blue Token (
#C5CDFFdark /#3B57E0light): 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 (
#ECECECdark /#1A1B1Elight): Final answer, message body, titles. - Text Secondary (
#9A9BA0dark /#6A6B70light): Metadata ("Thought for N seconds"), model name, sub-labels. - Text Tertiary (
#6A6B70dark /#9A9BA0light): Placeholder, disabled. - Reasoning Text (
#8A8B90dark /#6E6F74light): 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) |
Type scaleRead the full spec
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 Monoon 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.
Components and layoutRead the full spec
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#E5484Dfor 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:
#232428background, 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,
#1A1B1Ebackground, 1pt#2E2F33border, 25pt corner radius - Leading 18pt inset, placeholder "Message DeepSeek" in
#6A6B70 - Trailing: 36pt circular send button —
#4D6BFEfill,#FFFFFFup-arrow glyph (turns into a red#E5484Dstop 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)withbackdrop-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
magnifyingglass18pt#6A6B70 - Placeholder "Search chats" 14pt
#6A6B70 - Focus: 1pt
#4D6BFEborder
Responsive behaviourRead the full spec
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
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-deepseek {--page-bg: #0e0e10;
--page-bg-gradient: none;
--text-color: #ececec;
--heading-color: #ececec;
--link-color: #617cfe;
--link-hover-color: #2e52fe;
--border-color: #363638;
--card-bg: #0e0e10;
--card-shadow: 0 1px 2px rgba(236,236,236,0.06);
--card-hover-shadow: 0 6px 18px rgba(236,236,236,0.12);
--header-bg: #212123;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #0e0e10;
--footer-text-color: #9e9e9f;
--button-bg: #4d6bfe;
--button-text-color: #000000;
--button-hover-bg: #1a41fe;
--button-border: none;
--button-border-radius: 18px;
--button-secondary-bg: #1b1b1d;
--button-secondary-text-color: #ececec;
--button-secondary-hover-bg: #29292a;
--button-secondary-border: 1px solid #363638;
--prompt-bg: #19191b;
--prompt-text-color: #ececec;
--base-font: var(--font-inter);
--heading-font: var(--font-mono);
--card-border-radius: 18px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/misc/deepseek/DESIGN.md· 24.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.