Design System

About

Design is an iterative process. Establishing unified design practices and a clean code repository helps us cut down on wasted time. Here is my exploration into creating a system for this site. It’s ever evolving and I’m forever learning more.

Though this guide is catered towards my site, its principles can be applied across all web design projects. It combines design best practices from U.S. Web Design Standards and various design systems. My system takes its own liberties and artistic freedoms- but at its core aims standardize foundational design elements to build smart and clean components.

Color

Color sparks emotion and feel. Depending where colors are used or how they’re combined, different colors can represent different things. Pink paired with blue could represent a baby gender reveal. Change that blue to black, and all of the sudden you’re at a punk rock show.

It is important when designing for the web that color choice aids the user in making decisions and receiving feedback. More than just a brand element, color can be used to create emphasis, draw attention, and communicate a message or tone.

Brand Colors

The following colors have been chosen to represent my brand. I have given them theme tokens with the actual color name. Seeing that I am the only one manipulating this system it is important that I can easily call the color for what it is. When thinking about building a larger system, consider using broad token names that can be understood system wide. Instead of @blue, consider @secondary. From there applying color states and shades can be more easily handled.

In a larger system, breaking up brand colors into primary, secondary, and accent helps when using colors to draw attention, give feedback, or give the product branding.

Token Value Color
@black #343437
@white #FFFFFF
@pink #FC615D
@lightpink #FD8A81
@teal #2A6652
@lightteal #94E0C1
@blue #0071BC
@green #1EB051
@yellow #FDBE41
UI Colors

The base colors or user interface colors as I like to call them should support the design. These colors are intended for non-decorative text, backgrounds, and interface elements.

Token Value Color
@ui-1 #F9F9F9
@ui-2 #F4F4F5
@ui-3 #E7E7E9
@ui-4 #DADADC
@ui-5 #C0C0C3
@ui-6 #A6A6AB
@ui-7 #8C8C92
@ui-8 #66666B
@ui-9 #4D4D51
@ui-10 #343437
@ui-11 #28282A
@ui-12 #0F0F10
@pure-black #000000

Typography

Having well written content means nothing if it is illegible. Reading the page content is the primary way a user will absorb information. Having good typography and understanding typesetting for the web will make for a more enjoyable reading experience. If done well, the user won’t even know it’s happening.

Typeface

Choosing a font family should be one of the first type variables to consider. Not only will it influence the type of content you are delivering, but it will become the first step in creating a textual hierarchy. Headings, body copy, and interactive content (buttons, links, etc.) should be clearly different and easy for the user to absorb.

Token Value Example
@sans Roboto

Body Copy

@slab Roboto Slab

Body Copy

@condensed Roboto Condensed

Body Copy

@mono Roboto Mono

Body Copy

Type Scale

A 11pt font size may be fine in a magazine but on the web, it’s a different beast. We must consider that our audience will be viewing our content on varying devices and sizes. By using rem’s we can set the type relative to a base type unit. Default for this site, and most browsers is 16. This means at 1rem we are reading the text at 16pt. From here we can use type scaling tools to generate a scaled ratio based of 16(1rem).

I’ve used a major second type scale to generate 17 sizes ranging from about 9px to 65px (not pictured) to create a system scale. From there, using the tokens below I broke out 10 sizes and assigned them T-shirt size tokens. This becomes helpful when changing type size at different media queries.

Token Value Example
@4xl 4.11rem =~ 65px

Typography

@3xl 3.247rem =~ 51px

Typography

@2xl 2.566rem =~ 41px

Typography

@xl 2.027rem =~ 32px

Typography

@lg 1.602rem =~ 25px

Typography

@md 1.424rem =~ 22px

Typography

@sm 1.125rem =~ 18px

Typography

@xs 1rem =~ 16px

Typography

@2xs 0.889rem =~ 14px

Typography

@3xs 0.79rem =~ 12px

Typography

Font Weight

Font weight becomes a useful tool to create hierarchy, emphasis, and emotion. By assigning the weights to tokens named based of the Google font weights themselves, it becomes much easier to bridge the gap between what the designer is seeing in Sketch (Regular), and what the developer is building into the site font-weight: 400;

Token Value Example
@thin 100

Body Copy

@extralight 200

Body Copy

@light 300

Body Copy

@regular 400

Body Copy

@medium 500

Body Copy

@semibold 600

Body Copy

@bold 700

Body Copy

@extrabold 800

Body Copy

@blacktype 900

Body Copy

Letter Spacing

Letter spacing is another useful tool to aid in readability. Typically for body copy, it is best practice to default not adjust the spacing. However, looser letter spacing can be useful when the type size gets small or are in all caps. A tighter letter spacing may be needed for larger headings where legibility is easier.

Token Value Example
@spc-neg-3 -0.03em

Body Copy

@spc-neg-2 -0.02em

Body Copy

@spc-neg-1 -0.01em

Body Copy

@spc normal

Body Copy

@spc-pos-1 0.025em

Body Copy

@spc-pos-2 0.1em

Body Copy

@spc-pos-3 0.15em

Body Copy

Line Height

Line height. Get it right and no one will notice. Get it wrong and your users will notice. The line height tokens below are used accross this system. Most copy between 12px and 20px pairs nicely with a line height of 1.35 to 1.62. For larger headings that may require less space when stacked, a line height of 1.2 works nicley. Using a line height of 1 is specifically reserved for buttons, while 1.5 is intended for larger pull quotes or artistic typography. Enjoy some of my favorite quotes as examples.

Token Value Example
@height-1 1

"Design won't save the world,
but it may make it worth saving."

- Unknown

@height-2 1.2

"I am a great believer in luck, and I find the harder I work, the more I have of it."
- Thomas Jefferson

@height-3 1.35

"Life isn't about waiting for the storm to pass; it's about learning to dance in the rain"
- Vivian Greene

@height-4 1.5

"Get action; do things; be sane; don't fritter away your time; create; act; take a place wherever you are and be somebody; get action."
- Teddy Roosevelt

@height-5 1.62

"It had long since come to my attention that people of accomplishment rarely sat back and let things happen to them. They went out and happened to things."
- Leonardo da Vinci

@height-6 1.75

"By definition: 50% of any room is below average. The question is at what? We are all good at some things and not good at others. Know what you are good at. Do it. Strive to better those things you are not..."
- Unknown

Type Styling

Similar to creating character styles in a design software, styling your HTML type tags and creating CSS classes at the system level can help standardize your site’s typography and make editing and overwriting styles easier.

For this system, I created a .heading-# class for every h1-h6 and standard HTML tag which allowed me to style unique instances of text nested using LESS throughout the site. It makes overwriting the color easier, without having to make a brand new class. By creating a .heading-1 in addition to an h1 allows me to apply the same text styling as an h1 to say an h6. This keeps with 508 best practice and allows for screen readers to tab through content easier.

Display and Heading Styles

Below is a list of this system’s unique headings.

Class Example
display-1

Display 1

display-2

Display 2

heading-1

Heading Level One

heading-2

Heading Level Two

heading-3

Heading Level Three

heading-4

Heading Level Four

heading-5
Heading Level Five
heading-6
Heading Level Six
Body Styles

.body-3 by default is the same as a p tag which is the 1rem, base type style. By creating varying body styles, it allows for p tags to be easily overwritten when different body copy hierarchy is needed.

Class Example
body-1

Body Copy

body-2

Body Copy

body-3

Body Copy (default)

body-4

Body Copy

link Link
utility Utility Text
descriptor-1

Description

Spacing

“Ahhhhhh, white space.” Space creates relationships and can be used to help clearly set apart certain content from the rest and minimize visual clutter. Having a spacing system is crucial to standardizing a website. By tokenizing px or rem values, a spacing system ensures your margin and padding spacing stays unique and consistent to your system.

Why does spacing matter?

Consistent alignment and spacing between elements is paramount for good UI design. When space is used appropriately, it allows a page to create a general flow and balance, which in turn helps communicate the intent of the design.

  • Space creates relationships - Space can be used to group associated information together, or separate unrelated elements. This helps create distinct content sections without having to use lines or other graphical elements as dividers.
  • Space helps establish hierarchy - The more space around an object, the more the eye is drawn to it. Elements that have more spacing around them tend to be higher in importance than elements that have less space between them.
  • Space allows for easier readability and scannability - Too much dense information can be disorienting and overwhelming for a user. Using white space effectively can reduce visual clutter and help with information processing by allowing the user's eye to rest.
Using the spacing tokens

This system relies heavily on USWDS’s 8px space scale. Again, remember that our default rem value is set to 16px. Each token becomes a multiple of 8. So, @spacer-1 will equate to 8px or .5rem. As long as you know your times tables for 8, calculating the pixel value for your spacing becomes easy. By creating a tokenized system, we can change or add spacing sizes.

In instances where @spacing-105 is used, the “0” represents “.” So, “105” is equal to “1.5rem.”

Token Value Example
@spacer-0125 .0625rem = 1px
@spacer-025 .125rem = 2px
@spacer-05 .25rem = 4px
@spacer-1 .5rem = 8px
@spacer-105 .75rem = 12px
@spacer-2 1rem = 16px
@spacer-205 1.25rem = 20px
@spacer-3 1.5rem = 24px
@spacer-4 2rem = 32px
@spacer-5 2.5rem = 40px
@spacer-6 3rem = 48px
@spacer-7 3.5rem = 56px
@spacer-8 4rem = 64px
@spacer-9 4.5rem = 72px
@spacer-10 5rem = 80px
@spacer-12 6rem = 96px
@spacer-16 8rem = 128px
@spacer-20 10rem = 160px

Grid

An integral part of every design, the grid helps organize and align content. On the web, grid goes one step further- it helps create responsive breakpoints that correspond to a device size or browser width.

This system relies heavily on the Flexbox Grid system. Flexbox provides a clean, 12 column, boilerplate template that can be easily modified. It provides simple CSS classes that can horizontally and vertically align divs, re-distribute the order of columns, and offset content.

Full
One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Grid Resources

Elevation

Applying a box-shadow to an element helps lift it off the page. Often useful for cards, UI elements, or hovers- drop shadows create depth. Similar to putting a sticky note over a piece of paper, applying a shadow to a card helps show that it is sitting atop the body. In a 2D space, this helps create context and allows for the user so see page interaction.

Token Example
@shadow-1
@shadow-2
@shadow-4
@shadow-3
@shadow-5
@shadow-6
Elevation Resources

Buttons

Buttons are the touch point between the audience and the interface. They let the user know which elements can be clicked on. They are an interactive call to action and should be clear, but not overwhelm the design. By designing different button states we can let the user know what that button is going to do.

UI Elements

Under construction...

Form

Code Snippit
color: @black;