oer.community Styleguide

fOERbico-Logo

https://git.rpi-virtuell.de/Comenius-Institut/fOERbico/src/branch/main/fOERbico.svg

Farbe: #203a8f

git-Logo

Vorlage forgejo: https://codeberg.org/forgejo/governance/src/branch/main/branding#logo

CC BY SA - Caesar Schinas

Farben fOERbico

Farbe 1 (primäre Markenfarbe): #203A8F
Farbe 2 (alternative Farbe): #FFA500
Farbe 3 (allgemeiner Textabsatz): #333333
Farbe 4 (Überschriften, Unterüberschriften, Titel): #002366
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.
Farbe 2 (#FFA500): Orange wurde gewählt, da es auf dem Farbrad komplementär zu Blau ist. Es bietet einen lebendigen Kontrast zur Primärfarbe und eignet sich gut für Call-to-Action-Buttons oder um wichtige Elemente hervorzuheben.
Farbe 3 (#333333): Ein dunkles Grau für allgemeinen Text. Es ist angenehmer für die Augen als reines Schwarz und bietet gute Lesbarkeit auf hellen Hintergründen.
Farbe 4 (#002366): Ein dunkleres Blau für Überschriften und Titel. Es harmoniert mit der Primärfarbe, ist aber deutlich genug, um eine Hierarchie zu schaffen.
Farbe 5 (#D3D3D3): Ein helles Grau für Rahmen. Es ist dezent genug, um nicht abzulenken, kann aber effektiv Inhaltsbereiche trennen.
Farbe 6 (#F0F8FF): Ein sehr helles Blau für dezente Hintergründe. Es passt zum blauen Thema, bleibt aber fast weiß für gute 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.

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

FAU Nürnberg

https://www.wordpress.rrze.fau.de/entwicklung/design/farben/

	FAU	Goethe	Comenius	SDG	rpi-virtuell	fOERbico
Helle Flächen Theme-Property: `--color-primary-ci-hell2`	Textfarbe: #000, Hintergrund: #CED9E7	Textfarbe: #000, Hintergrund: #fff	Textfarbe: #000, Hintergrund: #F2DED1	Textfarbe: #23446a, Hintergrund: #23446a	Textfarbe: #000, Hintergrund: #CFE0D8	Textfarbe: #000, Hintergrund: #F0F8FF
Vitale Flächen Theme-Property: `--color-primary-ci-hell`	Textfarbe: #fff, Hintergrund: #04316A	Textfarbe: #fff, Hintergrund: #00618F	Textfarbe: #fff, Hintergrund: #C50F3C	Textfarbe: #000, Hintergrund: #18B4F1	Textfarbe: #000, Hintergrund: #7BB725	Textfarbe: #fff, Hintergrund: #203A8F
Aktive Elemente Theme-Property: `--color-primary-dunkler`	Textfarbe: #fff, Hintergrund: #004A9F	Textfarbe: #fff, Hintergrund: #337ab7	Textfarbe: #fff, Hintergrund: #971B2F	Textfarbe: #fff, Hintergrund: #23446a	Textfarbe: #fff, Hintergrund: #266141	Textfarbe: #fff, Hintergrund: #002366
Buttons u.a. Theme-Property: `--color-primary-dunkelste`	Textfarbe: #fff, Hintergrund: #041E42	Textfarbe: #000, Hintergrund: #327ebb	Textfarbe: #fff, Hintergrund: #662938	Textfarbe: #fff, Hintergrund: #003E61	Textfarbe: #fff, Hintergrund: #14462D	Textfarbe: #000, Hintergrund: #FFA500

6.8 KiB Raw Blame History