@blastx/ui
GitHub

Colors

OKLCH-based color system with perceptually uniform lightness and built-in opacity scales.

Brand Colors

Primary

Purple-blue

oklch(0.67 0.175 278)

/5
/10
/20
/30
/50
/80
/90

Secondary

Blue

oklch(0.62 0.13 236)

/5
/10
/20
/30
/50
/80
/90

Tertiary

Cyan

oklch(0.79 0.105 182)

/5
/10
/20
/30
/50
/80
/90

Accent

Golden

oklch(0.74 0.17 72)

/5
/10
/20
/30
/50
/80
/90

Semantic Colors

Success

bg-success/10 + text-success
border-success/20 pattern

Warning

bg-warning/10 + text-warning
border-warning/20 pattern

Destructive

bg-destructive/10 + text-destructive
border-destructive/20 pattern

Neutral Scale

Background

var(--background)

Card

var(--card)

Popover

var(--popover)

Muted

var(--muted)

Border

var(--border)

Input

var(--input)

Chart Palette

chart-1
chart-2
chart-3
chart-4
chart-5

Gradients

Brand

gradient-brand

Logo

bg-gradient-to-br from-primary to-accent

Avatar

bg-gradient-to-br from-primary to-secondary

Card Header

bg-gradient-to-r from-muted to-card

Decorative Blur

bg-gradient-to-br from-primary/20 to-secondary/20

CTA Card

bg-gradient-to-br from-primary/5 via-card to-secondary/5

Color Combinations

Status Badge

Active

bg-success/10 text-success border-success/20 rounded-lg px-3 py-1.5

Info Card

Informational content styled with secondary color accents.

border-secondary/30 bg-secondary/10

Error Alert

Something went wrong. Please try again.

bg-destructive/10 border-destructive/20 text-destructive rounded-xl

Frosted Glass

Frosted glass overlay

bg-card/80 backdrop-blur-xl

Highlighted

Highlighted element with accent ring.

ring-2 ring-accent