Background

There is no way I could possibly squeeze the entirety of a design system into a portfolio piece, that would take an entire dedicated website. What I can do is give you a little insight into the process, the foundation, and the principles behind it through some examples.

Foundation

Let’s start with the foundation. We used a modified version of the atomic design framework first coined by Brad Frost. With this framework, reusable components are broken down into atoms, molecules, organisms, templates and pages. Multiple atoms build into a molecule, multiple molecules build into an organism, multiple organisms build into pages and so on.

Atoms

Atoms are the basic building block. Some examples of atoms would be buttons, checkboxes, radio buttons, icons, typography and more. There are even atoms for layout and spacing. To maintain consistency, rhythm and to optimize for all screen sizes and densities, we used a base 8 measurement and spacing system. Each one of these atoms have different variants and different states. Let’s use the button atom as an example. The button atom has three different properties which are style, size, and behavior. There are multiple variants for each property. The style variants are solid, outlined, and text. The size variants are small and large. The behavior variants are full-width, sticky, and standard (width based on the length of text inside). All of these variants help add flexibility while maintaining consistency.

Molecules

Next are the molecules. Some examples of these are form fields, list items, and cards. Let’s take a look at forms. Each form is built out of multiple atoms. A form can be built from a typography, button, and sometimes an icon atom. Some properties of the form are icon placement, which have left, right, both, and none variants. Another property is helper text which is either a yes or no variant. Similar to atoms, molecules also have variants which help keep the system flexible at every level.

Organisms

Things start to come together once we combine molecules to create organisms. Organisms could be thought of as a section of a page. To use a travel specific example, an organism could be a group of search cards, or the search filters. Let’s examine a billing organism.

Pages

Pages are a collection of organisms. This is where the design and layout fall into place. Atoms, molecules, and organisms are fairly abstract, but pages take all of these and provide context.

Principles

Now let’s look at some of the principles. One of them is flexibility, we talked about that earlier with properties and variants, but the most important one by far is accessibility. A huge part of accessibility is color and contrast. A big challenge with this was working with Wanderu’s existing brand colors and folding that into a larger color system.

Color

Each color in Wanderu’s color system is broken down into multiple values. There are 10 values and they range from 50 to 900. 50 is the lightest and 900 is the darkest. The base version of each color is the 500 value.

The great thing about this is that rules can be assigned to atoms and molecules to make sure colors can easily be changed at a high level, but still retain accessibility and contrast. Let’s check out the messaging molecule to demonstrate this. The text and icon are always assigned to the 800 value, the background color is assigned to the 50 value, and the border is always the 200 value.

This concept of rules being baked into components is built through the entire system. It makes it so designers and developers can spend less time making small decisions like what color things should be, what size should things be and more. The goal is that we can focus on bigger questions and the broader UX rather than spend time on the smaller things.