Introduction

What is a design system?

At minimum, a design system is a collection of reusable design elements, UI components, and standards that guide their use. An advanced design system needs to encompass the entire design platform — design tools; brand identity including color, typography, voice, and photography; UI and app components; code libraries; content libraries; data analytics; documentation; workflow; and more. Design system allows team members to stay in sync. Whenever a team member introduces a change in the design system, for example, adds a new component or changes a color in a product’s color palette, all other team members should be automatically notified about this change. Design system also takes the burden of updating design specs off designers because design specification is updated automatically. Design specifications also become a live document that team members use daily. Ultimately, this will give designers more information to make better design decisions.

Atomic design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.

Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.

Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.

Bootstrap as guideline for design & development

This design system is based on components from bootstrap framework. Atoms like grids, spacings or icons are totally Bootstrap based. It aims to facilitate the design process and avoid frictions during the hands off design > dev.