Overview

Foundations

Brand

Colors

Typography

Spacing & Layout

Semantic Tokens

Icons

Shadows

Components

Patterns

Integral Logo

Design System

Theme Tokens

Our design system uses theme tokens to define the core color foundations—backgrounds, surfaces, text, borders, and interactive states—in a consistent, reusable way. Tokens keep color usage predictable across the product, making it easy to support light and dark modes, maintain accessibility, and apply brand updates without visual drift.

Brand

Primary brand accent used for key UI elements and highlights

Light

Dark

--brand-primary

Light:

Brand 700

Dark:

Brand 600

var(--brand-primary)

Light

Dark

--brand-subtle

Light:

Brand 100

Dark:

Brand 900

var(--brand-subtle)

Backgrounds

Base surfaces, cards, and container backgrounds

Light

Dark

--bg

Light:

Base/White

Dark:

Gray 950

var(--bg)

Light

Dark

--bg-hover

Light:

Gray 50

Dark:

Gray 800

var(--bg-hover)

Light

Dark

--bg-active

Light:

Gray 200

Dark:

Gray 700

var(--bg-active)

Light

Dark

--bg-body

Light:

Gray 50

Dark:

Gray 800

var(--bg-body)

Light

Dark

--bg-card

Light:

White

Dark:

Gray 950

var(--bg-card)

Light

Dark

--bg-card-hover

Light:

Gray 50

Dark:

Gray 800

var(--bg-card-hover)

Light

Dark

--bg-table

Light:

Gray 50

Dark:

Gray 900

var(--bg-table)

Light

Dark

--bg-sidebar

Light:

Base/White

Dark:

Gray 950

var(--bg-sidebar)

Light

Dark

--bg-sidebar-active

Light:

Primary 50

Dark:

Gray 800

var(--bg-sidebar-active)

Borders

Dividers, card borders, and separators

Light

Dark

--border

Light:

Gray 200

Dark:

Gray 800

var(--border)

Light

Dark

--border-light

Light:

Gray 100

Dark:

Gray 700

var(--border-light)

Light

Dark

--border-card

Light:

Gray 200

Dark:

Gray 800

var(--border-card)

Text

Typography colors for body text, headings, and labels

Light

Dark

--text

Light:

Gray 900

Dark:

Gray 50

var(--text)

Light

Dark

--text-muted

Light:

Tertiary 500

Dark:

Gray 400

var(--text-muted)

Light

Dark

--text-faint

Light:

Tertiary 400

Dark:

Gray 500

var(--text-faint)

Light

Dark

--text-disabled

Light:

Gray 500

Dark:

Gray 400

var(--text-disabled)

Light

Dark

--text-header

Light:

Gray 700

Dark:

Gray 300

var(--text-header)

Status Backgrounds

Background colors for alerts, notifications, and status indicators

Light

Dark

--neutral-bg

Light:

Gray 100

Dark:

Gray 700

var(--neutral-bg)

Light

Dark

--success-bg

Light:

Green 100

Dark:

Green 700

var(--success-bg)

Light

Dark

--warning-bg

Light:

Amber 100

Dark:

Amber 700

var(--warning-bg)

Light

Dark

--danger-bg

Light:

Red 100

Dark:

Red 700

var(--danger-bg)

Light

Dark

--accent-bg

Light:

Secondary 100

Dark:

Secondary 700

var(--accent-bg)

Light

Dark

--info-bg

Light:

Blue 100

Dark:

Blue 700

var(--info-bg)

Status Text

Text colors for status messages and semantic content

Light

Dark

--neutral-text

Light:

Gray 700

Dark:

Gray 300

var(--neutral-text)

Light

Dark

--success-text

Light:

Green 700

Dark:

Green 300

var(--success-text)

Light

Dark

--warning-text

Light:

Amber 700

Dark:

Amber 300

var(--warning-text)

Light

Dark

--danger-text

Light:

Red 700

Dark:

Red 300

var(--danger-text)

Light

Dark

--accent-text

Light:

Secondary 700

Dark:

Secondary 300

var(--accent-text)

Light

Dark

--info-text

Light:

Blue 700

Dark:

Blue 300

var(--info-text)

Status Dots / Icons

Indicator dots and icons for status communication

Light

Dark

--success-dot

Light:

Green 500

Dark:

Green 500

var(--success-dot)

Light

Dark

--warning-dot

Light:

Amber 500

Dark:

Amber 500

var(--warning-dot)

Light

Dark

--danger-dot

Light:

Red 500

Dark:

Red 500

var(--danger-dot)

Light

Dark

--info-dot

Light:

Blue 500

Dark:

Blue 500

var(--info-dot)

Buttons - Primary

Primary action buttons (high emphasis)

Light

Dark

--btn-primary-bg

Light:

Secondary 600

Dark:

Secondary 600

var(--btn-primary-bg)

Light

Dark

--btn-primary-bg-hover

Light:

Secondary 700

Dark:

Secondary 500

var(--btn-primary-bg-hover)

Light

Dark

--btn-primary-bg-active

Light:

Secondary 800

Dark:

Secondary 700

var(--btn-primary-bg-active)

Light

Dark

--btn-primary-bg-disabled

Light:

Gray 200

Dark:

Gray 800

var(--btn-primary-bg-disabled)

Light

Dark

--btn-primary-text

Light:

Base/White

Dark:

Base/White

var(--btn-primary-text)

Light

Dark

--btn-primary-text-disabled

Light:

Gray 500

Dark:

Gray 500

var(--btn-primary-text-disabled)

Buttons - Secondary

Secondary action buttons (medium emphasis)

Light

Dark

--btn-secondary-bg

Light:

Transparent

Dark:

Transparent

var(--btn-secondary-bg)

Light

Dark

--btn-secondary-bg-hover

Light:

Gray 100

Dark:

Gray 800

var(--btn-secondary-bg-hover)

Light

Dark

--btn-secondary-border

Light:

Gray 200

Dark:

Gray 800

var(--btn-secondary-border)

Light

Dark

--btn-secondary-border-disabled

Light:

Gray 200

Dark:

Gray 700

var(--btn-secondary-border-disabled)

Light

Dark

--btn-secondary-text

Light:

Gray 800

Dark:

Gray 100

var(--btn-secondary-text)

Light

Dark

--btn-secondary-text-disabled

Light:

Gray 500

Dark:

Gray 500

var(--btn-secondary-text-disabled)

Light

Dark

--btn-secondary-accent-border

Light:

Secondary 600

Dark:

Secondary 600

var(--btn-secondary-accent-border)

Light

Dark

--btn-secondary-accent-text

Light:

Secondary 600

Dark:

Secondary 600

var(--btn-secondary-accent-text)

Buttons - Tertiary / Ghost / Icon

Tertiary and ghost buttons (low emphasis)

Light

Dark

--btn-tertiary

Light:

Gray 600

Dark:

Gray 400

var(--btn-tertiary)

Light

Dark

--btn-tertiary-bg-hover

Light:

Gray 100

Dark:

Gray 800

var(--btn-tertiary-bg-hover)

Buttons - Destructive

Destructive actions (delete, remove, revoke)

Light

Dark

--btn-destructive-bg

Light:

Red 600

Dark:

Red 600

var(--btn-destructive-bg)

Light

Dark

--btn-destructive-bg-hover

Light:

Red 700

Dark:

Red 500

var(--btn-destructive-bg-hover)

Light

Dark

--btn-destructive-text

Light:

Base/White

Dark:

Base/White

var(--btn-destructive-text)

Links

Text links and inline link elements

Focus

Focus rings for keyboard navigation

Light

Dark

--focus-ring

Light:

Secondary 600 @ 15%

Dark:

Secondary 600 @ 30%

var(--focus-ring)

Inputs

Form inputs, text fields, and text areas

Light

Dark

--input-border-hover

Light:

Gray 300

Dark:

Gray 600

var(--input-border-hover)

Light

Dark

--input-border-focus

Light:

Secondary 600

Dark:

Secondary 600

var(--input-border-focus)

Light

Dark

--placeholder

Light:

Tertiary 600

Dark:

Gray 400

var(--placeholder)

Select / Dropdown Menu

Dropdown menus and select components

Light

Dark

--select-bg-filtered

Light:

Secondary 25

Dark:

Secondary 600 @ 10%

var(--select-bg-filtered)

Avatar

User avatar components

Light

Dark

--avatar-bg

Light:

Primary 100

Dark:

Primary 700

var(--avatar-bg)

Light

Dark

--avatar-text

Light:

Primary 700

Dark:

Primary 100

var(--avatar-text)

User Menu

User profile menu and role badges

Light

Dark

--role-badge-bg

Light:

Gray 100

Dark:

Gray 800

var(--role-badge-bg)

Light

Dark

--role-badge-text

Light:

Gray 700

Dark:

Gray 400

var(--role-badge-text)

Light

Dark

--sign-out

Light:

Red 600

Dark:

Red 500

var(--sign-out)

Light

Dark

--sign-out-hover

Light:

Red 50

Dark:

Red 900

var(--sign-out-hover)

Count Badge

Notification count badges

Light

Dark

--count-badge-bg

Light:

Red 500

Dark:

Red 500

var(--count-badge-bg)

Light

Dark

--count-badge-text

Light:

Base White

Dark:

Base White

var(--count-badge-text)