Colors
Complete color system including semantic tokens, brand palettes, and base colors.
Semantic Colors
Functional color tokens used throughout the component library.
Text
text-strong
text-sub
text-soft
text-disabled
text-inverse
text-accent
Background
bg-default
bg-surface
bg-layer
bg-subtle
bg-muted
bg-weak
Stroke
stroke-soft
stroke-mild
stroke-strong
Primary
primary-mute
primary-faint
primary-base
primary-dark
Info
info-mute
info-faint
info-base
info-dark
Warning
warning-mute
warning-faint
warning-base
warning-dark
Error
error-mute
error-faint
error-base
error-dark
Success
success-mute
success-faint
success-base
success-dark
Feature
feature-mute
feature-faint
feature-base
feature-dark
Verified
verified-mute
verified-faint
verified-base
verified-dark
Highlight
highlight-mute
highlight-faint
highlight-base
highlight-dark
Brand Color Palettes
Full color palettes with multiple shades for each brand color.
Blue
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-950
blue-soft-24
blue-soft-16
blue-soft-10
Orange
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-950
orange-soft-24
orange-soft-16
orange-soft-10
Red
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-950
red-soft-24
red-soft-16
red-soft-10
Green
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-950
green-soft-24
green-soft-16
green-soft-10
Yellow
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-950
yellow-soft-24
yellow-soft-16
yellow-soft-10
Purple
purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-950
purple-soft-24
purple-soft-16
purple-soft-10
Sky
sky-50
sky-100
sky-200
sky-300
sky-400
sky-500
sky-600
sky-700
sky-800
sky-900
sky-950
sky-soft-24
sky-soft-16
sky-soft-10
Pink
pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-950
pink-soft-24
pink-soft-16
pink-soft-10
Teal
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
teal-950
teal-soft-24
teal-soft-16
teal-soft-10
Base Grays
Neutral gray scale for UI elements and layouts.
gray-25
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-950
Opacity Utilities
opacity-1
opacity-2
opacity-3
opacity-4
opacity-5
opacity-6
opacity-7
opacity-8
opacity-9
opacity-10
opacity-11