Facebook

Facebook 블루 + 스토리 레일 + 카드형 소셜 피드

서양소셜소비자차가운modern-minimal고딕comfortableroundflat라이트다크공식한글 지원출시 2004개정 2024

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

Brand DNA

브랜드 DNA

브랜드명: Facebook (Meta Family)
한 줄 정체성: 2004년 시작한 글로벌 1위 SNS — 친구/가족 단위 일상 공유 피드
공식 디자인 철학: Facebook Design System — "Meet people where they are"
시그니처 요소 1개: Facebook 블루(#0866FF, 2023 리브랜드) — 둥근 'f' 아바타 로고 + 카드 단위 피드 + 좋아요/댓글/공유 3분할. 2004년부터 이어진 카드 피드 메타포

Tone & Mood

톤 & 무드

핵심 키워드 3개: 친근, 정보, 공유
무드 설명: 옅은 회색 캔버스(#F0F2F5) + 흰 카드 피드 + 페이스북 블루 액센트. 카드는 라운드 10px, 그림자 거의 없음. 정보 위계는 "사용자 아바타 → 콘텐츠 → 액션 3분할" 일관 구조.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable — 카드 패딩 12~14px
모서리 성향: Round (8~12px, 아바타는 풀필)
평면성: Flat — 상단 헤더만 sm 그림자

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Facebook Blue (2023 신규) */
  --color-primary-50:  #E7F3FF;
  --color-primary-100: #C2DBFE;
  --color-primary-200: #8DB8FB;
  --color-primary-300: #5894F8;
  --color-primary-400: #357FF6;
  --color-primary-500: #0866FF;   /* Facebook Blue */
  --color-primary-600: #0556CC;
  --color-primary-700: #0445A3;
  --color-primary-800: #043178;
  --color-primary-900: #02194D;

  /* Secondary - Reactions */
  --color-like:    #2078F4;
  --color-love:    #F33E58;
  --color-haha:    #F7B125;
  --color-wow:     #F7B125;
  --color-sad:     #F7B125;
  --color-angry:   #E9710F;

  /* Neutral - Facebook design */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F8FA;
  --color-neutral-100:  #F0F2F5;     /* page bg */
  --color-neutral-200:  #E4E6EB;     /* border */
  --color-neutral-300:  #CED0D4;
  --color-neutral-500:  #8A8D91;
  --color-neutral-700:  #65676B;     /* text secondary */
  --color-neutral-800:  #3A3B3C;
  --color-neutral-900:  #050505;     /* text primary */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F4EA;
  --color-success-fg: #1B8E36;
  --color-warning-bg: #FFF3CD;
  --color-warning-fg: #B25800;
  --color-error-bg:   #FCE4E4;
  --color-error-fg:   #FA383E;
  --color-info-bg:    #E7F3FF;
  --color-info-fg:    #0866FF;

  /* Surface */
  --bg-base:     #F0F2F5;             /* page */
  --bg-subtle:   #F7F8FA;
  --bg-elevated: #FFFFFF;             /* card */
  --bg-overlay:  rgba(5,5,5,0.45);

  /* Text */
  --text-primary:    #050505;
  --text-secondary:  #3A3B3C;
  --text-tertiary:   #65676B;
  --text-on-primary: #FFFFFF;
  --text-link:       #0866FF;
  --text-disabled:   #8A8D91;

  /* Border */
  --border-default: #E4E6EB;
  --border-subtle:  #F0F2F5;
  --border-strong:  #CED0D4;
  --border-focus:   #0866FF;
}

[data-theme="dark"] {
  --bg-base: #18191A;
  --bg-subtle: #242526;
  --bg-elevated: #242526;
  --text-primary: #E4E6EB;
  --text-secondary: #B0B3B8;
  --border-default: #3A3B3C;
}

Typography

타이포그래피

폰트 페어링:
- 영문: SF Pro Text (iOS) / Segoe UI (Windows) / Roboto (Android/Web) — 시스템 폰트 우선
- 한글: Pretendard / Noto Sans KR / Apple SD Gothic Neo (iOS) 폴백
위계:
- Display: 32px / 700 / 1.2 / -0.02em
- H1 (스토리/이벤트): 22px / 700 / 1.3 / -0.015em
- H2: 18px / 700 / 1.3 / -0.015em
- H3 (사용자 이름): 15px / 600 / 1.4 / -0.005em
- Body Large: 16px / 400 / 1.5 / -0.005em
- Body: 14px / 400 / 1.5 / 0
- Body Small (시간/메타): 12px / 500 / 1.4 / 0
- Caption: 11px / 600 / 1.4 / 0.02em

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 56px; ``
Container: max-width 480px (모바일), 600px (피드 카드 최대), 1280px (3컬럼 데스크톱)

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 8px;       /* 이미지/미디어 */
--radius-lg: 10px;      /* 카드 시그니처 */
--radius-xl: 16px;
--radius-full: 9999px;  /* 아바타, 검색바, 버튼 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);     /* 헤더 */
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 12px 28px rgba(0,0,0,0.15);

Iconography

스타일: Facebook UI Icons — Filled
Stroke 굵기: N/A (Filled)
모서리 처리: Round
추천 라이브러리: Facebook UI Icons / Phosphor Fill

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 14px/1 'SF Pro Text', Roboto, sans-serif; letter-spacing: -0.005em;
       border-radius: 6px; padding: 9px 16px; border: 0;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       transition: background 150ms ease; }
.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary { background: var(--bg-base); color: var(--text-primary); }
.btn-secondary:hover { background: var(--border-default); }
.btn-text { background: transparent; color: var(--text-secondary); font-weight: 600; padding: 9px 12px; }
.btn-text:hover { background: var(--bg-base); }
.btn-icon { background: var(--bg-base); width: 36px; height: 36px; padding: 0; border-radius: 9999px; }

Input

.search { background: var(--bg-base); border: 0; border-radius: 9999px; padding: 8px 14px; font: 500 13px/1.4 inherit; display: flex; align-items: center; gap: 8px; }
.search input { all: unset; flex: 1; }
.composer { background: var(--bg-elevated); border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 10px; }
.composer .ph { flex: 1; background: var(--bg-base); border-radius: 9999px; padding: 9px 14px; font: 500 13px/1.4 inherit; color: var(--text-tertiary); }

Card (Post)

.post { background: var(--bg-elevated); border-radius: var(--radius-lg); padding: 12px 14px 0; margin-bottom: 8px; }
.post .head { display: flex; align-items: center; gap: 10px; }
.post .head .avatar { width: 40px; height: 40px; border-radius: 9999px; background: var(--bg-base); }
.post .head .name { font: 600 14px/1.3 inherit; color: var(--text-primary); }
.post .head .meta { font: 500 12px/1.3 inherit; color: var(--text-tertiary); margin-top: 1px; }
.post .body { font: 400 14px/1.55 inherit; padding: 10px 0; color: var(--text-primary); }
.post .media { aspect-ratio: 16/9; border-radius: var(--radius-md); background: var(--bg-base); margin: 0 -14px 0; }
.post .actions { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 0; border-top: 1px solid var(--border-default); padding: 4px 0; font: 600 13px/1.4 inherit; color: var(--text-tertiary); }
.post .actions .btn { background: transparent; padding: 8px; border-radius: 6px; }
.post .actions .btn:hover { background: var(--bg-base); }

Badge / Tag

.tag { padding: 3px 10px; border-radius: 9999px; font: 600 12px/1.4 inherit; }
.tag-solid   { background: var(--color-primary-500); color: #fff; }
.tag-subtle  { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-live    { background: var(--color-error-fg); color: #fff; }
.reaction-bubble { background: #fff; box-shadow: var(--shadow-md); border-radius: 9999px; padding: 4px 8px; display: inline-flex; gap: 2px; }

Navigation (Top Tabs)

.navbar { background: #fff; padding: 8px 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 10; }
.navbar .logo { width: 36px; height: 36px; background: var(--color-primary-500); border-radius: 9999px; color: #fff; display: grid; place-items: center; font: 900 18px/1 inherit; letter-spacing: -0.05em; }
.tabbar { background: #fff; border-bottom: 1px solid var(--border-default); display: flex; padding: 0 8px; }
.tabbar .item { padding: 12px 16px; font: 600 13px/1 inherit; color: var(--text-tertiary); flex: 1; text-align: center; border-bottom: 3px solid transparent; }
.tabbar .item.active { color: var(--color-primary-500); border-bottom-color: var(--color-primary-500); }

Motion

--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 360ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* 리액션 팝업 */

Anti-patterns

1. Facebook 블루를 본문 텍스트에 사용 금지 — 링크/CTA만 2. 카드 모서리 16px 이상 라운드 금지 — Instagram/Meta 코퍼레이트 톤과 혼동 3. 좋아요/댓글/공유 외 액션을 강조 색으로 추가 금지 — 3분할 일관성 4. 한 화면에 카드 그림자 lg 이상 사용 금지 — Flat 톤 깨짐 5. 블루 단독을 헤더 배경에 칠하지 말 것 — 2020년 리브랜드 이후 흰 헤더 + 블루 로고

Facebook

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처