Colors

Two layers: the full raw brand palette (sea + earth) 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 @halwel/ui/tokens (colors, palette)

Variants

Raw palette

deepSea

#1f3b34

deepPatina

#3e6d73

seaGreen

#6e8a7d

patinaBlue

#4ad0d1

sage

#8fa593

cognac

#c06a2b

terracotta

#c36a3d

softGold

#c8b07a

warmSand

#d9cab2

limestone

#d9d0c2

cream

#efe9d6

cardCream

#fbf8f0

driftwood

#8a8172

ink

#1b2326

onDark

#f3e7d3

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

Semantic tokens

--bg

#1f3b34page 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

--surface-elevated

#3e6d73canonical elevated surface — cards, rows, panels

--surface-elevated-border

rgba(255, 255, 255, 0.16)hairline border on elevated surfaces

--surface-elevated-border-hover

rgba(255, 255, 255, 0.34)elevated-surface border on hover

--surface-elevated-row-divider

rgba(255, 255, 255, 0.14)row dividers inside elevated surfaces

--text

#f3e7d3primary 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

#4ad0d1primary action / accent

--brand-primary-50

rgba(74, 208, 209, 0.5)primary at half opacity

--brand-card

#3e6d73elevated brand card surface

--brand-deep

#1f3b34ground / canvas

--brand-gold

#c8b07awarning / urgent accent

--brand-sky

#8fa593soft accent / care team

--brand-action

#c36a3dprimary call-to-action / button base (earthy)

--brand-action-strong

#c06a2bstronger action accent

What components reference. Swap these in tokens.css to retheme.