Atomic Design

up:: Design

Overview

• Atoms: Basic building blocks. HTML tags like input, button, label.
• Molecules: Combined Atoms. eg. a form.
• Organisms: Group of molecules, eg. a site header.
• Templates: Multiple organisms, eg. a wireframe.
• Pages: A specific template where placeholder content is replaced with real representative content.

Rework

Atomic design 2022: what we can learn from Eames and other design giants

• Ions: colour, padding, states
• Atoms: buttons, text input, labels
• Molecules: pagination, dialog box
• Organisms: Cards, navbar, date picker
• Complex Organisms: UI, App, Web