Design System
Grundbausteine der WRM-REESE Website: Farben, Typografie, Buttons, Badges und Chips, Listen sowie Flächen und Abstände. Die Werte entsprechen den globalen Farben und Typografien im Elementor-Kit.
Farben
Ein Grün als Markenfarbe, warme Kieselgrau-Töne für Flächen und ein fast schwarzer Text. Grün steht nur für Interaktion und Betonung.
Marke
Green
#006F43
Primary, Akzent, Interaktion
Green Dark
#005235
Hover, aktive Zustände
Green Light
#E6F2EC
Tint, Intro-Flächen
Kieselgrau
Kieselgrau 25 (Bg)
#ECEBE6
Seitenhintergrund
Kieselgrau 50 (Bg Subtle)
#D9D8CF
Header
Kieselgrau 75 (Bg Muted)
#C7C6B9
Gedämpfte Flächen
Kieselgrau Mittel
#C9CAB3
Ergänzungston
Kieselgrau
#B5B5A7
Ergänzungston
Text
Black (Fg)
#020004
Text, Überschriften
Gray 700 (Fg Secondary)
#444444
Fließtext, Beschreibungen
Gray 500 (Fg Muted)
#888888
Meta, nur für große Schrift
Weiß, Linien und Creme
White
#FFFFFF
Karten, Panels
Gray 50
#F8F8F8
Ruhige Flächen
Gray 200 (Border)
#E0E0E0
Rahmen, Trennlinien
Gray 300 (Border Strong)
#CCCCCC
Betonte Rahmen
Secondary (Creme)
#FDFCF0
Text auf Grün
Typografie
Eine Schrift: Libre Franklin. Überschriften stehen in Black 900 mit enger Laufweite, Fließtext in Regular. Die Werte stammen aus dem Design-Entwurf (colors_and_type.css).
Display (Hero)
80 px, mobil 40 · Black 900
Zeilenhöhe 1,0 · Laufweite −0,03 em
Abschnittstitel (H2 Startseite)
52 px, mobil 34 · Black 900
Zeilenhöhe 1,04 · Laufweite −0,025 em
Letzte Worte in Grün
H1
48 px · Black 900
Zeilenhöhe 1,1 · Laufweite −0,02 em
Kies, Sand & Splitt aus einer Hand
H2
36 px · Bold 700
Zeilenhöhe 1,25 · Laufweite −0,02 em
Unsere Baurohstoffe
H3
30 px · Bold 700
Zeilenhöhe 1,25
Geliefert per Straße, Schiene und Wasser
H4
24 px · Semibold 600
Zeilenhöhe 1,5
Werk Möllenbeck
Body
16 px · Regular 400
Zeilenhöhe 1,7
Kies, Sand, Splitt, Schotter und Mineralgemische — aufbereitet in eigenen Werken und geliefert per Straße, Schiene und Wasser.
Eyebrow
13 px · Bold 700 · Versalien
Laufweite 0,14 em · Grün
Label
12 px · Semibold 600 · Versalien
Laufweite 0,1 em
Small
14 px · Regular 400
Zeilenhöhe 1,5
Rinteln OT Möllenbeck · Seit 1962
Buttons
Eckige Buttons (Radius 0). Der Primärbutton übernimmt Farbe, Hover, Padding und Radius aus dem Kit-Button-Design, nur die Schrift ist an das Preset QRIX Button gebunden. Pro Bereich gibt es genau eine primäre Aktion.
Primär
Grün, weißer Text
Hover: #005235
Sekundär
Fläche Primary Tint, kein Rand
Hover: grün gefüllt
Textlink
Grün, ohne Fläche und Rand
Hover: Green Dark
Sekundär hell
Fläche Weiß 20 %, kein Rand, auf Grün oder Bild
Hover: weiß gefüllt
Badges und Chips
Kleine, eckige Marker für Kurzinfos und Themen. Sie nutzen ausschließlich Kit-Presets und Kit-Farben, keine eigenen Werte. Innenabstand: Badges 7 × 14 px, Chips 12 × 20 px.
Badge · Tint
Preset QRIX Label (12 px, Versalien)
Text Primary, Fläche Primary Tint
Badge · Weiß
Preset QRIX Label
Text Fg Secondary, Fläche White, auf Bg Subtle
Chip
Preset QRIX Button (14 px)
Text Primary, Fläche Primary Tint
Label
Preset QRIX Label
Text Primary, ohne Fläche
Listen
Vier Listenformen für unterschiedliche Aufgaben: Navigation, Aufzählung, Reihenfolge und Eigenschaften.
Aufzählung
Gleichrangige Punkte
Punkt in Grün
- Mineralgemische
- RC-Baustoffe
- WRM-Flexi-Blöcke
- Werkstein
Nummerierte Liste
Reihenfolge und Ablauf
Ziffern in Schwarz
- Gewinnung
- Aufbereitung
- Qualitätssicherung
- Lieferung
Eigenschaften
Leistungen und Merkmale
Häkchen in Grün
- Lieferung per Straße, Schiene und Wasser
- Eigene Hafen- und Bahnverladung
- Selbstabholung
Flächen und Abstände
Drei Flächenarten, vier Schattenstufen und eine Abstandsskala. Alle Ecken sind eckig (Radius 0), Hervorhebung passiert über einen grünen Streifen oben.
Flächen
Tint-Fläche
Für Intro-Bereiche, Hinweise und hervorgehobene Bausteine. #E6F2EC
Kieselgrau-Fläche
Für ruhige Abschnitte und den Seitenhintergrund. #ECEBE6
Karte mit Akzent
Für Panels, Menüs und Inhalte, die sich abheben sollen. Weiß mit Streifen und Schatten.
Abstände
4 px
8 px
12 px
16 px
20 px
24 px
32 px
40 px
48 px
64 px
80 px
96 px
Radius 0 px überall (Design-Entscheidung, der Entwurf sah 4 px bei Buttons und 6 px bei Karten vor) · Rahmen 1 px in #E0E0E0 · Akzentstreifen 3 px in #006F43 · Schatten sm 0 1 3 · md 0 2 8 · lg 0 4 16 · xl 0 8 32 (Schwarz, 8 bis 14 %) · Inhaltsbreite 1200 px · Abschnittsabstand 48 px · Kartenabstand 24 px
Icons
Musterauswahl zum Vergleich, noch nicht produktiv im Einsatz (aktuell läuft die Seite mit Font Awesome Solid). Alle drei Sets sind offene Lizenzen, Strichstärke 2 px, Farbe hier zur Anschauung fest Primary Green — bei Umsetzung an Kit-Farben gebunden.
Lucide
Strichstärke einheitlich, sehr neutral
Phosphor
Flächig statt Strich, auch als Duotone/Fill verfügbar
Tabler
Etwas kantiger/technischer
Wisch-Effekt
Eine Fläche fährt beim Einblenden über das Element, deckt es kurz zu und fährt wieder hinaus. Genau in der Mitte erscheint der Inhalt darunter. Vorbild: depenbrock.de. Der Effekt kommt aus dem Plugin QRIX Elementor Addons (Reiter „Erweitert“ → „QRIX Wisch-Effekt“) und startet beim Scrollen, sobald das Element sichtbar wird. Zum erneuten Ansehen die Seite neu laden.
Kies, Sand, Splitt
Die Karte erscheint hinter einer dunklen Fläche. Sie ist ein Beispiel für Teaser, Infokarten oder Kacheln.
Wir bewegen Material.
Hover-Effekte (Vorschläge)
Entschieden (Jörg, 2026-10-02): Textlinks bekommen eine wachsende Unterstreichung, „Alle … →“-Links und -Buttons einen rutschenden Pfeil. Beides kommt aus dem Plugin QRIX Elementor Addons (ab 1.0.38) und gilt ohne Einstellung überall. Karten haben ihren Hover-Effekt bereits. Bewege die Maus über die Beispiele.
1 · Unterstreichung wächst
Für Textlinks und Navigation.