Design System

A living reference for the Planet X Devs design system. Canonical tokens live in globals.css; semantic class presets in config/theme.ts.

Brand Palette

#0A0A0B

nebula-black

#5B21B6

nebula-purple-dark

#6B46C1

nebula-purple

#9333EA

nebula-violet

#312E81

nebula-blue

#0284C7

stellar-blue

#06B6D4

nebula-cyan

#FAFAFA

nebula-white

Opacity & tint variants

violet-10

violet-20

violet-30

violet-40

violet-50

cyan-10

cyan-20

cyan-30

cyan-40

cyan-50

purple-20

purple-30

purple-50

Semantic Colors

Text (theme.themeColors.text)

Primary text

Secondary text

Tertiary text

Muted text

Accent text

Error text

Success text

Warning text

Surfaces (globals.css .bg-surface-*)

.bg-surface-primary

.bg-surface-secondary

.bg-surface-tertiary

.bg-surface-violet

.bg-surface-cyan

.bg-surface-purple

Typography

Headings (Heading component)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph scale (theme.typography.paragraph)

Small — text-sm

Base — text-base

Large — text-lg

Extra large — text-xl

Buttons

Variants

Sizes

States

Cards & Shadows

Small shadow

shadow="small"

Medium shadow

shadow="medium"

Large + hover

shadow="large" hover

Nebula glow utilities

.shadow-nebula

.shadow-nebula-lg

.shadow-glow

Glass Effects

Rendered over a nebula gradient so the frosting reads.

.glass

.glass-elevated

.glass-gray

.glass-violet

.glass-cyan

.glass-purple

.glass-gradient-violet

.glass-gradient-cyan

.glass-gradient-nebula

Gradients

.bg-gradient-nebula

.bg-gradient-space

.bg-gradient-planet

.bg-gradient-radial-nebula

gradients.primary

gradients.secondary

Spacing Scale

Section vertical rhythm (theme.spacing.section)

xsmall

py-4

small

py-12

medium

py-16

large

py-20

xlarge

py-24 lg:py-32

Border Radius

small

medium

large

xlarge

full

Animations

.animate-float

.animate-pulse-slow

.animate-twinkle

.animate-spin-slow