colors

two layers: a stable raw palette (six swatches) and a semantic token set (what components actually reference). swap a semantic mapping in packages/ui/styles/tokens.css and every surface follows.

all rendered live from packages/ui/tokens.ts so this page can never drift from what ships.

import from @klera/ui/tokens (colors, palette)

variants

raw palette

blue500

#007fff

blue550

#1a4fef

blue900

#000080

sky300

#89cff0

gold400

#efbd1a

textPrimary

#eef4f7

the actual hex values. do not reference these directly in components — use the semantic tokens below.

semantic tokens

--bg

#000080page background

--bg-panel

rgba(255, 255, 255, 0.05)default panel/card surface

--bg-panel-hover

rgba(255, 255, 255, 0.08)panel/card on hover

--bg-input

rgba(255, 255, 255, 0.08)input field surface

--bg-input-focus

rgba(255, 255, 255, 0.12)input on focus

--text

#eef4f7primary text

--text-muted

rgba(255, 255, 255, 0.55)secondary text

--text-dim

rgba(255, 255, 255, 0.35)tertiary text / placeholder

--border

rgba(255, 255, 255, 0.08)default border

--border-focus

rgba(255, 255, 255, 0.24)border on focus

--divider

rgba(255, 255, 255, 0.14)section divider lines

--brand-primary

#007fffprimary action / accent

--brand-primary-50

rgba(0, 127, 255, 0.5)primary at half opacity

--brand-card

#1a4fefelevated brand card surface

--brand-deep

#000080ground / canvas

--brand-gold

#efbd1awarning / urgent accent

--brand-sky

#89cff0soft accent / care team

what components reference. swap these in tokens.css to retheme.