Skip to content
Buy
Foundations

Color

Every color WunderUI ships, mirrored 1:1 from the Figma Design Tokens & Styleguide page: semantic tokens (light/dark aware), tints, the primitive palette, gradients and effect colors. Use these — never arbitrary hex values — so components stay themeable.

How to use

  • Reference a token via its Tailwind utility (, , ) or the raw CSS variable () — never a hardcoded hex value.
  • Figma names work as Tailwind classes too: , , , , , , .
  • Every semantic token flips automatically between light and dark mode — no per-component dark: overrides needed.
  • Pair a background token with its matching (or a tint with its ) for text/icon color, so contrast stays correct in both themes.

Brand

The eight brand accents (Figma brand-primary … brand-octonary): the 600 step of each hue, identical in light and dark. --primary and --brand-primary are kept identical on purpose.

Aa

Primary

--primary--primary-foreground#555CF3
Aa

Brand Primary

--brand-primary--brand-primary-foreground#555CF3
Aa

Brand Secondary

--brand-secondary--brand-secondary-foreground#12AFF0
Aa

Brand Tertiary

--brand-tertiary--brand-tertiary-foreground#F47690
Aa

Brand Quaternary

--brand-quaternary--brand-quaternary-foreground#FACA4A

Brand Quinary

--brand-quinary#A584F3

Brand Senary

--brand-senary#FE6BBA

Brand Septenary

--brand-septenary#F3654A

Brand Octonary

--brand-octonary#6E6D86

Surface

Backgrounds for the page and elevated content, light/dark aware. Figma names in brackets.

Aa

Page (bg-page)

--bg-page--foreground#F9FBFC · #17181A
Aa

Background

--background--foreground
Aa

Card (bg-surface)

--card--card-foreground#FFFFFF · #1C1D20
Aa

Subtle (bg-subtle)

--subtle--foreground#F1F5F7 · #25272A
Aa

Inverse (bg-inverse)

--inverse--text-inverse#000000 · #FFFFFF
Aa

Popover

--popover--popover-foreground
Aa

Secondary

--secondary--secondary-foreground
Aa

Muted

--muted--muted-foreground
Aa

Accent

--accent--accent-foreground

Text

Text steps below the default foreground, plus colored text tokens that meet AA contrast in both themes. Use these for text; use success/destructive only for fills and icons.

Foreground (text-primary)

--foreground#000000 · #FFFFFF

Text Secondary

--text-secondary#454648 · #D1D1D1

Text Tertiary

--text-tertiary#6E6E70 · #A2A3A3

Muted Foreground (text-muted)

--muted-foreground#5A7383 · #8791A0

Text Link

--text-link#555CF3 · #999DF8

Text Success

--text-success#10805B · #76E6C1

Text Error

--text-error#D42A2D · #F8ADBC

Text Warning

--text-warning#64511E · #FCDF92

Text Inverse

--text-inverse#FFFFFF · #000000

Text Error Inverse

--text-error-inverse#F8ADBC · #924756

Borders & Inputs

Border separates surfaces. Border Control is the rim of plain controls — plain button, icon button, white badge, avatar ring: a visible grey in light, the quiet border grey in dark.

Border

--border#F1F5F7 · #323438

Border Control

--border-control#D9E1E7 · #323438

Input

--input

Ring

--ring

Status

Aa

Success

--success--success-foreground#1AD598
Aa

Destructive (error)

--destructive--destructive-foreground#D42A2D

Charts

The default 5-color series order for Bar/Line/Area/Pie charts.

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Sidebar

A separate surface set for nav rails, tuned for contrast against the page background.

Aa

Sidebar

--sidebar--sidebar-foreground
Aa

Sidebar Accent

--sidebar-accent--sidebar-accent-foreground
Aa

Sidebar Primary

--sidebar-primary--sidebar-primary-foreground

Sidebar Border

--sidebar-border

Sidebar Ring

--sidebar-ring

Tints

Soft colored surfaces with a matching AA text color, one pair per hue (Figma + ). Light mode uses the 100 and 800 steps, dark mode the 900 and 300 steps. Badges, callouts, calendar chips and status pills are built from these; solid badges use the tint as text color on the 600 fill.

Aaindigo

indigo

bg-tint-indigo · #EEEFFE · #222561text-tint-text-indigo · #333792 · #BBBEFA
Aablue

blue

bg-tint-blue · #E7F7FE · #074660text-tint-text-blue · #0B6990 · #A0DFF9
Aapurple

purple

bg-tint-purple · #F6F3FE · #423561text-tint-text-purple · #634F92 · #DBCEFA
Aapink

pink

bg-tint-pink · #FFF0F8 · #662B4Atext-tint-text-pink · #984070 · #FFC4E3
Aared

red

bg-tint-red · #FEF1F4 · #622F3Atext-tint-text-red · #924756 · #FBC8D3
Aaorange

orange

bg-tint-orange · #FEF0ED · #61281Etext-tint-text-orange · #923D2C · #FAC1B7
Aayellow

yellow

bg-tint-yellow · #FFFAED · #64511Etext-tint-text-yellow · #64511E · #FDEAB7
Aagreen

green

bg-tint-green · #E8FBF5 · #0A553Dtext-tint-text-green · #10805B · #A3EED6
Aaalternative

alternative

bg-tint-alternative · #F1F0F3 · #2C2C36text-tint-text-alternative · #424150 · #C5C5CF

Palette

The Figma Primitives collection: eleven hues in ten steps (100 → 1000) plus the named neutrals. Available as , … — they replace Tailwind's palette for these names. Same value in both modes; the semantic tokens above pick from them.

dark
100
200
300
400
500
600
700
800
900
1000
light
100
200
300
400
500
600
700
800
900
1000
blue
100
200
300
400
500
600
700
800
900
1000
indigo
100
200
300
400
500
600
700
800
900
1000
purple
100
200
300
400
500
600
700
800
900
1000
pink
100
200
300
400
500
600
700
800
900
1000
red
100
200
300
400
500
600
700
800
900
1000
orange
100
200
300
400
500
600
700
800
900
1000
yellow
100
200
300
400
500
600
700
800
900
1000
green
100
200
300
400
500
600
700
800
900
1000
alternative
100
200
300
400
500
600
700
800
900
1000
Neutral
black#000000
white#FFFFFF
dark-secondary#1C1D20
dark-content#25272A
dark-borders#323438
dark-grey#384455
light-background#F9FBFC
alternative-secondary#ACB3C7
error-base#D42A2D
dark-muted#8791A0

Gradients

The nine Figma Gradient/<Hue> paint styles (each hue's 400 → 600 range at 135°) as , plus three gradients built from the variables. Use them for hero sections, feature highlights and premium CTAs where a flat fill feels too plain.

Gradient/Blue

bg-gradient-blue#12D0FF → #10A8E0

Gradient/Yellow

bg-gradient-yellow#FFD44A → #F5A623

Gradient/Red

bg-gradient-red#FF6EB0 → #F0366A

Gradient/Indigo

bg-gradient-indigo#999DF8 → #555CF3

Gradient/Purple

bg-gradient-purple#C9B5F8 → #A584F3

Gradient/Pink

bg-gradient-pink#FEA6D6 → #FE6BBA

Gradient/Orange

bg-gradient-orange#F8A392 → #F3654A

Gradient/Green

bg-gradient-green#76E6C1 → #1AD598

Gradient/Alternative

bg-gradient-alternative#A8A7B6 → #6E6D86

Dark

bg-gradient-darkgradient/start → gradient/endDark hero and cover backgrounds.

Slate

bg-gradient-slategradient/start-2 → gradient/end-2Softer dark surfaces (AI avatar, feature cards).

Primary shine

bg-gradient-primarygradient/start-3 → brand-primaryThe Gradient button/icon-button fill.
<div className="bg-gradient-indigo …" />           /* Figma Gradient/Indigo */
<div className="bg-gradient-primary …" />          /* gradient/start-3 → brand-primary */
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));

Effects

The five Figma Shadow effect styles map onto the Tailwind shadow scale, and the three color variables are the shadow colors behind them.

Shadow/Small

shadow-xs0px 1px 2px 0px rgb(0 0 0 / 0.05)

Shadow/Regular

shadow-sm0px 2px 4px 0px rgb(0 0 0 / 0.08)

Shadow/Medium

shadow-md0px 4px 8px 0px rgb(0 0 0 / 0.1)

Shadow/Large

shadow-lg0px 8px 16px 0px rgb(0 0 0 / 0.12)

Shadow/XLarge

shadow-xl0px 16px 32px -4px rgb(0 0 0 / 0.16)
effect/shadow--effect-shadow · #000000 @ 0.08Shadow colour of Shadow/Regular (0 2 4).
effect/shadow-2--effect-shadow-2 · #101828 @ 0.05Cool-tinted shadow colour for cards on light surfaces.
effect/shadow-3--effect-shadow-3 · #000000 @ 0.05Shadow colour of Shadow/Small (0 1 2).

Token table

The complete Figma Color collection with its light and dark values and the primitive each mode aliases — the same table as the Figma Color Tokens frame.

TokenCSSLightDark
bg-page--backgroundneutral/light-background#F9FBFCdark/600#17181A
bg-surface--cardneutral/white#FFFFFFneutral/dark-secondary#1C1D20
border--borderlight/200#F1F5F7neutral/dark-borders#323438
border-controlRim of plain controls (plain button, icon button, white badge, avatar ring): visible grey in light, the quiet border grey in dark.--border-controllight/300#D9E1E7neutral/dark-borders#323438
text-primary--foregroundneutral/black#000000neutral/white#FFFFFF
text-secondary--text-secondarydark/500#454648dark/200#D1D1D1
text-muted--muted-foregroundlight/700#5A7383neutral/dark-muted#8791A0
brand-primary--brand-primaryindigo/600#555CF3indigo/600#555CF3
success--successgreen/600#1AD598green/600#1AD598
error--destructiveneutral/error-base#D42A2Dneutral/error-base#D42A2D
text-tertiary--text-tertiarydark/400#6E6E70dark/300#A2A3A3
brand-secondaryBrand accent blue — same value in every mode.--brand-secondaryblue/600#12AFF0blue/600#12AFF0
brand-tertiaryBrand accent red — same value in every mode.--brand-tertiaryred/600#F47690red/600#F47690
brand-quaternaryBrand accent yellow — same value in every mode.--brand-quaternaryyellow/600#FACA4Ayellow/600#FACA4A
brand-quinaryBrand accent purple — same value in every mode.--brand-quinarypurple/600#A584F3purple/600#A584F3
brand-senaryBrand accent pink — same value in every mode.--brand-senarypink/600#FE6BBApink/600#FE6BBA
brand-septenaryBrand accent orange — same value in every mode.--brand-septenaryorange/600#F3654Aorange/600#F3654A
brand-octonaryBrand accent slate (alternative) — same value in every mode.--brand-octonaryalternative/600#6E6D86alternative/600#6E6D86
effect/shadowShadow colour of Shadow/Regular (0 2 4).--effect-shadow#000000#000000
effect/shadow-2Cool-tinted shadow colour for cards on light surfaces.--effect-shadow-2#101828#101828
effect/shadow-3Shadow colour of Shadow/Small (0 1 2).--effect-shadow-3#000000#000000
gradient/startStart of the dark brand gradient (with gradient/end).--gradient-start#494F60#494F60
gradient/endEnd of the dark brand gradient (with gradient/start).--gradient-end#0B0C33#0B0C33
gradient/start-2Start of the slate gradient (with gradient/end-2).--gradient-start-2#777FA1#777FA1
gradient/end-2End of the slate gradient (with gradient/start-2).--gradient-end-2#1F2059#1F2059
gradient/start-3Highlight of the primary shine gradient (fades into brand-primary) — used by the Gradient button.--gradient-start-3#6F74F5#6F74F5
bg-subtleSubtle secondary surface (cards on cards, list rows, wells).--subtlelight/200#F1F5F7neutral/dark-content#25272A
tint/indigoSoft indigo surface for badges, callouts and highlights.--tint-indigoindigo/100#EEEFFEindigo/900#222561
tint-text/indigoText and icon color on tint/indigo.--tint-text-indigoindigo/800#333792indigo/300#BBBEFA
tint/blueSoft blue surface for badges, callouts and highlights.--tint-blueblue/100#E7F7FEblue/900#074660
tint-text/blueText and icon color on tint/blue.--tint-text-blueblue/800#0B6990blue/300#A0DFF9
tint/purpleSoft purple surface for badges, callouts and highlights.--tint-purplepurple/100#F6F3FEpurple/900#423561
tint-text/purpleText and icon color on tint/purple.--tint-text-purplepurple/800#634F92purple/300#DBCEFA
tint/pinkSoft pink surface for badges, callouts and highlights.--tint-pinkpink/100#FFF0F8pink/900#662B4A
tint-text/pinkText and icon color on tint/pink.--tint-text-pinkpink/800#984070pink/300#FFC4E3
tint/redSoft red surface for badges, callouts and highlights.--tint-redred/100#FEF1F4red/900#622F3A
tint-text/redText and icon color on tint/red.--tint-text-redred/800#924756red/300#FBC8D3
tint/orangeSoft orange surface for badges, callouts and highlights.--tint-orangeorange/100#FEF0EDorange/900#61281E
tint-text/orangeText and icon color on tint/orange.--tint-text-orangeorange/800#923D2Corange/300#FAC1B7
tint/yellowSoft yellow surface for badges, callouts and highlights.--tint-yellowyellow/100#FFFAEDyellow/900#64511E
tint-text/yellowText and icon color on tint/yellow.--tint-text-yellowyellow/900#64511Eyellow/300#FDEAB7
tint/greenSoft green surface for badges, callouts and highlights.--tint-greengreen/100#E8FBF5green/900#0A553D
tint-text/greenText and icon color on tint/green.--tint-text-greengreen/800#10805Bgreen/300#A3EED6
tint/alternativeSoft alternative surface for badges, callouts and highlights.--tint-alternativealternative/100#F1F0F3alternative/900#2C2C36
tint-text/alternativeText and icon color on tint/alternative.--tint-text-alternativealternative/800#424150alternative/300#C5C5CF
text-linkBrand-coloured text (links, active labels). Lighter indigo in dark mode for AA contrast.--text-linkindigo/600#555CF3indigo/400#999DF8
text-successSuccess-coloured text on surfaces (AA). Use success only for fills/icons.--text-successgreen/800#10805Bgreen/400#76E6C1
text-errorError-coloured text on surfaces (AA). Use error only for fills/icons.--text-errorneutral/error-base#D42A2Dred/400#F8ADBC
text-warningWarning-coloured text on surfaces (AA).--text-warningyellow/900#64511Eyellow/400#FCDF92
bg-inverseInverse surface (tooltips, dark chips, kbd). Flips with the mode.--inverseneutral/black#000000neutral/white#FFFFFF
text-inverseText/icon colour on bg-inverse.--text-inverseneutral/white#FFFFFFneutral/black#000000
text-error-inverseError-coloured text on bg-inverse (AA in both modes).--text-error-inversered/400#F8ADBCred/800#924756

FAQ