Final Product In Use
Speed
Designers experienced a significant boost in speed. With 70% of the basic page items pre-designed and coded within the system, both designers and developers gained the freedom to concentrate on higher-priority tasks.
Consistency
The interconnected base elements facilitated simultaneous refinements across multiple apps, ensuring uniform style changes and updates with minimal design and tech efforts.
Focus
Previously, design reviews were laden with questions about component selection and location. The implementation of our new system eliminated these uncertainties, enabling designers to dedicate their focus squarely on addressing user problems.
Refactoring
While the initial project lacked adequate time for system development, it necessitated substantial refactoring work for developers. Nevertheless, the decision to revisit and incorporate these changes was pivotal for setting up the platform for future success.
As the director of a dynamic design team, I spearheaded the development of a robust design system that embodies our commitment to excellence. This meticulously crafted system streamlines our design processes, ensuring a cohesive and polished user experience across all products. It reflects not only our technical prowess but also our dedication to creating innovative and visually stunning solutions.
Primary
#et131a
rgb(231,19,26)
#c90106
rgb(201,1,6)
#041022
rgb(1,16,34)
#ffffff
rgb:255,255,255
Grays
#f5f5f5
rgb(245,245,245)
#d6d7da
rgb(214,215,218)
#999da3
rgb(153,157,163)
Accessibility
#f26900
rgb(242, 105, 0)
#195fd0
rgb(25, 95, 208)
#308406
rgb(48, 132, 6)
Filled Red
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Filled Dark
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Outlined Red
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Outlined Dark
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Text
Default
Button Name
Hover
Button Name
While Pressing
Button Name
Disabled
Button Name
Selected
Hover
Focused
Disabled
Selected
Hover
Focused
Disabled
Set
Hover
Dragging
Text
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Text + Helper
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Dropdown
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Dropdown + Helper
Default
Label
Placeholder text
Hover
Label
Placeholder text
Focused
Label
Placeholder text
While Entering
Label
Input text
Entered
Label
Input text
Error
Label
Input text
ERROR MESSAGE
Success Message
Label
Input text
Disabled
Label
Input text
Vroom Sans/62px/72px line/Regular
Vroom Sans/48px/64px line/Regular
Vroom Sans/42px/46px line/Regular
Vroom Sans/36px/40px line/Regular
Calibre/28px/40px line/600
Calibre/24px/32px line/600
Calibre/20px/32px line*/600
Calibre/18px/24px line/600
Calibre/18px/16px line/600
Calibre/16px/16px line/500
Calibre/14px/20px line/500
Calibre/24px/30px line/Regular
Calibre/18px/24px line/Regular
Calibre 16px/26px line/Regular
Calibre 14px/20px line/Regular
Calibre 10px/16px line/Regular
Shadow
X: 0px
Y: 0px
Blur: 6px
Spread: 0px
Opacity: 15%
Color: #000000
Outline
Padding: 32px 24px
Border style: solid
Border width: 1px
Border color: #d6d7da
Information
Navigation
Viewport
Symbolic
Social
Questions/Contact
Illustrative (Small)
Illustrative (Large)