Learn how to create and set up a new styleguide in zeroheight. You can start creating a styleguide from two places, and both lead to the same setup wizard.

How to start

You can create a new styleguide from either of these locations:

• From your dashboard: Click the Create styleguide button on the Styleguides page.
  
• From Documentation > Styleguides: Click the Create styleguide button.

Name your styleguide

After clicking Create styleguide, a modal appears asking you to name your styleguide.

1. Enter a name for your styleguide.
2. Click Create styleguide.

Note: zeroheight suggests a default name based on your team name (for example, "ABC Design System"). You can change this at any time after setup.

Step 1: Customize your styleguide

The first step of the setup wizard lets you personalize how your styleguide looks. A live preview on the right updates as you make changes.

Upload a logo

Drag and drop an image file onto the upload area, or click Select file to browse your computer.

• Supported formats: PNG, JPG, GIF, TIFF, SVG, WEBP
• Maximum file size: 150 MB

Once uploaded, you can replace or delete the logo at any time.

Choose a theme (Enterprise plans only)

Note: Theme selection is available on Enterprise plans only. Other plans use the Classic theme by default.

If you're on an Enterprise plan, you can choose from four themes that set the overall visual tone of your styleguide:

Each theme comes with a default font and color palette. Selecting a theme updates the cover color, accent color, and font automatically.

Set your colors

You can customize two colors:

• Cover color: the background color of your styleguide's cover page.
• Accent color: used for links, buttons, and other interactive elements throughout your styleguide.

Click either color swatch to open the color picker. You can also:

• Click Discard change to revert to the previous color.
• Click Reset to default to restore the theme's default color.

Pick a font

Use the Font dropdown to select a Google Font for your styleguide. This font applies to headings, body text, and navigation.

When you're happy with your customizations, click Continue.

Step 2: Define your structure

This step lets you set up how your styleguide's navigation is organized. You can always edit this later.

Choose a navigation layout

Select one of two layouts:

• Sidebar only: Best for smaller systems and simpler docs.
• Topbar and sidebar: Best for larger systems with deeper navigation.

Select your main navigation sections

Choose which top-level sections to include in your styleguide. The available defaults are:

• Welcome: Introduce your design system and guide teams on how to use it.
• Foundations: Define your core visual language and decisions, such as styles and tokens.
• Components: Document reusable UI components and their usage guidelines.
• Patterns: Recommend solutions for recurring UI and interaction flows.
• Accessibility: Define accessibility standards and guidance to ensure inclusive experiences.
• Content: Set standards for product copy, tone of voice, and writing conventions.
• Resources: Collect useful links, references, and tools that support your design system.

All sections are optional. Click a section chip to select or deselect it. You can also add custom sections by clicking Add section and entering a name.

When you're done, click Continue.

Step 3: Connect your tools

The final step lets you connect external tools to your styleguide. Both integrations are optional — you can skip them and set them up later.

Connect Figma

Click Connect Figma to authenticate with your Figma account and select design libraries to sync with your styleguide. This lets you annotate and inspect your designs directly in zeroheight.

Connect Storybook

Click Connect Storybook to add Storybook URLs. This allows you to display live components and code properties in your styleguide.

When you're ready, click Continue to finish setup. Your styleguide will open and you can start adding content.

Tip: You can skip the entire setup at any time by clicking Skip setup and open your styleguide at the bottom of the wizard. You can always configure these settings later from your styleguide's settings page.

Step 4: Create component pages

Note: This step only appears if you connected Figma or Storybook in Step 3.

After completing the setup wizard, zeroheight detects components from your connected libraries and offers to create pages for them automatically. You can either:

• Click Create component pages to get started.
• Click I’ll do this manually to set up pages later.

Pick which components to start with

You’ll see a list of components pulled from your connected Figma libraries. Select up to 10 components to create pages for. Each one becomes its own page in your styleguide's Components section, pre-filled with example content from your connected tools.

You can always add more pages later.

Click Continue to move to the next step.

Set up your page layout

Next, choose what each component page should include by selecting from the following sections:

• Guidelines: How and when to use the component, including do’s and don’ts.
• Specs: Visual details like anatomy, variants, and states. (Only available if you connected Figma.)
• Code: Implementation details, props, and live Storybook previews. (Only available if you connected Storybook.)
• Content: Writing guidance for labels, messages, and copy.
• Accessibility: Keyboard behavior and accessibility considerations.

You can drag sections to reorder them. The layout you choose here applies to all your component pages.

Once you’ve selected at least one section, click Create component pages. Your styleguide will open with your new pages ready for you to fill in.