163 Brand Design System Deep Dive

1. Brand Overview

163.com is one of China's most established internet portals, operated by NetEase. If you’ve been around Chinese web design for a while, you’ll know this aesthetic instantly — it’s functional, information-heavy, and unapologetically portal-like. This isn’t a stripped-down landing page with a single headline. It’s a dense front page, full of news categories, weather, finance, gaming, and more.

The design philosophy is utilitarian: clarity over novelty. The palette is conservative, mostly neutrals with a signature red for brand presence and calls to action. The typography is pragmatic — system fonts with Chinese-optimized fallbacks (PingFang SC, Hiragino Sans GB, STHeiti, Microsoft Yahei, plus older Songti/Simsun for small labels). This ensures cross-platform rendering and fast load times.

For the audience, this makes sense. 163.com serves millions of daily visitors who arrive for quick information. The design doesn’t try to impress with bleeding-edge animations — it’s stable, familiar, and easy to parse. The brand red is used sparingly to draw attention to CTAs and headlines. The rest is grayscale and subtle accent blues/greens.

What stood out to me is how they stick to an 8px spacing mentality but still have irregular values like 5px, 7px, 13px — probably inherited from older visual patterns. Corners are mostly small radius (4px, 8px), with some 50% for avatars. Shadows are minimal — just a soft 0px 0px 8px in gray for lifted surfaces. Borders are still the main separator strategy, often in light grays (#eeeeee, #dddddd).

Overall: This is a news portal aesthetic, tuned for information density, with a restrained color system and typography that prioritizes legibility in Chinese scripts. It’s not trying to be trendy — it’s trying to be consistent across devices and years.

2. Color System

2.1 Primary Colors

The main brand color is a saturated red: #e10000 (rgb(225, 0, 0)). This is the NetEase red — bold, energetic, and culturally resonant (red is auspicious in Chinese culture). It’s used in the logo, primary buttons, and key links. The psychology is clear: urgency, importance, trust in local tradition. Competitors like Sina use similar reds, but often with more orange tint. 163’s red is cooler, closer to pure RGB red.

They also have a secondary red #ff3333 for hover states in buttons, which is slightly lighter and more playful.

The rest of the palette is grayscale — multiple steps from pure white (#ffffff) to near-black (#000000), with intermediates like #333333, #585858, #666666, #888888. There’s also a muted teal #4f7c87 for certain nav links — it’s the only cool accent.

2.2 Complete Palette

2.3 Color Relationships

White and red are high contrast — WCAG AAA for text. Red on white is accessible, but white on red needs careful weight (they use bold for button text). The grays are fine for body text on white, but some like #888888 on white might be borderline for contrast in small sizes. The teal accent has enough contrast on white but might fail on light gray backgrounds.

No obvious dark mode — this is a fixed light theme.

2.4 Usage Guide

• Use #e10000 for primary actions and urgent links.
• Use #ff3333 for hover states on buttons — keeps interaction visible.
• Keep body text at #333333 or #666666 — don’t use #888888 for anything longer than a short label.
• Teal #4f7c87 is for navigation accents only — don’t repurpose for buttons.
• Avoid mixing red and teal in the same component — they clash.

3. Typography

3.1 Font Families

They rely on system stacks:

• -apple-system, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft Yahei — modern sans set for Chinese and Latin.
• Microsoft Yahei standalone — still common in Windows-heavy environments.
• 宋体 and Sim sun — serif Songti for small print labels.
• Arial — occasional Latin fallback.
• vendna — appears once, possibly typo or legacy.

No Google/Adobe fonts. No variable fonts. This is about performance and compatibility.

3.2 Type Scale

3.3 Hierarchy

24px bold is the top tier — likely headlines. 18px medium/bold for secondary headings. 16px for body, with weight shifts for emphasis. 14px and 12px for captions, labels, metadata. The large line heights in Songti (3.67) feel like legacy table cells — this is not modern tight UI typography.

4. Spacing & Layout

4.1 Spacing Scale

Base is 8px grid, but they break it often.

4.2 Layout

No breakpoints provided — likely fixed desktop-first grid with responsive tweaks via Vuetify. Max widths not extracted. Page sections are separated by borders and spacing rather than huge whitespace.

5. Visual Elements

Border Radius

Values: 0px (square), 3px, 4px, 8px, 10px, 12px, 50% for circles. Also mixed corner radii (0px 8px 0px 0px, etc.) for specific shapes.

Shadows

• rgb(205, 205, 205) 0px 0px 8px 0px — soft outer glow, used on lifted elements.
• Minimal others: rgba(0,0,0,0.07) 0px 1px 4px (rare), rgba(4,0,0,0.08) 0px 0px 2px 3px (once).

Borders

Mostly 1px solid #eeeeee for separators. Some dashed #585858 for spans. Occasional red borders (#e10000) for emphasis.

6. Components

6.1 Buttons

Primary search button (netease_search_btn):

• Default: background #ff3333, text white, no padding, radius 0px 5px 5px 0px, no border.
• Hover: background #e10000.

This is old-school: zero padding means the container likely handles sizing. Radius only on right side — matches attached input.

No active/focus in data.

6.2 Links

Multiple link styles:

• White text (#ffffff) — nav.
• Blue (#0000ee) — classic visited link color, bold.
• Dark gray (#4e4e4e), medium gray (#666666), teal (#4f7c87), mid-gray (#888888), red (#e10000), light gray (#939393).

All are text-decoration: none — no underline, relying on color.

6.3 Forms

Text input: transparent background, text #888888, no border, padding 0 14px.

No focus style extracted — might rely on container highlight.

6.4 Cards

No explicit card component in data, but borders/shadows suggest cards use 1px solid #eeeeee and border-radius: 8px with soft gray shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-gray-666: #666666;
  --color-gray-585: #585858;
  --color-gray-eee: #eeeeee;
  --color-gray-888: #888888;
  --color-gray-333: #333333;
  --color-teal-4f7c87: #4f7c87;
  --color-gray-ddd: #dddddd;
  --color-red-e10000: #e10000;
  --color-black: #000000;
  --color-gray-1e1e1e: #1e1e1e;
  --color-red-ff3333: #ff3333;

  /* Typography */
  --font-system: -apple-system, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft Yahei;
  --font-yahei: "Microsoft Yahei";
  --font-songti: "宋体";
  --font-simsun: "Sim sun";
  --font-arial: Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;

  /* Radius */
  --radius-none: 0px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft-gray: 0px 0px 8px 0px rgb(205, 205, 205);
  --shadow-light: 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
  --shadow-small: 0px 0px 2px 3px rgba(4, 0, 0, 0.08);
}

8. AI Coding Assistant Prompt

# 163 Design System Specification

You are a 163.com design expert. Build UIs matching their visual language exactly.

## Brand Context
163.com is a Chinese internet portal with dense content layouts, a restrained color palette dominated by brand red, and typography optimized for Chinese scripts using system fonts. Design choices prioritize clarity, legibility, and familiarity over novelty.

## Color Palette
- White: #ffffff — page background, text on red buttons
- Gray 666: #666666 — body text
- Gray 585: #585858 — secondary text, dividers
- Gray EEE: #eeeeee — borders, separators
- Gray 888: #888888 — placeholders, logo text
- Gray 333: #333333 — strong text, headings
- Teal 4f7c87: #4f7c87 — navigation accents
- Gray DDD: #dddddd — surface backgrounds
- Red e10000: #e10000 — brand, primary CTAs, hover states
- Black: #000000 — minimal use for emphasis
- Gray 1e1e1e: #1e1e1e — hover/focus backgrounds
- Red ff3333: #ff3333 — default button background

## Typography
- Font families: 
  - Primary: -apple-system, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft Yahei
  - Secondary: "Microsoft Yahei"
  - Legacy: "宋体", "Sim sun"
  - Latin fallback: Arial
- Sizes:
  - H1: 24px / 700 / 1.42
  - H2: 18px / 600 / 1.67
  - H2 bold: 18px / 700 / 1.44
  - Body: 16px / 400 / 1.75–1.88
  - Body medium: 16px / 600 / 1.88
  - Body bold: 16px / 700 / 1.50
  - Caption: 14px / 400 / 2.43 or 1.43
  - Small: 12px / various weights / various line heights

## Spacing & Grid
Base: 8px. Scale includes: 1, 2, 4, 5, 6, 7, 8, 10, 12, 13, 14, 15, 17, 18, 20, 22, 24, 25, 30, 35px.
Use multiples of 8px when possible; legacy components may use 5px, 7px, 13px.

## Border Radius
- none: 0px — tables
- sm: 3px — list items
- md: 4px — inputs, small cards
- lg: 8px — cards, images
- xl: 10px — badges
- full: 50% — avatars

## Shadows & Depth
- Soft gray: 0px 0px 8px 0px rgb(205, 205, 205)
- Light: 0px 1px 4px rgba(0, 0, 0, 0.07)
- Small: 0px 0px 2px 3px rgba(4, 0, 0, 0.08)

## Components

### Primary Button
```css
.btn-primary {
  background: #ff3333;
  color: #ffffff;
  padding: 0px;
  border-radius: 0px 5px 5px 0px;
  border: none;
  font-weight: 400;
  font-size: 14px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #e10000; }
```

### Navigation Link
```css
.nav-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
}
```

### Text Input
```css
.input-text {
  background: transparent;
  color: #888888;
  border: none;
  padding: 0px 14px;
}
```

## Layout & Responsive Rules
- Desktop-first grid via Vuetify components
- Section gaps: 10–18px
- Borders between items: 1px solid #eeeeee

## Interaction Rules
- Transition timing: 150ms ease for hover/focus
- Hover states change background for buttons
- Links rely on color for state indication

## DO List
- Use ONLY colors from palette
- Keep spacing in multiples of 8px or legacy values
- Use system fonts with proper Chinese fallbacks
- Maintain consistent border radius per component type
- Use soft gray shadows sparingly

## DON'T List
- Don't invent new colors
- Don't mix rounded and sharp corners in same component
- Don't use underlines on links
- Don't overload red accents — reserve for CTAs

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ff3333;
  color: #ffffff;
  border-radius: 0px 5px 5px 0px;
  font-size: 14px;
}
.btn-primary:hover { background: #e10000; }
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  box-shadow: 0px 0px 8px rgb(205, 205, 205);
  padding: 18px;
}
```

Input:
```css
.input {
  background: transparent;
  color: #888888;
  border: none;
  padding: 0px 14px;
}
```

9. Summary

TL;DR — 163.com’s design system is utilitarian: grayscale foundation, brand red for attention, system fonts for speed, modest shadows, and consistent small-radius corners. It’s built for dense information layouts, not for experimental UI.

Brand Keywords: portal-functional, red-accented, chinese-legibility, legacy-consistent, utilitarian-ui