Documentation.

Most design system hours are spent building infrastructure: tokens, themes, sync scripts, handoff pipelines. That work has to happen, but it is not the design system itself. Zaklad handles the infrastructure so your team can focus on the system.

You configure your brand once: colors, typography, spacing, and components. Zaklad generates and maintains everything else. The name comes from Czech: zaklad means "foundation."

Every project produces three things that stay in sync from one source of truth:

1. 1

   Configure your brand

   Use the Setup Wizard to add your brand colors, choose a typography style, and pick a visual archetype. The wizard generates a complete foundation in a few minutes. You can also configure everything manually from the editor.

2. 2

   Sync to Figma

   Install the Zaklad Figma plugin and connect it with your project API key (generated in Settings). Pull your tokens into Figma and your designers get a live library: color variables, text styles, and spacing variables that reflect the exact same values your developers use.

3. 3

   Install the developer package

   Find the install command in Settings. Add the package to any React or React Native project, wrap your app with the provider, and your components are ready to use.

Project

A single design system. Each project has its own tokens, themes, components, and outputs. An organisation can have multiple projects; for example, separate systems for different products or brands.

Design token

A named design decision stored as a value: a color, a size, a font name, a duration. Instead of scattering raw values through your code and Figma files, you give every decision a name and reference that. One change to the token cascades to every place it is used: components, themes, Figma variables, and the npm package all update together. Tokens are not limited to colors; they cover the full range of visual properties.

Foundation token

A raw value at the bottom of the hierarchy: a specific hex color, a pixel dimension, a font family name. Foundation tokens can also be computed: a spacing value can be expressed as a base unit multiplied by a fixed factor, so the entire scale shifts when you change one number. Values can be in any unit (px, rem, etc.) and are converted per platform on output.

Semantic token

A named intent that references a foundation token. The key difference from a foundation token is that semantic tokens are context-aware: the same token name resolves to a different value depending on the active theme, mode, or brand. Reference color.background.default in your component and it automatically becomes the right value for light mode, dark mode, high-contrast mode, or any custom theme, with no conditional logic in your component code.

Component token

A named slot within a specific component that references a semantic token. Component tokens let you fine-tune one component independently of the broader semantic layer; for example, giving buttons a slightly different background than other primary surfaces. They are optional and make most sense for larger organisations managing multiple products or brands from one system. For a single product, the semantic layer is usually enough.

Theme

A set of value overrides applied on top of a base theme. The same token names resolve to different foundation values depending on which theme is active. Themes are not just for light and dark mode. You can create accessibility themes (high contrast), promotional themes (seasonal palettes), personalised themes (user-configured brand colors), or entirely separate brand identities that share the same component structure but have different visual identities. All themes inherit from a base and only store the values where they genuinely differ.

Sizing context

A cross-platform concept that sits one level above breakpoints. The XS–XL scale does not correspond to viewport widths; it describes the density and spatial intent of a surface, and it works identically on web and React Native with no platform-specific logic. Because it spans all device classes, you can lock a platform or screen to specific tiers: XS for IoT and smartwatch surfaces where space is extremely constrained, S for phone-sized UIs where density matters, and the full XS–XL range for web where you want the complete responsive spread. The system is deliberately open-ended. If you are building web only, you can treat the tiers exactly like CSS breakpoints and let container width drive which tier is active. On cross-platform products you use the tier to communicate intended density independent of the viewport.

Release

A versioned, frozen snapshot of your system. Publishing a release produces a new version of the developer package, with a semantic version number, plus a downloadable build of everything as it stood at that moment. The npm package is versioned on every release automatically; on paid plans a Figma file can also be pinned to a specific release so it stays in step with the published package version.

The fastest way to get a design system running is the Setup Wizard. Create a new project and the wizard will walk you through adding brand colors, picking a visual style, and generating your full token set, typically in under five minutes.

If you have a question you cannot figure out, want to report a bug, or would like to request a feature, email us at [email protected].

There is also a bug report button in the bottom-right corner of every page. Use it to send feedback directly from wherever you are in the platform.