Primitive color scales - the foundation of the design system
Available Primitive Scales
Base color scales used throughout the design system
figment
Light theme color scale based on slate
--color-figment-50 to --color-figment-950
underthought
Dark theme color scale with deep blues
--color-underthought-50 to --color-underthought-950
legal
Amber/warning colors for legal notices and warnings
--color-legal-50 to --color-legal-950
brightGreen
Cool emerald greens for light mode surfaces and accents
--color-brightGreen-50 to --color-brightGreen-950
dimGreen
Muted emerald greens for dark mode surfaces and accents
--color-dimGreen-50 to --color-dimGreen-950
Figment Scale
Light theme color scale based on slate
figment-50
--color-figment-50
figment-100
--color-figment-100
figment-200
--color-figment-200
figment-300
--color-figment-300
figment-400
--color-figment-400
figment-500
--color-figment-500
figment-600
--color-figment-600
figment-700
--color-figment-700
figment-800
--color-figment-800
figment-900
--color-figment-900
figment-950
--color-figment-950
Underthought Scale
Dark theme color scale with deep blues
underthought-50
--color-underthought-50
underthought-100
--color-underthought-100
underthought-200
--color-underthought-200
underthought-300
--color-underthought-300
underthought-400
--color-underthought-400
underthought-500
--color-underthought-500
underthought-600
--color-underthought-600
underthought-700
--color-underthought-700
underthought-800
--color-underthought-800
underthought-900
--color-underthought-900
underthought-950
--color-underthought-950
Legal Scale
Amber/warning colors for legal notices and warnings
legal-50
--color-legal-50
legal-100
--color-legal-100
legal-200
--color-legal-200
legal-300
--color-legal-300
legal-400
--color-legal-400
legal-500
--color-legal-500
legal-600
--color-legal-600
legal-700
--color-legal-700
legal-800
--color-legal-800
legal-900
--color-legal-900
legal-950
--color-legal-950
BrightGreen Scale
Cool emerald greens for light mode surfaces and accents
brightGreen-50
--color-brightGreen-50
brightGreen-100
--color-brightGreen-100
brightGreen-200
--color-brightGreen-200
brightGreen-300
--color-brightGreen-300
brightGreen-400
--color-brightGreen-400
brightGreen-500
--color-brightGreen-500
brightGreen-600
--color-brightGreen-600
brightGreen-700
--color-brightGreen-700
brightGreen-800
--color-brightGreen-800
brightGreen-900
--color-brightGreen-900
brightGreen-950
--color-brightGreen-950
DimGreen Scale
Muted emerald greens for dark mode surfaces and accents
dimGreen-50
--color-dimGreen-50
dimGreen-100
--color-dimGreen-100
dimGreen-200
--color-dimGreen-200
dimGreen-300
--color-dimGreen-300
dimGreen-400
--color-dimGreen-400
dimGreen-500
--color-dimGreen-500
dimGreen-600
--color-dimGreen-600
dimGreen-700
--color-dimGreen-700
dimGreen-800
--color-dimGreen-800
dimGreen-900
--color-dimGreen-900
dimGreen-950
--color-dimGreen-950
Usage Examples
Tailwind Classes
bg-figment-500
bg-underthought-300
bg-figment-500
bg-underthought-500
text-legal-600
bg-brightGreen-500
text-dimGreen-400
CSS Variables
var(--color-figment-500)
var(--color-underthought-300)
var(--color-figment-500)
var(--color-underthought-500)
var(--color-legal-600)
var(--color-brightGreen-500)
var(--color-dimGreen-400)