I was tasked with creating the first in-house design system for Designzillas. The design system was meant to streamline design workflows, make start-to-end deliverable times faster, to standardize the usage of reusable components and font styles, and to implement standard base spacing units, font hierarchy increments, and more into the design team’s workflows.
Designzillas
In-house Design System
Design Lead
3 Weeks
This project started with setting up components for logo options. With the logo being used on multiple global regions (like the header, menu, footer, and more) I made sure to include all possible matchups of logo layouts, such as horizontal, vertical, and a site icon for favicons and apps. I also ensured to keep logo options flexible for whatever background color they appear on, allowing light and dark versions of logos, as well as full color.
Pictured above: A view of the logo region of the design system.
This design system allots for three brand colors (primary, secondary, and tertiary). Each color has a lighter and darker shade with the token addition of -lighter or -darker added to its name. Default grayscale colors such as white, black, and shades of gray are included for backgrounds, fonts, and any other practical use. Functional colors have been included, with usages for form errors, status warnings, and more. Colors in this design system may not be the only indicator of an error or alert, as that is not an inclusive practice. All functional colors must be accompanied by supporting text with a message of what the error or warning is, and optionally, an icon. If needed by the brand, gradient styles are also included as an option.
Pictured above: the color setup up of the design system.
Out of the box, the design system allots for one brand font, but more can be added. In order to fully test the flexibility of fonts introduced to the design system, they are displayed as: all capital letters, all lowercase letters, numbers 0-9, and a string of most commonly used special characters. This allows for full view of the needs of the type set in the font. In regards to font sizes, there is a default set of font hierarchy based on multiples of 8: fonts increase from 16px, 24px, 32px, 48px, 56px, and continue growing upwards in that multiple of 8.
Line heights are set to 1.5 times the font size, to adhere to WCAG AA level accessibility guidelines. For accessibility purposes, no font in this design system may be smaller than 16px. In order to test color contrast, a light mode and dark mode view of fonts are included.
Pictured above: an overview of the typography section of the design system.
In order to set up the grid and spacing system, I did some math to test out the best base spacing unit for the system (4px, 8px, or 16px). Here I found out that 4px was way too tiny (all I saw was blurry red lines), and continued on with 8px and 16px. Then I found out the prospective screen sizes for even-columned grids based on 8px or 16px spacing, which turned out to be 1536px, 1600px, 1760px, 1792px, and 1920px. (Essentially finding out which screen sizes were evenly divisible by 8 and 16.)
Fun fact about the chosen screen sizes: 1536px is also a 16″ Macbook screen size, 1600px is the minimum Dribbble post size, and 1920px is the maximum desktop design size, so 8px and 16px grid spacing worked out nicely for the desired screens and platform sizing needed for this design system. From there I tried to set up main divider lines to set up a CSS grid style column and row layout to group the spacing blocks (creating column guidelines ranging from 10-14 columns, depending on the screen size). Here’s what I came up with:
Pictured above: images of early sketches and mathematical computations and factor trees done to get to the design system's grid and spacing system.