Pasta Design System
Pasta is a token-based design system developed by myself and the design team at Yummly to improve the overall efficiency across the entire organization.
The problem
Before the creation and implementation of the Pasta Design System, Yummly was facing inefficiencies with its processes of maintaining and expanding the product.
1. An inconsistant experience
Having to maintain the experience across three platforms (iOS, Android, and web) became inefficient.
2. Incorrect brand voice
The brand look-and-feel began to lack cohesion between all platforms.
3. Development effort
Lack of reusable UI elements lead to a bloated and hard-to-maintain code base.
Solution and approach
A token-based design system called Pasta.
With a design system, designers and engineers can more smoothly participate in the product strategy by documenting design choices and decisions, creating a shared source of truth for the entire organization.
Why tokens?
- Yummly designers can abstract their choices, such as spacing, sizing, and color as reusable constants inside of their design files.
- Tokens can also be used to manage brand assets and decisions, such as color palettes, themes, and typography.
- Tokens can be efficiently shared with developers from a source of truth, so that designers and engineers are speaking the same language.
Atomic structure of Pasta
Inspired by the Atomic Design Principle, Pasta is separated into three categories.
Primitives
Designer choices abstracted as tokens and reusable constants inside of our design tools.
Color
Colors were broken up into two distinct palettes: the core palette, and the semantic palette. Each palette has a specific hue index by the tint for shade value. Gradients were also specified as a color primitive.
Typography
Typographic styles were based off of a minor third scale to help create a harmonious rhythm and to create a clear hierarchy in all text styles.
Spacing and sizing
Spacing was set based upon the typical 8 point grid system, meaning every spacing/sizing value is divisible by 8. This is helpful to create standardized space and visual rhythm.
Elements
The basic interface building blocks, such as buttons, text input, and form elements.
Patterns
An interface that combines Primitives and Elements to create more complex interactions.