Our design system for WordPress block themes
We built this system for our own WordPress block theme projects. No compromises on code, accessibility, design, or performance. Everything we need is already done – ready to adapt visually, with low code, or deep in the codebase.
Styles
Colors
We have prepared a modern and accessible color palette with 12 color families based on oklch(), enabling us to build projects quickly and systematically and adjust colors centrally at a later stage. Reduced palettes are available for a leaner start.
Styles
Typography
We use a sans-serif system font as the base and have prepared ten fluid font sizes as well as custom styles for lists and thematic labels. This puts us in an ideal position to build out the project content quickly and adapt typography flexibly at a later stage.
Styles
Radius
We have prepared eight different styles for rounded corners that can be adjusted centrally in theme.json. Combined with the spacing hierarchy (see Grid), elements can be nested multiple times and form harmonious combinations.
Styles
Shadows
We have prepared three shadow styles to quickly and easily assign the appropriate visual hierarchy to elements.
Layout
Grid, Spacing & Containers
We have prepared a dynamic spacing hierarchy that can be used for spacing within or between boxes. Combined with the container widths and the column system of WordPress, we can create extremely flexible responsive and intrinsic layouts.
Layout
Patterns
Our Design System includes well over 150 patterns that, following the Purpose First approach, address specific conceptual layout situations. The patterns are built entirely with the Block Editor and combine layout with content outlines, so that meaningful, SEO-optimized, and accessible copy can be integrated quickly.
Layout
Advanced Patterns
For situations where requirements go beyond simple text/image combinations, we have prepared custom patterns. These include, for example, headers with multi-level navigation, sliders, filters, or tabs. These patterns are built in the Block Editor but require Custom Code (CSS, JS) added via classes. Once WordPress integrates functions we currently bridge into core, we streamline the respective pattern.
Layout
Templates
We have integrated the most important templates from the WordPress template hierarchy into the Design System to quickly build and customize new projects. The standard WooCommerce templates are also prepared.
Features
That’s not even close to everything!
Accessible
All patterns, templates, and styles are accessible according to current WCAG standards – including the script-based advanced patterns.
Fast
Projects built with the Design System achieve top-tier Lighthouse performance right out of the box on an average server.
Intrinsic
Nested patterns are built with intrinsic techniques so they are not dependent on viewport width.
SEO-friendly
All templates, patterns, and sub-patterns are built so that the heading structure is correct and meaningful document structures are created.
Translated
All strings in the code are in English. German translations are available as a PO file that can be easily adapted, extended, and rolled out to other languages.
WooCommerce
Ready for shops: all WooCommerce templates for PDP, cart, and checkout are prepared, and specific shop headers are included as well.
Figma Library
All tokens, elements, patterns and templates are available as a detailled and code-aligned Figma libraryOpens in new tab.