Accelerating Interfaces.

Atomic Components is a conceptual fork of the Atomic Design principles established by the team behind Patternlab.io, designed to facilitate the creation and management of data-rich, scalable web and mobile applications.

Atomic Components is designed to work specifically within a component architecture, extending and modifying the atomic principles to help catalyze technical details such as data delegation and component structuring.

To help product teams quickly and easily annotate mockups with atomic elements, we’ve also designed a Sketch plugin in an attempt to further reduce the all-to-common noise that can crop up between design and implementation.

Follow along on

atom

A single element such as a profile image or block of text. The only atomic principle that is not a container. Composes various other atomic components like organisms or molecules.

molecule

Molecules are groups of elements describing a static piece of an interface. Although they can appear anywhere in the hierarchy, molecules are most often found within repeating organisms.

organism

Organisms are repeating containers of elements describing parts of an interface which have a dynamic number of instances. Examples include twitter posts, news items, forum posts, etc.

ecosystem

Ecosystems are semantic containers representing distinct parts of the UI. They are composed of molecules, organisms, and atoms, and are often used to orchestrate the data driving the child components.

environment

An Environment is the topmost component in any application. In single-page apps there is a single Environment holding multiple ecosystems, but apps with distinct "pages" will have multiple Environments.