Das Design System
für moderne WordPress-Projekte
Wir haben uns ein System geschaffen, mit dem wir WordPress-FSE-Projekte optimal starten können. Ohne Kompromisse bei Code, Accessibility, Design oder Performance. Alles was wir regelmäßig brauchen, ist schon fertig. No Code, Low Code, Pro Code: Im Customizing sind wir frei.
Stile
Farben
Wir haben eine moderne und barrierefreie Farbpalette mit 12 Farbfamilien auf Basis von oklch() vorbereitet, die uns in die Lage versetzt Projekte schnell und systematisch aufzubauen und die Farben später an zentraler Stelle anzupassen. Für einen schlankeren Start stehen reduzierte Paletten zur Verfügung.
Stile
Typografie
Wir nutzen als Grundlage eine serifenlose Systemschrift und haben zehn fluide Schriftgrößen sowie individuell Styles für Listen und thematische Einordnungen vorbereitet. Somit sind wir optimal vorbereitet, um das Projekt schnell inhaltlich aufzubauen und später flexibel typografisch anzupassen.
Stile
Radius
Wir haben acht verschiedene Stile für abgerundete Ecken vorbereitet, die zentral in der theme.json angepasst werden können. In Kombination mit der Spacing-Hierarchie (siehe Raster) können Elemente mehrfach verschachtelt werden und bilden harmonische Kombinationen.
Stile
Schatten
Wir haben drei Stile für Schatten vorbereitet, um Elementen schnell und unkompliziert die passende visuelle Hierarchie zuweisen.
Layout
Raster, Abstände & Container
Wir haben eine dynamische Spacing-Hierarchie vorbereitet, die für Abstände innerhalb oder zwischen Boxen genutzt werden kann. In Kombination mit den Container-Breiten und dem Spalten-System von WordPress können wir äußerst flexible responsive bzw. intrinsische Layouts erstellen.
Layout
Patterns
Unser Design System beinhaltet weit über 150 Patterns, die dem Purpose First-Ansatz folgend, bestimmte konzeptionelle Situationen im Layout bedienen. Die Pattern sind vollständig mit dem Block Editor gebaut und kombinieren Layout und Content-Outline, damit sinnvolle, suchmaschinenoptimiere und barrierefreie Texte schnell integriert werden können.
Layout
Advanced Patterns
Für Situationen deren Anforderungen über einfache Text/Bild-Kombinationen hinausgehen, haben wir Custom Pattern vorbereitet. Das sind z. B. Header mit mehrstufigen Navigationen, Slider, Filter oder Tabs. Diese Pattern sind im Block Editor gebaut, benötigen jedoch Custom Code (CSS, JS) der über Klassen ergänzt wird. Sobald WordPress von uns überbrückte Funktionen im Core integriert, verschlanken wir das jeweilige Pattern.
Layout
Templates
Wir haben die wichtigsten Vorlagen der WordPress Template-Hierarchie im Design System integriert, um neue Projekte schnell aufbauen und Individualisieren zu können. Für WooCommerce sind die Standard-Templates ebenfalls vorbereitet.
Features
Das war noch längst nicht alles!
Barrierefrei
Alle Pattern, Templates und Stile sind barrierefrei nach aktueller WCAG – auch die Script-basierten Advanced Patterns.
Schnell
Mit dem Design System erstellte Projekte erreichen aus dem Stand heraus erstklassige Lighthouse-Performance auf einem durchschnittlichen Server.
Intrinsisch
Verschachtelte Patterns haben wir mit intrinsischen Techniken aufgebaut, damit sie nicht von der Viewport-Breite abhängig sind.
Übersetzt
Alle Strings im Code sind auf Englisch. Für Deutsch liegen Übersetzungen als PO-Datei bereit, die unkompliziert angepasst, ergänzt und auf weitere Sprachen ausgerollt werden kann.
WooCommerce
Startklar für Shops: Alle WooCommerce-Templates für PDP, Warenkorb oder Kasse sind vorbereitet und spezifische Header für den Shop sind auch mit dabei.
Figma-Library
In Progress: Alle Tokens und Pattern liegen in als Figma-Library vor.