Customisation

Every buyer-facing setting lives in one file: src/lib/site-config.ts. Edit it to replace the demo branding with your own. Everything else - colours, fonts, layout - is standard Next.js + Tailwind.

1. Brand (single-file rebrand)

Open src/lib/site-config.ts and replace the values:

export const SITE_CONFIG = {
  productName: 'YourProduct',
  productTagline: 'The short pitch',     // or '' to hide
  companyName: 'YourCompany Ltd',
  legalEffectiveDate: '2026-06-01',
  contact: {
    support: 'support@yourproduct.com',
    privacy: 'privacy@yourproduct.com',
    legal:   'legal@yourproduct.com',
    security:'security@yourproduct.com',
  },
  urls: {
    home:      'https://yourproduct.com',
    docs:      '/docs',
    changelog: '/changelog',
    support:   'mailto:support@yourproduct.com',
  },
};

All of these propagate automatically to:

Auth pages (src/app/(auth)/layout.tsx)
Legal pages (src/app/(marketing)/privacy/page.tsx, src/app/(marketing)/terms/page.tsx)
Email templates (src/lib/email/)
Metadata / <title> tags

2. Colours & accent hue

The accent hue is a single OKLCH value. Change it in src/app/globals.css:

css

:root {
  --accent: oklch(0.72 0.18 60);  /* hue 60 = amber. Change the last number. */
}

Hue reference:

0-20 = red/coral
30-50 = orange/amber
60-90 = yellow/olive
100-160 = green
180-220 = cyan/blue
240-280 = indigo/violet
290-340 = magenta/rose

3. Fonts

Display font (headings) is exposed through --font-display-family in src/app/globals.css. Buyer packages do not fetch Google Fonts at runtime and do not bundle Lora, Inter, or Fira Code by default. The named families are local-first preference tokens with system fallbacks, so the browser uses them only when you self-host the files or the user has the fonts installed locally.

css

:root {
  --font-display-family: "Lora", var(--font-sans);
}

If you need to guarantee a specific typeface, self-host the font files in public/fonts, add an @font-face block in src/app/globals.css, then point --font-display-family at that family name.

4. Logo

Replace src/app/icon.svg (favicon) and public/logo.svg (header logo). The header reads public/logo.svg directly - no code change needed if the filename stays the same.

5. Legal pages

src/app/(marketing)/privacy/page.tsx and src/app/(marketing)/terms/page.tsx are marked /* DEMO_CONTENT */ at the top. Review and replace with your own legal text. Both pages read company name + contact emails from site-config.ts, so you do NOT need to replace those strings - just the body copy.

Important: These pages are placeholder content. Have a lawyer review before shipping publicly.

6. Demo content

Files marked /* DEMO_CONTENT */ contain demo data that should be replaced before shipping:

src/components/landing/inkwell-landing.tsx - homepage editorial demo surface
src/components/landing/faq.tsx, pricing-table.tsx, cta-banner.tsx - pricing/support marketing sections
src/lib/marketing-content.ts - pricing, FAQ, and CTA placeholder copy
src/lib/db/seed.ts - demo users, billing data, CMS posts, comments, and content analytics

Grep for DEMO_CONTENT to find them all:

bash

grep -r "DEMO_CONTENT" src/

7. Routes

Public (marketing) routes are under src/app/(marketing)/. Authenticated routes are under src/app/(dashboard)/. Auth routes (login/register) are under src/app/(auth)/.

To remove a route, delete its folder. Next.js App Router will drop it from the build automatically.

8. Email templates

Email templates live in src/lib/email/. They use string templates with {{variable}} placeholders. Company name and product name read from SITE_CONFIG so no per-template edits are needed.

Transactional email is sent via Nodemailer (SMTP). Configure SMTP_* in .env to enable. Without SMTP, emails log to console in dev - useful for testing.

9. SEO metadata

Base metadata is in src/app/layout.tsx. Per-page metadata is in each page's export const metadata. All pages use SITE_CONFIG.productName in the title, so updating the config propagates everywhere.

10. Footer links

Footer links live in src/components/landing/footer.tsx. They point at real internal routes by default; replace or extend them with your own /docs, /changelog, /support, social, or external URLs. Use SITE_CONFIG.urls.* where you want the config to drive them.

11. Dashboard widgets

CMS workspace widgets live in src/app/(dashboard)/content/page.tsx and the dashboard shell composes the CMS studio from src/app/(dashboard)/dashboard/page.tsx. Domain APIs live under src/app/api/cms/ and public reader APIs under src/app/api/blog/.

12. Pricing copy

Pricing copy for the landing page lives in src/components/landing/pricing-table.tsx. This Lite template does not ship payment processing; add your own checkout or billing integration before accepting money.

13. CMS content

CMS posts, categories, tags, comments, and post-view analytics are stored in PostgreSQL.

Public reader routes: src/app/(marketing)/blog/page.tsx and src/app/(marketing)/blog/[slug]/page.tsx
Static page route: src/app/(marketing)/[slug]/page.tsx renders published CMS pages such as /about
Admin studio: src/app/(dashboard)/content/page.tsx
Comment moderation: src/app/(dashboard)/content/comments/page.tsx
Content analytics: src/app/(dashboard)/content/analytics/page.tsx
CMS APIs: src/app/api/cms/* and public src/app/api/blog/*
RSS / sitemap: src/app/rss.xml/route.ts and src/app/sitemap.ts

Replace the seeded demo articles in src/lib/db/seed.ts or create new content through /content after signing in as an admin.

Checklist before shipping publicly

Updated src/lib/site-config.ts with your real brand and contact emails
Replaced legal pages (privacy + terms) with lawyer-reviewed copy
Replaced homepage, pricing, FAQ, and CTA demo copy
Replaced seeded CMS demo posts, comments, and analytics data
Replaced logo + favicon
Generated production JWT_SECRET and OAUTH_STATE_SECRET
Configured SMTP for transactional email
Ran pre-flight checks: pnpm typecheck && pnpm lint && pnpm audit --prod --audit-level=high (all green)
Replaced your SEED_PASSWORD (if DEMO_MODE=true on public deployment)