Case Study
Ayasdi - Core Design System
Project Info
While designing multiple products for Ayasdi, I created this design system and guide to house a living inventory of UI components. Anyone working on Ayasdi products was able to reference this guide and its associated InVision page or sketch cloud page for specifications, copy component-specific CSS or download actual sketch components.
The Challenge
To refine Ayasdi’s visual language to be simpler, more concise, and use color in a communicative way.
This design system expedited my process as well as becoming a style reference for both local and offshore developers.
Client
Ayasdi
Dates
05/2018-12/2018
Responsibilities
– Design (visual and interaction)
– Hi-fi prototyping (final designs for approval and handoff to dev)
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
The Approach
Develop a single, unified system that was transferable across all platforms and devices as well as having the majority of components function in either a dark or light theme.
The color system was based on Ayasdi’s logo colors.
Ayasdi orange became a color of immediacy to be used for important messaging as well as CTAs.
The cyan was then derived from orange as a complementary secondary color.
The rest of the palette was created using combinations in Adobe’s Color tool using orange as a base.
The Stark accessibility Sketch plug-in was applied to monitor contrast for all usage of type.
The chart colors were also chosen to accommodate color blindness.
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
The typography system using the Google typeface “Roboto”.
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
Form fields and other input UI
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
Dropdowns and tables
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
Tables with specific states and interactions.
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
Callouts
![](https://bobulated.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
Button types