Theming & Branding

Update one file to refresh the entire visual language. Tailwind v4 + CSS variables enable sweeping color and typography changes without touching every component.

Color System

All brand colors live in src/app/globals.css inside the :root block. Adjust hues, swap gradients, or change border radiuses and every shadcn component picks them up automatically.

:root {
  --primary: 229 87% 63%;
  --secondary: 37 100% 87%;
  --radius: 1.5rem;
}

Update the values, then restart the dev server to recalibrate the Tailwind inline theme tokens.

Dark Mode

next-themes handles theme switching. Wrap your app in ThemeProvider fromsrc/components/providers/theme-provider.tsx (already configured in src/app/layout.tsx). Use the useTheme hook (see src/components/ui/sonner.tsx) to respond to theme changes.

Fonts

Modify --font-sans and --font-serif variables in globals.css to point at your preferred families. Because Tailwind pulls from those CSS variables, headings, body text, and components update in sync.

Component Tokens

Shadcn components live in src/components/ui. Each component uses the cn helper and Tailwind classes referencing the CSS variables above. When you need bespoke variants, edit the relevant file (for exampleui/button.tsx) and adjust the cva config.

Backgrounds & Glassmorphism

The landing pages rely on the glass variables defined in globals.css (--glass-surface, --glass-border, etc.). Update them to fine-tune the transparency, blur, or drop shadows across hero cards, sidebar, and documentation tiles.

Branding Checklist

• Swap logos/favicons in public/ (apple-icon.tsx, icon.tsx, etc.).
• Update plan names/prices in src/lib/stripe.ts.
• Customize marketing copy in src/app/page.tsx, src/app/pricing, and other public routes.
• Replace testimonial or feature illustrations if needed (see src/components/marketing).