Set of reusable Ul components, patterns, and guidelines that ensure consistent, efficient design across Global Fashion Group products.
About the project
The GFG Design System provides a unified framework of standards and best practices, ensuring consistent, seamless, and user-friendly experiences across all products and platforms.
Challenges:
GFG encountered inconsistent design, inefficient development, and collaboration challenges across its diverse product portfolio managed by various teams. The absence of a unified design system resulted in disjointed interfaces and protracted development cycles.
Objectives:
Ensure consistency with a unified design language and reusable components across GFG products. Boost efficiency by providing a central library of Ul components to speed up design and development. Streamline collaboration through clear documentation and seamless designer-developer handoffs.
Design Process
Developing a design system involves collaboration between designers, engineers, and product managers (PMs). Each group brings valuable insights and expertise, ensuring that the design system is comprehensive, practical, and aligned with both user needs and technical capabilities.
Typography
Nunito is a balanced sans serif font with smooth, rounded terminals, designed primarily for display but also suitable for text. Its versatility makes it ideal for use across the web on desktops, laptops, and mobile devices, ensuring a clean, modern look on all platforms.
Colors
GFG color palette is a carefully chosen set of colors that are used consistently throughout GFG products to create a unified and cohesive visual identity. (All colors support dark mode)
Breakpoints
Breakpoints are screen size markers where layout and design adapt for the best user experience. They ensure content looks and works well across different devices.
Spacing
The consistent and intentional use of a spacing system ensures a more harmonious user experience. It establishes a solid foundation for responsive design and customizable UI density, enhancing the overall quality and accessibility of our products.
Iconography
GFG design system integrates custom icons and feather icon packs, that can scale to any size needed.
Buttons
Buttons are interactive elements designed to trigger actions. GFG buttons come in 3 sizes(Medium-default), 5 variants, and support 5 different states, offering flexibility for various use cases.
Inputs
Inputs are available in 3 sizes and feature 4 status indicators to reflect user interaction, along with specific states for error and success feedback.
Notification
The Notification component is an overlay that gives users feedback after an action has taken place and has a title with an optional content and close button.
