Customisation Guide — UI06 PulseCare HealthTech

Token Architecture

This kit uses a 3-tier OKLCH colour system:

Tier 1: Primitives    → Named colour stops (--p-accent-400, --p-ink-950, etc.)
Tier 2: Semantics     → Role-based tokens (--brand-accent, --bg-deep, --text-primary)
Tier 3: Components    → Tailwind/shadcn tokens (--color-primary, --color-background)

To rebrand: Change Tier 1 primitives. Tiers 2 and 3 cascade automatically.

Three.js scenes read --brand-accent at runtime via getComputedStyle() — no manual sync needed.

5-File Rebranding Checklist

1. `src/config/site.ts`

Update all brand metadata:

name — your product name
url — your production URL
tagline / description
email.* — all email addresses
legalEntity.* — your registered company details (required for Gate 17 compliance)

2. `src/app/globals.css`

Update colour tokens (search for KIT: comments):

Tier 1 primitives: Replace hue values (default is 197 = cyan/sage)
Brand glow: Update rgba() values in .brand-glow-* classes
Hero video frame: Update oklch() hue in .hero-video-frame
Chart colours: Update --chart-1 through --chart-5
Three.js tokens: Update --three-* hue values

3. `src/app/layout.tsx`

Update fonts:

Replace DM_Sans with your display font
Replace Geist / Geist_Mono if desired
Update CSS variables in globals.css (--font-display, --font-sans, --font-mono)

4. `public/`

Replace all brand assets:

favicon.ico / icon.svg
og-image.png (1200x630)
Any logo files

5. Legal & Content Pages

Replace all demo content (see DEMO_CONTENT.md for full inventory).

SITE_CONFIG Reference

The src/config/site.ts file is the single source of truth for brand metadata. Every page references it:

typescript

export const SITE_CONFIG = {
  name: "YourBrand",
  url: "https://yourbrand.com",
  tagline: "Your tagline",
  description: "...",
  email: {
    support: "support@yourbrand.com",
    legal: "legal@yourbrand.com",
    privacy: "privacy@yourbrand.com",
    security: "security@yourbrand.com",
  },
  legalEntity: {
    companyName: "Your Legal Company Name",
    companyNumber: "12345678",
    placeOfRegistration: "England and Wales",
    registeredAddress: "123 Your Street, City, Country",
    jurisdiction: "England and Wales",
    vatNumber: "",
    regulator: "",
    regulatorNumber: "",
  },
};

Dark/Light Mode

The kit defaults to light mode as the primary display mode — chosen for healthcare readability. The theme toggle supports dark mode for after-hours / night-shift use cases. The theme toggle uses ThemeScript to prevent FOUC and Providers for React context.

Dark mode overrides are in globals.css under .dark { ... }.

Adding New Pages

Create src/app/your-page/page.tsx
Import Navbar and Footer from @/components/layout/
Use the noise-grain class on <main> for the grain overlay
Use animate-enter for CSS entrance animations
Use font-display for headings
Use semantic colour tokens (--bg-surface, --brand-accent, etc.)

Demo Content

Every page with demo content has a comment at the top:

typescript

/* DEMO_CONTENT
 * This page contains sample content for demonstration.
 * Replace all text before publishing.
 * See CUSTOMIZATION.md for guidance.
 */

See DEMO_CONTENT.md for a complete inventory of all content that must be replaced.

Template Empire — Halbon Labs