Die Pattern im Kit sind deshalb nicht nach Optik, sondern nach Inhalt kategorisiert, etwa Orientierung, Navigation, Information oder Action. Im ersten Schritt stehen alle Pattern auf »Layout None« und zeigen eine reine Textdarstellung, die sogenannte Content Outline. So legen wir die Abfolge der Inhaltsabschnitte fest, ohne uns von Farben oder Anordnungen ablenken zu lassen. Denn die inhaltliche Struktur bleibt auf jedem Gerät gleich und ist entscheidend für Barrierefreiheit.

Ist die Struktur mit der Kundschaft oder der Redaktion abgestimmt, wechseln wir auf die vorbereiteten Layout-Varianten. Jedes Pattern gibt es in einer kleinen und einer großen Ansicht, beide skalierbar, sodass wir das responsive Verhalten schon in Figma prüfen können. Passt ein Layout nicht, tauschen wir es gegen eine Variante mit gleicher konzeptioneller Zielsetzung.

Erst im dritten Schritt folgt das Styling mit Farben, danach die individuelle Formsprache. Das Ergebnis ist ein Design, das eng mit dem übereinstimmt, was der WordPress-Block-Editor abbilden kann.

Das Kit ist nach dem Atomic-Design-Ansatz aufgebaut. Die Grundlage bilden Variablen für Farben, Schriften, Abstände, Radien, Schatten und Layout-Breiten. Über Modes passen sich Schriftgrößen und Abstände automatisch an kleine und große Viewports an. Die Variablenstruktur lässt sich exportieren und direkt in die theme.json übernehmen.

Darauf bauen Elemente wie Buttons, Formularfelder und Teaser auf. Das Herzstück sind über 100 Pattern, die wir nach ihrem Zweck organisiert haben: von Navigation und Orientierung über Information bis zu Action und Marketing, inklusive WooCommerce-kompatibler Elemente. Die Zweckbeschreibungen stecken auch in den Komponenten selbst, damit KI-Systeme sie lesen können. Alle Pattern liegen in einer mobilen und einer Desktop-Variante vor und sind dank Auto Layout frei skalierbar.

Aus den Pattern setzen sich die WordPress-Standard-Templates wie Index, Front Page, Home oder Search zusammen, ergänzt um WooCommerce-Templates für Produktseiten und -übersichten. Demo-Seiten zeigen, wie alles im Zusammenspiel aussieht.

Das Ziel: wiederkehrende Standards wie Struktur und Barrierefreiheit gut vorbereitet in der Schublade haben und trotzdem für jede Kundschaft ein individuelles Projekt gestalten.