W. Mayer Gruppe · Gemeinsames Designsystem
Grundlagen: Farbe, Typografie, Raster, Abstände
Eine Familie, zwei Marken. Beide Websites teilen Schrift, Raster, Abstände, Komponenten und Verhalten – sie unterscheiden sich allein durch Logofarbe, Fotografie, Leistungsbegriffe und Call-to-Action.
01 · Markenfarben – aus den Logos gesampelt
Baugesellschaft · Grün
Logo-Grün #13A538 gesampelt · Logo-Orange #EF7D00 als Mikro-Akzentgreen-500
#13A538Logo-Grün · Band, Icons, Akzente (3,25:1 – nicht für Fließtext auf Weiß)green-700
#0E7F2BPrimär-Buttons, Links, CTA-Band · 5,1:1 auf Weißgreen-800
#0B6A24Hover / Active · 6,8:1 auf Weißgreen-900
#084D1ATiefer Grünton für Pressed-Zuständegreen-100
#E3F4E7Getönte Flächen, Chipsgreen-050
#F1FAF3Hover auf hellen Buttonsorange-500
#EF7D00Logo-Sekundärfarbe · nur als 6 px Tick im Band-Motiv, nie als TextWeiß auf green-700
Kontrastprobe
5,14 : 1WCAG AA für normalen Text erfülltTransportbetonwerk · Blau
Logo-Blau #0056A4 aus logo-transportbeton.svg gesampeltblue-500
#2A7DC9Akzent · Band, Icons (nicht für Fließtext auf Weiß)blue-700
#0056A4Logo-Blau · Primär-Buttons, Links, CTA-Band · 7,3:1 auf Weißblue-800
#004685Hover / Active · 9,5:1 auf Weißblue-900
#003A6EPressed-Zuständeblue-100
#E2EDF7Getönte Flächen, Chipsblue-050
#F0F6FBHover auf hellen Buttonsblue-300
#9CC6ECBand-Tick auf dunklem GrundWeiß auf blue-700
Kontrastprobe
7,32 : 1WCAG AA erfülltNeutrale Palette – auf beiden Seiten identisch
ink-950
#15181AÜberschriften, Nav, Chip aktivink-700
#3F4549Fließtext · 9,7:1ink-500
#5E666CEyebrows, Captions, Meta · 5,8:1line-300
#D5DADDInputs, Chipsline-200
#E1E5E8Karten-Ränder, Trennliniensurface-050
#F4F6F7Wechselnde Sektionsflächen, Footer02 · Typografie – Manrope (Google Fonts), identisch auf beiden Seiten
H1Wir bauen, was Bestand hat.Desktop 68 px / Mobil 44 px · 700 · LH 1.04 · Tracking −1,5 %
H2Qualität aus Östringen. Seit 1972.Desktop 48 px / Mobil 34 px · 700 · LH 1.10
H3Hochbau, Tiefbau, BauplanungDesktop 30 px / Mobil 25 px · 700 · LH 1.20
H4 / Karten-TitelTransportbeton aus eigener ProduktionDesktop 24 px / Mobil 22 px · 700 · LH 1.25
Body largeSeit fast 100 Jahren realisieren wir Bauprojekte mit Erfahrung, Präzision und Verantwortung.Desktop 20 px / Mobil 18 px · 400 · LH 1.50
BodyWohnungsbau, Gewerbebau und öffentliche Bauvorhaben – zuverlässig geplant und professionell umgesetzt. Absetzmulden in verschiedenen Größen – liefern, tauschen und abholen nach Vereinbarung.Desktop 17 px / Mobil 16 px · 400 · LH 1.60
Eyebrow / LabelLeistungen · Referenzen · Kontakt13 px · 600 · Tracking +8 % · Versalien · mit Band-Motiv
Caption / MetaHOCHBAU · WOHNUNGSBAU · [ORT] · [JAHR] — Schematische Darstellung, nicht maßstabsgetreu.13–14 px · 500 · LH 1.45
ButtonProjekt anfragen · Beton anfragen · Referenzen entdecken15 px · 600 · LH 1.0 · Höhe 52 px (48 px im Header)
03 · Abstände – 8-px-Basis
8Inline-Gaps, Chip-Abstände
16Button-Abstände, Formular-Zeilen
24Innenabstand Karten mobil, Tablet-Gutter
32Grid-Gutter Desktop, Karten-Padding
40Seitenrand Desktop, Formular-Padding
64Abstand Sektions-Header → Inhalt
72Sektions-Padding mobil
112Sektions-Padding Desktop
144Maximaler Sektionsabstand (Hero → Inhalt)
Radien6 px Buttons, Inputs · 10 px Karten, Bilder · 999 px Chips
Icons & MotionOutline, 1,75 px Strich · Transitions 150–250 ms · Bildzoom max. 1,02 · Pfeil +4 px
04 · Raster – 12 / 8 / 4 Spalten
Desktop ≥ 1200 px · 12 Spalten · Gutter 32 px · Rand 40 px · max. 1320 pxHero-Text 7/12 · Karten 4/12 · Referenz-Feature 7/12
Tablet 768–1199 px · 8 Spalten · Gutter 24 px · Rand 24 pxKarten als Bild + Text-Zeilen
Mobil ≤ 767 px · 4 Spalten · Gutter 16 px · Rand 20 pxAlles gestapelt, Chips horizontal scrollbar
Sektionsarchitektur – auf beiden Seiten gleich
HeaderHeroÜber unsLeistungen (3 Karten)Beweis: Referenzen / LiefergebietVertrauen (4 Blöcke)Kontakt-CTA + FormularPartner-BandFooter