@systhemaui/core/design

The engine behind Systhema Design — both the web app and the systhema design CLI 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 holdsLink to this section

• 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 requirementsLink to this section

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).

RelatedLink to this section

• Systhema Design
• Design CLI