Hero mit Bild-Kacheln · zweite rechts angeschnitten (wie wirsol)
Energie neu gedacht
Photovoltaik für Privat, Gewerbe und Industrie
Zwei Bild-Kacheln rechts – die zweite ist ab Desktop nach rechts geschoben und läuft randlos aus dem Bild. Auf dem Handy zeigen wir nur ein Bild in voller Breite.
Hero-Varianten · Tailwind-Stil, nativ in Greyd
Websites, die von Anfang an mitwachsen
Ein durchdachtes Fundament aus Farben, Abständen und Typografie – zentral steuerbar, konsequent konsistent, in Minuten anpassbar.
Neu im Release
Deine Web-App, spürbar schneller
Klare Strukturen, wiederverwendbare Bausteine und ein globales Style-System. So bleibt jedes Projekt wartbar und schnell.
Wir stellen ein →
Ein besserer Weg, Projekte auszuliefern
Vom ersten Entwurf bis zur fertigen Seite: ein System, das Tempo und Qualität zusammenbringt.
Cover-Variante
Wir verändern, wie Menschen bauen
Ein vollflächiges Bild mit Overlay setzt eine starke Bühne – Text und Buttons bleiben klar lesbar.
Design-System
Bausteine, die global mitdenken
Jede Sektion auf dieser Seite nutzt ausschließlich Theme-Slugs für Farbe, Abstand und Schriftgröße. Ändert sich die Primary-Farbe, zieht das automatisch durch alles.
Features
Drei Vorteile im Raster
Karten auf abgesetztem Hintergrund, gleichmäßiger Abstand über blockGap.
Global
Ein Farbwechsel im Theme wirkt auf jede Sektion – ohne Suchen und Ersetzen.
Konsistent
Gleiche Rollen nutzen gleiche Slugs. Das gibt der Seite Ruhe und Rhythmus.
Responsiv
Fluide clamp-Größen skalieren Schrift und Abstand ohne Breakpoint-Chaos.
Medien-Text-Sektion
Zweispaltig, vertikal zentriert. Über mehrere Sektionen abwechselnd links/rechts für Rhythmus.
Bild-Platzhalter
186
Analysierte Patterns
0
Hardcoded Hex-Werte
5
Spacing-Stufen
„Wenn die Primary-Farbe wechselt, ist die ganze Seite in Sekunden umgestellt. Genau so soll ein Design-System arbeiten.”
Design-Prinzip · Greyd/WordPress
FAQ
Häufige Fragen
Aufklappbar über den nativen Greyd-Accordion-Block – Inhalte über Slugs gestylt.
Weil jeder Wert aus einem Theme-Slug kommt. Ändert sich die Primary-Farbe oder das Spacing global, zieht das durch die ganze Seite – ohne einzelne Blöcke anzufassen.
Nur der Slug secondary/primary in den Global Styles wird geändert. Jeder Button, jedes Eyebrow, jede Akzentfläche folgt automatisch – kein Suchen und Ersetzen.
Über wechselnde Hintergründe (background, base, primary, foreground) und großzügiges x-large-Padding oben und unten. Das trennt Sektionen ohne Linien.
Ja. Der Greyd-Accordion nutzt echte Buttons, aria-expanded, aria-controls und role=region, sodass Tastatur- und Screenreader-Nutzung sauber funktioniert.
Bereit, so zu bauen?
Diese Seite ist die lebende Referenz. Jeder Baustein steht in der Pattern-Bibliothek.
Split-Hero
Zweispaltiger Einstieg mit Bild
Text links, Medium rechts. Ideal, wenn ein Produktbild oder Screenshot die Aussage stützt.
Bild / Screenshot
Vertrauen von führenden Teams
Nordwind
Aurea
Klarheim
Vertex
Momentum
Alles drin
Vier Features mit Icon
⚡
Schnell
Kurze Beschreibung des Vorteils.
🔒
Sicher
Kurze Beschreibung des Vorteils.
🧩
Modular
Kurze Beschreibung des Vorteils.
📈
Skalierbar
Kurze Beschreibung des Vorteils.
Bild links
Bild links, Text rechts
- Erster überzeugender Punkt
- Zweiter überzeugender Punkt
- Dritter überzeugender Punkt
Preise
Drei Pakete, ein Favorit
Start
9 €
Für den Einstieg. Alle Grundfunktionen.
Pro · beliebt
29 €
Für Teams. Mehr Limits, Priorität.
Business
79 €
Für Unternehmen. Support & SLA.
Das sagen Kundinnen und Kunden
„Sauber gebaut, in Minuten umgestellt. Genau unser Ding.”
A. Berger · Produktleitung
„Endlich konsistente Abstände über die ganze Seite.”
M. Falk · Design
„Rebranding ohne Nachtschicht – ein Slug-Wechsel reicht.”
S. Lorenz · Marketing
So läuft es
In drei Schritten
01
Slugs prüfen
Global Styles der Zielsite auslesen.
02
Muster wählen
Passende Sektion aus der Bibliothek.
03
Inhalt füllen
Texte und Bilder rein, fertig.
Cover mit Overlay
Für Sektionen mit Hintergrundbild: Overlay-Farbe sichert Kontrast.
Häufige Fragen
Muss ich Farben pro Block setzen?
Nein. Farben kommen aus semantischen Slugs, zentral im Theme definiert.
Wie wechsle ich die Primary-Farbe?
Einmal in den Global Styles. Alle Blöcke folgen automatisch.
Sind die Abstände responsiv?
Ja, die Spacing-Slugs nutzen fluide clamp-Werte.
Design-Tokens auf einen Blick
primary
secondary
foreground
base