Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- styleguide [04.11.2019 09:00] – angelegt kevin
+++ styleguide [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.
-^ Verwendung           ^ HEX      ^
-| Primärfarbe          | #dc0067  |
-| Akzentfarbe          | #ffb400  |
-| Links                | #009ee0  |
-===== Sekundärfarben =====
+===== Farben =====
-^ Verwendung                                 ^ HEX      ^
+==== Primärfarben ====
-| Hintergrund (hell)                         | #ffffff  |
+^ Verwendung           ^ HEX      ^ Beispiel ^
-| Hintergrund (mittel)                       | #f7f7f7  |
+| Primärfarbe          | #dc0067  | <color #dc0067>■■■■■■■■■</color> |
-| Hintergrund (dunkel)                       | #333333  |
+| Akzentfarbe          | #ffb400  | <color #ffb400>■■■■■■■■■</color> |
-| Fließtext (heller & mittlerer Hintergrund) | #666666  |
+| Links                | #009ee0  | <color #009ee0>■■■■■■■■■</color> |
+==== Sekundärfarben ====
+^ Verwendung                       ^ HEX      ^ Beispiel                          ^
+| Hintergrund 1                    | #ffffff  | <color #ffffff>■■■■■■■■■</color>  |
+| Hintergrund 2                    | #f7f7f7  | <color #f7f7f7>■■■■■■■■■</color>  |
+| Hintergrund 3                    | #ebebeb  | <color #ebebeb>■■■■■■■■■</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 |}}
+----
+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.\\
+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.

Wiki - Freifunk Pinneberg

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge