JD Brand Design System Deep-Dive

1. Brand Overview

JD (京东) is one of China’s largest e-commerce platforms, and their global site at https://global.jd.com/ has a very particular design voice: sharp, commercial, and unapologetically retail-first. This isn't a soft, lifestyle brand aesthetic — it’s engineered for transactions. The design language is functional, bold, and built to handle high-density product information without losing clarity.

The vibe? Retail urgency meets corporate cleanliness. The primary red (#f30213) is everywhere — it's the visual equivalent of a salesperson’s call-to-action. Red in Chinese culture is luck and prosperity, so it pulls double duty: cultural resonance and attention-grabbing psychology. JD leans heavily on this red for buttons, accents, and action states. In a sea of competitors like Alibaba/Tmall (who also lean red) and Amazon (who uses orange), JD’s red is deeper, slightly cooler, and paired with a strict neutral system.

Typography mixes Chinese system fonts (PingFang SC, Microsoft YaHei) with fallback stacks, ensuring multilingual support. It feels utilitarian — no decorative flourishes. Layout spacing is methodical, mostly multiples of 8px, with some 2px and 3px micro-spacings for tight control. Borders are subtle, shadows minimal — depth is hinted, not exaggerated.

This design system is for people who need to parse product data fast. It’s optimized for clarity in complex retail interfaces — category menus, search, product cards. The corners are small-radius, the hover states not screaming, the text sizes tuned for legibility at glance. JD’s philosophy here is: function first, brand second — but brand is always visible in red.

2. Color System

2.1 Primary Colors

The core brand color is #f30213 — a strong, saturated red. Psychologically, red signals urgency, passion, and action. In retail, it boosts conversion by making CTAs more prominent. JD uses it in primary buttons, highlights, and active states. Compared to Alibaba's slightly warmer red, JD’s is sharper and slightly darker — it feels more “corporate retail” than “market bazaar.”

2.2 Complete Palette

These aren’t “official” names — I’m naming them for working purposes. The palette is tight: one brand red, one hover red, a stack of greys, black, and white. No blues, greens, or yellows in the main UI — JD keeps it monochrome + red for consistency.

2.3 Color Relationships

Contrast is solid. #f30213 on white passes WCAG AA for large text but just skirts AA for small text — JD mitigates by using white on red for buttons, which is safe. Dark neutrals against white are comfortably accessible. There’s no dark mode here — this palette is built for light backgrounds.

2.4 Usage Guide

• Works well: Brand red with white text (high impact, high contrast). Black-90 with white background for section headings. Grey-999 for low-priority info.
• Avoid: Red text on black — too harsh, low readability. Grey-ccc for text — fails accessibility for body copy.
• Pairing rule: Only brand red should be used for interactive action states. Greys define hierarchy; don’t mix them randomly.

3. Typography

3.1 Font Families

JD uses Chinese system fonts for reliability:

• PingFang SC (Apple system sans serif for Simplified Chinese)
• Microsoft YaHei / Microsoft YaHei UI (Windows sans serif)
• Fallback stack includes system-ui, -apple-system, tahoma, arial, Hiragino Sans GB, 宋体 for cross-platform coverage.
• Custom font: JDZhengHT-EN appears for captions — likely a proprietary brand font.

No Google or Adobe font sources — this is all system/native.

3.2 Type Scale

3.3 Hierarchy

JD’s heading-1 jumps from 28px to 18px — two scales depending on context. The 28px is for big titles; 18px for section headers. Body/link/caption sizes are tightly clustered around 12–14px, which keeps the UI dense but readable. Line heights range from tight (1.0) for headings to very loose (3.0) for link lists — that’s a deliberate spacing trick for navigation clarity.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px — but JD breaks the rule with micro units (2px, 3px, 4px) for fine-grain control.

4.2 Layout

No explicit breakpoints extracted — likely a responsive grid, but the tight spacing scale suggests container widths around common desktop norms (~1200px). Section padding aligns to 8px multiples.

5. Visual Elements

Border Radius

JD keeps corners small:

Main token is 8px — used everywhere. 4px for small elements, 6px for search buttons, 25px for something special (maybe pill avatars).

Shadows

Minimal use:

• rgba(0, 0, 0, 0.1) 1px 2px 1px 0px — subtle edge shadow
• Rare deeper shadows (0px 2px 8px)
• One strong side shadow (0.3 opacity, 2px x-offset)

Depth is handled sparingly — JD prefers flat + borders.

Borders

Common: 1px solid rgba(0,0,0,0.06) — hairline dividers. White borders for buttons. Occasional red borders for active states.

6. Components

6.1 Buttons

Variant 1 — Navigation/utility button:

• Default: transparent background, rgb(80,82,89) text, padding 0px 20px 0px 8px, radius 0px, white border 1px solid.
• Font: 12px, weight 400.
• No hover/active/focus styles extracted — likely subtle.

Variant 2 — Search CTA:

• Default: #ff0f23 background, white text, padding 0px, radius 6px, no border, font 16px, weight 600.
• Strong visual — primary action.

6.2 Links

Six styles:

• Neutral dark (rgb(80,82,89)), no underline
• Mid grey (#666666), no underline
• Black-90 (#1a1a1a), no underline
• White (#ffffff), weight 500 — likely nav on dark bg
• Gold-ish (#e3d799), weight 500 — maybe promotional
• Grey-999, no underline

Hover states not extracted — likely color shifts.

6.3 Forms

Text inputs:

• Transparent background, black text, no border, radius 8px, padding 2px 44px 2px 19px.
• No focus style extracted — possibly handled via container.

6.4 Cards

No explicit card component, but shadows suggest subtle depth. Padding aligns to spacing scale (20px, 26px).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-brand-red: #f30213;
  --color-hover-red: #ff0f23;
  --color-black-90: #1a1a1a;
  --color-white: #ffffff;
  --color-grey-ccc: #cccccc;
  --color-grey-999: #999999;
  --color-black: #000000;
  --color-grey-444: #444444;

  /* Typography */
  --font-pingfang-sc: "PingFang SC", system-ui, -apple-system, tahoma, arial, "Microsoft YaHei", "Hiragino Sans GB", "宋体";
  --font-microsoft-yahei: "Microsoft YaHei", sans-serif;
  --font-microsoft-yahei-ui: "Microsoft YaHei UI", sans-serif;
  --font-jdzhenght-en: "JDZhengHT-EN", sans-serif;
  --font-iconfont: "iconfont";

  /* Font sizes */
  --font-size-h1-lg: 28px;
  --font-size-h1-sm: 18px;
  --font-size-button-lg: 16px;
  --font-size-body: 14px;
  --font-size-caption: 12px;
  --font-size-caption-sm: 10px;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-26: 26px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;

  /* Border radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 25px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 1px 2px 1px 0px;
  --shadow-medium: rgba(0, 0, 0, 0.1) 0px 2px 8px 0px;
  --shadow-light: rgba(0, 0, 0, 0.05) 0px 2px 8px 1px;
  --shadow-side: rgba(0, 0, 0, 0.3) 2px 0px 5px 0px;
}

8. AI Coding Assistant Prompt

# JD Design System Specification

System Prompt:
You are a JD design expert. Build UIs matching their visual language exactly.

Brand Context:
JD’s design language is retail-focused, functional, and high-density. Strong brand red drives primary actions, paired with strict neutrals for information hierarchy. Corners are small-radius, shadows minimal, typography is utilitarian Chinese system sans serif.

## Colors
- Brand Red: #f30213 — Primary actions, CTAs, highlights
- Hover Red: #ff0f23 — Hover/focus states
- Black-90: #1a1a1a — Headings, high-emphasis text
- White: #ffffff — Background, text on red/dark
- Grey-ccc: #cccccc — Dividers, secondary surfaces
- Grey-999: #999999 — Secondary text
- Black: #000000 — Icons, body text
- Grey-444: #444444 — Subheadings, muted text

## Typography
- Headings: Microsoft YaHei UI / PingFang SC
- Body: PingFang SC / Microsoft YaHei
- Caption: PingFang SC, JDZhengHT-EN
- Icon: iconfont

| Level       | Size px/rem | Weight | Line Height | Use |
|-------------|-------------|--------|-------------|-----|
| H1 Large    | 28px/1.75rem | 700    | —           | Page titles |
| H1 Small    | 18px/1.13rem | 600    | 1.00        | Section headers |
| Button LG   | 16px/1.00rem | 600    | —           | Primary buttons |
| Body/link   | 14px/0.88rem | 400    | 1.57        | Body text, links |
| Caption     | 12px/0.75rem | 400–700| 1.42–3.00   | Labels, captions |
| Caption sm  | 10px/0.63rem | 500    | 1.00        | Micro-labels |

## Spacing & Grid
Base: 8px grid
Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 14px, 16px, 17px, 18px, 20px, 22px, 26px, 30px, 32px, 40px
Use: Buttons (10px horizontal), Cards (26px padding), Sections (20px–40px gaps)

## Border Radius
- none: 0px — tables, menus
- sm: 4px — small divs
- md: 6px — search buttons
- lg: 8px — inputs, cards
- xl: 25px — special elements

## Shadows & Depth
- Subtle: rgba(0,0,0,0.1) 1px 2px 1px 0px
- Medium: rgba(0,0,0,0.1) 0px 2px 8px 0px
- Light: rgba(0,0,0,0.05) 0px 2px 8px 1px
- Side: rgba(0,0,0,0.3) 2px 0px 5px 0px

## Components

### Primary Button
Default:
```css
.btn-primary {
  background: #ff0f23;
  color: #ffffff;
  padding: 0;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  font-size: 16px;
}

Hover/focus: maintain color, add outline if needed. Disabled: opacity 0.5.

Secondary/Nav Button

.btn-nav {
  background: transparent;
  color: rgb(80,82,89);
  padding: 0px 20px 0px 8px;
  border: 1px solid #ffffff;
  border-radius: 0px;
  font-size: 12px;
  font-weight: 400;
}

Links

No underline, color per role (dark, grey, white, gold).

Input Field

.input {
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 2px 44px 2px 19px;
}

Layout & Responsive Rules

• Max width: ~1200px
• Page padding: multiples of 8px
• Grid gaps: use spacing tokens

Interaction Rules

• Transitions: 150ms ease on state changes
• Focus: Outline with brand red or hover red
• Disabled: 50% opacity, no pointer events

DO

• Use only palette colors
• Maintain 8px grid (micro exceptions allowed)
• Keep corners small (max 8px on common elements)
• Use system fonts for reliability
• Keep shadows subtle

DON'T

• Add new colors
• Use large radius mixed with sharp corners
• Overuse shadows
• Break spacing multiples

Code Examples

Primary Button:

.btn-primary {
  background: #ff0f23;
  color: #ffffff;
  padding: 0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #f30213; }

Card:

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 26px;
  box-shadow: var(--shadow-subtle);
}

Input:

.input {
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 2px 44px 2px 19px;
}
.input:focus { outline: 1px solid #f30213; }

---

## 9. Summary

**TL;DR** — JD’s design system is red-driven, neutral-backed, with small-radius corners and dense typography. It’s built to handle retail complexity without losing clarity. Shadows are minimal, spacing is tight, fonts are system-based.

**Brand Keywords**:
- retail-functional
- red-dominant
- small-radius
- dense-typography
- minimal-depth