← Design Rules

Stack

Keine Deckkraft-Modifier auf semantischen Farben

Geltung
stack · web, react-native

Warum

Eine semantische Farbe steht für eine Bedeutung. Ein Zehntel davon hat keine Bedeutung. Es ist eine neue Farbe ohne Namen, ohne Definition und ohne Eintrag im System. Sie lässt sich nicht wiederverwenden, weil niemand weiß, dass es sie gibt, und sie taucht beim nächsten Mal als /12 wieder auf.

Durchsichtigkeit an sich ist erlaubt. Ein System darf mit Glas und Schleier arbeiten, wenn das zu seinem Stil gehört. Die Regel betrifft die beiläufige Deckkraft, die an einer einzelnen Stelle gesetzt wird, weil es dort gerade passte. Entscheidend ist, ob jemand eine Materialentscheidung getroffen hat oder im Vorbeigehen etwas korrigiert.

Der häufigste Anlass ist eine gedämpfte Variante für Chips und Badges. Dafür gibt es die gedämpften Stufen der Zustandsfarben. Der zweithäufigste sind Hover und Gedrückt. Dafür gibt es benannte Zustandsstufen: eine Stufe heller für Hover, eine dunkler für Gedrückt, in beiden Erscheinungen gleich. Wo ein System sie nicht hat, reicht eine Helligkeitsänderung in dieselbe Richtung. Warum heller und nicht dunkler: Kurze Zustände verschieben, dauerhafte wechseln die Palette.

Woran Du den Verstoß erkennst

Richtig / falsch

richtig    bg-muted · text-muted-foreground
           die gedämpfte Stufe plus die zugehörige Schriftfarbe
           hover:bg-primary-hover · active:bg-primary-pressed
           ohne Zustandsstufen: hover:brightness-110 · active:brightness-95

falsch     bg-primary/10
           text-destructive/60
           hover:bg-primary/90
           hover:brightness-90   (Hover dunkler statt heller)

Grenzen

Deckkraft auf einer Ebene ist etwas anderes als Deckkraft auf einer Farbe: ein ausgeblendetes Overlay, ein Bild beim Laden, ein Element im Übergang. Dort ist Deckkraft die richtige Eigenschaft, weil sie das ganze Element betrifft und keine neue Farbe erfindet.

Verwandt