PRPL 2.0
Stash's powerful 3-platform design system.
The problem
Stash's design system was extremely limited.
We didn't have much to work with.
Lack of foundations.
Only 12 colors, 8 type styles, and a few components here and there.
Falling behind.
Many of our major competitors had been making strong investments in visual design.
Zero documentation.
There was constant back and forth between design and eng on how patterns were used.
Not much of a system.
Many things weren't reusable, and the component libraries were chaotic.
Getting started
We needed to create a clear path forward.
A system isn't born overnight.
1
Identifying our existing pain points.
There was no use creating a new system if we didn't know what was plaguing our existing one. We spent time coming up with the key items we wanted to change.
2
Establishing a new set of principles and foundations.
Once we were aligned on what we wanted to change, we set out to construct a new visual language system. A small team of designers spent many nights and weekends perfecting the vision we had for the product.
3
Socializing our proposal.
A lot of the changes we were proposing were dramatic departures from our current visual language. We'd need buy-in across the organization if we wanted to make our vision a reality.
Core themes
Simplify literally everything.
Less really is more.
Use color intentionally.
Color was used very liberally in our old system, and it was clear that it held no value. We agreed to reserve color for instances where we wanted to cue the user's attention.
Lean more on spacing.
Our existing system built hierarchy through dividers, color blocks, cards, cells, elevation, and more. We wanted to lean more on white-space to let our pages breathe.
Mimic natural patterns.
Things progress from right to left, elevated things have shadows, removing cognitive guess-work will make our system feel cohesive with things customers are accustomed to.
New foundation
Color.
Perfectly pristine palettes.
Two new palette systems.
A new 3-color system for use in the product and an extended palette for brand.
3 theme support.
Colors were built to scale across three core themes: light, highlight, and midnight.
Token system.
A system of global, functional, and component tokens to support scalability.
Accessibility first.
Improved color contrast ratios across all our product experiences.
New foundation
Motion.
We like to move it, move it.
Fluid motion system.
Spring-based interactions for a more unique, natural feel.
Static motion system.
Determined values for duration, easing, and delay.
Microinteractions.
Subtle feedback confirmation.
Templated patterns.
Similar things move the same way.
The rest
Other foundations.
Best of the rest.
Type.
18 sizes to support mobile and desktop. New styles introduced to give designers more flexibility.
Spacing.
8 point spacing system to create visual hierarchy between elements.
Layout.
How our pages come together. Different page structures dictate their functions.
Object styles.
Elevation, borders, radii, and shadows. How our components present themselves.
Taking notes
Documentation.
The source of truth.
Documentation site.
A place to reference all our usage and technical documentation.
Technical documentation.
Explicit documentation for engineering handoff.
Usage documentation.
Set of guidelines for designers to adhere to.
Figma organization.
A collaborative space between design and engineering.
