Customising

Every template keeps its brand in one place and its content in predictable files. This guide covers what all templates have in common; each template's own Documentation page lists the exact names for that template.

Colours#

Colours are CSS variables in the @theme block of the Tailwind source:

• HTML versions: src/input.css
• Next.js versions: src/app/globals.css

@theme {
  --color-brand-500: #4f46e5;   /* main brand colour */
  --color-brand-600: #4338ca;   /* hover and pressed */
}

Tailwind turns each --color-* variable into utilities such as bg-brand-500 and text-brand-600, so changing a value updates every button, link and accent that uses it. Variable names differ between templates (brand, accent, ember...); the template's guide lists them.

In the HTML versions, rebuild the CSS after changing src/input.css (see Rebuilding the CSS). In Next.js, the dev server picks up changes immediately.

Keep text readable: body text needs a contrast ratio of at least 4.5:1 against its background. A checker such as the one in your browser's developer tools will tell you.

Fonts#

• HTML: fonts load from Google Fonts with a <link> in each page's <head>, and the font stacks are set in @theme (for example --font-display). Change both, or remove the link to use system fonts.
• Next.js: fonts load with next/font in src/app/layout.tsx (some templates self-host the font files in src/fonts/ so the design matches the HTML version exactly). Swap the import and keep the CSS variable name it sets.

Text and content#

• HTML: edit the .html files. The header and footer are repeated in every page, so change them in each file. Lists that drive interactive features (products, rooms, schedules, menus) live in assets/js/main.js as plain JavaScript arrays and objects near the top of the file.
• Next.js: page text is in src/app/**/page.tsx and its components; repeated content is in src/data/*.ts. TypeScript tells you if a new item is missing a field.

A quick way to rebrand: search the whole folder for the fictional brand name and replace it with yours.

Images#

The artwork is SVG, so downloads stay small and look sharp. To use photos, put them in assets/img/ (HTML) or public/ (Next.js) and swap the src:

<img src="assets/img/team.jpg" alt="Our team at the 2026 offsite"
     class="aspect-[4/3] w-full rounded-2xl object-cover" loading="lazy">

Keep the same aspect ratio as the artwork you replace so the layout doesn't shift, and always write meaningful alt text (or alt="" for decorative images).

The favicon is favicon.svg, and the social sharing image is og-image.png (1200×630), with its editable source in og-image.svg. See SEO and social images.

Navigation and pages#

• HTML: to add a page, copy an existing one (so it keeps the header, footer and scripts), change its content, <title> and meta tags, then add a link to it in the menu of every page. Mark the current page with aria-current="page" on its menu link.
• Next.js: add a folder in src/app/ with a page.tsx, export its metadata, and add it to the navigation data or header component the template's guide points to.

Dark mode#

Templates with a theme toggle remember the visitor's choice in localStorage and apply it before the page paints, so there's no flash. Each template's guide explains how to change the default or remove the toggle.