Design System Inspiration of Zhihu (知乎)

1. Visual Theme & Atmosphere

Zhihu is China's question-and-answer platform — founded 2011, opened to the public in 2013, and for a decade the place where long, sourced, argued answers get written. Its interface is built for reading prose, not for scanning cards, and that shows in every measurement.

Body runs at 15px on a cool #f4f6f9 wash with white article surfaces, in the platform system face. Text is #191b1f — a near-black with a faint blue cast rather than a warm one. The chrome is restrained to the point of near-invisibility, with #1772f6 as the one interactive blue.

What the token set reveals that the page does not: Zhihu publishes its semantic roles in explicit _light and _dark pairs (MapText02A_light / MapText02A_dark), and it carries separate brand colours for VIP and SVIP membership tiers — a gold #ce994f and a deep navy #142457. Paid membership is a first-class visual concept here, with its own identity, not a badge bolted onto the standard palette.

Primary tasks

• Read a long answer without interface competing for attention.
• Distinguish answer, column and commercial surfaces that share one chrome.
• Recognise membership tiers, which carry their own colour identity.

2. Color Palette & Roles

Measured 2026-09-22 via getComputedStyle on zhihu.com (389 custom properties) and zhuanlan.zhihu.com. Zhihu's token name follows each role.

Naming scheme

Two layers with an unusual convention:

• Map* semantic roles, most published three times — bare, _light and _dark. MapText02A is #191b1f, MapText02A_light is #191b1f, and MapText02A_dark is #fff. The theme pair is in the token name rather than behind a media query.
• Abbreviated primitive ramps — BL04 #80c1ff (blue), YL10 #ce994f (yellow), RD11 #b63b05 (red), BK04 #646464 and BK08 #d3d3d3 (black), EB05 #3a2b0d, GYL02A #a5542f. Two letters and a step number, no semantic meaning in the name.

Brand

• Zhihu Blue (#1772f6) — the primary action; rendered on the sign-in button on both measured surfaces.
• Brand Alt (#18afff) — MapBrandAlt_light. A lighter, more saturated blue.

Text

• Foreground (#191b1f) — MapText02A / MapText02A_light; the dark-theme counterpart MapText02A_dark is #fff. Painted 91 times on the home feed.
• Text Secondary (#373a40) — MapText03A_light.
• Text Muted (#8491a5) — the secondary control label, painted 26 times.
• Text Placeholder (#81858f).
• Dark Text (#c2c6cf) — MapText04A_dark, recorded as evidence the dark theme is published; this reference does not otherwise claim dark-theme values.
• UI Frame (#535861) — MapUIFrame03C.

Surface

• Canvas (#ffffff) · Page (#f4f6f9), the home wash · Surface (#fbfcfc), the column wash · Surface Alt (#f8f8fa).
• Neutral Mid (#646464) — BK04. Neutral Line (#d3d3d3) — BK08.

Membership and commerce

• VIP (#ce994f) — MapVIPBrand_light, also the primitive YL10. A muted gold.
• VIP Frame (#f2ba6b) — MapVIPUIFrameAlt_light.
• SVIP (#142457) — MapSVIPBrandAlt_light. A deep navy for the higher tier.
• Commerce (#ff7d55) — MapCommerceAlt. Coral, for commercial placements.

Four colours that exist only to mark what you have paid for and what is being sold to you.

Status and accent

• Success (#11a668) · Accent Purple (#5a4df8) · Blue Light (#80c1ff) — BL04.

3. Typography Rules

Font Family

Both surfaces compute the platform system stack (-apple-system first). Zhihu publishes no font-family token among its 389 properties, so tokens.typography.family is absent: a platform system face is not promoted to a brand typeface.

Scale

The home feed sets 15px and the column sets 16px — Zhihu reads its long-form surface one step larger than its feed. That is a deliberate split, not drift.

4. Component Stylings

Measured live on both surfaces, pointer parked, navigation suppressed.

Sign-in button

• Rest #1772f6 fill, #ffffff label, 3px radius, 14px / 400. 36px tall on the home feed, 34px in columns.
• Hover and pressed both oklch(0.535218 0.21381 259.318), with a matching 1px border.
• Focus, measured 2026-09-22 with each state read on its own page load: box-shadow: rgb(255, 255, 255) 0 0 0 2px, oklch(0.581758 0.21381 259.318 / 0.3) 0 0 0 4px — a 2px white spacer ring, then a 4px halo of the brand blue at 30%. The earlier pass abstained; the abstention is resolved.

Rounded utility control

• Rest #ffffff fill, #8491a5 label, 20px radius, 60px tall.
• Hover and pressed shift fill to color(srgb 0.870588 0.876471 0.889412) and label to oklch(0.600778 0.0334471 258.983) — both change together.

Zhihu computes in modern colour spaces

Its hover states resolve as oklch() and color(srgb …), not as hex or rgb(). No other reference in this catalog does. The values are recorded verbatim rather than converted: an oklch lightness–chroma–hue triple does not round-trip to sRGB hex without loss, and writing a hex here would be asserting a precision the measurement does not have.

Radius

3px on the primary button, 20px on the rounded control, 50% on avatars; the column adds 9999px and one asymmetric 0 9999px 9999px 0. The 3px primary is unusually tight for 2026 — most of this catalog sits at 4–8px or full pills.

5. Layout Principles

• Cool wash, white article. #f4f6f9 behind #ffffff reading surfaces.
• 15px feed, 16px column. The reading surface is a step larger than the scanning surface.
• Near-invisible chrome. One blue, one near-black, everything else grey.

6. Depth & Elevation

Not measured. No shadow or elevation token appears among the 389 properties.

7. Do's and Don'ts

Do

• Set long-form at 16px and feeds at 15px — Zhihu distinguishes them.
• Keep #1772f6 for the action and let the rest be grey.
• Treat VIP gold, SVIP navy and commerce coral as reserved: they mean membership and paid placement, nothing else.

Don't

• Don't convert the oklch() hover values to hex; they are recorded verbatim for a reason.
• Don't read MapText02A_dark (#fff) as a light-theme value — the _dark suffix is the theme.
• Don't promote the system font stack to a brand typeface.
• Don't spend the VIP gold as a general accent.

8. Responsive Behavior

Not measured. Desktop 1440×900 only.

9. Agent Prompt Guide

Quick Color Reference

#1772f6 brand · #191b1f foreground · #8491a5 muted · #f4f6f9 page · #ce994f VIP · #142457 SVIP · #ff7d55 commerce · #11a668 success

Example Component Prompts

• "A long-form answer surface: 16px #191b1f on white over a #f4f6f9 page, 3px-radius #1772f6 action, #8491a5 metadata."

10. Voice & Tone

Considered and explanatory. Zhihu's product is argued prose, and its chrome stays out of the way of it — interface copy is minimal and unpersuasive.

11. Brand Narrative

Founded in 2011 as an invitation-only Q&A community and opened publicly in 2013, Zhihu built its reputation on long, sourced answers and listed in New York in 2021. Its monetisation runs through membership tiers and commercial placement, which is exactly what the token set shows: VIP and SVIP carry their own brand colours, and commerce has a dedicated coral. A design system that names what a company charges for is describing its business model.

12. Principles

• Reading first. Sizes, washes and contrast are tuned for paragraphs, not cards.
• Theme lives in the token name. _light and _dark pairs rather than a runtime switch.
• Name the tiers. Membership is a visual concept, not a badge.

13. Personas

Not researched. No persona claim is made from a UI capture.

14. States

Two controls, both carrying hover and pressed, both identical between the two states, both expressed in modern colour spaces.

Both controls carry the same focus ring, measured 2026-09-22: rgb(255, 255, 255) 0 0 0 2px, oklch(0.581758 0.21381 259.318 / 0.3) 0 0 0 4px. A white 2px spacer lifts the halo off the control, then 4px of brand blue at 30% — and the halo's hue and chroma (0.21381 259.318) are exactly the hover value's, one lightness step up. One ring token across component types, from a 36px rectangular sign-in button to a 60px round corner widget. It is a box-shadow, so it is authored: the browser's own ring is an outline. No disabled state was observed on a rendered control.

15. Motion & Easing

Not measured. No transition or duration token appears among the 389 properties.

Tier 1 sources: https://www.zhihu.com/ (live production home — 389 custom properties read via getComputedStyle, including the Map* semantic roles with _light/_dark pairs and the VIP/SVIP tier colours, plus both measured controls with hover and pressed, 2026-09-22); https://zhuanlan.zhihu.com/ (Zhihu Columns — the long-form surface, confirming the 16px body step and the same control contract at 34px, 2026-09-22)