Granular System Decisions

Purpose

  • What is the goal of our design system?
  • Why is that goal important?
  • How will the design system help us?
  • Who is the design system for?

Metrics and area of improvement

  • Faster builds, through reusable consistent components and shared rationale
  • Better products, through more cohesive user experience and a consistent design language.
  • Improved maintenance and scalability, through the reduction of design - tech debt
  • Stronger focus for the product team, through tackling common problems so the team can concentrate on solving users need

Setting Up

Type System

  1. Set a base font size. The base font size is the size of your body copy and is the number that the rest of your type system will be built from. Choose a size that makes for a comfortable reading experience. Take your “size” lever into account here. If your elements are generally large, consider using a higher base font size, like 18px. If your elements are generally smaller, go with a smaller size (though I wouldn’t go any lower than 14px).
  2. Set a scale. Next, create a type scale. Modular type scales size scales for typography based on musical interval ratios. Type scales are helpful for making your type system feel harmonious and proportional. To make a type scale, you take your base font size and multiply that number by a numeric ratio, such as 1.5. You don’t need to do this math on your own. The site modularscale.com is a calculator that allows you to set your base font size and then outputs a variety of type scales based on the ratio you’ve chosen (FIG 3.12).
  3. Set your line height. Line height is the distance between lines of text. A smaller line height will make text appear denser; a higher line height will make it seem airier.

Spacing system

  1. Setting a base number. Set a base number that the rest of your scale will be built from. Many teams build their spacing on a unit of 4px because it’s easily divisible. Even if you choose 4px as your base number, it doesn’t have to be the first number in your scale. You could choose 2px as your first number if you need really tight spacing or with 8px if you want looser spacing.
  2. Setting the scale. The next step is to decide how the spacing system will scale from your base number. Your main options are to choose between a linear scale and a nonlinear scale. • With a linear scale, every step is a fixed increment: 4, 8, 12, 16, 20, 24, etc. • With a nonlinear scale, the system relies on a ratio as it increases, just like the modular scale we used for type. A nonlinear scale based on a unit of 4 could look like this: 4, 8, 16, 32, 48.
  3. Name your space intervals. Giving your space intervals clear names will make it easier for people to use the scale. Space is perhaps the element that designers and developers go back and forth on the most. The good news about having a spacing system is that it gives both disciplines a common language to work from. You could give the space descriptive names, like compact, cozy, and airy, but you would run out of names quickly. Extra cozy? Super airy? Or you could assign T-shirt size names, like extra small, small, medium, large, and extra-large. That works if you have just a handful of space intervals. Space numerically, like Space 0 = 0px, Space 1 = 4px...
  4. Define space within and between components. The other way to help other designers and developers use your space scale is by explaining how to apply it to the space within and around components.

Color system

  1. How should color direct attention? Color directs attention in a few ways. It signals actions users can take on the page (button and link colors). It conveys the urgency of notifications (success, warning, and error colors). And it communicates interactive states (focus states, in-line validation). How many colors do you want to use to signify action?
  2. How should your foreground and background colors interact? The bulk of our user interfaces are neutral colours. Our neutral tones can have a major influence on how our action colors are perceived (FIG 3.15). I recommend experimenting with your neutral tones to understand how shifting the hue of your grays will impact the rest of your page.”
  3. How prominently should color be used? Then, consider how prominently color should be used. You may find that a style that works well in isolation doesn’t work when it’s in context.