Zeppelin Design System

This Design System enables you to build rich enterprise experiences and custom applications with the patterns and established best practices that are native to Zeppelin.

We want to make it easy for you to create Zeppelin Products!

The use of a style guide helps establish consistency across all Zeppelin Products and helps designers and developers become more efficient. The Zeppelin Design System has the latest styles and elements used across all Zeppelin products in one place so you can easily reference designs and use premade designs.

Who this site is for?

While we focus on helping designers and developers share reusable designs, this site is for everyone interested in using, or learning about, Zeppelin brand styles. You can find information about our brand colors and typography, how images should look and feel, and what elements (buttons, forms, tabs...) should look like. These designs can be applied to any project that you want to brand as a Zeppelin product.

Why create a design system?

We want all Zeppelin products to look like they belong to the same brand to create one corporate idenity. To ensure consistencies across products, a design system can provide one easily accessible source of truth that teams can reference. This helps teams save time searching for zeppelin designs and reduces the accidental use of unoffical designs. Premade designs help designers and developers become more efficient by reducing time spent duplicating the same styles over and over, and more accurate by reducing the likelihood of introducing errors from rewriting designs.

What can I find here?

Designers

The Zeppelin Sketch library: Designers can view designs and download premade sketch files for rapid prototyping and more efficient work flows. Using the Zeppelin Design System sketch files allows designers to focus more time on designing and less time rebuilding individual elements.

Design Information: This website has basic information about Zeppelin brand styles under the Guidelines section, such as colors, typography, and icons. In the elements section, you can find detailed information about how the Zeppelin styles are integrated into different elements (such as buttons, tabs, and forms). Each element contains information and examples on how designers and developers can apply our styles.

Developers

The Zeppelin Element Library: Developers can use the 'zeppelin-elements-libray.css' file to directly apply styles to your projects. Developers can focus on coding complex functions and less on time writing out duplicate css code. Check out the Download or Developer page for more information on how integrate this css into your project.

Development Information: The website provides basic html, React, and Vue sample code. We also provide information about themeing, accessiblility, and other helpful hints on using Zeppelin styles.

Let's build something awesome together!