Design systems have become increasingly popular in recent years, as businesses seek to streamline their product and UX processes while maintaining brand consistency. At Absurd, we’ve worked with a range of global clients on their design system projects, and we’ve learned a lot about what works and what doesn’t. In this blog, we’ll share actionable insights and strategies for creating an effective design system, drawing on our experience and the latest industry trends.
Creating a Smooth Handoff Between Designers and Developers
A smooth handoff between designers and developers is crucial for a successful design system. Our experience with global organisations has shown us the importance of applying contextual meaning to the naming structure and establishing a colour palette with meaningful naming conventions. This ensures accessibility between colour styles and their relationships on the page, while also making it easier to maintain consistency throughout your design system. By limiting the number of colours and contrast used in a design system, you can prevent clutter and distraction, while also creating a harmonious visual hierarchy.
Why Typography and Colour Theory Matter
Typography and colour theory are two essential elements of visual design that can affect the readability, mood, and message of your content. Our experience has shown us that selecting appropriate type scales for different displays and using them consistently across all platforms is key to creating a harmonious design system. We also recommend establishing a colour palette with meaningful naming conventions for primary, secondary, and accent colours, and using colour variations to create states, emphasis, and hierarchy.
In our experience at Absurd, we understand the crucial role typography plays in creating a consistent design system, particularly in large-scale projects. Our work with global design systems has taught us the significance of choosing appropriate type scales for various platforms, including web, print, and mobile, and using them consistently across all mediums. To ensure a balanced and harmonious layout per device, we established a type scale that set the size, spacing, and alignment of our fonts. Furthermore, we created a database of styles with consistent naming conventions, making it easier for designers and developers to work seamlessly using the BEM naming structure. Our advice is to choose web fonts that complement the tone and purpose of your content, use them consistently across different platforms, and establish a type scale that works alongside Figma styles to maintain consistency in your design system.
How to Choose and Use Fonts
Choosing the right fonts for your design system is essential to creating a cohesive visual experience. We recommend selecting web fonts that meet the specific needs of your project, while ensuring readability and legibility across different media. Establishing a typographic scale that sets the size, spacing, and alignment of your fonts is also crucial in creating a balanced layout and improving the UX and design processes. Additionally, using font variations to create emphasis and hierarchy, and limiting the number of fonts and styles used in a design system, can prevent clutter and confusion.
When choosing fonts for a design system, it’s essential to consider their purpose, tone, readability, legibility, and compatibility with different media. Our experience has shown us that a font family with different weights and styles can be helpful in creating emphasis and hierarchy, but requires a solid logic and communication to implement consistently. Our advice is to choose web fonts that meet the specific needs of your project and that are easily shared, rely on best practises and establish a type scale that creates a balanced visual hierarchy, ensuring consistency across different platforms.
Using fonts consistently and effectively in a design system is crucial to maintaining a harmonious visual hierarchy. Our experience with the a global design system showed us that defining a typographic scale that sets the size, spacing, and alignment of our fonts was essential in creating a balanced layout as well as improving the UX and Design processes and ways of working with styles and components. Additionally, limiting the number of fonts and styles used in a design system can prevent clutter and confusion. Our general rule of thumb at Absurd is to define a typographic scale that creates a harmonious visual hierarchy, use font variations to create emphasis and hierarchy, and limit the number of fonts and styles used in a design system.
Why Colour Theory Matters
In a design system, colour theory plays an important role in ensuring accessibility and creating a cohesive visual experience. Our experience at Absurd with multi-label design systems highlighted the importance of establishing a colour palette that incorporates themes within the design system, and applying meaning to the naming convention within a BEM structure in Figma. By assigning meaning to colour naming conventions like “Primary/Container” and “Primary/OnContainer”, we ensure that re-theming libraries and styles is both easy and maintains accessibility.
To create a colour palette that is both accessible and harmonious, we recommend using tonal palettes to determine complementary hues, and setting the primary, secondary, and accent colours of the design system. Colour variations can then be used to create states, emphasis, and hierarchy. When creating accessible colour palettes, it’s important to consider the contrast between colours to ensure that the content is legible and meets accessibility standards. In summary, creating a well thought-out colour palette and naming conventions will make it easier to maintain consistency and accessibility throughout your design system.