JetBrains

컬러 헤일로 속 검은 제품 타일 + IntelliJ 신택스 + 촘촘한 도구창 UI

서양개발 도구생산성복합modern-minimal고딕compactsoftsubtle라이트다크공식한글 지원출시 2001개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: JetBrains
한 줄 정체성: IntelliJ IDEA·PyCharm·WebStorm 등 언어별 프로 IDE 패밀리 — Kotlin 제작사
공식 디자인 철학: "Powerful tools for developers" — 정교한 기능을 깔끔한 인터페이스로
시그니처 요소 1개: 제품별 컬러 헤일로 안의 검은 정사각형 타일 + 흰 제품 이니셜, Inter UI와 JetBrains Mono 신택스, 좌우 도구창 스트라이프로 구성된 IntelliJ 패밀리 레이아웃

Tone & Mood

톤 & 무드

핵심 키워드 3개: 정교, 컬러풀, 강력
무드 설명: Islands Light/Dark는 패널 간 1px 보더와 서로 다른 도구창 표면으로 영역을 명확히 나눈다. 액션은 라이트 블루(#3574F0), 강한 제품 그라데이션은 로고 타일과 마케팅 순간에 집중한다.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 도구창이 사이드에 빼곡
모서리 성향: Soft (4~6px)
평면성: Subtle — 보더 + 미세 그림자

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - JetBrains Pink */
  --color-primary-50:  #FFE0EE;
  --color-primary-100: #FFB3D1;
  --color-primary-200: #FF85B4;
  --color-primary-300: #FF5798;
  --color-primary-400: #FF318C;
  --color-primary-500: #FF318C;   /* JetBrains Pink */
  --color-primary-600: #DB1873;
  --color-primary-700: #A8125A;
  --color-primary-800: #770B40;
  --color-primary-900: #4A0727;

  /* Gradient stops (제품별 컬러) */
  --grad-pink:   #FF318C;
  --grad-yellow: #FCC419;
  --grad-blue:   #0095FF;
  --grad-purple: #8676FF;
  --grad-orange: #FE5722;
  --grad-jb: linear-gradient(135deg, var(--grad-pink) 0%, var(--grad-yellow) 50%, var(--grad-blue) 100%);

  /* Action Blue */
  --color-action-500: #3574F0;
  --color-action-600: #2860D1;

  /* Syntax (IntelliJ Light) */
  --color-syntax-keyword:  #0033B3;
  --color-syntax-string:   #067D17;
  --color-syntax-comment:  #8C8C8C;
  --color-syntax-function: #00627A;
  --color-syntax-variable: #871094;
  --color-syntax-type:     #00627A;
  --color-syntax-number:   #1750EB;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F0F1F2;
  --color-neutral-100:  #DFE1E5;
  --color-neutral-200:  #BCBEC4;
  --color-neutral-300:  #7F8385;
  --color-neutral-500:  #5A5D63;
  --color-neutral-700:  #393B40;
  --color-neutral-800:  #2B2D30;
  --color-neutral-900:  #1E1F22;
  --color-neutral-1000: #000000;

  /* Semantic - Light */
  --color-success-bg: #E8F5EC;
  --color-success-fg: #208A3C;
  --color-warning-bg: #FBF1D9;
  --color-warning-fg: #9A6700;
  --color-error-bg:   #FBE9E9;
  --color-error-fg:   #C7222D;
  --color-info-bg:    #E3F0FB;
  --color-info-fg:    #3574F0;

  /* Surface - Islands Light */
  --bg-base:     #F7F8FA;
  --bg-subtle:   #EBECF0;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(0,0,0,0.30);

  /* Text */
  --text-primary:    #1F1F1F;
  --text-secondary:  #4A4A4A;
  --text-tertiary:   #818594;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #A8ADBD;

  /* Border */
  --border-default: #DFE1E5;
  --border-subtle:  #EBECF0;
  --border-strong:  #C9CCD6;
  --border-focus:   #3574F0;
}

[data-theme="dark"] {
  /* Dark/Darcula-compatible override */
  --color-primary-50:  #4A0727;
  --color-primary-100: #770B40;
  --color-primary-200: #A8125A;
  --color-primary-300: #DB1873;
  --color-primary-400: #FF318C;
  --color-primary-500: #FF318C;
  --color-primary-600: #FF5798;
  --color-primary-700: #FF85B4;
  --color-primary-800: #FFB3D1;
  --color-primary-900: #FFE0EE;

  --color-action-500: #3574F0;
  --color-action-600: #548AF7;

  --color-syntax-keyword:  #CF8E6D;
  --color-syntax-string:   #6AAB73;
  --color-syntax-comment:  #7A7E85;
  --color-syntax-function: #56A8F5;
  --color-syntax-variable: #C77DBB;
  --color-syntax-type:     #AFBF7E;
  --color-syntax-number:   #2AACB8;

  --color-neutral-0:    #1E1F22;
  --color-neutral-50:   #25272B;
  --color-neutral-100:  #2B2D30;
  --color-neutral-200:  #393B40;
  --color-neutral-300:  #4D5158;
  --color-neutral-500:  #7F8385;
  --color-neutral-700:  #BCBEC4;
  --color-neutral-800:  #DFE1E5;
  --color-neutral-900:  #F0F1F2;
  --color-neutral-1000: #FFFFFF;

  --color-success-bg: #1F3F26;
  --color-success-fg: #6AAB73;
  --color-warning-bg: #3B2F0F;
  --color-warning-fg: #F2B33D;
  --color-error-bg:   #4A1B1F;
  --color-error-fg:   #DB5C5C;
  --color-info-bg:    #1A3A5A;
  --color-info-fg:    #548AF7;

  --bg-base:     #2B2D30;
  --bg-subtle:   #1E1F22;
  --bg-elevated: #393B40;
  --bg-overlay:  rgba(0,0,0,0.55);

  --text-primary:    #DFE1E5;
  --text-secondary:  #BCBEC4;
  --text-tertiary:   #7F8385;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #5A5D63;

  --border-default: #393B40;
  --border-subtle:  #2B2D30;
  --border-strong:  #4D5158;
  --border-focus:   #3574F0;
}

Typography

타이포그래피

폰트 페어링:
- UI: JetBrains Sans (자체) / Inter / -apple-system
- 코드: JetBrains Mono (대표 무료 코딩 폰트)
- 한글: Pretendard / Noto Sans KR
위계:
- Display: 32px / 700 / 1.2 / -0.02em
- H1: 24px / 700 / 1.25
- H2: 20px / 600 / 1.3
- H3: 16px / 600 / 1.35
- Body Large: 15px / 400 / 1.55
- Body: 13px / 400 / 1.5
- UI Label: 13px / 500 / 1.3
- Code: 13px / 400 / 1.6 mono
- Caption: 11px / 500 / 1.3

Spacing

스페이싱

Base unit: 4px
토큰: ``css :root { --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 16px; --space-2xl: 24px; --space-3xl: 36px; } ``

Border Radius

:root {
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 4px;     /* 버튼 시그니처 */
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-full: 9999px;
}

Shadow / Elevation

:root {
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-pink: 0 6px 24px rgba(255,49,140,0.35);
}

Iconography

스타일: 자체 IntelliJ Icons (Filled + Outline 혼합)
Stroke 굵기: 1.5px
모서리 처리: Square (정밀)
추천 라이브러리: IntelliJ Platform Icons / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { font: 500 13px/1 'JetBrains Sans', Inter, sans-serif; border-radius: 4px; padding: 6px 16px; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--color-action-500); color: #fff; border-color: var(--color-action-500); }
.btn-primary:hover { background: var(--color-action-600); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-base); }
.btn-cta-grad { background: var(--grad-jb); color: #fff; border: 0; padding: 12px 24px; border-radius: 6px; font-weight: 600; }   /* 마케팅 사이트 */
.btn-icon { background: transparent; border: 0; color: var(--text-secondary); padding: 4px; border-radius: 3px; }
.btn-icon:hover { background: var(--bg-elevated); }

Input

.input { background: var(--bg-subtle); border: 1px solid var(--border-strong); border-radius: 4px; padding: 5px 8px; font: 400 13px/1.3 inherit; color: var(--text-primary); }
.input:focus { border-color: var(--color-action-500); outline: 1px solid var(--color-action-500); outline-offset: -2px; }
.search { background: var(--bg-subtle); border-radius: 4px; padding: 5px 8px; display: flex; align-items: center; gap: 6px; }

Card (Tool Window / Tab)

.toolwin { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: 0; }
.toolwin .head { background: var(--bg-subtle); padding: 4px 10px; font: 500 12px/1.4 inherit; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-default); }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: var(--bg-base); color: var(--text-secondary); font: 500 13px/1.3 inherit; border-right: 1px solid var(--border-default); cursor: pointer; }
.tab.active { background: var(--bg-subtle); color: var(--text-primary); border-top: 2px solid var(--color-primary-500); padding-top: 3px; }

Badge / Tag

.badge-version { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 6px; font: 500 11px/1.3 inherit; }
.tag-pink { background: rgba(255,49,140,0.15); color: var(--color-primary-300); border-radius: 9999px; padding: 2px 8px; font: 600 11px/1.3 inherit; }
.tag-action { background: rgba(53,116,240,0.15); color: var(--color-action-500); border-radius: 9999px; padding: 2px 8px; font: 600 11px/1.3 inherit; }
.kbd { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 3px; padding: 1px 6px; font: 600 11px/1 'JetBrains Mono', monospace; }

Navigation (New UI 도구창 스트라이프)

.sideicons { background: var(--bg-subtle); width: 40px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-right: 1px solid var(--border-default); }
.sideicons .item { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-md); }
.sideicons .item:hover, .sideicons .item.active { color: var(--text-primary); background: var(--bg-elevated); }
.sideicons .item.active { box-shadow: inset 2px 0 0 var(--color-primary-500); }
.titlebar { background: var(--bg-subtle); height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-default); }
.titlebar .logo { width: 24px; height: 24px; padding: 5px; background: var(--grad-jb); }
.titlebar .logo::after { content: 'IJ'; width: 100%; height: 100%; display: grid; place-items: center; background: #000; color: #fff; font: 800 7px/1 Arial, sans-serif; }

Motion

:root {
  --duration-fast: 100ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Anti-patterns

1. 그라데이션 풀배경 사용 금지 — 다이아몬드 로고/마케팅 카드에만, IDE 안에선 단색 2. 카드 모서리 12px 이상 금지 — 4~6px Soft가 시그니처 3. 도구창 스트라이프를 텍스트 메뉴로 채우기 금지 — New UI의 식별 가능한 아이콘과 hover 라벨 패턴 유지 4. 라이트와 다크에서 편집기 신택스 팔레트를 그대로 재사용 금지 — UI 테마에 맞는 Light/Darcula 계열을 각각 적용 5. JetBrains Mono를 빈티지·세리프 폰트로 대체 금지 — 코딩 환경에서는 JetBrains Mono 또는 Cascadia 권장

JetBrains

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

출처