styleguide.md aktualisiert
This commit is contained in:
joerglohrer
parent
ff4e51c8f4
commit
6731543a38
130
styleguide.md
130
styleguide.md
|
|
@ -3,13 +3,17 @@ https://pad.gwdg.de/HPEME6K7RFqY88CnljChOg#
|
|||
# oer.community Styleguide
|
||||
|
||||
## fOERbico-Logo
|
||||
https://git.rpi-virtuell.de/Comenius-Institut/fOERbico/src/branch/main/fOERbico.svg
|
||||
[](https://git.rpi-virtuell.de/Comenius-Institut/fOERbico/src/branch/main/fOERbico.svg)
|
||||
[https://git.rpi-virtuell.de/Comenius-Institut/fOERbico/src/branch/main/fOERbico.svg](https://git.rpi-virtuell.de/Comenius-Institut/fOERbico/src/branch/main/fOERbico.svg)
|
||||
|
||||
<img src="https://git.rpi-virtuell.de/Comenius-Institut/fOERbico/raw/branch/main/fOERbico.svg" alt="fOERbico Logo" width="200" height="200">
|
||||
|
||||
Farbe: #203a8f
|
||||
|
||||
## git-Logo
|
||||
Vorlage forgejo:
|
||||
[](https://codeberg.org/forgejo/governance/src/branch/main/branding#logo)
|
||||
[https://codeberg.org/forgejo/governance/src/branch/main/branding#logo](https://codeberg.org/forgejo/governance/src/branch/main/branding#logo)
|
||||
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Forgejo_logo.svg" alt="Forgejo Logo" width="50" height="50">
|
||||
|
||||
[CC BY SA](https://creativecommons.org/licenses/by-sa/4.0/deed.en) - [Caesar Schinas](https://caesarschinas.com/)
|
||||
|
||||
|
|
@ -22,6 +26,7 @@ Farbe 5 (Rahmen): #D3D3D3
|
|||
Farbe 6 (dezente Hintergründe): #F0F8FF
|
||||
Farbe 7 (Hintergrund der Website): #FFFFFF
|
||||
Farbe 8 (hellere Alternative, Kopfzeilenhintergründe): #E6F2FF
|
||||
|
||||
Erklärung der Farbauswahl:
|
||||
|
||||
Farbe 1 (#203A8F): Dies ist die vorgegebene primäre Markenfarbe, ein tiefes Blau, das Professionalität und Vertrauen vermittelt.
|
||||
|
|
@ -33,74 +38,63 @@ Farbe 6 (#F0F8FF): Ein sehr helles Blau für dezente Hintergründe. Es passt zum
|
|||
Farbe 7 (#FFFFFF): Reines Weiß für den Haupthintergrund der Website. Dies gewährleistet maximalen Kontrast und Lesbarkeit.
|
||||
Farbe 8 (#E6F2FF): Eine etwas dunklere Schattierung als Farbe 6, aber immer noch sehr hell. Nützlich zur Unterscheidung von Kopfbereichen, ohne zu auffällig zu sein.
|
||||
|
||||
Diese Palette zielt darauf ab, mit den dominierenden Blautönen einen professionellen, vertrauenswürdigen Eindruck zu schaffen, während das Orange Energie verleiht und die Aufmerksamkeit dort lenkt, wo sie benötigt wird. Die neutralen Grau- und Weißtöne sorgen für Lesbarkeit und Balance.
|
||||
Die Farben sind so gewählt, dass sie gut zusammenarbeiten, ausreichend Kontrast für Barrierefreiheit bieten und Flexibilität im Design ermöglichen. Sie erlauben ein klares, modernes Aussehen bei gleichzeitiger Wahrung der Markenkonsistenz durch die Verwendung von Blautönen.
|
||||
|
||||
Diese Palette zielt darauf ab, mit den dominierenden Blautönen einen professionellen, vertrauenswürdigen Eindruck zu schaffen, während das Orange Energie verleiht und die Aufmerksamkeit dort lenkt, wo sie benötigt wird. Die neutralen Grau- und Weißtöne sorgen für Lesbarkeit und Balance. Die Farben sind so gewählt, dass sie gut zusammenarbeiten, ausreichend Kontrast für Barrierefreiheit bieten und Flexibilität im Design ermöglichen. Sie erlauben ein klares, modernes Aussehen bei gleichzeitiger Wahrung der Markenkonsistenz durch die Verwendung von Blautönen.
|
||||
|
||||
## FarbCodes
|
||||
### Comenius-Institut
|
||||
### Goethe-Uni
|
||||
https://www.puk.uni-frankfurt.de/53182959/Poster_Goethe_Spektrum_web.pdf?
|
||||
[https://www.puk.uni-frankfurt.de/53182959/Poster_Goethe_Spektrum_web.pdf](https://www.puk.uni-frankfurt.de/53182959/Poster_Goethe_Spektrum_web.pdf)
|
||||
### FAU Nürnberg
|
||||
https://www.wordpress.rrze.fau.de/entwicklung/design/farben/
|
||||
[https://www.wordpress.rrze.fau.de/entwicklung/design/farben/](https://www.wordpress.rrze.fau.de/entwicklung/design/farben/)
|
||||
|
||||
|
||||
<table class="color-table nooddcolor nobackground">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<th class="center">FAU</th>
|
||||
<th class="center">Goethe</th>
|
||||
<th class="center">Comenius</th>
|
||||
<th class="center">SDG</th>
|
||||
<th class="center">rpi-virtuell</th>
|
||||
<th class="center">fOERbico</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Helle Flächen</strong><br>
|
||||
<br>Theme-Property: <code>--color-primary-ci-hell2</code>
|
||||
</td>
|
||||
<td class="kachel200 size18" style="background-color: #CED9E7; color: #000;">Textfarbe: #000, Hintergrund: #CED9E7</td>
|
||||
<td class="kachel200 size18" style="background-color: #fff; color: #000;">Textfarbe: #000, Hintergrund: #fff</td>
|
||||
<td class="kachel200 size18" style="background-color: #F2DED1; color: #000;">Textfarbe: #000, Hintergrund: #F2DED1</td>
|
||||
<td class="kachel200 size18" style="background-color: #fff; color: #23446a;">Textfarbe: #23446a, Hintergrund: #23446a</td>
|
||||
<td class="kachel200 size18" style="background-color: #CFE0D8; color: #000;">Textfarbe: #000, Hintergrund: #CFE0D8</td>
|
||||
<td class="kachel200 size18" style="background-color: #F0F8FF; color: #000;">Textfarbe: #000, Hintergrund: #F0F8FF</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Vitale Flächen</strong><br>
|
||||
<br>Theme-Property: <code>--color-primary-ci-hell</code>
|
||||
</td>
|
||||
<td class="kachel200 size18" style="background-color: #04316A; color: #fff;">Textfarbe: #fff, Hintergrund: #04316A</td>
|
||||
<td class="kachel200 size18" style="background-color: #00618F ; color: #fff;">Textfarbe: #fff, Hintergrund: #00618F </td>
|
||||
<td class="kachel200 size18" style="background-color: #C50F3C; color: #fff;">Textfarbe: #fff, Hintergrund: #C50F3C</td>
|
||||
<td class="kachel200 size18" style="background-color: #18B4F1; color: #000;">Textfarbe: #000, Hintergrund: #18B4F1</td>
|
||||
<td class="kachel200 size18" style="background-color: #7BB725; color: #000;">Textfarbe: #000, Hintergrund: #7BB725</td>
|
||||
<td class="kachel200 size18" style="background-color: #203A8F; color: #fff;">Textfarbe: #fff, Hintergrund: #203A8F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Aktive Elemente</strong><br>
|
||||
<br>Theme-Property: <code>--color-primary-dunkler</code>
|
||||
</td>
|
||||
<td class="kachel200 size18" style="background-color: #004A9F; color: #fff;">Textfarbe: #fff, Hintergrund: #004A9F</td>
|
||||
<td class="kachel200 size18" style="background-color: #337ab7; color: #fff;">Textfarbe: #fff, Hintergrund: #337ab7</td>
|
||||
<td class="kachel200 size18" style="background-color: #971B2F; color: #fff;">Textfarbe: #fff, Hintergrund: #971B2F</td>
|
||||
<td class="kachel200 size18" style="background-color: #23446a; color: #fff;">Textfarbe: #fff, Hintergrund: #23446a</td>
|
||||
<td class="kachel200 size18" style="background-color: #266141; color: #fff;">Textfarbe: #fff, Hintergrund: #266141</td>
|
||||
<td class="kachel200 size18" style="background-color: #002366; color: #fff;">Textfarbe: #fff, Hintergrund: #002366</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Buttons u.a.</strong><br>
|
||||
<br>Theme-Property: <code>--color-primary-dunkelste</code>
|
||||
</td>
|
||||
<td class="kachel200 size18" style="background-color: #041E42; color: #fff;">Textfarbe: #fff, Hintergrund: #041E42</td>
|
||||
<td class="kachel200 size18" style="background-color: ##327ebb; color: #000;">Textfarbe: #000, Hintergrund: ##327ebb</td>
|
||||
<td class="kachel200 size18" style="background-color: #662938; color: #fff;">Textfarbe: #fff, Hintergrund: #662938</td>
|
||||
<td class="kachel200 size18" style="background-color: #003E61; color: #fff;">Textfarbe: #fff, Hintergrund: #003E61</td>
|
||||
<td class="kachel200 size18" style="background-color: #14462D; color: #fff;">Textfarbe: #fff, Hintergrund: #14462D</td>
|
||||
<td class="kachel200 size18" style="background-color: #FFA500; color: #000;">Textfarbe: #000, Hintergrund: #FFA500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="center">FAU</th>
|
||||
<th class="center">Goethe</th>
|
||||
<th class="center">Comenius</th>
|
||||
<th class="center">SDG</th>
|
||||
<th class="center">rpi-virtuell</th>
|
||||
<th class="center">fOERbico</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Helle Flächen</strong><br>Theme-Property: <code>--color-primary-ci-hell2</code></td>
|
||||
<td style="background-color: #CED9E7; color: #000;">Textfarbe: #000, Hintergrund: #CED9E7</td>
|
||||
<td style="background-color: #fff; color: #000;">Textfarbe: #000, Hintergrund: #fff</td>
|
||||
<td style="background-color: #F2DED1; color: #000;">Textfarbe: #000, Hintergrund: #F2DED1</td>
|
||||
<td style="background-color: #fff; color: #23446a;">Textfarbe: #23446a, Hintergrund: #23446a</td>
|
||||
<td style="background-color: #CFE0D8; color: #000;">Textfarbe: #000, Hintergrund: #CFE0D8</td>
|
||||
<td style="background-color: #F0F8FF; color: #000;">Textfarbe: #000, Hintergrund: #F0F8FF</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Vitale Flächen</strong><br>Theme-Property: <code>--color-primary-ci-hell</code></td>
|
||||
<td style="background-color: #04316A; color: #fff;">Textfarbe: #fff, Hintergrund: #04316A</td>
|
||||
<td style="background-color: #00618F ; color: #fff;">Textfarbe: #fff, Hintergrund: #00618F</td>
|
||||
<td style="background-color: #C50F3C; color: #fff;">Textfarbe: #fff, Hintergrund: #C50F3C</td>
|
||||
<td style="background-color: #18B4F1; color: #000;">Textfarbe: #000, Hintergrund: #18B4F1</td>
|
||||
<td style="background-color: #7BB725; color: #000;">Textfarbe: #000, Hintergrund: #7BB725</td>
|
||||
<td style="background-color: #203A8F; color: #fff;">Textfarbe: #fff, Hintergrund: #203A8F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Aktive Elemente</strong><br>Theme-Property: <code>--color-primary-dunkler</code></td>
|
||||
<td style="background-color: #004A9F; color: #fff;">Textfarbe: #fff, Hintergrund: #004A9F</td>
|
||||
<td style="background-color: #337ab7; color: #fff;">Textfarbe: #fff, Hintergrund: #337ab7</td>
|
||||
<td style="background-color: #971B2F; color: #fff;">Textfarbe: #fff, Hintergrund: #971B2F</td>
|
||||
<td style="background-color: #23446a; color: #fff;">Textfarbe: #fff, Hintergrund: #23446a</td>
|
||||
<td style="background-color: #266141; color: #fff;">Textfarbe: #fff, Hintergrund: #266141</td>
|
||||
<td style="background-color: #002366; color: #fff;">Textfarbe: #fff, Hintergrund: #002366</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Buttons u.a.</strong><br>Theme-Property: <code>--color-primary-dunkelste</code></td>
|
||||
<td style="background-color: #041E42; color: #fff;">Textfarbe: #fff, Hintergrund: #041E42</td>
|
||||
<td style="background-color: #327ebb; color: #000;">Textfarbe: #000, Hintergrund: #327ebb</td>
|
||||
<td style="background-color: #662938; color: #fff;">Textfarbe: #fff, Hintergrund: #662938</td>
|
||||
<td style="background-color: #003E61; color: #fff;">Textfarbe: #fff, Hintergrund: #003E61</td>
|
||||
<td style="background-color: #14462D; color: #fff;">Textfarbe: #fff, Hintergrund: #14462D</td>
|
||||
<td style="background-color: #FFA500; color: #000;">Textfarbe: #000, Hintergrund: #FFA500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
Loading…
Reference in a new issue