Kontext

Kurz gesagt sind das alle Elemente in deiner Web-App, auf die deine Benutzer klicken können, um eine Aktion auszuführen.

Schaltflächen-Schriftart

Legt eine Standard-Schriftfamilie für Haupt-, Info- und Sekundärschaltflächen fest. Wähle eine Schriftart mit der von dir bevorzugten Schriftstärke, wir empfehlen jedoch die Schriftart Fett

Bitte beachte: Die drittrangige Schaltfläche verwendet den im Artikel Typografie definierten Schriftstil.

Das sind die Voraussetzungen für Schaltflächen:

• Dateiformat: OTF oder TTF
• Vorzugsweise eine Schriftart mit Fettdruck
• Lizenz

Farben

Hauptschaltflächen und Textfarbe

Hauptschaltflächen werden für eine primäre Aktion auf dem Bildschirm verwendet. Hauptschaltflächen werden aus zwei Farben erstellt: der Hintergrundfarbe der Hauptschaltfläche und der Textfarbe der Hauptschaltfläche. Kombiniere so, dass der Text lesbar ist.

1. Hintergrundfarbe der Hauptschaltfläche
2. Textfarbe der Hauptschaltfläche

Sekundärschaltfläche und Textfarbe

Sie wird normalerweise als alternative Aktion (zweitwichtigste) im Vergleich zur Hauptschaltfläche platziert, kann aber in manchen Fällen auch als eigenständige Option funktionieren. Sekundärschaltflächen werden ebenfalls aus zwei Farben erstellt. Hintergrundfarbe der Sekundärschaltfläche und Textfarbe der Sekundärschaltfläche. Diese Kombination sollte ebenfalls so gestaltet sein, dass sie leicht lesbar ist.

1. Hintergrundfarbe der sekundären Schaltfläche
2. Textfarbe der sekundären Schaltfläche

Drittrangige Schaltflächen und Textfarbe

Drittrangige Schaltflächen werden für zusätzliche Aktionen auf dem Bildschirm verwendet. In Bezug auf die Gestaltung: Auch hier werden Hintergrundfarbe und Textfarbe auf eine Weise gemischt, die trotzdem augenfreundlich ist. Sie werden hauptsächlich für Dropdown-Optionen und Unterkategorien (Artikelgruppen) verwendet.

1. Hintergrundfarbe einer drittrangigen Schaltfläche
2. Textfarbe einer drittrangigen Schaltfläche

Schaltflächen-Umrandungsradius

Damit kannst du die Ecken von Schaltflächen abrunden.

Primärer und sekundärer Schaltflächen-Umrandungsradius

• Wird für Randradien in Haupt- und Sekundärschaltflächen verwendet
• Standardwert: 8px

Drittrangiger Schaltflächen-Umrandungsradius

• Angewandt auf drittrangige und „Pillen“-Schaltflächen
• Standardwert: 16px