Skip to main content
This page describes the Sitecopilot template engine: how templates, layouts, and components are structured, how tokens are injected at build/runtime, and how to add a custom theme produced from Figma exports.

​
High-level concepts

  • Template: a full page composition made of one or more layouts and components. Each Sitecopilot theme defines templates for common page types (home, content, listing).
  • Layout: the outer page skeleton (header, footer, main regions). Layouts include slots where components render.
  • Component: reusable UI piece (hero, card, navigation, footer). Components accept props that map to tokenized styles and content data.
  • Token Context: a runtime object containing the theme tokens (colors, spacing, typography). The template engine exposes tokens as CSS variables and Tailwind classes derived from tailwind.config.js.

​
How tokens are applied

  • During the theme build, tailwind.config.js is generated from the tokens JSON. The build produces a Tailwind CSS file and a set of CSS variables.
  • At runtime, Sitecopilot injects the token CSS variables into the page <head> (or as a style block) for immediate theming without a full rebuild when switching themes/server-side rendering.
  • Components reference tokens via CSS variables and via Tailwind utility classes (derived from the generated config).

​
Adding a custom theme (summary)

  1. Export tokens from Figma and generate tailwind.config.js (see Figma Design Tokens page).
  2. Export HTML + Tailwind code from Figma (FireJet) and extract component markup & assets.
  3. Place the theme under /themes/<theme-name>/ with:
    • tailwind.config.js
    • src/ (component HTML/JSX/CSS fragments)
    • assets/ (images, fonts)
    • mapping.json (optional token mapping)
  4. Build the theme using the provided build script (example using Node):
cd themes/<theme-name>
npm ci
npm run build-theme
  1. Register the theme in Sitecopilot (Admin → Themes) or add it to the tenant’s theme list via API.
  2. Apply the theme to a tenant (Admin UI or API) and validate pages.

​
Development tips

  • Pin Tailwind and plugin versions in package.json to avoid theme regeneration issues between builds.
  • Keep generated CSS minimal: enable PurgeCSS/JIT and configure content paths precisely.
  • Prefer small, reusable components over large monolithic HTML exported from Figma — it simplifies maintenance and swaps.