Colors & Theme

How to customize colors, typography, and design tokens.

Design Tokens

All design tokens live in src/app/globals.css inside a @theme inline block. Update the CSS custom properties to match your brand:

@theme inline {
  --color-primary: oklch(0.7 0.15 250);
  --color-background: oklch(0.1 0 0);
  /* ... */
}

Tailwind CSS v4

Templates use Tailwind v4 with CSS-first configuration. There is no tailwind.config.js. All config is in globals.css via @theme blocks.

Dark Mode

Templates use class-based dark mode with the .dark class on the root element. The custom variant is defined as:

@custom-variant dark (&:is(.dark *));

Fonts

All templates use the Geist font family loaded via next/font/google in the root layout. To change fonts, update the import in src/app/layout.tsx:

import { Geist, Geist_Mono } from "next/font/google";

const geist = Geist({ subsets: ["latin"] });

Content and Copy

All text lives directly in the component files. Open any component in src/components/landing/ and edit the text inline. No CMS, no config files, just JSX.

Images and Assets

Static assets are in public/. Replace placeholder images with your own, keeping the same filenames, or update the src paths in the components.

Adding and Removing Sections

Each landing page section is a self-contained component. To remove a section, delete its import and JSX from page.tsx. To reorder, move the components. Sections have no hard dependencies on each other.