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!
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.
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 Palette
-
white
backgrounds
hsl(0, 100%, 100%)
#ffffff -
gray-200
borders, backgrounds
hsl(30, 6%, 90%)
#e7e6e4 -
gray-600
subdued text
hsl(30, 6%, 45%)
#7a736c -
gray-700
body text
hsl(30, 6%, 25%)
#44403c -
red-400
brand text, backgrounds, borders
hsl(4, 99%, 65%)
#fe594d -
red-600
brand text, backgrounds, borders
hsl(4, 99%, 45%)
#e41001 -
blue-600
accent text, backgrounds
hsl(216, 74%, 33%)
#164892 -
yellow-100
backgrounds, inverse text
hsl(40, 82%, 98%)
#fefbf5 -
yellow-400
inverse text on accent
hsl(47, 95%, 56%)
#f9cb25 -
green-200
alternate background
hsl(30, 6%, 45%)
#c9ece4
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
Techniques to get you galloping
heading-1 80px/88px
Techniques to get you galloping
heading-2 60px/66px
Techniques to get you galloping
heading-3 45px/49.5px
Techniques to get you galloping
heading-4 25px/27.5px
Techniques to get you galloping
heading-5 18px/19.8px
Body Text
Each month we invite four creative developers to build fun and whimsical site around a theme. Each week a developer builds out one component using a skill or technology they're an expert in.
text-largest 20px/30px
Each month we invite four creative developers to build fun and whimsical site around a theme. Each week a developer builds out one component using a skill or technology they're an expert in.
text-large 18px/27px
Each month we invite four creative developers to build fun and whimsical site around a theme. Each week a developer builds out one component using a skill or technology they're an expert in.
text-medium 16px/24px
Each month we invite four creative developers to build fun and whimsical site around a theme. Each week a developer builds out one component using a skill or technology they're an expert in.
text-small 14px/21px
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.
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.
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.
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.
![](/assets/images/featured1.webp)
Thinking Outside the Box with CSS Grid
The support of CSS Grid in modern browsers has opened up layout possibilities like never before. We can create more complex designs with…
Featuring: Andy Barefoot
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.
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?