Bilibili

분홍 #FF6699 과 하늘색 #00AEEC 두 브랜드색, 안테나 달린 「작은 TV」 마크, 화면 위를 흘러가는 탄막(弹幕)

아시아미디어소셜복합modern-minimalhumanism고딕comfortablesoftsubtle라이트다크출시 2021개정 2023

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Bilibili (哔哩哔哩, 빌리빌리, 약칭 B站). 2009년 애니메이션·게임 팬 커뮤니티로 시작한 중국 최대 서브컬처 동영상 플랫폼.
한 줄 정체성: 영상 위로 시청자 댓글이 실시간으로 흘러가는 「탄막(弹幕)」 동영상 커뮤니티 — 보는 사람끼리 같은 장면에서 함께 반응한다.
공식 디자인 철학: 공개 디자인 시스템 사이트는 없다. 웹 홈 CSS 에 사내 스타일 라이브러리 @bilibili/b-style (v5.0.0) theme.css 가 그대로 실려 있고, 머리 주석이 "一套帮助快速交作业的样式库(과제를 빨리 끝내게 돕는 스타일 라이브러리)"다. 색 이름을 --brand_pink · --brand_blue 두 개로 못 박아 두고, 모든 색을 Pi0~Pi10 처럼 11단 팔레트에서 꺼내 쓴다. 사이트 제목 「哔哩哔哩 (゜-゜)つロ干杯~」의 이모티콘(건배!)이 브랜드 말투를 대표한다.
시그니처 요소 1개: 분홍 #FF6699 + 하늘색 #00AEEC 두 브랜드색과, 안테나 두 개가 달린 「작은 TV(小电视)」 마크. 2020년 11월 로고 개편에서 작은 TV 의 발이 사라지고 눈·입 선이 둥글어졌다(우설 uisdc 기사). 현행 워드마크는 Wikimedia Commons 기준 2023년부터 쓰는 4번째 로고.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 발랄함, 서브컬처, 참여형
무드 설명: 흰 바탕(#FFFFFF)과 옅은 회색 면(#F6F7F8) 위에 썸네일이 빽빽하게 깔리고, 색은 분홍(투고·구독·좋아요 같은 참여 행동)과 하늘색(링크·검색·선택 상태) 두 가지만 강조로 쓴다. 홈 상단에는 계절마다 바뀌는 일러스트 배너(오늘 날짜 기준 「2026 次元奇旅暑期狂欢节」)가 깔려 애니메이션 팬 사이트다운 분위기를 만든다. 영상 위로는 흰 글자에 검은 외곽선을 두른 탄막이 흘러간다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 (이모티콘·2233娘 마스코트·일러스트 배너)
밀도(Density): Comfortable — 카드 그리드는 촘촘하지만 제목 15px/22px, 카드 사이 20px 간격으로 숨 쉴 틈을 둔다.
모서리 성향: Soft (썸네일·버튼 6px, 카드·팝오버 8px, 칩 4px). 실측 빈도: 8px 60회 · 4px 51회 · 6px 35회
평면성: Subtle — 카드는 그림자 없이 평평하고, 팝오버·드롭다운만 넓게 퍼지는 옅은 그림자(0 0 30px rgba(0,0,0,.1))를 쓴다.

Color System

컬러 시스템 (CSS 변수)

www.bilibili.com 홈 CSS(index-c5e37698.css)에 실린 b-style v5 :root 팔레트 실측값. Primary 9단계는 분홍 팔레트 Pi1~Pi9(+50=Pi0)를 그대로 옮겼다. 투고 버튼만은 아직 예전 브랜드 분홍 #FB7299 를 하드코딩하고 있다(같은 CSS 안에 #FB7299 4회, #FF6699 4회).

:root {
  /* Primary - brand_pink (b-style Pi 팔레트) */
  --color-primary-50:  #FFF3F6;  /* Pi0 */
  --color-primary-100: #FFECF1;  /* Pi1 = brand_pink_thin — 분홍 옅은 면 */
  --color-primary-200: #FFD9E4;  /* Pi2 */
  --color-primary-300: #FFB3CA;  /* Pi3 = brand_pink_disabled */
  --color-primary-400: #FF8CB0;  /* Pi4 = brand_pink_hover */
  --color-primary-500: #FF6699;  /* Pi5 = brand_pink — 구독·좋아요·대회원 */
  --color-primary-600: #E84B85;  /* Pi6 = brand_pink_active */
  --color-primary-700: #D03171;  /* Pi7 */
  --color-primary-800: #AD1C5B;  /* Pi8 */
  --color-primary-900: #771141;  /* Pi9 */
  --color-primary-legacy: #FB7299;  /* 예전 브랜드 분홍 — 헤더 「投稿」 버튼 */

  /* Secondary - brand_blue (b-style Lb 팔레트) */
  --color-secondary-100: #DFF6FD;  /* Lb1 = brand_blue_thin */
  --color-secondary-400: #40C5F1;  /* Lb4 = hover */
  --color-secondary-500: #00AEEC;  /* Lb5 = brand_blue — 로고·링크·선택 상태 */
  --color-secondary-600: #008AC5;  /* Lb6 = active */
  --color-link:          #00699D;  /* Lb7 = text_link */

  /* Neutral - Ga 팔레트 */
  --color-neutral-0:    #FFFFFF;  /* Wh0 — bg1 */
  --color-neutral-50:   #F6F7F8;  /* Ga0 — bg2 */
  --color-neutral-100:  #F1F2F3;  /* Ga1 — bg3, line_light */
  --color-neutral-200:  #E3E5E7;  /* Ga2 — line_regular */
  --color-neutral-300:  #C9CCD0;  /* Ga3 — line_bold, text4 */
  --color-neutral-500:  #9499A0;  /* Ga5 — text3 */
  --color-neutral-700:  #61666D;  /* Ga7 — text2, 아이콘 */
  --color-neutral-900:  #18191C;  /* Ga10 — text1 */
  --color-neutral-1000: #000000;  /* Ba0 */

  /* Semantic - success_green / operate_orange / stress_red / brand_blue */
  --color-success-bg: #E4F8EA;  /* Gr1 */
  --color-success-fg: #2AC864;  /* Gr5 = success_green */
  --color-warning-bg: #FFEDE2;  /* Or1 */
  --color-warning-fg: #FF661A;  /* Or5 = operate_orange — 「1万点赞」 같은 추천 라벨 */
  --color-error-bg:   #FEECEA;  /* Re1 */
  --color-error-fg:   #F85A54;  /* Re5 = stress_red — 알림 숫자 배지 */
  --color-info-bg:    #DFF6FD;  /* Lb1 */
  --color-info-fg:    #00AEEC;  /* Lb5 */
  --color-pay:        #FFB027;  /* Ye5 = pay_yellow — 결제·충전 */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;            /* bg1 — 페이지 */
  --bg-subtle:   #F6F7F8;            /* bg2 — 채널 칩·검색창 */
  --bg-elevated: #FFFFFF;            /* bg1_float — 팝오버·카드 */
  --bg-overlay:  rgba(0, 0, 0, 0.5); /* (추정) 모달 딤 */

  /* Text 위계 */
  --text-primary:    #18191C;  /* text1 */
  --text-secondary:  #61666D;  /* text2 */
  --text-tertiary:   #9499A0;  /* text3 — UP 주 이름·날짜 */
  --text-on-primary: #FFFFFF;  /* text_white */
  --text-disabled:   #C9CCD0;  /* text4 */

  /* Border */
  --border-default: #E3E5E7;  /* line_regular */
  --border-subtle:  #F1F2F3;  /* line_light */
  --border-strong:  #C9CCD0;  /* line_bold */
  --border-focus:   #00AEEC;  /* (추정) 검색·입력 포커스는 brand_blue */
}

Typography

타이포그래피

폰트 페어링:
- 중국어(간체): HarmonyOS Sans SC (화웨이 무료 라이선스) — 홈 CSS 가 HarmonyOS_Regular·HarmonyOS_Medium 를 유니코드 구간별 woff2 로 셀프호스팅한다. 폴백 PingFang SC → Microsoft YaHei.
- 한글: 공식 한글 서체 없음. 한국어로 옮길 땐 Pretendard(SIL OFL)를 권장 (추정)
- 영문·숫자: HarmonyOS Sans 에 포함. 시스템 폴백 -apple-system, Helvetica Neue
위계 (b-style --v_fs_1~6 실측 + 카드 제목 변수):
- Display: 24px / 500 / 34px / 0 (--v_fs_1)
- H1: 18px / 500 / 26px / 0 (--v_fs_2)
- H2: 16px / 500 / 24px / 0 (--v_fs_3, 넓은 화면 카드 제목)
- H3: 15px / 500 / 22px / 0 (--title-font-size — 영상 카드 제목, 2줄 말줄임)
- Body Large: 14px / 400 / 20px / 0 (--v_fs_4)
- Body: 13px / 400 / 18px / 0 (--v_fs_5 — UP 주 이름·통계)
- Body Small: 12px / 400 / 17px / 0 (--v_fs_6)
- Caption: 11px / 400 / 14px / 0 (추정) — 추천 라벨·시간
굵기: Regular(400)·Medium(500) 두 가지. 제목도 500 에서 멈추고 700 은 거의 쓰지 않는다.
탄막: 25px(기본) 굵게, 흰 글자 + 검은 1px 외곽선(추정). 영상 위에서 가독성을 확보하는 유일한 장식.

Spacing

스페이싱

Base unit: 4px (컴포넌트 높이 토큰은 8px 단위: --v_height_xs~xl 16·24·32·40·48px)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: 홈 피드는 화면 폭에 맞춰 열 수가 바뀌는 반응형 그리드(1140~2200px 구간별 4~6열), 좌우 64px 안팎 여백 (추정). 카드 간격 20px (추정).

Border Radius

--radius-none: 0;
--radius-sm: 4px;      /* --v_radius_sm — 추천 라벨·칩 */
--radius-md: 6px;      /* --v_radius — 썸네일·채널 칩·검색창 */
--radius-lg: 8px;      /* --v_radius_md — 투고 버튼·팝오버 */
--radius-xl: 12px;     /* --v_radius_xl — 모달·큰 카드 (10px --v_radius_lg 도 있음) */
--radius-full: 9999px; /* 아바타·동그란 채널 아이콘 */

Shadow / Elevation

--shadow-none: none;                           /* 영상 카드 — 그림자 없이 평평 */
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);    /* 떠 있는 버튼·툴팁 */
--shadow-md: 0 0 30px rgba(0, 0, 0, 0.10);     /* 헤더 드롭다운·팝오버 (실측 최빈) */
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);   /* 큰 패널·모달 */
--shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.16);  /* (추정) 풀스크린 다이얼로그 */

Iconography

스타일: Outline 중심(헤더 메시지·동태·수집·역사 아이콘), 채널 진입 원형 아이콘과 작은 TV 마크는 Filled
Stroke 굵기: 1.5~2px (24px 그리드) (추정)
모서리 처리: Round — 작은 TV 마크처럼 끝을 둥글린다
추천 라이브러리: 사내 아이콘 셋(BDC/playdata_square_line 같은 이름으로 불러온다). 대체로는 Lucide(둥근 끝·2px)

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button (Primary / Secondary / Ghost / Danger)

.bl-btn { height: 34px; padding: 0 16px; border: 0; border-radius: var(--radius-lg); font: 500 14px/20px 'HarmonyOS Sans SC', 'PingFang SC', sans-serif; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background-color .3s; }
.bl-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }       /* 关注·投稿 */
.bl-btn--primary:hover { background: var(--color-primary-400); }                               /* hover 는 밝아진다 */
.bl-btn--primary:active { background: var(--color-primary-600); }
.bl-btn--secondary { background: var(--color-secondary-500); color: #fff; }                     /* 登录·확인 */
.bl-btn--secondary:hover { background: var(--color-secondary-400); }
.bl-btn--ghost { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.bl-btn--ghost:hover { background: var(--color-neutral-200); }
.bl-btn--danger { background: var(--color-error-fg); color: #fff; }
.bl-btn:disabled { background: var(--color-primary-300); cursor: not-allowed; }                 /* brand_pink_disabled */
.bl-btn.is-loading { opacity: .7; pointer-events: none; }
.bl-btn.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: bl-spin .8s linear infinite; }
@keyframes bl-spin { to { transform: rotate(360deg); } }

Input (헤더 검색창)

.bl-search { height: 32px; padding: 0 8px; border: 2px solid transparent; border-radius: var(--radius-md); background: var(--color-neutral-200); color: var(--text-primary); font-size: 14px; }  /* 실측: graph_bg_thick */
.bl-search:focus { outline: none; background: var(--bg-base); border-color: var(--border-focus); }
.bl-search.is-error { border-color: var(--color-error-fg); }
.bl-search:disabled { color: var(--text-disabled); background: var(--bg-subtle); }

Card (영상 카드)

.bl-vcard { background: transparent; }
.bl-vcard__cover { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-subtle); }
.bl-vcard__stats { position: absolute; left: 0; right: 0; bottom: 0; height: 38px; padding: 16px 8px 6px; background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.8)); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: space-between; }
.bl-vcard__title { margin-top: 8px; font-size: 15px; line-height: 22px; height: 44px; font-weight: 500; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-vcard__title:hover { color: var(--color-secondary-500); }
.bl-vcard__owner { margin-top: 4px; font-size: 13px; color: var(--text-tertiary); }
.bl-card--accent { background: var(--color-primary-100); border-radius: var(--radius-lg); padding: 16px; }
.bl-card--outlined { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 16px; }

Badge / Tag

.bl-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 4px; border-radius: var(--radius-sm); font-size: 12px; }
.bl-tag--solid { background: var(--color-primary-500); color: #fff; }                       /* 大会员·独家 */
.bl-tag--subtle { background: var(--color-warning-bg); color: var(--color-warning-fg); }    /* 「1万点赞」 추천 라벨 (실측 Or5/Or1) */
.bl-tag--outline { border: 1px solid var(--color-primary-500); color: var(--color-primary-500); }
.bl-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-error-fg); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }

Navigation (헤더 + 채널 칩)

.bl-header { height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 24px; background: transparent; color: #fff; font-size: 14px; }   /* 배너 위에 투명하게 겹친다 */
.bl-header.is-fixed { background: var(--bg-base); color: var(--text-primary); box-shadow: 0 2px 4px rgba(0,0,0,.08); }
.bl-upload { width: 90px; height: 34px; border-radius: var(--radius-lg); background: var(--color-primary-legacy); color: #fff; font-weight: 500; }   /* 실측 #FB7299 */
.bl-channel { height: 30px; line-height: 30px; padding: 0 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-secondary); font-size: 14px; transition: background-color .3s, color .3s; }
.bl-channel:hover { background: var(--color-neutral-200); color: var(--text-primary); }

Motion

--duration-fast: 200ms;   /* (추정) 아이콘 hover */
--duration-base: 300ms;   /* 실측 — 채널 칩·투고 버튼 background-color .3s */
--duration-slow: 500ms;   /* (추정) 배너 교차 전환 */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);  /* (추정) */
--ease-in-out: ease;                             /* 실측 transition 기본값 */

탄막은 영상 폭을 따라 오른쪽→왼쪽으로 일정 속도로 흘러간다(선형). 사용자 설정에서 속도·불투명도·표시 영역을 바꿀 수 있다.

Anti-patterns

1. 분홍과 하늘색 말고 세 번째 강조색을 버튼에 쓰지 않는다 — 주황(추천 라벨)·빨강(알림 숫자)·노랑(결제)은 상태 표시 전용이다. 2. 영상 카드에 테두리나 그림자를 두르지 않는다 — 썸네일 6px 모서리와 아래쪽 검은 그라디언트 위 흰 통계만으로 구분한다. 3. 썸네일 위 조회수·탄막 수를 그라디언트 없이 올리지 않는다 — rgba(0,0,0,.8) 로 내려가는 막이 흰 글자를 받친다. 4. 제목을 700 굵기로 올리지 않는다 — 500(Medium)이 최대, 2줄 말줄임 고정. 5. 작은 TV 마크의 안테나·눈을 빼거나 네모 모서리로 바꾸지 않는다 — 2020년 개편에서 발을 없애고 선 끝을 둥글린 모양이 현행이다.

Bilibili

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처