Colors
Primitive Color는 기본 팔레트를, Semantic Color는 테마 대응 배색을 제공하는 2단계 구조로 CSS 변수 기반이며 프레임워크에 독립적입니다.
Primitive Colors
기초 색상 팔레트로, 이 값들은 Semantic Token에서 참조됩니다.
커스터마이즈 가능
브랜드에 맞게 자유롭게 커스터마이즈할 수 있습니다. 구현 시에는bg-primary등의 Semantic Token을 통해 사용하세요.
gray
배경, 보더, 텍스트 등 UI의 기반이 되는 뉴트럴 컬러로 다크 모드에 최적화된 설계
primary
브랜드 컬러로 주요 액션, 링크, 강조에 사용
secondary
보조 액션 및 부가적인 UI 요소에 사용
blue
정보, 링크, 진행 중 상태를 나타내는 Info 컬러
green
성공, 완료, 긍정적 상태를 나타내는 Success 컬러
yellow
경고, 주의가 필요한 상태를 나타내는 Warning 컬러
red
에러, 삭제, 위험한 조작을 나타내는 Error 컬러
Semantic Colors
라이트 모드와 다크 모드 간에 자동으로 적응하는 테마 대응 색상으로, 동일한 CSS 변수가 각 모드에서 다른 값을 가집니다.
토큰 형식
Tailwind Class — 개발자가 코드에서 직접 사용하는 클래스
◻️
Background
페이지와 카드 배경색으로 4단계로 깊이를 표현
Light
Dark
▢
Border
구분선과 입력 필드 테두리
Light
Dark
📝
Text
텍스트 계층 구조(본문, 보조, 링크 등)
Light
Dark
🎯
Primary
주요 액션 버튼, 링크 및 강조
Light
Dark
◐
Secondary
보조 버튼 및 부가적인 UI 요소
Light
Dark
●
Status
성공, 경고, 에러, 정보 상태 표시
Light
Dark
Token Mapping
Figma → CSS → Tailwind 3단계 매핑
Background
background.default
bg-background--color-backgroundbackground.paper
bg-background-paper--color-background-paperbackground.elevated
bg-background-elevated--color-background-elevatedbackground.muted
bg-background-muted--color-background-muted| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| background.default | --color-background | bg-background |
| background.paper | --color-background-paper | bg-background-paper |
| background.elevated | --color-background-elevated | bg-background-elevated |
| background.muted | --color-background-muted | bg-background-muted |
AaText
text.default
text-foreground--color-texttext.muted
text-text-muted--color-text-mutedtext.subtle
text-text-subtle--color-text-subtletext.link
text-text-link--color-text-linktext.primary
text-text-primary--color-text-primarytext.info
text-text-info--color-text-infotext.success
text-text-success--color-text-successtext.error
text-text-error--color-text-errortext.warning
text-text-warning--color-text-warning| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| text.default | --color-text | text-foreground |
| text.muted | --color-text-muted | text-text-muted |
| text.subtle | --color-text-subtle | text-text-subtle |
| text.link | --color-text-link | text-text-link |
| text.primary | --color-text-primary | text-text-primary |
| text.info | --color-text-info | text-text-info |
| text.success | --color-text-success | text-text-success |
| text.error | --color-text-error | text-text-error |
| text.warning | --color-text-warning | text-text-warning |
Border
border.default
border-border--color-borderborder.strong
border-border-strong--color-border-strongborder.subtle
border-border-subtle--color-border-subtle| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| border.default | --color-border | border-border |
| border.strong | --color-border-strong | border-border-strong |
| border.subtle | --color-border-subtle | border-border-subtle |
Primary
primary.default
bg-primary--color-primaryprimary.hover
bg-primary-hover--color-primary-hoverprimary.active
bg-primary-active--color-primary-activeprimary.tint
bg-primary-tint--color-primary-tintprimary.text
text-primary-foreground--color-primary-text| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| primary.default | --color-primary | bg-primary |
| primary.hover | --color-primary-hover | bg-primary-hover |
| primary.active | --color-primary-active | bg-primary-active |
| primary.tint | --color-primary-tint | bg-primary-tint |
| primary.text | --color-primary-text | text-primary-foreground |
Secondary
secondary.default
bg-secondary--color-secondarysecondary.hover
bg-secondary-hover--color-secondary-hoversecondary.active
bg-secondary-active--color-secondary-activesecondary.tint
bg-secondary-tint--color-secondary-tintsecondary.text
text-secondary-foreground--color-secondary-text| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| secondary.default | --color-secondary | bg-secondary |
| secondary.hover | --color-secondary-hover | bg-secondary-hover |
| secondary.active | --color-secondary-active | bg-secondary-active |
| secondary.tint | --color-secondary-tint | bg-secondary-tint |
| secondary.text | --color-secondary-text | text-secondary-foreground |
Status (Success / Warning / Error / Info)
success.default
bg-success--color-successsuccess.hover
bg-success-hover--color-success-hoversuccess.active
bg-success-active--color-success-activesuccess.tint
bg-success-tint--color-success-tintsuccess.text
text-success-foreground--color-success-textwarning.default
bg-warning--color-warningwarning.hover
bg-warning-hover--color-warning-hoverwarning.active
bg-warning-active--color-warning-activewarning.tint
bg-warning-tint--color-warning-tintwarning.text
text-warning-foreground--color-warning-texterror.default
bg-error--color-errorerror.hover
bg-error-hover--color-error-hovererror.active
bg-error-active--color-error-activeerror.tint
bg-error-tint--color-error-tinterror.text
text-error-foreground--color-error-texterror.bg
bg-error-bg--color-error-bginfo.default
bg-info--color-infoinfo.hover
bg-info-hover--color-info-hoverinfo.active
bg-info-active--color-info-activeinfo.tint
bg-info-tint--color-info-tintinfo.text
text-info-foreground--color-info-text| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| success.default | --color-success | bg-success |
| success.hover | --color-success-hover | bg-success-hover |
| success.active | --color-success-active | bg-success-active |
| success.tint | --color-success-tint | bg-success-tint |
| success.text | --color-success-text | text-success-foreground |
| warning.default | --color-warning | bg-warning |
| warning.hover | --color-warning-hover | bg-warning-hover |
| warning.active | --color-warning-active | bg-warning-active |
| warning.tint | --color-warning-tint | bg-warning-tint |
| warning.text | --color-warning-text | text-warning-foreground |
| error.default | --color-error | bg-error |
| error.hover | --color-error-hover | bg-error-hover |
| error.active | --color-error-active | bg-error-active |
| error.tint | --color-error-tint | bg-error-tint |
| error.text | --color-error-text | text-error-foreground |
| error.bg | --color-error-bg | bg-error-bg |
| info.default | --color-info | bg-info |
| info.hover | --color-info-hover | bg-info-hover |
| info.active | --color-info-active | bg-info-active |
| info.tint | --color-info-tint | bg-info-tint |
| info.text | --color-info-text | text-info-foreground |
Disabled & Focus
disabled.default
bg-disabled--color-disableddisabled.text
text-disabled-foreground--color-disabled-textfocus.ring
focus-ring--color-focus-ringfocus.ring-error
ring-error--color-focus-ring-error| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| disabled.default | --color-disabled | bg-disabled |
| disabled.text | --color-disabled-text | text-disabled-foreground |
| focus.ring | --color-focus-ring | focus-ring |
| focus.ring-error | --color-focus-ring-error | ring-error |
Chart Colors (Chart-1~5)
chart.1
bg-chart-1--color-chart-1chart.2
bg-chart-2--color-chart-2chart.3
bg-chart-3--color-chart-3chart.4
bg-chart-4--color-chart-4chart.5
bg-chart-5--color-chart-5| Figma Token | CSS Variable | Tailwind Class |
|---|---|---|
| chart.1 | --color-chart-1 | bg-chart-1 |
| chart.2 | --color-chart-2 | bg-chart-2 |
| chart.3 | --color-chart-3 | bg-chart-3 |
| chart.4 | --color-chart-4 | bg-chart-4 |
| chart.5 | --color-chart-5 | bg-chart-5 |
CSS → Tailwind 명명 규칙
--color-을 제외한 부분이 그대로 Tailwind 클래스 이름이 됩니다.
기본
--color-primary → bg-primary
--color-text-*
--color-text-link → text-text-link
CSS × Tailwind 명명 변환
동일 이름
text- → text-text-*
CSS 접두사와 Tailwind 유틸리티가 같은 이름
Tailwind 표준
*-text → *-foreground
Tailwind 생태계 표준 패턴에 맞춘 별칭
shadcn/ui 등이 채택한 개발자 중심의 축약 명명과는 목적이 다르며, Figma에서 코드까지 1:1 동기화로 디자이너와 개발자가 동일한 토큰 이름으로 소통할 수 있는 명명 체계입니다.