Klar, präzise, auf den Millimeter.
Dieses Designbook legt fest, wie MeinZuschnitt.de aussieht und sich anfühlt: Farben, Schrift, Abstände, Bausteine und die Seiten, auf denen Kunden Platten und Schriftzüge konfigurieren. Alles hier ist bedienbar und wird 1:1 ins Shopware-Theme übernommen.
- Haltung
- Technische Zeichnung statt Katalogseite: viel Weiß, feine Linien, Maße immer sichtbar.
- Akzent
- Ein einziger: das Logo-Grün. Es markiert, was man tun kann und was es kostet.
- Ton
- Sachlich, du-frei, kurz. „Maße eingeben“ statt „Jetzt dein Traumprojekt starten“.
Markenkern
Woraus alle Gestaltungsentscheidungen abgeleitet sind.
Das Versprechen
Du bekommst genau das Stück Platte, das du brauchst: Maß, Form, Bohrung, Kante, Schriftzug. Kein Rätselraten über den Preis, keine Anfrage per Mail.
Die Zielgruppe
Handwerker, Hausbesitzer, Werbetechniker und Bastler, die wissen, was sie wollen, und es schnell und verlässlich bestellen möchten. Mobil wie am Desktop.
Das Bild im Kopf
Die saubere Schnittkante einer Acrylplatte, die Bemaßung einer Zeichnung, der Stapel aus Holz, Grau und Anthrazit im Logo. Kein Lifestyle, kein Stockfoto-Lächeln.
Farben
Aus dem Logo gemessen. Klick auf eine Farbe kopiert den Hex-Wert.
Markenfarben
Graustufen, leicht ins Blaugrün getönt
Status
Kontraste, geprüft nach WCAG
Regel: Grün ist Aktion und Preis. Es färbt nie Flächen im Hintergrund, nie Überschriften, nie Icons ohne Funktion. Das Holz aus dem Logo bleibt Materialfarbe und wird nie zur Dekoration.
Typografie
Manrope für Überschriften, Inter für alles andere. Beide frei lizenziert (OFL), im Theme selbst gehostet.
Zahlen
Maße und Preise immer mit tabular-nums, damit Spalten und Zeichnungslabels stehen. Einheit mit schmalem Abstand: 800 × 600 mm, 96,22 €. Malzeichen ist „ד, nie „x“.
Schreibweise
Sie-Form vermeiden, direkte Verben: „Maße eingeben“, „In den Warenkorb“, „Zeichnung herunterladen“. Fehlermeldungen sagen, was zu tun ist: „Die Breite muss mindestens 100 mm betragen.“
Raster und Form
4-px-Raster, wenige Radien, Schatten nur für Overlays.
Abstände
Innenabstand Karten 16 bis 20, zwischen Sektionen 40 bis 64, Formularfelder 12 nebeneinander, 16 untereinander.
Radien und Linien
Linien 1 px Grau 300. Schatten 0 10px 30px rgba(47,58,64,.12) nur für Menüs, Dialoge, Offcanvas. Fokusring 3 px Grün 40 %.
Seitenraster
Inhaltsbreite 1280 px, 12 Spalten, Rinne 24 px. Produktseite: Zeichnung 7 Spalten, Konfigurator 5 Spalten mit klebender Preisbox. Ab 900 px eine Spalte, Zeichnung oben.
Komponenten
Echte HTML-Bausteine. So sehen sie im Theme aus, so verhalten sie sich.
Buttons
Primär nur einmal je Ansicht. Der Warenkorb-Button ist deaktiviert, bis der Server die Konfiguration bestätigt hat, und zeigt währenddessen den Ladezustand.
Felder
Auswahl
Badges und Tooltip
Tabellen, Hinweise, Preisbox, Karten
| Position | Menge | Betrag |
|---|---|---|
| Material | 0,48 m² | 43,15 € |
| Zuschnitt | 1 | 5,95 € |
| Bohrungen | 4 | 7,14 € |
| Kante poliert | 2,80 m | 10,00 € |
| Preis je Platte | 66,24 € |
Preisstruktur anzeigen
Konfigurator-UI
Die Zeichnung ist das Herz der Produktseite: maßstäblich, bemaßt, sofort verständlich. Breite und Höhe unten ändern die Zeichnung live.
Maße Rechteck
Plattendicke Konfiguration wird übernommen
Bohrlöcher + 1,79 € je Bohrung
Zeichnungsregeln
Kontur Anthrazit 1,4 px auf zartem Blau, Bemaßung in Grün mit Pfeilen außerhalb, Bohrungen als Kreis mit Fadenkreuz, Aussparungen gestrichelt. Fehlerhafte Elemente werden rot, nie ausgeblendet.
Reihenfolge
Form, Maße, Plattendicke, Kante, Bohrungen, Aussparungen, Hinweis, Preis. Optionen, die ein Produkt nicht bietet, erscheinen gar nicht, statt ausgegraut zu sein.
Rückmeldung
Jede Eingabe zeichnet sofort und schätzt den Preis lokal; der Server bestätigt in unter einer Sekunde. Erst dann wird der Warenkorb-Button aktiv.
Buchstaben-Konfigurator
Text, Schrift, Höhe. Die Vorschau zeigt die echte Schrift maßstäblich; im Shop kommen Kontur, Fläche und Schnittlänge vom Server.
Die Preise hier sind Beispielwerte aus einer vereinfachten Schätzung. Im Shop berechnet der Server aus den echten Konturen: Umriss-Rechteck × m²-Preis, Schnittlänge × Preis je Zentimeter, Rüstpauschale, Bohrungen.
Seitenlayouts
Vier Kernseiten als Skizzen mit den Bausteinen von oben. Text und Preise sind Beispiele.
Startseite
Kategorie
Produktseite mit Konfigurator
Warenkorb
Checkout bleibt Shopware-Standard mit diesen Tokens. Die Zeichnung erscheint als Thumbnail in Warenkorb, Bestellbestätigung und Kundenkonto.
Bildsprache
Logo, Icons, Produktbilder.
Icon-Variante: Favicon, App, Social-AvatarIcons
Linienicons, 1,5 px, abgerundete Enden, 24-px-Raster (Lucide-Stil). Keine gefüllten Icons, keine Emojis.
Produktbilder
Material frontal auf Weiß, echte Oberfläche, Kante sichtbar, gleiche Perspektive für alle Materialien.
Stockfotos mit Menschen, Wohnzimmer-Inszenierungen, Farbverläufe, Texte im Bild.
Anwendungsbilder (Schilder, Vitrinen, Abdeckungen) nur als zweites Bild, immer mit dem echten Produkt.
Übergabe ans Theme
Diese Tokens werden im Shopware-Child-Theme (theme.json und SCSS) hinterlegt.
/* theme.json → config.fields (Shopware-Theme-Variablen) */
"sw-color-brand-primary": { "value": "#5E9A2B" } /* Grün: Buttons, Links, Preise */
"sw-color-brand-secondary": { "value": "#2F3A40" } /* Anthrazit: Header, Footer */
"sw-background-color": { "value": "#FFFFFF" }
"sw-border-color": { "value": "#D9DDE0" }
"sw-color-success": { "value": "#5E9A2B" }
"sw-color-info": { "value": "#4A555B" }
"sw-color-warning": { "value": "#D68910" }
"sw-color-danger": { "value": "#C0392B" }
"sw-font-family-base": { "value": "'Inter', Arial, sans-serif" }
"sw-font-family-headline": { "value": "'Manrope', Arial, sans-serif" }
"sw-text-color": { "value": "#2F3A40" }
"sw-headline-color": { "value": "#2F3A40" }
/* base.scss – zusätzliche Tokens für Konfigurator und Komponenten */
:root {
--mz-green-tint: #EEF5E6; --mz-wood: #E0B27A; --mz-wood-tint: #F8EEDF;
--mz-grey-100: #F6F7F8; --mz-grey-200: #ECEEF0; --mz-grey-300: #D9DDE0;
--mz-grey-500: #8A9298; --mz-grey-600: #5F686E;
--mz-radius-field: 6px; --mz-radius-card: 10px; --mz-focus: rgba(94,154,43,.4);
--mz-draw-line: #2F3A40; --mz-draw-fill: #EAF1F7; --mz-draw-dim: #5E9A2B;
}
Umsetzung
Child-Theme „MeinZuschnittTheme“ erbt vom Storefront-Theme, überschreibt Variablen, Buy-Widget, Header/Footer und die Konfigurator-Templates. Startseite als CMS-Layout aus Hero, Materialkacheln, Schritte.
Prüfung
Jede Komponente hier hat ein Gegenstück im Theme; Abweichungen werden gegen dieses Designbook geprüft. Kontraste bleiben über 4,5 : 1 für Text, 3 : 1 für Bedienelemente.
Offen
Negativ-Logo für dunkle Flächen, Produktfotos der Materialien, Illustrationen für die drei Schritte. Bis dahin Platzhalter aus diesem Buch.