Agave Design System
Agave Component Library
Agave Component Specs
Creating my own personal, reusable design system.
After designing using multiple different brands' design systems, I wanted to create my own design system from the ground up. My goal is to create a broad, reusable design system that I can utilize in my own personal design work, as well as brush up on my component-building skills within Figma that I otherwise might not have the chance to experiment with.
Role
UX/UI Designer
Software
Figma
Year
2023
UX/UI Methodologies & Techniques
UX/UI research
Responsive variant building
Component specs
Icon library
Color & typography style guides
Prop naming structure
Foundations
Every design system requires a strong foundation in order to successfully translate into the design itself, and Agave Design System is no exception. Ideally, creating guidelines for a proper layout structure for both mobile and web designs is essential to allowing for cohesive designs across an experience. First and foremost, the user should be at the center of every step of the decision-making process when creating a user-centered product like a design system.
Color
Of all the different types of foundations to consider when creating a design system, color has so much more of a psychological impact than most realize. One thing my Marketing degree has taught me is that colors (and the tone of those colors) can subconsciously make users feel different things.
When it comes to designs everywhere, the types of colors used can be the difference between making a consumer want to see more of your product, and not wanting to look at your product anymore because the colors are displeasing.
Background
When determining the background colors to use, I wanted to keep a neutral base that is accessible with all other element colors for both light and dark surfaces.
I created both primary and secondary background colors for each surface to broaden the opportunity to give components like Cards, Menus, Input Fields, etc. more depth when used on top of these backgrounds.
Elements
When choosing my elements color styles, I wanted to make sure that the colors I chose reflect a calm, relaxing atmosphere that is easy for the user to see and use.
For my main accent color, I chose a cool teal which, according to Rasmussen University’s “The Graphic Designer's Guide to the Psychology of Color”, is “generally associated with nature, it also is connected with soothing, calming and health-giving feelings.” Not only that, but this shade of teal also reflects the actual color of the agave plant, the name of this design system!
As for my supporting color, I decided to go with a dusty rose in which “Pink is also thought to evoke a certain sense of calm in viewers,” also according to Rasmussen University.
Feedback
The feedback colors for Agave were inspired by my desire for a softer, more welcoming palette to inform users, rather than the more commonly-used bright & harsh tones you often see for error, warning, info & success states.
Interactive
Wanting to maintain the use of soft greens to support my main element colors, the use of a slightly darker green in an active state is subtle, yet effective.