Verbindliche Gestaltungsgrundlage · v1.0
Ein System für Metall, Maschine & Grün.
Die verbindlichen Farben, Schriften, Komponenten und Bildregeln der Niehle-Website. Jede weitere Seite und jedes neue Modul folgt diesem System — damit „Niehle" über alle vier Bereiche hinweg wiedererkennbar bleibt.
Farben
Typografie
Logo
Komponenten
Bildsprache
Layout & Ton
01 — Farben
Dunkle Basis, warme Neutrale, fünf Bereichsfarben.
Die Website steht auf einer tiefdunklen Fläche. Jeder Geschäftsbereich hat eine eigene Leitfarbe in drei Abstufungen — bright (Text/Akzent auf Dunkel), base (Flächen, Buttons, Balken) und deep (Verläufe, Text auf Akzent). Text auf einer Akzentfläche ist immer #0D0F0C.
Flächen (Dunkel)
surface
#0D0F0C
Primäre Seitenfläche
surface-deep
#080907
Footer
surface-panel
#141712
Suche, KI-Widget, Modale
card
#FFF @ 4%
Kartenfläche · Rand #FFF @ 9%
Text-Rampe (auf Dunkel)
Überschrift — ink#F3F4EF
Fließtext — body#C3C7BC
Sekundärtext — body-soft#B6BBAD
Gedämpft — muted#9AA08F
Label — faint#6F746A
Bereichsfarben — bright · base · deep
Garten
Grün · Privat & Garten
Kommunal
Orange · Kommunen & Profi
Metallbau
Blau · Stahl & Schmiede
Vermietung & Shop
Violett · Mieten & Teile
Service
Teal · Werkstatt & Service
Semantisch
Achtung / Auflegen
#E0483A
Hinweis: Einzelne Bereichsseiten dürfen ihre Fläche dezent in Richtung ihrer Leitfarbe tönen (z. B. Metallbau kühl, Vermietung violett-dunkel). Diese getönten Dunkeltöne werden aus surface abgeleitet — nie mehr als eine leichte Einfärbung.
02 — Typografie
Fünf Schriften, klare Rollen.
Display / SchriftzugAnton · nur „NIEHLE"
NIEHLE
HeadlinesArchivo · 800 / 900
Technik, die den Betrieb am Laufen hält.
UI · Eyebrows · Nav · ButtonsSpace Grotesk · 600 / 700
Kommunen · Bauhöfe · Galabau
Garten · Kommunal · Metallbau · Service
FließtextHanken Grotesk · 400 / 500 / 600
Von der kleinsten Heckenschere bis zum Allrad-Traktor: Beratung, Verkauf, eigene Meisterwerkstatt und Service aus einer Hand — persönlich und ehrlich, für Haus, Hof, Profi und Kommune.
Technisch · Telefon · CodesJetBrains Mono · 400 / 500
+49 36691 238 330
03 — Logo
Hexagon-Monogramm + Wortmarke.
Das Hexagon-Icon trägt die Farbe: Auf einer Bereichsseite nimmt es die Leitfarbe des Bereichs an, sonst Limette. Das „N" im Icon ist immer #0D0F0C, die Wortmarke immer neutral (#F3F4EF). So bleibt die Marke stabil, während die Farbe orientiert.
04 — Komponenten
Bausteine mit festen Regeln.
Buttons
Primär (accent base) →
Sekundär
Kontakt (neutral)
Primär = Bereichs-base auf #0D0F0C-Text, Radius 11px. Sekundär = Glas + Rand. Radius 9–12px.
Karten & Accent-Balken
Kartentitel
Fläche #FFF@4%, Rand #FFF@9%, Radius 16px, Accent-Balken 40×6.
Kartentitel
Der Balken trägt die Bereichsfarbe (base).
Kartentitel
Feature-Blöcke: Radius 18–22px.
Chips / Pills (Radius 99)
neutral
akzent-getönt
akzent-voll
CTA-Block (base → deep)
Verlaufs-CTA im Bereichsverlauf, Text in #0D0F0C.
Aktion →
05 — Hero & Bildsprache
Foto + drei Overlay-Ebenen.
Jeder Bereichs-Hero nutzt dasselbe Rezept: ein cineastisches Foto, darüber (1) ein radialer Akzent-Glow oben rechts, (2) ein 90°-Verlauf dunkel→hell von links, (3) ein 180°-Verlauf, der unten in surface ausläuft. Kopfabstand 128px. Reihenfolge im Text: Eyebrow → H1 (Archivo 900) → Lead → Buttons.
Service · seit über 30 Jahren
Service ist unsere DNA.
Der 90°-Verlauf hält die linke Seite lesbar; das Motiv sitzt rechts.
Bild-Prompt-Vorlage (für neue Hero-Motive)
Cinematic wide-angle photograph, 21:9 ultrawide, dark moody atmosphere. [Motiv des Bereichs] arranged on the RIGHT third of the frame; the LEFT two-thirds is deep shadow / empty negative space for text. Cool blue ambient base light with a warm accent glow from the right, soft volumetric haze, shallow depth of field. No text, no logos, no readable brand names. Premium editorial photography, muted desaturated palette, 2560×1088.
Regeln: Motiv rechts, Freiraum links · dunkel & entsättigt · kühles Grundlicht + warmer Akzent · keine Schrift/Logos · ~21:9, 2560×1088 · Dateiname uploads/niehle-bg-<bereich>_vN_clean.jpg.
06 — Layout & Ton
Raster, Radien, Stimme.
Max-Breiten
1240px — breite Bereichsseiten
1120px — redaktionell (Über uns)
900px — Rechtstexte
Abstände
Hero-Kopf 128px
Horizontal 40px
Sektionen 44–64px
Radien
9–12 Buttons/Inputs
16 Karten
18–22 Feature-Blöcke
99 Chips
Stimme & Ton
Deutsch, direkt, handwerklich-ehrlich. Kernbotschaften: „Service ist unsere DNA", „alles aus einer Hand", „Metall · Maschine · Grün". Regional verankert (Saale-Holzland, Jena/Gera). Konkret statt werblich, keine Floskeln, kein Fülltext. Zahlen nur, wenn sie etwas beweisen (z. B. „Bis 18 Uhr bestellt — 6 Uhr beim Kunden").
Niehle GmbH · Designsystem v1.1 · Website · Kundenportal · App · verbindlich für alle weiteren Seiten & Module
07 — App & Kundenportal
Dasselbe System, drei Oberflächen.
Website (Marketing), Web-Kundenportal und die mobile App teilen Farben, Schriften und Bausteine. Die App tritt als eigenständiges, dunkles Produkt auf — mit neutralem Slate-Grundton und Bereichsfarben nur dort, wo sie orientieren.
App-Grundton
Fläche #0a0a0c, Glas-Karten. Neutrale Akzente #B4C0CE / #94A3B8 (Slate) als Grundton.
Bereichsfarbe pro Tab
KI-Button & Logo-Glyph nehmen die Leitfarbe des aktiven Bereichs an: Shop/Mieten Violett, Service Teal, sonst Slate/Limette.
Gastmodus
Ohne Login: Shop, Mietpark, Suche, KI offen. Persönliche Tabs zeigen „Nur mit Konto". Konto erst beim Bestellen/Mieten.
Produktbilder
Illustrierte Typ-Kacheln aus Niehle Produktbild (Messer, Filter, Öl …). Kachel → Produkt-Vollseite mit Handbuch-Link.
Chrome & KI-Button
Header dunkel-transparent, Bottom-Nav mit 5 Primär-Tabs. Schwebender KI-Button (Bereichsfarbe) blendet beim Scrollen aus.
Bilder hinter Tabs
Fixierte Fotos hinter Start/Shop/Mieten/Service/Geräte/Belege — zweischichtig (Foto-Div + Schleier var(--photoveil)). In beiden Modi: Dark Foto präsent, Light als feine Textur.
News — KI-gepflegt
Website-Neuigkeiten (mehrheitlich Produkt, selten Unternehmen) nur im Footer verlinkt + Startseiten-Widget. Inhalt via window.claude.complete laufend erzeugt, Seed-Fallback.
Dark / Light
Dark ist Standard. Light geht ins neutrale Grau (nicht Beige): Fläche ~#E7E8EA, Text #17181A, Karten als dezente dunkel getönte Panels. Chrome darf dunkel bleiben. App + Web-Portal teilen den Grau-Light (niehle-theme); die Website bleibt dark-only.
Telefon-Anzeige
Überall im +49-Format: Zentrale +49 36691 238330, Fax 238333, Metallbau +49 36691 524 09.