# Atomic Design

Concept · [Product](https://ecosystem.samcarlton.com/product)

Also called: atomic design, atoms molecules organisms

A method for building [design systems](https://ecosystem.samcarlton.com/design-system) from small pieces up: basic elements (atoms) combine into components (molecules), sections (organisms), templates and pages.

**For example:** A label, an input and a button (atoms) form a search bar (molecule) that sits in a site header (organism).

## Connects to (3)

- [Design system](https://ecosystem.samcarlton.com/design-system): A shared set of design rules and ready-made interface pieces, such as buttons, colors and type, so every screen looks and works…
- [UX / UI](https://ecosystem.samcarlton.com/ux-ui): UI, the user interface, is what people see and tap on the screen.
- [Front end](https://ecosystem.samcarlton.com/front-end): The part of an app or website that people see and tap, running in their browser or on their phone.

Map view: https://ecosystem.samcarlton.com/atomic-design