Corporate-Farben
Nur diese sieben Werte sind für die Hauptmarke freigegeben.
Hellgrün
#35AB52Dunkelgrün
#28803DHellrot
#EA5045Dunkelrot
#BD4337Braun
#7E4B3AGrau
#7C7C7BSchwarz
#000000Grundsystem geöffnet.
Grundsystem
Verbindlich
Typografie
Myfrida für Aussagen, Signika für Lesetext.
Versorgung, die bleibt.Passend für Ihren Standort.
LocalLife verbindet moderne Automaten mit persönlicher Planung.
Label und HilfstextAbstände & Rundungen
4-Pixel-Raster, Kartenradius aus Auswahl.
12 px64 px StandardkartePille
Seitenraster
Container, Spalten und Abschnittsabstände.
max. 1280 px
Icon-System
Einheitliche SVG-Linien statt Symbolzeichen.
Verbindliche Auswahl
Stand der hochgeladenen JSON-Datei.
HauptbuttonDunkelgrün #28803DAbschnittsbeginnDirekte ÜberschriftKarten64 px RundungFormularfelderNur Text im FeldBarrierefreiheitskonflikt dokumentiert
Seitenrahmen
Topbar Desktop
Logo, Hauptnavigation, Dropdown und Anfrage.
Topbar Desktop eingefahren
Kompakte Markenpille, die sich wieder vollständig öffnet.
EingefahrenNavigation und Anfrage bleiben im Element erhalten, sind aber visuell eingeklappt.
Topbar Mobil
Logo und beschriftete Menütaste.
Seitenkopf
Bild, Titel, Erklärung und Hauptaktion.
Start / EinsatzorteVerpflegung, die passt.
Persönlich geplant und zuverlässig betrieben.
Inhaltsabschnitt
Direkter Titel, Lead und Inhaltsraster.
Passend für Ihren Standort.
Die Überschrift beginnt ohne Vorzeile.
Footer Hauptbereich
Marke, Lösungen, Unternehmen und Kontakt.
Moderne Automatenlösungen für reale Standorte.
LösungenAutomatenlösungenEinsatzorteSortiment
UnternehmenÜber unsKarriereNews
KontaktTelefonE-MailWuppertal
Footer Abschluss
Zertifikate, Copyright und Rechtliches.
© LocalLife Impressum · Datenschutz · AGB
Inhalte
H1 bis H6
Semantische Hierarchie mit deutlich größeren verbindlichen Stufen.
H1Seite
48 bis 88 pxH2Abschnitt
38 bis 64 pxH3Kapitel
30 bis 44 pxH4Kartentitel
25 bis 34 pxH5Gruppe
21 bis 28 pxH6Detail
18 bis 23 pxText & Listen
Absatz, Aufzählung und nummerierte Folge.
Kurze Absätze erklären den Nutzen.
- Persönliche Planung
- Zuverlässiger Betrieb
- Passendes Sortiment
Informationskarte
Zusammengehörige Information ohne Link.
Versorgung passend zum tatsächlichen Bedarf.
Auswahlkarte
Komplette Karte führt zu einem Ziel.
Bildkarte
Reales Bild plus kompakte Einordnung.
CTA-Abschluss
Ein klarer nächster Schritt am Abschnittsende.
Standort gemeinsam planen.
Wir prüfen, welche Lösung zu Ihrem Bedarf passt.
FAQ
Frage und aufklappbare Antwort.
Wie beginnt die Planung?
Mit einer Prüfung des Standorts und des tatsächlichen Bedarfs.
Wer betreibt die Automaten?
Logo- & Vertrauensband
Referenzen und Produktpartner getrennt.
Referenzkunden
Logo 01Logo 02Logo 03
Formulare
Textfeld
Gewählte Beschriftung steht im Feld.
Auswahl übernommen, Accessibility-Risiko siehe SYS-06.
E-Mail-Feld
Datentyp, Autocomplete und Format.
Auswahlfeld
Eine Option aus einer kurzen Liste.
Mehrzeiliger Text
Nachricht mit begrenzter Länge.
0 / 5000 Zeichen
Checkbox & Einwilligung
Eigenständige Entscheidung mit Link.
Datei-Upload & Dropzone
Auswählen oder auf die gesamte Fläche ziehen.
Datei auswählen oder hier ablegenPDF, JPG oder PNGHier ablegen
Fehlerzustand
Problem und konkrete Korrektur.
Bitte geben Sie eine vollständige E-Mail-Adresse ein.
Deaktiviertes Feld
Wert sichtbar, aber nicht bearbeitbar.
Zustände und Overlays
Hinweis
Neutrale, handlungsrelevante Information.
Hinweis
Die Konfiguration entsteht nach der Standortprüfung.
Erfolg
Abgeschlossene Handlung bestätigen.
Erfolgreich gesendet
Ihre Anfrage ist eingegangen.
Fehler
Fehler und Wiederherstellung nennen.
Versand nicht möglich
Prüfen Sie Ihre Verbindung und versuchen Sie es erneut.
Ladezustand
Benennen, was gerade geladen wird.
Standortdaten werden geladen
Leerer Zustand
Grund erklären und nächste Aktion anbieten.
Keine Ergebnisse
Ändern Sie den Suchbegriff oder setzen Sie die Filter zurück.
Dialog
Geschützte Entscheidung mit Fokus.
Beratungshinweis
Kompakter Hinweis am Viewportrand.
Kostenlose Beratung
Wir prüfen gemeinsam, was zum Standort passt.
Kontakt aufnehmenLivechat & Kontakt
Launcher und persönliche Ansprechpartnerin.
Ihre AnsprechpartnerinKatharina LuszczykPersönlich erreichbar
Animationen
Inventarisiert werden aktive Bewegungsfamilien. Varianten derselben Mechanik sind in einer Karte zusammengefasst.
Horizontale Szenenbühne
Intro und Regiomat bilden eine zusammenhängende, scrollgesteuerte Kamera.
Produktroute
Produkte folgen einzeln einer Bézier-Route durch Intro und Regiomat.
Maus-Parallax der Produkte
Jedes Produkt reagiert mit eigener Tiefe auf die Zeigerposition.
Regiomat Sortimentswechsel
Convenience zieht gestaffelt ab, Brotzeit übernimmt auf derselben Route.
Regiomat löst sich zu Nomad
Produkte, Text und Maschine verlassen die Bühne auf getrennten Bahnen.
Kaffeestrom & Tassenlandung
Strom, Fläche, Tasse, Schatten und Nomad-Einstieg laufen in einer Choreografie.
Nomad Wortaufbau & Fakten
Aussage und Fakten werden mit den originalen Schreib- und Reveal-Werten aufgebaut.
Eisflächen öffnen
Braun, Erdbeere und Vanille öffnen mit den originalen gemeinsamen Polygonkanten.
Pizza-Flächenmorph
Vier originale SVG-Flächen ändern ihre Pfade und Farben gemeinsam.
Standortlandschaft
Drei originale Landschaftsflächen richten Pfad, Farbe und Position gemeinsam aus.
Hero-Aufbau
Bild, Eyebrow, Titel und Beschreibung erscheinen in der originalen Staffelung.
Topbar Scrollzustand
Die reale Scrolllogik schaltet zwischen vollständiger Topbar und Markenpille.
Abschnitt & Kartenstagger
IntersectionObserver markiert Überschrift, Text, Karten und Medien mit Typ und Verzögerung.
Interaktive Kartenneigung
Zeigerposition steuert eine begrenzte 3D-Neigung mit ruhiger Rückkehr.
Maschinen-Seitenwechsel
Die gewählte Maschine fliegt per FLIP von der Quelle in die Zielseite, der Rest blendet über.
Beratungs-Popup
Das Popup blendet mit der originalen Deckkraft, Verschiebung und Schließbewegung ein und aus.
Livechat-Launcher & Nachricht
Launcher und erste Nachricht erscheinen nacheinander mit ihren originalen Eintrittswerten.
Nomad Scrollkamera
Eine klebende Maschinenbühne fährt durch definierte Kamera- und Kapitelzustände.
Nomad Modell- & Maßwechsel
One und Studio wechseln samt Kamera, Maßoverlay, Navigation und schwebender CTA.
Pizza Kapitelgeschichte
Observer und Tabs wechseln aktive Kapitel, Bilder und Steuerung gemeinsam.
Eis Maßgeschichte
Scroll und Tabs wählen Ansicht, Maßlinien, Text und aktiven Zustand.
Eis Datenblatt-Viewer
Preview, Laden, Dialog, Seitenwechsel und Lesefortschritt bilden einen Ablauf.
Cafeteria Scrollgeschichte
Hero, Lösung, Angebot und Kontakt übergeben Überschrift und Inhalte stufenlos.
Cafeteria Automatenwahl
Auswahlpillen wechseln Maschine, Bildschirm, Bühne und Fokus gemeinsam.
Automatenübersicht Reveal
Maschinenkarten erscheinen beim Eintritt in den Viewport gestaffelt.
Sortiment-Filter & Karten
Der originale Filter wechselt Kategorien und rendert die passenden Karten gestaffelt neu.
News-Filter
Gefilterte Karten kehren mit einer kurzen eigenen Eintrittsbewegung zurück.
Team-Karussell
Karten behalten ihren räumlichen Versatz beim Vor- und Zurückwechseln.
Kontakt-Parallax & Kartenneigung
Hintergrund, Apfel, Kontaktkarte und Formular reagieren getrennt auf Scroll und Zeiger.
Showroom Bild-Reveal
Große Ortsbilder werden nach dem Laden ruhig auf ihre Endposition gesetzt.
Raumplaner Drag & Zustände
Objekte folgen dem Zeiger, Auswahl, Fehler und Ergebnis wechseln nachvollziehbar.
Bewegungstokens
Verbindliche Dauer, Kurven und Eigenschaften.
Kurzer Zustand200 msKantenfahrt250 msTopbar-Morph500 msEin und Aus
cubic-bezier(.22, 1, .36, 1)Bewegung im Bildcubic-bezier(.65, 0, .35, 1)Eigenschaftentransform, opacity, clip-pathTopbar einfahren & ausfahren
Die vollständige Navigation wird zur Markenpille.
Einblenden & ausblenden
Für kleine Zustandswechsel ohne räumliche Herkunft.
Anfrage gespeichertDer neue Zustand ist sichtbar.
Von der Oberkante
Für Hinweise oder andere eigenständige Kantenflächen, nicht für die Topbar.
StandorthinweisEin Hinweis kommt sichtbar von der oberen Bildschirmkante.
Von den Seitenkanten
Links und rechts zeigen die tatsächliche Herkunft.
Von linksZum linken Auslöser.
Von rechtsZum rechten Auslöser.
Von der Unterkante
Für Drawer und viewportgebundene Aktionsflächen.
Standort auswählenDer Drawer bleibt seiner Kante zugeordnet.
Abschnitt aufdecken
Nur einmal für erklärende Marketingabschnitte.
Versorgung, die zum Ort passt.Ein ruhiger Maskenverlauf erklärt den Abschnittsbeginn.
Flächen
Hintergrundvarianten zur Auswahl. Erst eine bestätigte Variante wird verbindlich.
Grüner Landschaftszug
Eine breite natürliche Kurve trägt den Abschnitt.
Rund um die Uhr
Grüne Gegenkurve
Die Markenfläche öffnet sich zur Leserichtung.
Versorgung,die passt
Grüne Ufer
Farbe rahmt den Inhalt, ohne ihn zu überdecken.
Weiße Lesefläche
Roter Titelstrich
Jede Textzeile erhält drei versetzte Markerbalken.
Gemeinsamversorgt
Getrennte Landschaften
Zwei natürliche Farbzüge lassen Weiß dazwischen.
Zwei Aufgaben, eine Seite
Dunkelgrüne Landschaft
Hellgrün wächst als breite Kurve aus der Bühne.
Produkte imMittelpunkt
Foto neben Farbfeld
Fotografie und Aussage bleiben klar getrennt.
Realer Ort, klare Aussage
Offene Landschaftskanten
Breite Kurven führen zur freien Lesefläche.
Freiraum für Inhalt
Nomad Kaffeelandschaft
Gold zieht natürlich durch die dunkle Kaffeefläche.
Warme Kaffeebühne
Eiswelt Sortenlandschaft
Drei Geschmäcker verlaufen als getrennte Farbzüge.
Lieblingssorten
Sektionsübergänge
Die erste Gruppe zeigt ausschließlich isolierte Originalelemente der aktuellen Hauptseite.
Intro zu Regiomat
Nur die beiden originalen Hintergrundkonturen fahren horizontal gegeneinander.
Kaffeefläche aufbauen
Nur Weißfläche, Kaffeestrom und Bodenschatten des Originalübergangs.
Kaffee zu Eis
Nur die drei originalen Hintergrundflächen öffnen ihre gemeinsamen Kanten.
Eis zu Pizza
Nur Eisflächen und Pizza-SVGs teilen sich, färben um und formen die Kreise.
Pizza zu Standorte
Nur Pizza-SVGs und die drei Standortflächen übergeben ihre Geometrie.
Weiche Überblendung
Zwei ruhige Abschnitte wechseln ohne Raumfahrt.
Abschnitt Grün
Abschnitt Rot
Von unten übernehmen
Beide Abschnitte folgen vorwärts und rückwärts demselben Weg.
Standort
Automatenmix
Von oben aufdecken
Eine neue Fläche wächst aus der oberen Kante.
Planung
Betrieb
Von links aufdecken
Die Leserichtung trägt den nächsten Abschnitt hinein.
Bedarf
Lösung
Geteilte Flächen
Flächen und Wörter fahren als gemeinsame Einheiten ein.
Zwei Perspektiven
GemeinsameLösung
Ruhige Kantenübergabe
Eine feste Farbkante übernimmt den Abschnitt von rechts.
Einzelne Lösungen
Ein Versorgungskonzept
Inhalt bleibt stehen
Nur die klare Farbfläche wechselt, ohne Blur oder Skalierung.
Ort verstehen
Lösung planen
Foto an Farbe
Foto und Markenfläche benutzen vorwärts und rückwärts denselben Weg.
Realer Standort
LocalLife Lösung
Diagonale Übergabe
Eine schräge Kante führt in die nächste Aussage.
Heute
Morgen versorgt
Klarer Kapitelwechsel
Eine einfarbige Fläche übernimmt ohne Morphing.
Auswahl
Entscheidung
Eigenständige Produktwelten
Die Hauptmarke bleibt bei SYS-01. Diese drei Paletten gelten ausschließlich auf den benannten Produktseiten.
Farben & Schrift
Dunkle Kaffeewelt mit warmem Gold.
#120d0b#251914#d8b46a#f5efe7Myfrida + Signika
Topbar
Normal und nach dem Scrollen.
ModelleModelleHero & Kapitel
Produktbühne mit kurzer Aussage.
Kaffee wird Teil des Ortes.
Kurze Aussage, Modell und nächster Schritt.
Aktionen & Auswahl
Goldene Hauptaktion und dunkle Modellkarte.
Modell ansehen
Nomad StudioFür anspruchsvolle Kaffeestandorte
Formular & Abschluss
Dunkles Formular und markeneigener Footer.
Nomad Footer: Creme auf Kaffeebraun
Farben & Schrift
Warme Papierflächen mit Grün und Rot.
#fff8ef#145324#ef584f#e8b85dMyfrida + Signika
Topbar
Normal und nach dem Scrollen.
PizzaPizzaHero & Kapitel
Helle Produktbühne und warmer Ablauf.
Heiße Pizza. Direkt am Standort.
Produkterlebnis und Technik bleiben zusammen.
Aktionen & Produktkarte
Grüne Aktion, rote Akzente, reale Produkte.
Technik ansehen
MargheritaProduktbild und kurze Einordnung
Formular & Abschluss
Warme Formularfläche und dunkelgrüner Footer.
Pizza Footer: Weiß auf Dunkelgrün
Farben & Schrift
Flächenfarben aus der bestehenden Sortimentssektion.
Vanille#F4DFC4Erdbeere#EFD1D5Nomad-Braun#251914Pistazie#DCE5C4Myfrida + Georgia + Signika
Topbar
Normal und nach dem Scrollen.
EisEisHero & Kapitel
Helle Eiswelt mit Produkt und Geschmack.
Lieblingseis. Jederzeit.
Produkt, Sortiment und Technik werden gemeinsam gezeigt.
Aktionen & Geschmackskarte
Beerenaktion und helle Sortimentskarte.
Datenblatt ansehen
VanilleProduktbild und Sortenname
Formular & Abschluss
Helles Formular und schokoladenfarbener Footer.
Eiswelt Footer: Creme auf Schokolade