---
title: "@systhemaui/core/design"
description: "The shared design engine behind Systhema Design and systhema design."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/reference/core-design
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


The engine behind [Systhema Design](https://docs.systhema.app/ar/next/design/systhema-design.md) — both the web app and the [`systhema design` CLI](https://docs.systhema.app/ar/next/design/systhema-design/cli.md) import it from here, so a design produced by one is understood byte-for-byte by the other.

It is **shared internal API**: exported so the two surfaces can share one implementation, not as a supported extension point. Treat it as unstable — it may change in any release without a codemod.

## What it holds

- **Color token graph** — `loadDefaultColorGraph`, `materializeColorGraph`, `resolveColorRef`: the three-tier model (primitives → foundations → component tokens) with `{ $ref }` references resolved through the live diff.
- **Structure operations** — palette and mode add/duplicate/rename/re-point (`colorStructureOps`), the brand-seed foundation rewire (`themeSeedRewire`), and the advisory APCA contrast math (`apca`).
- **Palette and mode metadata** — naming, hiding and ordering (`colorNaming`; the `default` mode is pinned first and cannot be hidden or removed), and each palette's semantic anchor stop, each mode's light/dark polarity and the manual foundation relations (`foundationAnchor`). These live in `ColorOverlay`, beside the token diff.
- **Type scale** — `computeHeadingScale` / `resolveTypographyConfig`: the modular scale the heading ladder is derived from.
- **Exporters** — `buildSysthemaConfig`, `applyDiffToTree` + `buildDtcgZip`, `buildAgentJson` + `buildAgentMarkdown`, and `buildProjectZip`. When the design edits the type scale, the generated `systhema.config.ts` keeps the scale knobs in a `systhemaDesignTypography` constant and computes the heading sizes at config load through two emitted helpers, `systhemaDesignHeadingScale` and `systhemaDesignMerge`, so a re-import recovers the editable scale rather than fixed px. Colour metadata the token diff cannot express rides along as a `// @systhema-design-color-overlay` comment in the config and as `generator.systhemaDesign` in the DTCG manifest. Composite text styles export as Figma typography styles bound to their font and responsive variables.
- **Importers** — `parseImport` and the per-format parsers, which diff an incoming design against Systhema's defaults.
- **Brand builders** — the favicon set, SEO/OG meta, and the SVG pipeline.

## Runtime requirements

The module is browser-safe and its only runtime dependency is `fflate`. Everything environment-specific is **injected**: `RasterizePng` (Canvas in the browser, sharp in the CLI), `createSvgPipeline(optimize)` (SVGO), and `buildProjectZip`'s `getFontBytes` / `getAssetBytes` (IndexedDB vs. the filesystem).

## Related

- [Systhema Design](https://docs.systhema.app/ar/next/design/systhema-design.md)
- [Design CLI](https://docs.systhema.app/ar/next/design/systhema-design/cli.md)