Launch77 Theme System

Design tokens, color pairings, and semantic usage guidelines for the Launch77 UI library.

The Launch77 theme system uses CSS variables and Tailwind utility classes to provide a consistent, accessible, and customizable design foundation. All components in @launch/ui use these tokens automatically.

Design Tokens

Browse all 17 semantic color tokens with swatches, values, and usage guidelines.

Color Contrast

Check WCAG compliance for all color pairings and debug contrast issues.

Customization

Learn how to customize theme colors for your brand with step-by-step instructions.

Live Example

Components Using Theme Tokens

Default

Secondary

Outline

Destructive

All components automatically use theme tokens like bg-primary, text-primary-foreground, bg-destructive, etc.

Quick Start

Using Theme Tokens in Your Components

Always use Tailwind classes that reference theme tokens instead of hardcoded colors:

// ✅ Good - Uses theme tokens
<div className="bg-primary text-primary-foreground">
  Primary brand element
</div>

// ❌ Bad - Hardcoded colors
<div className="bg-slate-900 text-white">
  Primary brand element
</div>

Available Token Categories

base

Background, foreground, card colors

brand

Primary and accent colors (customize these!)

muted

Subtle UI elements and labels

feedback

Error states and destructive actions