Hilfe:Design
Buttons und Banner - Countdown - Gestaltungsrichtlinien - Marke - Pixel Pool - Team - openSUSE-Farben - Wiki-Design
Dieser Artikel dokumentiert das Design der openSUSE-Wikis im Bento-Theme (von en: theme, ca. Motiv, Thema für graphisches Design im Softwarebereich) und sollte als Styleguide (Gestaltungsrichtlinie) benutzt werden.
Vorlagen gibt es hier und der gesamte Quellcode ist auf gitorious verfügbar.
Farbschema
Hauptfarben
| Beschreibung (Name) | Hex | RGB | Farbbeispiel | Beispiel für Anwendung der Farbe | |
|---|---|---|---|---|---|
| Dunkelgrau (Dark Grey) |
#444444 | 68 68 68 | Schriftzeichen | ||
| Mittelgrau (Medium Grey) |
#666666 | 102 102 102 | Hintergrund der Navigation | ||
| Hellgrau 1 (Light Grey 1) |
#999999 | 153 153 153 | Schrift in einem Eingabefeld, das nicht auswählt wurde | ||
| Hellgrau 2 (Light Grey 2) |
#DDDDDD | 221 221 221 | Kopf- und Fußzeile eines Kastens (Box Header and Footer) |
||
| Hintergrundgrau (BG Grey) |
#F6F6F6 | 246 246 246 | Hintergrund im Hauptteil (Body Background) |
||
| Blau 1 (Blue 1) |
#006699 | 0 102 153 | Verknüpfungen im Inhalt (Content Links) |
||
| Blau 2 (Blue 2) |
#3399CC | 51 153 204 | Verknüpfungen beim Darüberstreichen mit dem Mauszeiger (Content Links hover) |
||
| Grün 1 (Green 1) |
#669900 | 102 153 0 | Verknüpfungen außerhalb des Inhalts (Text-Links outside of content) |
||
| Hellgelb (Light Yellow) |
#FBF9EE | 251 249 238 | Hintergrund eines Kastens für Benachrichtigungen (Notification Box Background) |
||
| Gelb (Yellow) |
#FCEFA1 | 252 239 161 | Grenzlinie eines Kastens für Benachrichtigungen (Notification Box Border) |
||
| Hellrot (Light Red) |
#FEF1EC | 254 241 236 | Hintergrund eines Kastens für Fehlermeldungen (Error Notification Box Background) |
||
| Rot (Red) |
#CC0000 | 204 0 0 | Grenzlinie und Schriftzeichen eines Kastens für Fehlermeldungen (Error Notification Box Border and Font-Color) |
Die entsprechenden Farbpaletten stehen auf colourlovers.com zur Verfügung:
Palette Grau: Bento-Theme Grey
Palette Farbig: Bento-Theme Colors
Palette für Sofortbenachrichtigungen: Bento-Theme Flash
Farben für Schatten, Grenzlinien usw. (UI-Style)
| Beschreibung (Name) | Hex | RGB | Farbbeispiel | Beispiel für Anwendung der Farbe | |
|---|---|---|---|---|---|
| Sehr dunkels Grau (Dark Grey) |
#111111 | 17 17 17 | Untere Grenzlinie eines Kastens (Box Bottom Border) |
||
| Mittelgrau 2 (Medium Grey 2) |
#4E4E4E | 78 78 78 | Haupttrennlinie in Navigation (Main Navigation Separator) |
||
| Grau für dunkle Schatten (Dark Shadow Grey) |
#222222 | 34 34 34 | Schattenwurf Kasten (Box Dropshadow) |
||
| Grau für helle Schatten (Light Shadow Grey) |
#CCCCCC | 204 204 204 | Schattenwurf Kasten (Box Dropshadow) |
Auch hierfür steht die entsprechende Farbpalette auf colourlovers.com zur Verfügung:
Palette: Bento-Theme UI-Sytle
Auswahl der Icons (Standard)
Die Standardicons (Standardpiktogramme) für das Bento-Theme sind:
Auf die Icons aus dem Tango Icon Theme hat man sich nach dieser Diskussion auf der Mailing-Liste opensuse-artwork geeinigt.
Siehe auch
- Hilfe:Farben, die Palette der openSUSE Farben.