Atoms are analogous to the foundational building blocks or core elements. These atoms encompass essential UI components such as typography styles, colours, grids, spacing, shadows and blurs.

Atoms come together to create molecules. For example, a search bar is formed by combining a text input and a button. These cohesive units blend various atoms to construct more intricate and practical UI components, guaranteeing uniformity and ease of use throughout the design system.

Organisms are complex structures that combine molecules or atoms to create functional UI components like navigation bars or card components, integrating diverse elements for comprehensive functionality and visual hierarchy.

Templates combine organisms to create complete page layouts, such as product or landing pages, offering structured frameworks for consistent and cohesive user experiences.

Pages are a combination of templates and various structures that amalgamate to provide detailed overviews of products and web pages, ensuring consistency and usability across the interface.