bilibili

Overview

bilibili is a vibrant, community-driven video platform centered on anime, gaming, and user-generated content that celebrates the ACG (anime, comics, games) culture. The design system embodies a "Playful Minimalism" aesthetic—clean, light surfaces paired with bold accent colors (cyan and magenta) that evoke energy, youthfulness, and digital vibrancy. The interface prioritizes clarity and accessibility while maintaining a distinctly Chinese design sensibility through the use of PingFang SC typography and warm, approachable spacing. The emotional response is one of joyful discovery: users feel welcomed into a creative community where their contributions matter.

The brand voice is conversational, enthusiastic, and irreverent—never corporate or distant. bilibili speaks to its users as peers, using casual language, playful emojis, and community-first messaging. The vocabulary emphasizes creativity ("Up主", "创意"), community ("社区", "粉丝"), and joy ("欢乐", "干杯"). Example sentence in brand voice: "这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主——大家可以在这里找到许多欢乐。" (Here you'll find timely anime releases, an active ACG community, and creative creators—everyone can find joy here.)

Colors

The color system is built on a light, neutral foundation (#f1f2f3 surface, #18191c on-surface text) that ensures legibility and reduces visual fatigue during long browsing sessions. Two bold accent colors drive interaction and emotional engagement: Primary cyan (#00aeec) is used exclusively for call-to-action buttons, active navigation states, and interactive elements—it conveys trust and digital energy. Secondary magenta (#ff6699) appears on featured content badges, trending indicators, and secondary CTAs, adding playful contrast and drawing attention to community highlights. Tertiary orange (#ffa500) is reserved for special promotions and limited-time events, creating urgency without overwhelming the interface.

The surface stack uses a 6-step grayscale progression (#f6f7f8 → #c9ccd0) fo

Typography

The type system uses PingFang SC as the primary font family, with system fallbacks (-apple-system, BlinkMacSystemFont, Helvetica Neue) ensuring consistent rendering across devices and regions. The hierarchy spans from display (56px, 700 weight) for hero headlines down to label-sm (12px, 500 weight) for metadata and timestamps. Body text is set at 16px with 400 weight and 24px line-height (1.5 ratio), providing comfortable reading rhythm for long-form content descriptions and comments. Headlines use tighter line-height (1.22–1.33 ratio) and negative letter-spacing (-0.01em to -0.02em) to create visual impact and hierarchy. For small labels over busy backgrounds (e.g., view counts on video thumbnails), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. The 500-weight Harmo

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered on desktop and full-width on mobile. The gutter spacing is consistently 24px between columns and sections, creating a breathing room that prevents visual congestion. The spacing scale follows a 8px unit system: xs (4px) for micro-interactions, sm (8px) for component padding, md (16px) for section padding, lg (24px) for major section separation, and xl (32px) for hero-to-content transitions. Container padding uses lg (24px) on desktop, reducing to md (16px) on tablets and sm (8px) on mobile to maintain proportional margins. The header is fixed at the top with a z-index of 100, and the main feed uses a 3-column layout for video cards on desktop (collapsing to 2 columns at 1024px and 1 column below 768px). White-space i

Elevation & Depth

Depth is conveyed through a subtle shadow system rather than color shifts, maintaining the light, airy aesthetic. The elevation scale uses three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for subtle card backgrounds and input fields, md (0 2px 8px rgba(0, 0, 0, 0.08)) for standard cards and dropdown panels, and lg (0 3px 8px rgba(0, 0, 0, 0.15)) for modals, popovers, and hover states on elevated surfaces. Cards use md elevation by default and transition to lg on hover (200ms ease-in-out), creating a tactile sense of lift. Modals layer a semi-transparent overlay (rgba(24, 25, 28, 0.4)) with a 4

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are subtle enough to feel modern and efficient, yet soft enough to maintain approachability and reduce visual harshness. Buttons and interactive elements use 8px border-radius (lg), creating a friendly, clickable appearance without appearing cartoonish. Cards and containers use 8px (lg) for standard content and 12px (xl) for featured/hero sections, establishing a clear visual hierarchy through scale. Input fields and form elements use 4px (DEFAULT), maintaining a compact, functional appearance that doesn't compete with con

Components

Action Elements Buttons follow a three-tier system: primary (cyan #00aeec, 36px height, 8px 16px padding, 8px radius) for main CTAs like "立即登录" (Sign In Now) and "投稿" (Upload), secondary (transparent with 1px outline, 36px height) for alternative actions like "点我注册" (Register), and tertiary (magenta #ff6699, 36px height) for promotional or secondary CTAs. All buttons use label-md typography (14px, 500 weight) and transition background-color over 200ms on hover. Primary buttons darken to #0099cc on hover, secondary buttons gain a surface-container-high background, and tertiary buttons shift to #e6338f. Active/pressed states apply transform: scale(0.95) with a 100ms transition, providing tactile feedback.

Containers & Surfaces Cards use 16px padding (md), 8px border-radius (lg), and

Do's and Don'ts

**Do**

• Do use primary cyan (#00aeec) exclusively for main CTAs and active states—never use it for decorative elements or backgrounds.
• Do maintain 24px gutter spacing between major sections and 16px padding inside cards to preserve the clean, breathing aesthetic.
• Do apply 200ms transitions on all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.
• Do use PingFang SC typography for all text to maintain cultural authenticity and optimal rendering for Chinese characters.
• Do layer cards and modals using the elevation scale (sm/md/lg) rather than color shifts to preserve the light, minimal aesthetic.
• Do use label-md (14px, 500 weight) for all button text and label-sm (12px, 500 weight) for metadata and timestamps to establish clear visual hierarchy.

**Don't**

• Don't use secondary magenta (#ff6699) or tertiary orange (#ffa500) on primary CTAs—reserve them for badges, secondary actions, and promotional content only.
• Don't apply border-radius greater than 12px on any component; excessive rounding conflicts with the soft-technical aesthetic and reads as cartoonish.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur values greater than 4px; the design system prioritizes subtlety and clarity over dramatic depth.
• Don't set line-height below 1.5 for body text (16px); tighter spacing reduces readability and contradicts the accessible, community-first philosophy.
• Don't mix font families within a single component; always use PingFang SC with system fallbacks to ensure consistent rendering across regions and devices.
• Don't apply more than one accent color (primary, secondary, or tertiary) to a single interactive element; color should signal a single, clear action or state.