Design Tokens

CSS custom properties (variables) that power the LaunchApp design system. All tokens use the --la-* prefix and support both light and dark modes.

Usage

/* In your CSS */
.my-element {
  color: hsl(var(--la-foreground));
  background: hsl(var(--la-background));
  border-color: hsl(var(--la-border));
}

/* In Tailwind (via theme extension) */
<div className="bg-primary text-primary-foreground" />

Base

Preview	Name	Variable	Value	Description
	Background	`--la-background`	`hsl(0 0% 100%)dark: hsl(240 10% 3.9%)`	Page background color
	Foreground	`--la-foreground`	`hsl(240 10% 3.9%)dark: hsl(0 0% 98%)`	Default text color

Brand

Name	Variable	Value	Description
Primary	`--la-primary`	`hsl(262 83% 58%)dark: hsl(263 70% 50%)`	Primary brand color
Primary Foreground	`--la-primary-foreground`	`hsl(0 0% 98%)`	Text on primary color
Secondary	`--la-secondary`	`hsl(240 4.8% 95.9%)dark: hsl(240 3.7% 15.9%)`	Secondary brand color
Secondary Foreground	`--la-secondary-foreground`	`hsl(240 5.9% 10%)dark: hsl(0 0% 98%)`	Text on secondary color

Semantic

Name	Variable	Value	Description
Destructive	`--la-destructive`	`hsl(0 84.2% 60.2%)dark: hsl(0 62.8% 30.6%)`	Danger / error color
Destructive Foreground	`--la-destructive-foreground`	`hsl(0 0% 98%)`	Text on destructive
Muted	`--la-muted`	`hsl(240 4.8% 95.9%)dark: hsl(240 3.7% 15.9%)`	Muted / subdued background
Muted Foreground	`--la-muted-foreground`	`hsl(240 3.8% 46.1%)dark: hsl(240 5% 64.9%)`	Muted text color
Accent	`--la-accent`	`hsl(240 4.8% 95.9%)dark: hsl(240 3.7% 15.9%)`	Accent / hover background
Accent Foreground	`--la-accent-foreground`	`hsl(240 5.9% 10%)dark: hsl(0 0% 98%)`	Text on accent

UI Chrome

Name	Variable	Value	Description
Card	`--la-card`	`hsl(0 0% 100%)dark: hsl(240 10% 3.9%)`	Card surface color
Card Foreground	`--la-card-foreground`	`hsl(240 10% 3.9%)dark: hsl(0 0% 98%)`	Text on card
Popover	`--la-popover`	`hsl(0 0% 100%)dark: hsl(240 10% 3.9%)`	Popover surface color
Popover Foreground	`--la-popover-foreground`	`hsl(240 10% 3.9%)dark: hsl(0 0% 98%)`	Text on popover
Border	`--la-border`	`hsl(240 5.9% 90%)dark: hsl(240 3.7% 15.9%)`	Default border color
Input	`--la-input`	`hsl(240 5.9% 90%)dark: hsl(240 3.7% 15.9%)`	Form input border color
Ring	`--la-ring`	`hsl(262 83% 58%)dark: hsl(263 70% 50%)`	Focus ring color

Charts

Name	Variable	Value	Description
Chart 1	`--la-chart-1`	`hsl(262 83% 58%)dark: hsl(263 70% 65%)`	Primary chart color
Chart 2	`--la-chart-2`	`hsl(200 80% 50%)dark: hsl(200 75% 60%)`	Secondary chart color
Chart 3	`--la-chart-3`	`hsl(150 60% 45%)dark: hsl(150 55% 55%)`	Tertiary chart color
Chart 4	`--la-chart-4`	`hsl(30 90% 55%)dark: hsl(30 85% 65%)`	Quaternary chart color
Chart 5	`--la-chart-5`	`hsl(350 80% 55%)dark: hsl(350 75% 65%)`	Quinary chart color

Spacing & Shape

Preview	Name	Variable	Value	Description
	Radius	`--la-radius`	`0.5rem`	Base border radius

Typography

Preview	Name	Variable	Value	Description
Aa	Font Sans	`--la-font-sans`	`"Inter"`	Sans-serif font family
Aa	Font Mono	`--la-font-mono`	`"JetBrains Mono"`	Monospace font family

Motion — Duration

Preview	Name	Variable	Value	Description
150ms	Fast	`--la-duration-fast`	`150ms`	Quick micro-interactions (tooltips, dropdowns)
250ms	Normal	`--la-duration-normal`	`250ms`	Default transition speed (modals, panels)
400ms	Slow	`--la-duration-slow`	`400ms`	Deliberate, larger transitions (page sections)
600ms	Slower	`--la-duration-slower`	`600ms`	Slow enter animations (spinners, long fades)

Motion — Easing

Preview	Name	Variable	Value	Description
curve	Ease In	`--la-ease-in`	`cubic-bezier(0.4, 0, 1, 1)`	Accelerating — use for exit animations
curve	Ease Out	`--la-ease-out`	`cubic-bezier(0.16, 1, 0.3, 1)`	Decelerating — use for enter animations
curve	Ease In Out	`--la-ease-in-out`	`cubic-bezier(0.4, 0, 0.2, 1)`	Standard symmetric — use for reposition / toggle
curve	Spring	`--la-ease-spring`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Overshoot spring — scale-enter animations
curve	Bounce	`--la-ease-bounce`	`cubic-bezier(0.68, -0.55, 0.27, 1.55)`	Strong bounce — playful / emphasis effects

Color Preview Grid

All semantic color tokens rendered side by side.

Background

--la-background

Foreground

--la-foreground

Primary

--la-primary

Secondary

--la-secondary

Muted

--la-muted

Accent

--la-accent

Destructive

--la-destructive

Border

--la-border

Ring

--la-ring

Chart 1

--la-chart-1

Chart 2

--la-chart-2

Chart 3

--la-chart-3

Chart 4

--la-chart-4

Chart 5

--la-chart-5