Baidu Design System Deep-Dive

1. Brand Overview

Baidu’s homepage is a masterclass in restrained interface design for a high-traffic, search-centric product. You land on it and immediately understand the hierarchy: the logo, the search bar, the minimal navigation. No wasted pixels. This is a design built for speed, clarity, and familiarity.

The vibe is pragmatic but with a hint of corporate friendliness. The primary blue (#4e6ef2) is the only truly “branded” splash of color—it anchors the interactive elements and reinforces trust. Everything else is neutral: whites, light greys, dark text. That’s deliberate. Baidu’s audience spans billions of users across demographics; the color system has to work for everyone, in any context.

Typography aligns with this philosophy. System-friendly fonts like PingFang SC and Arial dominate, ensuring legibility across devices and OS configurations. No custom web fonts. No performance overhead. This is utilitarian design.

Layout spacing is tight and efficient. Components hug their content. You won’t find excessive whitespace—this isn’t a luxury brand pushing editorial aesthetics. It’s a search engine optimizing for functional speed.

One thing I love: they’ve kept the component library extremely lean. There’s one primary button style, a few link styles, and minimal form inputs. It’s clear they’ve optimized for maintainability. Odd choice: hover states sometimes change text color to dark (#222) even on blue backgrounds, which feels slightly off-brand.

Overall, Baidu’s design system is about clarity, performance, and universality. This isn’t a playground for flamboyant UI. It’s a workhorse.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(78, 110, 242) (#4e6ef2). This is a saturated, slightly cool blue with high visual weight. Psychologically, blue signals trust, reliability, and calm. For a search engine, it makes sense: you want users to feel confident clicking your CTAs.

Compared to Google’s multicolor approach, Baidu’s single primary color feels more corporate and focused. It’s closer to Microsoft’s blue than to Google’s playful palette.

2.2 Complete Palette

2.3 Color Relationships

The primary blue (#4e6ef2) on white meets WCAG AA for normal text and AAA for large text. Orange (#ff6600) is used sparingly, so contrast issues are minimal. Text colors (#222) on white background are very strong in contrast (~17:1 ratio).

Accessibility-wise, links in #0000ee are classic web blue—instantly recognizable. However, the hover state for buttons (blue background with dark text) reduces contrast compared to white text on blue. This could be a concern for low-vision users.

Dark mode is not present. The palette is fully optimized for light mode.

2.4 Usage Guide

• Works well: Primary blue with white text for CTAs. Neutral greys for background elements.
• Avoid: Using orange as a primary background—it’s too aggressive and reads as an alert.
• Combinations: Blue + grey for subtle states; orange only for active or warning feedback.
• Tip: Keep text on blue backgrounds white (#fff) for maximum contrast.

3. Typography

3.1 Font Families

Baidu uses:

• PingFang SC — system font for Simplified Chinese, with fallbacks to Arial and Microsoft YaHei.
• Arial — default for English or fallback scenarios.
• cIconfont — icon font for glyphs.

No Google Fonts. No Adobe Fonts. Everything is system-based for speed.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle. The largest size is 18px—there’s no jumbo headline. The differentiation comes from font choice, line height, and spacing. For example, PingFang SC headings have a much taller line height (2.25) compared to Arial (1.00), giving breathing space in Chinese text.

Readability is high thanks to restrained weights (mostly 400) and generous line heights in body contexts.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 4px scale.

4.2 Layout

No explicit breakpoints in the data—probably fluid until certain widths. Containers are modest; the large 370px value suggests internal modules, not full-page containers.

5. Visual Elements

Border Radius

Shadows

None. Flat design. Depth comes from borders and color changes.

Borders

One combination: 2px solid #c4c7ce — used for input fields.

6. Components

6.1 Buttons

Primary button:

• Default: background #4e6ef2, text #fff, padding 0px, radius 6px, no border, no shadow.
• Hover: background #4662d9, text #222.
• Active: background #4662d9, text #ff6600.
• Focus: opacity 1, no extra outline.

Opinion: The hover text color change to #222 on dark blue is odd—it reduces contrast.

6.2 Links

Three variants:

1. Dark text (#222) — default and hover both #222, no underline.
2. White text (#fff) — hover switches to dark (#222).
3. Grey text (#bbbbbb) — hover to dark (#222).

Links are underline-free by default, relying on color alone.

6.3 Forms

Only one input style: 2px solid #c4c7ce, asymmetric radius 10px 0px 0px 10px. Suggests paired with a button for search.

6.4 Cards

No explicit card styles in data. Likely flat, white background, small radius if used.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #4e6ef2;
  --color-neutral-light: #bbbbbb;
  --color-white: #ffffff;
  --color-neutral-mid: #9195a3;
  --color-accent-orange: #ff6600;
  --color-link-blue: #0000ee;
  --color-hover-blue: #315efb;
  --color-hover-grey: #a7aab5;
  --color-hover-primary: #4e6ef2;
  --color-hover-dark-blue: #4662d9;
  --color-text-dark: #222222;
  --color-border-grey: #c4c7ce;

  /* Typography */
  --font-pingfang: "PingFang SC", Arial, "Microsoft YaHei";
  --font-arial: Arial, sans-serif;
  --font-ciconfont: "cIconfont";

  --font-size-18: 18px;
  --font-size-16: 16px;
  --font-size-14: 14px;
  --font-size-13: 13px;
  --font-size-12: 12px;

  --line-height-1: 1.00;
  --line-height-2-25: 2.25;
  --line-height-1-71: 1.71;
  --line-height-2-57: 2.57;
  --line-height-1-77: 1.77;
  --line-height-1-85: 1.85;
  --line-height-1-33: 1.33;

  /* Spacing */
  --space-1: 1px;
  --space-12: 12px;
  --space-18: 18px;
  --space-19: 19px;
  --space-33: 33px;
  --space-45: 45px;
  --space-370: 370px;

  /* Border Radius */
  --radius-asym-btn: 0px 10px 10px 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-asym-input: 10px 0px 0px 10px;

  /* Borders */
  --border-input: 2px solid #c4c7ce;
}

8. AI Coding Assistant Prompt

# Baidu Design System Specification

This design system is inspired by Baidu's official website. All values, colors, typography, and component styles are extracted from their production site. Use this specification to build UIs that match Baidu's visual language.

## System Prompt
You are a Baidu design expert. Build UIs matching their visual language exactly.

## Brand Context
Baidu values clarity, speed, and universality. The design is minimal, flat, and optimized for performance across devices. Colors are restrained, typography is system-based, and components are lean.

## Colors
- Primary Blue: #4e6ef2 — CTAs, primary buttons
- Neutral Light Grey: #bbbbbb — Secondary text, disabled states
- White: #ffffff — Backgrounds, text on blue
- Neutral Mid Grey: #9195a3 — UI chrome
- Accent Orange: #ff6600 — Active states, alerts
- Link Blue: #0000ee — Hyperlinks
- Hover Blue: #315efb — Hover/focus states on interactive blue elements
- Hover Grey: #a7aab5 — Hover/focus on neutral elements
- Hover Primary Blue: #4e6ef2 — Hover/focus matching primary color
- Hover Dark Blue: #4662d9 — Button hover background
- Dark Text: #222222 — Primary text
- Border Grey: #c4c7ce — Input borders

## Typography
- PingFang SC, Arial, Microsoft YaHei — headings, UI labels
- Arial — captions, English text
- cIconfont — icons

| Level     | Size | Weight | Line Height | Use For        |
|-----------|------|--------|-------------|----------------|
| H1 (icon) | 18px | 400    | 1.00        | Icon headings  |
| H1 Arial  | 18px | 400    | 1.00/-1px   | Titles         |
| H1 PingFang| 16px| 400    | 2.25        | CN headings    |
| Caption   | 14px | 400    | 1.71        | Secondary text |
| Link PingFang| 14px| 400  | 2.57        | Navigation     |
| Link Arial| 13px | 400    | 1.77        | Navigation     |
| Button PingFang| 13px|400 | 1.85        | Buttons        |
| Link PingFang| 12px|400   | null        | Small links    |
| Caption PingFang| 12px|400| null        | Labels         |
| Button PingFang| 12px|400 | null        | Small buttons  |
| Caption PingFang| 12px|200| 1.33        | Fine print     |

## Spacing & Grid
Base: 4px scale
Values: 1px, 12px, 18px, 19px, 33px, 45px, 370px

## Border Radius
- asym-btn: 0px 10px 10px 0px — paired buttons
- sm: 4px — small elements
- md: 6px — primary buttons
- asym-input: 10px 0px 0px 10px — input fields

## Shadows & Depth
Flat design — no shadows. Use borders for separation.

## Component Specifications

### Primary Button
Default:
```css
background: #4e6ef2;
color: #ffffff;
padding: 0px;
border-radius: 6px;
border: none;
font-weight: 400;
font-size: 13px;

Hover:

background: #4662d9;
color: #222222;

Active:

background: #4662d9;
color: #ff6600;

Focus:

opacity: 1;

Navigation Links

Default: color varies (#222, #fff, #bbbbbb), no underline Hover: color #222, no underline

Input Fields

Border: 2px solid #c4c7ce
Radius: 10px 0px 0px 10px

Layout & Responsive Rules

No explicit breakpoints. Keep components within reasonable widths (e.g., 370px for modules). Use 19px gaps between elements.

Interaction Rules

• State changes via instant color swap
• No animations or transitions specified
• Focus states maintain opacity

DO

• Use only colors from the palette
• Keep spacing multiples of 4px
• Maintain flat design — no shadows
• Use PingFang SC for CN text, Arial for EN
• Keep buttons 6px radius

DON'T

• Add custom colors
• Use text on blue without white (#fff)
• Add underlines to links unless necessary
• Mix sharp and rounded corners in same component

Code Examples

Primary Button:

.btn-primary {
  background: #4e6ef2;
  color: #ffffff;
  padding: 0;
  border-radius: 6px;
  font-weight: 400;
  font-size: 13px;
  border: none;
}
.btn-primary:hover {
  background: #4662d9;
  color: #222222;
}
.btn-primary:active {
  background: #4662d9;
  color: #ff6600;
}

Input:

.input {
  border: 2px solid #c4c7ce;
  border-radius: 10px 0 0 10px;
}

Card:

.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 19px;
}

---

## 9. Summary

**TL;DR** — Baidu’s UI is minimal, flat, and system-friendly. Blue drives interactions, greys handle neutrals, and typography is purely system fonts. Components are lean, spacing tight, and everything optimized for speed.

**Brand Keywords**:
- utilitarian-flat
- speed-first
- trust-blue
- system-fonts
- lean-components