Semantic Color Design System
A comprehensive color system built on primitive colors with semantic tokens for consistent, accessible design
Primitive Colors
Base color scales that all semantic tokens reference
Neutral
Primary
Text Colors Semantic Tokens
All text color tokens for typography hierarchy
Name
Color
Usage
text-primary
neutral-950
Primary text, this is our default text color, used for most text
not in a text hierarchy--in which case use for headings.
text-primary-on-brand
neutral-50
Primary text used on solid colored backgrounds. (e.g. CTA
buttons)
text-secondary
neutral-900
Secondary text used for labels and section headings.
text-tertiary
neutral-700
Tertiary text used for supporting and paragraph text.
text-quaternary
neutral-500
Quaternary text used for subtle and lower contrast text.
text-white
base-white
Text that is always white no matter the mode.
text-disabled
neutral-500
Default text color for components in a disabled state.
text-placeholder
neutral-500
Default text color for placeholder text such as placeholder text
in an input field.
Border Colors Semantic Tokens
Use for all stroke colors in your designs.
Name
Color
Usage
border-primary
neutral-300
Default color for borders.
border-secondary
neutral-400
High contrast borders.
border-tertiary
neutral-200
Low contrast borders, useful for subtle dividers and borders.
border-disabled
neutral-300
Default border color for components in a disabled state.
Foreground Colors Semantic Tokens
Use for all non-text foreground elements (i.e. icons) in your designs.
Name
Color
Usage
fg-primary
neutral-950
Highest contrast non-text foreground elements.
fg-primary-on-brand
neutral-50
Highest contrast non-text foreground elements used on solid
colored backgrounds. (e.g. CTA
buttons).
fg-secondary
neutral-900
High contrast non-text foreground elements.
fg-tertiary
neutral-700
Medium contrast non-text foreground elements.
fg-white
base-white
Foreground elements that are always white no matter the mode.
fg-disabled
neutral-500
Default color for non-text elements in a disabled state.
Background Colors Semantic Tokens
Use for all fill colors for elements in your designs.
Name
Color
Usage
bg-primary
neutral-50
Primary surface background color, used to create contrast against
white backgrounds.
bg-secondary
neutral-100
Secondary surface background color, used to create contrast
against primary backgrounds.
bg-tertiary
neutral-200
Tertiary surface background color, used to create contrast
against secondary backgrounds.
bg-modal-overlay
alpha-black-modal
Background color used for the overlay for modals.
Interactive Colors Semantic Tokens
Use for fill and stroke colors for interactive components in your designs.
Name
Color
Usage
interactive-primary
primary-600
Primary color used for all interactive components.
interactive-primary-hover
primary-500
Primary hover color used for all interactive components.
interactive-primary-active
primary-400
Primary active color used for all interactive components.
interactive-secondary
zinc-50
Secondary color used for all interactive components.
interactive-secondary-hover
zinc-100
Secondary hover color used for all interactive components.
interactive-secondary-active
zinc-200
Secondary active color used for all interactive components.
interactive-tertiary
transparent
Tertiary color used for outline interactive components.
interactive-focus
blue-600-alpha-30
Interactive color used for focus effects.
Status Colors Semantic Tokens
Use for communicating status and state of components in your designs.
Success
Name
Color
Usage
success-primary
green-100
Primary color for success states and messages.
success-background
green-100
Background color for success states and messages.
success-foreground
green-600
Foreground color for success icons, text, and elements.
success-focus
green-600-alpha-30
Focus ring color for success interactive elements and form
fields.
Warning
Name
Color
Usage
warning-primary
amber-100
Primary color for warning states and messages.
warning-background
amber-100
Background color for warning states and messages.
warning-foreground
amber-600
Foreground color for warning icons, text, and elements.
warning-focus
amber-600-alpha-30
Focus ring color for warning interactive elements and form
fields.
Error
Name
Color
Usage
error-primary
red-100
Primary color for error states and messages.
error-background
red-100
Background color for error states and messages.
error-foreground
red-600
Foreground color for error icons, text, and elements.
error-focus
red-600-alpha-30
Focus ring color for error interactive elements and form
fields.
Component Examples Using Semantic Tokens
Buttons
Text Hierarchy
Primary Heading
Secondary Heading
This is tertiary text for body content and paragraphs.
Quaternary text for subtle information.
Tabs
Overview content showing primary information.
Detailed information and specifications.
Configuration and preference settings.
Toggles
Notifications
Auto-save
Dark mode