Bilibili Design System Deep Dive
1. Brand Overview
Bilibili’s brand identity is unapologetically youthful, digital-native, and rooted in a community-driven video platform culture. If you’ve spent any time in Bilibili’s ecosystem, you know it’s not trying to be a sterile corporate product. It’s playful, but the UI doesn’t descend into chaos — there’s a clear system under the hood.
The vibe: pastel-friendly but not childish. Functional but approachable. The visual language leans heavily on light backgrounds, bright accents, and soft rounded corners. It’s built for an audience that’s there to browse, watch, and engage for hours — so the design decisions prioritize comfort and clarity over shock value.
From a design philosophy standpoint, Bilibili’s UI is “friendly minimalism.” This isn’t flat brutalism or glassmorphism. Instead, it’s a restrained palette with bursts of personality: the signature brand blue (#00aeec) for action elements, the brand pink (#ff6699) for highlights, and a stack of neutrals that keep content readable without eye strain.
One thing I noticed right away: the design system is anchored in an 8px spacing grid, but there are deviations — some odd fractional pixel values pop up (like 56.25px and 175.5px), probably dictated by video aspect ratios and media layouts. This tells me the system is modular but flexible enough to adapt to content-heavy layouts.
Typography is pragmatic: system fonts with Chinese-friendly fallbacks, tuned weights for hierarchy. There’s no custom display font — it’s relying on the platform’s own clarity and legibility across devices.
Overall, Bilibili’s design language says: “We’re fun, but we’re serious about making this usable.” It’s a social/video brand that understands its audience wants bright, recognizable CTAs, enough whitespace to breathe, and consistent component behavior. It’s not chasing hyper-modern trends — it’s refining the same core identity over years.
2. Color System
2.1 Primary Colors
The primary brand color is #00aeec (rgb(0, 174, 236)). This is a saturated cyan-blue — energetic, digital, and unmistakably “Bilibili.” It’s used for login buttons, CTAs, and interactive highlights. Psychologically, cyan blues signal trust, creativity, and a tech-forward identity.
Compared to competitors like YouTube (red) or Twitch (purple), Bilibili’s blue stands out as “calm but lively.” It avoids the urgency of red and the niche gamer vibe of purple, instead leaning into a wider appeal.
The secondary accent is #ff6699 — bright pink. This is a deliberate personality injection: where blue handles action, pink handles emotional or special states (active highlights, decorative UI). The blue/pink duality gives Bilibili a signature look without clutter.
2.2 Complete Palette
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| White | #ffffff | Primary background | Header, surfaces, cards |
| Neutral Light Gray | #f1f2f3 | Surface background | Cards, dividers |
| Neutral Mid Gray | #9499a0 | Secondary text | Labels, muted UI |
| Neutral Dark Gray | #61666d | Primary text | Body copy |
| Brand Blue | #00aeec | Primary action | Buttons, links |
| Brand Pink | #ff6699 | Accent | Highlights, badges |
| Brand Pink Active | #e84b85 | Active accent | Selected states |
| Brand Pink Hover | #ff8cb0 | Hover accent | Interactive hover |
| Brand Pink Disabled | #ffb3ca | Disabled accent | Disabled UI pink |
| Brand Blue Hover | #40c5f1 | Hover action | Button hover |
| Brand Blue Disabled | #80daf6 | Disabled action | Disabled UI blue |
| Brand Blue Thin | #dff6fd | Light blue background | Subtle fills |
| Brand Pink Thin | #ffecf1 | Light pink background | Subtle fills |
| Text Black | #000000 | High contrast text | Titles |
| Text Primary | #18191c | Dark gray text | Body |
| Text Secondary | #797f87 | Hovered text | Hover states |
| Text Notice | #e58900 | Notice/warning text | Alerts |
| Graph BG Thick | #e3e5e7 | Charts/graph backgrounds | Data viz |
| Text4 | #c9ccd0 | Tertiary text | Placeholder |
| Text Link | #008ac5 | Link text | Hyperlinks |
| Neutral Border Light | #eceeef | Border color | Dividers |
| Neutral Border Dark | #3b3e42 | Border dark | Hover/focus outlines |
| Neutral Border Mid | #3b3e43 | Border mid | Hover/focus outlines |
2.3 Color Relationships
The palette is clearly segmented:
- Action colors: #00aeec, #40c5f1, #80daf6
- Accent colors: #ff6699, #ff8cb0, #ffb3ca
- Functional neutrals: #ffffff, #f1f2f3, #61666d, #9499a0
- Text system: black (#000000), dark gray (#18191c), secondary grays (#797f87, #c9ccd0)
- Alerts: #e58900 for notices
Contrast-wise, white (#ffffff) against #18191c easily exceeds WCAG AA for body text. The brand blue on white is borderline — fine for large text and buttons, but small text might need bold weights to pass accessibility guidelines.
2.4 Usage Guide
- Blue + White is the main CTA pairing — keep text black or white depending on background.
- Pink accents should be used sparingly to avoid clashing with blue.
- Neutrals are your foundation — avoid stacking bright colors without a neutral buffer.
- Text Notice (#e58900) is for alerts, never for decorative elements.
- Avoid using brand pink and brand blue together in large blocks — they fight for attention.
3. Typography
3.1 Font Families
Every style uses the same stack:
-apple-system, system-ui, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei
No Google Fonts, no Adobe Fonts. It’s a system font approach — faster loads, native rendering, and guaranteed multilingual support.
3.2 Type Scale
| Element | Font Family | Size | Weight | Line Height |
|---|---|---|---|---|
| Heading-1 | System stack | 20px (1.25rem) | 400 | 1.25 |
| Heading-1 | System stack | 16px (1.00rem) | 600 | 1.38 |
| Heading-1 | System stack | 15px (0.94rem) | 700 | 1.47 |
| Heading-1 | System stack | 15px (0.94rem) | 500 | 1.13 |
| Link | System stack | 15px (0.94rem) | 500 | 1.47 |
| Link | System stack | 14px (0.88rem) | 400 | 1.60 |
| Link | System stack | 14px (0.88rem) | 400 | 2.14 (spacing: 2px) |
| Link | System stack | 13px (0.81rem) | 400 | 1.60 |
| Caption | System stack | 14px (0.88rem) | 400 | 1.43 |
| Caption | System stack | 14px (0.88rem) | 500 | 2.57 |
| Caption | System stack | 14px (0.88rem) | 400 | 1.60 (spacing: 2px) |
| Caption | System stack | 13px (0.81rem) | 400 | 1.25 |
| Caption | System stack | 12px (0.75rem) | 400 | 1.60 |
| Button | System stack | 14px (0.88rem) | 400 | 1.15 |
| Button | System stack | 12px (0.75rem) | 400 | 1.15 |
| Button | System stack | 0px (0.00rem) | 600 | Infinity |
3.3 Hierarchy
Hierarchy is created through weight shifts rather than massive size jumps. The largest heading is only 20px — this keeps the UI compact and content-focused. Bold and semi-bold weights do the heavy lifting. This works well for a dense layout with lots of thumbnails and metadata — headings don’t scream, they just lead.
4. Spacing & Layout
4.1 Spacing Scale
Base unit: 8px grid, but with many intermediate values.
| Px Value | Rem | Count | Notes |
|---|---|---|---|
| 1px | 0.06rem | 2 | Hairline borders |
| 2px | 0.13rem | 8 | Icon gaps |
| 3px | 0.19rem | 4 | Micro spacing |
| 4px | 0.25rem | 69 | Tiny padding |
| 5px | 0.31rem | 22 | Small padding |
| 6px | 0.38rem | 81 | Button/text field padding |
| 8px | 0.50rem | 21 | Base grid step |
| 9px | 0.56rem | 2 | Specific icon alignment |
| 10px | 0.63rem | 46 | Common gap |
| 13px | 0.81rem | 1 | Rare |
| 14px | 0.88rem | 4 | Label padding |
| 16px | 1.00rem | 31 | Card padding |
| 18px | 1.13rem | 2 | Medium gap |
| 24px | 1.50rem | 30 | Section spacing |
| 40px | 2.50rem | 8 | Large section |
| 56.25px | 3.52rem | 22 | Media aspect ratio |
| 60px | 3.75rem | 1 | Rare large gap |
| 174.375px | 10.90rem | 7 | Thumbnail height |
| 175.5px | 10.97rem | 38 | Thumbnail height |
| 362.25px | 22.64rem | 11 | Hero banners |
4.2 Layout
No explicit breakpoints extracted. Likely responsive via Vuetify grid. Content widths are dictated by media sizes (175.5px wide thumbnails). The fractional values are telling: this is a content-driven layout, not a strict modular grid.
5. Visual Elements
Border Radius
| Value | Count | Elements |
|---|---|---|
| 0px 0px 8px 8px | 1 | div |
| 0px 0px 7px 7px | 9 | div |
| 0px 0px 6px 6px | 22 | card |
| 4px | 98 | div, card, span |
| 5px | 7 | div |
| 6px | 323 | div, button, a, card, badge |
| 7px 7px 0px 0px | 9 | div |
| 8px | 13 | form, div, button |
| 15px | 1 | button |
| 50% | 12 | div, li |
The dominant radius is 6px — soft but not pill-shaped. 50% is used for avatars or circles.
Shadows
Mostly flat, minimal shadows:
rgba(0, 0, 0, 0.03) 0px 0px 40px 0px— subtle depthrgba(0, 0, 0, 0.08) 0px 2px 4px 0px— rare- Borders are more common than shadows.
Borders
1px solid lines in light grays (#f1f2f3, #e3e5e7) define structure. Rare use of colored borders (#ff6699).
6. Components
6.1 Buttons
Variant 1
Default:
- Background: rgba(255,255,255,0.1)
- Color: #000000
- Padding: 0px
- Radius: 8px
- Border: none
- Font: 14px, weight 400
Variant 2 (primary-btn roll-btn)
Default:
- Background: #ffffff
- Color: #18191c
- Padding: 9px
- Radius: 8px
- Border: 1px solid #e3e5e7
- Font: 12px, weight 400
No hover/active styles extracted — likely handled by Vuetify ripple.
6.2 Links
Three styles:
- Dark text (#18191c), no underline
- Mid gray (#61666d), no underline
- Light gray (#9499a0), no underline
No hover states extracted — probable subtle color shifts.
6.3 Forms
Text inputs:
- Background: transparent
- Text: #61666d
- Border: none
- Padding: right 8px
6.4 Cards
Radius: 6px or 4px
Borders: light gray (#f1f2f3)
Shadow: subtle 0.03 alpha
7. Design Tokens
:root {
/* Colors */
--color-white: #ffffff;
--color-neutral-light-gray: #f1f2f3;
--color-neutral-mid-gray: #9499a0;
--color-neutral-dark-gray: #61666d;
--color-brand-blue: #00aeec;
--color-brand-pink: #ff6699;
--color-brand-pink-active: #e84b85;
--color-brand-pink-hover: #ff8cb0;
--color-brand-pink-disabled: #ffb3ca;
--color-brand-blue-hover: #40c5f1;
--color-brand-blue-disabled: #80daf6;
--color-brand-blue-thin: #dff6fd;
--color-brand-pink-thin: #ffecf1;
--color-text-black: #000000;
--color-text-primary: #18191c;
--color-text-secondary: #797f87;
--color-text-notice: #e58900;
--color-graph-bg-thick: #e3e5e7;
--color-text4: #c9ccd0;
--color-text-link: #008ac5;
--color-border-light: #eceeef;
--color-border-dark: #3b3e42;
--color-border-mid: #3b3e43;
/* Typography */
--font-family-system: -apple-system, system-ui, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei;
--font-size-h1-lg: 20px;
--font-weight-h1-lg: 400;
--line-height-h1-lg: 1.25;
/* (repeat for each style) */
/* Spacing */
--space-1: 1px;
--space-2: 2px;
--space-3: 3px;
--space-4: 4px;
--space-5: 5px;
--space-6: 6px;
--space-8: 8px;
--space-9: 9px;
--space-10: 10px;
--space-13: 13px;
--space-14: 14px;
--space-16: 16px;
--space-18: 18px;
--space-24: 24px;
--space-40: 40px;
--space-56_25: 56.25px;
--space-60: 60px;
--space-174_375: 174.375px;
--space-175_5: 175.5px;
--space-362_25: 362.25px;
/* Border Radius */
--radius-none: 0px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 15px;
--radius-full: 50%;
/* Shadows */
--shadow-soft: rgba(0, 0, 0, 0.03) 0px 0px 40px 0px;
--shadow-hover: rgba(0, 0, 0, 0.08) 0px 2px 4px 0px;
}8. AI Coding Assistant Prompt
# Bilibili Design System Specification
You are a Bilibili design expert. Build UIs matching their visual language exactly.
## Brand Context
Bilibili’s design is friendly minimalism with a youthful tech vibe. Light backgrounds, bright cyan-blue CTAs, and pink accents define its personality. Components are soft-cornered, content-focused, and sit on an 8px spacing grid.
## Color Palette
- White: #ffffff — Backgrounds, cards
- Neutral Light Gray: #f1f2f3 — Surfaces, dividers
- Neutral Mid Gray: #9499a0 — Secondary text
- Neutral Dark Gray: #61666d — Primary text
- Brand Blue: #00aeec — Primary actions, CTAs
- Brand Blue Hover: #40c5f1 — Hover state for actions
- Brand Blue Disabled: #80daf6 — Disabled actions
- Brand Blue Thin: #dff6fd — Subtle fills
- Brand Pink: #ff6699 — Accent highlights
- Brand Pink Active: #e84b85 — Selected states
- Brand Pink Hover: #ff8cb0 — Hover accent
- Brand Pink Disabled: #ffb3ca — Disabled accent
- Brand Pink Thin: #ffecf1 — Subtle fills
- Text Black: #000000 — Titles
- Text Primary: #18191c — Body text
- Text Secondary: #797f87 — Hover text
- Text Notice: #e58900 — Alerts
- Graph BG Thick: #e3e5e7 — Charts
- Text4: #c9ccd0 — Placeholder
- Text Link: #008ac5 — Hyperlinks
- Border Light: #eceeef — Dividers
- Border Dark: #3b3e42 — Hover/focus outlines
- Border Mid: #3b3e43 — Hover/focus outlines
## Typography
Font family: `-apple-system, system-ui, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei`
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 lg | 20px | 400 | 1.25 | Page titles |
| H1 sm | 16px | 600 | 1.38 | Section headings |
| H1 bold | 15px | 700 | 1.47 | Sub-headings |
| Link lg | 15px | 500 | 1.47 | Navigation links |
| Link sm | 14px | 400 | 1.60 | Inline links |
| Caption md | 14px | 400 | 1.43 | Meta info |
| Button md | 14px | 400 | 1.15 | Standard buttons |
| Button sm | 12px | 400 | 1.15 | Compact buttons |
## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 9px, 10px, 13px, 14px, 16px, 18px, 24px, 40px, 56.25px, 60px, 174.375px, 175.5px, 362.25px.
Use multiples for padding, margins, and gaps.
## Border Radius
- none: 0px — tables
- sm: 4px — inputs, small cards
- md: 6px — buttons, cards
- lg: 8px — modals, larger buttons
- xl: 15px — special buttons
- full: 50% — avatars
## Shadows & Depth
- Soft: rgba(0,0,0,0.03) 0px 0px 40px 0px — subtle depth
- Hover: rgba(0,0,0,0.08) 0px 2px 4px 0px — rare hover depth
## Component Specifications
### Primary Button
Default:
background: #ffffff;
color: #18191c;
padding: 9px;
border-radius: 8px;
border: 1px solid #e3e5e7;
font: 12px 400;
Hover: background: #40c5f1;
Focus: outline: 2px solid #00aeec;
Disabled: background: #80daf6; opacity: 0.5;
### Secondary Button
Default:
background: rgba(255,255,255,0.1);
color: #000000;
padding: 0px;
border-radius: 8px;
border: none;
font: 14px 400;
### Navigation Links
Default: color: #18191c; text-decoration: none;
Hover: color: #797f87;
### Input Fields
Default:
background: transparent;
color: #61666d;
border: none;
padding-right: 8px;
### Cards
background: #ffffff;
border-radius: 6px;
border: 1px solid #f1f2f3;
box-shadow: rgba(0,0,0,0.03) 0px 0px 40px 0px;
## Layout & Responsive Rules
- Max content width: determined by media sizes (~175.5px thumbnails in grid)
- Page padding: multiples of 8px
- Grid gap: 10px common
## Interaction Rules
- Transitions: 150ms ease for state changes
- Focus indicators: 2px solid brand blue
- No drastic hover animations — subtle color changes only
## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Keep border radius consistent per component type
- Use system font stack
- Keep button padding aligned to spacing scale
## DON'T List
- Don’t invent new colors
- Don’t mix sharp and rounded corners
- Don’t use heavy shadows
- Don’t stretch images
## Code Examples
### Primary Button
```css
.btn-primary {
background: #ffffff;
color: #18191c;
padding: 9px;
border-radius: 8px;
border: 1px solid #e3e5e7;
font-size: 12px;
font-weight: 400;
transition: background 150ms ease;
}
.btn-primary:hover { background: #40c5f1; }
.btn-primary:focus { outline: 2px solid #00aeec; }
.btn-primary:disabled { background: #80daf6; opacity: 0.5; }Card
.card {
background: #ffffff;
border-radius: 6px;
border: 1px solid #f1f2f3;
box-shadow: rgba(0,0,0,0.03) 0px 0px 40px 0px;
padding: 16px;
}Input
.input {
background: transparent;
color: #61666d;
border: none;
padding-right: 8px;
}
.input:focus { outline: 2px solid #00aeec; }
---
## 9. Summary
**TL;DR** — Bilibili’s design system is a disciplined 8px-grid layout with bright cyan-blue actions, playful pink accents, and soft-cornered components. It’s functional minimalism for a content-heavy platform.
**Brand Keywords**
- youth-friendly
- soft-minimalist
- content-prioritized
- color-disciplined
- grid-consistent