# Atoms

### **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 ](https://www.figma.com/design/nXTZFR1mKPLExtEbYtazzD/CivicTheme--Design-System-v1.9.0?node-id=0-1\&t=b83UZlIpwPkLMi9E-1)and **Storybook**.