Zur Auswahl, 17.09.2026
Hover-Varianten.
Gewählt am 17.09.: Knopf B mit Farbwechsel auf #F2B30B, Shop-Kachel B mit Unterstreichung, gebaut ins System.
Damit sind die Spalten „0 = heute“ auf dieser Seite überholt: sie lesen system.css und zeigen jetzt den neuen Stand, nicht mehr den vom Vormittag. Bei den Varianten A und C hat sich außerdem das angedunkelte Gelb mitverschoben, weil es aus demselben Namen kommt. Die Varianten selbst sind unverändert geblieben.
Zwei Bedienelemente, je eine Referenz „heute“ und drei Varianten. Die Varianten leben nur auf dieser Seite und fassen das System nicht an.
#64, Primärknopf (17.09.2026), gilt für alle Knöpfe der Seite:
„Animation anders: nicht nur der rechte Slash bewegt sich, sondern auch die Schräge des großen Teils. Der Abstand der Elemente bleibt gleich. Vor Umsetzung einmal Varianten vorlegen.“
#65, Shop-Kachel im Bento-Hero der Startseite:
„Hover-Animation: Wechsel zu Gelb. Schriftfarben entsprechend anpassen. Varianten vorlegen zur Auswahl.“
#64 Primärknopf.
Gemeinsam in allen drei Varianten: die schräge rechte Kante des Körpers und der abgetrennte Strich laufen zusammen nach rechts, die Lücke bleibt 12 px, die Neigung bleibt 25,5 Grad, die linke Kante bleibt stehen. Sie unterscheiden sich in Weg, Dauer und Farbe. Zum Prüfen mit der Maus über die Knöpfe fahren, jede Variante zeigt ausschließlich die echte Live-Bewegung.
Heute im System
Bewegt sich: nur der abgetrennte Strich, er löst sich vom Körper ab. Die Schräge des Körpers bleibt stehen, die Lücke wächst dabei von 12 auf 18 px.
Weg 6 px · 160 ms · Gelb #FFCD00 nach #EBBD00 · Text Navy auf Gelb 9,2 zu 1, auf dem tieferen Gelb 7,8 zu 1.
Körperkante und Strich, 6 px
Bewegt sich: die schräge Körperkante und der Strich gemeinsam nach rechts, der Text bleibt stehen. Der kleinste Schritt weg vom Bestand, denn Weg, Dauer und Farbwechsel sind unverändert die von heute.
Weg 6 px · 160 ms · Gelb #FFCD00 nach #EBBD00 · Lücke konstant 12 px · Text Navy auf tieferem Gelb 7,8 zu 1.
Weiter und langsamer, 10 px, ohne Farbwechsel
Bewegt sich: dieselbe Kante und derselbe Strich, aber 10 px weit und über 200 ms, und das Gelb bleibt das Gelb der Marke. Die Bewegung trägt den Zustand allein, dafür ist sie deutlich sichtbar.
Weg 10 px · 200 ms · Gelb bleibt #FFCD00 · Lücke konstant 12 px · Text Navy auf Gelb 9,2 zu 1, unverändert.
6 px, und der Text läuft 2 px mit
Bewegt sich: Kante, Strich und zusätzlich der Text, letzterer um ein Drittel des Weges. Der ganze Knopf schiebt sich an, nicht nur seine Kante. Dafür steht der Text nicht mehr still, was der Vorgabe „der Abstand der Elemente bleibt gleich“ zwar nicht widerspricht, der Zusage „der Text bleibt an seinem Platz“ aber schon.
Weg 6 px, Text 2 px · 160 ms · Gelb #FFCD00 nach #EBBD00 · Lücke konstant 12 px · Text Navy auf tieferem Gelb 7,8 zu 1.
#65 Shop-Kachel.
Die Kachel steht im Bento-Hero der Startseite. In Ruhe ist sie blau, die Eyebrow gelb, die Zeile weiß mit gelbem „Shop“ und gelbem Pfeil. In allen drei Varianten wird die Fläche beim Überfahren gelb, in 160 ms. Die Eyebrow steht dabei zwingend um: sie ist in Ruhe gelb und wäre auf gelbem Grund unsichtbar.
Heute im System
Bewegt sich: nur der große Pfeil, 8 px nach rechts. Die Fläche bleibt blau, das Wort „Shop“ wechselt von Gelb auf Weiß und bekommt eine Unterstreichung.
Fläche unverändert #0049E3 · Pfeil 8 px · 160 ms · Weiß auf Blau 6,9 zu 1.
Gelb, alles Navy
Bewegt sich: die Fläche wechselt von Blau auf Gelb, alle Schriften und der Pfeil gehen auf Navy, der Pfeil läuft 8 px. Eine Farbe für den ganzen Text, kein zweiter Akzent, nichts zu erklären.
Fläche #0049E3 nach #FFCD00 · 160 ms · Pfeil 8 px · Navy auf Gelb 9,2 zu 1 für jeden Text. Preis: das Wort „Shop“ trägt im Hover kein eigenes Zeichen mehr, das es als Link ausweist.
Gelb, „Shop“ und Pfeil in Elektroblau
Bewegt sich: dieselbe Fläche, aber Eyebrow und Zeile gehen auf Navy, während das Wort „Shop“ und der Pfeil Elektroblau werden. Die zweite Markenfarbe markiert genau das, was anklickbar ist.
Fläche #0049E3 nach #FFCD00 · 160 ms · Pfeil 8 px · Navy auf Gelb 9,2 zu 1, Elektroblau auf Gelb 4,6 zu 1. Die 4,6 tragen die große Zeile (26 bis 54 px, Bold) sicher; für 16-px-Text wären sie zu knapp, deshalb bleibt die Eyebrow Navy.
Gelb, alles Navy, plus Unterstreichung
Bewegt sich: wie A, zusätzlich bekommt das Wort „Shop“ eine Navy-Unterstreichung, 2 px stark, 4 px Abstand. Begründung: in A verlieren Link und Fließtext im Hover ihren Farbunterschied, die Unterstreichung ist dann das einzige Zeichen, das noch sagt, wo man klickt, und sie ist kein neues Zeichen, sondern genau das aus dem heutigen Zustand, nur in Navy.
Fläche #0049E3 nach #FFCD00 · 160 ms · Pfeil 8 px · Navy auf Gelb 9,2 zu 1. Den Marken-Schrägstrich habe ich bewusst nicht genommen: er steht im System vor Kartentiteln und Gruppenlabeln, ist also ein Überschriftenzeichen; als Hover-Zeichen wäre er doppelt belegt.