Entwurfsprinzipien
Jede Verfeinerung zuruckgefuhrt auf Prinzip.
Das Enhanced-Theme baut auf einer prazisen Grundlage aus Design-Tokens, typografischer Disziplin und systematischen Abstanden auf. Keine willkurlichen Werte, keine magischen Zahlen — nur nachvollziehbare Entscheidungen, die sich uber das gesamte System erstrecken.
01 — Farbsystem
Design-Tokens: Farbe
Elf benannte Farbwerte bilden die gesamte visuelle Sprache. Kein Hex-Wert erscheint ausserhalb des Token-Systems — jede Flache, jede Linie, jeder Text verweist auf einen semantischen Slug.
#F8F7F3
–color-background
Warmes Pergament als Seitengrund. 15:1+ Kontrast gegen Textfarbe, augenschonend bei langen Lesesitzungen.
#1B6CA8
–color-petrol
Einziger Akzent: tiefer Petrolblau. Reserviert fur Buttons, interaktive Elemente und Display-Typografie. Nie als Fliesstext-Farbe.
#1C1B18
–color-text
Beinahe-Schwarz als Textfarbe. Warmer als reines #000, reduziert Kontrast-Glare bei langem Lesen auf hellen Flachen.
+ 8 weitere Tokens: surface, gridline, rule, outline, text-muted, petrol-dark, petrol-light, white — jeder mit definiertem Kontext und WCAG-AA-Konformitat innerhalb seines Einsatzbereichs.
02 — Abstande
Design-Tokens: Abstands-Skala
Sieben modulare Stufen, jede das 1,5-fache der vorherigen. Von 0,5rem fur enge technische Raster bis 8rem fur grosszugige redaktionelle Weissraume. Kein Abstand im System existiert ausserhalb dieser Skala.
Token
Wert
Einsatz
spacing-20
0.44rem
Inline-Elemente, Icon-Abstande
spacing-30
0.67rem
Kompakte Listen, Formfelder
spacing-40
1.00rem
Standard-Block-Gap, Card-Padding
spacing-50
1.50rem
Sections-Trennung, Columns-Gap
spacing-60
2.25rem
Grossere Sektionsabstande
spacing-70
3.38rem
Hero-Padding, Footer-Oberkante
03 — Typografie
Design-Tokens: Schriftpaarung
Zwei Schriftfamilien bilden das typografische System. Inter fur alle Prosa und Uberschriften — geometrisch, in kleinen Grossen hervorragend lesbar. Fira Code fur Code-Blocke, Metadaten und technische Annotationen — eine klare visuelle Trennung zwischen redaktionellem und technischem Inhalt.
font-family: primary
Inter
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Gewichte: 400 (Regular), 600 (Semibold), 700 (Bold), 800 (Extra Bold). Fluid-Skala von 0.75rem bis 3.75rem mit clamp()-Ausdrucken fur responsive Anpassung.
Einsatz: Uberschriften, Fliesstext, Navigation, Buttons, Labels
font-family: mono
Fira Code
Aa Bb Cc Dd Ee Ff Gg 0123456789 {} [] () => !== += —
Gewichte: 400 (Regular), 500 (Medium). Programmierligaturen aktiv. Einsatz auf Captions, Post-Metadaten, technische Referenzen und Code-Blocke beschrankt.
Einsatz: Code, Versionsbadges, Metadaten, Captions, H6-Annotationen
04 — Vorher & Nachher
Visuelle Vergleiche
Seite an Seite: Die Standard-Ausgabe von GeneratePress 3.6.1 gegenuber der verbesserten Fassung. Jedes Detail wurde uberpruft — von Button-Radien bis zur Absatz-Rhythmik.
legacy::buttons
enhanced::buttons
legacy::type-scale
enhanced::spacing-grid
legacy::navigation
enhanced::navigation
05 — Barrierefreiheit
Barrierefreiheit als Fundament
Jede Farbkombination im Token-System wurde gegen WCAG 2.1 AA gepruft. Petrol (#1B6CA8) auf Weiss (#FFFFFF) erreicht 4.7:1 fur Button-Labels. Textfarbe (#1C1B18) auf Hintergrund (#F8F7F3) ubertrifft 15:1.
15.4 : 1
Text auf Hintergrund — WCAG AAA
4.7 : 1
Button-Label auf Petrol — WCAG AA
4.5 : 1
Gedampfter Text auf Surface — WCAG AA
2px solid
Focus-Ring auf allen interaktiven Elementen
06 — Performance
Performance-Benchmarks
Kein JavaScript-Framework, kein CSS-Framework, kein Build-Tool im Frontend. Das Enhanced-Theme liefert unter 30 KB an den Browser — reines CSS und die native WordPress (*) Block-API.
Gesamte CSS-Grosse
< 18 KB
JavaScript-Payload
0 KB (kein Framework)
DOM-Tiefe (max)
8 Ebenen
Lighthouse Performance
98 / 100
07 — Anpassbarkeit
Erweiterungspunkte und Hooks
Das Enhanced-Theme baut auf der bewahrten GeneratePress-Hook-Architektur auf. Alle bestehenden Filter und Actions bleiben kompatibel. Zusatzlich stehen neue Integrationspunkte fur das Design-Token-System zur Verfugung.
// theme.json Token-Zugriff im Child-Theme
$petrol = wp_get_global_settings(
['color', 'palette', 'theme']
);
// Alle Design-Tokens als CSS-Variablen
// verfugbar im Frontend:
// var(--wp--preset--color--petrol)
// var(--wp--preset--color--background)
// var(--wp--preset--spacing--40)
// var(--wp--preset--font-family--primary)
// GeneratePress-Hooks bleiben kompatibel
add_action(
'generate_before_header',
'custom_announcement_bar'
);
add_filter(
'generate_typography_default_fonts',
function( $fonts ) {
$fonts[] = 'Inter';
$fonts[] = 'Fira Code';
return $fonts;
}
);Vollstandige theme.json-API
Alle Design-Entscheidungen leben in einer einzigen JSON-Datei. Child-Themes konnen jeden Token uberschreiben, ohne CSS schreiben zu mussen.
GeneratePress-Hook-Kompatibilitat
generate_before_header, generate_after_entry_title, generate_footer — alle 50+ Actions und Filter funktionieren unverandert.
CSS-Custom-Properties
Jeder Token wird als CSS-Variable exponiert. Eigene Komponenten konnen direkt auf das Design-System zugreifen — ohne Hex-Werte zu kopieren.
Bereit fur den nachsten Schritt?
Jede Verfeinerung ist dokumentiert, jeder Token nachvollziehbar, jede Entscheidung begrundet. Die vollstandige technische Dokumentation fuhrt Sie durch Installation, Konfiguration und Erweiterung.
generatepress/3.6.1/enhanced — GPLv2 — WordPress (*) 6.4+ — PHP 8.1+
(*) Hinweis: Hinter einigen Links stehen Affiliate-Programme. Für Sie bleibt der Preis exakt derselbe, wir erhalten jedoch eine kleine Provision, die wir direkt in unsere kommenden Recherchen investieren. Vielen Dank, dass Sie unsere Arbeit auf diese Weise unterstützen!
Views: 0