Claude

크림 캔버스 + 점토 오렌지 + 세리프의 인본주의 AI

서양AI생산성따뜻한humanismmodern-minimal명조spacioussoftflat라이트다크공식한글 지원출시 2023개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Claude (Anthropic)
한 줄 정체성: 안전 우선 헌법적 AI 어시스턴트 — 글쓰기·코드·분석에 강한 대화형 모델
공식 디자인 철학: "Honesty, Helpfulness, Harmlessness" — 사려깊고 인본주의적 톤
시그니처 요소 1개: 크림 화이트(#F0EEE6) 캔버스 + 점토 오렌지(#C96442) 단일 강조 + 본문 한글/영문 모두 세리프(Tiempos/Styrene 혼합). ChatGPT의 무채 톤·Gemini 스펙트럼과 정반대의 따뜻한 휴머니즘

Tone & Mood

톤 & 무드

핵심 키워드 3개: 침착, 따뜻, 신중
무드 설명: 종이를 닮은 크림-베이지 캔버스. 본문은 세리프, UI 라벨은 산세리프(Styrene). 흰 카드, 옅은 베이지 보더, 강조는 점토 오렌지 한 가지만. 모서리는 둥글지만 풀필이 아닌 12~16px.
비주얼 스타일: 휴머니즘 + 모던 미니멀
밀도(Density): Spacious — 본문 line-height 1.7, 카드 패딩 14~18px
모서리 성향: Soft (12~16px)
평면성: Flat — 그림자 매우 절제

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Claude Clay (점토 오렌지) */
  --color-primary-50:  #FBEFE7;
  --color-primary-100: #F2D4BF;
  --color-primary-200: #E5B091;
  --color-primary-300: #D88861;
  --color-primary-400: #D17350;
  --color-primary-500: #C96442;   /* Claude Clay */
  --color-primary-600: #B05231;
  --color-primary-700: #8C4022;
  --color-primary-800: #682E16;
  --color-primary-900: #441C0B;

  /* Secondary - Olive/Sage (보조 강조) */
  --color-secondary-500: #6F7864;

  /* Neutral - Warm cream tones */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAF9F5;
  --color-neutral-100:  #F0EEE6;     /* page bg — 크림 캔버스 */
  --color-neutral-200:  #E5E0D5;     /* border */
  --color-neutral-300:  #D4CFC4;
  --color-neutral-500:  #ABA597;
  --color-neutral-700:  #807D75;     /* text tertiary */
  --color-neutral-800:  #4A4845;
  --color-neutral-900:  #1F1E1D;     /* text primary */
  --color-neutral-1000: #0B0A09;

  /* Semantic - 톤다운된 따뜻한 채도 */
  --color-success-bg: #E8EEDF;
  --color-success-fg: #4F7A35;
  --color-warning-bg: #FBEEDA;
  --color-warning-fg: #B07A1F;
  --color-error-bg:   #F5DDDA;
  --color-error-fg:   #B23A2C;
  --color-info-bg:    #E0E7E8;
  --color-info-fg:    #3F6F73;

  /* Surface */
  --bg-base:     #F0EEE6;          /* 크림 */
  --bg-subtle:   #FAF9F5;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(31,30,29,0.50);

  /* Text */
  --text-primary:    #1F1E1D;
  --text-secondary:  #4A4845;
  --text-tertiary:   #807D75;
  --text-on-primary: #F0EEE6;     /* 점토 오렌지 위는 크림 텍스트 */
  --text-disabled:   #ABA597;

  /* Border */
  --border-default: #E5E0D5;
  --border-subtle:  #F0EEE6;
  --border-strong:  #D4CFC4;
  --border-focus:   #C96442;
}

[data-theme="dark"] {
  --bg-base: #1F1E1D;
  --bg-subtle: #28272B;
  --bg-elevated: #2F2E2C;
  --text-primary: #F0EEE6;
  --text-secondary: #C8C5BC;
  --border-default: #3F3D38;
  --color-primary-500: #D88861;   /* 다크에선 한 단계 라이트 */
  --text-on-primary: #1F1E1D;
}

Typography

타이포그래피

폰트 페어링:
- 본문(영문): Tiempos Text (라이선스) / Source Serif Pro 폴백
- UI/라벨(영문): Styrene (Commercial Type) / Inter 폴백
- 한글 본문: Noto Serif KR / 본명조 폴백
- 한글 UI: Pretendard / Noto Sans KR
- 코드: Söhne Mono / JetBrains Mono / Source Code Pro
위계 (본문은 세리프, UI는 산세리프 분리):
- Display: 40px / 500 / 1.25 / -0.02em serif
- H1: 28px / 500 / 1.3 / -0.015em serif
- H2: 22px / 500 / 1.35 / -0.01em serif
- H3: 18px / 600 / 1.4 / -0.005em serif
- Body Large: 16px / 400 / 1.7 / 0 serif
- Body: 15px / 400 / 1.7 / 0 serif
- Body Small: 13px / 500 / 1.55 / 0 sans
- UI Label: 13px / 500 / 1.3 / 0 sans
- Caption: 11px / 500 / 1.4 / 0.01em sans
- Code: 13px / 400 / 1.55 mono

Spacing

스페이싱

Base unit: 4px (Spacious 톤)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 14px; --space-lg: 20px; --space-xl: 28px; --space-2xl: 44px; --space-3xl: 72px; ``
Container: max-width 760px (대화창), 1120px (랜딩), 좌우 패딩 16px

Border Radius

--radius-none: 0;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 16px;     /* 카드 시그니처 */
--radius-xl: 24px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(31,30,29,0.04);
--shadow-md: 0 4px 12px rgba(31,30,29,0.06);
--shadow-lg: 0 12px 28px rgba(31,30,29,0.10);
--shadow-clay: 0 4px 16px rgba(201,100,66,0.22);

Iconography

스타일: Outline (얇은 선) — Phosphor Regular
Stroke 굵기: 1.5px
모서리 처리: Round (얇게)
추천 라이브러리: Phosphor / Lucide

Component Guide

컴포넌트 가이드

Button

.btn { font: 500 14px/1 Styrene, Inter, sans-serif; letter-spacing: -0.005em;
       border-radius: 9999px; padding: 11px 18px; border: 0;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px;
       transition: background 200ms ease, box-shadow 200ms ease; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary { background: #fff; color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--color-primary-600); }
.btn-send { width: 32px; height: 32px; padding: 0; border-radius: 9999px; background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-send:disabled { background: var(--border-default); color: var(--text-disabled); }

Input (Chat box)

.chatbox { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 10px 12px 10px 18px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-sm); transition: border-color 200ms ease; }
.chatbox:focus-within { border-color: var(--color-primary-500); box-shadow: 0 0 0 3px rgba(201,100,66,0.12); }
.chatbox input, .chatbox textarea { all: unset; flex: 1; font: 400 15px/1.55 Tiempos, serif; color: var(--text-primary); }
.chatbox input::placeholder { color: var(--text-tertiary); font-family: Styrene, Inter, sans-serif; }

Card (Message)

.msg-user { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 18px; max-width: 75%; align-self: flex-end; font: 500 14px/1.6 Styrene, Inter, sans-serif; color: var(--text-primary); }
.msg-ai { background: transparent; border-radius: 0; padding: 0 4px; max-width: 90%; font: 400 15px/1.75 Tiempos, 'Source Serif Pro', serif; color: var(--text-primary); }
.msg-ai .head { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font: 500 11px/1 Styrene, sans-serif; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
.msg-ai .logo { width: 16px; height: 16px; background: var(--color-primary-500); border-radius: 4px; display: grid; place-items: center; color: var(--text-on-primary); font: 900 10px/1 sans-serif; }
.callout { background: var(--color-primary-50); border-left: 3px solid var(--color-primary-500); border-radius: 4px; padding: 12px 16px; font: 400 14px/1.65 inherit; }

Badge / Tag

.tag { padding: 3px 10px; border-radius: 9999px; font: 500 11px/1.5 Styrene, Inter, sans-serif; letter-spacing: 0.02em; }
.tag-version { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border-default); }
.tag-clay    { background: var(--color-primary-50); color: var(--color-primary-700); border: 1px solid var(--color-primary-100); }
.tag-new     { background: var(--color-primary-500); color: var(--text-on-primary); }

Navigation (Sidebar)

.sidebar { background: var(--bg-subtle); padding: 12px; border-right: 1px solid var(--border-default); }
.sidebar .item { padding: 10px 14px; border-radius: 9999px; font: 500 13px/1.4 Styrene, Inter, sans-serif; color: var(--text-primary); display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sidebar .item:hover { background: var(--bg-base); }
.sidebar .item.active { background: var(--color-primary-50); color: var(--color-primary-700); }
.sidebar .new { background: var(--color-primary-500); color: var(--text-on-primary); border: 0; border-radius: 9999px; padding: 10px 14px; font: 500 13px/1 inherit; }

Motion

--duration-fast: 150ms;
--duration-base: 280ms;     /* 한 호흡 더 길게 */
--duration-slow: 500ms;
--ease-out: cubic-bezier(0.32, 0.72, 0, 1);     /* 부드러운 도착 */
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

Anti-patterns

1. 본문에 산세리프 단독 사용 금지 — Claude의 정체성은 세리프 본문 (UI는 산세리프 분리) 2. 채도 높은 그라데이션 배경 금지 — 크림 단색 캔버스 유지 3. 점토 오렌지 외 다른 강조 색 추가 금지 — single accent 원칙 4. 본문 line-height 1.5 이하 사용 금지 — 1.65~1.75가 침착 톤 유지 5. 풀필 round(9999px) 카드 사용 금지 — 카드는 12~16px Soft, pill은 버튼/태그에만

Claude

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

출처