Design System Inspiration of Douyin (抖音)

1. Visual Theme & Atmosphere

Douyin is dark-first, and not as a theme option — the dark surface is the product. Video is the content, so the chrome gets out of its way: near-black #161823 canvas, panels a step lighter at #252632, and text that is almost never a solid colour but white at a stated opacity — rgba(255,255,255,.75) for body, .34 for tertiary.

Against that, one colour: #fe2c55, the Douyin red, declared as --color-primary.

The token set gives away what the product actually is. Alongside the ordinary background and text families sit gift-* (19 properties) and pk-* (18) — virtual gifts and livestream battles, two mechanics with no equivalent in a Western social product and enough design weight to earn their own token families. A -ucenter suffix marks a distinct user-centre layer with its own light-mode values.

Primary tasks

• Watch video with chrome that never competes with it.
• Read overlaid text at several opacities against unpredictable video frames.
• Operate livestream mechanics — gifts, PK battles — that have dedicated visual vocabulary.

2. Color Palette & Roles

Measured 2026-09-22 via getComputedStyle on douyin.com. Douyin's token name follows each role. Values are given as hex where the token resolves to an opaque colour.

Brand

• Douyin Red (#fe2c55) — --color-primary and --color-primary-default-ucenter; resolves as rgba(255,44,85,1).
• Brand Hover (#d21b46) — --color-primary-hover / --color-primary-hover-ucenter, rgba(210,27,70,1).

Dark surfaces — the default

• Canvas (#161823) — --color-bg-b0, rgba(22,24,35,1). Also gift-color-bg-2.
• Surface (#252632) — --color-bg-base-b1, rgba(37,38,50,1). Painted 47 times, the most common fill on the page. Also pk-color-bg-0, gift-color-bg-4 and im-shareList-bg-start — one step reused across livestream, gifting and messaging.
• Surface Raised (#33343f) — --color-bg-toast-ucenter.
• Surface Hover (#2e2f3b) — --audience-color-hover-bg-0.
• Surface Secondary (#292b35) — --color-bg-rs, --comment-bg, --gift-color-bg-3.
• Surface Deep (#20212c) — --small-bg-color.

Text — opacity, not colour

Douyin's text tokens are white at fixed alpha, so a single ink works over video of any brightness:

• --color-text-t2 / --color-text-1 rgba(255,255,255,.75) — body.
• --name-list-text-0 rgba(255,255,255,.9) — names.
• --color-text-close rgba(255,255,255,.8).
• --color-text-t4 / -t5 / pk-color-text-1 rgba(255,255,255,.34) — tertiary.
• --color-const-text-white60 rgba(255,255,255,.6).

Foreground (#f9f9f9) is the rendered near-white, painted 795 times. The -ucenter layer inverts: --color-text-t2-ucenter is rgba(22,24,35,.75) — dark ink for a light surface.

Light layer and accent

• Light Canvas (#f9f9fa) — --color-bg-b1-ucenter. The user-centre surface is light.
• Text Secondary (#f2f2f4) — --color-secondary-default-ucenter.
• Accent Cyan (#00f3e9) — rendered once; recorded as an observed accent, not a role.
• On Brand (#ffffff) — the sign-in button's label colour, measured on the control.

3. Typography Rules

Font Family

The body stack computes -apple-system. Douyin publishes no font-family token among its 424 properties, so tokens.typography.family is absent: the platform system face is not promoted to a brand typeface.

Scale

16px carries 63% of the page. Like Weibo, hierarchy comes from opacity and enclosure rather than from size.

4. Component Stylings

No component is declared.

The one control the logged-out home exposes is the sign-in button: #fe2c55 fill, 12px radius, 38px tall, 15px/500 — and it does not change on hover, press or focus. Everything else is behind a sign-in wall.

Douyin declares --color-primary-hover (#d21b46) and --color-secondary-hover (rgba(242,242,244,.12)), so the interaction contract exists in the token set. This capture did not find a control rendering it, so no component state is claimed.

Radius

--radius-small_1-ucenter 4px · --radius-large_1-ucenter 12px · --radius-large_2-ucenter 16px are published. Rendered, 12px dominates at 81 occurrences, with a 72px pill used 5 times. Two asymmetric values — 12px 0 0 12px and 0 12px 12px 0 — appear once each, the halves of a split control.

5. Layout Principles

• Dark canvas, lighter panels. #161823 under #252632, a single step of separation.
• 12px is the radius. 81 of the page's rounded corners.
• One ink at many opacities rather than a grey ramp, so text stays legible over video.

6. Depth & Elevation

Not measured. No shadow or elevation token appears among the 424 properties. Douyin separates layers by background step, not by shadow.

7. Do's and Don'ts

Do

• Build dark-first: #161823 canvas, #252632 panels.
• Express text hierarchy as white at .9 / .75 / .34 alpha, not as grey values.
• Reserve #fe2c55 for the primary action.
• Use 12px radius as the default.

Don't

• Don't take open.douyin.com's palette — #1c5cfb, #1ff17f, #692cea are a developer portal's colours, not the product's (§ verification notes).
• Don't convert the alpha text tokens into opaque greys; the alpha is what makes them work over video.
• Don't invent hover states for components — the declared hover tokens exist but this capture observed none rendering.

8. Responsive Behavior

Not measured. Desktop 1440×900 only. Douyin is primarily a mobile application and the web surface is a secondary view of it.

9. Agent Prompt Guide

Quick Color Reference

#fe2c55 brand · #d21b46 brand hover · #161823 canvas · #252632 surface · #33343f raised · white at .9 / .75 / .34 for text

Example Component Prompts

• "A dark video card: #252632 panel on #161823, 12px radius, title white at 90%, metadata white at 34%, one #fe2c55 action."

10. Voice & Tone

Terse and mechanical in the chrome — 登录 (sign in) and little else. The product's personality lives in its content and its livestream mechanics, not in interface copy.

11. Brand Narrative

Launched by ByteDance in September 2016, Douyin is the Chinese short-video platform whose international sibling is TikTok. Its interface has been dark-first from early on, and its economics run on livestreaming — virtual gifting and PK battles between creators. That the token set carries dedicated gift-* and pk-* families is the clearest evidence in this reference of what the product actually monetises.

12. Principles

• The chrome is a frame. Dark, low-contrast, never competing with video.
• Opacity is the hierarchy. One white ink at graded alpha.
• Name what you monetise. Gifting and PK earn their own token families.

13. Personas

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

14. States

None observed. The sign-in button does not react to hover, press or focus, and it is the only control the logged-out surface exposes. --color-primary-hover and --color-secondary-hover are recorded as colour tokens, not as component states.

15. Motion & Easing

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

---

Tier 1 sources: https://www.douyin.com/ (live production home — 424 custom properties read via getComputedStyle, including the gift-*, pk-* and -ucenter families that are specific to Douyin's livestream and user-centre surfaces, 2026-09-22); https://open.douyin.com/ (Douyin Open Platform — a second brand-owned regional source; its chrome is a separate palette and is not cited for product tokens, see the verification notes)