Frontend Horse Design System

Tack /tak/ noun: equipment used in horseback riding, including the saddle and bridle.

Watch how we built this design system and made a spooky Halloween theme!

• Let's Make a Design System
• Halloween Spooktacular

Visual Style Audit

A visual style audit will help us narrow down our design decisions into a manageable set of values and surface opportunities for accessibility and performance enhancements.

• CSS Stats (before)
• CSS Stats (after)
• Lighthouse Chrome Extension
• Lighthouse Firefox Extension

Color

Color names include a numeric value. Much like font weights, these numbers help us distinguish the relative lightness between values more easily than with names alone. We can also make general rules about color pairings to ensure accessible color contrast ratios. Colors ending in -600 or above will generally be accessible paired with colors ending in -200 or below, while colors in between have very specific use cases.

• Color Converter
• Contrast Checker
• HSL Palette Generator
• Contrast Grid
• Coolors

Color Palette

Type

When creating type styles, the size values should be far enough apart to create a distinct heirarchy with as few sizes as possible. Heading sizes may overlap with body text sizes, but keep those instances to a minimum.

Frontend Horse's type styles only include font size and line height pairings. Heading styles use Recoleta 800 and text styles use Poppins 400. Colors and margins can be applied with utility classes, to further distinguish blocks of text.

Headings

Body Text

Spacing

As with type, we want our spacing values to be far enough apart to create a distinct heirarchy while using as few values as possible. Components have litle to no built-in spacing so that they can be reused in different contexts. Instead, we can apply space in the form of padding or margins using utility classes.

• Space in Design Systems
• CUBE CSS

Spacing Scale

• spacing-10

• spacing-15

• spacing-20

• spacing-40

• spacing-80

Terminology

Stack

Stack refers to vertical margins. Our CSS only adds margins to the right and bottom of elements to prevent margin collapsing. You could also call this block to align with CSS logical properties.

Flow

Rather than adding stack utilities to every element, we can apply a flow utility to their parent to apply a consistent bottom margin to each element in that container.

Inline

Inline refers to horizontal margins between elements.

Inset

Inset refers to the padding of an element. You can further specify if an element should have square (equal on all sides), squish (less vertical padding than horizontal) or stretch (less horizontal padding than vertical).

Icons

We can use an SVG sprite to call multiple instances of icons and style them independently with the <use> element. For components that use icons, we can URL encode them as background images to reduce the number of requests, baking them directly into our CSS.

• An Overview of SVG Sprite Creation Techniques
• SVGOMG
• SVG URL Encoder

Icon Set

• arrow

• discord

• twitch

• twitter

• youtube

Design Tokens

Design Tokens are a tech-agnostic method of storing our design decisions as key/value pairs — variables, basically. Tokens give us a shared vocabulary for describing visual style properties that translate across platforms. So while web, iOS and Android might use different values to express a color, when we are reviewing a design and talk about $color-red-600, we all know what that means.

Design Tokens allow anyone to make changes to their organization's visual styles without touching any production code. By using three layers of specificity, we can apply changes to our visual styles with varying amounts of precision.

Global Tokens

Global Tokens include all of the possible values in the system. The color palette, type scale, spacing values, etc. If we want to change the value of a color, we can do that here and it will change everywhere that token is used.

Contextual Tokens

Contextual Tokens describe how Global Tokens are used. They include common values that are used across multiple components, such as $color-background-brand. Contextual Tokens allow us to change the value of a token across multiple components.

Component Tokens

Component Tokens are values specific to a single component and can point to Contextual Tokens, Global Tokens, or even one-off values. Component Tokens allow us to make changes to a single component — changing the background color of the CTA button from red to blue, for example — without having to edit any CSS.

• What are design tokens?
• Atomic Design
• Simple Groupon
• Components AI Theme Builder

Components

We can distill a design down to the most atomic level of components. By combining component styles with utility classes, we can build complex new features with little to no extra styles.

The entire Frontend Horse homepage consists largely of text elements outlined above, as well as a text input, a button, and a card component. Everything else is done largely via the page layout and utility classes.

Text Input

Button

Card

The card styles only describe the container itself, including its border radius and background color. The contents within are styled with text and utility classes.

By not scoping the styling of the card's content to its styles, we allow for a wide variety of content inside the cards without having to stay on top of evolving product decisions in a large organization.

Utilities

Utility classes are single-purpose classes that we can add to components to modify the default styles or arrange them with other components to build larger features.

Utility classes fall into three categories:

Visual

Visual utilities modify the default styles of a component.We can use them to apply different colors to text, backgrounds or borders based on our design tokens. They can also be used to apply styles such as border radius or text alignment.

Spacing

Spacing utilities allow you to apply padding and margins to elements to help distribute whitespace and create a clear visual hierarchy using the system's spacing values.

Layout

Layout utilities include flexbox and grid properties to organize groups of components. Not to be confused with page layouts, described below.

Layout

Rather than using a generic 12-column grid, we can create unique layouts for each page view, or smaller layouts that can be nested within, using CSS grid. Container queries will make it even easier to create responsive components within our layouts.

• Gridless Design

Design System Tips

Start with design tools

It's extremely hard for a design system to get traction if it all lives in code. The sooner you can apply your system in design tools such as Figma, the more consistent deliverables will translate into the product, regardless of how far along the technical implementation is.

Start small

It's easy to feel overwhelmed by the prospect of starting a design system. Start with one aspect of the visual styles, like color, before moving on to building out components.

Let the product inform the system

Rather than making a checklist of things you want in the system, let the next feature on the roadmap inform what goes in the system. Each successive feature will be easier to build because you'll be able to leverage all the previous work on the system.

Sell the results not the system

As you are able to apply the system to the product, you'll see benefits in the form of increased consistency and productivity from both designers and developers. Rather than trying to sell the system itself to stakeholders, make the system a part of the process and the results will help you get more resources and broader adpotion of the system.

A design system is a product, not a project

If you treat your design system as a project with a finite end date, the system will quickly fall out of date. A design system should ideally be treated as an internal product, with ongoing full- or part-time collaboration between design, engineering and product.

Use the system as a trojan horse for accessibility and performance

If you have a hard time convincing the powers that be that accessibility and performance are as important as shipping new features, use the design system to subtly bake improvements into the system. It's better to ask forgiveness than permission, right?

Additional Resources

• Clarity Conference (Oct. 27–29, 2021)
• Design Systems Repo
• Design Systems (Figma)
• Design Systems by Alla Kholmatova
• Expressive Design Systems by Yesenia Perez-Cruz
• Design Systems Handbook by Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield
• Nathan Curtis on Medium