Why build a design system?
Designing and building a new website is often costly and time-consuming. Designers come up with a visual masterpiece, and then frontend developers have to build it — which can be easier said than done, especially if the developer is working in isolation and not taking into consideration how difficult it might be to actually build their designs.
Traditional bespoke website design and development often leads to:
High development costs
Long project timelines
Lack of a consistent user experience across the site or sub-sites
A website that doesn’t meet accessibility standards
Repetition of solving the same design patterns for each new website
Repetition of basic development costs
Lack of flexibility in ongoing management of the new site
This is where design systems come in…
Design systems help maintain a cohesive look and feel throughout a digital presence. This is particularly important for governments trying to implement a whole-of-government user experience.
This article explores design systems, their key components, benefits and best practices. It also examines real-world examples of successful design system implementations and how they can help designers and developers create a more unified and efficient digital presence.
What is a design system?
At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. Think of it as a blueprint, offering a unified language and structured framework that guides teams through the complex process of creating digital products.
The key components of a design system often include:
Component library/UI kit: These are libraries that house predetermined, reusable UI components. Each component in the design system is created to work together to provide the user with intuitive user experiences.
Pattern library: Although often used synonymously with component libraries, pattern libraries contain particular combinations of UI components and elements called patterns that provide intuitive and consistent user experiences.
Style guide: The style guide governs the general look and feel of a website’s branding. It dictates what colours, fonts, logo variations, and types of images to use. Style guides can also provide guidance on content and visual-and-interaction design standards.
Design principles: These principles are intended to help teams across the same or multiple organisations align on common goals and make meaningful decisions when using the design system, no matter how they build. These principles focus on the products and what they look like.
Characteristics of a great design system
Creating a great design system requires careful consideration of several characteristics, including:
- Compliance with industry standards and best practices
- Accessibility considerations for users with disabilities
- Inclusivity and support for diverse user needs and preferences
- Proven design patterns and UI components
- Adherence to atomic design principles for modularity and scalability
- Technology-agnostic approach for flexibility and future-proofing
- Comprehensive documentation and guidelines for easy adoption and maintenance
What is an atomic design system?
Atomic design is a methodology composed of five distinct levels all working together to create interface design systems in a deliberate and hierarchical manner. The 5 levels of an atomic design system are:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
You start by creating Atoms, then combine these Atoms into Molecules, use the Atoms and Molecules to create Organisms, and finally combine the Organisms to create Templates and then Pages.
Why use an atomic design system?
An atomic design system provides many benefits, including:
Consistency in design and user experience
Increased efficiency in design and development processes
A faster (seriously fast) way to build a new site and add new features
Improved collaboration between design and development teams with a single source of truth
Significant cost savings through reusable components, reduced redundancy and fast build times
Who uses design systems and why?
Design systems are used worldwide by design and development teams in large organisations and governments. These teams use design systems for all the benefits they deliver.
Examples of organisations that use design systems include:
Examples of governments/jurisdictions using design systems include:
United States (US): The US Federal Government uses the U.S. Web Design System , which makes it easy for government agencies and departments to build accessible and mobile-friendly government websites. Some of the sites built with USWDS include the National Institute of Health , NASA Glenn Research and the U.S. National Library of .
New South Wales (NSW): In 2018, the government of New South Wales created and adopted the NSW Design . This system is a breathing repository of a standard, guides and reusable components to help teams across the government deliver consistent and cohesive digital services for citizens. The NSW Design System contains core styles, components, documented UI kits, and documentation on how they should be used.
Victoria: The Victorian Government uses the Ripple Design for all its governmental digital products. It is the frontend layer of the Single Digital Presence , a project that makes it easier for citizens to find, understand and use Victorian Government information. The Ripple Design System (now Ripple 2.0) is an open-source design system that provides a single source of truth for styles, components and patterns that designers, developers, content creators and stakeholders can use when creating digital experiences on SDP.
- Australia (whole-of-government): The Digital Transformation endorses the CivicTheme Design as a recommended Content Management Design System in the Australian Government . CivicTheme has been leveraged by Australian government agencies such as the Australian Energy Infrastructure and The Climate Change . In addition, , the Australian whole-of-government content management and web hosting service, will be adding CivicTheme to its platform for hundreds of agency customers.
About CivicTheme
Salsa created as an open source, atomic design system. Although the design system is CMS/technology agnostic, its first implementation is integrated with Drupal. It consists of:
The CivicTheme Figma design — Figma files can be used and edited to suit your project, including exporting to Adobe
Drupal component library — backend
Drupal 10 theme – frontend
View the CivicTheme project on
CivicTheme is currently being used by a range of customers, including:
It was used by these customers and others to build sites quickly and cost-effectively, while delivering an accessible and compliant digital experience.
Next steps
We strongly recommend that you consider using a design system to build consistent and accessible user experiences on your website or suite of products. A good design system will save you time and money, while also providing better user experiences for your customers. If you’d like to find out more about using a design system or using CivicTheme, please reach out to us.