Token collections
The required and optional collections, their modes and styles, and the `manifest.json` that ties them together.
On this page
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 or Systhema Design, and project-specific changes go into custom tokens.
CollectionsLink to this section
Seven collections are required: colorSystem, responsiveSizing, font, colorPrimitives, calc, config and tailwindcss. Two are optional: easings and transition (see Motion tokens).
| 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 |
Collection rolesLink to this section
| 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.
StylesLink to this section
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 manifestLink to this section
systhema.config imports the manifest, which references the token files Systhema should process.
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:
{ "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 shows a complete manifest.json.
Processing and changesLink to this section
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 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.
Generated tablesLink to this section
These tables describe the shipped defaults; your export and overrides can differ.