---
title: "Create the design system"
description: "Apply brand colors, typography and layout through Systhema Design, the CLI or a Figma export."
requested_language: nl
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/nl/guides/build-a-site/design-system
version: unreleased (main)
docs_index: https://docs.systhema.app/nl/llms.txt
---
> This page isn't translated yet. Showing English.


## Goal

Turn Northline's approved brand inputs into tokens before styling pages. The default starter includes `default` and `dark` themes; confirm the project's actual names in its references.

## 1. Inspect the current design

```bash
cat .systhema/references/tokens/_index.toon
```

Read the relevant collection references beside the index. They describe this project's values. Documentation examples describe defaults.

Use the [token collections](https://docs.systhema.app/nl/design/token-collections.md) and [custom tokens](https://docs.systhema.app/nl/design/custom-tokens.md) references for the source format and override shape.

## 2. Generate a starting design

Use [Systhema Design](https://docs.systhema.app/nl/design/systhema-design.md) in the browser, or use the same design engine through the CLI:

```bash
systhema design new --seed '#0E4DA4' --heading-font 'Space Grotesk' --body-font Inter --yes
systhema design status
systhema design diff
systhema design color check
```

Replace the seed and font choices with the approved brand. A secondary brand color usually needs a palette, not an entire color-system mode:

```bash
systhema design palette add accent '#E8590C'
systhema design color set foundations.decorative @accent.500
```

A mode rebinds a complete semantic palette. Use modes only when a whole region must change its colors together.

## 3. Review and apply

Start from a clean working tree. Review every intended write before applying:

```bash
systhema design apply --dry-run
systhema design apply
```

Apply writes project design inputs and runs sync. Re-read the generated references afterward. The [Design CLI reference](https://docs.systhema.app/nl/design/systhema-design/cli.md) covers exports and round trips.

For a small project-specific override, merge runtime values into `customTokens`; do not add `$value` or collection-mode wrappers. See [Custom tokens](https://docs.systhema.app/nl/design/custom-tokens.md) for a complete config example. A color primitive alone does not rebind foundations; use the Design CLI to generate and connect the palette.

## 4. Use Figma when it is the design source

The Systhema Figma plugin is distributed to licensed teams. Export the design's variables and styles, place its JSON files and manifest in `src/tokens/`, then run `pnpm sync`. Read the references again before composing the layout.

Use [Figma export](https://docs.systhema.app/nl/design/figma/export.md) for the export steps. Do not hand-edit exported token JSON, generated TOON files or `.systhema/artifacts`.

## 5. Load fonts through the project

Use the fonts installed by Design apply, or Next.js font loading in your site template. Avoid remote CSS `@import` font loading. Confirm the loaded family matches the font token and that the supplied licence covers web use.

## Check your work

- The token references show the approved themes, fonts and responsive sizing.
- Brand changes affect existing components without hardcoded colors in JSX.
- Both default and dark regions have readable text and visible focus states.
- Exported token files remain reproducible from the design source.

Next: [Build layout and pages](layout-and-pages.md).