---
version: "alpha"
name: "DEGIT Signal"
description: "Ein gemeinsames Corporate Design für DEGIT über Office, Web und Marke hinweg."
colors:
  primary: "#2DE3A8"
  primary-strong: "#007A5A"
  secondary: "#708DFF"
  coral: "#FF6B6B"
  yellow: "#FFC857"
  violet: "#A67CFF"
  ink: "#07120D"
  foreground: "#18251F"
  muted-foreground: "#50625A"
  background: "#F4FBF8"
  surface: "#FFFFFF"
  surface-subtle: "#E7F5EF"
  border: "#C9DDD4"
  on-primary: "#07120D"
  on-ink: "#F4FBF8"
typography:
  display:
    fontFamily: "Manrope"
    fontSize: "3.5rem"
    fontWeight: 750
    lineHeight: 1.02
    letterSpacing: "-0.045em"
  h1:
    fontFamily: "Manrope"
    fontSize: "2.5rem"
    fontWeight: 720
    lineHeight: 1.08
    letterSpacing: "-0.035em"
  h2:
    fontFamily: "Manrope"
    fontSize: "1.75rem"
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Manrope"
    fontSize: "1rem"
    fontWeight: 430
    lineHeight: 1.55
  label:
    fontFamily: "Manrope"
    fontSize: "0.75rem"
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "0.08em"
rounded:
  sm: "4px"
  md: "10px"
  lg: "18px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
  xxl: "64px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "12px 18px"
  button-primary-hover:
    backgroundColor: "{colors.primary-strong}"
    textColor: "{colors.on-ink}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: "24px"
  signal-label:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: "6px 10px"
  signal-coral:
    backgroundColor: "{colors.coral}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
  signal-yellow:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
  signal-violet:
    backgroundColor: "{colors.violet}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
  muted-copy:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body}"
  subtle-panel:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
  divider:
    backgroundColor: "{colors.border}"
    height: "1px"
modes:
  dark:
    background: "#07120D"
    surface: "#0C1D15"
    surface-subtle: "#12261D"
    foreground: "#E8F3EE"
    muted-foreground: "#9DAFA6"
    border: "#233D31"
    primary: "#2DE3A8"
    secondary: "#8FA3FF"
    coral: "#FF8383"
    yellow: "#FFD878"
    violet: "#B99AFF"
---

## Overview

DEGIT Signal übersetzt die Arbeitsweise einer technologieorientierten Beratung in eine visuelle Sprache: klare Strukturen, verlässliche Verbindungen und gezielte Farbsignale. Das bestehende Mint und das charakteristische DEGIT-D bleiben der Markenkern. Hinzu kommen vier Signal-Farben, die Inhalte differenzieren, ohne die Marke in ein buntes Raster aufzulösen.

Die wiedererkennbare Signatur ist der **Signalpfad**: eine feine Linie mit wenigen Knoten, Richtungswechseln oder Abzweigungen. Sie steht für Beratung, die Menschen, Fachlichkeit und Technologie zusammenführt. Der Pfad darf strukturieren oder führen, aber nie bloß dekorieren.

## Colors

- **DEGIT Mint (`#2DE3A8`)** ist die primäre Markenfarbe und markiert Orientierung, Aktivität und Fortschritt.
- **Signal Blue (`#708DFF`)** steht für Technologie, Daten und Transformation.
- **Coral (`#FF6B6B`)** setzt menschliche, dringliche oder kontrastierende Akzente.
- **Solar Yellow (`#FFC857`)** markiert Erkenntnisse, Entscheidungen und Chancen.
- **Violet (`#A67CFF`)** kennzeichnet Zukunftsthemen, Innovation und Perspektivwechsel.
- **Deep Teal (`#07120D`)** ist der verbindende dunkle Grundton.

Farbregel: Etwa 70 Prozent ruhige Flächen, 20 Prozent Mint oder Blau und höchstens 10 Prozent Koralle, Gelb und Violett. Auf einer einzelnen Seite oder Folie werden neben Mint maximal zwei weitere Signalfarben aktiv eingesetzt.

## Typography

Manrope ist die gemeinsame Schrift für Web, Word und PowerPoint. Sie verbindet eine technische Geometrie mit offenen, gut lesbaren Formen. Überschriften stehen eng und selbstbewusst, Fließtext bleibt luftig. Versalien sind kurzen Labels vorbehalten; längere Texte werden nie in Versalien gesetzt.

Office-Dokumente verwenden 10,5 bis 11 pt Fließtext. Präsentationen verwenden mindestens 16 pt Fließtext, 35 pt Folientitel und 50 pt Titel auf der Startfolie.

## Layout

Layouts folgen einem 8-Punkt-Raster. Inhalte werden entlang klarer Achsen ausgerichtet und erhalten großzügige Außenränder. Asymmetrie ist erlaubt, solange die Leserichtung eindeutig bleibt. Signalpfade dürfen eine Achse sichtbar machen, einen Übergang verbinden oder einen hervorgehobenen Inhalt einfassen.

## Elevation & Depth

Tiefe entsteht primär über Farbflächen und Überlagerung, nicht über starke Schatten. Im Light Mode sind Schatten weich und selten. Im Dark Mode werden Ebenen über leicht hellere Teal-Flächen getrennt.

## Shapes

Das DEGIT-D enthält weiterhin den diagonalen Einschnitt als prägnantes Detail. Ecken haben einen mittleren Radius von 10 px; große Bildflächen dürfen 18 px verwenden. Signal-Knoten sind kreisförmig und klein. Linien sind 1 bis 2 px breit.

In der vollständigen Wortmarke ist der Signalpfad ein eigenständiges Sekundärelement: leicht oberhalb der Wortmarke, mit mindestens einer halben Versalbreite Abstand und rund 15 Prozent kleinerer Linien- und Knotengeometrie. Er wird nicht in das D gesetzt. Das D bleibt prägnant, orientiert sich in seiner Höhe aber an der Versalhöhe von „EGIT“ und darf die übrigen Buchstaben nicht optisch überstimmen.

## Logo Variants

- **Nur das D (`degit-d.svg`)** ist das Primärsignet für Profilbilder, Favicons, App-Icons und sehr kleine Anwendungen. Es trägt keinen Signalpfad, damit die gefaltete D-Form maximal ruhig und eindeutig bleibt.
- **Wortmarke Light (`degit-signal-light.svg`)** ist die Standardvariante auf hellen oder transparenten Flächen.
- **Wortmarke Dark (`degit-signal-dark.svg`)** ist für dunkle Flächen, Bühne und Video kontrastoptimiert.
- **Signal Mark (`degit-mark.svg`)** verbindet D und Signalpfad kompakt und darf eingesetzt werden, wenn mehr erzählerischer Markencharakter als beim reinen D gewünscht ist.

Der Signalpfad greift die visuelle Sprache von System- und Architekturdiagrammen auf. Seine Linie verbindet farbige Knoten, die für Entscheidungen, Übergaben und Wirkung stehen. Damit visualisiert er die DEGIT-Aufgabe, Strategie, Technologie und Menschen in einen belastbaren Zusammenhang zu bringen. In der Wortmarke hält er bewusst Abstand, im kompakten Signal Mark darf er enger mit dem D verzahnt sein.

## Components

Primäre Aktionen sind mint auf dunklem Text. Sekundäre Aktionen nutzen eine transparente oder ruhige Fläche mit sichtbarer Kontur. Karten werden nur eingesetzt, wenn Inhalte wirklich gruppiert werden müssen. Tabellen erhalten eine klare Kopfzeile, ausreichend Zellraum und farbige Hervorhebungen nur für bedeutungsvolle Werte.

## Do's and Don'ts

- Signalpfade verbinden echte Beziehungen oder führen durch eine Sequenz.
- Signalfarben werden semantisch und sparsam eingesetzt.
- Das Logo steht mit ausreichend Schutzraum auf ruhigen Flächen.
- Keine zufälligen Regenbogenverläufe, Neon-Glows oder flächendeckenden Farbspiele.
- Keine Ansammlung aus vielen gleichartigen Karten, Badges und Pills.
- Kein synthetisches Fett: Manrope wird in den benötigten Gewichten verwendet.