Back to gallery
The universe is made up of a fixed set of ‘atomic elements’. These elements are the building blocks of everything around us.
This understanding of how smaller elements, or atoms, can be combined together to create larger objects, or molecules, parallels well with the design world, and the many elements we use to construct our designs. Following the atomic design principles provides us a structure for building our design systems and pattern libraries.
The elements of Atomic Design:
Atoms, Molecules, Organisms, Templates, Pagest
Atoms are the smallest component found in a product or system. These usually include links, buttons, inputs, paragraphs, titles, icons, and labels.
Primary and secondary colors + success, error and warning. In addition: natural colors and dark mode colors.
Each color has a few tints and a few shads.
Each icon from the set comes in 4 sizes: 64px, 32px, 24px, 16px, and 3 colors. The component has only one icon that can be swapped between the required icon, icon size and color.
Molecules are combinations of atoms. They can include navigation lists, input groups, text groups, and other structures made up of multiple atoms.
This set of buttons includes 3 sizes, a few states and option to add icons on the left side and/or the right side as needed.
The component has only one button that can be swapped between the required size and states.
Organisms, are larger than atoms and molecules. They are a combination of molecules or atoms and molecules. Organisms can include banners, call-to-action sections, footers, headers, forms, and any large structure you find on the page.
Concept for an intra-organizational communication system
High School Course App