Colors

Color palette and design tokens for consistent theming across components and layouts.

Primary

Main brand colors for primary actions and key elements

Common usage: Buttons, links, highlights, main CTAs

Softprimary-soft

Subtle backgrounds, hover states

Baseprimary

Primary buttons, active states

Boldprimary-bold

Strong emphasis, pressed states

Foregroundprimary-foreground

Text on primary backgrounds

Secondary

Supporting colors for secondary actions and elements

Common usage: Secondary buttons, alternative actions, supporting elements

Softsecondary-soft

Light backgrounds, subtle accents

Basesecondary

Secondary buttons, borders

Boldsecondary-bold

Emphasis, active secondary elements

Foregroundsecondary-foreground

Text on secondary backgrounds

Accent

Attention-grabbing colors for highlights and special elements

Common usage: Notifications, highlights, special features, warnings

Softaccent-soft

Notification backgrounds, gentle alerts

Baseaccent

Call-outs, badges, important highlights

Boldaccent-bold

Strong warnings, urgent notifications

Foregroundaccent-foreground

Text on accent backgrounds

Paper

Background and surface colors for content areas

Common usage: Page backgrounds, cards, content containers, modals

Softpaper-soft

Page backgrounds, main surface

Basepaper

Cards, elevated content areas

Boldpaper-bold

Borders, dividers, subtle emphasis

Foregroundpaper-foreground

Text on paper backgrounds

Ink

Text and foreground colors for readability and hierarchy

Common usage: Body text, headings, icons, borders, contrasting elements

Softink-soft

Secondary text, muted content

Baseink

Primary text, main content

Boldink-bold

Headings, strong emphasis

Foregroundink-foreground

Text on dark backgrounds