The official bomb logo for Tickyboom in all blue.
Hella Bomb, so Hella Hella that Bomb Unicorns Will fly in the air with smiles ok ok ok ok??

The Great Eight Design System

This simple method we have been using for years is light on math skills and heavy on design consistency. So first, we will go over what the Great Eight Design System is & then how to use the system to benefit your designs.

The featured image for this blog post. It will not contain cats.
Let’s Start Using Great Eight - A Design System To Level Up Your Designs
Let’s Start Using Great Eight

What is this sorcery?

It’s not sorcery, I promise. It’s simple. For all of your paddings and margins for your web UI (and any other design), use multiples of 8px. It’s really that simple. The complexity is coming up with values that work for your design at different sizes along with creating pleasing design harmonies. It's like a powerful game that you can play to create rad designs.

Rolling Out The Great Eight - A Design System To Level Up Your Designs
Adopting Options For The Great Eight

Let’s Start Using Great Eight 

Let’s start by talking about a desktop or a bigger type of design.

If you want a nice amount of white space vertically between your sections, you would use 160px. That is 160/8 = 20 units of 8px. If 160px is too much, then simply work backward in units of 8px. So, 152px, 144px, 136px etc as other options to choose from when designing your vertical rhythm. 

Once you have found the optimal vertical spacing between sections, write that number down - that is your vertical spacing between sections for giant screens. You have officially created your first design rule for your design system. Congrats! Did you have fun knowing you have a set system to work in? Maybe it is just us?

Take that same principle above and work on different aspects of your design: outer margins, margins between a title and subhead, body copy, margins between your navigation logo, etc. AS you cement rules, keep jotting down your chosen values, and you will realize you have created quite the robust design system.

By using The Great Eight system, you take the guesswork out of designing. If you looking at the screen wondering what a margin should be between two elements, either reuse one of your established design rules or think in multiples of eight.

You can't go wrong. I mean, you can, but not terribly lol.

Rolling Out The Great Eight - A Design System To Level Up Your Designs
Rolling Out The Great Eight

Rolling Out

With UI/UX projects you will have multiple screens and states to design. The work can pile up, and can feel overwhelming. Usually, the initial page you design will establish many of the design rules you will want to follow for the other screens and states. 

Not only are you creating consistency in your design, but also creating less stress for yourself. 

As you keep using the Great Eight System, you can set up rules ahead of time or recognize patterns that have worked well in the pastand apply those to other designs. 

Here is an example of what I mean:

  • Big Screen General Rules 👇
  • Vertical margin between sections: 144px
  • Outer margin: 56px
  • Navigation top and bottom margins: 24px
  • Horizontal Margins in a multi-column section: 56px
  • Typography Lockup Rules👇
  • A big headline vertical to subheadings: 24px
  • Top subheadings vertical to a headline: 48px
  • A big headline verticals to subheadings to body copy: 24px, 40px
  • A body copy block vertical to call to action button: 48px

A significant portion of your design is done for you by using this system.

Small Screens - A Design System To Level Up Your Designs
Small Screens Adaptation Is Easy

What about adapting to smaller designs?

Good question. You will need to re-work elements. I have often noticed the outer margins and vertical spacings will need to be re-worked right away. You will just follow the above steps, document, create your rules, and get on with your day! 

Sometimes you can retain some of your smaller margin rules from giant screens if it does not look too puffy.

As always, if you need to come up with a rule, follow these steps:

  • Think in units of 8px.
  • Think in multiple units of 8px (16, 32, 48)
  • Re-use a rule from a previous pattern
Breaking The Rules Of The Great Eight Design System - A Design System To Level Up Your Designs.png
Breaking The Rules Of The Great Eight Design System

Can I break the rules?

You ask excellent questions! Yes. With anything in life, it is good to have a mastery of fundamentals to know what rules to break and how best to break them. 

Here are a few ways I will break the rules of this system to create some exceptional harmonies and rhythms:

  • I will use multiples of 4px for really fine-tuning!
  • I will even work in multiples of 2px for crazy fine-tuning.
  • For white space-heavy designs, I will take my vertical section spacing and halve it for the outer margins. So if I have 144px vertical spacing, I will use 72px outside margins. Or, just use the same 144px for outer margins to extra puffy.
  • I will even work in multiples of 2px for crazy fine-tuning.
  • For white space-heavy designs, I will take my vertical section spacing and halve it for the outer margins. So if I have 144px vertical spacing, I will use 72px outside margins. Or, just use the same 144px for outer margins to extra puffy.

I will use this system as a base for an initial margin, and then if something doesn’t feel right, I will optically adjust to create harmony. Depending on many aspects of your design, you may need to eyeball to create magic. But don’t forget to document your design implementation and add it to your design system rule as an exception!

Final Considerations

You may have many factors to consider when working with this system and your design. Here are some considerations rattling around in my brain:

Your typography may be chunky and need a little more spacing. That’s cool; give it more spacing.

You may have graphic elements that bleed into other sections vertically. That’s cool; you can have two sections colliding with each other. Use the Great Eight to space the section’s content from each other, or wing it and move your sections apart 8px at a time. Eyeball it, then document. 

Try not to be so strict. This system is an excellent baseline to create consistency and harmony. You can also break the rules here and there. It’s cool. Be a rebel. Just document it!

I hope this has been an inspiring idea and that it benefits your designs greatly. I will be providing a video version of the Great Eight in action on a design.

Have fun, byeeee!

Share This