Databricks

오트 캔버스 위 Lava Red 레이크하우스 마크와 셀·카탈로그·워크플로 UI

서양개발 도구AI따뜻한modern-minimal고딕comfortablesoftflat라이트다크공식한글 지원출시 2013개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Databricks
한 줄 정체성: 데이터·분석·AI를 한 작업 공간에 연결하는 Data Intelligence Platform
공식 디자인 철학: 레이크하우스 아키텍처 위에서 모든 데이터와 AI 워크로드를 단순하고 개방적으로 통합
시그니처 요소 1개: Lava Red(#FF3621)로 그린 3단 레이크하우스 마크와 Oat/Navy 캔버스 위 Notebook·Unity Catalog·Lakeflow·MLflow가 이어지는 작업 공간

Tone & Mood

톤 & 무드

핵심 키워드 3개: 데이터+AI, 강렬, 레이크하우스
무드 설명: 기본 라이트 UI는 Oat Light(#F9F7F4)와 White, Navy(#0B2026)의 차분한 대비 위에 Lava Red를 행동 강조로 사용한다. Notebook은 공식 Light/Dark 테마를 지원하며 두 모드 모두 셀·도구 막대·실행 결과의 경계를 선명하게 유지한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Comfortable
모서리 성향: Soft (4~6px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Databricks Lava */
  --color-primary-50:  #FFE7E3;
  --color-primary-100: #FFB8AD;
  --color-primary-200: #FF8B79;
  --color-primary-300: #FF6047;
  --color-primary-400: #FF4731;
  --color-primary-500: #FF3621;   /* Databricks Red */
  --color-primary-600: #DB2210;
  --color-primary-700: #AA1A0B;
  --color-primary-800: #771308;
  --color-primary-900: #4A0B04;

  /* Secondary - Databricks Navy */
  --color-secondary-500: #0B2026;
  --color-secondary-600: #07171B;

  /* Neutral - Oat + Navy */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F9F7F4;     /* Oat Light, canvas */
  --color-neutral-100:  #EEEDE9;     /* Oat Medium */
  --color-neutral-200:  #D9DCD6;
  --color-neutral-300:  #B9C0C2;
  --color-neutral-500:  #77848A;
  --color-neutral-700:  #425B64;
  --color-neutral-800:  #223B44;
  --color-neutral-900:  #0B2026;     /* Navy, text primary */
  --color-neutral-1000: #07171B;

  /* Semantic */
  --color-success-bg: #E1F4EA;
  --color-success-fg: #00A972;
  --color-warning-bg: #FFF1D5;
  --color-warning-fg: #B07A00;
  --color-error-bg:   #FFE0D8;
  --color-error-fg:   #DB2210;
  --color-info-bg:    #DAEBFF;
  --color-info-fg:    #2272B4;

  /* Code highlight */
  --code-fn:    #0184BC;
  --code-kw:    #A626A4;
  --code-str:   #50A14F;
  --code-num:   #986801;
  --code-cmt:   #8A8377;

  /* Surface */
  --bg-base:     #F9F7F4;
  --bg-subtle:   #EEEDE9;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(11,32,38,0.52);

  /* Text */
  --text-primary:    #0B2026;
  --text-secondary:  #223B44;
  --text-tertiary:   #5F6B70;
  --text-on-primary: #FFFFFF;
  --text-link:       #DB2210;
  --text-disabled:   #B9C0C2;

  /* Border */
  --border-default: #D9DCD6;
  --border-subtle:  #EEEDE9;
  --border-strong:  #B9C0C2;
  --border-focus:   #FF3621;
}

[data-theme="dark"] {
  --color-primary-50:  #4A0B04;
  --color-primary-100: #771308;
  --color-primary-200: #AA1A0B;
  --color-primary-300: #DB2210;
  --color-primary-400: #FF3621;
  --color-primary-500: #FF5B47;
  --color-primary-600: #FF725F;
  --color-primary-700: #FF9A8B;
  --color-primary-800: #FFC4BB;
  --color-primary-900: #FFE7E3;
  --bg-base:     #0B2026;
  --bg-subtle:   #102B32;
  --bg-elevated: #16363F;
  --bg-overlay:  rgba(0,0,0,0.64);
  --text-primary:    #F9F7F4;
  --text-secondary:  #D7DEDD;
  --text-tertiary:   #94A5AA;
  --text-link:       #FF9A8B;
  --text-disabled:   #54717A;
  --border-default:  #28505A;
  --border-subtle:   #1B3B44;
  --border-strong:   #3C626B;
  --border-focus:    #FF5B47;
  --color-success-bg: #10372A;
  --color-success-fg: #45D6A4;
  --color-warning-bg: #382C12;
  --color-warning-fg: #F0B84B;
  --color-error-bg:   #441A14;
  --color-error-fg:   #FF806E;
  --color-info-bg:    #102E46;
  --color-info-fg:    #6DB7ED;
  --code-fn:    #6DB7ED;
  --code-kw:    #E397DF;
  --code-str:   #8BD17F;
  --code-num:   #E5B85C;
  --code-cmt:   #87999E;
}

Typography

타이포그래피

폰트 페어링:
- 영문: DM Sans / Inter / system-ui
- 코드: DM Mono / SF Mono
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 32px / 700 / 1.2
- H1: 26px / 700 / 1.25
- H2: 20px / 600 / 1.3
- H3: 16px / 600 / 1.35
- Body Large: 16px / 400 / 1.55
- Body: 14px / 400 / 1.5
- Body Small: 12px / 500 / 1.4
- Code: 13px / 400 / 1.55 mono
- Caption: 11px / 600 / 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; ``

Border Radius

--radius-none: 0;
--radius-sm: 3px;
--radius-md: 4px;
--radius-lg: 6px;     /* 노트북 셀 */
--radius-xl: 10px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(27,49,57,0.06);
--shadow-md: 0 4px 12px rgba(27,49,57,0.08);
--shadow-lg: 0 12px 32px rgba(27,49,57,0.14);

Iconography

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

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 13px/1 'DM Sans', 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-run { background: var(--color-primary-500); color: #fff; padding: 8px 14px; font-weight: 700; }
.btn-cluster { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); padding: 6px 12px; font: 600 12px/1 inherit; }

Input / Cell

.input { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 4px; padding: 7px 10px; font: 400 13px/1.4 inherit; color: var(--text-primary); }
.input:focus { border-color: var(--color-primary-500); outline: 2px solid rgba(255,54,33,0.18); }
.cell { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 6px; overflow: hidden; }
.cell:focus-within { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(255,54,33,0.10); }
.cell .head { padding: 5px 12px; background: var(--bg-base); border-bottom: 1px solid var(--border-default); font: 700 11px/1.4 inherit; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 10px; }
.cell .head .lang { padding: 1px 6px; border-radius: 3px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); font-size: 10px; }
.cell .src { padding: 10px 12px; font: 400 13px/1.55 'DM Mono', SFMono-Regular, monospace; color: var(--text-primary); }
.cell .out { padding: 8px 12px; background: var(--bg-base); border-top: 1px solid var(--border-default); font: 500 12px/1.5 inherit; color: var(--text-primary); }

Card (Cluster / Job status)

.cluster-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 6px; padding: 14px 16px; display: grid; grid-template-columns: 12px 1fr auto auto; gap: 12px; align-items: center; }
.cluster-card .dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--color-success-fg); }
.cluster-card .name { font: 700 14px/1.3 inherit; }
.cluster-card .meta { font: 500 12px/1.4 inherit; color: var(--text-tertiary); margin-top: 3px; }

Badge / Tag

.badge-running { background: var(--color-success-bg); color: var(--color-success-fg); border-radius: 4px; padding: 3px 10px; font: 700 11px/1.3 inherit; }
.badge-failed  { background: var(--color-error-bg); color: var(--color-error-fg); border-radius: 4px; padding: 3px 10px; font: 700 11px/1.3 inherit; }
.tag-python    { background: rgba(1,132,188,0.12); color: var(--code-fn); border-radius: 3px; padding: 1px 7px; font: 700 11px/1.3 inherit; }
.tag-sql       { background: rgba(166,38,164,0.12); color: var(--code-kw); border-radius: 3px; padding: 1px 7px; font: 700 11px/1.3 inherit; }
.tag-mlflow    { background: var(--color-primary-50); color: var(--color-primary-700); border-radius: 3px; padding: 1px 7px; font: 700 11px/1.3 inherit; }

Navigation (Sidebar)

.sidebar { background: var(--color-secondary-500); color: #fff; width: 240px; padding: 14px 0; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 18px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar .brand .logo { width: 32px; height: 32px; background: var(--color-primary-500); border-radius: 6px; display: grid; place-items: center; color: #fff; font: 900 16px/1 inherit; }
.sidebar .item { display: flex; align-items: center; gap: 12px; padding: 9px 18px; font: 500 14px/1 inherit; color: rgba(255,255,255,0.85); cursor: pointer; }
.sidebar .item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sidebar .item.active { background: rgba(255,54,33,0.16); color: #FFB8AD; border-left: 3px solid var(--color-primary-500); padding-left: 15px; font-weight: 700; }

Motion

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

Anti-patterns

1. Lava Red 외에 경쟁하는 브랜드 강조색을 추가하지 않는다. 2. Notebook 셀의 명령 막대·소스·결과 영역을 하나의 무경계 패널로 합치지 않는다. 3. 라이트 캔버스 전체를 순백색으로 덮지 않는다. Oat Light를 기본, White를 상승 표면으로 구분한다. 4. 3단 레이크하우스 마크를 삼각형이나 일반 데이터베이스 아이콘으로 단순화하지 않는다. 5. 소비자 앱처럼 과도한 pill, 블러, 장식 그라디언트를 남발하지 않는다.

Databricks

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

출처