Andrew's Digital Garden

A quick primer on Atomic design

[[20210927144324-design-tokens]] can act as the subatomic level.

Atoms - basic building blocks. These are HTML tags, labels, inputs, buttons. Molecules - atoms bonded together. For example, a search field is a input + button. Organisms - a combination of molecules that form a relatively complex distinct section of an interface. [[20211122112956-design-system-component-hierarchy]] Templates - Mostly groups of organisms stitched together to form reusable/unopinionated pages. Pages - Specific instances of templates, the end product.

[[20220620042011-against-atomic-design]]

[[atomicdesign]] [[design]] [[designsystem]]

A quick primer on Atomic design