DeepSeek
푸른 고래 마크 + Expert·Instant 듀얼 모드 — 명료한 코발트 블루 AI 채팅
Brand DNA
브랜드 DNA
- 브랜드명: DeepSeek
- 한 줄 정체성: 중국 발 오픈웨이트 LLM (V4 Pro/Flash) — 긴 컨텍스트와 깊은 추론을 효율적으로 제공하는 AI
- 공식 디자인 철학: "探索未至之境(미지의 경계를 탐색한다)" — AGI의 본질을 탐구하는 명료하고 학술적인 태도
- 시그니처 요소 1개: 푸른 고래 마크 + 채도 있는 블루 #4D6BFF 단색 액센트 + Expert·Instant 모드와 검색을 한 줄에 배치한 대화 입력창
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 깊이, 오픈소스, 명료
- 무드 설명: 넓고 조용한 캔버스 위에 채도 있는 블루 한 톤을 집중시킨다. 학술 도구처럼 정돈된 위계와 Expert·Instant 모드, 검색·파일 도구를 입력창 주변에 명료하게 드러내는 것이 시그니처 UX다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Comfortable
- 모서리 성향: Soft (8~10px)
- 평면성: Flat
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - DeepSeek Blue */
--color-primary-50: #EEF2FF;
--color-primary-100: #DCE2FF;
--color-primary-200: #B6C2FF;
--color-primary-300: #8FA1FF;
--color-primary-400: #6E83FF;
--color-primary-500: #4D6BFF;
--color-primary-600: #3950DE;
--color-primary-700: #2A3CB0;
--color-primary-800: #1E2A80;
--color-primary-900: #131A4D;
/* Secondary - Whale teal (마스코트 보조) */
--color-secondary-500: #00AABF;
/* Neutral - Cool */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F8FAFF;
--color-neutral-100: #F1F5FF;
--color-neutral-300: #C7D0E5;
--color-neutral-500: #7080A0;
--color-neutral-700: #3F4E6E;
--color-neutral-900: #1A1F2E;
--color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #ECFDF5;
--color-success-fg: #059669;
--color-warning-bg: #FFFBEB;
--color-warning-fg: #B45309;
--color-error-bg: #FEF2F2;
--color-error-fg: #DC2626;
--color-info-bg: #EEF2FF;
--color-info-fg: #4D6BFF;
/* Surface */
--bg-base: #FFFFFF;
--bg-subtle: #F8FAFF;
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(26,31,46,0.50);
/* Text */
--text-primary: #1A1F2E;
--text-secondary: #3F4E6E;
--text-tertiary: #7080A0;
--text-on-primary: #FFFFFF;
--text-disabled: #C7D0E5;
/* Border */
--border-default: #E5EAF5;
--border-subtle: #F1F5FF;
--border-strong: #C7D0E5;
--border-focus: #4D6BFF;
}
[data-theme="dark"] {
--bg-base: #0F1424;
--bg-subtle: #161D33;
--bg-elevated: #1E2640;
--text-primary: #F1F5FF;
--text-secondary: #C7D0E5;
--border-default: #2A3050;
}Typography
타이포그래피
- 폰트 페어링:
- UI(영문): Inter / -apple-system 폴백
- 한글: Pretendard / Noto Sans KR
- 중문: PingFang SC / Source Han Sans
- 코드/추론: JetBrains Mono / Source Code Pro
- 위계:
- Display: 48px / 600 / 1.15 / -0.025em
- H1: 32px / 600 / 1.2 / -0.02em
- H2: 22px / 600 / 1.3 / -0.015em
- H3: 17px / 600 / 1.4 / -0.005em
- Body Large: 16px / 400 / 1.65 / 0
- Body: 15px / 400 / 1.6 / 0
- Body Small: 13px / 400 / 1.5 / 0
- Code/Thinking: 13px / 400 / 1.6 mono
- Caption: 12px / 500 / 1.4 / 0
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 14px; --space-lg: 22px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px;`` - Container: max-width 820px (대화창)
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 16px;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(26,31,46,0.04);
--shadow-md: 0 4px 12px rgba(26,31,46,0.08);
--shadow-lg: 0 16px 40px rgba(26,31,46,0.12);
--shadow-deep: 0 8px 24px rgba(77,107,255,0.18);Iconography
Iconography
- 스타일: Outline (1.5px)
- Stroke 굵기: 1.5px
- 모서리 처리: Round
- 추천 라이브러리: Lucide / Tabler
Component Guide
컴포넌트 가이드
Button
.btn { font: 500 14px/1 Inter,sans-serif; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-base); color: var(--text-primary); transition: background 150ms ease; cursor: pointer; }
.btn:hover { background: var(--bg-subtle); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); border-color: transparent; }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-primary-600); }Input
.input { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: 10px; padding: 10px 14px; font: 400 14px/1.5 Inter,sans-serif; color: var(--text-primary); width: 100%; }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 4px rgba(77,107,255,0.12); }Card (Thinking block)
.bubble-u { background: var(--color-primary-50); border-radius: 10px; padding: 10px 14px; max-width: 80%; align-self: flex-end; font-size: 14px; }
.bubble-a { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: 10px; padding: 12px 14px; max-width: 90%; font-size: 14px; line-height: 1.6; }
.thinking { background: var(--bg-subtle); border-left: 3px solid var(--color-primary-500); border-radius: 6px; padding: 10px 14px; font: 400 13px/1.6 'JetBrains Mono',monospace; color: var(--text-secondary); margin-bottom: 8px; }
.thinking .label { font-family: Inter,sans-serif; color: var(--color-primary-600); font-weight: 600; letter-spacing: 0.02em; }Badge
.tag { display: inline-flex; padding: 3px 10px; border-radius: 9999px; font: 500 11px/1.4 Inter,sans-serif; }
.tag-blue { background: var(--color-primary-50); color: var(--color-primary-700); border: 1px solid var(--color-primary-200); }
.tag-model { font-family: 'JetBrains Mono',monospace; font-size: 11px; background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-default); }Navigation
.topbar { background: var(--bg-base); padding: 14px 22px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-subtle); }
.topbar .logo { width: 30px; height: 30px; background: var(--color-primary-500); color: var(--text-on-primary); border-radius: 8px; display: grid; place-items: center; font-size: 17px; }
.topbar h1 { font: 600 17px/1 Inter,sans-serif; letter-spacing: -0.01em; margin: 0; }Motion
Motion
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);Anti-patterns
Anti-patterns
1. 그라데이션 배경 금지 — 채도 있는 블루 단색만 2. 본문 텍스트에 채도 있는 블루 사용 금지 — 강조는 액션/링크에만 3. 다국어 폰트 fallback 누락 금지 — 영문/중문/한글 안정적 표시 4. Expert·Instant·검색 도구를 본문 안에 흩뿌리지 않기 — 입력창 하단 액션 행에 모아 배치 5. 라이트·다크 전환 시 블루 액센트의 대비를 동일 값으로 방치하지 않기