Stijlgids

Deze stijlgids biedt een uitgebreid overzicht van het visuele ontwerpsysteem voor de website van de Testicular Cancer Foundation, met de nadruk op kleuren en typografie.

Kleurenpalet

Het kleurenpalet vormt een essentieel onderdeel van de merkidentiteit en zorgt voor een consistente en herkenbare uitstraling. Het palet bestaat uit primaire, secundaire en accentkleuren die op strategische wijze over de hele website worden toegepast.

Primaire kleuren

De primaire kleuren zijn de kleuren die het meest worden gebruikt in het ontwerp en die de kern van de merkidentiteit vertegenwoordigen.

Primair cyaan/turkoois

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

De hoofdkleur van het merk, die wordt gebruikt voor achtergronden, knoppen en belangrijke visuele elementen.

Zwart

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

De hoofdtekst, koppen op een lichte achtergrond en de voettekst van de website.

Wit

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

Hoofdtekst op donkere achtergronden, achtergronden voor inhoudssecties.

Secundaire kleuren en accentkleuren

Secundaire kleuren en accentkleuren worden gebruikt om de primaire kleuren aan te vullen en de aandacht te vestigen op specifieke elementen, zoals knoppen, links en informatieve secties.

Donkerblauw

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

Achtergronden voor statistiekkaarten en andere gemarkeerde delen.

Leigrijs

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

Secundaire knoppen en UI-elementen.

Lichtgrijs

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

Achtergronden voor kaarten en inhoudsmodules om een visuele scheiding aan te brengen.

Middelgrijs

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

Randen en subtiele UI-elementen.

Gebroken wit

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

Subtiele variaties in de achtergrond.

Typografie

Op de website wordt een combinatie gebruikt van een seriflettertype voor koppen en een sans-seriflettertype voor de hoofdtekst, waardoor een duidelijke en goed leesbare typografische hiërarchie ontstaat.

DM Serif Display

Serif • Kopteksten

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans-serif • Hoofdtekst

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Typografische schaal

De volgende voorbeelden geven een overzicht van de lettergroottes en lettertypes voor verschillende tekstelementen op de website.

VERKORTE BOVENSTE VERBINDINGSSTANG
Lettertype Inter
Afmeting 0,74 rem
Gewicht 600
KOP 1 (H1)
Lettertype DM Serif Display
Grootte 62px
Gewicht 400

Testiculaire kanker bestrijden door vroegtijdige opsporing

KOP 2 (H2)
Lettertype DM Serif Display
Grootte 40px - 48px
Gewicht 400 - 800

Onze missie: levens redden door middel van onderwijs

KOP 3 (H3)
Lettertype DM Serif Display
Grootte 28px
Gewicht 400

Leer hoe u een zelfonderzoek van de testikels uitvoert

HOOFDTEKST (P)
Lettertype Inter
Grootte 17,5 px
Gewicht 400

De Testicular Cancer Foundation, opgericht in 2009, is een non-profitorganisatie volgens artikel 501(c)(3) en de enige organisatie in het land die zich fulltime bezighoudt met zaadbalkanker. Wij zijn een team van overlevenden, zorgverleners en pleitbezorgers die zich met hart en ziel inzetten voor meer voorlichting en bewustwording.

LETTERTYPE VAN DE KNOP
Lettertype Inter
Afmeting 0,9 rem
Gewicht 600
Letterafstand 0,07 em
Omzetten Hoofdletters
Regelhoogte 1,8 em