DeepSeek DESIGN.md

Design System Inspiration of DeepSeek (深度求索)

Overview

Visual Theme & Atmosphere

DeepSeek is the Hangzhou AI lab whose open-weight reasoning models reset expectations for what a small team could ship. Its web presence is the opposite of the models' notoriety: quiet, pale and almost entirely white, a #f9f8f8 page with translucent glass panels floating on it.

The interface is built out of transparency rather than fill. Surfaces are hsla(0,0%,100%,.3) and .45 — white at a stated alpha over the page, not opaque cards — and borders are rgba(0,0,0,.06) through .2, a four-step ladder of black at low opacity. There is a --ds-blur-glass: 12px. The whole chrome is frosted.

Against that, the brand blue #4d6bfe appears sparingly, and the primary button is not blue at all — it is #1a1615, a warm near-black.

What makes this reference unusual for a Chinese brand in this catalog: DeepSeek publishes a genuine, complete token system — 82 --ds-* properties covering colour, four button variants, radius, spacing and typography — and, uniquely among the CN references measured so far, a declared font-family token.

Primary tasks

• Read model announcements and capability claims without interface noise.
• Reach the app, the API platform and the papers from one pale surface.

Brand Narrative

DeepSeek was founded in Hangzhou in 2023, backed by the quantitative fund High-Flyer, and released open-weight models whose training-cost claims reframed the economics of frontier AI through 2025 and 2026. The visual identity matches the posture: a pale, quiet, almost unbranded surface that puts the model names and the papers in front, and spends its one strong colour sparingly.

Principles

• Transparency over fill. Glass surfaces, alpha borders, a blur token.
• The accent is not the action. Brand blue marks; near-black acts.
• Publish the system. Four button variants and thirteen spacing steps, all named.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

Measured 2026-09-22 with getComputedStyle on deepseek.com. 82 of 99 custom properties are --ds-*; the remaining 17 are Tailwind internals (--tw-*) and are not recorded.

Brand

• Brand (#4d6bfe) — --ds-color-brand. The identity blue.
• Brand Deep (#3a65c2) — --ds-color-brand-deep.
• Brand Medium (#4176e6) — --ds-color-brand-medium-reverse; the value the measured chip actually paints.
• Brand Light (#73a3d2) — --ds-color-brand-light-reverse.
• Hero Join (#2e609f) — --ds-color-bg-hero-join.

Text

• Foreground (#1e232c) — --ds-color-text-primary.
• Text Bluish (#152443) — --ds-color-text-primary-bluish. A second primary text colour with more blue in it, for surfaces that sit on the glass.
• Text Placeholder (#8691a1) · Text Link (#234792) — --ds-color-text-link-blue, a navy distinctly darker than the brand.
• Text Inverse (#ffffff) · Static Black (#0f0f0f) — --ds-color-static-black.
• Secondary and description text are black at alpha (.7 and .65) rather than greys.

Surface

• Canvas (#f9f8f8) — --ds-color-bg-page. Warm off-white, not pure.
• Overlay (#ffffff) — --ds-color-bg-overlay.
• Dark (#1a1615) — --ds-color-bg-dark, and the same value is --ds-btn-primary-bg.
• Five numbered surfaces (surface-1…5) plus surface-raised, all translucent: hsla(0,0%,100%,.3), .2, .45 over the page, or rgba(0,0,0,.02–.05) for recessed ones. A consumer that flattens these to hex loses the glass.

Border ladder

subtle .06 → divider .08 → default .1 → strong .2, all black at alpha, plus secondary rgba(9,45,78,.14) which is a navy, not black — the border on glass panels picks up the blue.

Typography

Font Family

DeepSeek declares its typeface, and that is rare here. --ds-font-sans and --ds-font-body both resolve to "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, and --ds-font-mono to "Fragment Mono", "Roboto Mono", ui-monospace, monospace.

DM Sans loads and Fragment Mono does not. Re-audited 2026-09-22: the page declares six @font-face entries — DM Sans at 400 and 500 (both loaded), DM Sans 700 and three Montserrat weights (one loaded) — and Fragment Mono is not among them. It is named in --ds-font-mono and falls through to Roboto Mono / ui-monospace.

So tokens.typography.family records DM Sans only. Fragment Mono is a declared, unrendered face and stays here in prose, the same treatment CADDi's Zalando Sans Expanded gets. Montserrat loads and is named in no --ds-font-* token, so it is not recorded either.

Every other CN reference in this catalog leaves family absent because the brand ships only a system stack; DeepSeek is the exception, for one face rather than two.

Scale

The landing surface is small: control text at 15px/500 on the large pills and 13px/500 on the compact chip. No display step was observed — the page is short and text-light (521 characters of body copy).

Layout

• Glass over fill. Surfaces are white at alpha with a 12px blur, not opaque panels.
• Borders carry the hierarchy, at four opacities of black plus one navy.
• Spacing is bimodal — a 4–40px component range and an 80–240px page range, with little in between.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

One shadow token: --ds-shadow-card, a layered 0 0 0 1px #f1f5f9, 0 2px 4px rgba(0,0,0,.05), 0 12px … — a hairline ring plus two soft drops. With --ds-blur-glass: 12px, depth here is glass and hairline, not drop shadow.

Motion & Easing

Not measured. No transition or duration token appears among the 82 --ds-* properties.

---

Tier 1 sources: https://www.deepseek.com/ (live product surface — 99 custom properties of which 82 are --ds-*, read via getComputedStyle; the secondary pill and brand chip measured with hover, pressed and focus, 2026-09-22); https://platform.deepseek.com/ (DeepSeek's API platform — a second brand-owned regional surface confirming ownership; not cited for product tokens)

Components

Measured live, focus read before the mouse touched each control so the modality heuristic did not suppress :focus-visible.

Secondary pill — the main call to action

• Rest: hsla(0,0%,100%,.4) fill, #1e232c text, 1px solid rgba(9,45,78,.18), 100px radius, 44px tall, 15px/500.
• Hover and pressed: border darkens to #092d4e.
• Focus: :focus-visible matches, and what paints is outline: rgb(0, 95, 204) auto 1px — Chrome's own default ring, not DeepSeek's. The auto style is the tell: an authored ring names a style and a width. A page with no author stylesheet at all paints exactly this value on a button, an anchor and an input, in both colour schemes. No focus token is recorded, because the brand declares none.

Token and render agree. --ds-btn-secondary-bg is hsla(0,0%,100%,.4) and --ds-btn-secondary-border is rgba(9,45,78,.18) — exactly the measured rest state — while --ds-btn-secondary-hover-border is rgba(9,45,78,.36), which composites to the measured #092d4e. Two independent readings of one contract.

Brand chip

• Rest: rgba(65,118,230,.12) wash, #4176e6 text, 1px solid rgba(65,118,230,.3), 18px radius, 34px tall, 13px/500. Hover and pressed shift the brand value.

Primary button

--ds-btn-primary-bg is #1a1615 with #fff text and a transparent border, and --ds-btn-primary-hover-bg is hsla(0,0%,100%,.3) — the primary lightens on hover rather than darkening, because it is near-black to begin with.

It is not declared as a component here. The values above are token readings; no rendered primary button appeared on the measured surface, so no state was observed, and a component whose states nobody saw does not get declared. The tokens stand on their own.

The four button variants, as published

primary · secondary · ghost · ghost-static, plus a liquid fill pair. Each carries bg, border, text and hover values — 21 tokens in all. The ghost variants are transparent at rest with #121c31 text (--ds-btn-ghost-text) and #0f0f0f on the static form, hovering to rgba(0,0,0,.04). Only secondary was measured on a rendered control.

Radius and spacing

Six radii: sm 8 · input 10 · media 12 · panel 16 · card 24 · pill 100. Thirteen spacing steps: 4 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 80 · 120 · 160 · 200 · 240 — tight at the bottom, then jumping hard for page-level rhythm.

States

The secondary pill carries hover and pressed. Focus is deliberately not recorded. It was first read as a #005fcc ring and written up as a brand value; re-measured against a control page carrying no author stylesheet, rgb(0, 95, 204) auto 1px turned out to be Chrome's default :focus-visible outline, painted identically on a bare button, anchor and input in both colour schemes. DeepSeek declares no focus style, so none is claimed. The brand chip carries hover and pressed. The other three button variants are declared in the token set and were not observed rendering.

Do's and Don'ts

Do

• Keep surfaces translucent; the alpha is the design.
• Use #1a1615 for the primary action — the brand blue is an accent, not the button.
• Take borders from the four-step black-alpha ladder rather than picking a grey.
• Set DM Sans; it is declared, not inferred.

Don't

• Don't flatten hsla(0,0%,100%,.3) surfaces to opaque hex — the glass disappears.
• Don't use #4d6bfe as a fill for large areas; it appears as accent and chip text.
• Don't read --tw-* as DeepSeek's; 17 of the 99 properties are Tailwind internals.

Voice & Tone

Spare and technical. The site states what the models do and links to the papers; there is almost no marketing copy to measure — 521 characters on the entire landing surface.

Agent Prompt Guide

Quick Color Reference

#4d6bfe brand · #1a1615 primary button · #1e232c text · #f9f8f8 page · #8691a1 placeholder · #234792 link · borders black at .06/.08/.1/.2

Example Component Prompts

• "A 44px liquid-glass pill: 40% white fill over #f9f8f8, rgba(9,45,78,.18) border, #1e232c 15px/500 label, border to #092d4e on hover. Supply your own focus ring — DeepSeek leaves the browser's."