A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
8type steps
3radius steps
4pxspacing base
Wechat, in one page
WeChat's iOS app is not really a messaging app — it's an operating system wearing a chat app's clothes, and the design reflects that. The visual language is deliberately spare and utilitarian: a light gray system (#EDEDED chat backdrop, #FFFFFF cards), near-black text (#181818), and a single brand color, WeChat Green (#07C160), used with monastic discipline. There is almost no decoration. The reason is structural: WeChat must hold messaging, payments, Moments (social feed), Mini Programs (third-party apps), Channels (video), Scan, and an entire commerce stack inside one shell. A loud aesthetic would collapse under that weight. So the chrome recedes to gray neutrality and lets the *list* — the most scalable UI primitive ever made — carry everything.
The chat thread looks plain on purpose. Incoming bubbles are flat white (#FFFFFF); outgoing bubbles are a pale, slightly acidic green (#95EC69 — not the brand green, a lighter chat-tint) with black text. Bubbles have a small triangular tail and a modest 6pt radius — squarer and tighter than Western messengers, a distinctly WeChat silhouette. The energy of the app is not in the thread; it is in the Discover tab, the super-app hub. Discover is a grouped list of system rows — Moments, Channels, Scan, Mini Programs, Search, Nearby, Top Stories — each a 56pt row with a colored 28pt square icon, a title, and a chevron. This list is the gateway to WeChat's entire ecosystem, and its grouped-list pattern (white rows, gray gutters, hairline dividers) is the single most identifying structural component of the app.
Typography is PingFang SC / Noto Sans (deep CJK first, system fallback) at weights 400 / 600. Sizes are conservative: contact names 17pt, message bodies 17pt, list rows 17pt — WeChat uses one dominant body size across nearly everything for a calm, scannable rhythm. The red-dot badge (#FA5151) is the universal "attention" primitive, appearing on tabs, rows, and avatars. The four bottom tabs — Chats, Contacts, Discover, Me — are spare and unchanging. The overall feeling is "the quiet infrastructure of daily life in China": gray, list-driven, green-accented, ruthlessly utilitarian, and engineered to scale to a billion users without visual fatigue.
Key Characteristics:
- Super-app Discover hub — a grouped list (Moments / Channels / Scan / Mini Programs / Search / Nearby) gateway to the whole ecosystem
- Light-gray system: chat backdrop
#EDEDED, cards#FFFFFF, near-black text#181818 - WeChat Green (
#07C160) as the sole accent — used with extreme restraint - Outgoing bubble pale chat-green
#95EC69; incoming bubble white#FFFFFF; black text - Tight, squarer bubbles — small triangular tail, 6pt radius (distinct WeChat silhouette)
- Grouped-list pattern everywhere — white 56pt rows, gray gutters, hairline dividers, colored square icons
- Moments feed — a card-light social timeline reached from Discover
- Red-packet (hóngbāo) card — the iconic gold/red money envelope
- Universal red-dot badge (
#FA5151) — the attention primitive on tabs, rows, avatars - One dominant body size (17pt) for a calm, scannable rhythm; PingFang SC / Noto Sans 400/600
- Four spare tabs: Chats / Contacts / Discover / Me
Do's and don'ts
Do
- Treat Discover as a grouped list of feature rows (Moments / Channels / Scan / Mini Programs / Search / Nearby) — the super-app hub is the identity
- Use the gray system: chat backdrop
#EDEDED, white cards/rows, near-black#181818text - Make outgoing bubbles pale chat-green
#95EC69, incoming white, text black — NOT the brand green for bubbles - Reserve WeChat Green
#07C160for "go": send, pay, primary buttons, active tab, toggles - Use rounded-square avatars (~8pt radius) everywhere — not circles
- Keep bubbles tight and squarer (6pt radius + a triangular tail)
- Use the red dot (
#FA5151) as the universal attention primitive on tabs/rows/avatars - Hold to ONE dominant body size (17pt), two weights (400/600), CJK-friendly line-height
Don't
- Don't make Discover a colorful dashboard — it's a calm grouped list; color lives only in the 28pt icons
- Don't use circular avatars — WeChat's rounded square is a constant brand tell
- Don't use the saturated brand green for the outgoing bubble — that's the pale
#95EC69 - Don't round bubbles like Western messengers — keep the 6pt squarer silhouette with a tail
- Don't add a second accent or decorative gradients — gray + green + the red dot is the entire system
- Don't put per-bubble timestamps — WeChat uses centered time separators between runs
- Don't animate aggressively — WeChat's motion is near-absent (the red-packet open is the one flourish)
- Don't introduce extra type sizes/weights — 17pt body + 400/600 keeps a billion-user app calm
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Wechat design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- WeChat Green: #07c160
- WeChat Green Pressed: #06a050
- Outgoing Bubble Green: #95ec69
- Chat Backdrop: #ededed
- Canvas White: #ffffff
- Surface Gray: #f7f7f7
- Divider: #d9d9d9
- Text Primary: #181818
- Text Secondary: #888888
- Text Tertiary: #b2b2b2
Type:
- families: PingFang SC, Noto Sans, Fallback Stack, Weights
- scale: 10, 11, 12, 13, 14, 15, 16, 17
- weights: 400, 600
Shape:
- radius: 4, 6, 8
Spacing: 4, 9, 12
Rules:
- Treat Discover as a grouped list of feature rows (Moments / Channels / Scan / Mini Programs / Search / Nearby) — the super-app hub is the identity
- Use the gray system: chat backdrop `#EDEDED`, white cards/rows, near-black `#181818` text
- Make outgoing bubbles pale chat-green `#95EC69`, incoming white, text black — NOT the brand green for bubbles
- Reserve WeChat Green `#07C160` for "go": send, pay, primary buttons, active tab, toggles
- Use rounded-square avatars (~8pt radius) everywhere — not circles
- Keep bubbles tight and squarer (6pt radius + a triangular tail)
Avoid:
- Don't make Discover a colorful dashboard — it's a calm grouped list; color lives only in the 28pt icons
- Don't use circular avatars — WeChat's rounded square is a constant brand tell
- Don't use the saturated brand green for the outgoing bubble — that's the pale `#95EC69`
- Don't round bubbles like Western messengers — keep the 6pt squarer silhouette with a tail
- Don't add a second accent or decorative gradients — gray + green + the red dot is the entire system
- Don't put per-bubble timestamps — WeChat uses centered time separators between runs
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary
- WeChat Green (
#07C160): Send-ready accent, primary buttons, active tab, confirmation, toggles, "Pay" action. - WeChat Green Pressed (
#06A050): Pressed/active state for green buttons and toggles. - Outgoing Bubble Green (
#95EC69): The pale chat-tint of your own message bubbles (NOT the brand green).
Canvas & Surface (Light)
- Chat Backdrop (
#EDEDED): The chat-room background and grouped-list base. - Canvas White (
#FFFFFF): Cards, list rows, incoming bubbles, navigation bars, Discover rows. - Surface Gray (
#F7F7F7): Search field, secondary fills, pressed-row tint base. - Divider (
#D9D9D9): Hairline dividers between list rows and grouped sections. - Text Primary (
#181818): Contact names, message text, list-row titles, primary labels. - Text Secondary (
#888888): Previews, timestamps, captions, secondary labels. - Text Tertiary (
#B2B2B2): Placeholders, disabled labels.
Canvas & Surface (Dark — Limited Use)
WeChat's iOS app is primarily a light surface; a dark variant exists for system-dark users.
- Dark Canvas (
#1A1A1A) (rows/cards) - Dark Backdrop (
#111111) (chat/grouped base) - Dark Incoming Bubble (
#2C2C2C) - Dark Outgoing Bubble (
#3EB575) (muted green in dark) - Dark Text Primary (
#E8E8E8) - Dark Text Secondary (
#9A9A9A)
Message-Specific
- Incoming Bubble (
#FFFFFF): Left-aligned received bubble. - Outgoing Bubble (
#95EC69): Right-aligned sent bubble (pale chat-green). - Bubble Text (
#181818): Text in both incoming and outgoing bubbles. - Bubble Meta (
#888888): System time separators (centered, not per-bubble in WeChat).
Discover / Icon Accents (per-row square icons)
- Moments (
#3F7DD5blue), Scan (#2EA0F8light blue), Channels (#FA9D3Borange), Mini Programs (#3CC51Fgreen), Search (#5C7CFAindigo), Nearby (#F76F34orange), Top Stories (#EB6F6Fred). Each is a 28pt rounded-square glyph chip — color is data-driven, only here.
Semantic
- Red Dot / Badge (
#FA5151): Universal unread/attention badge on tabs, rows, avatars. - Red Packet (
#FA5151envelope /#FBE3B3gold accent): The hóngbāo money card. - Link Blue (
#576B95): Inline links / "official account" article links inside bubbles. - Error Red (
#FA5151): Failed-to-send, destructive actions.
Type scaleRead the full spec
Font Family
- Primary:
PingFang SC(Apple's CJK system face on iOS) /Noto Sansfor Latin - Fallback Stack:
-apple-system, 'PingFang SC', 'Noto Sans', BlinkMacSystemFont, 'SF Pro Text', 'Hiragino Sans', sans-serif - Weights: 400 (regular), 600 (semibold) — WeChat's hierarchy is regular vs semibold only
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Nav Title | PingFang SC | 17pt | 600 | 1.3 | 0pt | Centered title in the top bar |
| Contact Name | PingFang SC | 17pt | 400 | 1.3 | 0pt | Row title in chat / contacts list |
| List Row Title | PingFang SC | 17pt | 400 | 1.3 | 0pt | Discover / Me / settings row title |
| Message Body | PingFang SC | 17pt | 400 | 1.4 | 0pt | The bubble text — the dominant size |
| Section Header | PingFang SC | 14pt | 400 | 1.2 | 0pt | Grouped section caption ("A"–"Z" / labels) |
| Message Preview | PingFang SC | 14pt | 400 | 1.3 | 0pt | Last-message snippet in chat list |
| Timestamp | PingFang SC | 13pt | 400 | 1.2 | 0pt | Time on a chat row |
| Time Separator | PingFang SC | 12pt | 400 | 1.2 | 0pt | Centered date/time chip in a thread |
| Button (Primary) | PingFang SC | 17pt | 600 | 1.0 | 0pt | Green primary button label |
| Button (Secondary) | PingFang SC | 16pt | 400 | 1.0 | 0pt | Outline / cancel button label |
| Tab Label | PingFang SC | 10pt | 400 | 1.0 | 0pt | Bottom tab bar labels |
| Badge Count | PingFang SC | 11pt | 600 | 1.0 | 0pt | Number in the red badge |
| Moments Name | PingFang SC | 15pt | 600 | 1.3 | 0pt | Author name in the Moments feed (link blue) |
| Caption / Meta | PingFang SC | 13pt | 400 | 1.3 | 0pt | Moments timestamp, footnotes |
Principles
- One dominant size (17pt): contact names, list rows, and message bodies all sit at 17pt for a calm, uniform scan rhythm
- Two weights only: PingFang SC 400/600 — semibold means "title/primary", nothing else
- CJK-first metrics: line-height kept generous (1.4 on body) so dense CJK never feels cramped
- Color is rationed: text is
#181818/#888888; the only colored text is Moments author names (link blue) and links - The red dot is the loudest element — a tiny
#FA5151badge outranks any typographic emphasis for "attention" - Dynamic Type respected on names/rows/bodies; tab labels, badge counts, time separators are layout-fixed
Components and layoutRead the full spec
Buttons
Primary Button ("Send", "Pay", "Confirm")
- Background:
#07C160 - Text:
#FFFFFF, PingFang SC 17pt weight 600 - Padding: 12pt vertical, full-width (16pt horizontal inset) or compact for inline
- Corner radius: 6pt (rectangular, tight — WeChat's button silhouette)
- Pressed:
#06A050, scale 0.99
Outline / Secondary Button ("Cancel")
- Background:
#FFFFFF - Text:
#181818, PingFang SC 16pt weight 400 - Border: 1pt solid
#D9D9D9 - Corner radius: 6pt
- Pressed: background
#F7F7F7
Send Button
- When composer empty: a "+" (more) and a voice/sticker glyph cluster, no send
- When text exists: a green
#07C160rectangular button, label "Send" (PingFang SC 16pt w600 white), corner radius 4pt, compact - Pressed:
#06A050
Text Button ("Edit", inline actions)
- PingFang SC 16pt weight 400, color
#576B95(WeChat's link blue) or#07C160for confirming actions - No background; 44pt hit area; pressed opacity 0.5
Icon Action (Voice, Sticker, Plus)
- Glyph 26pt, hit area 44pt, color
#181818(WeChat tints composer glyphs near-black, not gray) - The "+" opens the attachment grid (album, camera, video call, location, red packet, transfer…)
Cards & Containers
Chat / Contacts List Row
- Height: 64pt (chat list) / 56pt (contacts)
- Layout: rounded-square avatar 44–48pt (leading) → name (17pt w400) + last-message preview (14pt w400
#888888, 1-line) → trailing: timestamp (13pt) + red-dot/count badge - Avatar shape: WeChat avatars are rounded squares (≈8pt radius), not circles — a key brand tell
- Background:
#FFFFFF; pressed#ECECEC - Divider: hairline
#D9D9D9inset to text origin (not under avatar)
Message Bubble — Incoming
- Background:
#FFFFFF - Text:
#181818, PingFang SC 17pt w400 - Padding: 9pt vertical, 12pt horizontal
- Corner radius: 6pt with a small solid triangular tail pointing toward the leading avatar
- Sender avatar (40pt rounded square) shown leading on each message
- Max width: 72% of chat width; left-aligned with 8pt inset after avatar
Message Bubble — Outgoing
- Background:
#95EC69(pale chat-green) - Text:
#181818, PingFang SC 17pt w400 - Corner radius: 6pt with a triangular tail pointing toward the trailing avatar
- Your avatar (40pt rounded square) shown trailing
- Max width: 72%; right-aligned with 8pt trailing inset
- Time is NOT per-bubble — WeChat shows a centered time chip between time-grouped runs
Discover Grouped Row (Signature — the super-app hub)
- Height: 56pt, background
#FFFFFF - Leading: a 28pt rounded-square colored icon chip (per-feature color, see §2)
- Title: PingFang SC 17pt w400
#181818 - Trailing: optional red-dot/badge, then a
#B2B2B2chevron - Grouped: rows sit on
#FFFFFF, separated into clusters by#EDEDEDgutters with hairline#D9D9D9dividers between rows within a cluster - Order: [Moments] · [Channels, Scan, Top Stories] · [Search, Nearby] · [Mini Programs]
- This grouped list IS WeChat's most identifying structural component
Moments Card
- A near-card-less timeline on
#FFFFFF: 40pt rounded-square avatar, author name (15pt w600#576B95), post text (17pt#181818), a 1–9 image grid (square thumbs, 3pt gaps), timestamp (13pt#888888), and a light gray comment/like bar - Divider hairline between posts
Red Packet (Hóngbāo) Card (Signature)
- A rich red (
#FA5151→ deeper red gradient acceptable) card, ~260pt wide, corner radius 8pt - A circular gold (
#FBE3B3) "open" coin/seal centered, white blessing text ("Best wishes!"), sender line - Appears inline in a thread as its own special bubble-card; tapping animates the seal opening
System Time Separator
- Centered, full-width, PingFang SC 12pt
#888888on the#EDEDEDbackdrop (no plate), e.g. "2:14 PM" / "Yesterday"
Navigation
Bottom Tab Bar
- Height: 50pt + safe area
- Background:
#F7F7F7(very light, near-white), top hairline#D9D9D9 - Tabs: Chats, Contacts, Discover, Me
- Icon 26pt; active
#07C160, inactive#999999 - Labels: PingFang SC 10pt w400, always shown
- Chats tab: aggregated unread red badge
#FA5151; Discover: a red dot when there's new Moments/activity
Top Bar
- Height: 44pt + safe area, background
#EDEDED(matches backdrop) or#FFFFFFon white screens - Centered title (17pt w600
#181818) - Leading: back chevron 22pt
#181818(with chat name) - Trailing: a single "+" or "⋯" glyph 22pt
#181818(WeChat keeps the top bar minimal — one trailing action)
Thread Header
- Height: 44pt + safe area,
#EDEDEDbackground, bottom hairline - Leading: back chevron + chat name (17pt w600)
- Trailing: a "⋯" (more) glyph 22pt
#181818— opens chat info (members, mute, etc.)
Input Fields
Composer
- Sits on the
#EDEDEDbackdrop - Leading: a voice glyph 26pt
#181818(tap to switch to hold-to-talk) - Field:
#FFFFFF, min height 36pt, corner radius 6pt (squarer than Western messengers) - Trailing on the backdrop: a sticker (smiley) glyph and a "+" glyph, 26pt
#181818 - When text exists: a compact green "Send" button replaces the "+"
- Field text: PingFang SC 17pt w400
Search Field
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | 60pt chat rows, bubble max 76%, Discover row 52pt |
| iPhone 13/14/15 | 390pt | Standard — 64pt chat rows, Discover 56pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the header |
| iPhone 15/16 Pro Max | 430pt | Larger avatars (50pt), wider thread |
| iPad | 768pt+ | Master-detail split: list (left, 360pt) + chat/Discover (right) |
Dynamic Type
- Contact names, list rows, message bodies: full scale (they share the 17pt base)
- Message body caps at ~22pt; bubble grows with content
- Tab labels, badge counts, time separators: layout-fixed (do not scale)
- Discover icon chips: fixed 28pt (grid-sensitive)
Orientation
- Lists / chat / Discover / Me: portrait-locked on iPhone (WeChat is portrait-first)
- iPad: split view in both orientations
- Image/video viewer & Channels video: rotate freely
Touch Targets
- Compact "Send" button: ≥44pt effective hit
- Discover rows: full 56pt row tappable
- Chat rows: full 64pt row tappable
- Composer glyphs (voice/sticker/+): 44pt hit
- Tab items: 26pt icon, 49pt hit
Safe Area Handling
- Top: header respects safe area / Dynamic Island
- Bottom: composer + tab bar respect home indicator; attachment grid rises above it
- Sides: 8pt chat insets, 12pt grouped-list gutters
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-wechat {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #181818;
--heading-color: #181818;
--link-color: #b35f05;
--link-hover-color: #814504;
--border-color: #d5d5d5;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(24,24,24,0.06);
--card-hover-shadow: 0 6px 18px rgba(24,24,24,0.12);
--header-bg: #181818;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #696969;
--button-bg: #fa9d3b;
--button-text-color: #000000;
--button-hover-bg: #f98409;
--button-border: none;
--button-border-radius: 6px;
--button-secondary-bg: #f1f1f1;
--button-secondary-text-color: #181818;
--button-secondary-hover-bg: #e3e3e3;
--button-secondary-border: 1px solid #d5d5d5;
--prompt-bg: #f3f3f3;
--prompt-text-color: #181818;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 6px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
ios/design-md/messaging/wechat/DESIGN.md· 23.4 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.