Foundations

Colors

Theme-aware color palette with accent and surface tokens

Theme-aware tokens, built on the CSS light-dark() function. Each swatch previews the active theme. Switch it and watch every token recalculate. Borders change color with their role.

Surface & Text

--color-bg

Page and app background

Light#FFFFFFDark#16181A

--color-surface

Elevated cards (translucent)

Light#0000000DDark#FFFFFF0D

--color-surface-opaque

Solid elevated surfaces

Light#F2F2F2Dark#222425

--color-text

Main body text

Light#475569Dark#E2E8F0

--color-text-secondary

Descriptions, secondary text

Light#565F6EDark#AAAAAA

--color-text-tertiary

Muted labels, separators

Light#576980Dark#D4D4D4

Accent

--color-accent

Actions, links, focus

Light#7C3AEDDark#2DD4BF

--color-accent-secondary

Secondary accents, gradients

Light#06B6D4Dark#D94F7B

--color-glow

Ambient glow / aura effects

Light#06B6D42EDark#2DD4BF14

Status

--color-success

Confirmation, successful operation

Light#00BE58Dark#4ADE80

--color-error

Failure, form error

Light#DC2626Dark#F87171

--color-info

Notices, ongoing messages

Light#2FA5FFDark#60A5FA

Border

Separator--color-border

Rules and repeated rows

Light#4755692EDark#E2E8F024

Card--color-border-card

A single card on the page

Light#4755693DDark#E2E8F029

Control--color-border-control

Compact controls, clears 3:1

Light#475569B3Dark#E2E8F073

Field--color-text

Fields, outline Button and marks

Light#475569Dark#E2E8F0

Accent at 1 px--color-contour-accent

Open, filled and clicked focus

Light#6D28D9Dark#2DD4BF