Atoms

Atoms are the smallest component in an atomic design system. This page outlines their purpose.

What are Atoms?

In CivicTheme, atoms are the smallest, most fundamental building blocks of the design system, based on Brad Frost’s Atomic Design principles. These individual elements are simple, self-contained, and non-reducible, forming the foundation of all components. Atoms in CivicTheme include basic HTML elements such as buttons, form inputs, and typography elements, all designed to ensure accessibility, consistency, and reusability across digital services.

---

These atoms are the foundation of CivicTheme, and they combine to form more complex components like molecules and organisms, ensuring a consistent, accessible, and flexible design system across projects. Each atom follows WCAG 2.2 AA standards and is optimised for both design and development, with implementations available in Figma and Storybook.