Sidera/Foundations/Colors
Colors
An indigo brand and a neutral gray ramp carry the system, with red, green, amber and sky reserved for meaning. Semantic tokens are theme-aware — toggle the theme to evaluate every color in light and dark.
BrandIndigo
ModesLight + Dark
01 —Semantic (theme-aware)
These tokens resolve differently per theme. Use the toggle in the top bar to watch them adapt — components should read these, never the raw ramps below.
background
var(--background)
background-card
var(--background-card)
background-subtle
var(--background-subtle)
foreground
var(--foreground)
foreground-muted
var(--foreground-muted)
border
var(--border)
primary
var(--primary)
primary-subtle
var(--primary-subtle)
destructive
var(--destructive)
success
var(--success)
warning
var(--warning)
info
var(--info)
02 —Brand — Indigo
50
#E9EEFE
100
#CFDAF9
200
#ABBFFB
300
#7F9BFA
400
#5470EB
500
#3242D3
600
#232CAC
700
#161885
800
#0C0C5E
900
#040538
950
#01011C
03 —Neutral — Gray
0
#FFFFFF
50
#F5F5F5
100
#E8E8E8
200
#D1D1D1
300
#B4B4B4
400
#929292
500
#717171
600
#5B5B5B
700
#454545
800
#303030
900
#1B1B1B
950
#0B0B0B
1000
#000000
04 —Red — Destructive
50
#FFF0EE
100
#FFDDD9
200
#FFBBB4
300
#FF8D85
400
#EF5854
500
#D40924
600
#AF0015
700
#8A0009
800
#640005
900
#3C0002
950
#200001
05 —Green — Success
50
#EEF9EE
100
#DAEFD9
200
#B4DEB4
300
#83C885
400
#4CAA53
500
#008B1D
600
#00700C
700
#005701
800
#003E00
900
#002301
950
#001000
06 —Amber — Warning
50
#FBF4E9
100
#F4E6CF
200
#E9CD9F
300
#D9AC5D
400
#C08600
500
#A46100
600
#864C00
700
#693800
800
#4B2700
900
#2C1500
950
#160700
07 —Sky — Info
50
#E8F9FC
100
#CDEFF5
200
#98DEEB
300
#40C8DD
400
#00A9C5
500
#0089AB
600
#006F8C
700
#00556E
800
#003D4F
900
#00222E
950
#001017
08 —Usage
Reach for the 500 step as the default weight of any family. Text and backgrounds pull from the semantic tokens so contrast stays correct in both themes; the raw ramps are for building new tokens, not for styling components directly.