Foundations
Colors
Three layers — palette ramps, semantic roles, shadcn aliases. Components only ever read the role layer.
Palette ramps
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
Semantic roles
--supa-color-paper
--supa-color-ink
--supa-color-rule
--supa-color-accent
--supa-color-info
--supa-color-success
--supa-color-warning
--supa-color-danger
Re-skin one role
Every component reads --supa-color-accent. Override it on the consumer's :root or .supa-root and the entire kit shifts colour without a single component edit.