Atomic Design
Atomic Design is a methodology inspired by chemistry for designing user interfaces that was introduced by Brad Frost, a web designer and developer. It's based on the idea that user interfaces can be broken down into smaller, reusable parts, just like atoms in the real world. These parts can then be combined in different ways to create more complex user interface elements, or molecules. These molecules can then be combined to form larger, more complex structures, or organisms. The goal of atomic design is to create a consistent, modular Design System that can be used to build user interfaces more efficiently.
The five levels of atomic design
- Atoms: These are the smallest, most basic UI elements, such as buttons, inputs, and icons.
- Molecules: These are groups of atoms that function together as a unit, such as a search form or a navigation menu.
- Organisms: These are groups of molecules that function together to form a larger, more complex UI element, such as a header or a footer.
- Templates: These are layouts that show how the organisms and molecules will be arranged on a page.
Pages: These are the final, fully-realised user interfaces that are built using the templates and the organisms, molecules, and atoms.
By following the principles of atomic design, designers and developers can create a cohesive, scalable Design System that can be easily maintained and updated over time.
Base styles
Govern the typography, grids, effects (shadows) and colours available via pre-set styles defined in the Design System master file.
Base elements
These are the fundamental building blocks of our ‘master components’.
Components
Components are reusable parts of the Design System. Each component has been developed to meet a user interface need. All components work together to create different patterns and templates.
Component library
A collection of available components or patterns you can browse to use in your designs.
DTA
The Australian Government Design System produced by the Digital Transformation Agency (DTA). It provides a framework and a set of tools to help designers and developers build government products and services more easily.
Master components
Master components are the source of truth for each component in our Design System. When you use our components in your designs you create instances (duplicates) of these master versions. These instances are linked to the master component and receive any updates made to the component.
Patterns
Patterns are best practice design solutions for specific user-focused tasks and page types. Patterns use one or more components and explain how to adapt them to the context.
Variants
Components with variants will have toggles or drop downs that show unique options for that component.
Variables
Default styles assigned using SASS to help organise and structure the core design of the site. These are often referred to as design tokens and classes.
COA
This is an acronym commonly used to the describe the Queensland Government Coat of Arms.
