Foundations
Color
Primitive 14 hue × 14단계 + semantic + chat 특수 토큰
PDS의 색은 세 층으로 구성된다.
- Primitive — 14 hue × 14단계의 atomic 팔레트. 직접 소비 금지, semantic 계층이 참조.
- Semantic — 의미 단위 토큰. 컴포넌트는 여기만 참조한다. 브랜드 값 교체는 primitive에서 한 번에 끝나므로 semantic 이름은 불변.
- Chat — AI/Agent UI 전용. 별도 AI 카테고리 대신 semantic alias + 전용 glow 한 종.
현재
blue.50 = #0066FF는 The Pluto 브랜드 확정 전 잠정값. 확정 시 primitive 값만 교체하며, semantic 이름은 불변.
Primitive 팔레트
Hue 14종 × 단계(주로 10/20/.../90/95/99). 이름 규칙: --pds-color-{hue}-{step}.
Blue ★ primary
10
20
30
40
45
50
55
60
65
70
80
90
95
99
Neutral
5
10
15
20
22
30
40
50
60
70
80
90
95
99
Cool Neutral
5
7
10
15
17
20
22
23
25
30
40
50
60
70
80
90
95
96
97
98
99
Common
0
100
Red
10
20
30
40
50
60
70
80
90
95
99
Green
10
20
30
40
50
60
70
80
90
95
99
Orange
10
20
30
39
40
50
60
70
80
90
95
99
Violet
10
20
30
40
45
50
60
70
80
90
95
99
Pink
10
20
30
40
46
50
60
70
80
90
95
99
Cyan
10
20
30
40
50
60
70
80
90
95
99
Light Blue
10
20
30
40
50
60
70
80
90
95
99
Red Orange
10
20
30
40
48
50
60
70
80
90
95
99
Lime
10
20
30
37
40
50
60
70
80
90
95
99
Purple
10
20
30
40
50
60
70
80
90
95
99
Semantic 토큰
컴포넌트가 참조하는 실사용 계층. 값 대부분은 primitive의 참조, 일부는 color-mix()로 알파를 섞는다.
Primary
- primary-normal
--pds-primary-normal브랜드 기본 (cool-neutral.15) - primary-strong
--pds-primary-strong - primary-heavy
--pds-primary-heavy - focus-ring
--pds-focus-ring포커스 전용 (blue.50)
Label
- label-normal
--pds-label-normal본문 기본 - label-strong
--pds-label-strong - label-neutral
--pds-label-neutralalpha 88% - label-alternative
--pds-label-alternativealpha 61% - label-assistive
--pds-label-assistivealpha 28% - label-disable
--pds-label-disablealpha 16%
Background
- background-normal-normal
--pds-background-normal-normal - background-normal-alternative
--pds-background-normal-alternative - background-elevated-normal
--pds-background-elevated-normal - background-elevated-alternative
--pds-background-elevated-alternative - background-transparent-normal
--pds-background-transparent-normalalpha 8% - background-transparent-alternative
--pds-background-transparent-alternativealpha 28%
Interaction
- interaction-inactive
--pds-interaction-inactive - interaction-disable
--pds-interaction-disable
Line
- line-normal-normal
--pds-line-normal-normalalpha - line-normal-neutral
--pds-line-normal-neutralalpha - line-normal-alternative
--pds-line-normal-alternativealpha - line-solid-normal
--pds-line-solid-normal - line-solid-neutral
--pds-line-solid-neutral - line-solid-alternative
--pds-line-solid-alternative
Status
- status-positive
--pds-status-positive - status-cautionary
--pds-status-cautionary - status-negative
--pds-status-negative
Accent · Background
- accent-background-red-orange
--pds-accent-background-red-orange - accent-background-lime
--pds-accent-background-lime - accent-background-cyan
--pds-accent-background-cyan - accent-background-light-blue
--pds-accent-background-light-blue - accent-background-violet
--pds-accent-background-violet - accent-background-purple
--pds-accent-background-purple - accent-background-pink
--pds-accent-background-pink
Accent · Foreground
- accent-foreground-red
--pds-accent-foreground-red - accent-foreground-red-orange
--pds-accent-foreground-red-orange - accent-foreground-orange
--pds-accent-foreground-orange - accent-foreground-lime
--pds-accent-foreground-lime - accent-foreground-green
--pds-accent-foreground-green - accent-foreground-cyan
--pds-accent-foreground-cyan - accent-foreground-light-blue
--pds-accent-foreground-light-blue - accent-foreground-blue
--pds-accent-foreground-blue - accent-foreground-violet
--pds-accent-foreground-violet - accent-foreground-purple
--pds-accent-foreground-purple - accent-foreground-pink
--pds-accent-foreground-pink
Inverse
- inverse-primary
--pds-inverse-primary - inverse-background
--pds-inverse-background - inverse-label
--pds-inverse-label
Fill · Material
- fill-normal
--pds-fill-normalalpha 8% - fill-strong
--pds-fill-strongalpha 16% - fill-alternative
--pds-fill-alternativealpha 5% - material-dimmer
--pds-material-dimmer모달 백드롭 52%
Chat 특수 토큰
pluto-note에서 승계. 별도의 AI 카테고리를 만들지 않고 semantic alias로 대부분을 구성한다.
- chat-dot-idle
--pds-chat-dot-idle→ label-assistive - chat-dot-done
--pds-chat-dot-done→ status-positive - chat-dot-error
--pds-chat-dot-error→ status-negative - chat-dot-action
--pds-chat-dot-action→ status-cautionary
다크 모드
현재는 라이트 값만 정의되어 있다. 다크 값은 추후 [data-theme="dark"] 블록으로 추가될 예정이다.