9 New Ways to Customize your Design System with zeroheight

Over the past few months, the zeroheight team has been working on a slew of new features to help you further customize your styleguides. We’ve thought about everything from making your password protected pages more helpful to giving you more options for images.

Read on to learn more about all of the new options for making your design system uniquely yours.

illustration of a “hero image” the image icon with a cape

Enable a hero image anywhere

It’s always been possible to add a hero image to the cover page of a zeroheight styleguide. Our newest update allows you to go beyond that and add a hero image to any page.

Use hero images to create a distinction between styleguides, visually represent the contents of a page, or jazz up a page to encourage deeper viewer engagement (Looking for insights on viewer engagement? Check out our new Analytics dashboard available on Enterprise plans)

Use the outline…or don’t

zeroheight is all about making it easy for anyone to create a design system quickly. And our outline is super helpful in that mission.

But, sometimes, a page is best created without an outline. Or, you may be working with an outline of your own. For those times, you can disable the outline on a page-by-page basis.

Add a link to an image

💡 Available on non-legacy paid plans.

Images are a core component of a design system. And, we’ve made them even more powerful by making it possible to add a link to an image.

So, use images as a button or use them to direct viewers to key information.

Change the size of shortcut tiles

Our shortcut tiles are great for getting viewers from one place in your styleguides to another. But, they were pretty inflexible with just one default size.

We’ve updated them to allow four different size options. Our hope is that the additional flexibility allows your team to organize shortcut tiles in a way that makes sense for your viewers.

Add custom colors for Rules blocks

If you ask us, Rules is one of the most important features in zeroheight. When used effectively, they clearly articulate behavior that should be celebrated and behavior that should be condemned.

When we initially launched Rules, we made it super simple. Do’s had a green background and Don’ts had a red background. What we didn’t think about was handling instances where a desirable behavior would be represented in red (like teams who use a red button to indicate a destructive action) or other instances where our default colors would cause confusion vs. clarify action. So, we made a change. Now, you can use whatever color you’d like in your Rules blocks.

Change the background color in Inspect mode

Inspect mode is the place to get all of the details about components including color, size, and style.

In the past, the background in Inspect mode was transparent. But, we heard from users that offering more options for color would make the experience more accessible for viewers. So, we did just that.

Add a custom note for password-protected pages

Password protection allows you to add a layer of security to your most important pages. And our new feature gives you the option to add a custom note to those pages to help viewers understand who to contact about access, why a page is protected, or any other important information (If you’re looking for even deeper security, our Pro and Enterprise plans offer SSO).

Change the look of the sidebar navigation

We used to show everything in uppercase on the left. Not anymore! Now, you have the freedom to switch between uppercase, lowercase, and mixed case to provide even more distinction between the pages in your styleguide. Check out all of the options for landing page navigation here.

Use image lightboxing

When you’re viewing a zeroheight styleguide, click on an image and watch it expand. This new update should allow viewers to see every detail of images to ensure they get all the context. Check out everything you can do with images here.

A few bonus ways to customize your design system

zeroheight has tons of other easy ways to customize your design system.

In a few seconds, you can add your logo. And with our Starter plan, you can align your design system to your brand with your custom fonts and color themes. Or, make it easy to find your styleguides with a custom domain.

Start using zeroheight

Creating your first page in a zeroheight styleguide is incredibly easy! And as your design system matures, we’re here to help with more advanced features. Start with our free plan or view all of our plan options.