Components

Design Tokens

Launch77 uses 17 semantic design tokens built on CSS variables. All components reference these tokens to ensure consistent, themeable styling.

Each token includes a background color and corresponding foreground color for text contrast. Always use paired tokens together (e.g., bg-primary with text-primary-foreground).

base

Base Colors

Foundational colors for backgrounds, surfaces, and primary text. These create the core visual structure of your interface.

Background

base

Main page background color. Typically white in light mode, dark in dark mode.

CSS Var:--color-background
Tailwind:bg-background
HSL:0 0% 100%
Hex:#FFFFFF

Paired with: --color-foreground

Foreground

base

Default text color on the main background. Should have strong contrast with background for readability.

CSS Var:--color-foreground
Tailwind:text-foreground
HSL:222 47% 11%
Hex:#0F1729

Paired with: --color-background

Card

base

Background for card components and elevated surfaces. Usually same as background.

CSS Var:--color-card
Tailwind:bg-card
HSL:0 0% 100%
Hex:#FFFFFF

Paired with: --color-card-foreground

Card Foreground

base

Text color for content inside cards. Should contrast with card background.

CSS Var:--color-card-foreground
Tailwind:text-card-foreground
HSL:222 47% 11%
Hex:#0F1729

Paired with: --color-card

brand

Brand Colors

Your primary brand identity colors. Customize these to match your brand. Used for buttons, links, active states, and key interactive elements.

Primary

brand

Primary brand color. Used for buttons, active states, links, and brand elements. Customize this for your brand!

CSS Var:--color-primary
Tailwind:bg-primary
HSL:222 47% 11%
Hex:#0F1729

Paired with: --color-primary-foreground

Primary Foreground

brand

Text/icon color used ON TOP of primary-colored backgrounds. Must have strong contrast with primary color.

CSS Var:--color-primary-foreground
Tailwind:text-primary-foreground
HSL:0 0% 100%
Hex:#FFFFFF

Paired with: --color-primary

Accent

brand

Secondary brand color for accents, highlights, and secondary CTAs. Complements primary color.

CSS Var:--color-accent
Tailwind:bg-accent
HSL:210 40% 96%
Hex:#F1F5F9

Paired with: --color-accent-foreground

Accent Foreground

brand

Text/icon color used ON TOP of accent-colored backgrounds.

CSS Var:--color-accent-foreground
Tailwind:text-accent-foreground
HSL:222 47% 11%
Hex:#0F1729

Paired with: --color-accent

muted

Muted Colors

Subtle, low-contrast colors for backgrounds and secondary text. Use for disabled states, placeholders, and supporting UI elements.

Muted

muted

Subtle background for hover states, disabled elements, and secondary UI. Less prominent than accent.

CSS Var:--color-muted
Tailwind:bg-muted
HSL:210 40% 96%
Hex:#F1F5F9

Paired with: --color-muted-foreground

Muted Foreground

muted

De-emphasized text color for labels, placeholders, secondary text. Less contrast than foreground.

CSS Var:--color-muted-foreground
Tailwind:text-muted-foreground
HSL:215 16% 47%
Hex:#65758B

Paired with: --color-muted

secondary

Secondary Colors

Alternative action colors for less prominent buttons and UI elements. Provides visual hierarchy alongside primary brand colors.

Secondary

secondary

Alternative background color for secondary buttons and surfaces.

CSS Var:--color-secondary
Tailwind:bg-secondary
HSL:210 40% 96%
Hex:#F1F5F9

Paired with: --color-secondary-foreground

Secondary Foreground

secondary

Text color used on secondary-colored backgrounds.

CSS Var:--color-secondary-foreground
Tailwind:text-secondary-foreground
HSL:222 47% 11%
Hex:#0F1729

Paired with: --color-secondary

feedback

Feedback Colors

Error states and destructive actions. Use for delete buttons, error messages, and warnings about irreversible actions.

Destructive

feedback

Error states, delete buttons, and destructive actions. Typically red.

CSS Var:--color-destructive
Tailwind:bg-destructive
HSL:0 84% 60%
Hex:#EF4343

Paired with: --color-destructive-foreground

Destructive Foreground

feedback

Text color used on destructive-colored backgrounds.

CSS Var:--color-destructive-foreground
Tailwind:text-destructive-foreground
HSL:0 0% 98%
Hex:#FAFAFA

Paired with: --color-destructive

borders

Border Colors

Borders, dividers, and outlines. Provides subtle separation between UI elements and interactive focus states.

Border

borders

Default border color for dividers, card borders, and UI boundaries.

CSS Var:--color-border
Tailwind:border-border
HSL:214 32% 91%
Hex:#E1E7EF

Input

borders

Border color specifically for input fields and form controls.

CSS Var:--color-input
Tailwind:border-input
HSL:214 32% 91%
Hex:#E1E7EF

Ring

borders

Focus ring color for keyboard navigation accessibility. Shown on :focus-visible.

CSS Var:--color-ring
Tailwind:ring-ring
HSL:222 47% 11%
Hex:#0F1729

Usage Guidelines

Best Practices

Always Use Semantic Tokens

Never hardcode colors. Always reference theme tokens so your components adapt to theme changes.

// ✅ Good - Semantic tokens
<div className="bg-primary text-primary-foreground">
  Brand element
</div>

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

Pair Tokens Correctly

Each background token has a paired foreground token for accessible contrast. Always use them together.

bg-primary→text-primary-foreground
bg-card→text-card-foreground
bg-destructive→text-destructive-foreground

Use HSL Format

CSS variables use HSL format without hsl() wrapper. Tailwind automatically adds the wrapper when using utility classes.

/* In CSS */
:root {
  --color-primary: 222 47% 11%;  /* H S L values */
}

/* Tailwind applies as */
.bg-primary {
  background-color: hsl(var(--color-primary));
}