Stella UI
Docs

Design Tokens

All design tokens use the --stella-* CSS custom property prefix. The source of truth is packages/theme/src/tokens.json.

How to Use Tokens

After importing the theme CSS, reference tokens in any stylesheet:

.my-button {
  background: var(--stella-color-cosmos-500);
  color: var(--stella-color-starlight-primary);
  border-radius: var(--stella-borderRadius-md);
  padding: var(--stella-spacing-3) var(--stella-spacing-6);
  font-size: var(--stella-typography-fontSize-sm);
  transition: background var(--stella-transition-fast);
}

Color Palettes

Named after celestial bodies. Each palette has 11 stops (50–950) following a perceptual lightness scale.

CosmosPrimary / Interactive — Indigo
50
100
200
300
400
500
600
700
800
900
950

--stella-color-cosmos-[50–950]

NebulaAccent — Purple
50
100
200
300
400
500
600
700
800
900
950

--stella-color-nebula-[50–950]

AuroraAccent — Cyan
50
100
200
300
400
500
600
700
800
900
950

--stella-color-aurora-[50–950]

NovaSuccess / Positive — Emerald
50
100
200
300
400
500
600
700
800
900
950

--stella-color-nova-[50–950]

Void — Backgrounds

Semantic background tokens for layered dark surfaces.

base
Darkest background
--stella-color-void-base
surface
Card / panel surface
--stella-color-void-surface
overlay
Elevated overlays
--stella-color-void-overlay
muted
Subtle / muted background
--stella-color-void-muted

Starlight — Text

Semantic text color tokens for accessible type hierarchy.

Aa
primary
Primary text
--stella-color-starlight-primary
Aa
secondary
Secondary / muted text
--stella-color-starlight-secondary
Aa
disabled
Disabled state text
--stella-color-starlight-disabled

Typography

TokenValue
--stella-typography-fontFamily-sansInter, system-ui, sans-serif
--stella-typography-fontFamily-monoJetBrains Mono, monospace
--stella-typography-fontSize-xs0.75rem / 12px
--stella-typography-fontSize-sm0.875rem / 14px
--stella-typography-fontSize-md1rem / 16px
--stella-typography-fontSize-lg1.125rem / 18px
--stella-typography-fontSize-xl1.25rem / 20px
--stella-typography-fontSize-2xl1.5rem / 24px
--stella-typography-fontSize-3xl1.875rem / 30px
--stella-typography-fontWeight-normal400
--stella-typography-fontWeight-medium500
--stella-typography-fontWeight-semibold600
--stella-typography-fontWeight-bold700

Spacing

4px base grid. Reference as --stella-spacing-{key}.

--stella-spacing-14px
--stella-spacing-28px
--stella-spacing-312px
--stella-spacing-416px
--stella-spacing-624px
--stella-spacing-832px
--stella-spacing-1248px
--stella-spacing-1664px
--stella-spacing-2080px
--stella-spacing-2496px

Border Radius

Reference as --stella-borderRadius-{key}.

sm
md
lg
xl
full

Full Token Reference

The complete token set is defined in the package source. Use the exported utilities for programmatic access:

import { tokens, cssVariables, generateCSSVarsString } from '@stella-ds/theme'

// tokens — nested object: tokens.color.cosmos[500]
// cssVariables — flat map: { '--stella-color-cosmos-500': '#4f46e5', ... }
// generateCSSVarsString() — returns a :root { ... } CSS string