AtomicKitchen consists of a backend and a frontend. In the backend, design assets are created, linked or uploaded within projects we call "workspaces" and processed into modular design components. The frontend represents the online presentation area of the design system, style guide or brand book to be created. This can also be downloaded, sent and viewed separately from the backend.
In AtomicKitchen, code-based building blocks are created via CSS styles and HTML tags and iteratively processed into more complex components and templates. CSS styles are the smallest parts of an AtomicKitchen workspace. They are responsible for the visual appearance of all components. For this purpose, each component is assigned a set of styles "responsive", so that each component behaves adaptively depending on the viewport size. Individual styles can also be assigned to a component for other states, such as the hover state of an element.
The styles are organised into various types, such as colours, typographical definitions, lines, etc. To make work easier, there are predefined standard styles, the so-called «basics».
If the properties of a style are subsequently changed, these properties are updated in all components in which this style has been processed. This saves time and helps to avoid inconsistencies.
The atoms are the smallest «content carriers» of an Atomic Design System. To create an atom, a suitable HTML tag is selected, provided with a CSS class and further attributes if required, and a corresponding content, for example a text or an image, is added. (Note: there are also contentless atoms such as lines).
As already mentioned, the visual appearance and responsive behavior of this atom is determined by styles, which are integrated into the atom. Due to their low complexity, atoms are very simple building blocks, such as a button, a text paragraph, or a headline.
The existing atoms can then be combined to form more complex components. For example, an image <img>, a short text snippet <p>, and a button <button> can be combined to create a teaser. These three combined atoms become a new design component, a molecule, which in turn can be a building block for a more complex design component by combining it with other building blocks. For example, three teaser molecules combined together can create a teaser block. In this way, the three molecules would form an organism.
Typically, each composite component also requires its own CSS properties, such as inner and outer margins or a border frame. These properties are defined through styles, as mentioned earlier, which are assigned to each design component being created.