Skip to content

Zeppelin Design System (Legacy)

⚠️ This Design System is deprecated and no longer maintained. npm packges will stay available, but please make sure to opt out until 2025 ⚠️

An online living style guide for Zeppelin Group

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

  • Style Guides help establish consistency across all Zeppelin Products
  • Style Guides help Designers and Developers become more efficient by sharing work
Breaking changes in version 1!

This website contains documentation for version 1 of the Zeppelin Design System. We are currently working on updating many of our guidelines and components so please expect many breaking changes. The documentation for version 0 can still be found here

We would love your feedback! Please submit an issue on github for ideas, comments, or problems!
Angular user? Please feel free to contact us if you want to help make a @zlab-de/zel-angular component library!

Who is 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 unofficial 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?

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. The element section also contains code examples for developers using html, react and vue.

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.

Developers

Developers can focus on coding complex functions and less on time writing out duplicate css code. There are 3 npm projects to help developers;

  • zeppelin-element-library Css file that is the core of the Zeppelin Design System
  • @zlab-de/zel-reactA React component library build using the zeppelin-element-library
  • @zlab-de/zel-vueA Vue component library build using the zeppelin-element-library

Let's build something awesome together!