UI and Design System

Customize quick and easy.

Goal

Ship a clean UI fast and customize without breaking layouts.

Design stack overview

  • Tailwind CSS for styling.
  • shadcn/ui primitives for consistent components.

Component library usage

  • Reuse workers/app/src/components/ui before adding new patterns.
  • Keep marketing and app UI consistent with shared primitives.

Theme tokens

  • Update tokens once to restyle the entire app.
  • Start with typography, colors, and icon set (see DEVELOPMENT.md).

Colors and typography

  • Swap fonts and palette first; keep spacing consistent.

Layout patterns

  • Marketing uses centered sections and clear TOCs.
  • App layouts use sidebar + header patterns.

Modals, toasts, banners

  • Toasts are provided via sonner.
  • Use banners for trials, paywalls, and announcements.

Dark mode considerations

  • Dark mode is available through token-driven styles.

Accessibility basics

  • Use semantic headings and focus states from shared components.