Internes Werkzeug

Design-System

Andrea Mühlberger · am.training. Diese Seite gehört nicht zur Website. Sie prüft die Tokens aus app/globals.css gegen das Referenzdokument 01-Planung/design-system.md. Alle Kontrastwerte werden beim Rendern berechnet.

Grundprinzip

Gold ist Signatur, niemals Fläche

Im Logo gemessen: 81 % Off-White, 5 % Gold, 0,7 % Anthrazit. Das Logo ist zu über vier Fünfteln leer — dieses Verhältnis ist die eigentliche Gestaltungsaussage. Der Goldanteil einer gerenderten Seite bleibt unter 8 %. Gold ist Linie, Ziffer, Button, Eyebrow und Unterstreichung. Gold ist kein Sektionshintergrund, kein Verlauf und kein Rahmen um große Bereiche.

Farbe

Palette und Rollen

Grundflächen

Kontrast gemessen gegen paper #F7F7F7

  • paperSeitenhintergrund, exakt der Logo-Grund#F7F7F71,00 : 1
  • surfaceKarten, Formularfelder#FFFFFF1,07 : 1
  • surface-sunkenAbgesetzte helle Fläche#F2F0EC1,06 : 1
  • surface-inverseDie eine dunkle Sektion pro Seite#1C1B1916,06 : 1

Zustände

Kontrast gemessen gegen paper #F7F7F7

  • successFormularbestätigung#4A6B4F5,59 : 1
  • errorFeldfehler — bewusst nicht das alte Signalrot#8E3B346,94 : 1
  • focusFocus-Ring, 2 px mit 2 px Versatz#9B825B3,42 : 1

Anthrazit / Neutral

Kontrast gemessen gegen paper #F7F7F7

  • ink-900Tiefste Fläche, Buttonschrift auf Gold#1C1B1916,06 : 1
  • ink-800Karten auf ink-900#26252314,29 : 1
  • ink-700Fließtext und Headlines (Wortmarke)#32323211,97 : 1
  • ink-600Sekundärtext, Lead, Labels#4A48458,51 : 1
  • ink-500Caption, Placeholder, Referenzlogos#6B68625,18 : 1
  • ink-400Rahmen von Bedienelementen, deaktiviert#8E8A833,21 : 1
  • ink-300Dekorative Linie#B4AFA72,04 : 1
  • ink-200Dekorativer Rahmen#D6D2CA1,41 : 1
  • ink-100Haarlinie — Standardtrennung#E8E5DF1,17 : 1
  • ink-50Abgesetzte Fläche#F2F0EC1,06 : 1

Gold / Bronze — der einzige Akzent

Kontrast gemessen gegen paper #F7F7F7

  • gold-50Sehr ruhige Fläche, max. 1× pro Seite#F7F3EC1,03 : 1
  • gold-100Zitatfläche, hervorgehobene Karte#EDE4D51,18 : 1
  • gold-200Dekorative Akzentlinie#DCCDB21,46 : 1
  • gold-300Button aktiv, Prozesslinie#C7B18C1,94 : 1
  • gold-400Button-Hover, Links auf dunkel#B0976F2,61 : 1
  • gold-500Markenton: Fläche, Linie, Ziffer, Focus#9B825B3,42 : 1
  • gold-600Kleinstmögliches Gold für Fließtext#836C4A4,66 : 1
  • gold-700Inline-Textlinks auf hell#6A573A6,45 : 1
  • gold-800Text auf Goldflächen, Link-Hover#4E402B9,37 : 1
  • gold-900Reserve#332A1C13,17 : 1

Barrierefreiheit

Kontrast — WCAG 2.2 AA

Fließtext braucht 4,5 : 1, großer Text (ab 24 px oder ab 18,7 px in Gewicht 600) und die Begrenzung von Bedienelementen brauchen 3 : 1. Die folgenden Paare entscheiden über die Umsetzung. Vier davon fallen durch — bewusst, weil sie die naheliegenden Fehler markieren.

  • Beispieltextink-700 auf paper — FließtextDer Hauptfall der gesamten Site11,97 : 1erfüllt (4,5 : 1)
  • Beispieltextink-500 auf paper — Caption, PlaceholderUntergrenze für regulären Text5,18 : 1erfüllt (4,5 : 1)
  • Beispieltextink-400 auf paper — FeldrahmenSC 1.4.11. Als Text unzulässig — Audit-Korrektur3,21 : 1erfüllt (3 : 1)
  • Beispieltextgold-500 auf paper — FLIESSTEXTFällt durch. Der Markenton ist keine Textfarbe3,42 : 1fällt durch (4,5 : 1)
  • Beispieltextgold-500 auf paper — großer Text, Linien, IconsHier zulässig: Ziffern und Headlines ab 24 px3,42 : 1erfüllt (3 : 1)
  • Beispieltextgold-700 auf paper — Inline-LinkDas goldene Textäquivalent6,45 : 1erfüllt (4,5 : 1)
  • Beispieltextgold-600 auf paper — kleinstes TextgoldKnapp über der Schwelle4,66 : 1erfüllt (4,5 : 1)
  • Beispieltextink-900 auf gold-500 — Primärbutton, RuheButtonschrift ist ink-900, niemals Weiß4,70 : 1erfüllt (4,5 : 1)
  • Beispieltextweiß auf gold-500 — Primärbutton mit weißer SchriftVerboten. Deshalb ink-9003,66 : 1fällt durch (4,5 : 1)
  • Beispieltextink-900 auf gold-600 — Hover durch AbdunkelnFällt durch. Deshalb hellt der Hover auf3,45 : 1fällt durch (4,5 : 1)
  • Beispieltextink-900 auf gold-400 — Primärbutton, HoverAufhellen statt abdunkeln — Audit-Korrektur6,15 : 1erfüllt (4,5 : 1)
  • Beispieltextink-50 auf ink-900 — dunkle SektionFließtext in der Zitat-Sektion15,12 : 1erfüllt (4,5 : 1)
  • Beispieltextgold-400 auf ink-900 — Link auf dunkel6,15 : 1erfüllt (4,5 : 1)
  • Beispieltextgold-500 auf ink-900 — Focus-Ring dunkelDerselbe Ring funktioniert hell und dunkel4,70 : 1erfüllt (3 : 1)
  • Beispieltextgold-500 auf ink-100 — Gold auf HellgrauFällt durch. Goldlinien liegen auf paper oder surface2,91 : 1fällt durch (3 : 1)

Typografie

Fraunces + DM Sans

Display-Serife und Text-Sans, beide selbst gehostet über next/font/google — die Dateien werden zur Build-Zeit geladen und von am.training ausgeliefert. Zur Laufzeit geht keine Besucher-IP an Google. Beide Familien tragen eine opsz-Achse; zusammen mit font-optical-sizing: auto folgt die Strichstärke automatisch der gerenderten Größe.

Fraunces ersetzt seit dem 2026-08-16 Bodoni Moda: Die Didone war in der Freigabefassung zu schwer lesbar. Die Achsen SOFT und WONK werden nicht angefordert und liegen damit auf ihrem Vorgabewert 0 — die Wonk-Formen sind für eine Premium-B2B-Marke zu verspielt. Die Display-Grade wurden gegenüber Bodoni Moda verkleinert und die Zeilenhöhen geöffnet, weil Fraunces eine deutlich größere x-Höhe hat: display-xl trägt bei 60 px rund 20 Zeichen pro Zeile und bleibt damit im Zielkorridor von 18–22 Zeichen — bei 80 px waren es 13.

  • display-xl40 → 60 px

    Bis in den Kundentermin

  • display-l34 → 48 px

    Aus der Praxis

  • h224 → 36 px

    Vertriebsteams entwickeln

  • h321 → 26 px

    Führungskräfteentwicklung

  • h420 px

    Zertifizierter Verkaufsberater (IHK)

  • lead17 → 20 px

    Inhouse, deutschland- und europaweit, deutsch und englisch.

  • body17 px

    Trainingsbedarfsanalyse und Transferbegleitung im Praxisalltag.

  • body-sm15 px

    Verkäuferentwicklungsprogramm für den technischen Mittelstand.

  • caption13 px

    2 Tage · Inhouse · 8–12 Teilnehmende

  • label13 Versal px

    Unternehmen

  • eyebrow12 Versal px

    Sales | Leading | Coaching

Zeilenlänge

Fließtext läuft auf 68 Zeichen, nicht auf 85 wie heute. Deutsche Komposita wie Verkäuferentwicklungsprogramm oder Trainingsbedarfsanalyse brauchen eine kurze Zeile, sonst verliert der Leser den Rücksprung. Silbentrennung ist aktiv, Umbrüche in Überschriften laufen über text-wrap: balance — nie über handgesetzte Zeilenumbrüche.

Kennzahlen

25

Jahre Vertriebserfahrung

800+

zertifizierte Absolventen

17

Trainingsprogramme

gold-500 ist hier zulässig, weil die Ziffern deutlich über 24 px liegen (3,42 : 1 erfüllt die 3 : 1 für großen Text). Die Beschriftung darunter ist ink-500, nicht Gold.

Komponenten

Buttons und Zustände

Primär

Genau einer pro Bildschirmausschnitt. Hover hellt auf (gold-400, 6,15 : 1) statt abzudunkeln — gold-600 würde 3,45 : 1 ergeben.

Sekundär

Rahmen ink-400 (3,21 : 1) statt des im Audit vorgeschlagenen ink-300 (2,04 : 1) — sonst hätte der Button keine wahrnehmbare Begrenzung.

Tertiär

Textlink mit Pfeil. gold-700, Unterstreichung bleibt — Farbe ist nie das einzige Merkmal.

Alle Seminare ansehen

Formularfeld

Bitte eine vollständige E-Mail-Adresse angeben.

Feldrahmen ink-400 (3,44 : 1 auf Weiß), Placeholder ink-500 (5,55 : 1). Fehler tragen immer Icon und Text, nie nur Farbe. Label steht sichtbar über dem Feld, nie im Placeholder.

Fläche

Die eine dunkle Sektion

Ergebnisse & Stimmen

Nach zwei Tagen hat das Team zum ersten Mal aktiv nach dem Abschluss gefragt.

Platzhalter, Vertriebsleitung

Musterfirma GmbH · echte Zitate folgen aus Phase 3

Genau eine dunkle Sektion pro Seite. Fließtext ink-50 (15,12 : 1), Sekundärtext ink-300 (7,89 : 1), Links in gold-400 (6,15 : 1). Mehrere Kontrastwechsel lassen eine Seite zusammengestückelt wirken.

Raster

Spacing — Basiseinheit 4 px

  • 4 pxp-1
  • 8 pxp-2
  • 12 pxp-3
  • 16 pxp-4
  • 24 pxp-6
  • 32 pxp-8
  • 48 pxp-12
  • 64 pxp-16
  • 96 pxp-24
  • 128 pxp-32
  • 160 pxp-40
  • 192 pxp-48

Rahmenarchitektur

Eine Karte liegt nicht flach auf dem Papier, sie sitzt in einer Fassung: äußere Fassung auf paper mit Haarlinie und 8 px Padding, innerer Kern auf surface mit eigener Innenlinie. Radien 4 px außen, 2 px innen — bewusst fast rechtwinklig.

Vom Kollegen zum Vorgesetzten

Führung übernehmen, ohne das alte Team zu verlieren.

2 Tage · Inhouse · 8–12 Teilnehmende

Bewegung

Kurven und Dauern

  • ease-standard

    cubic-bezier(.2, .8, .2, 1)

    Hover, Fokus, Farbwechsel · 180 ms

  • ease-emphasized

    cubic-bezier(.32, .72, 0, 1)

    Einblendungen, Overlays · 320–640 ms

  • ease-exit

    cubic-bezier(.4, 0, 1, 1)

    Ausblendungen · schneller als hinein

Animiert werden ausschließlich transform und opacity. Kein Parallax, kein Zahlen-Hochzählen, keine Karussells. Scroll-Einblendungen laufen einmalig über IntersectionObserver und setzen bei prefers-reduced-motion sofort auf den Endzustand — Inhalt darf nie unsichtbar bleiben, weil eine Animation unterdrückt wurde.