Adobe Illustrator
오렌지 Ai 모노그램 + 정밀한 베지어 핸들 + 조절 가능한 고밀도 벡터 작업 영역
Brand DNA
브랜드 DNA
- 브랜드명: Adobe Illustrator
- 한 줄 정체성: 산업 표준 벡터 그래픽 편집기 — 로고·일러스트·아이콘의 본진
- 공식 디자인 철학: Adobe Spectrum + 오렌지 브랜드 컬러 — 벡터 곡선의 정밀 편집
- 시그니처 요소 1개: Illustrator Orange(#FF9A00) Ai 모노그램 + 앵커·방향선·베지어 핸들이 드러나는 정밀한 벡터 편집 장면. UI 밝기와 무관하게 오렌지 앱 타일과 패스 편집 문법이 정체성을 만든다.
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 벡터, 오렌지로고, Ai모노그램
- 무드 설명: 밝기 설정에 따라 Light부터 Dark까지 전환되는 고밀도 작업 영역. 중립 UI 위에 오렌지 앱 타일과 선택 상태, 파란 패스 앵커가 또렷하게 대비되며 기능 중심의 정밀함을 유지한다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Compact
- 모서리 성향: Sharp (2~3px)
- 평면성: Flat
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - Illustrator Orange */
--color-primary-50: #FFF1DC;
--color-primary-100: #FFDBA8;
--color-primary-200: #FFC177;
--color-primary-300: #FFAC46;
--color-primary-400: #FF9F22;
--color-primary-500: #FF9A00; /* Illustrator Orange */
--color-primary-600: #DC8400;
--color-primary-700: #A86500;
--color-primary-800: #744700;
--color-primary-900: #402800;
/* Secondary - Ai 앱 타일 */
--color-secondary-500: #330000;
/* Neutral */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #FAFAFA;
--color-neutral-100: #F4F4F4;
--color-neutral-200: #E6E6E6;
--color-neutral-300: #C9C9C9;
--color-neutral-500: #9A9A9A;
--color-neutral-700: #6E6E6E;
--color-neutral-800: #4B4B4B;
--color-neutral-900: #2C2C2C;
--color-neutral-1000: #1B1B1B;
/* Semantic */
--color-success-bg: #E5F7EC;
--color-success-fg: #147A3D;
--color-warning-bg: #FFF3D6;
--color-warning-fg: #8A4B00;
--color-error-bg: #FDE7EC;
--color-error-fg: #B42345;
--color-info-bg: #E7F2FF;
--color-info-fg: #0D66D0;
/* Surface */
--bg-base: #E6E6E6;
--bg-subtle: #F4F4F4;
--bg-elevated: #FFFFFF;
--bg-canvas: #FFFFFF; /* 캔버스 색상을 White로 설정한 경우 */
--bg-overlay: rgba(0,0,0,0.64);
/* Text */
--text-primary: #2C2C2C;
--text-secondary: #4B4B4B;
--text-tertiary: #6E6E6E;
--text-on-primary: #1B1B1B; /* Orange 위 검정 */
--text-disabled: #A8A8A8;
/* Border */
--border-default: #C9C9C9;
--border-subtle: #DEDEDE;
--border-strong: #9A9A9A;
--border-focus: #FF9A00;
}Typography
타이포그래피
- 폰트 페어링:
- 영문: Adobe Clean (자체) / Source Sans 폴백
- 한글: Adobe Clean Han KR / Pretendard
- 숫자: tabular-nums
- 위계:
- Display: 32px / 700 / 1.15 / -0.01em
- H1: 22px / 600 / 1.2 / -0.005em
- H2: 16px / 600 / 1.3 / 0
- H3: 13px / 600 / 1.35 / 0
- Body Large: 13px / 400 / 1.45 / 0
- Body: 12px / 400 / 1.4 / 0
- Body Small: 11px / 500 / 1.35 / 0
- Caption: 10px / 600 / 1.3 / 0.04em
- Code: 12px / 400 mono tabular-nums
Spacing
스페이싱
- Base unit: 4px (Compact)
- 토큰: ``
css --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 12px; --space-xl: 20px; --space-2xl: 32px; --space-3xl: 48px;`` - Container: 데스크톱 앱 풀스크린
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 3px;
--radius-lg: 4px;
--radius-xl: 6px;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
--shadow-md: 0 4px 12px rgba(0,0,0,0.55);
--shadow-lg: 0 16px 32px rgba(0,0,0,0.65);Iconography
Iconography
- 스타일: Outline (얇은 선) — Adobe Spectrum
- Stroke 굵기: 1.5px
- 모서리 처리: Square
- 추천 라이브러리: Adobe Spectrum
Component Guide
컴포넌트 가이드
Button
.btn { font: 500 12px/1 'Adobe Clean', Inter, sans-serif; border-radius: 3px; padding: 6px 12px; border: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background 120ms ease; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-secondary:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: default; }
.btn-tool { width: 32px; height: 32px; padding: 0; border-radius: 2px; background: transparent; color: var(--text-primary); display: grid; place-items: center; }
.btn-tool.active { background: var(--color-primary-500); color: var(--text-on-primary); }Input
.input { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 2px; padding: 4px 6px; color: var(--text-primary); font: 400 12px/1.3 inherit; font-variant-numeric: tabular-nums; }
.input:focus { outline: none; border-color: var(--color-primary-500); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }Card (Layer / Path Panel)
.panel { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 0; }
.panel .head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font: 600 11px/1 inherit; color: var(--text-primary); background: var(--bg-subtle); border-bottom: 1px solid var(--border-default); letter-spacing: 0.04em; text-transform: uppercase; }
.panel .body { padding: 6px; }
.path-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 2px; cursor: pointer; font: 500 12px/1.3 inherit; }
.path-row:hover { background: var(--bg-subtle); }
.path-row.selected { background: var(--color-primary-100); }
.path-row .icon { font-size: 14px; color: var(--color-primary-500); }
.path-row .name { color: var(--text-primary); flex: 1; }
.path-row .meta { font: 500 10px/1 inherit; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 0; padding: 12px; }Badge / Tag
.tag { padding: 2px 6px; font: 600 10px/1.3 inherit; letter-spacing: 0.02em; }
.tag-path { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-clip-mask { background: rgba(49,168,255,0.20); color: var(--color-info-fg); }
.tag-symbol { background: rgba(255,154,0,0.20); color: var(--color-primary-500); }
.tag-group { background: var(--bg-subtle); color: var(--text-primary); }
.tag-cloud { background: var(--color-success-bg); color: var(--color-success-fg); }Navigation (Menu bar + tool rail)
.menu-bar { background: var(--bg-elevated); padding: 6px 12px; display: flex; align-items: center; gap: 14px; color: var(--text-primary); border-bottom: 1px solid var(--border-default); font: 500 12px/1 inherit; }
.menu-bar .brand { width: 22px; height: 22px; background: var(--color-secondary-500); border: 1.5px solid var(--color-primary-500); border-radius: 3px; display: grid; place-items: center; font: 800 11px/1 inherit; color: var(--color-primary-500); }
.menu-bar .item { cursor: pointer; }
.menu-bar .item:hover { color: var(--color-primary-700); }
.tool-rail { width: 44px; background: var(--bg-elevated); padding: 6px 4px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border-default); }
.tool-rail .tool { width: 36px; height: 36px; border-radius: 2px; background: transparent; color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; font-size: 14px; }
.tool-rail .tool:hover { background: var(--bg-subtle); color: var(--text-primary); }
.tool-rail .tool.active { background: var(--color-primary-500); color: var(--text-on-primary); }Motion
Motion
--duration-fast: 80ms;
--duration-base: 160ms;
--duration-slow: 240ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);Anti-patterns
Anti-patterns
1. Ai 앱 타일의 오렌지·짙은 갈색 조합을 다른 제품 컬러로 대체 금지 2. 모든 패널을 오렌지로 채워 작업 콘텐츠보다 브랜드 컬러가 앞서게 하지 않기 3. UI 밝기와 캔버스 밝기를 하나의 고정 테마로 가정하지 않기 4. 앵커·방향선·핸들을 장식처럼 과도하게 사용하지 않기 5. 패널과 도구 버튼에 8px 이상의 소비자 앱형 라운드 사용 금지