ClickUp
전기 보라→블루·마젠타→오렌지 듀얼 그라데이션과 계층형 올인원 워크스페이스
Brand DNA
브랜드 DNA
- 브랜드명: ClickUp
- 한 줄 정체성: 프로젝트, 문서, 채팅, 캘린더, AI를 하나의 계층형 작업 공간으로 연결하는 올인원 생산성 플랫폼
- 공식 디자인 철학: 모든 사람과 에이전트의 생산성을 한 공간에서 극대화하고, 분절된 업무 흐름을 하나로 수렴한다.
- 시그니처 요소 1개: 전기 보라→블루와 마젠타→오렌지의 듀얼 그라데이션을 절제된 제품 UI의 핵심 액션과 ClickUp 심볼에 집중한다.
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 역동적, 연결감, 정밀함
- 무드 설명: 중성 캔버스와 얇은 경계선이 고밀도 업무 정보를 정리하고, 전기 보라·블루·마젠타·오렌지가 선택 상태와 핵심 액션을 선명하게 표시한다. 글로벌 내비게이션과 컨텍스트 사이드바의 이중 계층이 올인원 제품의 연결감을 만든다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Compact — List, Board, Calendar, Chat, Docs를 같은 작업 공간에서 빠르게 전환
- 모서리 성향: Soft (6~8px)
- 평면성: Subtle
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - ClickUp Electric Purple */
--color-primary-50: #F3F0FF;
--color-primary-100: #E6E0FE;
--color-primary-200: #CFC4FC;
--color-primary-300: #B39FFA;
--color-primary-400: #8E74F6;
--color-primary-500: #6647F0; /* 공식 보라→블루 그라데이션 시작점 */
--color-primary-600: #5738DB;
--color-primary-700: #472CB8;
--color-primary-800: #392692;
--color-primary-900: #2D216F;
/* Brand gradient endpoints */
--color-secondary-500: #FF02F0; /* 마젠타 */
--color-tertiary-500: #0091FF; /* 블루 */
--color-accent-500: #FC6D2D; /* 오렌지 */
/* Neutral */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F7F8FA;
--color-neutral-100: #F0F1F3;
--color-neutral-200: #E8E9EC;
--color-neutral-300: #D5D7DB;
--color-neutral-500: #8A8F98;
--color-neutral-700: #4B4F57;
--color-neutral-800: #34373D;
--color-neutral-900: #24262B;
--color-neutral-1000: #171719;
/* Semantic */
--color-success-bg: #E7F8F0;
--color-success-fg: #188A5B;
--color-warning-bg: #FFF0E8;
--color-warning-fg: #D95F20;
--color-error-bg: #FDEBEC;
--color-error-fg: #D83A40;
--color-info-bg: #EAF4FF;
--color-info-fg: #147DCC;
/* Surface */
--bg-base: #FFFFFF;
--bg-subtle: #F7F8FA;
--bg-elevated: #FFFFFF;
--bg-overlay: rgba(23,23,25,0.48);
/* Text */
--text-primary: #24262B;
--text-secondary: #4B4F57;
--text-tertiary: #737780;
--text-on-primary: #FFFFFF;
--text-disabled: #AEB1B7;
/* Border */
--border-default: #E1E3E6;
--border-subtle: #ECEDEF;
--border-strong: #C8CBD0;
--border-focus: #6647F0;
}
[data-theme="dark"] {
--color-primary-50: #211B43;
--color-primary-100: #2A2259;
--color-primary-200: #382C7A;
--color-primary-300: #4B399F;
--color-primary-400: #654BCB;
--color-primary-500: #8067F6;
--color-primary-600: #9B88FA;
--color-primary-700: #B6A9FC;
--color-primary-800: #D2CAFE;
--color-primary-900: #ECE9FF;
--color-secondary-500: #FF4DF4;
--color-tertiary-500: #3DA8FF;
--color-accent-500: #FF844E;
--color-neutral-0: #171719;
--color-neutral-50: #1C1C1F;
--color-neutral-100: #222225;
--color-neutral-200: #2B2B2F;
--color-neutral-300: #36363B;
--color-neutral-500: #73737D;
--color-neutral-700: #A1A1AA;
--color-neutral-800: #D0D0D5;
--color-neutral-900: #F0F0F2;
--color-neutral-1000: #FFFFFF;
--color-success-bg: #18372A;
--color-success-fg: #54D69A;
--color-warning-bg: #432A1F;
--color-warning-fg: #FF9D6B;
--color-error-bg: #432326;
--color-error-fg: #FF8589;
--color-info-bg: #173149;
--color-info-fg: #68B9F5;
--bg-base: #171719;
--bg-subtle: #1C1C1F;
--bg-elevated: #222225;
--bg-overlay: rgba(0,0,0,0.72);
--text-primary: #F7F7F8;
--text-secondary: #C4C4CA;
--text-tertiary: #92929B;
--text-on-primary: #FFFFFF;
--text-disabled: #616169;
--border-default: #36363B;
--border-subtle: #2B2B2F;
--border-strong: #4A4A50;
--border-focus: #8067F6;
}Typography
타이포그래피
- 폰트 페어링:
- 영문: Plus Jakarta Sans (헤드라인, OFL) + Inter (제품 UI·본문, OFL)
- 한글: Pretendard (OFL)
- 위계:
- Display: 56px / 800 / 1.05 / -0.02em
- H1: 36px / 700 / 1.15 / -0.01em
- H2: 24px / 700 / 1.25 / 0
- H3: 18px / 600 / 1.3 / 0
- Body Large: 16px / 400 / 1.5 / 0
- Body: 14px / 400 / 1.43 / 0
- Body Small: 12px / 400 / 1.33 / 0
- Caption: 11px / 600 / 1.27 / 0.04em
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 40px; --space-3xl: 64px;`` - Container: max-width 1280px, 좌우 패딩 24px
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-full: 9999px;Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.14);
--shadow-xl: 0 20px 40px rgba(102,71,240,0.18);Iconography
Iconography
- 스타일: Outline (sharp ramp) + Filled
- Stroke 굵기: 1.5~2px
- 모서리 처리: Round
- 추천 라이브러리: Lucide / Phosphor
Component Guide
컴포넌트 가이드
Button
.btn {
font: 600 13px/1 Inter, 'Pretendard', sans-serif;
border-radius: var(--radius-lg);
padding: 0 14px;
height: 34px;
display: inline-flex; align-items: center; gap: 6px;
border: 0;
transition: background 100ms ease;
}
.btn-primary { background: var(--color-primary-500); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { filter: brightness(0.95); }
.btn-primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); filter: none; }
.btn-secondary { background: var(--bg-base); 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-500); }
.btn-ghost:hover { background: var(--color-primary-50); }
.btn-danger { background: var(--color-error-fg); color: #fff; }Input
.input {
background: var(--bg-base);
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
padding: 6px 10px;
height: 32px;
font-size: 13px;
}
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(102,71,240,0.18); }Card
.card { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px; }
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-outlined { box-shadow: none; }Badge / Priority pill
.tag { padding: 0 6px; height: 18px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; line-height: 18px; display: inline-flex; align-items: center; }
.tag-urgent { background: var(--color-error-bg); color: var(--color-error-fg); }
.tag-high { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.tag-normal { background: var(--color-info-bg); color: var(--color-info-fg); }
.tag-low { background: var(--color-success-bg); color: var(--color-success-fg); }
.tag-solid { background: var(--color-primary-500); color: #fff; }
.tag-subtle { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-default); color: var(--text-primary); }Navigation (Sidebar)
.sidebar { width: 240px; background: var(--bg-subtle); padding: 12px; border-right: 1px solid var(--border-subtle); height: 100vh; }
.sidebar .item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-md); color: var(--text-primary); font-size: 13px; }
.sidebar .item:hover { background: var(--bg-elevated); }
.sidebar .item.active { background: rgba(102,71,240,0.10); color: var(--color-primary-700); font-weight: 600; }Motion
Motion
--duration-fast: 100ms;
--duration-base: 200ms;
--duration-slow: 350ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);Anti-patterns
Anti-patterns
1. 네 가지 브랜드 컬러를 모든 컴포넌트에 동시에 사용 금지 — 듀얼 그라데이션은 로고, AI, 핵심 액션에만 집중 2. Global Navigation / Sidebar / Space / Folder / List / Task 위계를 한 단계로 평면화 금지 3. ClickUp 심볼의 위쪽 화살표와 아래쪽 곡선의 비율·방향·그라데이션을 임의 변경 금지 4. 고밀도 제품 UI 전체에 Plus Jakarta Sans Display를 사용 금지 — 헤드라인 외에는 Inter 계열 사용 5. 다크 모드에서 상태색·아바타까지 무채색으로 바꾸거나, 라이트 토큰을 그대로 사용해 대비를 낮추는 패턴 금지