---
title: "Introduction"
description: "Learn how Systhema processes design tokens and connects Tailwind CSS, React, Next.js and Payload."
requested_language: cs
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/cs/getting-started/introduction
version: unreleased (main)
docs_index: https://docs.systhema.app/cs/llms.txt
---
> This page isn't translated yet. Showing English.


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 site

Export variables and styles with the [Figma plugin](https://docs.systhema.app/cs/design/figma.md), or generate a design with [Systhema Design](https://docs.systhema.app/cs/design/systhema-design.md). Save the exported JSON files and manifest in `src/tokens/`.

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

```bash
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](https://docs.systhema.app/cs/concepts/design-tokens.md) and [Generated artifacts](https://docs.systhema.app/cs/concepts/generated-artifacts.md) for the pipeline.

## Choose the packages you need

- 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](choosing-packages.md) explains dependencies and installation choices. Packages are distributed through the private GitHub Packages registry; complete [Registry access](registry-access.md) before installing.

## Build editable pages

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](https://docs.systhema.app/cs/components.md). Named variants and themes come from your project's tokens, so check the generated references before using documentation defaults.

## Next steps

Start with [Quick start](quick-start.md), or follow [Build a company site](https://docs.systhema.app/cs/guides/build-a-site.md) through design, content modeling, deployment and handover. For agent setup, use [Build with AI agents](https://docs.systhema.app/cs/ai-agents.md).