TokensSemantic

Semantic Tokens

Role-based tokens that define the meaning and purpose of design decisions. These tokens reference primitives and adapt for Light/Dark modes, providing a consistent vocabulary across the design system.

28
Color Tokens
9
Color Roles
5
Radius Tokens
3
Layout Tokens

Color Roles

28 tokens across 9 categories

Primary brand colors for CTAs, links, and key interactive elements

#34D399
Default
#34d399
Emerald.400
Brand.Default
#10B981
Hover
#10b981
Emerald.500
Brand.Hover
#D1FAE5
Light
#d1fae5
Emerald.100
Brand.Light
#047857
Dark
#047857
Emerald.700
Brand.Dark

Supporting color for secondary actions and accents

#4C1D95
Default
#4c1d95
Violet.900
Secondary.Default
#2E1065
Hover
#2e1065
Violet.950
Secondary.Hover
#EDE9FE
Light
#ede9fe
Violet.100
Secondary.Light

Page and section background colors

#F9FAFB
Default
#f9fafb
Gray.50
Background.Default
#F3F4F6
Alt
#f3f4f6
Gray.100
Background.Alt

Elevated surface color (white)

#FFFFFF
Default
#ffffff
Base.White
Surface.Default

Typography color roles

#111827
Foreground
#111827
Gray.900
Text.Foreground
#6B7280
Muted
#6b7280
Gray.500
Text.Muted
#9CA3AF
Subtle
#9ca3af
Gray.400
Text.Subtle
#FFFFFF
On Brand
#ffffff
Base.White
Text.On Brand
#FFFFFF
On Secondary
#ffffff
Base.White
Text.On Secondary

Card component colors

#FFFFFF
Background
#ffffff
Base.White
Card.Background
#E5E7EB
Border
#e5e7eb
Gray.200
Card.Border

General border colors

#E5E7EB
Default
#e5e7eb
Gray.200
Border.Default
#D1D5DB
Strong
#d1d5db
Gray.300
Border.Strong

Feedback and status indication colors

#22C55E
Success
#22c55e
Green.500
Status.Success
#DCFCE7
Success Light
#dcfce7
Green.100
Status.Success Light
#F59E0B
Warning
#f59e0b
Amber.500
Status.Warning
#FEF3C7
Warning Light
#fef3c7
Amber.100
Status.Warning Light
#EF4444
Error
#ef4444
Red.500
Status.Error
#FEE2E2
Error Light
#fee2e2
Red.100
Status.Error Light
#3B82F6
Info
#3b82f6
Blue.500
Status.Info
#DBEAFE
Info Light
#dbeafe
Blue.100
Status.Info Light

Base neutral color for contrast

#020617
Default
#020617
Slate.950
Base.Default

Radius Roles

Component-specific border radius tokens

PreviewRoleCSS VariableReferenceValueCopy
Button--semantic-radius-buttonradius.lg0.5rem
Card--semantic-radius-cardradius.xl0.75rem
Input--semantic-radius-inputradius.md0.375rem
Badge--semantic-radius-badgeradius.full9999px
Modal--semantic-radius-modalradius.2xl1rem

Layout Widths

Content container width constraints

Content Width1024px
SEMlayout.5xl
Wide Width1440px
Direct Value
Prose Width672px
SEMlayout.2xl

About Semantic Tokens

Semantic tokens provide meaning to design decisions. Instead of using raw colors like, use semantic tokens liketo express intent and enable easy theme switching.

--color-brand--primitives-color-emerald-400#34d399