Primitive Colors

The foundational color palette — these values are referenced by Semantic Tokens

Customizable

Freely customizable to match your brand. In your implementation, use Semantic Tokens likebg-primaryinstead of raw primitive values

gray

Neutral color — the UI foundation for backgrounds, borders, and text. Dark-mode optimized

primary

Brand color — used for primary actions, links, and emphasis

secondary

Used for secondary actions and supplemental UI elements

blue

Info color representing information, links, and in-progress states

green

Success color representing completion and positive states

yellow

Warning color for states requiring attention

red

Error color for errors, deletion, and destructive actions

Semantic Colors

Theme-aware colors that automatically adapt between light and dark mode — the same CSS variable holds different values in each mode

Token Format

Tailwind Class — Classes used directly by developers in code

◻️

Background

Page and card backgrounds — 4 layers of depth

Light

Dark

▢

Border

Dividers and input field borders

Light

Dark

📝

Text

Text hierarchy — body, supplemental, link

Light

Dark

🎯

Primary

Primary action buttons, links, and emphasis

Light

Dark

◐

Secondary

Secondary buttons and supplemental UI elements

Light

Dark

●

Status

State indicators for success, warning, error, and info

Light

Dark

Token Mapping

Three-level mapping: Figma → CSS → Tailwind

Background

background.default

bg-background--color-background

background.paper

bg-background-paper--color-background-paper

background.elevated

bg-background-elevated--color-background-elevated

background.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-text

text.muted

text-text-muted--color-text-muted

text.subtle

text-text-subtle--color-text-subtle

text.link

text-text-link--color-text-link

text.primary

text-text-primary--color-text-primary

text.info

text-text-info--color-text-info

text.success

text-text-success--color-text-success

text.error

text-text-error--color-text-error

text.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-border

border.strong

border-border-strong--color-border-strong

border.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-primary

primary.hover

bg-primary-hover--color-primary-hover

primary.active

bg-primary-active--color-primary-active

primary.tint

bg-primary-tint--color-primary-tint

primary.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-secondary

secondary.hover

bg-secondary-hover--color-secondary-hover

secondary.active

bg-secondary-active--color-secondary-active

secondary.tint

bg-secondary-tint--color-secondary-tint

secondary.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-success

success.hover

bg-success-hover--color-success-hover

success.active

bg-success-active--color-success-active

success.tint

bg-success-tint--color-success-tint

success.text

text-success-foreground--color-success-text

warning.default

bg-warning--color-warning

warning.hover

bg-warning-hover--color-warning-hover

warning.active

bg-warning-active--color-warning-active

warning.tint

bg-warning-tint--color-warning-tint

warning.text

text-warning-foreground--color-warning-text

error.default

bg-error--color-error

error.hover

bg-error-hover--color-error-hover

error.active

bg-error-active--color-error-active

error.tint

bg-error-tint--color-error-tint

error.text

text-error-foreground--color-error-text

error.bg

bg-error-bg--color-error-bg

info.default

bg-info--color-info

info.hover

bg-info-hover--color-info-hover

info.active

bg-info-active--color-info-active

info.tint

bg-info-tint--color-info-tint

info.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-disabled

disabled.text

text-disabled-foreground--color-disabled-text

focus.ring

focus-ring--color-focus-ring

focus.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-1

chart.2

bg-chart-2--color-chart-2

chart.3

bg-chart-3--color-chart-3

chart.4

bg-chart-4--color-chart-4

chart.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 Naming Rules

--color-is stripped from the variable name to form the Tailwind class name.

Basic

--color-primary → bg-primary

--color-text-*

--color-text-link → text-text-link

CSS × Tailwind Naming

Same Name

text- → text-text-*

CSS prefix and Tailwind utility share the same name

Tailwind Standard

*-text → *-foreground

An alias aligned with Tailwind ecosystem standard patterns

Unlike the abbreviated naming convention used by shadcn/ui, this system enables designers and developers to communicate with the same token names through 1:1 Figma-to-code sync.