Disney Plus

미드나이트 캔버스 + 오로라 틸 + 시네마틱 히어로와 개인화 브랜드 레일

서양미디어소비자차가운modern-minimal고딕comfortablesoftlayered다크공식한글 지원출시 2019개정 2026

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

Brand DNA

브랜드 DNA

브랜드명: Disney Plus (Disney+)
한 줄 정체성: Disney·Pixar·Marvel·Star Wars·National Geographic에 Hulu·ESPN까지 연결하는 디즈니의 글로벌 스트리밍 허브
공식 디자인 철학: 2026 제품 개편의 방향인 개인화·쉬운 탐색·시네마틱 콘텐츠 집중을 통해 보고 싶은 이야기에 더 빨리 도달하게 한다.
시그니처 요소 1개: 미드나이트 캔버스(#040714) 위 오로라 틸(#02D6E8), 풀블리드 히어로와 동적으로 확장되는 브랜드 레일

Tone & Mood

톤 & 무드

핵심 키워드 3개: 마법, 시네마틱, 프리미엄
무드 설명: 거의 검정에 가까운 미드나이트 네이비가 UI를 뒤로 물리고 작품 이미지를 전면에 세운다. 2024년 도입한 블루-그린 ‘Aurora’와 2026년의 개인화 탭·동적 브랜드 레일·세로형 포스터가 새 홈 경험을 구분한다.
비주얼 스타일: 모던 미니멀 + 시네마틱
밀도(Density): Comfortable
모서리 성향: Soft (6~8px)
평면성: Layered — 작품 카드 hover의 확대·그림자와 선택 항목의 얇은 오로라 포커스 링

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Aurora: 기존 Disney+ Blue와 Hulu Green을 결합한 2024 리브랜딩 색 */
  --color-primary-50:  #E7FCFE;
  --color-primary-100: #BDF7FA;
  --color-primary-200: #86EDF3;
  --color-primary-300: #4DE1EA;
  --color-primary-400: #20D7E3;
  --color-primary-500: #02D6E8;   /* Aurora 기본 액센트 */
  --color-primary-600: #00AFC2;
  --color-primary-700: #008998;
  --color-primary-800: #076975;
  --color-primary-900: #064A54;

  /* Secondary / 브랜드 허브 */
  --color-secondary-500: #33DDFF; /* CTA·활성 상태의 전기빛 시안 */
  --disney:   linear-gradient(145deg, #15275B, #071E41);
  --pixar:    linear-gradient(145deg, #222B43, #0D1018);
  --marvel:   linear-gradient(145deg, #E02527, #7B0714);
  --starwars: linear-gradient(145deg, #171717, #070707);
  --natgeo:   linear-gradient(145deg, #D2A914, #372D08);
  --hulu:     linear-gradient(145deg, #173E2B, #081B12);
  --fx:       linear-gradient(145deg, #2A2A2A, #080808);
  --espn:     linear-gradient(145deg, #A80B1D, #45030B);
  --abc:      linear-gradient(145deg, #24313A, #07090B);

  /* Neutral - 어두운 극장형 위계 */
  --color-neutral-0:    #010104;
  --color-neutral-50:   #040714;       /* 페이지 캔버스 */
  --color-neutral-100:  #0E0B14;       /* 섹션 구분 */
  --color-neutral-200:  #1A1D29;       /* 상승 표면 */
  --color-neutral-300:  #282A36;
  --color-neutral-500:  #5F616B;
  --color-neutral-700:  #92949D;
  --color-neutral-800:  #CACCD2;
  --color-neutral-900:  #F9F9F9;
  --color-neutral-1000: #FFFFFF;

  /* Semantic */
  --color-success-bg: rgba(64,200,120,0.14);
  --color-success-fg: #5DE08C;
  --color-warning-bg: rgba(255,190,64,0.14);
  --color-warning-fg: #FFC65C;
  --color-error-bg:   rgba(255,88,96,0.14);
  --color-error-fg:   #FF747B;
  --color-info-bg:    rgba(2,214,232,0.14);
  --color-info-fg:    #33DDFF;

  /* Surface */
  --bg-base:     #040714;
  --bg-subtle:   #0E0B14;
  --bg-elevated: #1A1D29;
  --bg-overlay:  rgba(4,7,20,0.86);

  /* Text */
  --text-primary:    #F9F9F9;
  --text-secondary:  #CACCD2;
  --text-tertiary:   #92949D;
  --text-on-primary: #041015;
  --text-disabled:   #5F616B;

  /* Border */
  --border-default: rgba(255,255,255,0.15);
  --border-subtle:  rgba(255,255,255,0.08);
  --border-strong:  rgba(255,255,255,0.32);
  --border-focus:   #33DDFF;

  /* Aurora */
  --gradient-aurora: linear-gradient(135deg, #33DDFF 0%, #02D6E8 46%, #0A7F88 100%);
  --shadow-tile-glow: 0 0 0 2px rgba(51,221,255,0.62), 0 12px 30px rgba(2,214,232,0.18);
}

Typography

타이포그래피

폰트 페어링:
- 영문: Inspire DTC (Disney 전용 서체) / Avenir Next / 시스템 sans-serif 폴백
- 'Disney+' 워드마크: 전용 Disney 스크립트 로고 — 일반 이탤릭 텍스트로 재조판하지 않음
- 한글: 시스템 UI sans-serif / Pretendard / Noto Sans KR 폴백
위계:
- Display (Hero 타이틀): 48px / 900 / 1.1 / -0.025em
- H1: 32px / 800 / 1.2 / -0.02em
- H2 (섹션): 20px / 700 / 1.3 / -0.015em
- H3 (자켓 타이틀): 14px / 700 / 1.4 / -0.005em
- Body Large: 16px / 500 / 1.55 / 0
- Body: 14px / 500 / 1.5 / 0
- Body Small (메타): 12px / 600 / 1.4 / 0
- Caption (배지/장르): 10px / 800 / 1.4 / 0.08em UPPERCASE

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: 64px; ``
Container: max-width 480px (모바일), 1440px (TV/웹)

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;     /* 자켓/타일 */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
--shadow-md: 0 4px 16px rgba(0,0,0,0.55);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.70);
--shadow-xl: 0 24px 64px rgba(0,0,0,0.78);
--shadow-tile-hover: 0 0 0 2px rgba(51,221,255,0.62), 0 12px 30px rgba(2,214,232,0.18);

Iconography

스타일: Outline (얇은 선) + Filled (재생/북마크)
Stroke 굵기: 1.75px
모서리 처리: Round
추천 라이브러리: Phosphor / Material Symbols Rounded

Component Guide

컴포넌트 가이드

Button

.btn { --spinner-color: var(--text-primary);
       font: 700 13px/1 'Inspire DTC','Avenir Next',sans-serif; letter-spacing: 0.01em;
       border-radius: 6px; padding: 11px 16px; border: 1px solid transparent;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       transition: background var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out); }
.btn:hover { transform: scale(1.025); }
.btn:active { transform: scale(0.98); }
.btn-primary { --spinner-color: #101116; background: var(--text-primary); color: #101116; }
.btn-primary:hover { background: #FFFFFF; }
.btn-secondary { background: rgba(255,255,255,0.14); color: var(--text-primary); border-color: var(--border-strong); backdrop-filter: blur(12px); }
.btn-secondary:hover { background: rgba(255,255,255,0.22); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: rgba(255,255,255,0.10); }
.btn-danger { background: var(--color-error-fg); color: #150305; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-subscribe { background: var(--color-secondary-500); color: var(--text-on-primary); padding: 13px 22px; font-weight: 800; }
.btn-subscribe:hover { background: var(--color-primary-500); }
.btn:disabled { opacity: 0.42; pointer-events: none; }
.btn.is-loading { color: transparent; position: relative; }
.btn.is-loading::after { content: ''; position: absolute; width: 13px; height: 13px; border: 2px solid var(--spinner-color); border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Input

.search-input { background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--text-primary); border-radius: 6px; padding: 10px 14px; font: 500 14px/1.4 inherit; }
.search-input::placeholder { color: var(--text-tertiary); }
.search-input:focus { outline: 0; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(51,221,255,0.18); }
.search-input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.search-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card

.content-card { background: var(--bg-elevated); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 2/3; position: relative; cursor: pointer; border: 1px solid var(--border-subtle); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.content-card:hover { transform: scale(1.045) translateY(-4px); box-shadow: var(--shadow-tile-hover); z-index: 5; }
.content-card:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.content-card.emphasized { box-shadow: var(--shadow-md); }
.content-card.outlined { background: transparent; border-color: var(--border-strong); }
.brand-tile { min-width: 150px; aspect-ratio: 1.8/1; border-radius: var(--radius-md); display: grid; place-items: center; color: #fff; border: 1px solid var(--border-default); font: 800 12px/1 inherit; letter-spacing: 0.06em; cursor: pointer; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.brand-tile:hover { transform: scale(1.035); box-shadow: var(--shadow-tile-hover); }
.brand-tile.disney { background: var(--disney); }
.brand-tile.pixar  { background: var(--pixar); }
.brand-tile.marvel { background: var(--marvel); }
.brand-tile.starwars { background: var(--starwars); }
.brand-tile.natgeo { background: var(--natgeo); }
.brand-tile.hulu { background: var(--hulu); }
.brand-tile.fx { background: var(--fx); }
.brand-tile.espn { background: var(--espn); }
.brand-tile.abc { background: var(--abc); }
.billboard { position: relative; min-height: 420px; background-size: cover; overflow: hidden; }
.billboard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,7,20,.96) 0%, rgba(4,7,20,.54) 48%, transparent 72%), linear-gradient(0deg, var(--bg-base) 0%, transparent 34%); }

Badge / Tag

.tag { padding: 2px 8px; border-radius: 4px; font: 800 10px/1.4 inherit; letter-spacing: 0.08em; text-transform: uppercase; }
.tag-original { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.tag-imax     { background: rgba(4,7,20,.72); color: var(--color-secondary-500); border: 1px solid var(--color-secondary-500); }
.tag-new      { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-4k       { background: rgba(255,255,255,0.15); color: var(--text-primary); backdrop-filter: blur(4px); }

Navigation

.app-nav { background: linear-gradient(180deg, rgba(4,7,20,.98) 0%, rgba(4,7,20,.76) 100%); padding: 12px 20px; display: flex; align-items: center; gap: 22px; position: sticky; top: 0; z-index: 20; backdrop-filter: blur(16px); }
.app-nav .hub-tabs { align-self: stretch; display: flex; align-items: center; gap: 22px; }
.app-nav .item { height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent; font: 700 13px/1.4 inherit; color: var(--text-tertiary); cursor: pointer; }
.app-nav .item:hover { color: var(--text-primary); }
.app-nav .item.active { color: var(--text-primary); border-bottom-color: var(--color-primary-500); }
.app-nav .profile { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--gradient-aurora); border: 2px solid rgba(255,255,255,.8); }

Motion

--duration-fast: 150ms;
--duration-base: 280ms;
--duration-slow: 500ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-magic: cubic-bezier(0.34, 1.56, 0.64, 1);

Anti-patterns

1. 순흑(#000)으로 모든 표면을 평평하게 만들지 않는다 — #040714와 #0E0B14의 미세한 깊이를 유지한다. 2. 2024년 이전의 로열 블루만 주 액센트로 사용하지 않는다 — 현재 브랜드 포인트는 블루와 Hulu Green이 결합된 Aurora다. 3. Disney+ 전용 워드마크를 일반 이탤릭 폰트로 재조판하거나, 아크와 플러스의 비례를 임의로 바꾸지 않는다. 4. 브랜드 허브를 일반 작품 포스터와 같은 세로형 카드로 만들지 않는다 — 넓고 낮은 독립 타일로 계층을 구분한다. 5. UI 장식이 작품 아트보다 강해지지 않게 한다 — 색은 활성 탭·상태 배지·CTA에 제한하고 콘텐츠를 주인공으로 둔다.

Disney Plus

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

출처