User Interface

Schaltflächen gibt es in verschiedenen Varianten mit Text, Formen, Icons oder Kombinationen. Einheitliche Schriftsatz-, Farb- und Abstandsregeln sichern die Erkennbarkeit. In Ausnahmefällen sind abweichende Designs möglich, solange die Interaktion klar bleibt.

Schaltflächen folgen einer Hierarchie: Wichtige Buttons nutzen mehr Signal Green, während weniger priorisierte Elemente dezenter gestaltet sind, um den Inhalt nicht zu überlagern.

Mögliche Zustände der Schaltflächen:

• Aktiv: Standardstatus mit klarer Interaktionsanzeige, oft durch Signal Green.
• Inaktiv: Zeigt nicht nutzbare Buttons mit entsättigten Farben.
• Umschaltbar: Form, Farbe oder Position verändern sich, z.B. bei Checkmarks.
• Mouseover (nur Desktop): Outlines werden gefüllt, Flächen weichgezeichnet, reine Text-Buttons unterstrichen oder der Schriftschnitt verändert.

Text in Schaltflächen steht allein, mit 15px Abstand neben einem Kreis oder zentriert in einer abgerundeten Fläche. Schrift: Satoshi Medium, 18px, Versalien, Farben: Weiß, WS Blue, Signal Green (für Hyperlinks). Icons sind zentriert in Kreisen (WS Blue oder Weiß) und folgen Proportionsvorgaben.

Grundflächen sind meist 50px hoch, können aber variieren (20px, 75px oder größer). Outlines haben eine Strichstärke von 1,35px. Weichzeichnung im Mouseover beträgt 3 (Adobe XD: »Objekt weichzeichnen«).

Die Anzahl der Spalten ist in Desktop-, Tablet- und Smartphone-Auflösungen unterschiedlich. Die Breite der Spalten variiert. Festgelegte Werte gibt es nur für die Randbreite und die Spaltenabstände.

Die Icons dienen der Navigation in User Interfaces und werden ausschließlich für funktionale Zwecke verwendet. Das Iconset kann nach Bedarf erweitert werden und soll keine bildhaften Icons enthalten.

Strichstärke und Größe der Icons sind proportional zur Schrift gestaltet. Daher dürfen die Icons nicht unabhängig von der Schriftgröße skaliert werden.

Sie werden einzeln oder in Kombination mit einem Kreis, beispielsweise als Teil einer Schaltfläche, verwendet. Dazu wird das Icon zentriert oder in der optischen Mitte des Kreises platziert. Für Icons in Standardgröße sind einfarbige Kreise oder Outlines mit 35px oder 50px Durchmesser vorgesehen. Die kleineren Versionen der Icons können in 20px große Kreise eingesetzt werden. Die Strichstärke der Outline orientiert sich an der des Icons und beträgt im Normalfall 1,35px.