Skip to main content

  1. zeroheight
  2. Use zeroheight
  3. Get Started with zeroheight

zeroheight 101

Shenka Mason Targus
Shenka Mason Targus
  • Updated

👋 Welcome to zeroheight

This guide will help you get up and running with zeroheight – plus share best practices to help you build a powerful, scalable design system.

Before we begin, we’ll assume you’ve already created a zeroheight team. If not, sign up to get started.

Some features mentioned below are available on paid plans. If you’re on the Free plan, you can explore these during a Starter trial.

 

🧱 Understand the key building blocks

Before connecting tools, it helps to understand how zeroheight is structured:

Team → Styleguides → Pages → Blocks

Styleguides

Your main documentation spaces. Each styleguide can have its own branding, structure, security settings, and themes.

Pages

Pages live inside styleguides and organize your content (e.g. Foundations, Components, Patterns, Guidelines).

Blocks

Pages are populated using blocks such as Design, Code, Embed, Table, Rules, and Tokens. Blocks let you combine design, code, and written guidance in one place.

Resources

The Resources dashboard is where you connect and manage:

  • Design files
  • Code repositories
  • Storybook integrations
  • Tokens

Themes

Themes control the visual appearance of your styleguide UI and can be reused across multiple styleguides.

Releases

Releases allow you to group changes and publish updates intentionally — useful for managing versioned changes and communicating updates to stakeholders.

Understanding these building blocks makes it easier to structure a scalable documentation system from day one.

🖍 Create your first styleguide

Once you're logged in, your first step is to create a styleguide.

You can start from a template or build from scratch. Everything is fully drag-and-drop, so you can structure your documentation in whatever way works best for your team.

At this stage, you can:

  • Upload your logo and brand assets
  • Customize navigation and layout
  • Adjust styleguide settings (visibility, branding, structure)
  • Use the Theme Editor to align your styleguide UI with your brand (colors, typography, interface styling)

💡 Pro tip: Use consistent page structures early on – it’ll save time as your system scales.

🎨 Connect your design tools

Bring your design system to life by connecting your design tools.

Supported integrations:

To connect a design tool:

  • Go to the Resources dashboard
  • Click Add a design file
  • Authorize your design tool account
  • Paste your file’s share link (or use the zeroheight Figma plugin)

Once connected, you can:

Keep designs up to date with re-syncing

After your design file is connected, you can re-sync it anytime from the Resources dashboard.

When you update your file in Figma (or another supported tool):

  1. Go to Resources
  2. Select the connected design file
  3. Click Update / Re-sync

zeroheight will pull in the latest changes – including updated components, styles, descriptions, and variables – without you needing to re-add them to your styleguide.

This ensures your documentation stays aligned with your design source of truth – without manual screenshots or copy-pasting.

💡 Tip: Keep your design files well-structured before connecting to make syncing cleaner and easier to manage.

👾 Add your code examples

Bring your codebase into zeroheight to document how components are built – not just how they look.

🔗 Connect your code repositories

Connect zeroheight to your repositories from the Resources dashboard:

Once connected, you can:

This helps ensure your documentation reflects what’s actually being built and shipped.

📘 Integrate with Storybook

If you’re using Storybook, you can bring your stories directly into zeroheight.

You can connect Storybook in two ways:

  • Via Storybook URL – Embed an existing published Storybook instance
  • Via repository integration – Sync Storybook directly from your connected Git repository for tighter alignment with your codebase

Once connected, you can:

  • Display live, interactive stories
  • Show multiple component states and variants
  • Keep your documentation in sync as stories evolve

Storybook integration makes zeroheight a natural extension of your frontend workflow – connecting design, documentation, and development in one place.

📦 Import components and tokens into your pages

Once your design files or repositories are connected in Resources, you can add that content directly into your styleguide pages using blocks.

From the page editor:

  • Insert a Design block to display components, styles, and variants from your design tool
  • Insert a Code block to render live components from your repository or Storybook
  • Insert a Tokens block to display synced design tokens

This allows you to surface real components and tokens – not screenshots – directly inside your documentation.

When your source files are updated, you can re-sync them from the Resources dashboard, and the latest versions will appear in your pages.

✍️ Add documentation and guidelines

Once your components and tokens are in place, add the context that helps people use them correctly.

Good documentation explains not just what something is, but how, when, and why to use it.

Document key guidance such as:

Enrich your pages with:

To speed up your workflow, you can:

Clear, structured documentation reduces ambiguity and helps teams move faster with confidence.

🤖 Use AI to accelerate documentation

zeroheight includes AI-powered tools to help you draft, structure, and refine documentation directly within the editor.

AI can assist with:

  • Generating new documentation pages
  • Drafting component guidelines and usage instructions
  • Rewriting or improving existing text for clarity and consistency
  • Summarising long content
  • Fixing grammar and simplifying language

When building new pages, AI can reference existing documentation in your styleguide to help maintain structure and alignment.

You can also configure tone of voice instructions to guide how AI writes – helping ensure content matches your team’s documentation standards.

👉 Learn more about using AI for documentation:

👩‍💻 Work as a team

Design systems are collaborative by nature. zeroheight makes it easy to involve contributors across design, engineering, product, marketing, and content.

You can invite different roles depending on how people need to contribute:

  • Editors – Can create and update content, manage pages, and configure settings.
  • Reviewers – Have comment-only access to the signed-in view of the styleguide. They can view hidden pages and provide feedback on unreleased changes, but cannot edit content or change settings.
  • Viewers – Can access published documentation but cannot edit or comment (depending on your setup).

Learn more about user roles and permissions.

You can:

🔐 Configure security & access

Each styleguide has flexible security settings.

You can:

This ensures your documentation is accessible to the right people – internally or externally.

🚀 You now have the foundation

You’ve seen how to:

  • Structure styleguides, pages, and blocks
  • Connect design and code sources
  • Import components and tokens into your pages
  • Add documentation and usage guidance
  • Collaborate with editors, reviewers, and viewers
  • Configure visibility and security

You can implement these steps gradually – most teams start small and expand their documentation over time.

When you're ready, you can explore additional ways to scale and refine your setup.

📈 Scale and refine your setup

As your documentation grows, you may want to:

 

Share this article
Was this article helpful?