Get teams and agents building from your design system

Bring your design system together in one platform and deliver the right context to every team, tool, and AI workflow.

logo/primary/decathlon

Rolled out their design system to 17 products across 19 countries in

8914

4 months

logo/primary/uber

logo/primary/united

Consolidate your design system into a single source of truth

Bring scattered decisions and guidance together with synced content from Figma, Storybook, and repos. Teams get a clear, current view of the whole system.

Good afternoon, Sarah!

Here's what's happening with Acme Design System.

Acme Design System

Last viewed

Button

Today, 14:32

Colour tokens

Yesterday

Typography

12 May 2026

Navigation

10 May 2026

Missing blocks

Manage →

Pages without
a design block

Manage →

Pages without
a code block

Recommendations

CategoryTask

Documentation

This styleguide hasn't been updated in 30 days or more.

Documentation

Button hasn't seen updates in 6 months or more.

Tokens

Colour tokens are missing semantic dark mode aliases.

Adoption

Navigation hasn't been used by any team in 30 days.

Documentation

You haven't tried a Tabs block yet in this styleguide.

Showcase

Browse design system documentation sites built with zeroheight.

Help centre

Get answers to your questions using our help centre and blog.

Community

Join the zeroheight community to get help and share your work.

Documentation

Styleguides

Acme Design System

Updated 2 hours ago · 84 pages

Apex

Updated 1 day ago · 56 pages

Folio

Updated 5 days ago · 38 pages

Stride

Updated 2 weeks ago · 61 pages

Cove

Updated 1 month ago · 29 pages

Themes

Themes let you publish your styleguide in multiple colour modes. Each theme is a named set of token overrides.

Default (Light) Default

5 token overrides

Dark mode

12 token overrides

High contrast

18 token overrides

Warm brand

9 token overrides

New theme

Clone from an existing theme

Templates

Templates give editors a consistent starting point when creating new pages. Apply any template when adding a page to your styleguide.

Component

Design block + code block + specs

Foundation

Full-width with colour swatches

Overview

Intro + linked cards grid

Release notes

Versioned changelog layout

Blank

Start from scratch

New template

Build from an existing page

Collections

Acme Tokens

Brand Primitives

Groups

Primitives

Semantic

Token types

All266

Color246

Number20

ACME TOKENS

Set up automation

Export ↓

Name	Description	Light theme	Dark theme
color / brand
primary	Primary action & links	#2265C9	#3B74C9
primary-hover		#1F4E93	#6B8AFF
accent	Highlights & tags	#9257DB	#A09AFF
color / feedback
success	Positive states	#0D735E	#34D399
warning	Caution states	#B26206	#FCD34D
error	Error & destructive	#E4281B	#F87171
color / neutral
background	Page background	#FFFFFF	#111827
surface	Cards & panels	#F8F8F8	#1F2937
border	Dividers & outlines	#E0E0E0	#374151

Analytics

Styleguide insights

Acme Design System

Last 30 days

Styleguide insights

Page insights

Search feedback

Total styleguide views

3,847

↑ 12% vs last period

Data recorded since Feb 2021

Average helpfulness rating

91%

↑ 3% vs last period

Based on 276 votes

Unique visitors

1,204

↓ 4% vs last period

Total styleguide views

Apr 14 202618th22nd26th30thMay 4 20268th12th

Views

Releases

Weekends

Pages by tag

Published

52%

Draft

20%

In Review

15%

No tag

13%

Last edited pages

Button

Today, 14:32

Sarah K.

Colour tokens

Yesterday

Tom R.

Typography scale

12 May 2026

Sarah K.

Navigation

10 May 2026

Mike P.

Icon system

8 May 2026

Tom R.

Page visibility

Status

Last edited

Last edited by

Download CSV ↓

Page ↕	Tags	Views ↕	Rating (%) ↕	Vote count ↕	Last edited by	Last edited ↕
Button Components	Published	1,247	94%	89	Sarah K.	Today, 14:32
Typography Foundations	Published	834	87%	62	Tom R.	12 May 2026 25
Colour tokens Foundations	In Review	612	79%	45	Sarah K.	Yesterday
Navigation Components	Draft	298	71%	28	Mike P.	10 May 2026 25
Icon system Foundations	Published	445	91%	52	Tom R.	8 May 2026 25

Open

Closed

All

Hide unsafe language

Missing search term	Note	Date submitted
"error state"	Looking for validation patterns	Jan 03 2026, 2:45 PM
"dark mode tokens"	—	Feb 14 2026, 10:12 AM
"spacing grid"	Can't find grid docs	Mar 22 2026, 3:30 PM
"button variants"	Looking for secondary & ghost styles	Apr 10 2026, 9:18 AM

Usage

Adoption

Package adoption →

Out of date packages

Repo	Package	Version in use
admin-dashboard yarn.lock	@acme/ui-components Latest: 4.2.0	↓ 3.8.1
marketing-site package-lock.json	@acme/ui-components Latest: 4.2.0	↓ 3.11.2
mobile-app package.json	@acme/tokens Latest: 2.1.0	↓ 1.9.4

Component usage →

Most used components

Button

482

Typography

345

Input

294

Icon

246

Modal

198

Sources

Design files

Connect Figma files to keep design assets in sync with your documentation. Changes in Figma are pulled automatically on each publish.

Acme DS – Core

Figma · Last synced 2h ago

Acme DS – Mobile

Figma · Last synced 1d ago

Brand & Marketing

Figma · Last synced 4d ago

Connect Figma file

Paste a file link to get started

Sync history

Acme DS – Core

Synced

2 hours ago · 14 components updated

Acme DS – Mobile

Synced

1 day ago · 3 components updated

Brand & Marketing

Error

4 days ago · Access revoked

Sources

Code repos

Link GitHub or GitLab repositories to pull live component examples and track real usage across your codebase.

acme/ui-components

GitHub · main · Last synced 1h ago

acme/design-tokens

GitHub · main · Last synced 3h ago

acme/mobile-app

GitLab · develop · Last synced 2d ago

Connect repository

GitHub, GitLab, or Bitbucket

Package coverage

@acme/ui-components

v4.2.0

482 component usages detected

@acme/design-tokens

v2.1.0

1,204 token references detected

@acme/icons

v1.8.2

Indexing · 318 usages so far

Components

Give us feedback

Set name	Last updated	Styleguide	Components
Acme component set	Last updated 2 hours ago	Acme Design System	84
Apex component set	Last updated 1 day ago	Apex	56
Folio component set	Last updated 5 days ago	Folio	38
Stride component set	Last updated 2 weeks ago	Stride	61
Cove component set	Last updated a month ago	Cove	29

Acme Design System

Documentation

Changelog

Settings

Search…⌘K

Overview

Cover

Foundations

TypographyReview

Colour

Spacing

Iconography

Motion

Components

ButtonNew

Input

Checkbox

Select

Modal

Navigation

Table

Tooltip

Patterns

Forms

Empty states

v4.2.0 · May 2026

Acme Design System

The single source of truth for Acme's design language. Everything your team needs to build consistent, accessible products – all in one place.

Quick start

Foundations

Colour, typography, spacing and icons.

Components

Buttons, inputs, modals, navigation.

Tokens

Design tokens synced from Figma Variables.

What's new

Button v4.2 – Added loading prop and improved focus ring accessibility.

9 May 2026

Dark mode tokens – Semantic colour tokens now include dark theme aliases across all components.

2 May 2026

Typography update – Inter variable font adopted across the full type scale. All weights 100–900 available.

24 Apr 2026

Spacing scale – Documentation for the 4px base grid and spacing tokens published.

18 Apr 2026

Typography

Acme uses Inter as its sole typeface across all products and platforms. The type scale is built on a 4px baseline grid for consistent vertical rhythm.

Connected to Figma

Inter

Type scale

Display

48px / 700 / -0.5px

Hello World

Heading 1

32px / 700 / -0.4px

Page title

Heading 2

24px / 600 / -0.3px

Section header

Body

16px / 400 / 1.6

The quick brown fox jumps over the lazy dog. Good design is often invisible.

Label

12px / 600 / 0.06em

SECTION LABEL

Caption

11px / 400 / 0

Timestamp · metadata · helper text

Typeface

Inter

Primary typeface · variable font · weights 100–900

Usage guidelines

✓ Do

Use defined type scale tokens. Avoid setting arbitrary font sizes directly in component styles.

✗ Don't

Don't introduce additional typefaces. Inter covers every use case – UI, display, and data.

Colour

The Acme colour system is built on primitive palettes and a semantic layer mapping those primitives to roles. Always use semantic tokens in components – never raw hex values.

Brand

primary

#2265C9

primary-dark

#1F4E93

primary-light

#E2EBF8

accent

#9257DB

accent-light

#E7E6FF

Feedback

success

#0D735E

success-bg

#DFFCF6

warning

#B26206

error

#E4281B

info

#3B74C9

Neutral

neutral-00

#FFFFFF

neutral-05

#F8F8F8

neutral-20

#E0E0E0

neutral-40

#8F8F8F

neutral-60

#595959

neutral-90

#262626

Usage

✓ Do

Reference semantic tokens like color.primary in all component styles.

✗ Don't

Don't use raw hex values directly in component code. This breaks theming and dark mode support.

Button

Buttons communicate actions users can take. Use them to trigger events or navigate. Always pair a button with a clear, action-oriented label.

Connected to

Button (Figma)

@acme/ui v4.2

Design

Figma · Button component · Frame: Variants

Code

import { Button } from '@acme/ui'; // Primary (default) <Button onClick={handleClick}>Save changes</Button> // Secondary <Button variant="secondary">Cancel</Button> // Destructive with loading state <Button variant="destructive" loading={isDeleting} disabled={isDeleting} > Delete </Button>

Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'ghost' \| 'destructive'	'primary'	Controls visual style and semantic meaning.
size	'sm' \| 'md' \| 'lg'	'md'	Sets the button height and padding.
loading	boolean	false	Shows a spinner. Does not automatically disable the button.
disabled	boolean	false	Prevents interaction and applies disabled styling.
onClick	(e: MouseEvent) => void	—	Callback fired on click.
children	ReactNode	—	Button label or content.

Usage

✓ Do

Use concise action labels (Save, Delete, Confirm). Pair one primary button with a single secondary or ghost per context.

✗ Don't

Don't stack two primary buttons side by side. Don't use vague labels like "Click here" – they fail accessibility standards.

Your design system, centralized

One place to manage your design system – from documentation and tokens to adoption tracking and AI-ready context.

"I want a very good source of truth that pushes knowledge into every corner of how we work. zeroheight is that connective layer. Everything we've built connects back to it."

Julien Vaniere

Design System Director, Sage

The context agents need to build on-system

zeroheight’s MCP gives agents current design system guidance as they work. They use the right components, tokens, and patterns, so teams get on-system output faster, with fewer errors and inconsistencies to fix.

Brand-Update

localhost:6006

workspace@brand:~

Connect your

design system to the AI agents

and workflows

your teams already use

Connectyour

design system to the AI agents

and workflows your teams already use

Design system guidance, right where the work is happening.

See all integrations

Stay in control as your design system evolves

Keep your source of truth accurate and trusted over time. Review, approve, and manage what’s current, deprecated, and ready to use — so only validated guidance shapes what gets built.

Built for complex enterprise design systems

Deliver multi-brand design systems organisation-wide with enterprise-grade security, governance, analytics, and support — without the cost and upkeep of building your own infrastructure.