Design System
Creating a unified design system to bring consistency across Builder.ai products, improving efficiency in design tasks by 80%.
Design System
Creating a unified design system to bring consistency across Builder.ai products, improving efficiency in design tasks by 80%.
Status
Ongoing
Timeline
Jan 2024 - Present
Tools
Figma
Team
Chandan, Deepanshi, Prachi, Syed and Tushar
My Role
Design Tokens • Toolbar • Tooltips • Cards • Mockups • Colour • Font • Buttons • Side Navigation • Header • Natasha
Status
Ongoing
Timeline
January 2024 - Present
Tools
Figma
Teams
Chandan [Design Manager] Deepanshi [Product Designer] Prachi [Product Designer] Syed [Product Designer]
Tushar [Product Designer]
My Role
Design Tokens • Toolbar • Tooltips • Cards • Mockups • Colour • Font • Buttons • Side Navigation •
Header • Natasha
Design Tokens • Toolbar • Tooltips • Cards • Mockups • Colour • Font • Buttons • Side Navigation • Header • Natasha
The Problem
Builder.ai’s ecosystem includes over 15 products, but they felt disconnected. During an audit, I found major inconsistencies in components like side navigations, headers, and cards. When I spoke with designers, they shared their frustrations: the current design system didn’t meet their needs, so they often had to create components from scratch, which took a lot of time. Colours didn’t have clear purposes, fonts and components were outdated, and the documentation was limited. It was clear that we needed to start fresh with the design system.
The Goal
The Problem
Our main goal was to collaborate and design cohesive, consistent components across all 15+ products, built to cover all use cases. We aimed to help our team of six designers align seamlessly, save time, improve efficiency, and simplify onboarding for new team members at Builder.ai.
Builder.ai’s ecosystem includes over 15 products, but they felt disconnected. During an audit, I found major inconsistencies in components like side navigations, headers, and cards. When I spoke with designers, they shared their frustrations: the current design system didn’t meet their needs, so they often had to create components from scratch, which took a lot of time. Colours didn’t have clear purposes, fonts and components were outdated, and the documentation was limited. It was clear that we needed to start fresh with the design system.
The Solution
The Goal
Over 100+ components created
We built a comprehensive library of over 100+ new components for the design system, including a single base card and header that catered to all products use cases. This allowed each designer to toggle components on or off, ensuring it could adapt to their specific use cases and their product.
Our main goal was to collaborate and design cohesive, consistent components across all 15+ products, built to cover all use cases. We aimed to help our team of six designers align seamlessly, save time, improve efficiency, and simplify onboarding for new team members at Builder.ai.
Design Token Implemented
I Implemented design tokens for the team with clear purposes and names simplifying their use for designers and developers.
The Solution
Over 100+ components created
We built a comprehensive library of over 100+ new components for the design system, including a single base card and header that catered to all products use cases. This allowed each designer to toggle components on or off, ensuring it could adapt to their specific use cases and their product.
Design Token Implemented
I Implemented design tokens for the team with clear purposes and names simplifying their use for designers and developers.
The Impact
The Impact
40% increase in component reuse
40% increase in component reuse
80% faster completion of design tasks.
80% faster completion of design tasks.
Final Design
Studio 4 Dashboard
Before
After
Final Design
Studio 4 Dashboard
Before
After
Final Outcome
Studio 4 Dashboard, Current Design System
http://www.Builder.ai.co.uk
Studio 4 Dashboard, New Design System
http://www.Builder.ai.co.uk
UIW Platform, Current Design System
http://www.Builder.ai.co.uk
UIW Platform, New Design System
http://www.Builder.ai.co.uk
Whiteboard Platform, Current Design System
http://www.Builder.ai.co.uk
UIW Platform, New Design System
http://www.Builder.ai.co.uk
Like what you saw? Read the extended case study on Notion.
View on Notion
Extended case study on Notion.
View on Notion
Highlights
Display
Display 1
Display 1
Display 1
Extra Bold
Bold
Regular
128
140
Display 2
Display 2
Display 2
Extra Bold
Bold
Regular
100
110
Display 3
Display 3
Display 3
Extra Bold
Bold
Regular
64
70
Display 4
Display 4
Display 4
Extra Bold
Bold
Regular
56
62
New Fonts
Interphases Pro was selected to refresh our brand with a modern and polished look.
Brand
brand-0
#FBF8FF
rgb(251, 248, 255)
brand-25
#f7f1fe
rgb(247, 241, 254)
brand-50
#efe6fd
rgb(239, 230, 253)
brand-75
#D9C4FF
rgb(239, 230, 253)
brand-100
#bf96f6
rgb(191, 150, 246)
brand-200
#a46bf3
rgb(164, 107, 243)
brand-UI
#a46bf3
rgb(164, 107, 243)
brand-400
#7d2bee
rgb(125, 43, 238)
brand-logo
#6200ea
rgb(98, 0, 234)
brand-600
#4500a4
rgb(69, 0, 164)
brand-700
#3c008f
rgb(60, 0, 143)
Green
green-0
#e6f2f0
rgb(230, 242, 240)
secondary-25
#e6f2f0
rgb(230, 242, 240)
secondary-50
#e6f9f1
rgb(230, 249, 241)
secondary-75
#96e8c4
rgb(150, 232, 196)
secondary-100
#6bdeac
rgb(107, 222, 172)
secondary-200
#2bd088
rgb(43, 208, 136)
secondary-300
#00c670
rgb(0, 198, 112)
secondary-400
#008b4e
rgb(0, 139, 78)
secondary-500
#014f41
rgb(1, 79, 65)
Tertiary
tertiary-0
#fdf0f3
rgb(253, 240, 243)
tertiary-25
#fdf0f3
rgb(253, 240, 243)
tertiary-50
#fdf0f3
rgb(253, 240, 243)
tertiary-75
#f6c0cf
rgb(246, 192, 207)
tertiary-100
#f2a6bb
rgb(242, 166, 187)
tertiary-200
#ec809d
rgb(236, 128, 157)
tertiary-300
#e86689
rgb(232, 102, 137)
tertiary-400
#a24760
rgb(162, 71, 96)
tertiary-500
#8e3e54
rgb(142, 62, 84)
Cloud
cloud-0
#eceeff
rgb(236, 238, 255)
cloud-25
#eceeff
rgb(236, 238, 255)
cloud-50
#eceeff
rgb(236, 238, 255)
cloud-75
#afbbfd
rgb(175, 187, 253)
cloud-100
#8e9ffc
rgb(142, 159, 252)
cloud-200
#5d75fb
rgb(93, 117, 251)
cloud-300
#3c59fa
rgb(60, 89, 250)
cloud-400
#2a3eaf
rgb(42, 62, 175)
cloud-500
#253699
rgb(37, 54, 153)
Display
Display 1
Display 1
Display 1
Extra Bold
Bold
Regular
128
140
Display 2
Display 2
Display 2
Extra Bold
Bold
Regular
100
110
Display 3
Display 3
Display 3
Extra Bold
Bold
Regular
64
70
Display 4
Display 4
Display 4
Extra Bold
Bold
Regular
56
62
Colour
New Fonts
Four new shades were added to each exisiting colour in the system, giving designers more room to get creative.
Interphases Pro was selected to refresh our brand with a modern and polished look.
Highlights
Brand
brand-0
#FBF8FF
rgb(251, 248, 255)
brand-25
#f7f1fe
rgb(247, 241, 254)
brand-50
#efe6fd
rgb(239, 230, 253)
brand-75
#D9C4FF
rgb(239, 230, 253)
brand-100
#bf96f6
rgb(191, 150, 246)
brand-200
#a46bf3
rgb(164, 107, 243)
brand-UI
#a46bf3
rgb(164, 107, 243)
brand-400
#7d2bee
rgb(125, 43, 238)
brand-logo
#6200ea
rgb(98, 0, 234)
brand-600
#4500a4
rgb(69, 0, 164)
brand-700
#3c008f
rgb(60, 0, 143)
Green
green-0
#e6f2f0
rgb(230, 242, 240)
secondary-25
#e6f2f0
rgb(230, 242, 240)
secondary-50
#e6f9f1
rgb(230, 249, 241)
secondary-75
#96e8c4
rgb(150, 232, 196)
secondary-100
#6bdeac
rgb(107, 222, 172)
secondary-200
#2bd088
rgb(43, 208, 136)
secondary-300
#00c670
rgb(0, 198, 112)
secondary-400
#008b4e
rgb(0, 139, 78)
secondary-500
#014f41
rgb(1, 79, 65)
Tertiary
tertiary-0
#fdf0f3
rgb(253, 240, 243)
tertiary-25
#fdf0f3
rgb(253, 240, 243)
tertiary-50
#fdf0f3
rgb(253, 240, 243)
tertiary-75
#f6c0cf
rgb(246, 192, 207)
tertiary-100
#f2a6bb
rgb(242, 166, 187)
tertiary-200
#ec809d
rgb(236, 128, 157)
tertiary-300
#e86689
rgb(232, 102, 137)
tertiary-400
#a24760
rgb(162, 71, 96)
tertiary-500
#8e3e54
rgb(142, 62, 84)
Cloud
cloud-0
#eceeff
rgb(236, 238, 255)
cloud-25
#eceeff
rgb(236, 238, 255)
cloud-50
#eceeff
rgb(236, 238, 255)
cloud-75
#afbbfd
rgb(175, 187, 253)
cloud-100
#8e9ffc
rgb(142, 159, 252)
cloud-200
#5d75fb
rgb(93, 117, 251)
cloud-300
#3c59fa
rgb(60, 89, 250)
cloud-400
#2a3eaf
rgb(42, 62, 175)
cloud-500
#253699
rgb(37, 54, 153)
Colour
Four new shades were added to each exisiting colour in the system, giving designers more room to get creative.
Design Tokens
Developed clear, purpose-driven design tokens to streamline use and ensure consistency.
Toolbar
A clean, unified toolbar to bring consistency across all tool-based products.
Cards
One base card that covers all use cases for each product.
Design tokens
Developed clear, purpose-driven design tokens to streamline use and ensure consistency.
Toolbar
A clean, unified toolbar to bring consistency across all tool-based products.
Header
A redesigned header component with boolean properties, allowing customisation for any Builder product.
Cards
One base card that covers all use cases for each product.
Header
A redesigned header component with boolean properties, allowing customisation for any Builder product.
Other Work
Highlights
New Fonts
Interphases Pro was selected to refresh our brand with a modern and polished look.
Natasha
Aligned Natasha's design across all products to ensure consistency, addressing user bubbles, response bubbles, background colours, and interaction styles for both mini and full-screen experiences.
Side Navigation
An easy to use Navigation panel that helps users smoothly explore the main areas of the platform.
Toolbar
A clean, unified toolbar to bring consistency across all tool-based products.
Header
A redesigned header component with boolean properties, allowing customisation for any Builder product.
Design tokens
Developed clear, purpose-driven design tokens to streamline use and ensure consistency.
Cards
One base card that covers all use cases for each product.
Colour
Four new shades were added to each exisiting colour in the system, giving designers more room to get creative.