Color
UI 계층·포맷 아이덴티티·AI 기능을 하나의 색 체계로 표현해요.
색상의 세 가지 책임
Word·Sheet·Slide 를 아우르는 제품군이라 색 체계 하나가 세 맥락을 맡아요.
책임 01
UI 계층 표현
텍스트 강조도, 배경 깊이, 선 강도를 색으로 나눠 정보 위계를 드러내요.
책임 02
포맷 앱 아이덴티티
포맷마다 고유 색이 있어 어떤 파일을 다루는지 색만으로 알 수 있어요.
책임 03
AI 기능 구분
보라색은 AI 기능 전용이에요. 어시스턴트·생성 콘텐츠에 일관되게 쓰고, 장식엔 쓰지 않아요.
토큰 명명 규칙
토큰 이름은 category / role / variant 세 칸이에요. 예: accent/brand/normal → CSS 변수 --color-accent-normal
| 자리 | 의미 | 예 |
|---|---|---|
| Category | 색상의 쓰임새 | label · accent · fill · line · background · layer · static · interaction |
| Role | 세부 역할 | brand · action · ai · link · format/word · plan/pro |
| Variant | 강도 단계 | neutral · normal · strong · inverse |
| State | variant 뒤에 언더스코어로 붙는 상태 | accent/ai/ai_hover · accent/ai/ai_pressed |
Semantic → Primitive 계층
컴포넌트는 Semantic 토큰만 쓰고, Semantic 이 Primitive 를 참조해요. 리브랜딩·다크 모드는 그 아래 층에서만 바뀌어요.
| 계층 | 설명 | 예 |
|---|---|---|
| Semantic | 역할 기반 토큰. 컴포넌트에 직접 써요. | --color-accent-normal |
| Primitive | 팔레트 원시값. 컴포넌트에 직접 쓰지 않아요. | --primitive-po-blue-60 |
관련 문서
컴포넌트와 화면에 직접 쓰는 Semantic 토큰 전체예요. 이름이 곧 쓰임이고, 값은 테마에 따라 바뀌어요.
Property
카테고리마다 아래 세 속성 중 하나에 대응해요.
- fg: 전경 (텍스트·아이콘)
- bg: 배경 (채움·서피스)
- stroke: 선·테두리
| 카테고리 | 속성 | 설명 |
|---|---|---|
label | fg | 텍스트, 아이콘 등 전경 요소 |
accent | fg / bg | 브랜드·강조 색상. 텍스트와 배경 양쪽에 사용 |
fill | bg | UI 요소 배경 채움 |
background, layer | bg | 화면 전체 배경 및 레이어 서피스 |
line | stroke | 구분선, 테두리 |
interaction | bg overlay | 호버·클릭 상태의 오버레이 |
static | fg / bg | 라이트·다크 무관하게 고정 |
Role
Label
텍스트와 아이콘의 전경색이에요. 강조도 5단계.
label강조도 높음 → 낮음 순
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
label/normal--color-label-normal | #26282b | 기본 텍스트 및 아이콘. 가장 높은 강조도 | fg |
label/neutral--color-label-neutral | #454c53 | 중간 강도. 삼단 이상의 정보 위계에서 사용 | fg |
label/alternative--color-label-alternative | #72787f | 부가적·약한 강도의 텍스트 | fg |
label/assistive--color-label-assistive | #9ea4aa | 가장 약한 보조 텍스트. 플레이스홀더 등 | fg |
label/inverse--color-label-inverse | #ffffff | 어두운 배경 위 반전 텍스트 (툴팁, 토스트 등) | fg |
Accent
브랜드와 핵심 액션을 강조하는 색이에요. Brand·Action·Format·Plan·AI·Link 6역할.
accent/brand브랜드 블루. 주요 액션과 정보 강조
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
accent/brand/neutral--color-accent-neutral | #60a5fa | 인터랙션 없이 표시만 할 때 | fg |
accent/brand/normal--color-accent-normal | #1d7ff9 | 기본 브랜드 색. 아이콘·버튼에 써요. 링크는 accent/link | fg |
accent/brand/strong--color-accent-strong | #1458ad | 더 강한 강조. hover·pressed 상태 등 | fg |
accent/actionCTA 버튼 배경색. 검정 계열 고정
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
accent/action/normal--color-action-normal | #000000 | Primary 버튼 배경 (Black 버튼) | bg |
accent/action/strong--color-action-strong | #454c53 | 버튼 hover·pressed 상태 | bg |
accent/aiAI 기능 전용 보라색 계열
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
accent/ai/normal--color-ai-normal | #6f3ad0 | AI 기능 기본 강조색 | fg |
accent/ai/strong--color-ai-strong | #511bb2 | 더 강한 강조 | fg |
accent/ai/ai_hover--color-ai-hover | #f5f1fd | AI 요소 hover 배경 오버레이 | bg |
accent/ai/ai_pressed--color-ai-pressed | #e0d1ff | AI 요소 pressed 배경 오버레이 | bg |
accent/link하이퍼링크 전용
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
accent/link/normal--color-link-normal | #1d7ff9 | 기본 링크 색상 | fg |
accent/link/strong--color-link-strong | #1458ad | 강조 링크 | fg |
accent/link/visited--color-link-visited | #404dc2 | 방문한 링크 | fg |
State
신규 알림이나 오류 등 시스템 상태를 전달하는 색상이에요.
state
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
state/new--color-state-new | #fb4949 | 신규 콘텐츠·알림 뱃지 | bg |
state/error--color-state-error | #f95c5c | 오류 메시지, 에러 상태 표시 | fg |
Fill
요소 배경을 채우는 색이에요. neutral → normal → strong 순으로 진해져요.
fill강도 약함 → 강함
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
fill/neutral--color-fill-neutral | #f7f8f9 | 가장 연한 배경. 비활성 영역, 코드 블록 등 | bg |
fill/normal--color-fill-normal | #f2f4f6 | 일반 배경 채움. 입력 필드, 칩, 태그 등 | bg |
fill/strong--color-fill-strong | #e8ebed | 강조된 채움. 눌린 상태, 선택된 배경 등 | bg |
Line
구분선과 컴포넌트 테두리에 사용하는 색상이에요.
line강도 약함 → 강함
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
line/neutral--color-line-neutral | #e8ebed | 가장 연한 구분선. 카드 테두리, 구분자 | stroke |
line/normal--color-line-normal | #c9cdd2 | 일반 테두리. 입력 필드, 버튼 외곽선 | stroke |
line/strong--color-line-strong | #b3b8bd | 강조 테두리. 포커스, 선택 상태 | stroke |
Interaction
hover·pressed 때 요소 위에 덧씌우는 반투명 오버레이예요.
interaction
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
interaction/hover--color-interaction-hover | #f2f4f6 | 마우스 오버 상태 | bg |
interaction/pressed--color-interaction-pressed | #e8ebed | 클릭·탭 상태 | bg |
Background & Layer
앱 전체의 배경 레이어를 구성하는 색상이에요.
background / layer
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
background/base--color-background-base | #ffffff | 앱 전체 기본 배경 | bg |
layer/surface--color-layer-surface | #ffffff | 카드, 시트, 모달 등 떠 있는 레이어 배경 | bg |
layer/overlay--color-layer-overlay | #000000 · 50% | 모달·다이얼로그 뒤 딤 처리 | bg |
Static
라이트·다크 모드에 관계없이 항상 고정된 색상이에요.
static
| 토큰 | 값 | 설명 | 속성 |
|---|---|---|---|
static/white--color-static-white | #ffffff | 항상 흰색으로 고정. 어두운 배경 위 요소 등 | fg / bg |
static/black--color-static-black | #000000 | 항상 검정으로 고정. 아이콘, 특수 버튼 등 | fg / bg |
Variant (변형)
같은 역할이라도 강조 강도에 따라 단계가 나뉘어요.
| 카테고리 | 단계 (약함 → 강함) | 비고 |
|---|---|---|
label | assistive → alternative → neutral → normal → inverse | inverse는 반전(dark bg 위) |
accent/brand | neutral → normal → strong | neutral = 비강조 표시용 |
fill | neutral → normal → strong | 채움 강도 |
line | neutral → normal → strong | 테두리 강도 |
accent/action | normal → strong | strong = hover/pressed 용 |
포맷 앱 색상
포맷 구분과 포맷별 화면에 써요. 포맷마다 주색·hover·pressed와 다크 보정 -adaptive 2종, 총 5토큰이에요.
| 포맷 | normal | hover | pressed | hover‑adaptive | pressed‑adaptive |
|---|---|---|---|---|---|
Word--color-format-word | #1d7ff9 | #d9eaff | #bbd8fd | ||
Sheet--color-format-sheet | #51b41b | #dcf1d1 | #cae8ba | ||
Slide--color-format-slide | #fd8900 | #fde5c8 | #fedbb2 | ||
PDF--color-format-pdf | #f95c5c | #ffe3e3 | #fdcece | ||
Image--color-format-image | #00badb | #d2f4fa | #abebf6 | ||
Note--color-format-note | #f2b50b | #fcefca | #fae6af |
-adaptive 는 다크 모드에서만 회색톤으로 바뀌어요.
구독 플랜 색상
요금제 뱃지·업셀·잠금 UI에서 글자색 --color-plan-{name} 과 10% 배경 -bg 를 쌍으로 써요.
| 요금제 | 글자색 | 배경 (10%) |
|---|---|---|
| Basic | --color-plan-basic #449916 | --color-plan-basic-bg #009b001a |
| Smart | --color-plan-smart #1d7ff9 | --color-plan-smart-bg #0081ff1a |
| Pro | --color-plan-pro #0046b9 | --color-plan-pro-bg #0047c01a |
| Business | --color-plan-business #2baff4 | --color-plan-business-bg #00b2fa1a |
| AI | --color-plan-ai #6f3ad0 | --color-plan-ai-bg #7736d81a |
| Orange | --color-plan-orange #d77400 | --color-plan-orange-bg #e66d001a |
AI 전용 색상
보라색은 AI 기능에만 써요. 어시스턴트·생성 콘텐츠·AI 툴바에 accent/ai 를 일관되게 쓰고, 다른 요소엔 쓰지 않아요.
| 토큰 | 값 | 용도 |
|---|---|---|
Normal--color-ai-normal | #6f3ad0 | 주요 AI 액션·핵심 요소 |
Strong--color-ai-strong | #511bb2 | 강조·상호작용 상태 |
Hover--color-ai-hover | #f5f1fd | hover 배경 |
Pressed--color-ai-pressed | #e0d1ff | pressed·선택 배경 |
Semantic 토큰이 참조하는 Primitive 스케일이에요. 컴포넌트에는 hex 대신 Semantic 탭의 토큰을 써요.
Palette (Primitive)
Base
Black
White
Gray
10
20
30
40
50
60
70
80
90
PO Dark Blue
05
10
20
30
40
50
60
70
80
90
PO Blue
05
10
20
30
40
50
60
70
80
90
PO Green
05
10
20
30
40
50
60
70
80
90
PO Orange
05
10
20
30
40
50
60
70
80
90
PO Red
05
10
20
30
40
50
60
70
80
90
PO AI Purple
05
10
20
30
40
50
60
70
80
90
Sky Blue
05
10
20
30
40
50
60
70
80
90
Blue
05
10
20
30
40
50
60
70
80
90
Violet
05
10
20
30
40
50
60
70
80
90
Yellow
05
10
20
30
40
50
60
70
80
90
Cyan
05
10
20
30
40
50
60
70
80
90
Etc
Neutral warm gray
Red
Darkmode Gray
10
20
30
40
50
55
60
70
80
90
95
Tokens
Primitive 값과 그것을 참조하는 Semantic 토큰이에요. 참조가 없으면 아직 안 쓰는 예비 색이에요.
| 이름 | 값 | 참조하는 Semantic 토큰 |
|---|---|---|
--primitive-black | #000000 | --color-static-black --color-action-normal |
--primitive-white | #ffffff | --color-static-white --color-label-inverse --color-background-base --color-layer-surface --color-action-normal |
--primitive-gray-10 | #f7f8f9 | --color-fill-neutral |
--primitive-gray-20 | #f2f4f6 | --color-interaction-hover --color-fill-normal --color-action-strong |
--primitive-gray-30 | #e8ebed | --color-interaction-pressed --color-line-neutral --color-fill-strong |
--primitive-gray-40 | #c9cdd2 | --color-line-normal |
--primitive-gray-50 | #b3b8bd | --color-line-strong |
--primitive-gray-60 | #9ea4aa | --color-label-assistive |
--primitive-gray-70 | #72787f | --color-label-alternative |
--primitive-gray-80 | #454c53 | --color-action-strong --color-label-neutral |
--primitive-gray-90 | #26282b | --color-label-normal |
--primitive-po-dark-blue-05 | #e5ecf8 | 없음 |
--primitive-po-dark-blue-10 | #d1dff7 | 없음 |
--primitive-po-dark-blue-20 | #b2c7ea | 없음 |
--primitive-po-dark-blue-30 | #7fa2dc | 없음 |
--primitive-po-dark-blue-40 | #4c7dce | 없음 |
--primitive-po-dark-blue-50 | #0046b9 | --color-plan-pro |
--primitive-po-dark-blue-60 | #003b9d | 없음 |
--primitive-po-dark-blue-70 | #003081 | 없음 |
--primitive-po-dark-blue-80 | #002665 | 없음 |
--primitive-po-dark-blue-90 | #001c4a | 없음 |
--primitive-po-blue-05 | #e8f2fe | 없음 |
--primitive-po-blue-10 | #d9eaff | --color-format-word-hover --color-format-word-hover-adaptive |
--primitive-po-blue-20 | #bbd8fd | --color-format-word-pressed --color-format-word-pressed-adaptive |
--primitive-po-blue-30 | #8ebffc | 없음 |
--primitive-po-blue-40 | #60a5fa | --color-accent-neutral --color-accent-strong --color-link-strong |
--primitive-po-blue-50 | #1d7ff9 | --color-accent-normal --color-format-word --color-plan-smart --color-link-normal |
--primitive-po-blue-60 | #186cd3 | 없음 |
--primitive-po-blue-70 | #1458ad | --color-accent-strong --color-link-strong --color-accent-neutral |
--primitive-po-blue-80 | #0f4588 | 없음 |
--primitive-po-blue-90 | #0b3263 | 없음 |
--primitive-po-green-05 | #edf7e8 | 없음 |
--primitive-po-green-10 | #dcf1d1 | --color-format-sheet-hover --color-format-sheet-hover-adaptive |
--primitive-po-green-20 | #cae8ba | --color-format-sheet-pressed --color-format-sheet-pressed-adaptive |
--primitive-po-green-30 | #a8d98d | 없음 |
--primitive-po-green-40 | #85ca5f | 없음 |
--primitive-po-green-50 | #51b41b | --color-format-sheet |
--primitive-po-green-60 | #449916 | --color-plan-basic |
--primitive-po-green-70 | #387d12 | 없음 |
--primitive-po-green-80 | #2c620e | 없음 |
--primitive-po-green-90 | #20480a | 없음 |
--primitive-po-orange-05 | #fef3e5 | 없음 |
--primitive-po-orange-10 | #fde5c8 | --color-format-slide-hover --color-format-slide-hover-adaptive |
--primitive-po-orange-20 | #fedbb2 | --color-format-slide-pressed --color-format-slide-pressed-adaptive |
--primitive-po-orange-30 | #fec47f | 없음 |
--primitive-po-orange-40 | #fdac4c | 없음 |
--primitive-po-orange-50 | #fd8900 | --color-format-slide |
--primitive-po-orange-60 | #d77400 | --color-plan-orange |
--primitive-po-orange-70 | #b05f00 | 없음 |
--primitive-po-orange-80 | #8a4b00 | 없음 |
--primitive-po-orange-90 | #653600 | 없음 |
--primitive-po-red-05 | #feeeee | 없음 |
--primitive-po-red-10 | #ffe3e3 | --color-format-pdf-hover --color-format-pdf-hover-adaptive |
--primitive-po-red-20 | #fdcece | --color-format-pdf-pressed --color-format-pdf-pressed-adaptive |
--primitive-po-red-30 | #fcadad | 없음 |
--primitive-po-red-40 | #fa8c8c | 없음 |
--primitive-po-red-50 | #f95c5c | --color-format-pdf --color-state-error |
--primitive-po-red-60 | #d34e4e | 없음 |
--primitive-po-red-70 | #ad4040 | 없음 |
--primitive-po-red-80 | #883232 | 없음 |
--primitive-po-red-90 | #632424 | 없음 |
--primitive-po-ai-purple-05 | #f5f1fd | --color-ai-hover |
--primitive-po-ai-purple-10 | #ede5fe | 없음 |
--primitive-po-ai-purple-20 | #e0d1ff | --color-ai-pressed |
--primitive-po-ai-purple-30 | #c6a9ff | 없음 |
--primitive-po-ai-purple-40 | #9d75ec | 없음 |
--primitive-po-ai-purple-50 | #6f3ad0 | --color-plan-ai --color-ai-normal |
--primitive-po-ai-purple-60 | #602bc1 | 없음 |
--primitive-po-ai-purple-70 | #511bb2 | --color-ai-strong --color-ai-pressed |
--primitive-po-ai-purple-80 | #3e0f8d | 없음 |
--primitive-po-ai-purple-90 | #20075c | 없음 |
--primitive-sky-blue-05 | #e9f7fd | 없음 |
--primitive-sky-blue-10 | #d6f0fe | 없음 |
--primitive-sky-blue-20 | #bfe7fb | 없음 |
--primitive-sky-blue-30 | #95d7f9 | 없음 |
--primitive-sky-blue-40 | #6ac7f7 | 없음 |
--primitive-sky-blue-50 | #2baff4 | --color-plan-business |
--primitive-sky-blue-60 | #2494cf | 없음 |
--primitive-sky-blue-70 | #1e7aaa | 없음 |
--primitive-sky-blue-80 | #176085 | 없음 |
--primitive-sky-blue-90 | #114661 | 없음 |
--primitive-blue-05 | #edeefc | 없음 |
--primitive-blue-10 | #dee0ff | 없음 |
--primitive-blue-20 | #c9cdf7 | 없음 |
--primitive-blue-30 | #a5adf2 | 없음 |
--primitive-blue-40 | #818cec | 없음 |
--primitive-blue-50 | #4c5be5 | 없음 |
--primitive-blue-60 | #404dc2 | 없음 |
--primitive-blue-70 | #353f9f | 없음 |
--primitive-blue-80 | #29317d | 없음 |
--primitive-blue-90 | #1e245b | 없음 |
--primitive-violet-05 | #eeecf9 | 없음 |
--primitive-violet-10 | #e0daf8 | 없음 |
--primitive-violet-20 | #cec7ed | 없음 |
--primitive-violet-30 | #ada3e2 | 없음 |
--primitive-violet-40 | #8c7ed7 | 없음 |
--primitive-violet-50 | #5c47c6 | 없음 |
--primitive-violet-60 | #4e3ca8 | 없음 |
--primitive-violet-70 | #40318a | 없음 |
--primitive-violet-80 | #32266c | 없음 |
--primitive-violet-90 | #241c4f | 없음 |
--primitive-yellow-05 | #fffaeb | 없음 |
--primitive-yellow-10 | #fcefca | --color-format-note-hover --color-format-note-hover-adaptive |
--primitive-yellow-20 | #fae6af | --color-format-note-pressed --color-format-note-pressed-adaptive |
--primitive-yellow-30 | #fcda7b | 없음 |
--primitive-yellow-40 | #f8c22e | 없음 |
--primitive-yellow-50 | #f2b50b | --color-format-note |
--primitive-yellow-60 | #d79e00 | 없음 |
--primitive-yellow-70 | #b08100 | 없음 |
--primitive-yellow-80 | #8a6500 | 없음 |
--primitive-yellow-90 | #654a00 | 없음 |
--primitive-cyan-05 | #e6f9fd | 없음 |
--primitive-cyan-10 | #d2f4fa | --color-format-image-hover --color-format-image-hover-adaptive |
--primitive-cyan-20 | #abebf6 | --color-format-image-pressed --color-format-image-pressed-adaptive |
--primitive-cyan-30 | #66daf2 | 없음 |
--primitive-cyan-40 | #33cded | 없음 |
--primitive-cyan-50 | #00badb | --color-format-image |
--primitive-cyan-60 | #0095b1 | 없음 |
--primitive-cyan-70 | #00758e | 없음 |
--primitive-cyan-80 | #005c70 | 없음 |
--primitive-cyan-90 | #003f4d | 없음 |
--primitive-etc-neutral-warm-gray | #f0f0f0 | 없음 |
--primitive-etc-red | #fb4949 | --color-state-new |
--primitive-darkmode-gray-10 | #d8d8d8 | 없음 |
--primitive-darkmode-gray-20 | #9e9e9e | 없음 |
--primitive-darkmode-gray-30 | #797979 | 없음 |
--primitive-darkmode-gray-40 | #6b6b6b | 없음 |
--primitive-darkmode-gray-50 | #595959 | 없음 |
--primitive-darkmode-gray-55 | #4a4a4a | 없음 |
--primitive-darkmode-gray-60 | #3b3b3b | 없음 |
--primitive-darkmode-gray-70 | #2d2d2d | 없음 |
--primitive-darkmode-gray-80 | #282828 | 없음 |
--primitive-darkmode-gray-90 | #232323 | 없음 |
--primitive-darkmode-gray-95 | #1c1c1c | 없음 |