![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg"><path d="M 83.017 338.209 L 16.714 338.209 C 1.335 338.209 -5.851 319.167 5.694 309.007 L 352.114 4.158 C 358.552 -1.507 368.236 -1.368 374.508 4.479 L 701.528 309.329 C 712.606 319.655 705.298 338.209 690.154 338.209 L 629.3 338.209 C 620.088 338.209 612.62 345.677 612.62 354.891 L 612.62 628.031 C 612.62 637.243 605.152 644.711 595.94 644.711 L 460.412 644.711 C 451.198 644.711 443.73 637.243 443.73 628.031 L 443.73 445.589 C 443.73 436.377 436.262 428.909 427.05 428.909 L 291.522 428.909 C 282.31 428.909 274.842 436.377 274.842 445.589 L 274.842 628.031 C 274.842 637.243 267.374 644.711 258.162 644.711 L 116.378 644.711 C 107.166 644.711 99.698 637.243 99.698 628.031 L 99.698 354.891 C 99.698 345.677 92.229 338.209 83.017 338.209 Z" fill="rgb(245, 245, 245)" height="644.7111231069853px" id="bPxo3qcTR" stroke-dasharray="" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4.17" stroke="rgb(245, 245, 245)" transform="translate(47.49 85.823)" width="706.8676896632352px"/></svg>)
Creating & Maintaining Design Systems
Creating & Maintaining Design Systems
Creating & Maintaining Design Systems
I was able to be a pivotal part of the creation and maintenance of both the consumer and the seller platform system. I will be talking about just the seller design system- Mystique, today as it was both scalable and responsive (both mobile & desktop)
I was able to be a pivotal part of the creation and maintenance of both the consumer and the seller platform system. I will be talking about just the seller design system- Mystique, today as it was both scalable and responsive (both mobile & desktop)
top flavours
top flavours
Visual Design, Design Systems
Visual Design, Design Systems
Visual Design, Design Systems
spice level
spice level
Product Designer
Product Designer
Product Designer
cook time
cook time
Oct ‘24 - Feb ‘25
Oct ‘24 - Feb ‘25
Oct ‘24 - Feb ‘25
best paired with
best paired with
Front-end Engineers
Front-end Engineers
Front-end Engineers
chef’s notes
chef’s notes
Created a scalable and responsive system with components that scale on a single code-base
Created a scalable and responsive system with components that scale on a single code-base
Created a scalable and responsive system with components that scale on a single code-base
Seller Design System- Mystique
Seller Design System- Mystique
Seller Design System- Mystique
Why create a design system?
Why create a design system?
Why create a design system?
Although very nascent as a platform, we decided to work on Mystique because of 3 main reasons-
Bring consistency
In-terms of structure (aligning work), brand language (recall) and accessibility (contrast)
Execution speed
Defining base atoms (colors, type etc) & molecules (components, states) for reuse.
Single code base
Helped us scale quickly and responsively for both mobile and desktop
Defining Atoms
Defining Atoms
Defining Atoms
Color palette
Color palette
Color palette
We went through our entire platform and our main aim was to make sure we dont inflate our design system. The colors were the first and foremost atom to be tackled- we looked into all our primary instances and accessibility and arrived at this.
We went through our entire platform and our main aim was to make sure we dont inflate our design system. The colors were the first and foremost atom to be tackled- we looked into all our primary instances and accessibility and arrived at this.
We went through our entire platform and our main aim was to make sure we dont inflate our design system. The colors were the first and foremost atom to be tackled- we looked into all our primary instances and accessibility and arrived at this.
Typography- fonts & lineheights
Typography- fonts & lineheights
Typography- fonts & lineheights
We used NOTO Sans for title and body as the typeface had to be universal and with a diverse font family (to increase scalability). We used the following font weights: Regular, Medium, Semibold (Body); Bold, Extrabold (Titles), Black & Displaybold (Headers).
We used NOTO Sans for title and body as the typeface had to be universal and with a diverse font family (to increase scalability). We used the following font weights: Regular, Medium, Semibold (Body); Bold, Extrabold (Titles), Black & Displaybold (Headers).
We used NOTO Sans for title and body as the typeface had to be universal and with a diverse font family (to increase scalability). We used the following font weights: Regular, Medium, Semibold (Body); Bold, Extrabold (Titles), Black & Displaybold (Headers).
Molecules: Components
Molecules: Components
Molecules: Components
Buttons
We defined our CTAs/ Buttons given these will be our primary action drivers and they play a very crucial role in a business/ functional/ seller-facing platform
We defined our CTAs/ Buttons given these will be our primary action drivers and they play a very crucial role in a business/ functional/ seller-facing platform
We defined our CTAs/ Buttons given these will be our primary action drivers and they play a very crucial role in a business/ functional/ seller-facing platform
Avatars/ Images
This component helped us define the visuals in a much more scalable and clean fashion. We followed a 10-100 scale which helped us a define 10 variable sizes, which will help us cover all use-cases, after doing a detailed audit of our platform.
This component helped us define the visuals in a much more scalable and clean fashion. We followed a 10-100 scale which helped us a define 10 variable sizes, which will help us cover all use-cases, after doing a detailed audit of our platform.
This component helped us define the visuals in a much more scalable and clean fashion. We followed a 10-100 scale which helped us a define 10 variable sizes, which will help us cover all use-cases, after doing a detailed audit of our platform.
Input fields
Input fields
Input fields
Next, we defined how input fields would function, since seller facing platforms require a lot of information collection. We defined two types of input fields, one stroke- cleaner, sleeker (lesser real estate); and box input field for desktop where we have more real estate.
Next, we defined how input fields would function, since seller facing platforms require a lot of information collection. We defined two types of input fields, one stroke- cleaner, sleeker (lesser real estate); and box input field for desktop where we have more real estate.
Next, we defined how input fields would function, since seller facing platforms require a lot of information collection. We defined two types of input fields, one stroke- cleaner, sleeker (lesser real estate); and box input field for desktop where we have more real estate.
Variant Pills & Tags
Since we are an e-commerce platform, ofcourse one of the most common components to be tackled was product attributes/ variant identification pills. We defined how a non-added vs an added product would look.
Since we are an e-commerce platform, ofcourse one of the most common components to be tackled was product attributes/ variant identification pills. We defined how a non-added vs an added product would look.
Since we are an e-commerce platform, ofcourse one of the most common components to be tackled was product attributes/ variant identification pills. We defined how a non-added vs an added product would look.
