Wiki - Freifunk Pinneberg

Freies WLAN im Kreis Pinneberg

Benutzer-Werkzeuge

Webseiten-Werkzeuge


styleguide

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
styleguide [04.11.2019 10:51] kevinstyleguide [05.11.2019 16:57] (aktuell) kevin
Zeile 1: Zeile 1:
-====== Farben ====== +====== Styleguide ====== 
-===== Primärfarben =====+Gültig ab 2019. Angaben gelten fürs Web. Für Print gibt es derzeit keine Vorgaben, es sollte jedoch optisch möglichst zum web passen. 
 + 
 +===== Farben ===== 
 +==== Primärfarben ====
 ^ Verwendung           ^ HEX      ^ Beispiel ^ ^ Verwendung           ^ HEX      ^ Beispiel ^
 | Primärfarbe          | #dc0067  | <color #dc0067>■■■■■■■■■</color> | | Primärfarbe          | #dc0067  | <color #dc0067>■■■■■■■■■</color> |
Zeile 6: Zeile 9:
 | Links                | #009ee0  | <color #009ee0>■■■■■■■■■</color> | | Links                | #009ee0  | <color #009ee0>■■■■■■■■■</color> |
  
-===== Sekundärfarben ===== +==== Sekundärfarben ==== 
-^ Verwendung                                 ^ HEX      ^ Beispiel ^ +^ Verwendung                       ^ HEX      ^ Beispiel                          
-| Hintergrund (hell)                         | #ffffff  | <color #ffffff>■■■■■■■■■</color>+| Hintergrund 1                    | #ffffff  | <color #ffffff>■■■■■■■■■</color>  
-| Hintergrund (mittel)                       | #f7f7f7  | <color #f7f7f7>■■■■■■■■■</color>+| Hintergrund 2                    | #f7f7f7  | <color #f7f7f7>■■■■■■■■■</color>  
-| Hintergrund (dunkel)                       | #333333  | <color #333333>■■■■■■■■■</color>+| Hintergrund 3                    | #ebebeb  | <color #ebebeb>■■■■■■■■■</color> 
-| Fließtext (heller & mittlerer Hintergrund) | #666666  | <color #666666>■■■■■■■■■</color> |+| Hintergrund 4                    | #333333  | <color #333333>■■■■■■■■■</color>  
 +| Fließtext (Auf Hintergrund 1-3 | #666666  | <color #666666>■■■■■■■■■</color>  | 
 +| Fließtext (Auf Hintergrund 4)    | #ffffff  | <color #ffffff>■■■■■■■■■</color> 
 + 
 +===== Logo ===== 
 +{{:werbematerial:logo:ffpi_baum_rz.svg?200 |}} 
 + 
 +---- 
  
-====== Logo ====== 
-{{ :werbematerial:logo:ffpi_baum_rz.svg?200 |}} 
 Wann immer möglich sollte das Logo als Vectorgrafik genutzt werden. Sonst als PNG mit Transparenz. Wann immer möglich sollte das Logo als Vectorgrafik genutzt werden. Sonst als PNG mit Transparenz.
-Befindet sich das Logo im Header gehört es an den Linken Rand des Contents. Das Logo sollte die Höhe einer Zeile Überschrift + eine Zeile Fließtext haben.+Befindet sich das Logo im Header gehört es an den Linken Rand des Contents. Das Logo sollte die Höhe einer Zeile Überschrift + eine Zeile Fließtext haben.\\ 
 +Beispiel:\\ 
 +{{::styleguide:header_beispiel.png|}} 
 + 
 +===== Schriften ===== 
 +Der "Freifunk Pinneberg" Schriftzug sollte nach möglichkeit in "Swiss911 XCm BT" sein. Da die Font nicht kostenlos genutzt werden kann, bietet sich als Alternative "Alternate Gothic No. 2 (BT)" mit Letterspacing -3% an, oder in allergrößter Not "Roboto Condensed"
  
 +Allgemeine Überschriften sind in "Roboto Condensed Bold", fließtexte in "Roboto".\\
 +Überschriften sind immer und Fett und sofern auf hellen Hintergrund in der Primärfarbe. Auf dunklem Hintergrund bietet sich Weiß an.
styleguide.1572861080.txt.gz · Zuletzt geändert: 04.11.2019 10:51 von kevin