Year-end giving ends December 31. Be there for the next diagnosis. Give now →
Kleuren, typografie en componentpatronen die samen de visuele stijl van de Testicular Cancer Foundation vormen. Klik op een willekeurige hex- of RGB-waarde om deze te kopiëren.
Drie functies: 'primary' voor de merkidentiteit, 'ink' voor lettertypes en oppervlakken, en 'signals' voor tinten en randen. Klik op een hex- of RGB-code om deze te kopiëren.
Het merk. Oproepen tot actie, accenten, links, tekst in de koptekst en belangrijke visuele elementen.
Gebruik de primaire cyaankleur voor labels, tekst in inline-links en hover-toestanden. Zorg voor een hoger contrast op gekleurde achtergronden.
Hover-status voor alles wat al de kleur ‘Deep Cyan’ heeft, secundaire knoppen, ledger-links en kaartlinks.
Achtergronden voor tags, call-outs en uitgelichte kaarten. Een subtiele merkpresentatie die niet ten koste gaat van de inhoud.
De rand die bij de vulling ‘Cyan Tint’ hoort. Zorgt ervoor dat gekleurde kaarten goed leesbaar blijven tegen een witte achtergrond.
Kopteksten, hero-kaarten, CTA-blokken, voettekst, accentlijnen. Vervangt overal puur zwart.
Standaard tekstkleur op lichte achtergronden. Minder contrast dan marineblauw, prettiger bij het lezen van langere teksten.
Alinea’s, beschrijvingen van lijsten, aanvullende tekst onder een kop.
Bijschriften, specificatielabels, voetnoten, namen van verkooppunten, EIN-regels. Onopvallend maar goed leesbaar.
Hoofdtekst tegen een diep marineblauwe achtergrond, hero’s, hero-kaarten, CTA’s, voettekst.
Standaardpagina-achtergrond. Kaarten en inhoudsweergaven.
Afwisselende achtergronden voor secties, inactieve schakelstanden, inline-codefragmenten.
Kaartranden, dunne lijntjes onder kopteksten, scheidingslijnen tussen kolommen en rijen in tabellen en lijsten.
De contouren van secundaire knoppen en eventuele randen die zichtbaar moeten blijven boven een Slate 100-oppervlak.
Voorbehouden voor de media (logocombinaties, fotomaskers). Niet gebruiken voor tekst; gebruik in plaats daarvan Deep Navy.
Haarlijnen op een donkere achtergrond: op oppervlakken in de kleur Deep Navy worden scheidingslijnen en randen gebruikt rgba(255,255,255,0,08) tot rgba(255,255,255,0,12) in plaats van een leisteen-hex.
Er is één cyaankleur: #00B4DB, met #0091B0 voor de donkere variant en bij muisaanwijzing. Deze verouderde varianten komen nog steeds voor op oudere pagina’s en in aangepaste CSS. Vervang ze onmiddellijk wanneer u ze tegenkomt en gebruik ze nooit meer in nieuw werk.
Een seriflettertype voor koppen, een schreefloos lettertype voor al het andere. DM Serif Display zorgt voor warmte en een krachtige uitstraling; Inter is geschikt voor het lezen van langere teksten en voor gebruikersinterfaces, zonder af te leiden.
Serif · uitsluitend 400 · Kopteksten, citaten, cijfers
Sans · 400 / 600 / 700 · Tekst, gebruikersinterface, knoppen
DM Serif Display wordt in één letterdikte geleverd. Niet aanbrengen <strong>, <b>, of font-weight: 600/700 Bij seriflettertypen genereert de browser een gesimuleerde vetdruk die er zwaar en vlekkerig uitziet, wat vooral in Safari duidelijk te zien is. Indien een serifregel extra nadruk behoeft, gebruik dan <em>: cursief in combinatie met TCF Cyan is het standaardpatroon voor nadruk.
Twee weegschalen. Artikel is bedoeld voor uitgebreide artikelen, blogberichten en programmapagina’s. Weergave is bedoeld voor hero-secties, landingspagina’s en marketingmomenten waarbij het lettertype een grotere rol moet spelen. De onderstaande formaten vormen de maximale grootte voor desktop; koppen worden weergegeven als clamp() zodat ze op mobiele telefoons kleiner worden weergegeven.
Vertrouwen wordt opgebouwd door middel van meetbare verantwoordingsplicht en voortdurende transparantie, en onze beoordelingen door onafhankelijke instanties weerspiegelen precies dat.
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.
Inter 16 / 600, padding: 1rem 2rem, straal 8px, kleurovergang van 0,18 s. De linkstijlen van Squarespace lopen door in codeblokken, waardoor de ankertekens van knoppen altijd worden ingesteld kleur en text-decoration met !important.
Primair cyaan voor de hoofdactie; diep cyaan wanneer de knop naast de hoofdtekst staat en contrast nodig is; een omtrek voor alles wat ondergeschikt is.
Cyaan op marineblauw. Marineblauw op cyaan: de donatieband vormt het enige opvallende cyaanaccent op de pagina, dus de bijbehorende knop is donker uitgevoerd in plaats van te contrasteren met de achtergrond.
Herbruikbare bouwstenen. Deze komen voor in blogberichten, programmapagina’s en inhoud die op donateurs is gericht. Maak gebruik van een bestaand patroon in plaats van er zelf een te bedenken; het merk blijft consistent door herhaling, niet door vernieuwing.
Categorie-label boven een H1. Achtergrond met een lichte tint, tekst in diep cyaan.
Korte samenvatting of belangrijkste conclusie. Cyaankleurige tint met een primaire linkerrand van 3px.
In het kort: Candid Platinum, 4 sterren bij Charity Navigator met een score van 93%, als een van de best beoordeelde organisaties bij GreatNonprofits, onafhankelijke beoordelingen op Trustpilot.
Donkere achtergrond met kop, hoofdkop, ondersteunende alinea en eventueel een citatenkader.
Voor donateurs en partners
De meeste non-profitorganisaties in onze categorie zijn op één of twee van deze platforms te vinden. TCF is op alle vier beoordeeld.
"Onafhankelijke verificatie is het minimum, niet het maximum."
Trapvormige lijsten, beoordelingen, programma-indelingen. Serif-cijfers in primaire cyaan, haarfijne scheidingslijnen, geen chromen kaartjes.
Jonge mannen aanspreken waar ze zich bevinden, met voorlichting zonder stigma.
Breng pas gediagnosticeerde patiënten in contact met overlevenden die hetzelfde hebben meegemaakt.
Langdurige zorg, de gemeenschap en hulpbronnen na afloop van de behandeling.
Serif-teksten in de eerste persoon als ankerrijen. Wanneer u de muisaanwijzer boven een rij plaatst, worden de naastgelegen rijen vervaagd, krijgt de cursieve zin de kleur cyaan en verschuift de pijl. Wordt gebruikt voor navigatieonderwerpen en alle lijsten van het type „kies uw situatie”.
Kaarten met gelijke hoogte voor persberichten, bronnen en downloads. Bij het aanwijzen verschijnt een cyaankleurige rand en een ring van 1px; er vindt nooit een verschuiving plaats.
Een overlevende benadrukt het belang van zelfonderzoek en verwijst lezers naar de informatiebronnen van TCF over zelfonderzoek.
Lees het artikel →Een door vakgenoten beoordeeld onderzoek waarin wordt nagegaan in hoeverre op humor gebaseerde campagnes jonge mannen aanspreken.
Lees het onderzoek →Overlevenden, zorgverleners, belangenbehartigers en clinici komen samen voor een weekend vol educatieve activiteiten.
Lees het artikel →Grote cijfers in het lettertype DM Serif. Daarboven een micro-label, daaronder een toelichting in gewone taal. Zet het cijfer nooit vet.
Van elke dollar gaat rechtstreeks naar de programma-activiteiten.
De enige in het land die over een fulltime bemande afdeling voor zaadbalkanker beschikt.
Onafhankelijke beoordelaars van liefdadigheidsinstellingen, waarvan alle beoordelingen openbaar zijn gepubliceerd.
Getuigenissen van overlevenden en partners. Serif cursief, bronvermelding op micro-etiket, kaartje met haarfijne letters.
"Niemand heeft mij gezegd dat ik het moest controleren. Die stilte is precies wat wij hier willen doorbreken."Overlevende, gediagnosticeerd op 24-jarige leeftijd
Blok voor donaties of aanmeldingen aan het einde van het artikel. Donkerblauw met cyan als accentkleur, één gecentreerde kolom, maximale breedte van ongeveer 720px.
Elke dollar wordt beheerd volgens dezelfde normen die tot uiting komen in onze onafhankelijke ratings.
Doneer aan TCFBeweging is een aanwijzing, geen uitvoering. Alles beweegt langs dezelfde korte curve, en er beweegt niets dat niet hoeft te bewegen.
0,18 s tot 0,2 s gemak wat betreft kleur, achtergrond, rand en dekking. Niets dat langer is, niets dat op en neer beweegt.
De rand krijgt de kleur TCF Cyan met een bijpassende ring van 1px (box-shadow: 0 0 0 1px #00B4DB). Nee transY kaartweergave in het nieuwe systeem; de oude weergaven worden verwijderd naarmate de pagina’s opnieuw worden opgebouwd.
Wanneer u de muisaanwijzer boven een rij houdt, worden de bijbehorende rijen verplaatst naar dekkracht: 0,55, maakt de cursieve zin cyaan en verschuift de pijl 4px. De rij waar de muis overheen beweegt, behoudt zijn volledige dekking.
Elk interactief element krijgt :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Verwijder scherpstelringen nooit zonder ze te vervangen.
Geen pulserende, gloeiende, stuiterende, parallax- of automatisch afspelende bewegingen. Geen animaties die zich herhalen terwijl de pagina inactief is.
De website draait op Squarespace 7.1, dus het merendeel van het nieuwe ontwerpwerk wordt geleverd als een op zichzelf staand codeblok dat in een sectie met de Fluid-engine wordt geplaatst. Deze regels zorgen ervoor dat die blokken niet met elkaar of met het platform in conflict komen.
Elk nieuw blok maakt gebruik van de tcfx- voorvoegsel. tcf- maakt deel uit van de verouderde aangepaste CSS en zal tot conflicten leiden.
.tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } en niets breder. Een pagina-brede * Een reset heeft de website al eerder onbruikbaar gemaakt.
Controleer elke regel binnen de hoofdklasse van het blok. Een codeblok moet veilig op elke pagina kunnen worden geplakt zonder bijwerkingen.
Indien een <style> toepassingen @import Wat lettertypen betreft, moet dit op de eerste regel van die tag staan, anders negeert de browser het.
De HTML- en CSS-code in de productieversie bevatten geen opmerkingen. Documenteer het blok in plaats daarvan in de projectnotities.
Tekst, cijfers of inline SVG. Emoji’s worden niet op alle platforms op dezelfde manier weergegeven en komen informeel over.
Deep Navy wordt overal in de gebruikersinterface gebruikt in plaats van zwart. Puur zwart is voorbehouden aan media.
Gebruik de indeling van de telefoon als uitgangspunt en voeg het volgende toe min-width zoekopdrachten naar boven. Stapels met één kolom, clamp() lettertype, verminderde opvulling bij een breedte van minder dan 640px, tikvriendelijke doelgebieden.
target="_blank" wordt altijd geleverd met rel="noopener noreferrer".
Zorg er bij het herontwerpen van een bestaande pagina voor dat u de koppen, de hoofdtekst, de URL’s en de UTM-parameters exact behoudt. Geef eventuele aanpassingen duidelijk aan in plaats van deze stilletjes door te voeren.
De vernieuwde helden behouden precies één H1-tag met de oorspronkelijke tekst, met het oog op SEO. Vermijd het gebruik van Squarespace’s tekst met vierkante schaal wrapper; de inline-afmeting ervan kan tijdens de uitvoering verdwijnen, waardoor de koptekst wordt samengevouwen.
Om een gedeelte van een blok donker te maken, selecteert u de achtergrondlaag, niet het kader van het gedeelte, en schildert u .page-section maakt de randen van elke clip-path-scheidingslijn vierkant.
.page-section:has(.tcfx-block) .section-background { background: #0F172A !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }