HUG
Role:
Design System
Timeline:
3 months
Overview
This component kit evolves into a fully developed design system, with its core defined in code, making it a seamlessly integrated solution. Developed as a template system, it serves as a foundation for new projects. The use of variables, which are later converted into tokens, is crucial for maintaining consistency and enabling scalability across projects.
Process
The design began in Figma, using variables to create light and dark modes, covering colours, typography, and spacing (radius and padding). Styles were applied to images, shadows, and grids, with common components designed as a foundation for new projects. The key challenge was determining variable naming conventions, selecting appropriate colours for each mode, and identifying which components are most frequently used in new projects.
Results
As a result, the design system offers a scalable foundation for new projects, ensuring consistency across both light and dark modes. Clear variable naming and essential components streamline development, while the use of variables facilitates easy customisation. The system is tokenised using Tokens Studio and documented in Zeroheight, ensuring seamless access and collaboration across teams.
Overview
This component kit evolves into a fully developed design system, with its core defined in code, making it a seamlessly integrated solution. Developed as a template system, it serves as a foundation for new projects. The use of variables, which are later converted into tokens, is crucial for maintaining consistency and enabling scalability across projects.
Process
The design began in Figma, using variables to create light and dark modes, covering colours, typography, and spacing (radius and padding). Styles were applied to images, shadows, and grids, with common components designed as a foundation for new projects. The key challenge was determining variable naming conventions, selecting appropriate colours for each mode, and identifying which components are most frequently used in new projects.
Results
As a result, the design system offers a scalable foundation for new projects, ensuring consistency across both light and dark modes. Clear variable naming and essential components streamline development, while the use of variables facilitates easy customisation. The system is tokenised using Tokens Studio and documented in Zeroheight, ensuring seamless access and collaboration across teams.
Next 👉
