UI Primitives
Accessible, composable UI primitives for building marketing sections. Plus the complete Deep Space design system — the visual language and tokens that power StellarBoat.
Button
Card
Default
Default Card
Standard card with default surface background. Use for primary content containers.
Raised
Raised Card
Elevated card with raised surface background. Use for featured or highlighted content.
Badge
Primary
PrimarySecondary
SecondarySuccess
SuccessWarning
WarningError
ErrorInfo
InfoAlert
Info
Success
Warning (role=alert)
Error (role=alert)
Divider
Horizontal separator between sections:
Icon
Decorative (aria-hidden)
Meaningful (aria-label)
Different Sizes
Design Tokens
The Deep Space visual system — replace these tokens in
src/styles/tokens.css to rebrand StellarBoat.
Color Palette
Primitive Scale
primitive-midnight
#0a0e27
primitive-space-blue
#1a1f3a
primitive-starfield
#000000
primitive-neon-cyan
#00d9ff
primitive-neon-purple
#c000ff
primitive-text-white
#ffffff
primitive-text-gray
#b0b8c8
primitive-border
#2d3a5a
Primary Accent (Neon Cyan)
primary-50
#e0f7ff
primary-100
#b3ebff
primary-200
#80e0ff
primary-300
#4dd5ff
primary-400
#00d9ff
primary-500
#00b8d4
primary-600
#0099bb
primary-700
#006b8a
primary-800
#003d59
Secondary Accent (Neon Purple)
secondary-50
#f5e0ff
secondary-100
#e6b3ff
secondary-200
#d680ff
secondary-300
#c74dff
secondary-400
#c000ff
secondary-500
#9900cc
secondary-600
#720099
secondary-700
#4d0066
secondary-800
#330044
Typography Scale
| Level | Size | Weight | Line Height | Usage |
|---|---|---|---|---|
| XL | 2.5rem (40px) | 700 (bold) | 1.1 | Page titles |
| LG | 1.75rem (28px) | 600 (semibold) | 1.2 | Section headings |
| Base | 1rem (16px) | 400 (regular) | 1.6 | Body text |
| SM | 0.875rem (14px) | 500 (medium) | 1.6 | Small labels, captions |
| XS | 0.75rem (12px) | 500 (medium) | 1.4 | Badges, tags, UI labels |
Spacing Scale
XS — 8px
SM — 12px
MD — 24px
LG — 32px
Section — 96px
Border Radius
MD — 8px
LG — 16px
Full — 9999px
Shadows & Glows
None
Default state
none
Soft
Hover on cards
0 2px 8px rgba(0,0,0,0.3)
Glow Cyan
Interactive focus
0 0 16px rgba(0,217,255,0.5)
Glow Purple
Decorative accents
0 0 24px rgba(192,0,255,0.4)
About Design Tokens
All tokens are defined in src/styles/tokens.css using Tailwind v4's @theme directive.
Change any token value and the entire site updates instantly. Utilities
like bg-primary-500 and text-secondary-200 automatically follow your changes.