Atomic Design.

Die fünf Ebenen lassen sich an einem Beispiel durchgehen. Atome sind die kleinsten Einheiten, die für sich allein wenig Sinn ergeben: eine Beschriftung, ein Eingabefeld, ein Button, ein Symbol. Moleküle sind kleine Gruppen davon mit einer klaren Aufgabe, etwa ein Suchfeld aus Beschriftung, Eingabefeld und Button. Organismen sind grössere, eigenständige Abschnitte wie eine Kopfzeile, eine Produktkarte oder ein vollständiges Anfrageformular. Templates sind Seitengerüste, in denen diese Bausteine angeordnet sind, aber noch Platzhalterinhalte stehen. Pages sind dieselben Templates mit echten Inhalten und dienen der Prüfung des Ganzen.

Die letzten beiden Ebenen werden am häufigsten übergangen und sind die wichtigsten. Erst mit echten Inhalten zeigt sich, ob ein System trägt: ein Produktname über drei Zeilen, ein fehlendes Bild, eine Preisangabe mit vier Stellen, ein leerer Zustand ohne Ergebnisse, eine Fehlermeldung über zwei Zeilen. Komponentenbibliotheken, die nur im Katalog geprüft werden, sehen dort tadellos aus und brechen in der Anwendung. Deshalb gehört zu jedem Organismus die Festlegung seiner Zustände — Standard, Hover, Fokus, deaktiviert, ladend, leer, fehlerhaft — und nicht nur sein Idealfall.

In der Umsetzung mit React oder Next.js schlägt sich das Modell direkt in der Ordnerstruktur und in der Dokumentation nieder. Ein Anfrageformular wird einmal als Organismus gebaut, samt Validierung, Fehlermeldungen und Bestätigungszustand, und danach auf zwölf Leistungsseiten eingesetzt. Zeigt ein Test, dass die Fehlermeldung zu spät erscheint, wird das an genau einer Stelle korrigiert und wirkt überall. Ohne diese Ordnung entstehen zwölf leicht abweichende Formulare, von denen drei die Pflichtfelder anders behandeln — ein Problem, das erst im Betrieb auffällt und dann teuer nachgezogen wird.

Die ehrliche Abgrenzung: Die Chemie-Metapher erzeugt Grenzfälle, die niemandem helfen. Ob eine Karte mit Bild, Titel und Button ein Molekül oder ein Organismus ist, lässt sich lange diskutieren, ohne dass die Antwort etwas verbessert. Viele Teams verwenden deshalb heute flachere Einteilungen mit zwei oder drei Kategorien und behalten nur das Prinzip: Grosses wird aus Kleinem zusammengesetzt, jede Einheit hat eine Zuständigkeit. Wer neu startet, übernimmt die Idee der Komposition und benennt die Ebenen so, wie es im eigenen Team verstanden wird. Der übergeordnete Rahmen bleibt das Design System, die Werte darin sind Design Tokens.