Role
Design System Designer, Product Designer, UI Architect
Role
Design System Designer, Product Designer, UI Architect
Role
Design System Designer, Product Designer, UI Architect
Collaborators
2 Designers, 4 Frontend Engineers, 1 Product Manager, 1 QA Engineer
Collaborators
2 Designers, 4 Frontend Engineers, 1 Product Manager, 1 QA Engineer
Collaborators
2 Designers, 4 Frontend Engineers, 1 Product Manager, 1 QA Engineer
Timeline
ongoing
Timeline
ongoing
Timeline
ongoing
Tools
Figma
Tools
Figma
Tools
Figma
The Cars24 Global design system started as a standalone initiative but evolved significantly as multiple platforms and features were unified into a single ecosystem. This consolidation shaped the system’s direction, requiring updates to design tokens and the overall architecture to support new products and ensure consistency across experiences.
The Cars24 Global design system started as a standalone initiative but evolved significantly as multiple platforms and features were unified into a single ecosystem. This consolidation shaped the system’s direction, requiring updates to design tokens and the overall architecture to support new products and ensure consistency across experiences.
The Cars24 Global design system started as a standalone initiative but evolved significantly as multiple platforms and features were unified into a single ecosystem. This consolidation shaped the system’s direction, requiring updates to design tokens and the overall architecture to support new products and ensure consistency across experiences.
The Challenge
As Cars24 scaled, design inconsistency across products slowed delivery and caused inefficiencies in design–developer handoff. With multiple platforms to support, the need for a unified design system became critical to ensure consistency, scalability, and a seamless brand experience.
The Challenge
As Cars24 scaled, design inconsistency across products slowed delivery and caused inefficiencies in design–developer handoff. With multiple platforms to support, the need for a unified design system became critical to ensure consistency, scalability, and a seamless brand experience.
The Challenge
As Cars24 scaled, design inconsistency across products slowed delivery and caused inefficiencies in design–developer handoff. With multiple platforms to support, the need for a unified design system became critical to ensure consistency, scalability, and a seamless brand experience.
Foundation Building
The first step in building the Cars24 Design System was to establish strong foundations that could scale across multiple products. We began by creating design tokens—covering color, typography, spacing, radius, and elevation—to ensure consistency and make the system directly translatable to code
Alongside tokens, we defined guidelines for grids, layouts, and accessibility standards. These guidelines provided a shared language for designers and developers, reducing ambiguity and ensuring that every product aligned with Cars24’s brand and usability principles. By focusing on foundations first, we created a system that was flexible enough to adapt yet structured enough to maintain consistency at scale.
Foundation Building
The first step in building the Cars24 Design System was to establish strong foundations that could scale across multiple products. We began by creating design tokens—covering color, typography, spacing, radius, and elevation—to ensure consistency and make the system directly translatable to code
Alongside tokens, we defined guidelines for grids, layouts, and accessibility standards. These guidelines provided a shared language for designers and developers, reducing ambiguity and ensuring that every product aligned with Cars24’s brand and usability principles. By focusing on foundations first, we created a system that was flexible enough to adapt yet structured enough to maintain consistency at scale.
Foundation Building
The first step in building the Cars24 Design System was to establish strong foundations that could scale across multiple products. We began by creating design tokens—covering color, typography, spacing, radius, and elevation—to ensure consistency and make the system directly translatable to code
Alongside tokens, we defined guidelines for grids, layouts, and accessibility standards. These guidelines provided a shared language for designers and developers, reducing ambiguity and ensuring that every product aligned with Cars24’s brand and usability principles. By focusing on foundations first, we created a system that was flexible enough to adapt yet structured enough to maintain consistency at scale.
Primitives
At Cars24, we built the design system from scratch—starting with tokens, components, and scalable architecture. As Cars24 unified multiple products into one ecosystem, the system evolved to support new features while ensuring consistency across platforms.
I was responsible for creating the foundational design tokens and guidelines—defining color, spacing, and layout systems that became the backbone of the Cars24 Design System. These foundations not only ensured visual consistency but also accelerated component development and improved handoff between design and engineering.
Primitives Tokens
At Cars24, we built the design system from scratch—starting with tokens, components, and scalable architecture. As Cars24 unified multiple products into one ecosystem, the system evolved to support new features while ensuring consistency across platforms.
I was responsible for creating the foundational design tokens and guidelines—defining color, spacing, and layout systems that became the backbone of the Cars24 Design System. These foundations not only ensured visual consistency but also accelerated component development and improved handoff between design and engineering.
Primitives
At Cars24, we built the design system from scratch—starting with tokens, components, and scalable architecture. As Cars24 unified multiple products into one ecosystem, the system evolved to support new features while ensuring consistency across platforms.
I was responsible for creating the foundational design tokens and guidelines—defining color, spacing, and layout systems that became the backbone of the Cars24 Design System. These foundations not only ensured visual consistency but also accelerated component development and improved handoff between design and engineering.
Theming & Scalability
The new base, or primitive, colors are based on hue scales for flexible component design. These primitive colors mapped to semantic roles for text, fill, outline, and icon. Each had subcategories for colors like neutral, brand, action, and feedback. Text colors were checked for WCAG AA accessibility, sparing designers from manual checks as they used colors.
This mapping took the guess work when we created components and when designers used the system.
At Cars24, we used Figma’s variable modes to scale the design system across multiple products. This allowed us to create light/dark themes and product-specific variations while keeping everything connected to a single component library.
Theming & Scalability
The new base, or primitive, colors are based on hue scales for flexible component design. These primitive colors mapped to semantic roles for text, fill, outline, and icon. Each had subcategories for colors like neutral, brand, action, and feedback. Text colors were checked for WCAG AA accessibility, sparing designers from manual checks as they used colors.
This mapping took the guess work when we created components and when designers used the system.
At Cars24, we used Figma’s variable modes to scale the design system across multiple products. This allowed us to create light/dark themes and product-specific variations while keeping everything connected to a single component library.
Theming & Scalability
The new base, or primitive, colors are based on hue scales for flexible component design. These primitive colors mapped to semantic roles for text, fill, outline, and icon. Each had subcategories for colors like neutral, brand, action, and feedback. Text colors were checked for WCAG AA accessibility, sparing designers from manual checks as they used colors.
This mapping took the guess work when we created components and when designers used the system.
At Cars24, we used Figma’s variable modes to scale the design system across multiple products. This allowed us to create light/dark themes and product-specific variations while keeping everything connected to a single component library.
Components & Patterns
The components now utilize properties more efficiently. The previous iteration of the design system had components with vaugue properties called “color”, which made it unclear when designers should use each option. This led to components like button appearing differently across different applications.
In the new system, component properties are role-based. Designers choose between tones such as 'brand' or 'destructive' based on use case. The type property determines emphasis between 'primary', 'secondary', and 'tertiary'. Properties like these are consistent across products and components come with usage guidelines on how to use them.
Components, Patterns
The components now utilize properties more efficiently. The previous iteration of the design system had components with vaugue properties called “color”, which made it unclear when designers should use each option. This led to components like button appearing differently across different applications.
In the new system, component properties are role-based. Designers choose between tones such as 'brand' or 'destructive' based on use case. The type property determines emphasis between 'primary', 'secondary', and 'tertiary'. Properties like these are consistent across products and components come with usage guidelines on how to use them.
Components & Patterns
The components now utilize properties more efficiently. The previous iteration of the design system had components with vaugue properties called “color”, which made it unclear when designers should use each option. This led to components like button appearing differently across different applications.
In the new system, component properties are role-based. Designers choose between tones such as 'brand' or 'destructive' based on use case. The type property determines emphasis between 'primary', 'secondary', and 'tertiary'. Properties like these are consistent across products and components come with usage guidelines on how to use them.
Collaboration & Handoff
To transform this UI kit into a real design system, we exported the variables and created a code repository documented in Storybook. Designers use the Figma UI kit while developers can reference the exact same components in Storybook for the code.
The Cars24 Design System is an ever-evolving product. Our team actively monitors collaboration between designers and developers to identify areas for improvement. With each new product adoption, we uncover fresh challenges and adapt the system to ensure scalability, consistency, and efficiency across all platforms.
Collaboration, Handoff
To transform this UI kit into a real design system, we exported the variables and created a code repository documented in Storybook. Designers use the Figma UI kit while developers can reference the exact same components in Storybook for the code.
The Cars24 Design System is an ever-evolving product. Our team actively monitors collaboration between designers and developers to identify areas for improvement. With each new product adoption, we uncover fresh challenges and adapt the system to ensure scalability, consistency, and efficiency across all platforms.
Collaboration & Handoff
To transform this UI kit into a real design system, we exported the variables and created a code repository documented in Storybook. Designers use the Figma UI kit while developers can reference the exact same components in Storybook for the code.
The Cars24 Design System is an ever-evolving product. Our team actively monitors collaboration between designers and developers to identify areas for improvement. With each new product adoption, we uncover fresh challenges and adapt the system to ensure scalability, consistency, and efficiency across all platforms.
Impact & Outcomes
The Cars24 Design System delivered measurable improvements across design and development workflows. By reducing duplication and enabling quicker prototyping, design cycles became significantly faster.
Standardized tokens and components eliminated inconsistencies across products, while clear documentation made onboarding smoother for new designers and developers. Most importantly, the system was built with scalability in mind, ensuring Cars24 can support future products and features with consistency and efficiency.
Impact & Outcomes
The Cars24 Design System delivered measurable improvements across design and development workflows. By reducing duplication and enabling quicker prototyping, design cycles became significantly faster.
Standardized tokens and components eliminated inconsistencies across products, while clear documentation made onboarding smoother for new designers and developers. Most importantly, the system was built with scalability in mind, ensuring Cars24 can support future products and features with consistency and efficiency.
Impact & Outcomes
The Cars24 Design System delivered measurable improvements across design and development workflows. By reducing duplication and enabling quicker prototyping, design cycles became significantly faster.
Standardized tokens and components eliminated inconsistencies across products, while clear documentation made onboarding smoother for new designers and developers. Most importantly, the system was built with scalability in mind, ensuring Cars24 can support future products and features with consistency and efficiency.
Evolution & Next Steps
Evolution & Next Steps
Evolution & Next Steps
The Cars24 Design System continues to evolve—adapting to new products, improving accessibility, and expanding documentation to ensure long-term scalability.
The Cars24 Design System continues to evolve—adapting to new products, improving accessibility, and expanding documentation to ensure long-term scalability.
The Cars24 Design System continues to evolve—adapting to new products, improving accessibility, and expanding documentation to ensure long-term scalability.