---
title: "Systhema documentation"
description: "Design tokens, Tailwind CSS, React and Next.js components and a PayloadCMS integration that share one source of truth."
requested_language: nl
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/nl
version: unreleased (main)
docs_index: https://docs.systhema.app/nl/llms.txt
---
> This page isn't translated yet. Showing English.


Systhema bridges the gap between design and development, providing a unified design language that ensures your brand's visual identity is consistently translated across all applications.

Systhema is modular: pick exactly what you need. Each package builds on the core foundation to provide increasingly specialized functionality, from design tokens to a fully featured headless CMS integration.

## Start here

- **I build sites with Systhema**: start with the [Quick start](https://docs.systhema.app/nl/getting-started/quick-start.md), then pick what you need below.
- **I edit a Systhema site**: the [Editor guide](https://docs.systhema.app/nl/editor-guide.md) explains how to work with pages, blocks and settings in the Payload Admin, without code.
- **I work with a coding agent**: [AI agents](https://docs.systhema.app/nl/ai-agents.md) shows how agents read version-correct docs and use the Systhema skills.

## Sections

- [Getting started](https://docs.systhema.app/nl/getting-started/introduction.md): scaffold a project, get registry access, choose packages, install by hand and keep a project upgraded.
- [Core concepts](https://docs.systhema.app/nl/concepts/design-tokens.md): design tokens, configuration, themes, the spacing model, motion, generated artifacts and the client/server boundary.
- [Design and tokens](https://docs.systhema.app/nl/design/token-collections.md): token collections, custom tokens, fonts, colors, motion tokens, palettes, the Figma plugin and Systhema Design.
- [Styling](https://docs.systhema.app/nl/styling/tailwind.md): the Tailwind CSS integration and a reference for every Systhema utility class.
- [Components](https://docs.systhema.app/nl/components.md): React and Next.js components with live examples, props and their HTML class equivalents.
- [Next.js](https://docs.systhema.app/nl/nextjs.md): what `@systhemaui/next` adds, from the provider and the gateway to frontend locales.
- [Payload CMS](https://docs.systhema.app/nl/payload.md): `withSysthema()`, collections and globals, blocks, the Lexical editors, forms, posts, AI, analytics, Cloudflare and localization.
- [CLI](https://docs.systhema.app/nl/cli.md): the global `systhema` CLI and the project-local `systhema-core`.
- [AI agents](https://docs.systhema.app/nl/ai-agents.md): how coding agents develop Systhema sites with version-correct docs, the `systhema-docs` MCP server and the agent skills.
- [API reference](https://docs.systhema.app/nl/reference/config.md): the `systhema.config` reference, package entry points and the core APIs.
- [Guides](https://docs.systhema.app/nl/guides/build-a-site.md): a step-by-step site build, recipes, multilingual sites, cookie consent and deploying.
- [Editor guide](https://docs.systhema.app/nl/editor-guide.md): a non-technical guide for people who edit their site in the Payload Admin.
- [Release notes](./release-notes/index.md): every release, newest first.