PLATFORM

Everything your design system needs.
Nothing it doesn’t.

One platform to replace fragmented tools, automate the heavy lifting of keeping Figma, code, and docs in sync, and put a proper design system within reach of any team, whether it’s your first one or your fifth.

FOUNDATIONS

How the system gets built.

Brand input to structured, computed, themeable tokens. No specialists, no scaffolding work.

ONBOARDING

Brand to system in 90 seconds

The wizard is optional, the fastest path if you’re starting from scratch. Describe your brand in your own vocabulary, “Firefox Orange”, not “foundation.color.primary.500”, and the platform generates your token architecture, role mapping, gap fills, and themes. Already have a system? Skip the wizard and import directly.

Starting from zeroRun the wizard~90 seconds

Brand refreshWizard with your brand~5 minutes

Existing systemSkip the wizard, importuse as your pipeline

1Brand colours

2Typography

3Spacing & radii

4Review & publish

OutputComplete design system

EDITOR

Wizard for speed, editor for precision

Sliders are a wizard thing, designed to get you to a working baseline in minutes without overwhelming you. The editor, where you’ll actually live, swaps those for direct selectors and value inputs so you can land on exact values, not approximations.

Wizard: sliders and visual controls for quick setup
Editor: direct selectors, inputs, and pickers for every token
Live component preview, see every change instantly
Same interface for designers, developers, and brand managers

In the wizard

↓

In the editor

spacing.md16px

radius.btnradius.md ▾

color.brand #28c0c2

REFERENCES

Every connection, at a glance

The editor shows you what’s connected to what before you change anything. Pick any token and see everything that references it, every theme it takes part in, every component that depends on it. Complex systems stay legible; nothing changes by accident.

Reference graph for every token, references and dependents both ways
Filter the graph by theme to isolate theme-specific overrides
Lockable token groups so nothing changes by accident
Instant preview, in the editor and in the real rendered component

ARCHITECTURE

Three layers, each with a specific job

Foundation holds raw values and the calculations between them. Semantic gives them purpose across themes. Component scopes them to a specific component. A change at the source cascades through every dependent token, every theme, all the way to the rendered component.

Foundation: raw values + calculations referencing other foundation tokens
Semantic: maps to a foundation value, one per theme
Component: scoped to one component, not exposed elsewhere
Unlimited chain depth, the source cascades everywhere

Foundation

teal.500#28c0c2#8b5cf6

neutral.900#101113

space.md16px

bg.primary

text.default

border.subtle

Component

background:bg.primary

color:text.on-brand

padding:space.md

FLEXIBILITY

Flexible where it matters

Which layers you use is up to you, and naming and structure inside each layer is entirely yours. We give you the cascade, not a style guide.

Use all three layers, two, or just Foundation, whatever fits your system
Name and structure tokens however your team prefers
Start from a recommended setup, a template, or from scratch

Recommended

Foundation→Semantic→Component

Two-layer

Foundation→Semantic

Foundation only

Foundation

CALCULATIONS

Tokens that compute themselves

Foundation tokens can chain calculations as deep as you like. One value feeds another, feeds another. Change the source and every derived token recomputes, all the way down. No manual wiring, the relationships are the architecture.

dimension.200=16px20px

spacing.md=dimension.200→ 16px→ 20px

spacing.lg=spacing.md × 1.5→ 24px→ 30px

spacing.xl=spacing.lg × 1.5→ 36px→ 45px

Change the source, the whole chain recomputes

DESIGN CRAFT

The quality of what comes out.

Colour, typography, icons, themes, density, and accessibility, all done properly.

COLOUR SCIENCE

Perceptual colour, not guesswork

Pick a brand colour and get a perceptually uniform palette. Reach for a curve preset to land somewhere good in seconds, or take the curve into your own hands for full control. The maths stays right either way.

A full library of curve presets, or shape your own
Step control adjusts how many shades you generate
Accepts OKLCH, HSL, RGBA, and HEX inputs
Smart hue corrections keep every shade part of the same family

Curve

LinearSineCircCustom

TYPOGRAPHY

Smart typography, kept in sync

Pick a scale preset, golden ratio, perfect fifth, perfect fourth, perfect third, and ship a complete type system in seconds. Text Styles land in both Figma and your codebase and stay in sync, so designers and developers share one source of truth. Paid tiers host your brand fonts on our global CDN.

Heading 1Heading 2Heading 3Body text paragraphCaption / small

×1.618Golden Ratio

ICONOGRAPHY

Icons, without the messy bit

Install a pre-built library in one click, upload your own, or merge several into a single consistent API. Variant types are unionised across sources, so your product reaches for icons by name and variant, not by which library they came from.

One-click install of pre-configured libraries (HeroIcons, Lucide, and more)
Upload a custom library and we wire it into the same system
Merge libraries into one consistent API across your product
Variant types unionised, outline, solid, and duotone stay aligned
Delivered as code and Figma components, always in sync

HeroIcons

Lucide

Your set

↓

Variants unionised

outlinesolidduotone

↓

Code

Figma

THEMING

Themes that inherit, not duplicate

Any theme can be your default, but we recommend starting with Light, basing Dark on it, and deriving any extras from either. Existing tools treat every theme as its own silo, so one base change means editing each one by hand. Zaklad inherits instead, change a value upstream and every theme that follows updates automatically. Only the overrides stay unique.

LightBase

DarkInherits Light

High ContrastOverrides

Brand EventOverrides

Change Light, every inheriting theme follows

RESPONSIVE

XS–XL scale tiers, not breakpoints

Breakpoints are a web concept. They don’t exist in React Native. Scale tiers are different, each component has sizing tokens defined per tier (XS, S, M, L, XL), generating distinct component sizes that work on every platform. Switch tier, everything resizes proportionally.

Component tokens scoped per scale tier
Works on web AND native, no breakpoint dependency
Padding, gap, font size, icon size, all tier-aware
Design once, render at any density

Button

OUTPUT & INTEGRATIONS

Where the system lives.

Figma, code, docs, releases, AI agents. Every output stays in lockstep with the source, all of it hosted for you.

FIGMA

Full Figma sync + Code Connect Coming soon

The Zaklad plugin syncs your whole system into Figma, variables, text styles, icons, and components all refresh in one click. Code Connect, linking developer inspection directly to your real component source, is coming soon.

Variables with theme modes, light, dark, and custom
Text Styles generated from your typography scale
Icons delivered as Figma components with aligned variants
One-click sync through the Zaklad plugin, no manual upkeep
Coming soon: components linked to real code via Code Connect

Zaklad pluginsyncs into your Figma file

Variables & modes
Text Styles
Icon components
Component library
Code Connect soon

FOR DEVELOPERS

Cross-platform components, 1:1 with your designs

One library ships components for both web (ReactJS) and native (React Native), fully typed out of the box. Props mirror what’s in Figma, so the name you see in the design panel is the name you reach for in code. Figma Code Connect surfaces the snippet in place, and a namespaced API keeps the autocomplete path short.

One library, ReactJS and React Native, same API
Fully typed so the IDE guides the build
Prop names identical to Figma, 1:1 parity with design
Figma Code Connect surfaces snippets where you’re working
Namespaced API, Button.Secondary, Button.Icon, Button.VARIANT.*

<Button>Save</Button>

Save

EXTENSIBILITY

Need something we don’t ship? Build it.

Keep your own library, forward ours inside it, and build custom components on top in design and code. Tokens aren’t locked to Zaklad components, the CSS custom properties land in your codebase and the Figma variables land in your file, so anything you build anywhere in your project inherits the same foundation.

Forward built-ins from your own library, keep your namespace
Build custom components on top, in design and code
Tokens available project-wide, not just in shipped components
Theme changes flow through built-ins and yours automatically
Coming soon: import custom components into the platform

your-ds library

ButtonForwarded

ModalForwarded

TextInputForwarded

PricingSliderCustom

GanttChartCustom

ReportExporterCustom

color.brandspacing.mdradius.lgtext.body

DOCUMENTATION

One docs page, every discipline

Coming soon

Component docs stop being scattered across the tools each discipline prefers. Designers rarely look at Storybook, developers rarely open the design file, and anything written up elsewhere drifts the moment it’s published. One live page per component gives designers, developers, and everyone else working on the system the same source of truth.

One live page per component, shared across every discipline
Editable props with the preview updating as you tweak
Usage guidance and do/don’t sit alongside the API reference
Accessibility notes, keyboard paths, focus behaviour, touch targets
Always current, generated from the source, never drifts

Button

Design Code A11y

Usage

Use for the primary action on a page.
One primary per view, pair with secondary for alternatives.
Avoid stacking two primaries side by side.

Props

variantprimary

sizemd

disabledfalse

Accessibility

Keyboard activation: Enter or Space.
Focus ring meets WCAG AA contrast on every background.
Touch target 44px minimum, padding scales with tier.

Preview

Save

One page. One source. All disciplines.

RELEASES

Every output. Same version. Always.

Every change is versioned across all outputs simultaneously. Releases are immutable snapshots, you can always roll back. Designers, developers, and documentation are guaranteed identical.

Zaklad Published v2.0.1

Designerv2.0.1

Developerv2.0.1

Documentationv2.0.1

MIGRATION

Switch without starting over

Already have a design system? Don’t remap every token by hand. Paste DTCG JSON straight from your existing tooling and Zaklad imports the whole structure, names intact, so years of work come across in minutes instead of a weekend of copy-paste. Complex shapes may still need a touch of mapping to fit the schema, but the grunt work is done for you.

Paste DTCG JSON directly, no per-token mapping needed
Token names and structure preserved where possible
Restore from .zaklad archives for full-system snapshots
Upgrade your design system, don’t rebuild it

tokens.jsonDTCG

{
  "color": {
    "primary": { "$value": "#28c0c2" },
    "surface": { "$value": "#f0f0f2" }
  },
  "spacing": {
    "sm": { "$value": "0.5rem" }
  }
}

Imported as

color.primary#28c0c2

color.surface#f0f0f2

spacing.sm0.5rem

AI INTEGRATION

Bring your own AI agent, via MCP

Zaklad exposes your whole system over an open MCP endpoint, with full read and write access, so the AI agent you already use can work on it directly. Migrate a system in, push sweeping changes across every theme, audit what depends on what, all in plain language and every change undoable. It’s deliberately open-ended: the use cases and skills you build on it are yours.

Open MCP endpoint, works with the AI agent you already use
Read and write access, not just inspect
Works beyond ReactJS, React Native, and Figma
Power-tool by design, the use cases are up to you

Your AI agentAny MCP client

ZakladMCP server

→read tokens.color.*

←returned 24 tokens

→update color.primary = "#8b5cf6"

←applied across 4 themes

DESIGN.md

Hand any AI tool the whole system

A single instruction file that hands a generative AI design tool, like Claude Design or Google Stitch, your actual design system: your tokens, text styles, components, and icons, plus usage notes and do’s and don’ts. It builds with the real thing instead of making things up, and stays true to source as a single point of reference.

Always true to source, a single reference your AI tools can trust
Tokens, text styles, components, icons, plus usage and do’s and don’ts
Built for generative design tools like Claude Design and Google Stitch
Resolved values for prototyping, your real package for production
Auto-filled from live state, fine-tuned in the editor or over MCP

DESIGN.md

Any AI toolrebuilds your system from one file

PORTABILITY

Your data. Your way out.

Zaklad isn’t for everyone, and that’s fine. If the platform stops fitting your team, the Figma files and npm packages you’ve published keep working untouched. No teardown, no migration emergency.

Figma library and npm packages carry on independently
Export the full system as a .zaklad archive, tokens, themes, icons, components, and metadata in one file
Export tokens as DTCG JSON for migration or custom tooling
Offline backups, team handoffs, or sharing a whole system in a single file

Bundled in one file

Tokens

Themes

Icons

Typography

Components

Metadata

design-system.zakladPortable snapshot

HOSTING

Fully managed. Zero maintenance.

Zaklad is a hosted platform, open to teams anywhere in the world. Everything sits on EU servers with GDPR-grade handling and encrypted storage, so enterprise data has the protections your security and audit teams expect. We also handle the dev pipeline work most teams dread, continuous platform updates, and keeping your system’s outputs fresh between releases. Brand fonts on our CDN are included if you want them, because self-hosting fonts is a pain nobody should have to own.

Sign up in a browser, no install, no servers to run
EU-hosted with GDPR-grade handling and encrypted storage
Automatic updates, to the platform and to your system’s outputs
Optional font CDN for brand fonts, no self-hosting required

Platform updatesautomatic

Dev pipelinemanaged

Font CDNoptional

Backupsdaily

Zaklad’s feature set is designed to work at any scale, from a portfolio project or personal site, to a solo designer or freelancer shipping client work, to a startup or small team growing their product, to an agency delivering systems to multiple clients, to a mid-size engineering team keeping Figma and code in sync, to an enterprise organisation replacing the cost of a dedicated design-systems team.

Works with

Figma ReactJS React Native npm MCP agents

Start your system.
We’ll handle the rest.

Free to start. Fully managed. No payment details required.

Start free View pricing

Everything your design system needs.Nothing it doesn’t.