Theming System

LaunchFast uses CSS custom properties (variables) for theming, built on Tailwind CSS. The system supports light and dark modes out of the box.

Design tokens

All design decisions are encoded as CSS variables in tailwind.css:

  • --color-primary — Primary brand color
  • --color-accent — CTA and highlight color
  • --color-muted-* — Gray scale (50-950)
  • --color-danger-* — Error states
  • --color-success-* — Success states

Dark mode

Dark mode is implemented via the .dark class on the root element. The system:

  • Respects user system preference by default
  • Allows manual override via theme switch
  • Persists preference in cookies (server-rendered)
  • Avoids flash of incorrect theme on load

Typography

The type scale uses fluid sizing that responds to viewport width:

  • text-fluid-xs through text-fluid-7xl
  • Automatic scaling between mobile and desktop
  • Consistent vertical rhythm via line-height tokens

Spacing

Fluid spacing tokens scale proportionally with viewport:

  • spacing-fluid-* — Responsive spacing values
  • spacing-viewport-padding — Edge padding that scales

Customization

To customize the theme:

  1. Edit CSS variables in app/styles/tailwind.css
  2. Update :root for light mode values
  3. Update .dark for dark mode values
  4. Changes apply globally and immediately

No build step or configuration file changes required. Edit CSS, see results.

Related

  • Fonts — custom font setup and self-hosting