Using zeroheight for brand documentation

Michelle Chin

While zeroheight primarily focuses on documenting product design systems, it’s still an excellent option for documenting brand guidelines. This article shows you how to use zeroheight for brand guidelines. We walk you through the basics and typical elements that brand teams include in their guidelines. If you have any questions, you’re welcome to contact us on zheroes, our Slack community.

Basics for brand teams

For those new to zeroheight, it includes an easy-to-use, rich text editor. So if you know how to use Word or Google Docs, you can start adding text and content immediately with zeroheight.

If there’s something specific you want to learn how to do, check out our landing page with help articles arranged by topic.

One of the first things teams do is customize their styleguide. Some customization options:

If you’re using Figma, we created a template with the sizes for all the different types of images you can add to your styleguide.

💡Pro tip: Many teams keep a separate Figma file for image assets that will appear in their documentation (e.g., rules around do’s and don’t’s). Learn more about organizing your design files for your documentation with this article.

Connecting your design files

zeroheight supports connecting different design tools. Connect a file that contains your color palette and typography styles. The Figma file we mentioned in the previous section is an excellent place for the color palette and typography styles to reside.

Now let’s get to documenting the essential brand elements!

Adding a color palette

Once you’ve connected your design file, you can add colors from your color styles. It will import the style name, which you can change in zeroheight. By default, it’ll display the hex and RGB values because this is what product teams use. However, you can add a note to include the Pantone or CMYK color values.

You can add Pantone and CMYK values in the notes section to make this more brand-friendly.

💡Pro tip: You have the power to organize your color palettes in a way that works best for your organization. It’s tempting to load all the colors from the color style selector at once, but you don’t have to. Many teams will have a primary color palette and a secondary color palette.

You have the option to organize the elements on your page however you’d like.

Consider who will reference your documentation and how your team organized the color palettes. Some brand teams might split theirs into a print color palette and a digital color palette.

Adding typography

You can select typography styles to include in your styleguide using the design uploads option. zeroheight will pull in the style name, font family, weight, size, and line height. You can edit the example text.

💡Pro tip: You can organize and group your typography styles for what works best for your organization. Some teams might provide a typography scale with guidelines, while others might have specific sections for Headings and their scales, print vs. web, etc.

To provide fonts for downloading, pick the attachment option from the toolbar. Teams typically package up their typefaces in a zip file for easy download.

Creating a stock image repository

If you want to make stock images for download, we have two approaches.

Single-image display for download

With this approach, you can upload images at their original size (high resolution) directly into zeroheight.

Screenshot of images stacked vertically

People can click on the image, which will display the image as a pop-up. They can right-click the image to save it, which will download as its original high-res size.

There are a few caveats with this approach:

zeroheight replaces the file name with a string of letters, so when someone goes to download it, it will use that new file name. You can use the image’s caption to list the original file name, but it will be purely for reference.
Currently, our image embeds only stack vertically (i.e., no tiling or grid).

💡Pro tip: To help findability for images, add text below the image with a description, name, tags, etc., to make it findable with your styleguide’s search.

Using tables to display images

If you want a tile-like display, you can add a table and include images in the table. The only caveat is that people won’t be able to download those images. Instead, we recommend attaching a zip file of the images.

Image repository quick tips

Maintaining galleries with hundreds of images can be a lot, regardless of the tool. In our experience, we recommend creating simple categories for people to navigate (e.g., office buildings, employees, families, mobile devices, etc.). These categories make things more scannable so people can quickly find and download what they need. Most people scan topics, then make selections based on the images they see, not necessarily descriptions or tags. You might only need extensive tagging and writing if you have specific tagging needs.

Which approach to choose

Which method you use will depend on how people will use the images and how many images you have in your repository. For fewer images and fewer downloads, the first method might be ideal. For more images and frequent downloads, the second approach might be better. If you use the second approach, consider breaking up your zip files into smaller groups to make downloading easier for the user.

Adding design assets (logos, icons, etc.)

Connecting your design file is the easiest way to provide and maintain design assets like logos and icons. People who can download assets can do so by inspecting the asset in your styleguide and selecting the download option.

Screenshot of a list of icons

Before adding the assets to your page, you need to set your assets ready for export in your design file. We have more information in this article.

The options that people can download are set in the design file.

We recommend including your design assets with this method because it’s easy to update if something changes (e.g., brand color). Alternatively, you could upload static images of the asset and add zip files as attachments for people to download. If anything changes, this requires manual updating.

Other useful features for brand teams

In addition to the typical features we mentioned above, there are other features that you can use.

Shortcut tiles

You can add shortcut tiles anywhere so users can access another page or URL. These are more visually appealing than plain text links because you can add images to get people’s attention.

Rules block

The rules block is a great way to show guidance on what to do, what not to do, or what to be cautious about.

Screenshot of how the rules block displays do's and don't's

zeroheight has several levels of navigation built in, so you can create a robust structure but still ensure things are findable.

💡Pro tip: Use headings on your pages to create an in-page navigation menu to easily access information on long pages.

Example of the page navigation menu

Embedding content

zeroheight supports many embed options, from Figma prototypes to Lottie files to videos from multiple platforms. We recommend exploring the embed options to see how you can make the most of your brand content in zeroheight.

Depending on your plan, we have different options for you to control your external partners’ viewer access. You can set access at both the styleguide level and the page level.

If you’d like external partners to freely access some but not all of your content, you can consider making the styleguide public, then lock down specific pages for internal employees. For Professional and Enterprise plans, you set page-level access to require SSO, a password, or either SSO or password. Learn more about styleguide-level security and page-level security with SSO and page-level security via a password.

Alternatively, we also provide the option to invite viewers via email, which is a good way for external vendors to have access. With this method, access expires in 30 days or when you choose to revoke access.

Example brand guidelines

For inspiration, check out these styleguides specifically focused on brand made with zeroheight.

Beyond the basics

Once your guidelines are in a good place, there are a few other advanced things you can do to level up your styleguide:

Need help?

If you have questions about how to handle things that we didn’t cover, feel free to reach out to the Design Advocates. We love helping customers out with best practices (community@zeroheight.com). You can also join the zheroes Slack community to chat with us or other customers and design system fans.

Integrate with zeroheight

Help Center

Top article results