{
  "$schema": "https://gp.grandposition.digital/tokens.json",
  "brand": "Grand Position GmbH",
  "source": "https://gp.grandposition.digital",
  "version": "2026-09",
  "theme": "dark-first",
  "color": {
    "darkAnchor": {
      "nacht": {
        "value": "#0B1E2D",
        "role": "Haupthintergrund, Dark Hero"
      },
      "tiefblau": {
        "value": "#1C3448",
        "role": "Dark Sections, Navigation"
      },
      "schieferblau": {
        "value": "#2D4F68",
        "role": "Karten auf Dark, Hover; Muted Text auf Hell"
      },
      "schiefer": {
        "value": "#8DA5BB",
        "role": "Muted Text auf Dark, Meta"
      }
    },
    "blue": {
      "eis": {
        "value": "#D0F5FF",
        "role": "Signatur-Fläche, helle Hero-Flächen"
      },
      "horizont": {
        "value": "#87DCFF",
        "role": "Karten-Akzente, Trennlinien, Link-Hover auf Dark"
      },
      "signal": {
        "value": "#1AABDF",
        "role": "Links und Interaktion auf dunklem Grund",
        "notOn": [
          "#FFFFFF"
        ]
      },
      "tiefe": {
        "value": "#0075B0",
        "role": "Primäre Buttons, Links auf hellem Grund, Logo"
      }
    },
    "magenta": {
      "rose": {
        "value": "#FFE0F3",
        "role": "Tint-Flächen, Badges auf Hell"
      },
      "magenta": {
        "value": "#FF3DA8",
        "role": "Markenmoment: Headline-Akzent, CTA auf Dark",
        "notOn": [
          "#FFFFFF"
        ],
        "largeTextOnly": true
      },
      "tiefmagenta": {
        "value": "#C4006B",
        "role": "Hover; einzige Magenta-Textfarbe auf Weiß"
      },
      "dunkelmagenta": {
        "value": "#5E0033",
        "role": "Text auf Magenta-Flächen"
      }
    },
    "teal": {
      "tealhauch": {
        "value": "#D4F7F5",
        "role": "Helle Tint-Flächen"
      },
      "teal": {
        "value": "#00C4B4",
        "role": "Labels, Icons, Button-Hover auf Dark",
        "notOn": [
          "#FFFFFF"
        ]
      },
      "tiefteal": {
        "value": "#008B7F",
        "role": "Labels auf Hell"
      },
      "dunkelteal": {
        "value": "#00413D",
        "role": "Text auf Teal-Flächen"
      }
    },
    "lime": {
      "limettenhauch": {
        "value": "#EDFFD1",
        "role": "Helle Akzentflächen"
      },
      "lime": {
        "value": "#AAFF2E",
        "role": "Kennzahlen, Ergebnisse auf Dark",
        "notOn": [
          "#FFFFFF"
        ]
      },
      "tieflime": {
        "value": "#78C400",
        "role": "Große Kennzahlen auf Hell (≥ 24 px)"
      },
      "dunkellime": {
        "value": "#2E4A00",
        "role": "Text auf Lime-Flächen"
      }
    },
    "neutral": {
      "weiss": {
        "value": "#FFFFFF"
      },
      "logoGrau": {
        "value": "#646363",
        "role": "nur Logo „position“"
      }
    },
    "semantic": {
      "dark": {
        "bg": "#0B1E2D",
        "bg2": "#1C3448",
        "text": "#FFFFFF",
        "textMuted": "#8DA5BB",
        "heading": "#FFFFFF",
        "link": "#1AABDF",
        "linkHover": "#FFFFFF",
        "accent": "#00C4B4",
        "accentNumber": "#AAFF2E",
        "accentBrand": "#FF3DA8",
        "border": "rgba(141,165,187,0.28)",
        "focus": "#1AABDF",
        "buttonPrimaryBg": "#FFFFFF",
        "buttonPrimaryText": "#0B1E2D",
        "buttonPrimaryHoverBg": "#00C4B4",
        "buttonPrimaryHoverText": "#00413D"
      },
      "light": {
        "bg": "#FFFFFF",
        "bg2": "#F2F2F2",
        "text": "#0B1E2D",
        "textMuted": "#2D4F68",
        "heading": "#0B1E2D",
        "link": "#0075B0",
        "linkHover": "#0B1E2D",
        "accent": "#008B7F",
        "accentNumber": "#78C400",
        "accentBrand": "#C4006B",
        "border": "rgba(11,30,45,0.18)",
        "focus": "#0075B0",
        "buttonPrimaryBg": "#0B1E2D",
        "buttonPrimaryText": "#FFFFFF",
        "buttonPrimaryHoverBg": "#0075B0",
        "buttonPrimaryHoverText": "#FFFFFF"
      }
    },
    "contrastRules": {
      "minBodyText": 4.5,
      "minLargeText": 3.0,
      "linkOnLight": "#0075B0",
      "linkOnDark": "#1AABDF",
      "neverAsTextOnWhite": [
        "#1AABDF",
        "#FF3DA8",
        "#00C4B4",
        "#AAFF2E"
      ],
      "tiefeOnNacht": "3.4:1 – nur als Buttonfläche mit weißem Text, nicht als Linktext",
      "twoAccentsOnOneSurface": false
    }
  },
  "font": {
    "sans": {
      "family": "Inter",
      "weights": [
        400,
        500
      ],
      "opticalSizing": true,
      "use": "Everything: display, headings, body, UI, labels"
    },
    "serif": {
      "family": "Instrument Serif",
      "styles": [
        "regular",
        "italic"
      ],
      "use": "Statements, quotes, intro paragraphs only. Never below 24px, never in UI"
    },
    "source": "Google Fonts (OFL)",
    "fallbackMail": "Arial, Helvetica, sans-serif",
    "rule": "No third typeface. Headline weight is always 500."
  },
  "type": {
    "display": {
      "size": "clamp(3rem, 7.5vw, 6.5rem)",
      "weight": 500,
      "lineHeight": 0.98,
      "letterSpacing": "-0.03em"
    },
    "h2": {
      "size": "clamp(2rem, 4vw, 3.25rem)",
      "weight": 500,
      "lineHeight": 1.05,
      "letterSpacing": "-0.02em"
    },
    "h3": {
      "size": "clamp(1.375rem, 2vw, 1.75rem)",
      "weight": 500,
      "lineHeight": 1.2,
      "letterSpacing": "-0.01em"
    },
    "statement": {
      "family": "Instrument Serif",
      "size": "clamp(1.625rem, 2.6vw, 2.5rem)",
      "weight": 400,
      "lineHeight": 1.15
    },
    "body": {
      "size": "clamp(1.125rem, 1.35vw, 1.375rem)",
      "weight": 400,
      "lineHeight": 1.4,
      "measure": "34em"
    },
    "small": {
      "size": "0.9375rem",
      "weight": 400,
      "lineHeight": 1.5
    },
    "label": {
      "size": "0.6875rem",
      "weight": 500,
      "lineHeight": 1.5,
      "letterSpacing": "0.08em",
      "transform": "uppercase",
      "wrap": "( in parentheses )"
    }
  },
  "space": {
    "gutter": "clamp(20px, 4vw, 64px)",
    "colGap": "clamp(16px, 2vw, 32px)",
    "grid": "12 columns; labels in 1–3, content in 5–13; asymmetric placement of images",
    "section": "clamp(6rem, 14vw, 14rem)",
    "block": "clamp(3rem, 6vw, 6rem)",
    "measure": "34em"
  },
  "radius": {
    "button": "2px",
    "everythingElse": "0"
  },
  "shadow": {
    "any": "none"
  },
  "motion": {
    "easeOut": "cubic-bezier(0.2, 0.7, 0.2, 1)",
    "fast": "150ms",
    "base": "600ms",
    "counter": "1200ms",
    "reducedMotion": "all durations 0"
  },
  "logo": {
    "type": "wordmark",
    "ratio": "6.6:1",
    "viewBox": "0 0 395.39 59.98",
    "colors": {
      "grand": "#0075B0",
      "position": "#646363"
    },
    "variants": {
      "original": {
        "grand": "#0075B0",
        "position": "#646363",
        "on": [
          "white",
          "very light grey"
        ]
      },
      "dunkel": {
        "grand": "#0075B0",
        "position": "#FFFFFF",
        "on": [
          "#0B1E2D",
          "#1C3448",
          "dark photos"
        ]
      },
      "eis": {
        "grand": "#0075B0",
        "position": "#0B1E2D",
        "on": [
          "#D0F5FF"
        ]
      },
      "weiss": {
        "grand": "#FFFFFF",
        "position": "#FFFFFF",
        "on": [
          "#0075B0",
          "#C4006B",
          "#008B7F",
          "#0B1E2D",
          "busy images"
        ]
      },
      "schwarz": {
        "grand": "#0B1E2D",
        "position": "#0B1E2D",
        "on": [
          "single-colour print"
        ]
      }
    },
    "clearSpace": "1 × logo height on all sides",
    "minWidth": {
      "web": "140px",
      "print": "35mm"
    },
    "headerHeight": {
      "desktop": "26px",
      "tablet": "22px",
      "mobile": "20px"
    },
    "signet": "the letter g from the wordmark on a square tile; only for favicon, app icon, avatar"
  },
  "surface": {
    "cards": "not allowed – separate related content with 1px hairlines or space",
    "icons": "not allowed",
    "gradients": "not allowed in layout; only inside imagery",
    "borders": "hairline 1px only, never boxes"
  },
  "references": {
    "visual": "Flat dark surfaces, one grotesk in few sizes, tiny parenthesised labels, asymmetric grid, imagery carries colour, no UI chrome",
    "structure": "Problem → proof → person → trust → service → reference → contact"
  },
  "scaling": {
    "rule": "1rem = 16px up to 1440px viewport; above that rem grows proportionally: max(16px, 100vw / 90). The layout zooms, nothing reflows. Below 1440px rem stays 16px and the layout reflows at breakpoints 900px and 600px.",
    "root": "max(16px, calc(100vw / 90))",
    "examples": {
      "390": "16px",
      "1440": "16px",
      "1920": "21.3px",
      "2560": "28.4px",
      "3840": "42.7px",
      "7680": "85.3px"
    },
    "units": "All sizes in rem/em. px only for 1px hairlines and breakpoints. Logo height, nav, images, spacing: rem.",
    "breakpoints": {
      "desktop": ">900px: 12-column grid, labels col 1–3, content col 5–13",
      "tablet": "≤900px: grid collapses to one column, nav wraps under logo",
      "phone": "≤600px: logo 1.375rem, colour strips 2 columns, lists single column"
    },
    "logo": {
      "headerDesktop": "1.75rem",
      "headerPhone": "1.375rem",
      "minWidth": "8.75rem (140px at 16px)"
    },
    "nav": {
      "height": "4.5rem",
      "fontSize": ".8125rem uppercase, .75rem on phone"
    },
    "test": "Render at 390, 1440, 2560, 3840 and 7680 CSS px before release; scrollWidth must equal viewport width at every step."
  }
}