---
title: "Token collections"
description: "The required and optional collections, their modes and styles, and the `manifest.json` that ties them together."
url: https://docs.systhema.app/next/design/token-collections
version: unreleased (main)
docs_index: https://docs.systhema.app/next/llms.txt
---

Systhema's design tokens are W3C DTCG JSON files exported from Figma, organized into collections. Each collection has one or more modes, and `manifest.json` lists which file belongs to which collection and mode. Token files are never edited by hand: they come from the [Figma plugin](https://docs.systhema.app/next/design/figma.md) or [Systhema Design](https://docs.systhema.app/next/design/systhema-design.md), and project-specific changes go into [custom tokens](https://docs.systhema.app/next/design/custom-tokens.md).

## Collections

Seven collections are required: `colorSystem`, `responsiveSizing`, `font`, `colorPrimitives`, `calc`, `config` and `tailwindcss`. Two are optional: `easings` and `transition` (see [Motion tokens](https://docs.systhema.app/next/design/motion-tokens.md)).

<!-- generated:token-collections -->

| Collection         | Required | Modes             | Files                                                                                                   |
| ------------------ | -------- | ----------------- | ------------------------------------------------------------------------------------------------------- |
| `calc`             | yes      | `_calc`           | `calc._calc.tokens.json`                                                                                |
| `colorPrimitives`  | yes      | `value`           | `colorPrimitives.value.tokens.json`                                                                     |
| `colorSystem`      | yes      | `dark`, `default` | `colorSystem.dark.tokens.json`, `colorSystem.default.tokens.json`                                       |
| `config`           | yes      | `_config`         | `config._config.tokens.json`                                                                            |
| `easings`          | no       | `value`           | `easings.value.tokens.json`                                                                             |
| `font`             | yes      | `value`           | `font.value.tokens.json`                                                                                |
| `responsiveSizing` | yes      | `lg`, `md`, `sm`  | `responsiveSizing.lg.tokens.json`, `responsiveSizing.md.tokens.json`, `responsiveSizing.sm.tokens.json` |
| `tailwindcss`      | yes      | `value`           | `tailwindcss.value.tokens.json`                                                                         |

<!-- /generated -->

## Collection roles

| Collection         | What it controls                                                                            |
| ------------------ | ------------------------------------------------------------------------------------------- |
| `colorPrimitives`  | Raw `base` and `theme` color ramps, independent of color-system mode.                       |
| `colorSystem`      | Semantic foundation, typography, layout and component colors per mode.                      |
| `responsiveSizing` | Typography sizes, spacing, containers, grids and component dimensions per breakpoint scope. |
| `font`             | Font families, weights and styles.                                                          |
| `calc`             | Intermediate values referenced by other tokens.                                             |
| `config`           | Token configuration values used when processing the design system.                          |
| `tailwindcss`      | References to Tailwind values, such as its palette.                                         |
| `easings`          | Optional curves and durations.                                                              |
| `transition`       | Optional component transition properties, durations and timing functions.                   |

With the default tokens, only `colorSystem` and `responsiveSizing` retain their mode keys in the runtime tree. The other required collections flatten their mode and collection wrappers. Motion collections flatten only the mode wrapper. Missing optional motion collections become empty objects without warnings; the shipped manifest includes `easings` but no `transition` collection.

## Styles

The manifest also lists `text`, `effect` and `grid` style files. Text styles are composites, such as a font family plus responsive size, line height and letter spacing, and produce text utilities. Grid styles describe Figma layout grids; effect styles describe shadows and blurs. They are style exports, not additional variable collections. The runtime loader in `handleTokens` reads the `text` and `grid` style lists; do not assume an exported effect style automatically creates a utility.

## The manifest

`systhema.config` imports the manifest, which references the token files Systhema should process.

```ts
import type { SysthemaConfig } from '@systhemaui/core'
import manifest from './tokens/manifest.json'

const config: SysthemaConfig = { manifest }
```

In a JSON config file, use a path string:

```json
{ "manifest": "./tokens/manifest.json" }
```

If `manifest` is omitted, Systhema falls back to the built-in default tokens shipped in `@systhemaui/core`.

[What the export contains](https://docs.systhema.app/next/design/figma/export.md#what-the-export-contains) shows a complete `manifest.json`.

## Processing and changes

The pipeline loads the files named by the manifest from the generated token cache, extracts DTCG values and references, resolves configuration and calculations, then merges `customTokens`. Keep exported JSON intact. Re-export structural changes from Figma or Systhema Design; use [custom tokens](https://docs.systhema.app/next/design/custom-tokens.md) for runtime overrides.

Mode entries are arrays of filenames, but `handleTokens` currently reads only the first file in each mode. Keep each mode's token tree in one file. The text and grid style lists are merged across their listed files.

Run `pnpm systhema-core sync` after replacing an export to refresh the artifacts, types and references. Import token-derived types rather than hardcoding your own variant unions; see [Generated types](https://docs.systhema.app/next/reference/generated-types.md).

## Generated tables

These tables describe the shipped defaults; your export and overrides can differ.

- [Colors](https://docs.systhema.app/next/reference/tokens/colors.md)
- [Spacing](https://docs.systhema.app/next/reference/tokens/spacing.md)
- [Typography](https://docs.systhema.app/next/reference/tokens/typography.md)
- [Effects](https://docs.systhema.app/next/reference/tokens/effects.md)
- [Motion](https://docs.systhema.app/next/reference/tokens/motion.md)
- [Breakpoints](https://docs.systhema.app/next/reference/tokens/breakpoints.md)