TCF-Markensystem · v2026

Der TCF -Styleguide.

Farben, Typografie und Komponentenmuster, aus denen sich die visuelle Sprache der Testicular Cancer Foundation zusammensetzt. Klicken Sie auf einen beliebigen Hex- oder RGB-Wert, um ihn zu kopieren.

Farbsystem

01 · Grundlagen

Drei Funktionen: „Primary“ für die Markenidentität, „Ink“ für Schrift und Oberflächen, „Signals“ für Farbtöne und Rahmen. Klicken Sie auf einen beliebigen Hex- oder RGB-Code, um ihn zu kopieren.

Primärmarkt & Marke

Grundschule

TCF Cyan

HEX#00B4DB
RGBrgb(0, 180, 219)

Die Marke. Handlungsaufforderungen, Akzente, Links, hervorgehobener Text und visuelle Schwerpunkte.

Akzent · Tief

Tiefes Cyan

HEX#0091B0
RGBrgb(0, 145, 176)

Kennzeichnen Sie Schaltflächen und Hover-Zustände mit dem primären Cyan. Erhöhen Sie den Kontrast auf farbigen Hintergründen.

Akzent · Farbton

Cyan-Farbton

HEX#E6F8FD
RGBrgb(230, 248, 253)

Hintergründe für Tags und Beschriftungen. Dezente Markenpräsenz, ohne mit den Inhalten zu konkurrieren.

Tinte & Schrift

Tinte · Grundfarben

Tiefes Marineblau

HEX#0F172A
RGBrgb(15, 23, 42)

Überschriften, Hero-Karten, CTA-Blöcke, Fußzeile. Ersetzt überall reines Schwarz.

Tinte · Körper

Slate 700

HEX#334155
RGBrgb(51, 65, 85)

Standardtext auf hellen Hintergründen. Geringerer Kontrast als bei Marineblau, angenehmer beim Lesen längerer Texte.

Tinte · Sekundär

Slate 600

HEX#475569
RGBrgb(71, 85, 105)

Unterabsätze, Aufzählungsbeschreibungen, Begleittext unter einer Überschrift.

Tinte · Gedämpft

Slate 500

HEX#64748B
RGBrgb(100, 116, 139)

Bildunterschriften, technische Beschriftungen, Fußnoten, EIN-Zeilen. Dezent, aber gut lesbar.

Tinte · Auf dunklem Untergrund

Slate 400

HEX#94A3B8
RGBrgb(148, 163, 184)

Fließtext vor tiefblauem Hintergrund – Hero-Karten, Handlungsaufforderungen, Fußzeile.

Oberfläche · Seite

Weiß

HEX#FFFFFF
RGBrgb(255, 255, 255)

Standard-Seitenhintergrund. Karten und Inhaltsbereiche.

Signale & Oberflächen

Oberflächlich · Subtil

Slate 100

HEX#F1F5F9
RGBrgb(241, 245, 249)

Wechselnde Abschnitts-Hintergründe, inaktive Umschaltzustände, sanfte Trennlinien.

Rand · Standard

Slate 200

HEX#E2E8F0
RGBrgb(226, 232, 240)

Kartentrennlinien, feine Linien unter Überschriften, Rahmen um Listenzeilen.

Reserviert

Reines Schwarz

HEX#000000
RGBrgb(0, 0, 0)

Nur für Medienzwecke (Logo-Kombinationen, Fotomasken). Nicht für Schriftzüge verwenden – bitte „Deep Navy“ verwenden.

Typografie

02 · Grundlagen

Eine Serifenschrift für Überschriften, eine serifenlose Schrift für alles andere. DM Serif Display vermittelt Wärme und redaktionelle Aussagekraft; Inter eignet sich für längere Texte und Benutzeroberflächen, ohne vom Wesentlichen abzulenken.

DM Serif Display

Serif · 400 · Überschriften & Zitate

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans · 400 / 600 / 700 · Fließtext, Benutzeroberfläche, Schaltflächen

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Schriftgröße

03 · Grundlagen

Zwei Schriftgrößen. „Article“ eignet sich für längere Texte, Blogbeiträge und Programmseiten. „Display“ ist für Hero-Bereiche, Landingpages und Marketinganlässe gedacht, bei denen die Schrift eine größere Rolle spielen soll.

Augenbraue
SchriftartInter
Größe12px
Gewicht600
Verfolgung.12em
FallGroßbuchstaben
Neuigkeiten & Aktuelles
H1 · Artikel
SchriftartDM Serif Display
Größe44px
Gewicht400
Führend1.12

Unabhängig bewertet. Der Öffentlichkeit gegenüber rechenschaftspflichtig.

H2 · Artikel
SchriftartDM Serif Display
Größe30px
Gewicht400
Führend1,18

Warum Bewertungen von Dritten wichtig sind

H3 · Artikel
SchriftartDM Serif Display
Größe22px
Gewicht400

Operative Exzellenz unterstützt die Erfüllung des Auftrags

Einleitung
SchriftartInter
Größe19px
Gewicht400
Führend1,6

Vertrauen entsteht durch messbare Verantwortlichkeit und beständige Transparenz – und genau das spiegeln unsere Bewertungen durch unabhängige Dritte wider.

Hauptteil
SchriftartInter
Größe17px
Gewicht400
Führend1,7

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.

Schaltfläche
SchriftartInter
Größe16px
Gewicht600
Radius8 px

Komponentenmuster

04 · Muster

Wiederverwendbare Bausteine. Diese kommen in Blogbeiträgen, auf Programmseiten und in Inhalten für Spender zum Einsatz. Verwenden Sie überall dieselben fünf Muster, damit die Marke einheitlich wirkt, ohne dabei starr zu wirken.

Tag-Pille

Kategoriebezeichnung über einer H1-Überschrift. Hintergrund mit Farbton, Text in tiefem Cyan.

Transparenz

Hinweis

Kurze Zusammenfassung oder Kernaussage. Cyanfarbener Rand mit einer Breite von 3 px.

Die Kurzfassung: Candid Platinum, Charity Navigator 4 Sterne bei 93 %, GreatNonprofits Top-Bewertung, Trustpilot 4,2 / 5.

Heldenkarte

Dunkler Hintergrund mit Überschrift, Einleitungssatz, Haupttext und optionalem Zitat.

Für Spender und Partner

Vier unabhängige Gutachter. Eine einheitliche Antwort.

Die meisten gemeinnützigen Organisationen in unserer Kategorie sind auf einer oder zwei dieser Plattformen vertreten. TCF wird auf allen vier bewertet.

„Eine unabhängige Überprüfung ist die Mindestanforderung, nicht die Obergrenze.“

Nummerierte Liste

Verwendung für abgestufte Listen, Bewertungen und Takte. Serifenziffern in Primär-Cyan, hauchdünne Trennlinien.

  • 01
    Bewusstsein

    Junge Männer dort abholen, wo sie stehen – mit einer Aufklärungsarbeit, die frei von Stigmatisierung ist.

  • 02
    Support

    Bringen Sie neu diagnostizierte Patienten mit Überlebenden zusammen, die Ähnliches durchgemacht haben.

  • 03
    Überleben

    Langzeitpflege, soziale Netzwerke und Hilfsangebote nach Abschluss der Behandlung.

CTA-Block

Spenden- oder Anmeldeblock am Ende des Artikels. Dunkelblau mit Akzenten in Primärcyan.

Unterstützen Sie TCF mit einer steuerlich absetzbaren Spende.

Jeder Dollar wird nach denselben Standards verwaltet, die sich in unseren unabhängigen Ratings widerspiegeln.

Spenden Sie an TCF