Introduction

Use Systhema to build sites with a shared set of design tokens, CSS utilities and components. You can start with a Next.js site or add Payload for editable page content.

How tokens reach your siteLink to this section

Export variables and styles with the Figma plugin, or generate a design with Systhema Design. Save the exported JSON files and manifest in src/tokens/.

Run your project's sync script after changing the tokens or configuration:

pnpm sync

Core processes those inputs into CSS variables, TypeScript types and a Tailwind safelist in .systhema/artifacts/. It also generates agent references in .systhema/references/tokens/. Your components and Tailwind utilities then use the generated values. A design change requires an export or apply step and a sync; it does not reach your site directly from Figma.

See Design tokens and Generated artifacts for the pipeline.

Choose the packages you needLink to this section

• Use @systhemaui/core for token processing and Tailwind CSS integration.
• Add @systhemaui/react for React components without Next.js.
• Use @systhemaui/next in Next.js projects. It supplies Next.js versions of links and media components and re-exports the remaining React components.
• Add @systhemaui/payload for CMS collections, page blocks, Lexical editors and frontend rendering.
• Use the systhema CLI to scaffold, configure and upgrade consumer projects.

Choosing packages explains dependencies and installation choices. Packages are distributed through the private GitHub Packages registry; complete Registry access before installing.

Build editable pagesLink to this section

In a Payload project, compose ordinary page content with native blocks before adding custom fields or collections. The page template supplies the page shell; blocks supply its sections. Editors can change the content without changing your React code.

For code-owned routes, compose the same design with components. Named variants and themes come from your project's tokens, so check the generated references before using documentation defaults.

Next stepsLink to this section

Start with Quick start, or follow Build a company site through design, content modeling, deployment and handover. For agent setup, use Build with AI agents.