{
  "brand": "systemlink",
  "version": "26.10.2026",
  "scope": "Aktuelles Website-Design",
  "colors": [
    {
      "name": "Systemlink Rot",
      "key": "red",
      "hex": "#DA291C",
      "css": "rgb(218, 41, 28)",
      "role": "Primäre Aktionen und Markenakzent",
      "group": "brand"
    },
    {
      "name": "Rot · Hover",
      "key": "red-hover",
      "hex": "#C52418",
      "css": "rgb(197, 36, 24)",
      "role": "Hover-Zustand der roten Buttons",
      "group": "state"
    },
    {
      "name": "Logo-Schwarz",
      "key": "black",
      "hex": "#000000",
      "css": "rgb(0, 0, 0)",
      "role": "Schwarze Logo-Flächen und Dashboard-Seitenleiste",
      "group": "brand"
    },
    {
      "name": "Hintergrund",
      "key": "background",
      "hex": "#F2F2F2",
      "css": "rgb(242, 242, 242)",
      "role": "Grundfläche der Website",
      "group": "interface",
      "sourceToken": "/Neues Design/Surface/Background",
      "alpha": 1
    },
    {
      "name": "Weiss",
      "key": "paper",
      "hex": "#FFFFFF",
      "css": "rgb(255, 255, 255)",
      "role": "Karten und helle Instrumententafeln",
      "group": "interface",
      "sourceToken": "/Neues Design/Surface/Paper",
      "alpha": 1
    },
    {
      "name": "Alternative Fläche",
      "key": "alt",
      "hex": "#E2E2E1",
      "css": "rgb(226, 226, 225)",
      "role": "Zurückgesetzte UI-Flächen",
      "group": "interface",
      "sourceToken": "/Neues Design/Surface/Alt",
      "alpha": 1
    },
    {
      "name": "Dunkle Fläche",
      "key": "dark",
      "hex": "#191919",
      "css": "rgb(25, 25, 25)",
      "role": "Dunkle Sektionen",
      "group": "interface",
      "sourceToken": "/Neues Design/Surface/Dark",
      "alpha": 1
    },
    {
      "name": "Panel",
      "key": "panel",
      "hex": "#1E1E1E",
      "css": "rgb(30, 30, 30)",
      "role": "Dunkle Karten und Datenansichten",
      "group": "interface",
      "sourceToken": "/Neues Design/Surface/Panel",
      "alpha": 1
    },
    {
      "name": "Text",
      "key": "ink",
      "hex": "#111111",
      "css": "rgb(17, 17, 17)",
      "role": "Überschriften und wichtiger Text",
      "group": "interface",
      "sourceToken": "/Neues Design/Text/Ink",
      "alpha": 1
    },
    {
      "name": "Begleittext",
      "key": "muted",
      "hex": "#616161",
      "css": "rgb(97, 97, 97)",
      "role": "Erklärungen und längere Absätze",
      "group": "interface",
      "sourceToken": "/Neues Design/Text/Muted",
      "alpha": 1
    },
    {
      "name": "Metadaten",
      "key": "subtle",
      "hex": "#9A9A9A",
      "css": "rgb(154, 154, 154)",
      "role": "Zurückhaltende Beschriftungen",
      "group": "interface",
      "sourceToken": "/Neues Design/Text/Subtle",
      "alpha": 1
    },
    {
      "name": "Begleittext auf Dunkel",
      "key": "muted-on-dark",
      "hex": "#A0A0A0",
      "css": "rgb(160, 160, 160)",
      "role": "Sekundärer Text in dunklen Panels",
      "group": "interface",
      "sourceToken": "/Neues Design/Text/Muted on Dark",
      "alpha": 1
    },
    {
      "name": "Linie auf Hell",
      "key": "line-light",
      "hex": "#1111111A",
      "css": "rgba(17, 17, 17, 0.1)",
      "role": "Trennlinien und Rahmen auf hellen Flächen",
      "group": "line",
      "sourceToken": "/Neues Design/Line/Light",
      "alpha": 0.1
    },
    {
      "name": "Linie auf Dunkel",
      "key": "line-dark",
      "hex": "#FFFFFF1A",
      "css": "rgba(255, 255, 255, 0.1)",
      "role": "Trennlinien und Rahmen auf dunklen Flächen",
      "group": "line",
      "sourceToken": "/Neues Design/Line/Dark",
      "alpha": 0.1
    },
    {
      "name": "Interface-Blau",
      "key": "accent",
      "hex": "#1E4DFF",
      "css": "rgb(30, 77, 255)",
      "role": "Auswahl, Status, Daten und technische Akzente",
      "group": "interface",
      "sourceToken": "/Neues Design/Accent",
      "alpha": 1
    },
    {
      "name": "Footer",
      "key": "footer",
      "hex": "#0E0E0E",
      "css": "rgb(14, 14, 14)",
      "role": "Dunkler Seitenabschluss",
      "group": "interface",
      "sourceToken": "/Neues Design/Surface/Footer",
      "alpha": 1
    }
  ],
  "logos": [
    {
      "file": "logo-red-black.svg",
      "name": "Primär · Hell",
      "background": "#FFFFFF",
      "kind": "logo",
      "description": "Rotes Emblem, schwarze Wortmarke."
    },
    {
      "file": "logo-red-white.svg",
      "name": "Primär · Dunkel",
      "background": "#000000",
      "kind": "logo",
      "description": "Rotes Emblem, weisse Wortmarke."
    },
    {
      "file": "logo-black.svg",
      "name": "Monochrom · Schwarz",
      "background": "#FFFFFF",
      "kind": "logo",
      "description": "Einfarbig für helle Anwendungen."
    },
    {
      "file": "logo-white.svg",
      "name": "Monochrom · Weiss",
      "background": "#DA291C",
      "kind": "logo",
      "description": "Weiss auf Markenrot oder Schwarz."
    },
    {
      "file": "emblem-red.svg",
      "name": "Emblem · Rot",
      "background": "#FFFFFF",
      "kind": "emblem",
      "description": "Eigenständiges rotes Markenzeichen."
    },
    {
      "file": "emblem-white.svg",
      "name": "Emblem · Weiss",
      "background": "#000000",
      "kind": "emblem",
      "description": "Für schwarze oder rote Flächen."
    },
    {
      "file": "emblem-black.svg",
      "name": "Emblem · Schwarz",
      "background": "#FFFFFF",
      "kind": "emblem",
      "description": "Für helle Flächen."
    }
  ],
  "typography": [
    {
      "name": "Heading 1",
      "family": "Inter",
      "weight": 500,
      "size": {
        "desktop": "96px",
        "tablet": "72px",
        "phone": "50px"
      },
      "lineHeight": {
        "desktop": "0.92em",
        "tablet": "0.92em",
        "phone": "0.95em"
      },
      "tracking": {
        "desktop": "-0.06em",
        "tablet": "-0.06em",
        "phone": "-0.055em"
      },
      "nativePresetId": "sMggOogd6"
    },
    {
      "name": "Heading 2",
      "family": "Inter",
      "weight": 500,
      "size": {
        "desktop": "64px",
        "tablet": "50px",
        "phone": "38px"
      },
      "lineHeight": {
        "desktop": "0.98em",
        "tablet": "0.98em",
        "phone": "1em"
      },
      "tracking": {
        "desktop": "-0.055em",
        "tablet": "-0.055em",
        "phone": "-0.055em"
      },
      "nativePresetId": "FULb49Z7D"
    },
    {
      "name": "Heading 3",
      "family": "Inter",
      "weight": 500,
      "size": {
        "desktop": "34px",
        "tablet": "28px",
        "phone": "26px"
      },
      "lineHeight": {
        "desktop": "1.04em",
        "tablet": "1.04em",
        "phone": "1.04em"
      },
      "tracking": {
        "desktop": "-0.05em",
        "tablet": "-0.05em",
        "phone": "-0.05em"
      },
      "nativePresetId": "zcDbeuLLz"
    },
    {
      "name": "Heading 4",
      "family": "Inter",
      "weight": 500,
      "size": {
        "desktop": "20px",
        "tablet": "20px",
        "phone": "18px"
      },
      "lineHeight": {
        "desktop": "1.15em",
        "tablet": "1.15em",
        "phone": "1.15em"
      },
      "tracking": {
        "desktop": "-0.04em",
        "tablet": "-0.04em",
        "phone": "-0.04em"
      },
      "nativePresetId": "n6bBpRgP4"
    },
    {
      "name": "Display Number",
      "family": "Inter",
      "weight": 500,
      "size": {
        "desktop": "96px",
        "tablet": "76px",
        "phone": "60px"
      },
      "lineHeight": {
        "desktop": "0.9em",
        "tablet": "0.9em",
        "phone": "0.9em"
      },
      "tracking": {
        "desktop": "-0.06em",
        "tablet": "-0.06em",
        "phone": "-0.06em"
      },
      "nativePresetId": "wCG1cw0mW"
    },
    {
      "name": "Body Large",
      "family": "Inter",
      "weight": 400,
      "size": {
        "desktop": "20px",
        "tablet": "18px",
        "phone": "17px"
      },
      "lineHeight": {
        "desktop": "1.35em",
        "tablet": "1.35em",
        "phone": "1.35em"
      },
      "tracking": {
        "desktop": "-0.035em",
        "tablet": "-0.035em",
        "phone": "-0.035em"
      },
      "nativePresetId": "XEzMEh5UY"
    },
    {
      "name": "Body",
      "family": "Inter",
      "weight": 400,
      "size": {
        "desktop": "16px",
        "tablet": "16px",
        "phone": "15px"
      },
      "lineHeight": {
        "desktop": "1.45em",
        "tablet": "1.45em",
        "phone": "1.45em"
      },
      "tracking": {
        "desktop": "-0.03em",
        "tablet": "-0.03em",
        "phone": "-0.03em"
      },
      "nativePresetId": "Q8lR2rXGF"
    },
    {
      "name": "Mono",
      "family": "Geist Mono",
      "weight": 500,
      "size": {
        "desktop": "15px",
        "tablet": "14px",
        "phone": "14px"
      },
      "lineHeight": {
        "desktop": "1.4em",
        "tablet": "1.4em",
        "phone": "1.4em"
      },
      "tracking": {
        "desktop": "0em",
        "tablet": "0em",
        "phone": "0em"
      },
      "nativePresetId": "vqyby9S7Y"
    },
    {
      "name": "Mono Small",
      "family": "Geist Mono",
      "weight": 500,
      "size": {
        "desktop": "13px",
        "tablet": "12px",
        "phone": "12px"
      },
      "lineHeight": {
        "desktop": "1.5em",
        "tablet": "1.5em",
        "phone": "1.5em"
      },
      "tracking": {
        "desktop": "-0.01em",
        "tablet": "-0.01em",
        "phone": "-0.01em"
      },
      "nativePresetId": "JofGnL_s6"
    },
    {
      "name": "Button",
      "family": "Geist Mono",
      "weight": 500,
      "size": {
        "desktop": "15px",
        "tablet": "14px",
        "phone": "14px"
      },
      "lineHeight": {
        "desktop": "21px",
        "tablet": "21px",
        "phone": "21px"
      },
      "tracking": {
        "desktop": "0em",
        "tablet": "0em",
        "phone": "0em"
      },
      "nativePresetId": "NIYysEIVD"
    },
    {
      "name": "Legal/Body",
      "family": "Inter",
      "weight": 400,
      "size": {
        "desktop": "16px",
        "tablet": "16px",
        "phone": "16px"
      },
      "lineHeight": {
        "desktop": "1.75em",
        "tablet": "1.75em",
        "phone": "1.7em"
      },
      "tracking": {
        "desktop": "-0.015em",
        "tablet": "-0.015em",
        "phone": "-0.015em"
      },
      "nativePresetId": "dEzap6RLi"
    },
    {
      "name": "Legal/Heading",
      "family": "Inter",
      "weight": 500,
      "size": {
        "desktop": "26px",
        "tablet": "24px",
        "phone": "22px"
      },
      "lineHeight": {
        "desktop": "1.2em",
        "tablet": "1.2em",
        "phone": "1.25em"
      },
      "tracking": {
        "desktop": "-0.035em",
        "tablet": "-0.035em",
        "phone": "-0.035em"
      },
      "nativePresetId": "zns_HpeqC"
    }
  ],
  "layout": {
    "maxWidth": 1440,
    "pageWidths": [
      1200,
      810,
      390
    ],
    "breakpoints": {
      "desktop": "ab 1200 px",
      "tablet": "810-1199 px",
      "phone": "bis 809 px"
    },
    "gutter": [
      32,
      24,
      16
    ],
    "spacing": [
      8,
      16,
      24,
      32,
      48,
      64,
      96,
      128,
      168
    ],
    "radius": 0,
    "line": "1px solid rgba(17,17,17,0.1)"
  },
  "logoRules": [
    "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."
  ],
  "principles": [
    {
      "title": "Klar",
      "text": "Grosszügige Abstände, klare Hierarchie und kurze, konkrete Aussagen."
    },
    {
      "title": "Verbunden",
      "text": "Raster, Linien und Datenflüsse machen Zusammenhänge sichtbar."
    },
    {
      "title": "Persönlich",
      "text": "Menschen, Kundenkontext und echte Arbeit stehen im Mittelpunkt."
    },
    {
      "title": "Präzise",
      "text": "Zustände und Zahlen sind beschriftet. Beispiele bleiben als Demo erkennbar."
    }
  ],
  "motion": [
    "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."
  ],
  "voice": [
    "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."
  ],
  "sources": [
    "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."
  ],
  "notes": "Diese Referenz dokumentiert das aktuelle Webdesign. Das ursprüngliche Markenhandbuch nennt Geist als Markenschrift; auf der aktuellen Website werden Inter und Geist Mono verwendet. Lokale Widgets können kleinere Datenbeschriftungen und abweichende Detailgrössen nutzen."
}