Brand & Design Guide
FENNEXT Design Guidelines
Das visuelle System für die FENNEXT-Storefront: Akustiklösungen für Bildung, Büro und Alltag — sachlich, modern, aufgeräumt. Orientiert am flachen, großzügigen Logitech-Layout.
Version 1.0 · 2026
Brand & Design Guide
Das visuelle System für die FENNEXT-Storefront: Akustiklösungen für Bildung, Büro und Alltag — sachlich, modern, aufgeräumt. Orientiert am flachen, großzügigen Logitech-Layout.
Version 1.0 · 2026Markenkern
FENNEXT ist die seriöse Marke für KiTas, Schulen und Büros. Der Auftritt ist hell, flach und großzügig — viel Weißraum, eine sparsame Akzentfarbe, klare Typografie. Verspieltes bleibt bewusst der Gaming-Sub-Marke FENNEXT G vorbehalten.
Logo
Der Fennek (Wüstenfuchs) + Wortmarke. Immer als SVG verwenden (skaliert scharf). Auf hellem Grund schwarz, auf dunklem Grund weiß invertiert. Mindest-Schutzraum: die Höhe des „F".
Farben
Teal ist die einzige Akzentfarbe und wird sparsam eingesetzt (Links, kleine Highlights, primäre Buttons). Der Großteil ist Weiß, Hellgrau und tiefes Navy/Ink für Text.
Typografie
Eine einzige Schriftfamilie für alles: Figtree (Google Fonts, lizenzfrei). Geometrisch-humanistisch, ruhig — eine freie Alternative zu Logitechs „Brown". Überschriften 800, Fließtext 400–600.
Navigation & Header
Zweistufig: eine dünne Utility-Topbar (38 px, Hellgrau) mit Service-Links rechts, darunter der Haupt-Header (64 px, Weiß, sticky). Logo links, Navigation mittig-links, Icons (Suche · Merken · Warenkorb) rechts.
„Produkte" öffnet ein Full-Width-Dropdown: links Kategorie-Kacheln, daneben Produktarten-Liste, dann Lösungs-Karten, rechts Service-Links. Öffnet beim Hover; der Nav-Eintrag reicht über die volle Header-Höhe, damit das Menü beim Rübergehen offen bleibt.
Nav-Text in Ink, Service-Links in Slate.
Hellgrauer Pill-Hintergrund (#f0f2f5).
Hellgrauer Hintergrund bleibt gesetzt.
Header bleibt beim Scrollen oben, mit feiner Unterlinie.
Layout
4 px-Basisraster. Großzügig und konsistent — viel Weißraum ist Teil der Marke.
max. 1280 px · Seitenrand 40 px
96 px vertikal (großzügig)
Kacheln 24–28 px · Karten 16–20 px
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
Komponenten
Versal, kompakt, dezent gerundet (6 px). Primär = Teal, dunkel = Navy, sekundär = heller Outline.
Bildsprache
Produktfotos liegen nie auf reinem Weiß, sondern auf hellgrauen, abgerundeten Kacheln (#e7e8ea). Trick: mix-blend-mode: multiply lässt den weißen Foto-Hintergrund nahtlos im Grau verschwinden, das Produkt „schwebt". Lifestyle-/Raumbilder dagegen vollflächig (cover) in Interest- und Feature-Bereichen.
Produkt · grau + multiply, Beschriftung im Block
Gleiche Behandlung über alle Karten hinweg
Baukasten
Dünne graue Leiste: Gaming-Link, Geschäftskunden, Beratung, Sprache.
„Produkte" öffnet ein Full-Width-Dropdown: Kategorie-Kacheln + Linklisten + Lösungs-Karten.
Bild + Text links, Teal-CTA. Bei dunklem Bild weißer Text + Scrim.
Graue Kachel, Produkt + Label im Block. Quick-Tiles & Vertical-Cards.
Full-Bleed Bild + Textpanel (hell oder dunkel) zur Hervorhebung.
Runde Icons mit Label, erster Kreis aktiv (Teal).
„Alle Filter" öffnet linkes Panel mit Filtergruppen.
Versal-Label mit kurzem Teal-Strich darunter.
Layout-Prinzip
Nie zwei große Bildflächen direkt hintereinander. Helle Raster-Abschnitte, große Bild-Brüche und die dunkle Nachhaltigkeits-Sektion wechseln sich ab. Großzügige Abstände (Section-Padding ~96 px).
Sprache
Sachlich, klar, hilfreich — kein Marketing-Geschwurbel. Nutzen zuerst, kurze Sätze, konkrete Zahlen. Für Einrichtungen vertrauenswürdig und seriös (Rechnungskauf, Ausschreibung, Planung).
„Senkt den Nachhall im Klassenzimmer spürbar. Montage ohne Bohren, in unter einer Stunde."
„Das revolutionärste Akustik-Erlebnis aller Zeiten für ein völlig neues Raumgefühl!"
Sub-Marke
Gaming ist eine eigene, klar abgetrennte Welt (Prinzip wie Logitech ↔ Logitech G): dunkles Theme, Neon-Teal-Glow, Schriftart Sora, eigener Storefront. Verlinkt aus Topbar/Mega-Menü — vermischt sich aber nie mit der seriösen Hauptmarke.
Ein einzelnes „G" ist als Gaming-Marke markenrechtlich riskant (Verwechslung mit „Logitech G", eingetragene Marke). Vor Launch durch ein eigenes Zeichen ersetzen. Optionen: