Zenith Introduction

A design system is a combination of UI components, principles, and guidelines that are applied across an entire application. The combination of these elements define how a product should look and function consistently.

At a more macro level, design systems break down the fundamentals of development into scalable elements:

• Electrons define the building blocks (spacing, color, typography) that make up the majority of a user's interface.
• Atoms are made up of electrons and signify simple, commonly used page elements (buttons, dropdown menus, banners, etc.)
• Organisms are more complex elements, made up of multiple nested atoms and more detailed specifications (toolbars, tables, side panels, etc.)
• Templates are generic skeletons for new, commonly used pages that are made up of organisms and atoms

All of these elements are individually documented to detail the when and why you would use them, along with how to implement them.

Think of a design system like a meal kit:

While design systems are commonly applied only internally, we see a large opportunity with our integrator community to adopt Zenith.

1. Stand on the shoulders of Geotab's design team
   1. All Zenith Components are built to a rigorous standard, adhering to all WCAG 2.2 accessibility guidelines.
   2. Components are also constructed with usability in mind, embedding all states and scaling directly into the components. No custom code required.
   3. Robust design practices accompany all components, guiding you to mkae your integrations as usable as possible.
2. Reduction of development timelines and overhead
   1. Cut-down on the building and rebuilding of commonly used components.
   2. Single language for team members
   3. Internally we have seen implemented Zenith pages increase speed to production by over 40%.
3. Zenith updates for everyone
   1. New additions and updates will be added regularly, thoroughly tested to avoid breaking changes.
   2. As the Zenith team makes updates, all properly implemented components will change automatically to reflect the updates, no additional coding required.
   3. Validation of new components will happen before wider release, ensuring new updates don't break a user's experience.

1. Follow our setup guide to connect your add-in to Zenith.
2. Visit our storybook and find the component that you need.

3. Modify the parameters to follow the documented best practices to suit your needs

4. Copy the snippet and paste it into your code

Please visit our Zenith community page or contact zenith@geotab.com if you have any questions or feedback.