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.

CivicTheme Atom Components

Here’s a list of the atomic components in CivicTheme:

  1. Buttons

    • Primary Button

    • Secondary Button

    • Icon Button

  2. Typography

    • Headings (H1–H6)

    • Paragraph

    • Links

    • Blockquote

  3. Form Elements

    • Text Input

    • Password Input

    • Text Area

    • Radio Button

    • Checkbox

    • Dropdown Select

    • Label

    • Button Group

  4. Icons

    • Icon Set (SVGs for various use cases)

  5. Images

    • Image (with responsive handling)

  6. Lists

    • Ordered List

    • Unordered List

  7. Divider

    • Horizontal Rule (HR)

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.

Last updated