Design System Inspiration of Bilibili

1. Visual Theme & Atmosphere

Bilibili (哔哩哔哩, affectionately "B站" — "B-site") is China's home of ACG culture — anime, comics, and games — and the video community where a generation grew up, and its design wears that identity on its sleeve. The signature is the unmistakable bili pink (#FB7299) — a soft, warm, distinctly youthful pink that fans simply call "粉" — paired with a friendly bili blue accent and a clean white content surface. Bilibili's color is its personality: where most video platforms reach for red (YouTube), black (premium streamers), or corporate blue, Bilibili chose a gentle pink and made it iconic. The chrome is bright, light, and approachable; the feed is a card-based grid of video thumbnails, each showing a cover, duration, view/danmaku counts, title, and uploader (亲切地称为 "UP主"). The brand's emotional register is community and fun — this is a place of fandom, of bullet-comments (弹幕 / danmaku) flying across the screen, of in-jokes and shared culture, not a sterile content-delivery utility.

The platform's defining UX primitive is danmaku (弹幕) — real-time bullet comments that scroll across the video itself, turning passive watching into a shared, almost-live communal experience. This is Bilibili's soul, and it shapes the design: the video player is the heart of the product, the comment culture is celebrated rather than hidden, and the whole interface signals "you're among friends who love the same things". Bilibili's mascots — the 22娘 and 33娘 (2233 girls), two anime-style characters — appear in empty states, errors, and brand moments, reinforcing the ACG warmth. The signature greeting (゜-゜)つロ 干杯~ (a kaomoji raising a glass, "cheers~") is the brand's voice in a single string.

Typography is system-font-first with full Simplified-Chinese coverage (PingFang SC, Source Han Sans / 思源黑体, Microsoft YaHei), no custom brand typeface — the warmth comes from the pink and the mascots, not from type. Type sizes are modest, the layout is content-dense (a video community is a discovery machine), but the pink chrome and friendly copy keep it from ever feeling cold.

Key Characteristics:

• bili pink #FB7299 — the iconic, soft, youthful brand pink fans call "粉"; the brand's whole personality
• bili blue accent (≈#00AEEC) — secondary brand color, links, the logo's TV/bubble
• Card-based video-thumbnail grid feed (cover + duration + view/danmaku counts + title + UP主)
• Danmaku (弹幕) bullet-comments as the soul of the product — communal, near-live watching
• ACG / anime / youth-culture identity worn proudly — fandom, in-jokes, shared culture
• The 2233 girls (22娘/33娘) mascots in empty/error/brand surfaces; the (゜-゜)つロ 干杯~ kaomoji greeting
• Bright, light, white-and-pink chrome — friendly and approachable, never sterile or premium-dark
• System-font-first + Simplified-Chinese fallbacks (PingFang SC, 思源黑体); warmth from color, not type
• The video player is the heart — comment culture celebrated, not hidden
• Content-dense discovery feed kept warm by pink chrome + community copy

2. Color Palette & Roles

Bilibili does not expose a public CSS token layer; the values below combine the verified bili pink with observable live-site usage. Non-pink neutral hexes are best-fit approximations and flagged accordingly.

Brand

• bili pink (#FB7299): The brand. Primary CTA fill, active/selected states, logo, like accents, the platform's identity. Fans call it "粉". RGB rgb(251, 114, 153). Verified as Bilibili's official pink ("bili pink" / "girl pink").
• Pink Pressed (≈#F25D8E, approximate): Darker pink for primary-button hover/press.
• Pink Tint (≈#FFF0F4, approximate): Light pink wash for selected backgrounds, subtle highlights.
• bili blue (≈#00AEEC, approximate): The secondary brand color — links, the logo's TV/speech-bubble mark, some interactive accents. The cool counterpoint to the warm pink.
• bili blue dark (≈#0089C7, approximate): blue hover/press.

Surface

• Page White (#FFFFFF): Default content background. Bright and light.
• Soft Gray Surface (≈#F4F4F4 / #F6F7F8, approximate): Page ground behind cards, skeleton blocks.
• Card White (#FFFFFF): Video-card surface.

Text (near-black + opacity)

• Primary Text (≈#18191C / #212121, approximate): Video titles, primary body.
• Secondary Text (≈#61666D / #9499A0, approximate): UP主 names, view/danmaku counts, metadata.
• Tertiary / Hint (≈#C9CCD0, approximate): Placeholders, disabled labels.

Border & Divider

• Hairline Border (≈#E3E5E7, approximate): Card edges, input borders, dividers.
• Divider (≈#F1F2F3, approximate): List/section separators.

State

• Like / Active (#FB7299): The like and active states fill brand pink.
• Coin (投币) / Highlight (≈#FFB027, approximate): The gold "coin" reward action accent (a signature Bilibili interaction).
• Error (≈#FF4D4F, approximate): Form errors, destructive confirmations.
• Success (≈#52C41A, approximate): Confirmations.

Role note: bili pink is the personality — it appears on the brand, the primary action, and the active state, and its warmth is the whole point. bili blue is the cool secondary accent (links, logo). The gold coin color is reserved for the distinctive "投币" (give-a-coin) reward gesture.

3. Typography Rules

Font Stack

-apple-system, BlinkMacSystemFont, "PingFang SC", "Source Han Sans SC", "思源黑体", "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif

System UI fonts lead with comprehensive Simplified-Chinese fallbacks (PingFang SC on Apple, Source Han Sans SC / 思源黑体 and Microsoft YaHei cross-platform). No custom brand typeface — Bilibili's warmth comes from the pink palette and the mascots, so the type stays native and readable.

Weights

• Medium (500): Video titles, active tabs, button labels, section heads. The "this matters" weight.
• Regular (400): Body, UP主 names, metadata, counts.
• Semibold (600): Reserved for page titles, key numbers, emphasis.

Bilibili rarely uses weight 700 — the friendly community register tops out at 500/600. Hierarchy comes from the 500/400 split + the near-black/gray opacity ladder.

Size Scale (observed)

Conventions

• Video titles clamp to two lines in the feed; overflow ellipsizes.
• Counts are everywhere and first-class — views (播放), danmaku (弹幕), likes, coins — set in gray metadata weight; they're the social signals of a video community.
• Type stays modest so the thumbnail cover does the visual work; the cover is the headline.
• CJK-first — fallback stack chosen so Simplified Chinese renders crisply at small sizes.

4. Component Stylings

Buttons

Primary CTA (Follow UP主 / 关注, Sign up)

• Background: #FB7299
• Text: #FFFFFF
• Border: none
• Radius: 6px (or pill 16px for follow chips)
• Padding: 6px 16px
• Font: 14px / 500
• Hover/press: background ≈#F25D8E
• Use: Primary action — Follow, Sign up. bili pink is the action color.

Secondary (Following / 已关注, ghost)

• Background: #FFFFFF
• Text: ≈#61666D
• Border: 1px solid ≈#E3E5E7
• Radius: 6px
• Padding: 6px 16px
• Font: 14px / 500
• Use: Already-following / secondary toggle.

Coin (投币) Action

• Background: transparent (icon button)
• Icon: gold ≈#FFB027 when active
• Use: The signature "give a coin" reward gesture under videos — gold accent.

Inputs

Search / Default

• Background: #FFFFFF (or filled ≈#F4F4F4)
• Text: ≈#18191C
• Border: 1px solid ≈#E3E5E7
• Radius: 8px (search) / 6px (form field)
• Padding: 8px 14px
• Font: 14px / 400
• Focus: border transitions to bili pink/blue
• Use: Top search bar, comment input, form fields.

Cards

Video Card (feed grid)

• Background: #FFFFFF
• Border: none
• Radius: 6–8px (cover top corners + card)
• Padding: 0 on cover; 8px on text footer
• Shadow: none default; subtle lift on hover (web)
• Layout: 16:9 cover image (the star, with a duration pill bottom-right + view/danmaku overlay bottom-left) → 2-line title (14px/500) → UP主 name (12px/400 gray)
• Use: The atomic unit of the discovery feed.

Tags / Badges

Partition / Tag Chip

• Background: ≈#F4F4F4 (or pink-tint #FFF0F4 for active)
• Text: ≈#61666D (or #FB7299 active)
• Radius: 4px (or pill)
• Padding: 4px 10px
• Font: 12px / 400
• Use: 分区 (partition) filters — 番剧/游戏/音乐/科技 etc., tags above the feed.

Duration / Count Overlay (on cover)

• Background: black ~60% pill
• Text: #FFFFFF
• Radius: 4px
• Padding: 2px 6px
• Font: 12px / 400
• Use: Duration bottom-right; view/danmaku counts bottom-left, over the thumbnail.

Navigation

• Top bar: bili pink/blue logo (TV-bubble + 22/33 mascot energy) left, partition nav, search center, login/upload right
• Partition (分区) row: horizontal category nav — 首页/番剧/直播/游戏中心/会员购…
• Active nav item: bili pink text + pink underline indicator
• Mobile: bottom tab bar, the center upload "+" in brand pink

Video Player (the heart)

• Large 16:9 player, dark player chrome
• Danmaku layer: bullet comments scroll right-to-left across the video; toggle + density controls
• Below: title, UP主, action row (点赞 like / 投币 coin / 收藏 favorite / 转发 share) — the signature "一键三连" (one-click triple: like+coin+favorite)
• Comment section + danmaku list

5. Layout Principles

Spacing

Grid

• Feed: responsive card grid — 4–6 columns wide web, 2 columns mobile
• Video detail: player + info (left/main) + recommended-videos rail (right)
• Channel/partition pages: grid + horizontal scroll rows per sub-category

Density

Bilibili is high-density discovery. A video community lives on showing many videos at once — the feed packs cards, the partition nav is broad, the recommended rail is long. The pink chrome and friendly copy keep the density warm rather than overwhelming.

6. Depth & Elevation

Bilibili web chrome is mostly flat. Cards separate via gray ground + radius + gap; depth appears on floating UI and on hover.

Z-Index

• Sticky top bar above content
• Floating mini-player / dropdowns above page
• Modal + mask above dropdowns
• Toast at highest level

Animation

• Card hover lift + cover preview (gif/video preview on hover, web)
• Danmaku scroll (the signature kinetic layer)
• "一键三连" long-press triple-action burst animation (like+coin+favorite)
• Friendly, soft easing

7. Do's and Don'ts

• DO make bili pink #FB7299 the brand and the primary action — it's the personality, lean into it.
• DON'T swap the pink for a red or a corporate blue; the pink IS Bilibili. Use bili blue only as the cool secondary accent.
• DO build the feed as a card grid of 16:9 thumbnails with duration + view/danmaku overlays + 2-line title + UP主.
• DON'T hide the engagement counts — views, danmaku, coins are the social proof of a video community.
• DO celebrate danmaku and the "一键三连" (like+coin+favorite) culture in the player UI; the comment culture is the soul.
• DON'T treat Bilibili like a sterile content-delivery player — the community warmth is the differentiator.
• DO use the 2233 mascots and friendly kaomoji copy ((゜-゜)つロ 干杯~) in empty/error/brand moments.
• DON'T write cold corporate system copy — the ACG-community warmth is the brand voice.
• DO keep chrome bright, light, white-and-pink; generous radii (4–8px); friendly shapes.
• DON'T go dark-premium or sharp-corporate — that's the opposite of the youth-community register.
• DO lead the font stack with PingFang SC / 思源黑体; cap weight at 500/600.
• DON'T go weight 700 — heavy bold reads aggressive against the friendly register.

8. Responsive Behavior

Touch & Mobile

• Bottom tab bar with brand-pink center upload "+"
• Full-width player; danmaku send + toggle thumb-accessible
• Min 44px tap targets; generous like/coin/favorite hit areas
• Cover hover-preview (web) → tap-to-play (mobile)

Media

• Video covers: 16:9, object-fit: cover, lazy-loaded, hover-preview on web
• Player: adaptive bitrate, danmaku layer overlaid
• Partition pages mix grid + horizontal-scroll rows

9. Agent Prompt Guide

Quick Color Reference

• Brand / like / primary CTA: #FB7299 (pressed ≈#F25D8E, tint ≈#FFF0F4)
• Secondary accent / links: bili blue ≈#00AEEC
• Coin/reward: gold ≈#FFB027
• Page bg: #FFFFFF; card ground: ≈#F4F4F4
• Primary text: ≈#18191C; secondary: ≈#61666D; hint: ≈#C9CCD0; border: ≈#E3E5E7

Example Component Prompts

• "Create a Bilibili video card: white bg, 6px radius, no border. 16:9 cover (top corners 6px) with a duration pill (black-60% bg, white 12px) bottom-right and view/danmaku counts overlay bottom-left, then 2-line title clamp 14px weight 500 #18191C, then UP主 name 12px #61666D. Subtle hover lift 0 2px 12px rgba(0,0,0,0.08) with cover preview."
• "Build a Bilibili follow button: bg #FB7299, white text 14px weight 500, 6px radius, padding 6px 16px. Hover ≈#F25D8E. Following state: white bg, #61666D text, 1px #E3E5E7 border."
• "Design the Bilibili player action row: like (heart, fills #FB7299), coin/投币 (fills gold #FFB027), favorite (star), share — with a 'one-click triple' (一键三连) long-press that bursts all three. Counts beside each icon in #61666D."
• "Create a Bilibili empty state: bright white, a 2233-girls mascot illustration, a friendly kaomoji line like (゜-゜)つロ 干杯~, one pink CTA. Warm and community-toned, never cold."

Iteration Guide

1. bili pink #FB7299 is the personality — brand + primary action + active state. Lean in; never swap for red.
2. bili blue is the cool secondary; gold is the coin/reward gesture. Don't expand the palette beyond these.
3. 16:9 thumbnail cards with duration + count overlays + 2-line title + UP主. Counts are social proof — show them.
4. Danmaku and 一键三连 are the soul — celebrate the comment/reward culture in the player.
5. 2233 mascots + kaomoji copy in empty/error/brand moments; warm community voice everywhere.
6. Bright white-and-pink, generous radii, friendly shapes — never dark-premium or sharp-corporate.
7. PingFang SC / 思源黑体 fallbacks, weights cap at 500/600, hierarchy via near-black/gray opacity.
8. Mostly flat; lift cards on hover, reserve shadow for floating UI.

---

10. Voice & Tone

Bilibili's voice is young, warm, and fluent in ACG community culture — it talks like a friend who's deep in the fandom, uses internet/anime vernacular naturally, and treats users as fellow members of a community rather than as an audience. The register in Simplified Chinese is casual 你, playful, full of community-native expressions, and famously fond of kaomoji (颜文字) — the signature (゜-゜)つロ 干杯~ ("cheers~", a little figure raising a glass) is the brand's voice distilled to one string. Users are addressed and refer to themselves with insider vocabulary: uploaders are UP主, the site is B站, watching together via 弹幕 (danmaku), supporting a creator via 一键三连 (one-click like+coin+favorite). The brand leans into this lexicon rather than translating it into corporate speak, because the in-group language is the belonging.

Forbidden phrases. Cold corporate system tone (系统错误，请稍后重试 bare and humorless — pair it with a mascot and a warmer line). The formal 您 in casual community contexts (reserve for legal/payment). Aggressive marketing hype that breaks the fan-community trust. Treating users as a passive "audience" (受众) rather than members (用户/小伙伴) — Bilibili's whole identity is participatory.

Voice samples.

• (゜-゜)つロ 干杯~ — the signature kaomoji greeting, the brand voice in one string.
• UP主 / B站 / 一键三连 / 弹幕 — the community lexicon the brand voice leans on.
• 关注 / 投稿 — follow / upload CTAs, short friendly verbs.
• UP主加油 — creator-encouragement pattern.

11. Brand Narrative

Bilibili was founded in 2009 by Xu Yi (徐逸), originally launched as Mikufans — a video site built by and for ACG (anime/comics/games) fans, explicitly inspired by Japan's Niconico and its danmaku (bullet-comment) culture. It was renamed bilibili in 2010 (the name a reference to a character, 御坂美琴 "Biribiri", from the anime A Certain Scientific Railgun). From the start, Bilibili was not a general video utility but a community for a specific subculture — and that community-first, fandom-rooted identity is the brand's foundation. Danmaku — comments scrolling across the video so viewers feel they're watching together, even asynchronously — was the founding innovation and remains the soul of the product.

Over the following decade Bilibili grew far beyond anime into a full video community — games, technology, lifestyle, music, knowledge/study content, and live streaming — while keeping its ACG-rooted warmth and its distinctive participation rituals (一键三连, 投币, danmaku). Famously, for years new users had to pass a community-knowledge quiz to earn full membership — a deliberate gate to preserve community culture as the platform scaled. The brand's mascots, the 22娘 and 33娘 (2233 girls), and the iconic bili pink keep the identity unmistakably youthful and fandom-native even as the audience broadened into one of China's largest video communities.

What Bilibili refuses: the sterile content-delivery feel of a generic video utility, a corporate-red or premium-dark palette, cold humorless system copy, and treating users as a passive audience. What it embraces: a singular iconic pink, danmaku and the participation rituals as the soul, the 2233 mascots and kaomoji warmth, the community in-group lexicon (B站/UP主/一键三连), and a design that always signals "you're among friends who love the same things".

12. Principles

1. The community is the product. Bilibili is a place to belong, not a feed to consume. UI implication: Surface participation everywhere — danmaku, 一键三连, coins, comments. Use member language (UP主, 小伙伴), never passive-audience framing. Design celebrates contribution.

2. The pink is the personality. #FB7299 is iconic precisely because it's an unusual choice for video. UI implication: Lean into the pink for brand + primary action + active state; pair with bili blue as the cool accent. Never dilute it into a generic red or corporate blue.

3. Danmaku is sacred. Bullet-comments across the video are the founding innovation and the emotional core. UI implication: The player is the heart of the product; danmaku is a first-class layer (toggle, density, send), not an afterthought. The shared-watching feeling is the differentiator.

4. Warmth over polish. The 2233 mascots, the kaomoji, the friendly copy make even errors feel like a friend shrugging. UI implication: Empty/error states get a mascot and a warm line; system copy is light and blameless. A cold humorless string is off-brand.

5. Discovery is dense, but never cold. A video community shows a lot at once. UI implication: Pack the feed with cards and counts, but keep the chrome bright white-and-pink with friendly copy so density reads as abundance, not clutter.

6. Counts are belonging. Views, danmaku, likes, coins signal what the community loves. UI implication: Show engagement metrics prominently in gray metadata weight — they're trust and social proof, not noise.

13. Personas

Personas are fictional archetypes informed by publicly described Bilibili user segments (young ACG/gaming fans, creators/UP主, knowledge-content viewers), not individual people.

小林 (Xiao Lin), 19, Wuhan. University freshman, lifelong anime fan. Lives on B站 — watches 番剧 (anime), turns danmaku on so it feels like watching with everyone, sends a 一键三连 to UP主s he loves, and bought membership years ago after passing the community quiz. Fluent in the lexicon; the kaomoji greeting feels like home. Would never call himself an "audience" — he's a member.

阿哲 (A Zhe), 27, Hangzhou. Tech UP主 (uploader) — posts coding tutorials and gadget reviews. Obsesses over his thumbnail covers because the card grid rewards a great 16:9 cover, and lives by his 投币/三连 counts. Engages with danmaku and comments because the community relationship is his channel's lifeblood. Reads the platform as on his side ("UP主加油").

周悦 (Zhou Yue), 23, Beijing. Came for study-with-me and knowledge content (Bilibili's "study area" is huge), stayed for the warm community vibe. Browses the dense feed comfortably because the pink chrome and friendly copy never feel corporate. Sends danmaku to feel less alone while studying late. The mascots and kaomoji are part of why the site feels like a friendly place rather than a utility.

14. States

15. Motion & Easing

Bilibili's motion is friendly, playful, and community-celebratory — restrained for chrome, but genuinely joyful at the participation moments (一键三连, coin, like) and ever-present in the danmaku layer.

Durations:

Easings:

Spring stance. Overshoot/spring is reserved for the participation rituals — the like-pop, the coin-pop, and especially the 一键三连 burst (long-press triggers all three actions with a celebratory animation). These are the emotional peaks of being a community member, so they're the one place the UI is allowed to be exuberant. Chrome transitions stay calm; danmaku is its own continuous kinetic layer.

Signature motions.

1. 一键三连 burst. Long-pressing the like button fires like + coin + favorite together with a celebratory ease-pop animation over motion-celebrate. The single most joyful moment in the product.
2. Danmaku scroll. Bullet comments traverse the video right-to-left over danmaku-scroll, density and speed adjustable. The continuous kinetic soul of the watching experience.
3. Like / coin pop. Heart fills pink, coin fills gold, each with a 1 → 1.25 → 1 ease-pop and count increment over motion-standard.
4. Card hover (web). Card lifts (motion-standard / ease-standard) and the cover begins a muted preview — discovery feels alive.
5. Reduce motion. Under prefers-reduced-motion: reduce, pops flatten to instant fills, the 一键三连 burst becomes a simple state change, and danmaku can be disabled/static per user preference. Fully functional, no forced kinetics.

---

Verified: 2026-05-19 (omd:add-reference — CN batch) Tier 1 sources: bilibili.com (live — pink/blue ACG brand aesthetic, video-thumbnail card grid feed, partition nav, mascot presence, signature kaomoji (゜-゜)つロ 干杯~, UP主/danmaku culture; no public token layer). Tier 2 sources: Brandfetch / BrandColorCode + PipePipe GitHub issue (bili pink #FB7299 RGB 251,114,153 verified as official pink); widely documented history (Xu Yi 徐逸, Mikufans 2009 → bilibili 2010, Niconico-inspired danmaku, 2233 mascots, community quiz). Style ref: line (Asian super-app/community warmth) + ACG youth-culture patterns. Conflicts unresolved: Only #FB7299 is verified; bili blue, the gold coin color, and §2/§4 neutrals are flagged approximate (observed usage, no public token layer).