Klar
Grosszügige Abstände, klare Hierarchie und kurze, konkrete Aussagen.
SL
Brand Guidelines · 2026
Brand Guidelines.
Die visuelle Referenz für unsere aktuelle Website. Logos, Farben, Typografie und UI-Prinzipien – mit Dateien zum Herunterladen und einem kompakten Leitfaden.
Verbunden
Raster, Linien und Datenflüsse machen Zusammenhänge sichtbar.
Persönlich
Menschen, Kundenkontext und echte Arbeit stehen im Mittelpunkt.
Präzise
Zustände und Zahlen sind beschriftet. Beispiele bleiben als Demo erkennbar.
Das Logo bleibt das Logo.
Originale Wortmarken und Embleme als SVG. In festen Farbkombinationen und mit unveränderten Proportionen.
Primär · Hell
Rotes Emblem, schwarze Wortmarke.
Primär · Dunkel
Rotes Emblem, weisse Wortmarke.
Monochrom · Schwarz
Einfarbig für helle Anwendungen.
Monochrom · Weiss
Weiss auf Markenrot oder Schwarz.
Emblem · Rot
Emblem · Weiss
Emblem · Schwarz
ANWENDUNG & SCHUTZZONE
- Originale SVG-Dateien verwenden. Wortmarke und Emblem nicht nachbauen.
- Proportionen, Farben und Deckkraft erhalten. Keine Verzerrung, Rotation, Kontur oder Effekte.
- Die Grundkombinationen sind Schwarz, Weiss und Markenrot. Das bestehende Website-Headerlogo steht zusätzlich auf #F2F2F2.
- Fotos, Verläufe und Blau sind keine regulären Logo-Hintergründe. Eine passende solide Logo-Fläche verwenden.
- Als Arbeitsregel rund um das Logo eine Emblembreite Freiraum lassen; im Originalhandbuch ist dafür kein Zahlenwert definiert.
Jede Farbe hat eine Aufgabe.
Die aktuellen Website-Tokens mit HEX und RGB/RGBA. Rot führt zur Hauptaktion, Blau markiert Auswahl, Daten und technische Zustände.
--sl-red
Systemlink Rot
Primäre Aktionen und Markenakzent
--sl-red-hover
Rot · Hover
Hover-Zustand der roten Buttons
--sl-black
Logo-Schwarz
Schwarze Logo-Flächen und Dashboard-Seitenleiste
--sl-background
Hintergrund
Grundfläche der Website
--sl-paper
Weiss
Karten und helle Instrumententafeln
--sl-alt
Alternative Fläche
Zurückgesetzte UI-Flächen
--sl-dark
Dunkle Fläche
Dunkle Sektionen
--sl-panel
Panel
Dunkle Karten und Datenansichten
--sl-ink
Text
Überschriften und wichtiger Text
--sl-muted
Begleittext
Erklärungen und längere Absätze
--sl-subtle
Metadaten
Zurückhaltende Beschriftungen
--sl-muted-on-dark
Begleittext auf Dunkel
Sekundärer Text in dunklen Panels
--sl-line-light
Linie auf Hell
Trennlinien und Rahmen auf hellen Flächen
--sl-line-dark
Linie auf Dunkel
Trennlinien und Rahmen auf dunklen Flächen
--sl-accent
Interface-Blau
Auswahl, Status, Daten und technische Akzente
--sl-footer
Footer
Dunkler Seitenabschluss
Bei transparenten Linien ist HEX8 auf 8 Bit gerundet; der CSS-RGBA-Wert bildet die exakten 10% ab. Weiss wird auch für Text auf dunklen Flächen eingesetzt. Kunden- und Toollogos sowie Fotos bleiben in ihren Originalfarben.
Leseführung trifft Präzision.
Inter für Überschriften, Texte und grosse Zahlen. Geist Mono für Navigation, Labels und Bedienelemente.
Inter
Regular 400 / Medium 500
Aa Bb Cc · 0123456789
Ä Ö Ü ä ö ü · CHF / % / →
Ä Ö Ü ä ö ü · CHF / % / →
Geist
Mono
Mono
Medium 500 · UI und Metadaten
SYSTEME / DATEN / PROZESSE
01 → 02 → 03 · LIVE
01 → 02 → 03 · LIVE
PresetFamilie / GewichtGrösse D / T / MTracking / Zeile · D
Heading 1Inter / 50096 / 72 / 50-0.06em / 0.92em
Heading 2Inter / 50064 / 50 / 38-0.055em / 0.98em
Heading 3Inter / 50034 / 28 / 26-0.05em / 1.04em
Heading 4Inter / 50020 / 20 / 18-0.04em / 1.15em
Display NumberInter / 50096 / 76 / 60-0.06em / 0.9em
Body LargeInter / 40020 / 18 / 17-0.035em / 1.35em
BodyInter / 40016 / 16 / 15-0.03em / 1.45em
MonoGeist Mono / 50015 / 14 / 140em / 1.4em
Mono SmallGeist Mono / 50013 / 12 / 12-0.01em / 1.5em
ButtonGeist Mono / 50015 / 14 / 140em / 21px
Legal/BodyInter / 40016 / 16 / 16-0.015em / 1.75em
Legal/HeadingInter / 50026 / 24 / 22-0.035em / 1.2em
D / T / M = Desktop ab 1200 px, Tablet ab 810 px, Mobil darunter. Tracking und Zeilenhöhe in der Tabelle beziehen sich auf Desktop. Die vollständigen responsiven Werte stehen im JSON-Download. Lokale Widgets nutzen teilweise kompaktere Detailgrössen.
Das ursprüngliche Markenhandbuch nennt Geist als Markenschrift. Diese Referenz beschreibt die aktuelle Website mit Inter und Geist Mono.
Ein Raster. Ein klares System.
Quadratische Panels, feine Trennlinien, nummerierte Abschnitte und ausreichend Platz für den Inhalt.
BUTTON-VORSCHAU
56 px Standardhöhe · 44 px Header-Variante · 28 / 20 px horizontaler Innenabstand · Radius 0
04Wirkung
SYSTEMLINK / VERBUNDENE DATEN
Informationen haben eine klare Ordnung.
QUELLECRM
VERARBEITUNGAutomatisierung
KONTEXTIhr Team
SPACING-SKALA
8162432486496128168
So fühlt sich systemlink an.
Ruhige Bewegung, verständliche Sprache und Daten mit nachvollziehbarem Kontext.
Bewegung erklärt.
- Hover-Übergänge der Hauptbuttons: 450 ms, cubic-bezier(0.2, 0.7, 0.2, 1).
- Dekorative Szenen unterstützen die Erklärung. Text und Bedienung bleiben unabhängig von Bewegung lesbar.
- Animationen ausserhalb des sichtbaren Bereichs pausieren, soweit im Widget umgesetzt.
- Die Systemeinstellung für reduzierte Bewegung berücksichtigen. Keine Information nur durch Animation vermitteln.
Menschen und echte Arbeit.
- Menschen, Arbeitsumfeld und Kundensituationen stehen im Mittelpunkt der Fotografie.
- Originale Kunden- und Toollogos unverändert verwenden.
- Illustrative Zahlen und Profile sichtbar als Demo kennzeichnen.
- Zustände, Diagramme und Interaktionen erhalten klare Labels und lesbare Kontraste.
Klar. Konkret. Persönlich.
- Wir/Sie, klar und direkt. Schweizer Schreibweise mit ss.
- Mit dem konkreten Prozess und dem nächsten sinnvollen Schritt beginnen.
- Keine erfundenen Kennzahlen, Kundenstimmen, Zertifizierungen oder Partnerschaften.
- Illustrative Daten und Beispielprofile sichtbar als Demo kennzeichnen.
Alles für den nächsten Entwurf.
Der Leitfaden und das Asset-Paket halten den dokumentierten Stand vom 26.10.2026 zusammen.
WEBSITE DESIGN SYSTEMBrand
Guidelines.
Logos. Farben. Typografie.
Komponenten. Bewegung.
LEITFADEN & ORIGINALDATEIEN
Eine Referenz zum Weitergeben.
Sieben originale SVG-Master, 16 Farbrollen und zwölf Text-Presets. Dazu Raster, UI-Beispiele und die Regeln für die Anwendung.
Guideline PDF Asset-Paket ZIPDas Paket enthält die unveränderten Logo-Master und den aktuellen Website-Leitfaden. Schriftdateien werden nicht mitgeliefert.
STAND & QUELLEN
Aktuelle Framer-Farb- und Textstile: Neues Design, ausgelesen am 26.10.2026.
Aktuelle Button-Komponente, Homepage-Abstände, Dashboard- und CRM-UI.
Originales Systemlink-Markenhandbuch und unveränderte Logo-Master, ergänzt um dokumentierte Website-Entscheidungen.
Die Referenz dokumentiert das aktuelle Webdesign und verändert die ursprünglichen Marken-Master nicht.