# deepseek.com Design System

> A clinical, high-contrast utility canvas anchored by slate-blue neutrals and a signature vibrant electric blue primary.

**Source:** https://deepseek.com | **Captured:** 2026-06-17 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
DeepSeek utilizes a "Mixed" system type that balances a stark white foundation `#ffffff` with a sophisticated slate-gray palette (primarily `#475569` and `#94a3b8`). The visual identity is defined by high-contrast typography and a signature electric blue `#4d6bfe` used for primary actions and brand-critical text. Layouts favor generous whitespace and a structured 8px base grid, while elevation is achieved through complex multi-layered shadows rather than traditional solid borders. The system feels engineered and precise, prioritizing legibility and functional density.

## Signature DNA
1. **The Slate Gradient Hierarchy** (DeepSeek avoids pure black for secondary content, instead using a systematic descent from `#334155` to `#94a3b8` to create depth without chromatic noise.)
2. **Glassmorphic Elevation** (Cards use a semi-transparent white background `rgba(255, 255, 255, 0.5)` paired with a triple-layered shadow to float above the canvas.)
3. **Electric Primary Accent** (The use of `#4d6bfe` for key text and interactive surfaces provides the only high-saturation moment in an otherwise achromatic environment.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| deepseek.com | #4d6bfe | Fluid blue waves | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 6 | 1.0 | computed_style |
| `{color.ink.primary}` | `#000000` | Primary display text | 24 | 0.8 | computed_style |
| `{color.border.subtle}` | `#e2e8f0` | Hairline dividers | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.brand.primary}` | `#4d6bfe` | Primary CTA text, brand links | 12 | 0.8 | computed_style |
| `{color.slate.700}` | `#334155` | Strong secondary text | 12 | 0.8 | computed_style |
| `{color.slate.600}` | `#475569` | Default body text | 63 | 0.8 | computed_style |
| `{color.slate.400}` | `#94a3b8` | Muted labels, metadata | 36 | 0.8 | computed_style |
| `{color.slate.500}` | `#64748b` | Decorative icons | 6 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `quote-cjk-patch` | 400, 700 | Primary UI & Body | Inter / Noto Sans SC | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 30px | 36px | normal | 700 | Hero headings | `div.font-bold.text-3xl` |
| `{type.heading.md}` | 20px | 28px | normal | 700 | Section titles | `div.text-xl.font-bold` |
| `{type.body.md.bold}` | 15px | 22.5px | normal | 700 | Emphasized body | `div.text-slate-700.font-bold` |
| `{type.body.md}` | 15px | 22.5px | normal | 400 | Secondary body | `div.text-slate-500` |
| `{type.link.sm}` | 14px | 20px | normal | 400 | Inline links | `a.ds-a.ds-a--link` |
| `{type.card.sm}` | 14px | 21px | normal | 400 | Banner content | `a.BannerCard_bannerCard__8xTj1` |

### Principles
1. **Bold for Structure**: Weight 700 is strictly reserved for semantic headings and primary navigation nodes.
2. **Slate for Hierarchy**: Color, not size, distinguishes primary body text (`#475569`) from secondary metadata (`#94a3b8`).
3. **Tight Vertical Rhythm**: Line heights are consistently 1.2x to 1.5x the font size, maintaining a compact, data-dense feel.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 12 |
| `{space.sm}` | 8px | 6 |
| `{space.lg}` | 24px | 24 |
| `{space.xl}` | 32px | 9 |
| `{space.xxl}` | 64px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Footer sections, sharp containers | 48 occurrences |
| `{radius.md}` | 6px | Inputs, small surfaces | 93 occurrences |
| `{radius.lg}` | 16px | Standard content cards | 6 occurrences |
| `{radius.xl}` | 18px | Large feature surfaces | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgb(241, 245, 249) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 24px 0px` | Floating feature cards | Card component |

## Components
### Tier 1: Foundational
#### Surface
**Role:** Base container for interactive elements.
**Pages observed:** All
**Spec:** Background: transparent / Text: `#94a3b8` / Radius: `6px` / Padding: `0px`
**States observed:** Default | Hover: captured | Focus: not captured

### Tier 2: Patterns
#### Card
**Role:** Primary content grouping.
**Pages observed:** All
**Spec:** Background: `rgba(255, 255, 255, 0.5)` / Text: `#000000` / Radius: `16px` / Padding: `24px 32px 28px` / Shadow: `{shadow.card}`
**States observed:** Default | Hover: captured

#### Banner Card
**Role:** High-visibility feature links.
**Pages observed:** Homepage
**Spec:** Background: transparent / Text: `#4d6bfe` / Radius: `18px` / Font-size: `14px`
**States observed:** Default | Active: captured

### Tier 3: Surface-specific
#### Section Header
**Role:** Top-level page division.
**Pages observed:** Pricing, About
**Spec:** Background: transparent / Text: `#000000` / Border-bottom: `1px solid #e2e8f0` / Radius: `0px` / Padding: `64px 32px 0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1280px |
| Section Gap | 64px |
| Horizontal Gutter | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Card padding reduces to 16px; 1-column stack |
| Desktop | 1440px | 2-up or 3-up card grids; 64px vertical section spacing |

## Imagery & decoration
DeepSeek utilizes abstract, fluid blue wave patterns in backgrounds to imply "depth" and "flow." It avoids illustrative icons, preferring minimalist glyphs in slate tones.

## Do's
- Use `#4d6bfe` for primary text links and interactive states.
- Apply the triple-layered `{shadow.card}` to all floating surfaces.
- Maintain a 1.5x line-height for body copy to ensure legibility.
- Use `6px` radius for all form-related inputs.
- Anchor layouts to the 8px grid (8, 16, 24, 32, 64).

## Don'ts
- **Wrong:** Using `#3b82f6` (standard Tailwind blue) for primary actions. **Right:** Use `#4d6bfe`. **Reason:** DeepSeek uses a custom electric blue, not the default framework palette.
- **Wrong:** Applying solid borders to cards. **Right:** Use the elevation shadow.
- **Wrong:** Using pure black `#000000` for long-form body text. **Right:** Use `#475569`.
- **Wrong:** Mixing sharp and rounded corners on the same horizontal plane.

## Similar brands
- OpenAI (Achromatic foundation)
- Anthropic (Clinical spacing)
- Linear (Shadow-based elevation)

## Quick start
```css
:root {
  --ds-primary: #4d6bfe;
  --ds-slate-700: #334155;
  --ds-slate-600: #475569;
  --ds-slate-400: #94a3b8;
  --ds-canvas: #ffffff;
  --ds-shadow-card: 0px 0px 0px 1px #f1f5f9, 0px 2px 4px 0px rgba(0,0,0,0.05), 0px 12px 24px 0px rgba(0,0,0,0.05);
  --ds-radius-card: 16px;
}
```

## Agent prompt examples
- "Generate a content card using a semi-transparent white background, a 16px border radius, and the DeepSeek triple-layered shadow."
- "Create a heading group with a 30px bold title in black and a 15px subtitle in #94a3b8."
- "Style a primary link using #4d6bfe with no underline and a 14px font size."

## Known gaps
- Hover and Active states for primary buttons were not fully captured in the static trace.
- Dark mode tokens were not observed in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://deepseek.com | 1440x900 | 2026-06-17 |
| Pricing | https://deepseek.com/pricing | 1440x900 | 2026-06-17 |
| Mobile | https://deepseek.com | 390x844 | 2026-06-17 |