Fliesen Witte – Styleguide & Design-System

1. Logo-Regeln

belegt Original-Logodateien direkt von www.fliesen-witte.de heruntergeladen und hier eingebettet (kein Platzhalter, keine Nachzeichnung). Die Wortmarke „Fliesen Witte" steht in fetter, kondensierter Display-Schrift; zwischen und um die Wortteile legt sich ein Raster aus fünf rechteckigen Zellen – zwei Textzellen („Fliesen", „Witte") und drei reine Fliesenquadrate dazwischen, jede Zelle mit eigenem dünnem Rahmen. Das Logo ist selbst bereits ein Fliesenraster – das ist die wichtigste Erkenntnis für die gesamte Formensprache (siehe Abschnitt 5).

Volltonversion #004f9f, für helle Flächen (belegt, Original-PNG)

Weiß-Version, für dunkle Flächen (belegt, Original-PNG)

belegt Beide Varianten wurden direkt aus wp-content/uploads/2016/04/ der Live-Website geladen und pixelgenau geprüft: Fläche #004f9f (Blauversion), reines Weiß (Negativversion). Keine Nachbildung, keine Annäherung.

Verbot, aus Kontrastprüfung Die blaue Volltonversion (#004f9f) darf niemals auf der Header-Fläche #045cb4 platziert werden (Kontrast 1,22:1, harter WCAG-Verstoß, siehe Abschnitt 2). Auf dunklen/farbigen Flächen ausschließlich die Weiß-Version verwenden.

Interpretation Das Logo liegt aktuell nur als Raster-PNG vor. Für Skalierbarkeit (Fahrzeugbeschriftung, Großdruck, Social-Media-Profilbilder) wird eine Vektorisierung (SVG) als nächster technischer Schritt empfohlen, ohne die Formensprache zu verändern.

2. Farben (Hex + Kontrastmatrix)

Vorgabe – Rollenauflösung Die im CI-Fundament festgestellten drei unkalibrierten Blautöne werden hier nicht vereinheitlicht, sondern mit klaren, sich ergänzenden Rollen belegt – das löst die Inkonsistenz konstruktiv, statt Bestehendes zu verwerfen:

Vorgabe Passend zum Kerngeschäft werden die Farbmuster selbst wie eine verlegte Fliesenfläche dargestellt: rechteckige Module, keine Rundung, eine durchgehende „Fuge" (var(--fw-grout)) statt eines gestalterisch beliebigen Abstands.

CMYK-Referenz für Print (Banner, Fahrzeugbeschriftung, Visitenkarten)

3. Typografie-Skala

Vorgabe Markenschrift Satoshi (self-hosted, nicht über Google Fonts CDN) für Überschriften, Buttons und markante UI-Elemente – passend zur fetten, blockigen Wirkung des Logos. Für Fließtext bleibt bewusst der bestehende System-Schriftstapel erhalten: Interpretation Die Kernzielgruppe (Avatar, Schritt 5) ist 45–70 Jahre alt und wenig digitalaffin – maximale Lesbarkeit im Fließtext hat Vorrang vor einheitlicher Markenschrift bis in die letzte Textzeile. Das ist eine bewusste Designentscheidung, kein Kompromiss aus Nachlässigkeit.

4. Buttons / CTAs

belegt Schatten von der Live-Seite übernommen: dezent, 0px 1px 2px rgba(0,0,0,0.05). Vorgabe Radius auf 2px verschärft (Live-Wert war 4px) – Begründung siehe Abschnitt 5, „Eckenradius".

5. Formensprache / Layout / Spacing

belegt Das Logo selbst ist – siehe Abschnitt 1 – ein Raster aus fünf rechteckigen, dünn umrandeten Zellen in einer Reihe. Das ist kein Zufall der Wortmarke, sondern die naheliegendste Formensprache für einen Fliesenleger: Fliesen werden in einem Raster verlegt, mit schmalen, gleichmäßigen Fugen dazwischen. Die gesamte Formensprache dieses Styleguides leitet sich aus genau diesem Prinzip ab, nicht aus einer generischen Webdesign-Konvention.

Grid-System (Fliesenraster-Prinzip)

Vorgabe Layout-Grundlage ist ein festes, sichtbares Modul-Raster mit einheitlicher „Fugenbreite" --fw-grout: 3px zwischen Kacheln/Karten/Bildern – analog zur Fuge zwischen echten Fliesen. Kein loses, beliebig wirkendes Whitespace-Layout, sondern klar erkennbare Reihen und Spalten:

Interpretation Dieses Raster wird für Leistungsübersichten, Bildergalerien und Referenzkacheln verwendet (siehe Gutenberg-Zuordnung „Spalten"/„Galerie", Abschnitt 11) – immer als geschlossene Fläche mit durchgehender Fuge, nie als unregelmäßig gestaffeltes „Masonry"-Layout, das dem Fliesenmotiv widersprechen würde.

Eckenradius: bewusst spitzer als der Live-Zustand

Interpretation Eine Fliese hat keine runden Ecken. 4px war ein technischer Astra-Standardwert, keine bewusste Markenentscheidung. 2px reicht aus, um Buttons/Karten nicht unangenehm scharfkantig wirken zu lassen (Barrierefreiheit/Klickflächen-Wahrnehmung), bleibt aber sichtbar näher am rechtwinkligen Charakter von Fliese und Logo als der bisherige Wert. Alle Komponenten in diesem Dokument (Abschnitt 4, 8) verwenden bereits das Token --fw-radius: 2px.

Vorgabe Abstandsraster in Achterschritten: 8 / 16 / 24 / 32 / 48 / 64px für Innenabstände und Blockabstände; die kleinere Fugenbreite (3px) bleibt dem Grid-System (Kacheln/Fliesen) vorbehalten und wird nicht mit dem 8er-Abstandsraster vermischt – zwei unterschiedliche Maßstäbe für zwei unterschiedliche Zwecke.

6. Icons

Vorgabe Das Fliesenquadrat-Motiv aus dem Logo wird zum durchgängigen Icon-Grundelement weiterentwickelt: einfache, umrandete Quadrate/Rechtecke als Aufzählungs- und Leistungssymbole (siehe Beispiel unten), statt generischer Stock-Icon-Sets.

7. Bildsprache / Maskottchen

belegt Vorhandenes Bildmaterial ist eigene, unternehmensspezifische Fotografie (Beratung, Team, Baustellenservice) – keine Stockfotos. Vorgabe Diese Linie fortführen: reale Baustellen- und Ergebnisfotos statt Stockmaterial, natürliches Licht, keine gestellten Model-Posen. Kein Maskottchen vorgesehen – passt nicht zum bodenständigen, personenbezogenen Markenkern (CI-Fundament, Teil 1) und würde der Marke „Schöpfer/Fürsorger"-Persönlichkeit widersprechen.

8. Kernkomponenten (lebende Beispiele)

Vorgabe Alle Komponenten nutzen konsequent --fw-radius: 2px (siehe Abschnitt 5) statt des bisherigen 4px-Astra-Standards – spitzer, fliesennäher, aber noch nicht scharfkantig.

Vorgabe Leistungskacheln immer im Fliesenraster aus Abschnitt 5 anordnen, nicht als freistehende Karten mit Schlagschatten – das Fugenprinzip ersetzt hier bewusst den sonst üblichen Card-Shadow-Stil.

9. Barrierefreiheit

• belegt Alle aktuell genutzten Text/Flächen-Kombinationen bestehen WCAG AA (siehe Matrix, Abschnitt 2).
• Grenze Marken-Blau (#004f9f) niemals als Text auf UI-Blau-dunkel (#045cb4) oder umgekehrt.
• Vorgabe Rahmen-Grau (#D1D5DB) ausschließlich für Rahmen/Trenner, nie als Textfarbe.
• Vorgabe Fokuszustände (Tastaturnavigation) erhalten einen sichtbaren 2px-Outline in UI-Blau dunkel, nicht nur Farbwechsel – wichtig für die eher ältere Zielgruppe (Avatar, Schritt 5).

10. Design-Tokens (CSS-Variablen)

:root{
  /* Marken-Tokens Fliesen Witte – herstellerunabhängig, für jedes CMS nutzbar */
  --fw-logo-blue: #004f9f;
  --fw-ui-blue: #046bd2;
  --fw-ui-blue-hover: #045cb4;
  --fw-text: #1e293b;
  --fw-heading: #334155;
  --fw-bg: #ffffff;
  --fw-bg-secondary: #F0F5FA;
  --fw-bg-alt: #111111;
  --fw-border: #D1D5DB;

  --fw-font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fw-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Formensprache Fliesenleger: spitzer Radius + sichtbare "Fuge" statt Whitespace-Grid */
  --fw-radius: 2px;   /* Live-Wert war 4px, siehe Abschnitt 5 */
  --fw-grout: 3px;    /* Fugenbreite im Fliesenraster, Abschnitt 5 */

  --fw-space-1: 8px; --fw-space-2: 16px; --fw-space-3: 24px;
  --fw-space-4: 32px; --fw-space-5: 48px; --fw-space-6: 64px;
}

11. Gutenberg-Blöcke – Marken-Spezifikation je Block

Text-Blöcke

Medien-Blöcke

Design-Blöcke

Theme- / Widget-Blöcke

12. Astra-Variablen

Globale Farb-Slots (--ast-global-color-0 … 8)

Customizer-Rollen-Zuweisung

Global Typography (Body, H1–H6)

Vorgabe Satoshi wird als selbst gehostete @font-face-Datei im Theme-Verzeichnis eingebunden (WOFF2), nicht über das Astra-Customizer-Feld „Google Fonts", um keine Drittanbieter-Datenübertragung an Google auszulösen – konsistent mit der im CI-Fundament geforderten Bereinigung der Datenschutzerklärung.

:root-Override-Block (Astra-Variablennamen)

:root{
  /* Astra Global Color Palette – Variablennamen-Version: Astra 3.7.0+ / 4.x
     (Feature "Global Color Palette", Appearance > Customize > Global > Colors) */
  --ast-global-color-0: #046bd2; /* Theme Color: Buttons + Links */
  --ast-global-color-1: #045cb4; /* Link-Hover / Header-Fläche */
  --ast-global-color-2: #1e293b; /* Textfarbe */
  --ast-global-color-3: #334155; /* Überschriftenfarbe */
  --ast-global-color-4: #ffffff; /* Content-Hintergrund */
  --ast-global-color-5: #F0F5FA; /* Sekundär-Hintergrund */
  --ast-global-color-6: #111111; /* Alternativ-/Footer-Hintergrund */
  --ast-global-color-7: #D1D5DB; /* Rahmen/Trenner */
  --ast-global-color-8: #004f9f; /* Marken-Blau, restriktive Sonderverwendung */

  /* Global Typography */
  --ast-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --ast-heading-font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ast-body-line-height: 1.65;
}

/* Custom Font Einbindung – self-hosted, NICHT Google Fonts */
@font-face{
  font-family: 'Satoshi';
  src: url('/wp-content/themes/astra-child-fliesenwitte/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

Offene Punkte