Why Manifold uses an 8pt grid
Warning! Design nerding-out below! Turn back if you don’t care!
TLDR: Manifold products will now use an 8pt grid because it’s easy, consistent, and provides constraints. This applies to visual mockups as well as front-end implementation.
For most of Manifold’s product lifespan our design system has lacked a grid. We use our designer’s eye to nudge elements around. While we might create things that are visually appealing, this is ultimately inconsistent, especially when integrating into the product’s front-end. Introducing a grid that benefits both designers and front-end engineers: the 8pt grid.
Let’s take a step back.
What’s a grid anyway?
There are no stupid questions. There are many different types of grids. Column grids align content horizontally (a la Bootstrap or Material Design), baseline grids for typsetting, modular grids for print layout, and so many more. What we’re focusing on here is a layout system grid: a grid using a set pixel increment to assign dimensional values to elements.
Our 8pt grid is a pixel framework for creating consistent UI.
So why 8pt?
Our goals for selecting a system
An important note, this system is for the Manifold product line (i.e. Dashboard), not marketing web material (i.e. manifold.co).
So, there are a lot of grid systems to pick from… What do we want out of ours?
- 📐 It should enforce consistency between components, products, resolution, screen size.
2. 🛠️ It should be simple to implement in CSS.
3. 🖥️ It should simplify decision making for screen design.
4. 😎 It should look good.
The 8pt grid as a solution
Now for the good stuff. The 8pt grid is exactly what we need! It checks all our boxes for a layout system grid!
Here’s how Bryn Jackson defines the 8pt grid:
Use multiples of 8 to define dimensions, padding, and margin of both block and inline elements.
Consistency
Our first goal was to create consistency. 8pt does this wonderfully. Not only does it give us a defined spacing value, 8 works especially well because of its divisibility. It’s important to note that we use the suffix “pt” since our grid scalable based on device resolution.
Because it’s an even number, 8’s multiples fit seamlessly into our workflow. We design all our mockups at 1x and export any assets at the correct integer multiple for higher resolution screen sizes: @2x, @3x, @4x, etc. Using an even number avoids blurry assets and half pixels.
Implementation in CSS
Using multiples of 8 makes it super easy to implement in CSS. In fact, we’ve already converted the dashboard without too much hassle at all. Most of the elements are already sized close enough that switching the existing layout variables out for our new grid system is fairly seamless.
Simplify visual design decisions
A bit of an esoteric goal, but important nonetheless. As designers, we leave certain things (like spacing, sizing, etc) up to our “design eye.” This leads to inconsistency since we all have a different eye. Using an 8pt grid allows us to space and size things evenly and provide an example for each new designer onboarded.
Via Bryn Jackon again:
By removing 7 of every 8 spacing options, you reduce the amount of fiddling available to you and subsequently reduce speed to code.
It reflects our brand! It looks good!
8 just makes sense. It gives enough breathing room and provides flexibility for all of our UI components and pages. Because we avoid a hard grid approach in favor of a soft grid, we space all elements relative to each other, not grid elements. The spacing of 8 allows us to keep things consistent without having to prescribe an exact workflow, blending our designer’s eye with a grid approach.
Putting the 8pt grid in action
Implementation for prototype design
Our main Dashboard.sketch mockup system and library is now converted to an 8pt grid. This will be the main sketch file moving forward. Stay tuned for another post that will further detail how to use the sketch library, invision prototype flows, and our new design system library.
Here’s the grid in action:
Sketch settings
In order to keep consistent, each designer working inside the grid should keep their settings the same.
- Install StickyGrid (If you’re not yet, use SketchRunner to install plugins)
- Set your small and large nudge settings to 1 and 8, respectively. Like this.
- Set your layout settings to our new 4pt baseline grid. Like this.
- Set your grid settings to 8px. Like this.
Implementation for front-end
Because our base font-size is 16px and divisible by 8, that makes our layout variables easily replaceable by rems. Example: to space something by 8px, you would use .5rem. To space by 32px use 2rem. This is easily translatable from mockups since you have access to the visual 8pt grid.
Further reading
