Back to gallery

Design System

Atomic Design

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

Atoms are the smallest component found in a product or system. These usually include links, buttons, inputs, paragraphs, titles, icons, and labels.

Colors

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.

Icons

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.

32px

24px

64px

16px

Usage

Typography

Molecules

Molecules are combinations of atoms. They can include navigation lists, input groups, text groups, and other structures made up of multiple atoms.

Buttons

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.

Large

Medium

Small

Usage

Input Fields

Usage

Organism

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.

Responsive Header

Responsive Table

More Projects

Concept for an intra-organizational communication system

ITSM Challenge

High School Course App

054-4983345

Daphna Alon