Foundations

Colors

A layered token system. Semantic role tokens (like foreground, accent) for components, plus full 11-step numeric scales for fine-grained control. Always reference tokens — never raw hex.

Semantic Roles

Use these in all component code. They remap automatically if the theme changes.

--color-backgroundbg-background

Page background

#FFFFFF

--color-foregroundtext-foreground

Primary text, icons

#0A0A0A

--color-mutedtext-muted

Secondary text

#5A5A5F

--color-subtletext-subtle

Placeholder, tertiary

#8D8D92

--color-borderborder-border

Dividers, hairlines

#DEDED9

--color-surfacebg-surface

Subtle backgrounds, code blocks

#F7F6F3

--color-mistbg-mist

Skeleton, hover fills

#EBEBEB

Color Scales

11 steps per scale, 50–950. Use the numeric scale when you need a specific shade outside of the semantic roles — e.g. bg-electric-50 for a badge background, text-success-700 for status text. The primary shade of each scale is marked with a ring.

Neutral

Achromatic gray — text, borders, surfaces

#FAFAFA

100

#F5F5F5

200

#E5E5E5

300

#D4D4D4

400

#A3A3A3

500

#737373

600

#525252

700

#404040

800

#262626

900

#171717

950

#0A0A0A

primary

Electric

Primary action — CTAs, links, focus rings

#EBF2FF

100

#D6E8FF

200

#ADCFFF

300

#7AB0FF

400

#4B8EFF

500

#2270FF

600

#0057FF

primary

700

#0045CC

800

#003ACC

900

#002980

950

#001A52

Success

Confirmation, positive status

#F0FDF4

100

#DCFCE7

200

#BBF7D0

300

#86EFAC

400

#4ADE80

500

#22C55E

600

#16A34A

700

#15803D

primary

800

#166534

900

#14532D

950

#052E16

Warning

Caution, pending, non-critical alerts

#FFFBEB

100

#FEF3C7

200

#FDE68A

300

#FCD34D

400

#FBBF24

500

#F59E0B

600

#D97706

700

#B45309

primary

800

#92400E

900

#78350F

950

#451A03

Destructive

Errors, delete actions, critical states

#FFF0F0

100

#FFE0E0

200

#FFC0C0

300

#FF9090

400

#FF5C5C

500

#F03030

600

#C8102E

primary

700

#A50D26

800

#820A1E

900

#5F0715

950

#3D040D

Interactive Tokens

Semantic aliases for the Electric scale used in interactive elements.

accent

Default state — buttons, links, focus

#0057FF

accent-hover

Hover state

#0045CC

accent-active

Pressed / active

#003ACC

accent-subtle

Badge bg, row hover

#EBF2FF

Status Tokens

Each status has three semantic tokens: text, background, and border.

Success

--color-success

--color-success-bg

Warning

--color-warning

--color-warning-bg

Destructive

--color-destructive

--color-destructive-bg

Photo Overlays

Used exclusively on photo cards for gradient scrims. Never apply to text or UI backgrounds.

--overlay-heavy

Photo card gradient — bottom scrim

rgba(0,0,0,0.72)

--overlay-medium

Hero & full-bleed overlays

rgba(0,0,0,0.65)

--overlay-panel

Category strip panel

rgba(0,0,0,0.32)

--overlay-light

Hover tint on photo cards

rgba(0,0,0,0.16)