Sohu Brand Design System Deep Dive

1. Brand Overview

Sohu is one of the old guard in Chinese internet brands — a news and portal site that’s been around since the early days of the web. When you land on sohu.com, you can feel that history. The visual language is a blend of functional news portal pragmatism and brand-specific splashes of color. It’s not chasing the bleeding edge of minimalism; it’s sticking to what works for high-volume information delivery.

The vibe is utilitarian with a hint of personality. Most of the interface is neutral — greys from #999999 down to #191919, white backgrounds, black text — and then the Sohu yellow (#fdd000) and red (#ff0000 / #c9141d) hit you in key actions. This is common in news portals: keep the content readable, reserve the brand colors for navigation and CTAs. They also bring in link blues (#539FF3) for secondary interactive elements, which gives a clear hierarchy between “brand action” and “utility link”.

There’s no heavy visual ornamentation. Shadows are minimal — mostly a subtle inset for separators, sometimes a very soft drop shadow for elevated elements. Borders do a lot of the separation work. Rounded corners exist but are not everywhere; they range from small (2–4px) to large avatar-style 50%. This mix feels legacy — some parts of the UI still have hard corners, some newer parts have rounded elements. If you’re designing for Sohu, you need to respect that mix.

Typography is all PingFang SC and Microsoft YaHei — solid sans-serif Chinese typefaces that render well on screens. They don’t use Google or Adobe fonts, everything is system/local. The type scale is utilitarian: 26px for big links/headings, then 18px, 16px, down to 12px and 14px for UI and captions. Weight variation (400, 500, 700) is used for emphasis.

Overall: Sohu’s design system is about delivering dense information clearly, with brand colors used for emphasis, not decoration. It’s a functional news brand with a dated-but-solid UI structure. If you’re building for it, you focus on hierarchy, restraint, and making sure interactions pop in the yellow/red/blue zones.

2. Color System

2.1 Primary Colors

The main brand punch comes from yellow and red:

• Yellow: #fdd000 — This is the signature Sohu yellow, used in borders (2px solid), hover states, and some buttons. It’s bright, optimistic, and high visibility without being aggressive.
• Red: #ff0000 and #c9141d — Red is used for alerts, brand accents, and hover states for links. It’s common in Chinese web design because red carries cultural weight (luck, importance).
• Blue: #539FF3 — Used in hover states for some buttons and links. This is a utility accent, not a brand color.

Psychologically, yellow + red is strong — it demands attention. Sohu uses it sparingly, which keeps the UI from feeling like a carnival. Competitors like Sina lean harder on red; Sohu’s yellow gives it a distinct identity.

2.2 Complete Palette

2.3 Color Relationships

Contrast is mostly fine — white on red/yellow passes WCAG AAA for large text, AA for normal text. Grey #999999 on white is borderline for small text — might fail WCAG AA on body size. Blue #539FF3 on white is fine for links. Dark greys (#333333, #191919) give solid contrast.

They don’t have a dark mode. The palette is geared for light backgrounds.

2.4 Usage Guide

• Good combos: White text on red/yellow backgrounds; blue links on white; dark grey text on white.
• Avoid: Grey #999999 on yellow — too low contrast. Red on yellow — harsh, high visual noise.
• Use brand yellow for borders and hover backgrounds, not as full-page background.
• Reserve bright red for alerts and CTAs, not body text.

3. Typography

3.1 Font Families

All fonts are system/local:

• Primary: PingFang SC — with fallbacks: Arial, 微软雅黑, 宋体, simsun
• Variants: PingFangSC-Medium, PingFangSC-Regular, PingFangSC-Semibold
• Secondary: 微软雅黑 — Microsoft YaHei
• No Google or Adobe fonts. No variable fonts.

3.2 Type Scale

3.3 Hierarchy

26px is the big headline/link size — used sparingly. 18px and 16px handle most headings. Body/caption sizes are 14px and 12px. Weight bumps (500, 700) are used for emphasis. The scale is tight — no giant jumps, which keeps dense layouts from feeling chaotic.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px, but includes smaller increments (1–7px) and larger (up to 30px).

4.2 Layout

No breakpoints in extracted data — probably fixed desktop-first layout. Vuetify presence suggests responsive capabilities, but the data is desktop snapshot.

5. Visual Elements

Border Radius

Mixed — some hard corners, some small radius, some full circles.

Shadows

Two types:

• Inset: rgb(235, 235, 235) 0px -1px 0px 0px inset — separators
• Soft drop: rgba(0,0,0,0.04) 0px 4px 12px 2px, rgba(0,0,0,0.05) 0px 8px 16px -4px — elevated components

Most of the design is flat — shadows are rare.

Borders

Heavy use for separation. Key combos:

• 2px solid #fdd000 — brand border
• 1px solid #D0E4F9 — button border
• 1px solid #DDDDDD — container borders
• 1px solid #ECECEC — input borders

6. Components

6.1 Buttons

Search Button (search-btn):

• Default: bg #fdd000, text #666666, radius 0px 1px 1px 0px, no border.
• Hover: text #529FF2, bg #FFDE44.

Primary Red Button (btn):

• Default: bg #E93A3A, text white, radius 0px.
• Hover: text #C9141D, bg #FFDE44, border 1px solid #539FF3.

Refresh Button (refresh-btn):

• Default: bg #F2F2F2, text #666666, radius 0px.

6.2 Links

Multiple link colors — all no underline, hover changes to #E63939.

Examples:

• White → hover red
• Dark grey → hover red
• Blue (#539FF3) → hover red

6.3 Forms

Text input variants:

1. bg #F9F9F9, text #BABABA, radius 1px 0px 0px 1px, padding 0px 0px 0px 10px.
2. bg white, text #999999, radius 0px, padding 7px 10px.

No focus state data — probably default browser.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-grey-medium: #999999;
  --color-grey-dark: #191919;
  --color-white: #ffffff;
  --color-grey-deep: #333333;
  --color-grey-light: #afaeae;
  --color-black: #000000;
  --color-grey-divider: #dfdfdf;
  --color-grey-very-light: #ebebeb;
  --color-grey-mid-light: #cccccc;
  --color-red-bright: #ff0000;
  --color-red-deep: #c9141d;
  --color-grey-hover: #404040;
  --color-yellow-brand: #fdd000;
  --color-blue-accent: #539FF3;
  --color-border-grey: #666666;
  --color-border-blue-light: #d0e4f9;
  --color-border-grey-light: #dddddd;
  --color-border-grey-lighter: #ececec;
  --color-border-grey-ultra-light: #eeeeee;
  --color-border-white-transparent: rgba(255,255,255,0.4);
  --color-border-black-transparent: rgba(0,0,0,0.02);
  --color-border-grey-mid-light: #e5e5e5;

  /* Typography */
  --font-primary: 'PingFang SC', Arial, '微软雅黑', '宋体', simsun;
  --font-secondary: '微软雅黑';

  /* Spacing */
  --space-1: 1px;
  --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-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-25: 25px;
  --space-28: 28px;
  --space-29: 29px;
  --space-30: 30px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 11px;
  --radius-xxl: 20px;
  --radius-full: 50%;
}

8. AI Coding Assistant Prompt

# Sohu Design System Specification

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

## Brand Context
Sohu is a Chinese news and portal brand that prioritizes dense information delivery and clear hierarchy. The design uses a neutral base with strong brand accents in yellow and red, and functional blues for links. Borders and subtle shadows separate content.

## Color Palette
- Grey Medium: #999999 — Neutral text (links, low-emphasis body)
- Grey Dark: #191919 — Neutral background/text
- White: #ffffff — Backgrounds, text
- Grey Deep: #333333 — Body text, headings
- Grey Light: #afaeae — Captions
- Black: #000000 — Headlines
- Grey Divider: #dfdfdf — Section separators
- Grey Very Light: #ebebeb — Light backgrounds
- Grey Mid-Light: #cccccc — Borders
- Red Bright: #ff0000 — Alerts, accents
- Red Deep: #c9141d — Hover/focus on CTAs
- Grey Hover: #404040 — Hover text
- Yellow Brand: #fdd000 — Primary brand borders, hover backgrounds
- Blue Accent: #539FF3 — Link/button hover
- Border Grey: #666666 — Borders
- Border Blue Light: #d0e4f9 — Button borders
- Border Grey Light: #dddddd — Container borders
- Border Grey Lighter: #ececec — Input borders
- Border Grey Ultra Light: #eeeeee — Input borders
- Border White Transparent: rgba(255,255,255,0.4) — Overlay borders
- Border Black Transparent: rgba(0,0,0,0.02) — Overlay borders
- Border Grey Mid-Light: #e5e5e5 — Nav separators

## Typography
Font families:
- Primary UI: 'PingFang SC', Arial, '微软雅黑', '宋体', simsun
- Secondary: '微软雅黑'

Type scale:
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| Link LG | 26px | 400 | 1.54 | Major nav links |
| H1 | 26px | 400 | 2.08 | Page titles |
| H2 | 18px | 400 | 1.67 | Section headings |
| H2 Bold | 18px | 700 | — | Emphasis headings |
| Body MD | 16px | 400 | 1.38 | Main text |
| Link MD Bold | 16px | 700 | 2.00 | Emphasized links |
| Caption SM | 14px | 400 | 2.14 | Small text |
| Caption Bold | 14px | 700 | 1.43 | Emphasis captions |
| UI XS | 12px | 400 | 1.33–2.50 | Labels, meta |

## Spacing & Grid
Base: 8px grid with micro units (1–7px) and larger (up to 30px).
Common: 6px (buttons/icons), 10px (inputs), 22px (section gaps).

## Border Radius
- none: 0px — hard corners
- tiny: 1–2px — inputs/buttons
- sm: 3–4px — list items
- md: 11px — div containers
- lg: 20px — images
- full: 50% — avatars

## Shadows & Depth
Mostly flat. Occasional inset shadow (#ebebeb) for separators. Rare soft drop shadow for elevated cards.

## Component Specifications

### Primary Button (.btn)
Default: bg #E93A3A, color #ffffff, radius 0px, border none.
Hover: color #C9141D, bg #FFDE44, border 1px solid #539FF3.

### Search Button (.search-btn)
Default: bg #fdd000, color #666666, radius 0px 1px 1px 0px.
Hover: color #529FF2, bg #FFDE44.

### Refresh Button (.refresh-btn)
Default: bg #F2F2F2, color #666666, radius 0px.

### Links
Default: no underline, color varies (#ffffff, #333333, #539FF3).
Hover: color #E63939, no underline.

### Inputs
Variant 1: bg #F9F9F9, color #BABABA, radius 1px 0px 0px 1px, padding 0px 0px 0px 10px.
Variant 2: bg #ffffff, color #999999, radius 0px, padding 7px 10px.

## Layout & Responsive Rules
No explicit breakpoints in data — design for desktop-first, Vuetify grid for responsive.

## Interaction Rules
- Hover color change on buttons/links
- Borders for focus states (brand colors)
- Transition ~150ms ease

## DO List
- Use brand yellow (#fdd000) for borders and hover backgrounds
- Keep spacing multiples of 8px or defined tokens
- Maintain no underline for links
- Use PingFang SC for Chinese text
- Reserve red (#ff0000/#c9141d) for alerts/CTAs

## DON'T List
- Don’t use shadows unless specified
- Don’t mix arbitrary border radii
- Don’t invent colors outside palette
- Don’t underline links

## Code Examples

### Primary Button
```css
.btn {
  background: #E93A3A;
  color: #ffffff;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn:hover {
  background: #FFDE44;
  color: #C9141D;
  border: 1px solid #539FF3;
}
```

### Search Button
```css
.search-btn {
  background: #fdd000;
  color: #666666;
  border-radius: 0px 1px 1px 0px;
  font-size: 12px;
}
.search-btn:hover {
  background: #FFDE44;
  color: #529FF2;
}
```

### Input
```css
.input {
  background: #F9F9F9;
  color: #BABABA;
  border-radius: 1px 0 0 1px;
  padding: 0 0 0 10px;
}
```

9. Summary

TL;DR: Sohu’s design is a functional news portal: neutral greys and whites, strong brand yellow/red accents, system Chinese fonts, tight spacing scale. Borders do most of the separation work, shadows are minimal. Buttons pop with brand colors, links hover to red.

Brand Keywords: utilitarian-news, yellow-red-accent, border-driven, dense-layout, Chinese-system-font