SoundCloud

오렌지 파형(#FF5500)과 댓글 핀이 박힌 가로 파형 플레이어가 한눈에 찍히는 시그니처

서양미디어소셜따뜻한modern-minimal고딕comfortablesoftflat라이트다크한글 지원출시 2007개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: SoundCloud
한 줄 정체성: 크리에이터가 직접 업로드하는 오디오 소셜 플랫폼 — 데모·믹스테이프의 본진
공식 디자인 철학: "Music from a different place" — 크리에이터 친화 + 파형 시각화 우선
시그니처 요소 1개: 오렌지(#FF5500) 파형 플레이어 + 댓글 핀이 파형 위 시각 좌표로 박혀있는 인터랙션. 다른 음악 서비스에는 없는 사운드클라우드만의 시그니처

Tone & Mood

톤 & 무드

핵심 키워드 3개: 크리에이터, 파형, 활기참
무드 설명: 웹은 라이트·다크 테마를 모두 제공하고 모바일 앱은 다크가 기본이다. 이 기본 문서는 밝은 중성 캔버스 위에 오렌지 재생 상태, 촘촘한 메타정보, 파형과 타임스탬프 댓글이 선명하게 떠오르는 웹 UI를 기준으로 한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable
모서리 성향: Soft (4~8px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - SoundCloud Orange */
  --color-primary-50:  #FFEEE0;
  --color-primary-100: #FFD2B0;
  --color-primary-200: #FFB17A;
  --color-primary-300: #FF8B44;
  --color-primary-400: #FF7522;
  --color-primary-500: #FF5500;   /* SC Orange */
  --color-primary-600: #E04A00;
  --color-primary-700: #B23A00;
  --color-primary-800: #802900;
  --color-primary-900: #4D1800;

  /* Secondary - Waveform played part (faded orange) */
  --color-secondary-500: #FFB088;

  /* Neutral - SC light scale */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F2F2F2;
  --color-neutral-200:  #E5E5E5;
  --color-neutral-300:  #CCCCCC;
  --color-neutral-500:  #999999;
  --color-neutral-700:  #666666;
  --color-neutral-800:  #444444;
  --color-neutral-900:  #333333;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F7EC;
  --color-success-fg: #1FA756;
  --color-warning-bg: #FFF1D9;
  --color-warning-fg: #B27212;
  --color-error-bg:   #FCE0E0;
  --color-error-fg:   #C53030;
  --color-info-bg:    #E0F0FE;
  --color-info-fg:    #2D7DD2;

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

  /* Text */
  --text-primary:    #333333;
  --text-secondary:  #666666;
  --text-tertiary:   #999999;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #CCCCCC;

  /* Border */
  --border-default: #E5E5E5;
  --border-subtle:  #F2F2F2;
  --border-strong:  #CCCCCC;
  --border-focus:   #FF5500;
}

[data-theme="dark"] {
  --bg-base: #1A1A1A;
  --bg-subtle: #222222;
  --bg-elevated: #2A2A2A;
  --bg-overlay: rgba(0,0,0,0.72);
  --text-primary: #F2F2F2;
  --text-secondary: #CCCCCC;
  --text-tertiary: #999999;
  --text-on-primary: #FFFFFF;
  --text-disabled: #666666;
  --border-default: #333333;
  --border-subtle: #2A2A2A;
  --border-strong: #555555;
  --border-focus: #FF5500;
}

Typography

타이포그래피

폰트 페어링:
- 영문: Inter / Interstate 폴백
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 36px / 800 / 1.15 / -0.02em
- H1: 24px / 700 / 1.25 / -0.005em
- H2: 18px / 700 / 1.3 / 0
- H3: 14px / 600 / 1.35 / 0
- Body Large: 14px / 400 / 1.5 / 0
- Body: 13px / 400 / 1.45 / 0
- Body Small: 12px / 500 / 1.4 / 0
- Caption: 10px / 500 / 1.3 / 0.02em

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 20px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 1240px, 좌우 패딩 20px

Border Radius

--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 16px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 12px 24px rgba(0,0,0,0.12);
--shadow-wave: 0 0 0 2px rgba(255,85,0,0.20);  /* 파형 핀 글로우 */

Iconography

스타일: Outline + Filled 혼합 (Play는 Filled)
Stroke 굵기: 1.5px
모서리 처리: Round
추천 라이브러리: Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 12px/1 Inter, 'Pretendard', sans-serif; border-radius: 3px; padding: 7px 14px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.btn-primary { background: var(--color-primary-500); color: #fff; border-color: var(--color-primary-500); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-secondary:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn-play { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-500); color: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: var(--shadow-md); }
.btn-follow { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); padding: 6px 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.btn-follow.active { background: var(--color-primary-500); color: #fff; border-color: var(--color-primary-500); }

Input

.input { background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 3px; padding: 8px 12px 8px 36px; color: var(--text-primary); font: 400 13px/1.2 inherit; }
.input:focus { outline: none; border-color: var(--color-primary-500); background: var(--bg-elevated); }

Card (Track row with waveform)

.track { display: grid; grid-template-columns: 162px 1fr; gap: 14px; padding: 14px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; }
.track .art { aspect-ratio: 1; background: linear-gradient(135deg,#FF8533,#FF5500); border-radius: 2px; position: relative; }
.track .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.track .head { display: flex; align-items: center; gap: 8px; }
.track .head .play { width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-500); color: #fff; display: grid; place-items: center; font-size: 13px; }
.track .head .meta { font: 500 12px/1.2 inherit; color: var(--text-secondary); }
.track h3 { margin: 0; font: 700 16px/1.3 inherit; color: var(--text-primary); }
.track .by { font: 400 12px/1.3 inherit; color: var(--text-secondary); }
.track .waveform { height: 56px; background: var(--bg-subtle); border-radius: 2px; position: relative; padding: 0 4px; display: flex; align-items: center; gap: 1px; }
.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 4px; padding: 14px; }
.card-elevated { box-shadow: var(--shadow-sm); }

Badge / Tag

.tag { padding: 2px 8px; border-radius: 2px; font: 500 11px/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-outline { border: 1px solid var(--border-default); color: var(--text-secondary); }
.tag-pro     { background: #000; color: #fff; font-weight: 700; }

Navigation (Top bar)

.topbar { background: var(--color-primary-500); padding: 0 20px; height: 46px; display: flex; align-items: center; gap: 20px; color: #fff; }
.topbar .brand { font: 800 18px/1 inherit; }
.topbar .nav { display: flex; gap: 22px; font: 500 13px/1 inherit; }
.topbar .nav .a { color: rgba(255,255,255,0.85); cursor: pointer; }
.topbar .nav .a.active { color: #fff; font-weight: 700; }
.topbar .search { flex: 1; max-width: 480px; background: #fff; border-radius: 3px; padding: 6px 12px; color: #999; }

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

Anti-patterns

1. 파형(waveform) 없이 트랙을 표시 금지 — SC의 정체성 2. 파형 색을 오렌지 외 색으로 변경 금지 — #FF5500 + faded #FFB088이 표준 3. 테마를 바꿀 때 파형·본문·경계선의 대비를 함께 전환하지 않는 패턴 금지 4. 카드 라운드 12px 이상 사용 금지 — 2~4px Sharp~Soft 5. 댓글 핀을 텍스트 리스트로만 표시 금지 — 파형 위 시각 좌표가 시그니처

SoundCloud

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

출처