Foundation
Tokens
Semantic CSS variables that map to the current theme. Use these instead of raw palette colors — they automatically adapt when the user switches between light and dark modes.
Background & Surface
Token name
Light
Dark
background
alpine-light-90
midnight-gray-90
card
alpine-light-100
midnight-gray-70
popover
alpine-light-80
midnight-gray-60
muted
alpine-light-60
midnight-gray-50
input
alpine-light-100
midnight-gray-60
sidebar
alpine-light-100
midnight-gray-80
sidebar-primary
Background for the current or selected itempurple-0
midnight-gray-60
sidebar-accent
Low-emphasis background for hoverpurple-10
midnight-gray-55
Text
Token name
Light
Dark
foreground
alpine-light-10
midnight-gray-10
muted-foreground
alpine-light-30
midnight-gray-30
card-foreground
alpine-light-10
midnight-gray-10
popover-foreground
alpine-light-10
midnight-gray-10
primary-foreground
alpine-light-100
midnight-gray-90
secondary-foreground
alpine-light-20
midnight-gray-20
accent-foreground
purple-70
purple-40
destructive-foreground
red-70
red-40
sidebar-foreground
alpine-light-10
midnight-gray-10
sidebar-primary-foreground
alpine-light-20
midnight-gray-20
sidebar-accent-foreground
alpine-light-10
midnight-gray-10
Brand & Action
Token name
Light
Dark
primary
alpine-light-10
midnight-gray-0
secondary
purple-0
midnight-gray-50
accent
purple-60
purple-50
destructive
red-70
red-70
Border & Ring
Token name
Light
Dark
border
alpine-light-50
midnight-gray-50
ring
alpine-light-0
midnight-gray-0
sidebar-border
alpine-light-60
midnight-gray-60
sidebar-ring
alpine-light-0
midnight-gray-50
Semantic
Token name
Light
Dark
link
azure-80
azure-50
success
green-70
green-40
warning
yellow-70
yellow-40
Chart
Token name
Light
Dark
chart-1
purple-70
purple-50
chart-2
pink-60
pink-40
chart-3
turquoise-60
turquoise-40
chart-4
orange-60
orange-40
chart-5
blue-60
blue-40