디자인 시스템 갤러리 Docker

Docker

고래 등 위 컨테이너 블록 + 도커 블루 + 컨테이너 그리드의 IaC 패키저

서양개발 도구인프라차가운modern-minimal고딕comfortablesoftflat라이트다크공식한글 지원출시 2013개정 2025

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

Brand DNA

브랜드 DNA

  • 브랜드명: Docker
  • 한 줄 정체성: 컨테이너 표준 — 애플리케이션을 격리된 환경에 패키징·배포
  • 공식 디자인 철학: "Build, Share, Run anywhere" — 일관된 환경, 단정한 도구 톤
  • 시그니처 요소 1개: 고래(Moby Dock) 등 위 컨테이너 블록 로고 + Docker Blue(#2496ED, 라이트한 시안 블루) + 라이트 백그라운드(#F7FBFE)의 컨테이너 카드 그리드. AWS의 오렌지·Kubernetes의 짙은 블루와 차별

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 컨테이너, 단정, 신뢰
  • 무드 설명: 라이트 베이스가 기본(Docker Desktop). 색은 액션·상태(running 그린, stopped 회색)에만. 카드 모서리 6px, 1px 보더로 컨테이너를 한 줄씩 정렬.
  • 비주얼 스타일: 모던 미니멀
  • 밀도(Density): Comfortable
  • 모서리 성향: Soft (4~6px)
  • 평면성: Flat — 보더 의존

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Docker Blue */
  --color-primary-50:  #E5F4FE;
  --color-primary-100: #BFE3FB;
  --color-primary-200: #95D0F7;
  --color-primary-300: #6BBCF3;
  --color-primary-400: #47AAF0;
  --color-primary-500: #2496ED;   /* Docker Blue */
  --color-primary-600: #1A7AC0;
  --color-primary-700: #135E94;
  --color-primary-800: #0C4368;
  --color-primary-900: #07293E;

  /* Secondary - Dark Navy (헤더/푸터) */
  --color-secondary-500: #0A0B0D;
  --color-secondary-600: #131822;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7FBFE;
  --color-neutral-100:  #EEF4F9;
  --color-neutral-200:  #E2EAF1;
  --color-neutral-300:  #C9D3DE;
  --color-neutral-500:  #98A4B3;
  --color-neutral-700:  #677488;
  --color-neutral-800:  #404754;
  --color-neutral-900:  #1C2027;
  --color-neutral-1000: #0A0B0D;

  /* Semantic */
  --color-success-bg: #E1F4EA;
  --color-success-fg: #0DA15B;     /* running 그린 */
  --color-warning-bg: #FFF3DA;
  --color-warning-fg: #B87B00;
  --color-error-bg:   #FCE3E3;
  --color-error-fg:   #DC2D2D;
  --color-info-bg:    #E5F4FE;
  --color-info-fg:    #2496ED;

  /* Surface */
  --bg-base:     #F7FBFE;
  --bg-subtle:   #EEF4F9;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(10,11,13,0.45);

  /* Text */
  --text-primary:    #0A0B0D;
  --text-secondary:  #404754;
  --text-tertiary:   #677488;
  --text-on-primary: #FFFFFF;
  --text-link:       #2496ED;
  --text-disabled:   #98A4B3;

  /* Border */
  --border-default: #E2EAF1;
  --border-subtle:  #EEF4F9;
  --border-strong:  #C9D3DE;
  --border-focus:   #2496ED;
}

[data-theme="dark"] {
  --bg-base:     #0F141C;
  --bg-subtle:   #131822;
  --bg-elevated: #1B2230;
  --text-primary:    #FFFFFF;
  --text-secondary:  #C9D3DE;
  --text-tertiary:   #98A4B3;
  --border-default:  #2A3242;
  --color-primary-500: #4DAFFA;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 영문: Roboto / Inter / -apple-system
    • 코드/CLI: JetBrains Mono / SF Mono / Consolas
    • 한글: Pretendard / Noto Sans KR
  • 위계:
    • Display: 32px / 700 / 1.2
    • H1: 24px / 600 / 1.3
    • H2: 20px / 600 / 1.3
    • H3: 16px / 600 / 1.35
    • Body Large: 15px / 400 / 1.55
    • Body: 14px / 400 / 1.5
    • Body Small: 12px / 500 / 1.4
    • Code: 13px / 400 / 1.6 mono
    • Caption: 11px / 500 / 1.3

Spacing

스페이싱

  • Base unit: 4px
  • 토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; ``
  • Container: max-width 1280px (Desktop), 좌우 패딩 24px

Border Radius

Border Radius

--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px;     /* 컨테이너 카드 */
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(10,11,13,0.05);
--shadow-md: 0 4px 12px rgba(10,11,13,0.08);
--shadow-lg: 0 12px 32px rgba(10,11,13,0.16);

Iconography

Iconography

  • 스타일: Outline (2px) — 자체 라이브러리 + Phosphor
  • Stroke 굵기: 2px
  • 모서리 처리: Square
  • 추천 라이브러리: Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 13px/1 Roboto, Inter, sans-serif; border-radius: 4px; padding: 8px 16px; border: 0; cursor: pointer; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-run { background: var(--color-success-fg); color: #fff; }
.btn-stop { background: var(--bg-elevated); color: var(--color-error-fg); border: 1px solid var(--color-error-fg); }

Input (CLI / Search)

.input { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 4px; padding: 7px 10px; font: 400 13px/1.3 inherit; color: var(--text-primary); }
.input:focus { border-color: var(--color-primary-500); outline: 2px solid rgba(36,150,237,0.20); }
.cli { background: var(--color-neutral-900); color: #E2EAF1; border-radius: 4px; padding: 12px 14px; font: 400 13px/1.6 'JetBrains Mono', monospace; }
.cli .prompt { color: var(--color-primary-500); }
.cli .out { color: var(--text-tertiary); }

Card (Container row)

.container-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 6px; padding: 10px 14px; display: grid; grid-template-columns: 14px 1fr auto auto auto; gap: 14px; align-items: center; font: 500 13px/1.3 inherit; }
.container-card .dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--color-neutral-300); }
.container-card.running .dot { background: var(--color-success-fg); }
.container-card .name { color: var(--text-primary); }
.container-card .image { color: var(--text-tertiary); font-weight: 400; }
.container-card .port { color: var(--text-tertiary); font: 500 12px/1 'JetBrains Mono', monospace; }
.image-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 6px; padding: 12px 14px; }
.image-card .size { color: var(--text-tertiary); font-size: 11px; }

Badge / Tag

.badge-status-running  { background: var(--color-success-bg); color: var(--color-success-fg); border-radius: 4px; padding: 2px 8px; font: 600 11px/1.3 inherit; }
.badge-status-stopped  { background: var(--bg-subtle); color: var(--text-tertiary); border-radius: 4px; padding: 2px 8px; font: 600 11px/1.3 inherit; }
.tag-image { background: var(--color-primary-50); color: var(--color-primary-700); border-radius: 4px; padding: 1px 6px; font: 600 11px/1.4 'JetBrains Mono', monospace; }
.tag-platform { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 6px; font: 500 11px/1.3 inherit; }

Navigation (Sidebar)

.sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border-default); width: 220px; padding: 10px 0; }
.sidebar .item { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font: 500 13px/1 inherit; color: var(--text-secondary); cursor: pointer; }
.sidebar .item:hover { background: var(--bg-subtle); color: var(--text-primary); }
.sidebar .item.active { background: var(--color-primary-50); color: var(--color-primary-700); border-left: 3px solid var(--color-primary-500); padding-left: 15px; }

Motion

Motion

--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

Anti-patterns

1. 진한 네이비 단색 사용 금지 — Docker Blue(#2496ED)는 라이트 시안 톤 2. 컨테이너 카드 모서리 12px 이상 금지 — 6px Soft + 1px 보더 3. 그린·블루 외 상태 색 남용 금지 — running·stopped 두 가지가 시그니처 4. 고래 마스코트 없이 텍스트만으로 브랜드 표현 금지 — Moby Dock이 정체성 5. 컨테이너 행 리스트를 큰 일러스트 그리드로 대체 금지 — 한 줄 row + 좌측 상태 dot 패턴 유지

Sources

출처

  1. https://www.docker.com/
  2. https://docs.docker.com/