Design System based on the 8pt Grid

Vitsky
Vitsky
Apr 17 · 12 min read

This article is the 2nd in a two part series — to the previous chapter in which I demonstrate how to establish an 8pt grid.

Image for post
Image for post

What are Design Systems for?

If you and your team aren’t using a Design System (DS), please open the latest project in your favorite design software, and count the myriad of shades of your primary color and grays, the number of fonts you’ve used and the different sizes your primary button appears in.

Go on, I can wait.

Most probably, you can shave off about %30 of the redundant styles and consolidate your design to be more consistent, lean and reusable.

When we create reusable styles and components, we essentially create a consistent visual language that we can rely upon when the product we’re working on inevitably scales.

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

— From the Design Systems Handbook, Design Better

You can read all about the value of Design Systems, in Invision’s excellent eBook — Design Systems Handbook. The first two chapters will help you understand better the need of a DS and who should be involved in the process (hint: not only designers).

Designing our Design System

Image for post
Image for post

In the previous article, we’ve established our basic unit — 8pt. We’ll use that unit in our smallest components as well as in our largest and more complex components. We also defined Typography, Iconography and Layout; so apart from Layout, I won’t be delving too deep on these two issues here. Here’s what we’ll be going going over:

  • Color
  • Typography
  • Iconography
  • Shadow
  • Border Radius
  • Components
  • Grid & Layout

Color

Image for post
Image for post

Colors are going to be our first building block. When designing digital products, we’re going to need the following colors as a minimum:

  1. Primary: Usually the brand color.
  2. Secondary (Optional): Should complement the primary and not compete for attention, it’s purpose is to signal elements with a secondary importance.
  3. Grays: Approximately 4–5 shades.
  4. Support: Success (Green), Warning (Yellow), Error (Red), and Information (Blue).

Creating the palette

To create more shades of any color, simply use a a technique of manipulating Saturation (S) and Brightness (B):

Darker tones: add saturation and reduce blackness.

Lighter tones: reduce saturation and add blackness.

Image for post
Image for post
The secondary’s color additional shades.

Duolingo is a great example of using several shades of the same color:

Image for post
Image for post
Duolingo is a very colorful app — touring it will teach us more lessons in color.

When creating the Grays palette, it’s crucial to assign a use for each one — otherwise you find yourself wondering what shade to use in which case. The Grays are:

  1. Lightest: used to distinct white elements on top of a gray background.
  2. Light: should allow dark text over it to be accessibly read.
  3. Base: neutral gray.
  4. Dark: used to allow white text over to be accessibly read.
  5. Darkest: used to signify secondary areas, like sidebars. Should allow white text over to be accessibly read.

Choosing the grays can be totally technical, or we can add some tint from our primary color to the mix.

Image for post
Image for post
Adding tint to your grays gives them much needed character.

Until Sketch adds this feature natively, use the Stark plugin to check if your text styles adhere to the accessibility rules:

Image for post
Image for post
Using Stark to check test readability of text over a layer’s fill color.

Defining the styles

Sketch allows us to name our styles and organize them into groups, saying goodbye to confusing randomly scattered color swatches.

Image for post
Image for post

Don’t forget to get creative, within accessibility and usability constraints of course. It’s easy to get totally technical here, but adding your twist will give the color palette more character.

Typography

Choose your fonts

I’m going to assume your brand or client already have fonts they use. If the task of choosing the fonts has been given to you, give it the proper attention it deserves and read some articles on this topic.

Modular Scaling

I’ve covered modular scaling in the previous article, however it’s worth it to go over it here as well.

Modular scaling is basically a method that helps you create a consistent typography system fast. It removes the guesswork from choosing the next font size and line height. All that remains for you to do is choose a base font size (I usually opt for 16px or 18px), and a modular scale to go by:

Image for post
Image for post
These styles were generated off of the Body Regular style: 16 font size | 24 line height.

There’s one school of thought nor one solution for all the typographic needs out there. You’ll have to analyze and understand your project’s typographic needs either beforehand or as you go along.

A few pointers on typographic systems:

1–2 font families: Use 2 font families at the most, one for headings and another for body and small text. There’s rarely a need for a 3rd font family.

2–3 font weights: Its easy to lose track and focus with robust font families like Helvetica or Inter, however more than 3 font weights are too much for the anyone to discern meaning from. If you feel like it, maybe go for the black font weight for your topmost heading.

4–12 typographic styles: Digital products tend to need less styles, usually 2–3 headings, body (2–3 weights), and a caption style, while blogs and robust websites tend to need several more headings and smaller font styles.

3 font colors: Prepare your typographic system beforehand for any occasion and create styles for Dark, Gray and Light at least.

Image for post
Image for post

If your project is more branding than product related, I would urge you to be more creative than that. The main difference here is in the constraints. The content in a branding centered project, is controlled and curated and thus allows more creative freedom; while the content in a digital product, is user generated and needs to fit within tight constraints — which are up to you, the designer, to decide upon.

Define text styles

Sketch allows us to define text styles in an organized fashion, which helps us in turn to create a clear and concise typographic inventory.

I define my styles like this:

{Style name} / {Alignment} / {Color}

This way the result is a series of nested groups, all neatly organized and quickly exchangeable.

Image for post
Image for post

Only recently did Sketch allowed us to redefine multiple styles at once. This major improvement made managing our typographic system so much easier — all we need is a visual repository :

Image for post
Image for post
It’s now easier than ever to change multiple text styles.

Iconography

As mentioned above, icons designed on an 8pt based grid will scale perfectly:

Image for post
Image for post

Exporting a 16×16 pixels icon for iOS will result in perfectly rendered icons in 16, 32 and 48 pixels.

If you intend on using icons in a different size, I would recommend designing your icon on 16×16 pixels grid, and another version on a 20×20 pixels grid. This way you’re covered for any size: 16, 20, 24 (16×1.5), 32, 40 and so forth.

Shadows

Shadows are used to signify elevation — how much an element is off surface.

Image for post
Image for post
Assign elevation percentage to your shadows so your design will make visceral sense.

A few pointers on shadows:

Use one light source: Imagine there is a single light source illuminating your interface, casting shadows from a single angle, resulting in one x value for all of your shadows horizontal position.

Image for post
Image for post

More than one shadow: Multiple shadow styles can result in a more realistic and unique shadow.

Image for post
Image for post

You can apply shadows to Groups: Avoid shadows overlaying one another, and apply you shadow to the group, instead of layers within. However, you can’t apply more than one shadow to a group.

Border Radius

Most likely you employ border radius in your design, alternating between different radii for different elements. However, I haven’t found the use in having more than 3 border radii settings (maybe 4, but that’s a stretch):

  1. 2px border radius for UI components such as checkboxes, tags and the like
  2. 4px border radius for buttons and the like
  3. 8px border radius for cards, modals and the like
Image for post
Image for post
You can still use 8pt to define border radii: br-1 = (0.25*8), br-2 = (0.5*8), br-3 = (1*8), br-4 = (1.5*8)

Components

Components are all the reusable items you have lying around: buttons, inputs, labels, cards, video players and so forth. Our goal here is to have a readily available component for most occasions, but without ending up with an endless list of components.

I’ll take the basic button as an opportunity to explain the whole spiel.

Designing a modular button

Image for post
Image for post
Primary Button anatomy in total accordance with the 8pt Grid.

The primary button is probably the most reused component in any DS. It’s function is to indicate the user that the function it suggests is the main function in this screen. It will usually be the safest action the user can take, and the one that we, the designers, want him to perform.

Image for post
Image for post

The primary button can arrive in set sizes:

Image for post
Image for post
The different button sizes should also adhere to the 8pt Grid.

Should have a minimal size, while adapting to it’s content:

Image for post
Image for post
Although a bit awkward, Sketch retains a symbol’s min. width upon content reduction.

And have several states:

Image for post
Image for post
Prepare the states as different symbols or layer styles, so you can quickly alternate between them.

Voila! Our first building block is now efficient, reusable, flexible and up to standards!

And since we’re talking about building blocks..

Modular Building Blocks

The most efficient method out there for organizing your DS that I’m familiar with is the Atomic Design method. The method was introduced to us all by Brad Frost — I urge you to read all about it here:

In a nutshell, all of our components are organized to one of the following: Atoms, Molecules, Organisms, Templates and Pages.

Image for post
Image for post
Organisms are made out of several Molecules. Molecules are made out of several Atoms.

I myself haven’t found much use of Templates and Pages. If we’ll compare the Atomic design to Lego, then Atoms, Molecules and Organisms are the basic bricks, groups of different bricks and compositions of groups respectively.

Image for post
Image for post
Molecules are built from different Atoms, while Organisms are built from both Atoms and Molecules. Source.

While Templates and Pages are more like the Millennium Falcon Lego set — fun and all but not very practical, and a nightmare to build.

If that sounds to you like Symbols and Nested Symbols, you’ve hit the nail on it’s head. The button we’ve just built is an Atom, if we’ll add this button to at the end of a card or in the websites navbar, it’s now a part of a Molecule:

Image for post
Image for post
This card molecule is composed out of Atoms — Symbols and text styles.

If we’ll keep this up, adhering to the 8pt Grid rules when designing each of our components, sooner than later we’ll have a whole DS based on the 8pt Grid.

In the previous article, I went over layout (columns, rows and spacing), so if anything in the next sections won’t be quite clear, you’re more than welcome to pause here and read all about it.

Grid & Layout

The jury is still out on whether designers should code. As a designer that codes, I can say that there is a shallow layer of coding that designers should be familiar with, one of which is the Box Model.

The Box model

Image for post
Image for post
The ‘BOX’ text is the element; Margins, padding and etc. are properties of that element.

The box model is a box that envelopes every element on the screen — everything essentially lives in a rectangle. The box model consists of: margins, borders, padding, and the content itself.

Increasing the padding will increase the box size, while increasing margins will increase the space around the box, pushing other elements away (element — any entity in the webpage, in this case the text ‘Box’).

Image for post
Image for post
With the Developer Tools open, you can examine and play with an element’s box model properties.

Notice that padding and margins don’t have to be the same for all sides; in fact, they can be different for each side. Also, the box’s height is affected by the element’s line height, while it’s width is affected by the font size.

This distinction is crucial for us designers to understand. An element’s size and position, it’s presence in the layout, is determined by several factors:

Margins: the space an element keeps away from other elements.
Padding: the space an element clears around the content.
Content: the content inside the box

Frustratingly enough, there are two very confusing modes for rendering elements on the screen concerning the box model:

/* The default and confusing settings */.red-box {
width: 200px;
height: 200px;
padding: 40px;
border: solid red 2px;

/*default box sizing (bad for designers)*/
box-sizing: content-box;
}
/* The easy to understand settings */.blue-box {
width: 200px;
height: 200px;
padding: 40px;
border: solid blue 2px;
/*the box sizing (making sense for designers)*/
box-sizing: border-box;
}

The two methods differ in calculating the elements size; the first method (default), takes the assigned height and width (200px), and adds on top of that padding (40px*4 sides), and border (2px*4 sides), resulting in a 288*288px box. Any change to padding and border width will alter the box’s final size.

The second mode includes padding and border in the final assigned size, resulting in a 200*200px box no matter what the padding and border values are— much neater and easier to understand.

Image for post
Image for post
A simple property, makes calculating the element’s size much easier for everyone. The red box has the default settings at first, resulting in an unexpected box size. It’s box sizing property is then assigned the border-box value, resulting in a neat 200*200px size box.

Of course, the element’s size and position can be affected by many other factors (such as width, height and explicit/implicit positioning and the like), but these are the basics for each element on the screen.

Spacing

When deciding on the position of an element, we’re essentially deciding upon its’ spacing from another element. Repeat this decision hundreds of times without a system, and you have about a hundred different spacing definitions.

Taking in mind the fact that we have spacing within an element and outside an element, it may be to our advantage to have 2 spacing scales: Element spacing and Layout spacing.

This is in fact a variation on IBM’s Carbon DS, so kudos IBM design team!

Image for post
Image for post
☝️The button we designed before is an example of this scale in action.

The layout scale is used to space elements from one another; within an encompassing element or between sections:

Image for post
Image for post

This is how it looks in action in an encompassing element:

Image for post
Image for post
Layout spacing within an encompassing element (Molecule)

And this is how it looks in action in a webpage:

Image for post
Image for post
Layout spacing between elements and sections

Horizontal Layout

I covered this specific topic in detail in the previous article, check it out.

For horizontal layout, I use either a 12 column grid with a 24px gutter and 72px column, or a fluid 12 column grid with a 24px/32px gutter and varying column width (obviously).

Each product or website require a certain grid, simply use the 8pt unit in a way that makes sense.

Image for post
Image for post
(12 × 72) + (12 × 24) = 1152

Last words

Design systems should live on and evolve, not freeze in time. Try and treat them as a living document, rather than words set in stone.

Keep in mind that the basic the component/style you’re about to change, the more complicated the consequences will be. Altering the button or body text style will affect the DS much more than altering the card layout. So experiment with the basic building blocks before venturing much further.

Good luck and have fun!

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Thanks to Shira Eliash

Vitsky

Written by

Vitsky

UI/UX designer | Sketch instructor | Good vibes enthusiast. Israeli born and raised. Reach me at hi@vitsky.studio. See my work: www.vitsky.studio.

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Vitsky

Written by

Vitsky

UI/UX designer | Sketch instructor | Good vibes enthusiast. Israeli born and raised. Reach me at hi@vitsky.studio. See my work: www.vitsky.studio.

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store