Make It Yours

The 4-file rule

Every template is designed so you only touch 4 files to make it fully yours:

What to change	File
Business info, hours, contact	src/lib/site.ts
All visible text / language	src/i18n/en.json
Content (menu, services, rooms…)	src/content/<collection>/
Colors & fonts	src/styles/global.css → :root block

No component files need editing for standard customization.

Step 1 — Business info

Open src/lib/site.ts and update the business object:

export const business = {
  name: "Your Business Name",
  streetAddress: "123 Main Street",
  addressLocality: "Your City",
  addressRegion: "CA",
  postalCode: "90210",
  addressCountry: "US",
  phone: "+1 555 123 4567",
  email: "hello@yourbusiness.com",
  // ...hours, cuisine, price range
};

This feeds both the visible site and the schema.org structured data.

Step 2 — Wording

Open src/i18n/en.json and replace values (never change the keys):

{
  "hero": {
    "title": "Your headline here",
    "lead": "Your description here."
  }
}

Scan through the entire file and update every value that references the demo business.

Step 3 — Content

Each template has content collections tailored to its vertical. Content lives in src/content/ as markdown files with YAML frontmatter.

Add a file → it appears on the site automatically. Delete a file → it disappears. No routing or config changes needed.

See Content Collections for the full schema reference.

Step 4 — Colors & fonts

Open src/styles/global.css and edit the :root { ... } block:

:root {
  --ts-color-primary-500: #your-brand-color;
  --ts-font-display: "Your Display Font", Georgia, serif;
  --ts-font-sans: "Your Body Font", system-ui, sans-serif;
}

See Theming for the complete token reference.

Step 5 — Images

Replace files in src/assets/images/. The included demo images are AI-generated and licensed for your use (see IMAGE-LICENSE.md in the template root).