Tencent Brand Design System Deep Dive

1. Brand Overview

Tencent’s public-facing design language is exactly what you’d expect from one of China’s largest tech conglomerates: clean, corporate, and calculated. This is not a playful consumer brand. The site leans into a restrained aesthetic—functional blues, deep neutrals, and precise typography—built to communicate authority and stability to global investors, partners, and enterprise clients.

The vibe is straightforward: minimal decoration, clear hierarchy, and a heavy preference for flat elements over skeuomorphic depth. This works because Tencent’s audience here is not gamers or social media users—it’s stakeholders who need clarity, professionalism, and a sense of scale. Everything feels engineered to avoid distraction. The palette is cool and neutral, the typography clean and sans serif, the spacing generous enough for corporate breathing room.

You’ll notice there’s almost no ornamental flair. Buttons are flat. Links only get an underline on hover. Shadows are nonexistent. Even the border radius system is minimal—only a single 50% radius exists, likely for icons or avatars. This is the kind of design system that says: “We are serious, global, and dependable.”

The primary blue (#0052d9) is the only real burst of color, and it’s used intentionally—mainly for links, focus indicators, and action highlights. This keeps interaction cues clear without overwhelming the interface. The rest is a sea of grays, white, and black overlays, which makes the blue stand out even more.

If you’re building for Tencent, the philosophy is simple: keep it clean, keep it restrained, and make sure every visual choice serves clarity.

2. Color System

2.1 Primary Colors

The hero color here is Blue — #0052d9 (RGB 0, 82, 217). This is a deep, slightly desaturated blue. It’s not neon or playful; it feels corporate, stable, trustworthy. Blue is the most common “trust” color in tech, especially in Asia. Think of Huawei, Baidu, even IBM globally—similar strategy. Tencent’s version is darker than Facebook’s blue, lighter than IBM’s navy. This shade works well against white and light gray backgrounds, and it keeps white text readable.

It’s not overused. They use it for:

• Hover states on links
• Primary action indicators
• Active pagination bullets
• Borders for selected states

This restraint gives it impact—when you see it, you know it’s clickable.

2.2 Complete Palette

2.3 Color Relationships

Contrast is good across the board. The primary blue (#0052d9) on white passes WCAG AA easily. The darker gray (#2a2e2e) against white is excellent for body text, giving enough contrast without harsh pure black.

The system clearly prefers light mode. There’s no sign of a dark mode palette. The black with 50% opacity is for overlays, not a background theme. If you were to adapt this for dark mode, you’d need a full neutral scale inversion.

2.4 Usage Guide

Works well:

• Blue (#0052d9) on white for CTAs.
• Gray dark (#5f6464) for secondary text on a light background—keeps hierarchy subtle.
• Gray light (#f2f3f5) for button fills, with dark text—clear and accessible.

Avoid:

• Blue on gray light for text—it’s borderline low contrast.
• Gray dark (#5f6464) on blue—fails accessibility and feels muddy.
• Overusing blue—loses its “interaction” cue.

3. Typography

3.1 Font Families

This is a custom corporate typeface world. Tencent uses TencentSans variants (W3, W7, W3CN) across headings and body. These are not Google Fonts or Adobe Fonts—likely proprietary. Backup stacks include PingFang SC for Chinese, Microsoft Yahei for Windows, and common web sans fonts (Helvetica Neue, Arial).

No variable fonts detected. This is a static-weight system.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is achieved by size jumps (48px → 32px → 24px → 20px → 18px → 16px → 14px). The 48px heading is rare—probably homepage hero. The jump from 32px to 24px is where most section titles sit. Body text sits around 16px with a line height around 1.31–1.50, which is tight but readable for corporate copy.

The variety of TencentSans weights allows subtle emphasis without changing size—good for bilingual layouts.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. Common values:

4.2 Layout

Breakpoints are exhaustive—covering everything from very small (320px) up to ultra-wide (1921px). This suggests the site is fully responsive with fine-grained adjustments. The sheer number of breakpoints means they’re likely tuning specific components for device classes rather than relying on a handful of major breakpoints.

5. Visual Elements

• Border Radius: Only 50% appears—used for perfect circles (avatars, bullets). No rounded corners for cards or buttons—flat edges everywhere else.
• Shadows: None. This is a flat design system. Depth is conveyed via color changes (hover backgrounds, borders).
• Borders: Simple 1px solids. Common combos:
  • 1px solid #0052d9 — active states
  • 1px solid #ffffff — light dividers
  • 1px solid #2b2e2e — dark dividers

6. Components

6.1 Buttons

Three observed variants:

Pagination Bullet (Default)

• Default: bg white (#ffffff), text #2a2e2e
• Hover: text #0052d9, bg white
• Flat, no border, no radius.

Pagination Bullet Active

• Default: bg #0052d9, text #2a2e2e
• Hover: text #0052d9, bg white

Accept Button

• Default: bg #f2f3f5, text #2a2e2e
• Hover: bg #2a2e2e, text white (#ffffff)

6.2 Links

Three styles:

1. Dark text (#2a2e2e) → hover: underline + blue (#0052d9)
2. White text (#ffffff) → hover: underline + blue
3. Gray text (#5f6464) → hover: underline + blue

6.3 Forms

No text inputs detected—likely custom or handled by embedded components.

6.4 Cards

No explicit card components surfaced—likely built from divs with padding and no shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-dark: #5f6464;
  --color-black-50: #00000080;
  --color-blue-primary: #0052d9;
  --color-gray-almost-black: #2a2e2e;
  --color-gray-light: #f2f3f5;
  --color-swiper-theme: #007aff;
  --color-background: #ffffff;
  --color-hover-background: #eeeeee;
  --color-border: #cccccc;
  --color-text: #555555;

  /* Typography */
  --font-tencent-w3: "TencentSansw3";
  --font-tencent-w7: "TencentSansw7";
  --font-tencent-cn-w3: "TencentSansW3CN";
  --font-pingfang: "PingFangSC-Regular", "helvetica neue", tahoma, "PingFang SC", "microsoft yahei", arial, "hiragino sans gb";

  /* Spacing */
  --space-1: 1px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-30: 30px;
  --space-33: 33px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-72: 72px;
  --space-120: 120px;
  --space-1536: 153.6px;

  /* Border Radius */
  --radius-circle: 50%;

  /* Borders */
  --border-1px-blue: 1px solid #0052d9;
  --border-1px-white: 1px solid #ffffff;
  --border-1px-dark: 1px solid #2b2e2e;
}

8. AI Coding Assistant Prompt

# Tencent Design System Specification

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

## Brand Context
Tencent’s corporate site is minimal, flat, and precise. It uses a restrained neutral palette with a single strong blue for interactions. Typography is clean and sans serif, with tight line heights for efficiency. Spacing follows an 8px grid.

## Color Palette
- Gray Dark: #5f6464 — Secondary text
- Black 50%: #00000080 — Overlays
- Blue Primary: #0052d9 — Links, CTAs, active states
- Gray Almost Black: #2a2e2e — Primary text
- Gray Light: #f2f3f5 — Button backgrounds, surfaces
- Swiper Theme Blue: #007aff — Active pagination bullets
- Background White: #ffffff — Page background
- Hover Background Gray: #eeeeee — Hover surfaces
- Border Gray: #cccccc — Dividers, input borders
- Text Default Gray: #555555 — Body copy

## Typography
Fonts:
- Headings: "TencentSansw3", "TencentSansw7", "TencentSansW3CN"
- Body: "PingFangSC-Regular", fallback stack

Sizes:
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 Hero | TencentSansw3 | 48px | 400 | 1.40 | Main title |
| H1 Hero Alt | TencentSansw7 | 48px | 400 | 1.40 | Main title |
| H1 CN | TencentSansW3CN | 32px | 700 | 1.20 | Section titles |
... [include all from scale above]

## Spacing & Grid
Base: 8px
Scale: 1px, 10px, 12px, 16px, 18px, 24px, 30px, 33px, 40px, 48px, 60px, 72px, 120px, 153.6px
Use multiples for padding, margins, and gaps.

## Border Radius
- Circle: 50% — avatars, bullets
- None: 0 — buttons, cards

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

## Component Specifications

### Primary Button (Active Pagination)
Default: bg #0052d9, color #2a2e2e, no radius, no border
Hover: bg #ffffff, color #0052d9

### Secondary Button (Accept)
Default: bg #f2f3f5, color #2a2e2e
Hover: bg #2a2e2e, color #ffffff

### Links
Dark text: default #2a2e2e, hover underline + #0052d9
White text: default #ffffff, hover underline + #0052d9
Gray text: default #5f6464, hover underline + #0052d9

## Layout & Responsive Rules
Breakpoints: from 320px up to 1921px with fine-grained adjustments.
Page padding: multiples of 8px.

## Interaction Rules
Transitions: 150ms ease for hover/focus changes.
Hover cues: underline for links, bg change for buttons.

## DO
- Use ONLY colors from palette
- Maintain 8px spacing grid
- Reserve blue for interactive states
- Keep corners sharp except circles
- Keep typography consistent with extracted sizes

## DON'T
- Add shadows
- Round button corners
- Use blue for non-interactive text
- Break spacing grid

## Code Examples

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

### Accept Button
```css
.btn-accept {
  background: #f2f3f5;
  color: #2a2e2e;
  padding: 0;
  border: none;
  font-size: 14px;
}
.btn-accept:hover {
  background: #2a2e2e;
  color: #ffffff;
}
```

### Link
```css
.link-dark {
  color: #2a2e2e;
  text-decoration: none;
}
.link-dark:hover {
  color: #0052d9;
  text-decoration: underline;
}
```

9. Summary

TL;DR — Tencent’s design system is flat, corporate, and precise. One strong blue drives interaction cues. Typography is tight and sans serif. Spacing follows an 8px grid. No shadows, no rounded corners—clarity first.

Brand Keywords: corporate-minimal, trust-blue, flat-neutral, sharp-edged, precision-grid