Colors

The design system uses a cohesive, token-based palette with dedicated light and dark mode values. Core tokens and full shade ramps are defined in setup.css and exposed as Tailwind utility colors.

Every swatch below is painted with a live design token and reflects the currently active theme. Switch the theme and watch the palette update in place.

Surface hierarchy

The neutral surface system uses three layers to communicate elevation and visual priority:

background: Page canvas and app shell backdrop.
surface: Standard containers such as cards, sidebars, and inputs.
surface-raised: Floating or elevated UI such as dropdowns, popovers, and modals.

Use this progression consistently so overlays feel intentionally lifted above base content.

surface

Card / Sidebar / Input

surface-raised

Popover / Modal

tsx

1
2
3
4
5
6
7
8
9
<main className="bg-background text-text min-h-screen p-6">
  <section className="bg-surface border border-border rounded-xl p-4">
    Base content on surface

    <div className="mt-4 bg-surface-raised border border-border rounded-lg p-3 shadow-sm">
      Elevated content (popover/modal style)
    </div>
  </section>
</main>

Brand

Core brand colors that define the identity of the design system.

Primary

--primary

Secondary

--secondary

Tertiary

--tertiary

Surface

Layered neutrals for page canvas, components, and elevated overlays.

Background

--background

Surface

--surface

Surface Raised

--surface-raised

Border

--border

Text

Foreground colors for headings, body copy, and muted secondary text.

Text

--text

Text Muted

--text-muted

Text Heading

--text-heading

Semantic

Status and feedback colors communicating state at a glance.

Info

--info

Success

--success

Warning

--warning

Error

--error

Data Visualization

Chart tokens that adapt their values to the active theme.

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Chart 6

--chart-6

Chart 7

--chart-7

Shade ramps

In addition to core tokens (for example primary, success, warning), the system provides 50-950 ramps such as --color-primary-50 … --color-primary-950.

Use ramps when you need nuanced states:

Lower steps (50-200): Subtle backgrounds and soft tints.
Mid steps (300-600): Interactive fills, hovers, and active states.
Higher steps (700-950): Strong contrast accents, text on light tints, and emphasis.

Click any step to copy its live hex.

Primary

--color-primary-[50–950]

Interactive hierarchy from subtle tints to strong emphasis.

Secondary

--color-secondary-[50–950]

Soft neutral accents, subtle states, and layered backgrounds.

Tertiary

--color-tertiary-[50–950]

Accent spectrum for highlights and complementary emphasis.

Info

--color-info-[50–950]

Informational spectrum for badges, alerts, and charts.

Success

--color-success-[50–950]

Positive feedback spectrum across filled and tinted states.

Warning

--color-warning-[50–950]

Caution spectrum for advisory and pending states.

Error

--color-error-[50–950]

Destructive spectrum for errors and danger indicators.

Base neutral

--color-base-[50–950]

Neutral foundation used by surface and text tokens.

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import '@/lib_public/setup.css'

// Use CSS variables as tailwind classes
<div className="bg-primary text-primary-foreground">
  Primary color background with foreground text
</div>

<div className="bg-primary-100 text-primary-900">
  Subtle tinted background using the primary ramp
</div>

<div className="bg-surface-raised border border-border">
  Elevated panel
</div>

Surface hierarchy

The neutral surface system uses three layers to communicate elevation and visual priority:

background: Page canvas and app shell backdrop.

surface: Standard containers such as cards, sidebars, and inputs.

surface-raised: Floating or elevated UI such as dropdowns, popovers, and modals.

Use this progression consistently so overlays feel intentionally lifted above base content.

surface

Card / Sidebar / Input

surface-raised

Popover / Modal

tsx

1
2
3
4
5
6
7
8
9
<main className="bg-background text-text min-h-screen p-6">
  <section className="bg-surface border border-border rounded-xl p-4">
    Base content on surface

    <div className="mt-4 bg-surface-raised border border-border rounded-lg p-3 shadow-sm">
      Elevated content (popover/modal style)
    </div>
  </section>
</main>

Shade ramps

In addition to core tokens (for example primary, success, warning), the system provides 50-950 ramps such as --color-primary-50 … --color-primary-950.

Use ramps when you need nuanced states:

Lower steps (50-200): Subtle backgrounds and soft tints.

Mid steps (300-600): Interactive fills, hovers, and active states.

Higher steps (700-950): Strong contrast accents, text on light tints, and emphasis.

Click any step to copy its live hex.

Primary

--color-primary-[50–950]

Interactive hierarchy from subtle tints to strong emphasis.

Secondary

--color-secondary-[50–950]

Soft neutral accents, subtle states, and layered backgrounds.

Tertiary

--color-tertiary-[50–950]

Accent spectrum for highlights and complementary emphasis.

Info

--color-info-[50–950]

Informational spectrum for badges, alerts, and charts.

Success

--color-success-[50–950]

Positive feedback spectrum across filled and tinted states.

Warning

--color-warning-[50–950]

Caution spectrum for advisory and pending states.

Error

--color-error-[50–950]

Destructive spectrum for errors and danger indicators.

Base neutral

--color-base-[50–950]

Neutral foundation used by surface and text tokens.

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import '@/lib_public/setup.css'

// Use CSS variables as tailwind classes
<div className="bg-primary text-primary-foreground">
  Primary color background with foreground text
</div>

<div className="bg-primary-100 text-primary-900">
  Subtle tinted background using the primary ramp
</div>

<div className="bg-surface-raised border border-border">
  Elevated panel
</div>