Styleguide

Dieser Styleguide bietet einen umfassenden Überblick über das visuelle Designsystem der Website der Testicular Cancer Foundation, wobei der Schwerpunkt auf Farben und Typografie liegt.

Farbpalette

Die Farbpalette ist ein wesentlicher Bestandteil der Markenidentität und sorgt für ein einheitliches und wiedererkennbares Erscheinungsbild. Die Palette umfasst Primär-, Sekundär- und Akzentfarben, die auf der gesamten Website strategisch eingesetzt werden.

Grundfarben

Grundfarben sind die im Design am häufigsten verwendeten Farben und verkörpern die Kernidentität der Marke.

Primärblau/Türkis

HEX #00B4DB
RGB rgb(0, 180, 216)

Hauptmarkenfarbe, die für Hintergründe, Schaltflächen und zentrale visuelle Elemente verwendet wird.

Schwarz

HEX #000000
RGB rgb(0, 0, 0)

Der Fließtext, Überschriften auf hellem Hintergrund und die Fußzeile der Website.

Weiß

HEX #FFFFFF
RGB rgb(255, 255, 255)

Fließtext auf dunklem Hintergrund, Hintergründe für Inhaltsbereiche.

Sekundär- und Akzentfarben

Sekundär- und Akzentfarben werden eingesetzt, um die Primärfarben zu ergänzen und die Aufmerksamkeit auf bestimmte Elemente wie Schaltflächen, Links und Informationsbereiche zu lenken.

Dunkelblau

HEX #0F172A
RGB rgb(15, 23, 42)

Hintergründe für Statistikkarten und andere hervorgehobene Abschnitte.

Schiefergrau

HEX #64748B
RGB rgb(100, 116, 139)

Sekundäre Schaltflächen und UI-Elemente.

Hellgrau

HEX #F1F5F9
RGB rgb(241, 245, 249)

Hintergründe für Karten und Inhaltsmodule zur optischen Abgrenzung.

Mittelgrau

HEX #C1C1C1
RGB rgb(193, 193, 193)

Rahmen und dezente UI-Elemente.

Cremefarben

HEX #EBEEF0
RGB rgb(235, 238, 240)

Dezente Variationen im Hintergrund.

Typografie

Die Website verwendet eine Kombination aus einer Serifenschrift für Überschriften und einer serifenlosen Schrift für den Fließtext, wodurch eine klare und gut lesbare typografische Hierarchie entsteht.

DM Serif Display

Serifenschrift • Überschriften

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans-Serif • Fließtext

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Typografische Skala

Die folgenden Beispiele veranschaulichen die Schriftgrößen und Schriftstärken für verschiedene Textelemente auf der Website.

KOMPAKTE OBERE LINKLEISTE
Schriftart Inter
Größe 0,74 rem
Gewicht 600
ÜBERSCHRIFT 1 (H1)
Schriftart DM Serif Display
Größe 62px
Gewicht 400

Bekämpfung von Hodenkrebs durch Früherkennung

ÜBERSCHRIFT 2 (H2)
Schriftart DM Serif Display
Größe 40px – 48px
Gewicht 400 – 800

Unsere Mission: Leben retten durch Aufklärung

ÜBERSCHRIFT 3 (H3)
Schriftart DM Serif Display
Größe 28px
Gewicht 400

Erfahren Sie, wie Sie eine Selbstuntersuchung der Hoden durchführen

HAUPTTEXT (P)
Schriftart Inter
Größe 17,5 px
Gewicht 400

Die Testicular Cancer Foundation wurde 2009 gegründet und ist eine gemeinnützige Organisation gemäß 501(c)(3) sowie die einzige Organisation im Bereich Hodenkrebs im Land, die über Vollzeitmitarbeiter verfügt. Wir sind ein Team aus Überlebenden, Pflegekräften und Fürsprechern, die sich leidenschaftlich für die Verbesserung der Aufklärung und Sensibilisierung einsetzen.

SCHRIFTART DER SCHALTFLÄCHE
Schriftart Inter
Größe 0,9 rem
Gewicht 600
Zeichenabstand 0,07 em
Umwandeln Großschreibung
Zeilenhöhe 1,8 em