Colors
A comprehensive color system based on Material Design 3 principles with semantic tokens, surface hierarchy, and theme-aware variables for consistent visual design.
Base Theme Colors
Core CSS custom properties that automatically adapt to light and dark themes.
Background
--color-backgroundForeground
--color-foregroundCard
--color-cardCard Foreground
--color-card-foregroundMuted
--color-mutedMuted Foreground
--color-muted-foregroundBorder
--color-borderInput
--color-inputRing
--color-ringSurface Hierarchy (M3)
Material Design 3 surface container colors for creating visual depth and hierarchy through subtle color variations instead of shadows.
Surface Container Lowest
--color-surface-container-lowestSurface Container Low
--color-surface-container-lowSurface Container
--color-surface-containerSurface Container High
--color-surface-container-highSurface Container Highest
--color-surface-container-highestSurface Hierarchy Usage
// Nested containers with increasing elevation
<Card variant="surfaceLowest"> // Base layer
<Card variant="surfaceContainer"> // Content area
<Card variant="surfaceHigh"> // Elevated element
...
</Card>
</Card>
</Card>Inverse & Special Colors (M3)
High-contrast inverse surfaces for tooltips and snackbars, plus scrim and shadow colors.
Inverse Surface
--color-inverse-surfaceInverse On Surface
--color-inverse-on-surfaceInverse Primary
--color-inverse-primaryScrim
--color-scrimShadow
--color-shadowSemantic Colors
Purpose-driven colors with M3 container variants for consistent meaning across the interface.
PrimaryBrand identity, CTAs, links
Primary ContainerM3 tonal backgrounds for primary elements
SuccessPositive actions, confirmations
Success ContainerM3 tonal backgrounds for success states
WarningCaution, attention needed
Warning ContainerM3 tonal backgrounds for warning states
DestructiveErrors, destructive actions
Destructive ContainerM3 tonal backgrounds for error states
InfoInformational messages
Container Colors Usage
// Filled buttons (high emphasis)
<Button variant="primary">Submit</Button>
// Tonal buttons (medium emphasis) - uses container colors
<Button variant="tonal">Edit</Button>
<Button variant="dangerTonal">Remove</Button>
// Container color backgrounds
.alert {
background: var(--color-warning-container);
color: var(--color-warning-container-foreground);
}Color Palettes
Complete color scales from 50 (lightest) to 950 (darkest) for fine-grained control.
Gray
50#fafafa
100#f5f5f5
200#e5e5e5
300#d4d4d4
400#a3a3a3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0a0a0a
Blue
50#f0f8ff
100#d6ecff
200#add9ff
300#7bc1ff
400#49a8ff
500#1f8bff
600#006ce6
700#005ac0
800#004399
900#002b66
950#001a40
Red
50#fef2f2
100#fee2e2
200#fecaca
300#fca5a5
400#f87171
500#ef4444
600#dc2626
700#b91c1c
800#991b1b
900#7f1d1d
950#450a0a
Green
50#f0fdf4
100#dcfce7
200#bbf7d0
300#86efac
400#4ade80
500#22c55e
600#16a34a
700#15803d
800#166534
900#14532d
950#052e16
Yellow
50#fefce8
100#fef9c3
200#fef08a
300#fde047
400#facc15
500#eab308
600#ca8a04
700#a16207
800#854d0e
900#713f12
950#422006
Orange
50#fff7ed
100#ffedd5
200#fed7aa
300#fdba74
400#fb923c
500#f97316
600#ea580c
700#c2410c
800#9a3412
900#7c2d12
950#431407
Purple
50#faf5ff
100#f3e8ff
200#e9d5ff
300#d8b4fe
400#c084fc
500#a855f7
600#9333ea
700#7e22ce
800#6b21a8
900#581c87
950#3b0764
Pink
50#fdf2f8
100#fce7f3
200#fbcfe8
300#f9a8d4
400#f472b6
500#ec4899
600#db2777
700#be185d
800#9f1239
900#831843
950#500724
Cyan
50#ecfeff
100#cffafe
200#a5f3fc
300#67e8f9
400#22d3ee
500#06b6d4
600#0891b2
700#0e7490
800#155e75
900#164e63
950#083344
Teal
50#f0fdfa
100#ccfbf1
200#99f6e4
300#5eead4
400#2dd4bf
500#14b8a6
600#0d9488
700#0f766e
800#115e59
900#134e4a
950#042f2e
Indigo
50#eef2ff
100#e0e7ff
200#c7d2fe
300#a5b4fc
400#818cf8
500#6366f1
600#4f46e5
700#4338ca
800#3730a3
900#312e81
950#1e1b4b
Usage with SCSS Variables
@use '@/styles/variables' as *;
.element {
color: $color-gray-900;
background: $color-blue-50;
border-color: $color-primary-500;
}