> ## Documentation Index > Fetch the complete documentation index at: https://docs.sitecopilot.ai/llms.txt > Use this file to discover all available pages before exploring further. # Template Engine 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 `` (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//` 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): ```bash theme={null} cd themes/ npm ci npm run build-theme ``` 5. Register the theme in Sitecopilot (Admin → Themes) or add it to the tenant's theme list via API. 6. 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.