Customisation Guide — UI19 Mise (Food & Beverage)

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.

Rebranding Checklist

UI00-BASE is engineered so a full visual rebrand reduces to a tight set of files: SITE_CONFIG (brand strings + Gate 17 metadata), globals.css Tier 1 OKLCH primitives, and tokens.ts BRAND for the contexts that cannot read CSS custom properties (Three.js, raw WebGL, the global-error boundary). Fonts swap in layout.tsx, brand assets land in public/, and demo content always requires manual review with your legal counsel.

1. `src/lib/site-config.ts` (single source of truth for brand strings)

name — your product name
tagline — one-line product pitch
url — your production URL
metadata.title / metadata.description / metadata.keywords
contact.* — all email roles
api.* — SDK package name and base URL
social.* — your real social URLs (or remove the keys to hide their footer chips)
legalEntity.* — every REPLACE WITH … field (UK Companies Act §82 + UK GDPR + US state privacy)
regions — switch off any region you do not serve
compliance.* — fill in DMCA / CCPA / Modern Slavery flags as applicable
cookieConsent.enabled — flip to true once you wire actual analytics

2. `src/app/globals.css` (Tier 1 OKLCH primitives)

Change the brand hue (default 315 = berry / magenta — Mise's accent) on every --p-accent-* primitive, and the ink hue (default 300 = accent − 15° deep purple) on every --p-ink-* primitive. Tiers 2 (semantic) and 3 (component) cascade automatically. No manual dark: overrides are needed for components that consume semantic tokens.

3. `src/lib/tokens.ts` (non-CSS hex palette)

BRAND is the single source of truth for hex literals where CSS custom properties cannot be read — Three.js, raw WebGL, the global-error boundary, and the magic-bento rgba glow string. After changing the hue in step 2, regenerate the hexes via oklch.com and update BRAND.primary.accent, accentRgb, hover, glow, muted to match. All consumers (light-droplets-bg.tsx, magic-bento.tsx, global-error.tsx) will pick up the change automatically.

4. `src/app/layout.tsx` (fonts)

Replace the display + sans/mono next/font/google imports with your fonts of choice (or next/font/local for air-gapped builds)
Update --font-display, --font-sans, --font-mono CSS variables in globals.css if you rename them

5. `public/` (brand assets)

The kit ships no brand assets — drop your own into public/:

favicon.ico
icon.svg
og-image.png (1200×630)
apple-icon.png (180×180, optional)
Any logo / hero / illustration files referenced by your kit

6. Legal, blog, dashboard demo content

Replace per the inventory in DEMO_CONTENT.md. Confirm legal wording with your counsel before publishing — the kit ships the structural scaffold only.

SITE_CONFIG Reference

The src/lib/site-config.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",
  metadata: {
    title: "YourBrand — Tagline",
    description: "...",
    keywords: ["..."],
  },
  contact: {
    email: "hello@yourbrand.com",
    sales: "sales@yourbrand.com",
    legal: "legal@yourbrand.com",
    privacy: "privacy@yourbrand.com",
    security: "security@yourbrand.com",
  },
  api: {
    baseUrl: "https://api.yourbrand.com/v1",
    sdkPackage: "@yourbrand/sdk",
  },
};

Dark/Light Mode

The kit defaults to dark mode (className="dark" on <html>). The theme toggle uses ThemeScript to prevent FOUC and Providers for React context.

Light mode overrides are in globals.css under html.light { ... }. Most white-alpha utilities (bg-white/*, border-white/*, shadow-black/*) get explicit black-alpha overrides; if you find a class that doesn't invert correctly, add it to the override block in globals.css. The durable fix is to migrate ad-hoc white/N usage to semantic tokens (--border-subtle, --hover-bg, --bg-glass) which already invert.

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 (--text-primary, --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