Customization

The template is built to be re-skinned fast. Everything visual and textual is centralized — you rarely touch a component to make the product your own.

Rebrand in one place

Design tokens

All colors, spacing, radius, shadows and motion are CSS variables in app/globals.css — the single source of truth for the visual language. No component hardcodes a color or a size.

• Brand color — change the one --brand variable to re-skin every accent (buttons, highlights, links).
• Roundness — change --radius; the whole radius scale derives from it.
• Density — change the semantic spacing tokens (--spacing-gutter, --spacing-section, …).
• Dark mode — every token has a .dark override; both themes stay in sync.

/* app/globals.css */--brand: oklch(0.55 0.22 275);   /* ← change this to re-skin the app */--radius: 0.625rem;              /* ← change roundness everywhere */

Tokens are exposed to TypeScript (for charts, inline styles) in config/theme.ts.

Text & localization

No user-facing string is hardcoded in a component — they all live in config/content.ts. The object is shaped for i18n: to localize, swap it for a locale-keyed loader without touching a single component.

Architecture

The code is organized by feature, so each capability is self-contained and reusable:

features/<feature>/  components/   UI for the feature  server/       server actions & services  lib/          feature-scoped helpers  index.ts      the feature's public surface

Shared UI primitives live in components/ui (shadcn) and components/shared. Reuse them — never duplicate a button, badge or card.

Add a feature the same way

1. Create features/<name>/ with the folders above.
2. Put copy in config/content.ts, tokens are already global.
3. Export the public API from features/<name>/index.ts.
4. Compose it into a route under app/.