Affinity
Vector·Pixel·Layout을 한 파일에서 전환하는 맞춤형 Studio 작업공간
Brand DNA
브랜드 DNA
- 브랜드명: Affinity
- 한 줄 정체성: 벡터 디자인·사진 편집·페이지 레이아웃을 하나의 고성능 데스크톱 앱과 파일 흐름으로 통합한 전문 크리에이티브 도구
- 공식 디자인 철학: “One app to craft it all” — 앱을 바꾸거나 흐름을 끊지 않고 디자인·편집·출판하며, 작업공간은 창작자에게 맞춰 재구성한다.
- 시그니처 요소 1개: 상단의 Vector · Pixel · Layout Studio 전환기. 같은 문서에서 도구 discipline을 즉시 바꾸고, 필요한 도구만 섞은 Custom Studio까지 저장·공유한다.
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 통합형, 정밀함, 맞춤형
- 무드 설명: 따뜻한 무채색 셸과 작고 정밀한 컨트롤이 작품 캔버스를 둘러싼다. 새 Affinity Lime은 브랜드 순간에 선명하게 쓰고, 실제 편집 UI에서는 콘텐츠와 도구 상태가 우선한다. Light UI와 Dark UI 모두 밝기 조절을 지원한다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Compact — 전문 편집기의 많은 도구와 패널을 화면 가장자리에 효율적으로 배치
- 모서리 성향: Soft (4~8px) — Studio 탭과 입력 컨트롤은 작고 부드럽게, 캔버스와 패널 경계는 절제
- 평면성: Subtle — 1px 경계와 낮은 elevation으로 패널 위계를 구분
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary — 2025 Affinity Lime identity */
--color-primary-50: #F5FDEB;
--color-primary-100: #E9FBD9;
--color-primary-200: #D4F8BB;
--color-primary-300: #BEF49A;
--color-primary-400: #AFF27F;
--color-primary-500: #A7F175;
--color-primary-600: #84CE55;
--color-primary-700: #62A63B;
--color-primary-800: #477A2B;
--color-primary-900: #2D4F1C;
/* Studio/action accents — content 작업 상태 */
--color-secondary-500: #6687FF;
--color-vector-500: #6687FF;
--color-pixel-500: #F269A5;
--color-layout-500: #8B5CF6;
--color-ai-500: #00B8A9;
/* Neutral — warm light interface */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F5F5F3;
--color-neutral-100: #ECEBE8;
--color-neutral-200: #D6D2CC;
--color-neutral-300: #B6B1AC;
--color-neutral-500: #7D7874;
--color-neutral-700: #494444;
--color-neutral-800: #312D2D;
--color-neutral-900: #211D1D;
--color-neutral-1000: #151212;
/* Semantic */
--color-success-bg: #E8F8DE;
--color-success-fg: #39751F;
--color-warning-bg: #FFF2D4;
--color-warning-fg: #8A5A00;
--color-error-bg: #FDE7E7;
--color-error-fg: #B83B3B;
--color-info-bg: #E9EEFF;
--color-info-fg: #3655C7;
/* Surface — Light UI */
--bg-base: #F5F5F3;
--bg-subtle: #ECEBE8;
--bg-elevated: #FFFFFF;
--bg-panel: #F9F9F7;
--bg-canvas: #B6B3AE;
--bg-overlay: rgba(33,29,29,0.62);
/* Text */
--text-primary: #211D1D;
--text-secondary: #494444;
--text-tertiary: #7D7874;
--text-on-primary: #211D1D;
--text-disabled: #B6B1AC;
/* Border */
--border-default: #D6D2CC;
--border-subtle: #E5E2DE;
--border-strong: #B6B1AC;
--border-focus: #6687FF;
}
[data-theme="dark"] {
--bg-base: #211D1D;
--bg-subtle: #272323;
--bg-elevated: #312D2D;
--bg-panel: #2B2727;
--bg-canvas: #151212;
--bg-overlay: rgba(0,0,0,0.78);
--text-primary: #F5F5F5;
--text-secondary: #D6D2CC;
--text-tertiary: #B6B1AC;
--text-disabled: #6E6966;
--border-default: #494444;
--border-subtle: #3B3636;
--border-strong: #6E6966;
}Typography
타이포그래피
- 폰트 페어링:
- 한글: Pretendard (OFL) / Noto Sans KR (OFL)
- 영문: Inter (OFL, 제품 UI 재현용 시스템 폴백)
- 위계:
- Display: 36px / 700 / 1.10 / -0.025em
- H1: 24px / 650 / 1.18 / -0.015em
- H2: 18px / 650 / 1.25 / -0.01em
- H3: 14px / 650 / 1.30 / 0
- Body Large: 14px / 400 / 1.50 / 0
- Body: 12px / 400 / 1.42 / 0
- Body Small: 11px / 450 / 1.35 / 0
- Caption: 10px / 600 / 1.30 / 0.04em
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css :root { --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px; }`` - Container: 편집기는 full-bleed, 패널 내부 8~12px, 마케팅·학습 콘텐츠는 max-width 1200px / 좌우 24px
Border Radius
Border Radius
:root {
--radius-none: 0;
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;
}Shadow / Elevation
Shadow / Elevation
:root {
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(33,29,29,0.10); /* 입력·작은 팝오버 */
--shadow-md: 0 5px 16px rgba(33,29,29,0.16); /* 플로팅 패널 */
--shadow-lg: 0 16px 36px rgba(33,29,29,0.22); /* 모달·내보내기 대화상자 */
--shadow-xl: 0 28px 60px rgba(33,29,29,0.28); /* 전체 화면 오버레이 */
}Iconography
Iconography
- 스타일: Outline 중심, 선택 도구는 Filled 상태 병행
- Stroke 굵기: 1.5px
- 모서리 처리: Round
- 추천 라이브러리: Lucide / Phosphor (실제 제품의 단색 도구 아이콘과 가까운 커스텀 세트)
Component Guide
컴포넌트 가이드 (상태별 CSS)
Button
.btn {
min-height: 30px; padding: 0 11px; border: 1px solid transparent;
border-radius: var(--radius-md); display: inline-flex; align-items: center;
justify-content: center; gap: 6px; font: 600 12px/1 Inter, 'Pretendard', sans-serif;
cursor: pointer; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-400); }
.btn-primary:active { background: var(--color-primary-600); transform: translateY(1px); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-secondary:active { border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn-danger:hover { filter: brightness(1.08); }
.btn:disabled { background: var(--bg-subtle); color: var(--text-disabled); border-color: transparent; cursor: not-allowed; transform: none; }
.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--text-on-primary); border-right-color: transparent; border-radius: 50%; animation: affinity-spin .7s linear infinite; }Input
.input {
height: 28px; padding: 0 8px; background: var(--bg-elevated); color: var(--text-primary);
border: 1px solid var(--border-default); border-radius: var(--radius-sm);
font: 450 12px/1 Inter, 'Pretendard', sans-serif;
}
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px color-mix(in srgb,var(--border-focus) 22%,transparent); }
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }Card / Panel
.feature-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-lg); }
.feature-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.feature-card.emphasis { border-color: var(--color-primary-600); box-shadow: inset 3px 0 0 var(--color-primary-500); }
.feature-card.outlined { background: transparent; box-shadow: none; }
.panel { background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.panel-head { min-height: 30px; padding: 0 9px; display: flex; align-items: center; border-bottom: 1px solid var(--border-default); font: 650 10px/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; }Badge / Tag
.tag { min-height: 20px; padding: 0 7px; border-radius: var(--radius-full); display: inline-flex; align-items: center; font: 650 10px/1 Inter, sans-serif; }
.tag-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-subtle { background: var(--color-primary-100); color: var(--color-primary-900); }
.tag-outline { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }Navigation — Studio switcher
.studio-switcher { min-height: 38px; padding: 4px 8px; display: flex; align-items: center; gap: 3px; background: var(--bg-elevated); border-bottom: 1px solid var(--border-default); }
.studio-tab { min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font: 600 11px/1 Inter, sans-serif; }
.studio-tab:hover { background: var(--bg-subtle); color: var(--text-primary); }
.studio-tab[aria-selected="true"] { background: var(--text-primary); color: var(--bg-elevated); }
.studio-tab.ai::before { content: "✦"; color: var(--color-ai-500); margin-right: 5px; }Motion
Motion
:root {
--duration-fast: 90ms;
--duration-base: 160ms;
--duration-slow: 260ms;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes affinity-spin { to { transform: rotate(360deg); } }Anti-patterns
Anti-patterns
1. Photo·Designer·Publisher를 서로 다른 앱/3색 탭으로 표현하지 않는다 — 현재 제품은 Vector·Pixel·Layout이 한 앱 안의 Studio다. 2. Affinity Lime을 모든 선택 상태와 긴 본문에 과용하지 않는다 — 브랜드 신호와 핵심 CTA에 제한한다. 3. 캔버스보다 패널을 더 화려하거나 대비 높게 만들지 않는다 — 작품이 언제나 시각적 주인공이다. 4. 도구 아이콘마다 임의의 제품 컬러를 부여하지 않는다 — 현행 UI의 단색 아이콘과 명확한 선택 상태를 유지한다. 5. Light UI와 Dark UI 중 하나만 가능한 것처럼 문서화하지 않는다 — 두 인터페이스 모두 공식 지원하며 밝기 조절이 가능하다.