디자인 시스템 갤러리 ElevenLabs

ElevenLabs

두 개의 수직 바 + 웜 크롬 Sound Flow — 인간의 표현과 AI 정밀성의 결합

서양AI크리에이티브 도구복합modern-minimalhumanism고딕comfortableroundsubtle라이트다크공식한글 지원출시 2022개정 2025

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

Brand DNA

브랜드 DNA

  • 브랜드명: ElevenLabs
  • 한 줄 정체성: 음성·음악·에이전트·API를 하나의 연구 기반으로 연결하는 AI 오디오 플랫폼
  • 공식 디자인 철학: 검정과 흰색은 연구와 엔지니어링의 정밀성을, 전체 스펙트럼의 색은 기술이 가능하게 하는 인간 표현의 다양성을 상징
  • 시그니처 요소 1개: 숫자 11과 오디오 일시정지를 동시에 암시하는 두 개의 수직 바. 충분한 여백 안에 배치하고, 오디오 출력은 유기성과 공학적 정밀성을 결합한 다층의 Sound Flow로 시각화

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 정밀, 표현적, 인간적
  • 무드 설명: 흰 캔버스와 검정 구조가 연구 기업의 신뢰를 만들고, 웜 크롬 Sound Flow와 9개 표현색이 인간 음성의 깊이와 감정을 드러낸다. 기능 화면은 절제하되 브랜드 순간에는 색과 움직임을 선명하게 사용한다.
  • 비주얼 스타일: 모던 미니멀 + 휴머니즘
  • 밀도(Density): Comfortable — 로고와 핵심 메시지 주변에 넉넉한 여백을 두고 복잡한 오디오 정보를 명료하게 분리
  • 모서리 성향: Round (12~20px, 작은 컨트롤은 4~8px)
  • 평면성: Subtle — UI는 얕은 경계, Sound Flow는 투명 레이어로 깊이를 표현

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary / Neutral — 공식 N 스케일 */
  --color-primary-50:  #F2F2F2;
  --color-primary-100: #E5E5E5;
  --color-primary-200: #DCDCDC;
  --color-primary-300: #BDBDBD;
  --color-primary-400: #949494;
  --color-primary-500: #767676;
  --color-primary-600: #6E6E6E;
  --color-primary-700: #525252;
  --color-primary-800: #3D3D3D;
  --color-primary-900: #000000;

  /* Neutral alias */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F2F2F2;
  --color-neutral-100:  #E5E5E5;
  --color-neutral-200:  #DCDCDC;
  --color-neutral-300:  #BDBDBD;
  --color-neutral-400:  #949494;
  --color-neutral-500:  #767676;
  --color-neutral-600:  #6E6E6E;
  --color-neutral-700:  #525252;
  --color-neutral-800:  #464646;
  --color-neutral-900:  #3D3D3D;
  --color-neutral-950:  #292929;
  --color-neutral-1000: #000000;

  /* Expressive — Sound Flow용 9개 공식 X 틴트 */
  --color-expressive-purple: #B951FB;
  --color-expressive-magenta: #EC5CDB;
  --color-expressive-red: #FE451D;
  --color-expressive-orange: #FF6E1D;
  --color-expressive-yellow: #F5F15C;
  --color-expressive-green: #49F28D;
  --color-expressive-teal: #50F8D4;
  --color-expressive-cyan: #1AC6F6;
  --color-expressive-blue: #2857FF;

  /* Semantic — 배경 200 / 텍스트 800 조합 */
  --color-success-bg: #A7F3CC;
  --color-success-fg: #065F41;
  --color-warning-bg: #F6F092;
  --color-warning-fg: #7D5316;
  --color-error-bg:   #FDCDCB;
  --color-error-fg:   #96231E;
  --color-info-bg:    #C8D5F4;
  --color-info-fg:    #384094;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F2F2F2;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(0,0,0,0.60);

  /* Text */
  --text-primary:    #000000;
  --text-secondary:  #525252;
  --text-tertiary:   #6E6E6E;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #949494;

  /* Border */
  --border-default: #DCDCDC;
  --border-subtle:  #E5E5E5;
  --border-strong:  #BDBDBD;
  --border-focus:   #000000;
}

[data-theme="dark"] {
  --bg-base: #000000;
  --bg-subtle: #191919;
  --bg-elevated: #292929;
  --text-primary: #FFFFFF;
  --text-secondary: #E5E5E5;
  --text-tertiary: #BDBDBD;
  --border-default: #3D3D3D;
  --border-subtle: #292929;
  --border-strong: #525252;
  --border-focus: #FFFFFF;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문 헤딩·UI: Eleven Semi Condensed — 로고의 수직성과 각진 곡선을 이어받은 브랜드 전용 컷
    • 영문 본문: Eleven Normal — 낮은 획 대비와 휴머니스트 구조의 기능적 컷
    • 비라틴 문자: Noto Sans 계열, 다국어 입력 필드는 성능을 위해 system-ui
    • 협업 폴백: Roboto (Google Workspace), Arial (웹·기타 플랫폼)
  • 위계:
    • Display: 72px / Bold / 0.96 / -0.04em — Eleven Semi Condensed
    • H1: 48px / Bold / 1.02 / -0.035em — Eleven Semi Condensed
    • H2: 36px / Bold / 1.08 / -0.025em — Eleven Semi Condensed
    • H3: 24px / Bold / 1.15 / -0.015em — Eleven Semi Condensed
    • Body Large: 18px / Normal / 1.55 / 0.01em — Eleven Normal
    • Body: 16px / Normal / 1.55 / 0.01em — Eleven Normal
    • Body Small: 14px / Normal / 1.5 / 0.01em — Eleven Normal
    • Caption/UI: 12px / Medium / 1.4 / 0.02em — Eleven Semi Condensed
    • Expressive UI: 12px / Bold / 1.2 / 0.12em / uppercase — 짧은 마케팅 인터랙션에만 제한

Spacing

스페이싱

  • Base unit: 4px
  • 토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; ``
  • Container: max-width 1200px (랜딩), 720px (작업), 좌우 패딩 24px

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-2xl: 28px;
--radius-full: 999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 8px 24px rgba(0,0,0,0.07);
--shadow-lg: 0 24px 64px rgba(0,0,0,0.12);

sm은 고정 UI, md는 오버레이 액션 바, lg는 모달과 Sound Flow 위 반투명 패널에만 제한적으로 사용한다.

Iconography

Iconography

  • 스타일: Outline — 장식보다 즉시 이해되는 관습적 메타포와 최소 요소를 우선
  • Stroke 굵기: 32px 원본 그리드 2px, 기본 24px 아이콘은 1.5px (16px=1px, 64px=4px)
  • 모서리 처리: Subtle Round — 끝점과 코너에 반원·완전 원형 라운딩
  • 추천 라이브러리: 전용 ElevenLabs 아이콘 우선, 대체 시 Lucide를 동일 그리드와 stroke로 조정

Component Guide

컴포넌트 가이드

Button

.btn { min-height: 40px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font: 500 14px/1 'Eleven Semi Condensed',Arial,sans-serif; transition: background 120ms ease,color 120ms ease,transform 120ms ease; cursor: pointer; }
.btn-primary { background: #000; color: #fff; border-color: #000; }
.btn-primary:hover { background: #292929; }
.btn-primary:active { transform: translateY(1px); background: #3D3D3D; }
.btn-secondary { background: var(--bg-base); color: var(--text-primary); }
.btn-secondary:hover,.btn-ghost:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-danger { background: var(--color-error-fg); color: #fff; border-color: transparent; }
.btn:disabled,.btn.is-loading { opacity: .42; pointer-events: none; }

Input / Omnibox

.input { width: 100%; padding: 11px 14px; background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-md); font: 400 15px/1.5 'Eleven',Arial,sans-serif; color: var(--text-primary); }
.input:focus { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
.omnibox { padding: 20px; border: 1px solid var(--border-default); border-radius: var(--radius-2xl); background: var(--bg-elevated); box-shadow: var(--shadow-md); }

Card / Action bar

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 20px; }
.card-emphasis { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.card-outlined { background: transparent; }
.action-bar { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: color-mix(in srgb,var(--bg-elevated) 88%,transparent); backdrop-filter: blur(12px); }
.play { width: 40px; height: 40px; border: 0; border-radius: var(--radius-full); background: #000; color: #fff; display: grid; place-items: center; }

Badge / Tag

.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-full); font: 500 12px/1.3 'Eleven Semi Condensed',Arial,sans-serif; }
.tag-solid { background: #000; color: #fff; }
.tag-subtle { background: var(--bg-subtle); color: var(--text-secondary); }
.tag-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-default); }

Navigation

.topbar { min-height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 24px; background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.brand-mark { display: inline-flex; align-items: center; gap: 5px; }
.brand-mark::before,.brand-mark::after { content: ""; width: 4px; height: 22px; background: var(--text-primary); }
.topbar a { color: var(--text-secondary); text-decoration: none; font: 500 14px/1 'Eleven Semi Condensed',Arial,sans-serif; }
.topbar a[aria-current="page"] { color: var(--text-primary); }

Motion

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 480ms;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

기능 전환은 짧고 직접적으로, 브랜드 모션은 Sound Flow의 resting→reactive 상태와 자막·Chime·Echo가 오디오 리듬에 동기화되도록 설계한다. 숫자 duration은 제품 구현용 권장값(추정)이다.

Anti-patterns

Anti-patterns

1. 두 바 심볼을 11, II 같은 텍스트로 재제작하거나 워드마크 높이에 맞춰 변형하지 않는다. 2. 로고에 그림자·외곽선·회전·임의 색을 적용하거나 비율을 늘이지 않는다. 3. 한 화면에 Sound Flow를 여러 개 겹치거나 비공식 색을 사용하거나 이미지·영상 위에 직접 레이어링하지 않는다. 4. Sound Flow 위에 대비가 부족한 타이포그래피를 놓아 그래픽과 문장이 서로 경쟁하게 하지 않는다. 5. Eleven 컷의 대소문자·굵기·행간·자간을 한 문장 안에서 임의로 혼합하거나, 본문 전체를 표현적 대문자로 쓰지 않는다.

Sources

출처

  1. https://elevenlabs.io/