Customizing content and theme

Theme tokens

Colors, radius, and fonts are defined as CSS variables in the global stylesheet. Components reference these tokens instead of raw values, so changing a token updates the entire site consistently.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.3);
  --primary: oklch(0.214 0.009 43.1);
  --radius: 0.625rem;
}

Typography

Fonts are loaded in the root layout using the framework's font loader and mapped to the --font-sans and --font-mono variables. Swap the font import to change the typeface site-wide.

Components

UI primitives (buttons, cards, inputs, accordions) come from shadcn/ui and live in components/ui. Site-specific sections live in components/site. Edit the section components to change layout; edit the data files to change copy.

• Keep shadcn/ui primitives unmodified where possible so they can be updated later.
• Compose new sections from existing primitives before writing new ones.
• Add new pages by creating a folder under app/ with a page file.

Images and assets

Place images in the public folder and reference them by path. Use the framework image component for automatic sizing and optimization.