Comenius-Institut/FOERBICO
Comenius-Institut/FOERBICO
14
4
Fork 0
Code Issues 29 Pull requests 7 Projects 4 Releases Wiki Activity

styleguide.md aktualisiert

Browse source
This commit is contained in:
joerglohrer 2024-07-08 13:32:45 +00:00
parent ff4e51c8f4
commit 6731543a38
1 changed files with 78 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
styleguide.md
View file

@ -3,13 +3,17 @@ https://pad.gwdg.de/HPEME6K7RFqY88CnljChOg#
# oer.community Styleguide # oer.community Styleguide
## fOERbico-Logo ## 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/raw/branch/main/fOERbico.svg =200x200)](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 Farbe: #203a8f
## git-Logo ## git-Logo
Vorlage forgejo: Vorlage forgejo:
[![](https://upload.wikimedia.org/wikipedia/commons/0/05/Forgejo_logo.svg =50x50)](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/) [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 6 (dezente Hintergründe): #F0F8FF
Farbe 7 (Hintergrund der Website): #FFFFFF Farbe 7 (Hintergrund der Website): #FFFFFF
Farbe 8 (hellere Alternative, Kopfzeilenhintergründe): #E6F2FF Farbe 8 (hellere Alternative, Kopfzeilenhintergründe): #E6F2FF
Erklärung der Farbauswahl: Erklärung der Farbauswahl:
Farbe 1 (#203A8F): Dies ist die vorgegebene primäre Markenfarbe, ein tiefes Blau, das Professionalität und Vertrauen vermittelt. Farbe 1 (#203A8F): Dies ist die vorgegebene primäre Markenfarbe, ein tiefes Blau, das Professionalität und Vertrauen vermittelt.
@ -33,22 +38,19 @@ 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 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. 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. 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.
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 ## FarbCodes
### Comenius-Institut ### Comenius-Institut
### Goethe-Uni ### 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 ### 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>
<table class="color-table nooddcolor nobackground">
<thead> <thead>
<tr> <tr>
<td></td> <th></th>
<th class="center">FAU</th> <th class="center">FAU</th>
<th class="center">Goethe</th> <th class="center">Goethe</th>
<th class="center">Comenius</th> <th class="center">Comenius</th>
@ -59,48 +61,40 @@ https://www.wordpress.rrze.fau.de/entwicklung/design/farben/
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><strong>Helle Flächen</strong><br> <td><strong>Helle Flächen</strong><br>Theme-Property: <code>--color-primary-ci-hell2</code></td>
<br>Theme-Property: <code>--color-primary-ci-hell2</code> <td style="background-color: #CED9E7; color: #000;">Textfarbe: #000, Hintergrund: #CED9E7</td>
</td> <td style="background-color: #fff; color: #000;">Textfarbe: #000, Hintergrund: #fff</td>
<td class="kachel200 size18" style="background-color: #CED9E7; color: #000;">Textfarbe: #000, Hintergrund: #CED9E7</td> <td style="background-color: #F2DED1; color: #000;">Textfarbe: #000, Hintergrund: #F2DED1</td>
<td class="kachel200 size18" style="background-color: #fff; color: #000;">Textfarbe: #000, Hintergrund: #fff</td> <td style="background-color: #fff; color: #23446a;">Textfarbe: #23446a, Hintergrund: #23446a</td>
<td class="kachel200 size18" style="background-color: #F2DED1; color: #000;">Textfarbe: #000, Hintergrund: #F2DED1</td> <td style="background-color: #CFE0D8; color: #000;">Textfarbe: #000, Hintergrund: #CFE0D8</td>
<td class="kachel200 size18" style="background-color: #fff; color: #23446a;">Textfarbe: #23446a, Hintergrund: #23446a</td> <td style="background-color: #F0F8FF; color: #000;">Textfarbe: #000, Hintergrund: #F0F8FF</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>
<tr> <tr>
<td><strong>Vitale Flächen</strong><br> <td><strong>Vitale Flächen</strong><br>Theme-Property: <code>--color-primary-ci-hell</code></td>
<br>Theme-Property: <code>--color-primary-ci-hell</code> <td style="background-color: #04316A; color: #fff;">Textfarbe: #fff, Hintergrund: #04316A</td>
</td> <td style="background-color: #00618F ; color: #fff;">Textfarbe: #fff, Hintergrund: #00618F</td>
<td class="kachel200 size18" style="background-color: #04316A; color: #fff;">Textfarbe: #fff, Hintergrund: #04316A</td> <td style="background-color: #C50F3C; color: #fff;">Textfarbe: #fff, Hintergrund: #C50F3C</td>
<td class="kachel200 size18" style="background-color: #00618F ; color: #fff;">Textfarbe: #fff, Hintergrund: #00618F </td> <td style="background-color: #18B4F1; color: #000;">Textfarbe: #000, Hintergrund: #18B4F1</td>
<td class="kachel200 size18" style="background-color: #C50F3C; color: #fff;">Textfarbe: #fff, Hintergrund: #C50F3C</td> <td style="background-color: #7BB725; color: #000;">Textfarbe: #000, Hintergrund: #7BB725</td>
<td class="kachel200 size18" style="background-color: #18B4F1; color: #000;">Textfarbe: #000, Hintergrund: #18B4F1</td> <td style="background-color: #203A8F; color: #fff;">Textfarbe: #fff, Hintergrund: #203A8F</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>
<tr> <tr>
<td><strong>Aktive Elemente</strong><br> <td><strong>Aktive Elemente</strong><br>Theme-Property: <code>--color-primary-dunkler</code></td>
<br>Theme-Property: <code>--color-primary-dunkler</code> <td style="background-color: #004A9F; color: #fff;">Textfarbe: #fff, Hintergrund: #004A9F</td>
</td> <td style="background-color: #337ab7; color: #fff;">Textfarbe: #fff, Hintergrund: #337ab7</td>
<td class="kachel200 size18" style="background-color: #004A9F; color: #fff;">Textfarbe: #fff, Hintergrund: #004A9F</td> <td style="background-color: #971B2F; color: #fff;">Textfarbe: #fff, Hintergrund: #971B2F</td>
<td class="kachel200 size18" style="background-color: #337ab7; color: #fff;">Textfarbe: #fff, Hintergrund: #337ab7</td> <td style="background-color: #23446a; color: #fff;">Textfarbe: #fff, Hintergrund: #23446a</td>
<td class="kachel200 size18" style="background-color: #971B2F; color: #fff;">Textfarbe: #fff, Hintergrund: #971B2F</td> <td style="background-color: #266141; color: #fff;">Textfarbe: #fff, Hintergrund: #266141</td>
<td class="kachel200 size18" style="background-color: #23446a; color: #fff;">Textfarbe: #fff, Hintergrund: #23446a</td> <td style="background-color: #002366; color: #fff;">Textfarbe: #fff, Hintergrund: #002366</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>
<tr> <tr>
<td><strong>Buttons u.a.</strong><br> <td><strong>Buttons u.a.</strong><br>Theme-Property: <code>--color-primary-dunkelste</code></td>
<br>Theme-Property: <code>--color-primary-dunkelste</code> <td style="background-color: #041E42; color: #fff;">Textfarbe: #fff, Hintergrund: #041E42</td>
</td> <td style="background-color: #327ebb; color: #000;">Textfarbe: #000, Hintergrund: #327ebb</td>
<td class="kachel200 size18" style="background-color: #041E42; color: #fff;">Textfarbe: #fff, Hintergrund: #041E42</td> <td style="background-color: #662938; color: #fff;">Textfarbe: #fff, Hintergrund: #662938</td>
<td class="kachel200 size18" style="background-color: ##327ebb; color: #000;">Textfarbe: #000, Hintergrund: ##327ebb</td> <td style="background-color: #003E61; color: #fff;">Textfarbe: #fff, Hintergrund: #003E61</td>
<td class="kachel200 size18" style="background-color: #662938; color: #fff;">Textfarbe: #fff, Hintergrund: #662938</td> <td style="background-color: #14462D; color: #fff;">Textfarbe: #fff, Hintergrund: #14462D</td>
<td class="kachel200 size18" style="background-color: #003E61; color: #fff;">Textfarbe: #fff, Hintergrund: #003E61</td> <td style="background-color: #FFA500; color: #000;">Textfarbe: #000, Hintergrund: #FFA500</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> </tr>
</tbody> </tbody>
</table> </table>