DIESL Design System

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications, and the need for them go hand in hand with the need for scale, efficiency, and consistency in Design. They basically bring order to chaos. I created the DIESL Design System to create that order at TBS. In this project you will see some of the components I built for this design system but a design system is much more then just a component library. If built correctly it is the lifeblood of your products. Take a look at what I put together below.

The Foundation

You don't start building a house without it's foundation so the same thing applies to design systems. You just don't use concrete. The foundation of a design system is your spacing and grid system. I feel like spacing and grids are some of the most overlooked elements when it come to visual design but they can make a huge difference in the look and feel of a design. For this project I went with an 8pt grid system that consists of a 12 column grid and an 8px baseline grid. For the spacing system I went with a rem based guide that aligns with the 8px grid. The reason why I went with an 8pt system is to help the design system be more responsive because all of the top screen sizes are divisible by 8 on at-least one axis. This is important as it will help prevent anti-aliasing.

‍

Typography

For web I wanted to go with a clean and versatile font for this system. I chose Poppins because the geometric shape of the letters and the spacing between characters is perfect. It's also super versatile having several variations in weight which make it look great as a heading font and as body text. For mobile devices I went native using San Francisco for iOS and Roboto for Android.

‍

Iconography

Icons in Get Paid act as visual aids to help users complete tasks. In the DIESL design system I went with the feather icon library because it's simple, informative, and complements the overall visual language of the design system. I went with a simple icon set because detailed icons increase cognitive load. I focused on simplicity to help users understand the concept the icon represents and recognize icons on smaller screens.

Color Palette

Although I value an aesthetically pleasing use of color, I place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements. To me colors should have meaning and be selected intentionally. Not based on what you like or what you think looks good. In DIESL every color has an assigned role, which hold a specific meaning based on how they function within the interface. By defining the color roles it makes things easy to modify and customize later. They also extend the color system so it works across multiple touchpoint.

‍

‍

Buttons

We all know what buttons are, but what many non designers fail to realize is that a single button will have several different states. The most common being active, hover, focus, and disabled. You will also occasionally see a loading state. I decided to use all five of those states in DIESL along with 4 different button types. Those types are Primary, Secondary, Subtle, and Text. Each of which has an icon version associated with it. You can see some of the buttons in a few of the different states below.

‍

Form Fields

The other big category of components I built for DIESL is the form fields. These are very similar to buttons in the sense that they need to accommodate several different states. One of the biggest things I try to keep in mind when designing form fields is accessibility. Making sure that they title of the field doesn't go away when selected, and that there are more indicators then just color for errors are all common considerations. There are also other components like dropdowns, radios, checkboxes, toggles, and others that are essential to have.

‍

Other Components

Design systems are complex and I've only scratched the surface of components that have been built for DIESL up to this point. To round this out I just wanted to show a few of the other components that I've done so far to help DIESL serve the Get Paid application and the TBS brand.

Design Systems are like a living organism in that they complex and ever evolving.What I showed here is just a section of what goes into a complete system. A complete system contains the following:

‍

Documentation

A shared space where you say when and how to use the design system.

Visual Language

Guide to what the brand feels like

Pattern Library

Also called "component library" includes what you see above

Brand Guidelines

Includes principles, tone and voice, writing style, and more

CSS Framework

Front-end code that developers use to build a product.

‍

DIESL is a work in progress but that's how it's supposed to be.