Atomic design means creating a system of pieces that can come together to create elements and templates we can reuse over and over again.
Atoms are the absolute fundamentals of our system. Atoms include color palettes, fonts, individual elements (i.e. headers, paragraphs, buttons, etc.) and anything else that combines with other atoms to create a molecule.
Molecules are the pieces we build with atoms. Although they require atoms, molecules are more along the lines of the lego blocks we will be building with, over time. Although some will get complex, simplicity is key here.
Molecules include things such as form fields with a label or a table with headings and data columns.
Organisms are where we begin to see the interface come together. By combining molecules we can build more complex, but repeatable, pieces of our product.
An example of an organism might be a header nav that includes a logo, nav links and a search field or sign up button.
Templates are essentially our wireframes. By combining multiple organisms, we really begin to see the big picture of what we’re building.
If a high fidelity deliverable is not necessary, this is the point where we could very easily start developing our system in code.
Pages are the high fidelity version of our templates. The design above would be considered a page. This is where even the design inept can understand what we’re building.
Design system tokens are the style values of UI elements such as color, typography, spacing, shadows, etc., that are used across products and capable of being converted to a format for any platform (web, mobile, desktop). Tokens are building blocks of the design system—think of them as sub atoms, the smallest pieces of style values that allow designers to create styles for a product.
Tokens are used in place of hard-coded values and allow designers to create more flexible design solutions. Design tokens provide a way for designers to maintain complete control over the values in their design system. Designers update the value centrally (in one place), and the new change applies automatically to all designs on every platform.