W. Mayer Gruppe · Gemeinsames Designsystem

Komponenten & Zustände

Jede Komponente existiert einmal – die Markenfarbe ist der einzige Parameter. Zustände: Default, Hover, Active/Pressed, Fokus (2 px Ring, 3 px Offset) und Disabled. Touch-Ziele mindestens 44 px.

01 · Buttons – Primär (gefüllt), Sekundär (Outline), auf Markenfläche
DefaultHoverActiveFokusDisabled Primär Grün
Primär Blau
Sekundär
Auf Grün
Auf Blau
02 · Links – Navigation und Text-Links
Nav DefaultLeistungen
Nav HoverLeistungen
Nav AktivLeistungen
Nav FokusLeistungen
Text-LinkMehr über uns
Hover (+4 px Pfeil)Mehr über uns
BlauAlle Leistungen
Inline im TextSiehe Datenschutz
03 · Filter-Chips – Zustand nicht nur über Farbe (Füllung + Helligkeit)
Default
Hover
Aktiv
Fokus
Östringen (Orts-Chip, Blau)
04 · Formularfelder – 52 px Höhe, 1,5 px Rand, Label immer sichtbar
Bitte PLZ und Ort angeben.
Einwilligung
05 · Leistungs-Karte und Referenz-Kachel – ganze Fläche klickbar, Bildzoom 1,02, Titel färbt sich, Pfeil +4 px
Karte Default

Hochbau

Wohnungsbau, Gewerbebau und öffentliche Bauvorhaben.

Karte Hover (Grün)

Hochbau

Wohnungsbau, Gewerbebau und öffentliche Bauvorhaben.

Karte Fokus (Blau)

Betonpumpen

Flexible Pumpentechnik für unterschiedliche Baustellen.

Referenz-Kachel
Hochbau[Ort][Jahr]

[Projektname] – Mehrfamilienhaus

06 · Header – Standard (88 px) und Sticky nach dem Hero (64 px, leichte Schattenkante)
W. Mayer Baugesellschaft
07253 / 92 92 0
Dropdown öffnet bei Hover und Fokus, schließt mit Escape; Tastaturreihenfolge: Logo → Navigation → Telefon → CTA. Sticky-Header erscheint erst nach dem Hero, 200 ms Höhe/Hintergrund-Transition.
W. Mayer Transportbetonwerk
07 · Mobile Navigation (390 px)
W. Mayer Baugesellschaft
07253 / 92 92 0

Off-Canvas, volle Höhe. Fokus wird im Menü gehalten, Escape schließt, keine Hover-Abhängigkeit. Akkordeon nur für Leistungen/Produkte.

08 · Partner-Switcher – Pre-Footer-Band (beide Richtungen)
09 · Footer – 4 Spalten, helle Fläche, Logo im Original
W. Mayer Baugesellschaft

Hochbau und Tiefbau aus Östringen – familiengeführt in fünfter Generation.

Kontakt
Justus-von-Liebig-Straße 4
76684 Östringen
07253 / 92 92 0
info@wmbau.de
© 2026 W. Mayer Baugesellschaft mbH · Impressum · DatenschutzW. Mayer Transportbetonwerk entdecken →