Obsidian

보라 결정 로고 + [[내부 링크]] + 그래프 뷰의 로컬 지식 작업대

서양생산성소비자차가운modern-minimal고딕compactsoftsubtle라이트다크공식한글 지원출시 2020개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Obsidian
한 줄 정체성: 로컬 마크다운 파일을 링크·그래프·Canvas로 엮는 오프라인 우선 지식 작업대
공식 디자인 철학: "A second brain, for you, forever" — 로컬·평생 보관·확장성
시그니처 요소 1개: 보라색 흑요석 결정 로고 + [[내부 링크]] + 노드·엣지 그래프가 한 작업창 안에서 이어지는 구조

Tone & Mood

톤 & 무드

핵심 키워드 3개: 로컬노트, 보석, 그래프뷰
무드 설명: 공식 라이트·다크 기본 테마 모두 중성 회색 작업면 위에 보라색 인터랙션을 얹는다. 파일 트리, 탭, 에디터, 속성, 백링크가 촘촘하게 맞물리며 [[링크]]와 그래프 노드가 연결의 감각을 만든다.
비주얼 스타일: 모던 미니멀
밀도(Density): Compact — 멀티 페인 작업창
모서리 성향: Soft (4~6px)
평면성: Subtle

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - 공식 light mode purple */
  --color-primary-50:  #F3F0FF;
  --color-primary-100: #E8E1FF;
  --color-primary-200: #D4C6FF;
  --color-primary-300: #B9A2FF;
  --color-primary-400: #9A7AF7;
  --color-primary-500: #7852EE;   /* color-purple, light */
  --color-primary-600: #6842D7;
  --color-primary-700: #5632B8;
  --color-primary-800: #43278E;
  --color-primary-900: #2D1A62;

  /* Extended color */
  --color-tag: #00BFBC;

  /* Neutral - 공식 light base palette */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FCFCFC;
  --color-neutral-100:  #FAFAFA;
  --color-neutral-200:  #F6F6F6;
  --color-neutral-300:  #E3E3E3;
  --color-neutral-500:  #ABABAB;
  --color-neutral-700:  #707070;
  --color-neutral-800:  #5A5A5A;
  --color-neutral-900:  #222222;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F7EC;
  --color-success-fg: #087A37;
  --color-warning-bg: #FFF5CC;
  --color-warning-fg: #8A6900;
  --color-error-bg:   #FDE8EB;
  --color-error-fg:   #C9263A;
  --color-info-bg:    #E8F2FD;
  --color-info-fg:    #086DDD;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F6F6F6;
  --bg-elevated: #FCFCFC;
  --bg-sidebar:  #FAFAFA;
  --bg-overlay:  rgba(0,0,0,0.40);

  /* Text */
  --text-primary:    #222222;
  --text-secondary:  #5A5A5A;
  --text-tertiary:   #707070;
  --text-on-primary: #FFFFFF;
  --text-link:       #7852EE;
  --text-disabled:   #ABABAB;

  /* Border */
  --border-default: #E3E3E3;
  --border-subtle:  #F6F6F6;
  --border-strong:  #D4D4D4;
  --border-focus:   #7852EE;
}

[data-theme="dark"] {
  --color-primary-50:  #2B1F46;
  --color-primary-100: #39285D;
  --color-primary-200: #4B347A;
  --color-primary-300: #64459F;
  --color-primary-400: #8462CF;
  --color-primary-500: #A882FF;   /* color-purple, dark */
  --color-primary-600: #B99AFF;
  --color-primary-700: #C9B2FF;
  --color-primary-800: #DACBFF;
  --color-primary-900: #EEE8FF;
  --color-tag: #53DFDD;

  --color-neutral-0:    #1E1E1E;
  --color-neutral-50:   #212121;
  --color-neutral-100:  #242424;
  --color-neutral-200:  #262626;
  --color-neutral-300:  #363636;
  --color-neutral-500:  #666666;
  --color-neutral-700:  #999999;
  --color-neutral-800:  #BABABA;
  --color-neutral-900:  #DADADA;
  --color-neutral-1000: #FFFFFF;

  --color-success-bg: #20382A;
  --color-success-fg: #44CF6E;
  --color-warning-bg: #3B351E;
  --color-warning-fg: #E0DE71;
  --color-error-bg:   #422326;
  --color-error-fg:   #FB464C;
  --color-info-bg:    #1D3048;
  --color-info-fg:    #027AFF;

  --bg-base:     #1E1E1E;
  --bg-subtle:   #242424;
  --bg-elevated: #212121;
  --bg-sidebar:  #262626;
  --bg-overlay:  rgba(0,0,0,0.62);

  --text-primary:    #DADADA;
  --text-secondary:  #BABABA;
  --text-tertiary:   #999999;
  --text-on-primary: #FFFFFF;
  --text-link:       #A882FF;
  --text-disabled:   #666666;

  --border-default: #363636;
  --border-subtle:  #2A2A2A;
  --border-strong:  #555555;
  --border-focus:   #A882FF;
}

Typography

타이포그래피

폰트 페어링:
- 인터페이스: system-ui / -apple-system / "Segoe UI" (운영체제 기본, 설정에서 변경 가능)
- 한글: 운영체제 UI 글꼴 / Pretendard / Noto Sans KR 폴백
- 마크다운/코드: ui-monospace / "SFMono-Regular" / Consolas (설정에서 변경 가능)
위계:
- Display: 32px / 700 / 1.2
- H1: 26px / 700 / 1.3 (# 헤딩)
- H2: 22px / 600 / 1.3 (## )
- H3: 18px / 600 / 1.35 (### )
- Body Large: 15px / 400 / 1.7
- Body: 14px / 400 / 1.7
- 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: 6px; --space-md: 10px; --space-lg: 14px; --space-xl: 22px; --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(0,0,0,0.18);
--shadow-md: 0 4px 12px rgba(0,0,0,0.30);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.42);

Iconography

스타일: Lucide (Obsidian 기본)
Stroke 굵기: 1.75px
모서리 처리: Round
추천 라이브러리: Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; border-radius: 4px; padding: 7px 14px; 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-primary:active { background: var(--color-primary-700); transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn-icon { background: transparent; border: 0; color: var(--text-tertiary); width: 28px; height: 28px; border-radius: 3px; }
.btn-icon:hover { background: var(--bg-elevated); color: var(--text-primary); }

Input

.input { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 4px; padding: 6px 10px; font: 400 13px/1.4 inherit; color: var(--text-primary); }
.input:focus { border-color: var(--color-primary-500); outline: 0; }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }
.cmd-palette { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow-lg); padding: 8px; width: 520px; }
.cmd-palette .row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 4px; font: 500 13px/1.4 inherit; cursor: pointer; }
.cmd-palette .row.active { background: var(--color-primary-500); color: var(--text-on-primary); }

Card (Note)

.note-pane { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: 4px; padding: 14px 18px; font: 400 15px/1.7 inherit; color: var(--text-primary); }
.note-pane h1 { font: 700 26px/1.3 inherit; color: var(--text-primary); }
.note-pane h2 { font: 700 22px/1.3 inherit; color: var(--text-primary); }
.note-pane .props { color: var(--text-tertiary); font: 500 11px/1.4 inherit; margin-bottom: 12px; }
.callout { background: var(--bg-subtle); border-left: 3px solid var(--color-primary-500); padding: 8px 12px; border-radius: 0 4px 4px 0; font: 500 13px/1.5 inherit; }
.callout.warn { border-left-color: var(--color-warning-fg); }
.callout.danger { border-left-color: var(--color-error-fg); }

Badge / Tag

.tag-hash { color: var(--color-tag); background: color-mix(in srgb, var(--color-tag) 12%, transparent); border-radius: 3px; padding: 1px 6px; font: 600 12px/1.3 ui-monospace, monospace; cursor: pointer; }
.tag-hash::before { content: '#'; }
.wikilink { color: var(--text-link); background: color-mix(in srgb, var(--color-primary-500) 12%, transparent); border-radius: 3px; padding: 0 4px; cursor: pointer; }
.wikilink::before { content: '[['; opacity: 0.45; }
.wikilink::after  { content: ']]'; opacity: 0.45; }
.backlink-count { background: color-mix(in srgb, var(--color-primary-500) 16%, transparent); color: var(--text-link); border-radius: 9999px; padding: 1px 8px; font: 700 11px/1.3 inherit; }

Navigation (Vault file tree)

.sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border-default); width: 240px; padding: 8px 0; }
.sidebar .head { padding: 6px 14px; font: 700 11px/1.4 inherit; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.sidebar .folder { padding: 5px 12px 5px 14px; font: 500 13px/1.4 inherit; color: var(--text-secondary); cursor: pointer; }
.sidebar .folder.expand::before { content: '▾ '; color: var(--text-tertiary); }
.sidebar .file { padding: 4px 12px 4px 28px; font: 400 13px/1.4 inherit; color: var(--text-primary); cursor: pointer; border-radius: 3px; margin: 1px 6px; }
.sidebar .file:hover { background: var(--bg-subtle); }
.sidebar .file.active { background: var(--color-primary-500); color: var(--text-on-primary); }
.graph-pane { background: radial-gradient(circle at center, color-mix(in srgb, var(--color-primary-500) 10%, transparent) 0, transparent 60%), var(--bg-base); border: 1px solid var(--border-default); border-radius: 4px; }

Motion

--duration-fast: 80ms;
--duration-base: 160ms;
--duration-slow: 280ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

1. 보라색을 모든 면에 넓게 채우지 않기 — 공식 UI처럼 링크·포커스·주요 액션에 제한 2. [[내부 링크]] 표기에서 연결 단서를 제거하지 않기 — 보라 텍스트와 링크 문법이 핵심 3. 그래프 뷰 제거하고 트리만 표시 금지 — 노드+엣지 그래프가 정체성 4. 풀필 9999px 카드 사용 금지 — 4~6px Soft 5. 라이트·다크 중 한 테마만 고정하지 않기 — 공식 기본 테마 두 가지와 사용자 테마 확장성을 보존

Obsidian

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

출처