Color

색은 쓰는 곳을 뜻하는 토큰 이름으로 골라요. 원하는 색이 없으면 추가 가이드를 보고 바꾸거나 더하세요.

사용 예시

토큰 이름

해당하지 않는 부분은 생략하고, 클래스는 Tailwind 접두사 뒤에 붙여요.

--color-속성-역할-변형-상태

속성

-fg글자

-bg배경

-line선

역할

-neutral기본

-brand주된 동작

-info안내

-success완료

-warning주의

-danger오류, 위험

변형

-solid채운 배경

-weak옅은 배경과 그 테두리

-contrast배경 위 글자

-strong더 진한 선

-muted-subtle-placeholder-well-panel-overlay-knob-focus-ring

상태

-hover

-disabled

-checked

-selected

--color-bg-brand-solidbg-bg-brand-solid--color-fg-dangertext-fg-danger--color-bg-wellbg-bg-well--color-bg-brand-solid-hoverhover:bg-bg-brand-solid-hover

팔레트

단계가 클수록 두 모드 모두 배경에서 멀어요.

라이트

50 ~ 900

gray

brand

blue

green

orange

red

다크

50 ~ 900

gray

brand

blue

green

orange

red

배경색

안으로 들어간 곳은 well, 카드와 플로팅 요소는 panel, Dialog 뒤는 overlay를 써요.

라이트

bg-well

bg-panel

bg-overlay

다크

bg-well

bg-panel

bg-overlay

tsx

<div className="bg-bg" /><div className="bg-bg-well" /><div className="bg-bg-panel" /><div className="bg-bg-overlay" />

글자색

라이트

제목, 본문, 값

설명과 부제

표 헤더와 단위

Input의 placeholder

비활성 컨트롤

다크

제목, 본문, 값

설명과 부제

표 헤더와 단위

Input의 placeholder

비활성 컨트롤

tsx

<p className="text-fg">제목, 본문, 값</p><p className="text-fg-muted">설명과 부제</p><p className="text-fg-subtle">표 헤더와 단위</p><p className="text-fg-placeholder">Input의 placeholder</p><p className="text-fg-disabled">비활성 컨트롤</p>

선색

라이트

line

line-strong

line-focus-ring

다크

line

line-strong

line-focus-ring

tsx

<hr className="border-line" /><input className="border-line-strong border" /><button className="focus-visible:outline-2 focus-visible:outline-line-focus-ring" />

색 역할

뜻에 맞는 역할을 골라요. 이름에서 역할만 바뀌어요.

solidweak

brand

새 기능이 추가됐어요

info

업데이트가 있어요

success

저장했어요

warning

저장 공간이 거의 찼어요

danger

지울 수 없어요

tsx

<span className="bg-bg-info-solid size-6" /><div className="bg-bg-info-weak border-line-info-weak text-fg-info-contrast border">  <Info className="text-fg-info size-4" />  업데이트가 있어요</div>

투명도

/숫자는 불투명도예요. 토큰으로 두지 않는 hover, 비활성, 옅은 배경에 붙여요.

배경

기준

/20 비활성

/10 hover

글자

저장하기기준

저장하기/40 비활성

tsx

<button className="bg-bg-brand-solid disabled:bg-bg-brand-solid/20">저장하기</button><button className="bg-bg-brand-weak hover:bg-bg-brand-solid/10 disabled:text-fg-brand-contrast/40">지우기</button>

다크 모드

className="text-fg"

라이트

주문 3건을 보냈어요

다크

주문 3건을 보냈어요

권장

토큰 이름으로 쓰면 다크 모드 값이 함께 적용돼요.

style={{ color: '#191f28' }}

라이트

주문 3건을 보냈어요

다크

주문 3건을 보냈어요

지양

값을 직접 적으면 다크 모드에서 글자가 배경과 같은 색이 돼 안 보여요.

주된 동작

권장

solid 버튼이 하나라 주된 동작이 바로 보여요.

지양

solid 버튼이 여럿이면 주된 동작을 알 수 없어요.

색과 아이콘

성공실패

권장

아이콘과 글자가 함께 있어 색을 구별하지 못해도 읽혀요.

지양

색만 다르면 색을 구별하지 못하는 사람에게는 같은 표시예요. 흑백으로 인쇄해도 같아져요.

추가 가이드

값 바꾸기

전역 CSS에 라이트와 다크 값을 둘 다 적어요. 변수 이름은 --color- 대신 --pds-로 시작해요. 한 곳만 바꿀 때는 className을 써요.

css

@import "tailwindcss";@import "@pantoia/ui/tailwind.css";/* 토큰 하나. 그 토큰을 쓰는 곳이 전부 바뀌어요 */:root, .light { --pds-bg-brand-solid: #9c63e4; }.dark         { --pds-bg-brand-solid: #9c63e4; }/* 팔레트 단계. 그 단계를 참조하는 토큰이 전부 바뀌어요 */:root, .light { --pds-brand-500: #9c63e4; }.dark         { --pds-brand-500: #9c63e4; }

새 값 더하기

새 역할이 필요할 때 써요. 있는 팔레트를 참조하면 팔레트는 건너뛰어요.

css

/* 팔레트. 라이트와 다크에 10단계씩 */:root, .light { --pds-purple-50: #faf5ff; /* 100 ~ 800 */ --pds-purple-900: #581c87; }.dark         { --pds-purple-50: #2e1065; /* 100 ~ 800 */ --pds-purple-900: #f3e8ff; }/* 토큰. 필요한 것만 */:root, .light, .dark {  --pds-bg-purple-solid:    var(--pds-purple-500);  --pds-bg-purple-weak:     var(--pds-purple-50);  --pds-fg-purple:          var(--pds-purple-500);  --pds-fg-purple-contrast: var(--pds-purple-700);  --pds-line-purple-weak:   var(--pds-purple-200);}/* Tailwind에 알려요. bg-bg-purple-solid, text-fg-purple처럼 써요 */@theme inline {  --color-bg-purple-solid:    var(--pds-bg-purple-solid);  --color-bg-purple-weak:     var(--pds-bg-purple-weak);  --color-fg-purple:          var(--pds-fg-purple);  --color-fg-purple-contrast: var(--pds-fg-purple-contrast);  --color-line-purple-weak:   var(--pds-line-purple-weak);  --color-pds-purple-500:     var(--pds-purple-500); /* 팔레트 클래스가 필요할 때 */}

명세

팔레트

토큰이 참조하는 값이에요. bg-pds-brand-500처럼 클래스로도 써요.

팔레트
이름	값	설명
--pds-gray-*	50 ~ 900	neutral, 글자, 선
--pds-brand-*	50 ~ 900	brand
--pds-blue-*	50 ~ 900	info, focus-ring
--pds-green-*	50 ~ 900	success
--pds-orange-*	50 ~ 900	warning
--pds-red-*	50 ~ 900	danger

색 토큰

값이 2개면 라이트, 다크 순이에요.

색 토큰
이름	값	설명
배경
bg-bg	#ffffff, #17171c	페이지
bg-bg-well	#f2f4f6, #2c2c35	Input, 표 헤더
bg-bg-panel	#ffffff, #202027	카드, 플로팅 요소
bg-bg-overlay	rgba(0,0,0,.2), rgba(0,0,0,.56)	Dialog 뒤
글자
text-fg	gray-900	제목, 본문
text-fg-muted	gray-700	설명
text-fg-subtle	gray-500	표 헤더, 단위
text-fg-placeholder	gray-400
text-fg-disabled	gray-600
선
border-line	gray-200	구분선
border-line-strong	gray-300	컨트롤 테두리
outline-line-focus-ring	blue-500	키보드 포커스
brand
bg-bg-brand-solid	brand-500	주된 동작 버튼
bg-bg-brand-solid-hover	brand-600
text-fg-brand-solid-contrast	#ffffff
bg-bg-brand-weak	brand-50
text-fg-brand-contrast	brand-700	brand 글자
border-line-brand-weak	brand-200
neutral
bg-bg-neutral-solid	gray-900	체크된 컨트롤, Toast
bg-bg-neutral-solid-hover	gray-800
bg-bg-neutral-solid-checked-disabled	gray-600
text-fg-neutral-solid-contrast	gray-50
border-line-neutral-solid	gray-900	체크된 컨트롤
bg-bg-neutral-disabled	gray-200	비활성 Input
bg-bg-neutral-hover	rgba(0,23,51,.02), rgba(209,209,253,.05)	메뉴 항목, 표 행
bg-bg-neutral-selected	rgba(2,32,71,.05), rgba(217,217,255,.11)
bg-bg-neutral-selected-hover	rgba(0,27,55,.1), rgba(222,222,255,.19)
bg-bg-neutral-track	gray-300	꺼진 Switch의 트랙
bg-bg-neutral-knob	#ffffff, #2c2c35	켜진 Switch의 손잡이
bg-bg-neutral-knob-off	#ffffff, gray-800	꺼진 Switch의 손잡이
info
bg-bg-info-solid	blue-500
bg-bg-info-weak	blue-50
text-fg-info-contrast	blue-700
border-line-info-weak	blue-200
text-fg-info	blue-500	아이콘
border-line-info	blue-500	체크된 컨트롤
success
bg-bg-success-solid	green-500
bg-bg-success-weak	green-50
text-fg-success-contrast	green-700
border-line-success-weak	green-200
text-fg-success	green-500	아이콘
border-line-success	green-500	체크된 컨트롤
warning
bg-bg-warning-solid	orange-500
bg-bg-warning-weak	orange-50
text-fg-warning-contrast	orange-700
border-line-warning-weak	orange-200
text-fg-warning	orange-500	아이콘
border-line-warning	orange-500	체크된 컨트롤
danger
bg-bg-danger-solid	red-500
bg-bg-danger-solid-hover	red-600
bg-bg-danger-weak	red-50
text-fg-danger-contrast	red-700
border-line-danger-weak	red-200
text-fg-danger	red-500	아이콘
border-line-danger	red-500	체크된 컨트롤
그 밖
bg-white	#ffffff
bg-black	#000000