UI-Concept

Weniger Regeln. Mehr Haltung.

Struktur, Raum und Timing von netconnection-gmbh.de — auf die Farben und die CSS-Grafiken dieser Website uebertragen.

Marktscan aktiv

Bestand synchron

Typo-Skala

Zwei Gewichte, negatives Tracking in px. Die px-Angabe ist der Wert bei 1920px Viewport; darunter skaliert die Groesse mit, das Tracking nicht.

Rolle	Token	@1920	Tracking	Gewicht	Probe
`h1`	`--nc-h1`	90px	-2.7px	500	Fahrzeugvertrieb
`h2`	`--nc-h2`	65px	-1.95px	500	Fahrzeugvertrieb
`h3`	`--nc-h3`	48px	-1.44px	400	Fahrzeugvertrieb
`h4`	`--nc-h4`	40px	-1.2px	500	Fahrzeugvertrieb
`h5`	`--nc-h5`	32px	-0.96px	500	Fahrzeugvertrieb
`h6`	`--nc-h6`	24px	-0.4px	500	Fahrzeugvertrieb
`.nc-xlarge`	—	32px	—	—	Fahrzeugvertrieb
`.nc-large`	—	24px	—	—	Fahrzeugvertrieb
`.nc-medium`	—	20px	—	—	Fahrzeugvertrieb
`.nc-xmedium`	—	18px	—	—	Fahrzeugvertrieb
`.nc-regular`	—	16px	—	—	Fahrzeugvertrieb
`.nc-small`	—	14px	—	—	Fahrzeugvertrieb
`.nc-tiny`	—	12px	—	—	Fahrzeugvertrieb

Palette

Jede Rolle der Vorlage hat genau einen Vantage-Ersatz. Die Herkunft steht daneben, damit spaetere Abweichungen begruendet werden koennen.

--nc-ink #04301f · Fliesstext aus #092621 dark-green

--nc-primary #006039 · Primaertiefe aus #00695c dark-aqua

--nc-accent #0b7a4a · Buttonflaeche aus #47a987 aqua-forest

--nc-accent-line #3f9e6e · Buttonrand aus #63c6a4 greenish-cyan

--nc-bright #6ee7b7 · Akzent auf Dunkel aus #8ddcc7 light-teal

--nc-tint-050 #f4faf6 · Kartenflaeche aus #f1f9f8

--nc-line #dcebe1 · Haarlinie aus #e2f0eb

--nc-negative #9c4a3c · Verlustzeile aus #4c0000 dark-maroon

Komponenten

Buttons fahren beim Hover auf 95 Prozent zusammen statt sich aufzublaehen — die Signatur der Vorlage.

Demo anfragen Alle Integrationen

Standardkarte

Tint-Flaeche, 30px Radius, kein Rahmen.

„Vier Tools gleichzeitig — das war unser Alltag."

Gradient-Haarlinie Kante blendet nach rechts aus

Weisse Karte

Weicher Streuschatten, 32px Radius.

300+Aktive Haendler

100+Schnittstellen

2 hPro Verkaeufer und Tag

Problem

Inserate manuell auf jeder Boerse pflegen
Preise ohne Marktueberblick setzen

Loesung

Automatischer Export an alle Boersen
Live-Wettbewerbsanalyse mit Preisempfehlung

Wofuer ist dieses Concept da?

Als verbindliche Referenz beim schrittweisen Umbau der Seiten.

Warum kein Lenis?

Es kapert das native Scrollen und kollidiert mit scroll-behavior und scroll-padding-top aus global.css.

Das dunkle Kapitel

Reserviert fuer Seiten mit Produktargumentation. /kontakt und /schnittstellen kommen in der Vorlage bewusst ohne aus.

Controlling & Auswertung

Grafik buendig an der Unterkante, seitlich angeschnitten.

Preismanagement

Auf Dunkel wechselt der Button auf Glas.

Jetzt beraten lassen

Schritt 1

Onboarding

Account einrichten und bestehende Systeme verbinden.

Schritt 2

Bestand importieren

Daten uebernehmen, der Rest wird automatisch ergaenzt.

Schritt 3

Verkaufen

Inserate laufen, Preise werden laufend optimiert.

Motion

444 Events der Vorlage, aber nur vier Dauern. Wer eine fuenfte einfuehrt, braucht dafuer einen Grund.

Dauer	Token	Wofuer	Herkunft
300 ms	`--nc-t-hover`	Alle Hover- und Interaktionszustaende	82 Events (MOUSE_OVER/OUT, CLICK)
500 ms	`--nc-t-enter`	Ein- und Austritte, Reveal	206 Events (SCROLL_INTO_VIEW)
550 ms	`--nc-t-tile`	Hub der Tile-Kacheln	CSS-Transition der Vorlage
3000 ms	`--nc-t-ambient`	Drift der Glas-Chips, je Etappe	Action-List a-15

Seiten-Archetypen

Alle 13 Unterseiten der Vorlage fallen in sechs Muster. Eine neue Seite waehlt eines davon, statt eine eigene Reihenfolge zu erfinden.

Home

hero
logos
problem/solution
Kapitel (dunkel)
interfaces
steps 400vh
testimonials
faq
cta

Funktions-Detail (7x)

hero
gradient-bg
output
features
interfaces
faq
cta

Index / Listing

hero
Filter
Card-Grid

Story

hero
journey
trust
deliver
cta

Konversion

hero + Formular
trust
logos
faq

Katalog

hero
Such-/Filter-Grid
cta