Theme Reference

Design tokens powering the @blastx/ui component library. All tokens adapt automatically between light and dark mode via CSS custom properties.

Colors

Color tokens defined as OKLCH values. Use the Tailwind utility classes (e.g., bg-primary, text-muted-foreground).

background

var(--background)

Page background

foreground

var(--foreground)

Primary text

card

var(--card)

Card surfaces

card-foreground

var(--card-foreground)

Card text

popover

var(--popover)

Popover surfaces

popover-foreground

var(--popover-foreground)

Popover text

primary

var(--primary)

Brand primary (purple-blue)

primary-foreground

var(--primary-foreground)

Text on primary

secondary

var(--secondary)

Brand secondary (blue)

secondary-foreground

var(--secondary-foreground)

Text on secondary

tertiary

var(--tertiary)

Brand tertiary (cyan)

tertiary-foreground

var(--tertiary-foreground)

Text on tertiary

accent

var(--accent)

Accent color (gold)

accent-foreground

var(--accent-foreground)

Text on accent

muted

var(--muted)

Subtle backgrounds

muted-foreground

var(--muted-foreground)

De-emphasized text

success

var(--success)

Success state

success-foreground

var(--success-foreground)

Text on success

warning

var(--warning)

Warning state

warning-foreground

var(--warning-foreground)

Text on warning

destructive

var(--destructive)

Error / danger

destructive-foreground

var(--destructive-foreground)

Text on destructive

border

var(--border)

Default borders

input

var(--input)

Input borders

ring

var(--ring)

Focus ring

Chart Colors

Dedicated palette for data visualization.

chart-1

var(--chart-1)

Chart color 1 (primary)

chart-2

var(--chart-2)

Chart color 2 (secondary)

chart-3

var(--chart-3)

Chart color 3 (tertiary)

chart-4

var(--chart-4)

Chart color 4 (accent)

chart-5

var(--chart-5)

Chart color 5 (purple)

Border Radius

Base radius is 0.75rem (12px). All radius tokens derive from this base value.

--radius-sm

calc(var(--radius) - 4px)

Small radius (8px)

--radius-md

calc(var(--radius) - 2px)

Medium radius (10px)

--radius-lg

var(--radius)

Large radius (12px)

--radius-xl

calc(var(--radius) + 4px)

Extra large radius (16px)

Typography

The theme uses Geist font family via CSS custom properties.

font-sans (--font-geist-sans)

The quick brown fox jumps over the lazy dog.

font-mono (--font-geist-mono)

The quick brown fox jumps over the lazy dog.

Gradients

Brand gradient utility classes available in the theme.

.gradient-brand

Primary brand gradient

.gradient-blue-purple

Blue to purple

.gradient-cyan-pink

Cyan to primary

Usage

/* Import the theme in your globals.css */
@import "tailwindcss";
@import "@blastx/ui/theme.css";

/* Then use Tailwind utility classes */
<div className="bg-primary text-primary-foreground rounded-lg">
  Styled with theme tokens
</div>

<div className="bg-card border border-border text-card-foreground">
  Card surface
</div>

<p className="text-muted-foreground">
  De-emphasized text
</p>