Year-end giving ends December 31. Be there for the next diagnosis. Give now →
Colori, tipografia e modelli dei componenti che costituiscono il linguaggio visivo della Testicular Cancer Foundation. Clicca su qualsiasi valore esadecimale o RGB per copiarlo.
Tre categorie: "primaria" per l'identità del marchio, "inchiostro " per i caratteri e le superfici, "segnali" per le sfumature e i bordi. Clicca su qualsiasi codice esadecimale o RGB per copiarlo.
Il marchio. Inviti all'azione, elementi di risalto, link, testi in evidenza e immagini chiave.
Assegnare il colore ciano primario alle pillole, al testo dei link in linea e agli stati al passaggio del mouse. Maggiore contrasto sugli sfondi colorati.
Stato al passaggio del mouse per tutti gli elementi già visualizzati in blu ciano scuro, pulsanti secondari, link di riferimento e link delle schede.
Sfondi per tag, didascalie e schede in primo piano. Una presenza discreta del marchio che non entra in competizione con i contenuti.
Il bordo che si abbina al riempimento “Cyan Tint”. Mantiene leggibili le schede colorate su una pagina bianca.
Intestazioni, schede principali, blocchi CTA, piè di pagina, contorni in evidenza. Sostituisce il nero puro ovunque.
Testo standard su sfondi chiari. Contrasto inferiore rispetto al blu scuro, più piacevole per la lettura di testi lunghi.
Sottotitoli, descrizioni di elenchi, testo di accompagnamento sotto un titolo.
Didascalie, etichette tecniche, note a piè di pagina, nomi delle prese, righe EIN. Discrete ma leggibili.
Testo principale su sfondi blu scuro intenso, elementi in evidenza, schede di presentazione, inviti all’azione, piè di pagina.
Sfondo predefinito della pagina. Schede e aree di contenuto.
Sfondi alternati per le sezioni, stati inattivi dei pulsanti di attivazione/disattivazione, blocchi di codice in linea.
Bordi delle schede, linee sottili sotto i titoli, separatori di colonne nei registri e nelle liste.
I contorni dei pulsanti secondari e qualsiasi bordo che debba risaltare sulla superficie dello Slate 100.
Riservato ai media (combinazioni di logo, maschere fotografiche). Non utilizzare per il testo; utilizzare invece il colore Deep Navy.
Linee sottili su sfondo scuro: su superfici, divisori e bordi di colore blu navy intenso, utilizzare rgba(255,255,255,0,08) a rgba(255,255,255,0,12) piuttosto che un esagono di ardesia.
C'è un solo colore ciano: #00B4DB, con #0091B0 per lo stato "deep" e "hover". Queste varianti obsolete compaiono ancora nelle pagine più vecchie e nel CSS personalizzato. Sostituiscile non appena le individui e non reintrodurle mai nei nuovi progetti.
Un carattere serif per i titoli, un sans-serif per tutto il resto. DM Serif Display conferisce calore e autorevolezza editoriale; Inter si presta alla lettura di testi lunghi e all’interfaccia utente senza creare distrazioni.
Serif · Solo 400 · Titoli, citazioni, numeri
Sans · 400 / 600 / 700 · Testo, interfaccia utente, pulsanti
Il font DM Serif Display è disponibile in un unico peso. Non applicare mai <strong>, <b>, oppure font-weight: 600/700 Con i caratteri serif, il browser genera un effetto "grasso" artificiale che risulta pesante e sfocato, soprattutto in Safari. Se una linea serif deve essere enfatizzata, usa <em>: il corsivo abbinato al colore TCF Cyan costituisce lo stile di enfasi standard.
Due scale. Articolo è pensato per contenuti di lunga durata, post di blog e pagine dedicate ai programmi. Visualizza è pensato per le sezioni "hero", le landing page e i momenti di marketing in cui il testo deve svolgere un ruolo più incisivo. Le dimensioni riportate di seguito rappresentano il limite massimo per il desktop; i titoli vengono visualizzati come clamp() quindi si ridimensionano sui telefoni.
La fiducia si costruisce attraverso una responsabilità misurabile e una trasparenza costante, e le valutazioni di terze parti riflettono esattamente questo.
Fondata nel 2009, la Testicular Cancer Foundation è un’organizzazione senza scopo di lucro di tipo 501(c)(3) e l’unica associazione dedicata al cancro ai testicoli con personale a tempo pieno negli Stati Uniti. Siamo un team composto da sopravvissuti, operatori sanitari e attivisti impegnati a promuovere l’informazione e la sensibilizzazione.
Inter 16 / 600, padding: 1rem 2rem, raggio di 8 px, transizione del colore di 0,18 s. Gli stili dei link di Squarespace si estendono ai blocchi di codice, quindi gli anchor dei pulsanti sono sempre impostati colore e text-decoration con !important.
Ciano primario per l'azione principale; ciano intenso quando il pulsante si trova accanto al testo del corpo e serve creare contrasto; contorno per qualsiasi elemento secondario.
Ciano su blu navy. Blu navy su ciano: la fascia “Donate” è l’unico elemento di colore ciano della pagina, quindi il relativo pulsante assume una tonalità scura invece di contrastare con lo sfondo.
Elementi ricorrenti. Questi compaiono nei post del blog, nelle pagine dei programmi e nei contenuti destinati ai donatori. È meglio ricorrere a uno schema già esistente piuttosto che inventarne uno nuovo: la coerenza del marchio si ottiene attraverso la ripetizione, non attraverso la novità.
Etichetta di categoria sopra un H1. Sfondo sfumato, testo in ciano scuro.
Breve sintesi o punto chiave. Tonalità ciano con un bordo sinistro principale di 3 px.
In breve: Candid Platinum, 4 stelle su Charity Navigator con il 93%, tra le migliori valutazioni su GreatNonprofits, recensioni indipendenti su Trustpilot.
Superficie scura con titolo in grassetto, titolo principale, paragrafo di approfondimento e citazione in evidenza (facoltativa).
Per i donatori e i partner
La maggior parte delle organizzazioni no profit del nostro settore è presente su una o due di queste piattaforme. TCF è presente su tutte e quattro.
"La verifica indipendente è il minimo indispensabile, non il massimo raggiungibile."
Elenchi a gradini, valutazioni, segmenti di programma. Cifre con grazie in ciano primario, linee di separazione sottilissime, nessun effetto cromato.
Raggiungere i giovani là dove si trovano, attraverso un'educazione priva di pregiudizi.
Metti in contatto i pazienti a cui è stata appena diagnosticata la malattia con chi ne è uscito.
Assistenza a lungo termine, sostegno nella comunità e risorse disponibili al termine del trattamento.
Testi in prima persona con caratteri serif come righe di riferimento. Passando il mouse su una riga, le righe adiacenti si attenuano, la frase in corsivo diventa ciano e la freccia scorre. Utilizzato per gli argomenti del navigatore e per qualsiasi elenco del tipo “scegli la tua situazione”.
Schede con margine superiore di uguale altezza per articoli stampa, risorse e download. Passando il mouse sopra, compare un bordo ciano e un anello di 1px; non si verifica mai uno spostamento orizzontale.
Un sopravvissuto sottolinea l’importanza dell’autoesame, invitando i lettori a consultare le risorse di TCF dedicate all’autoesame.
Leggi l'articolo →Uno studio sottoposto a revisione tra pari che analizza in che modo le campagne basate sull’umorismo coinvolgano i giovani uomini.
Leggi lo studio →Sopravvissuti, operatori di assistenza, attivisti e professionisti sanitari si riuniscono per un fine settimana dedicato alla formazione.
Leggi l'articolo →Cifre grandi in carattere DM Serif. Etichetta in miniatura in alto, precisazione in linguaggio semplice in basso. Non mettere mai in grassetto le cifre.
Di ogni dollaro, va direttamente a finanziare i servizi del programma.
L'unico gruppo specializzato nel cancro ai testicoli con personale a tempo pieno in tutto il Paese.
Valutatori indipendenti di enti di beneficenza, tutti pubblicati online.
Le voci dei sopravvissuti e dei loro partner. Caratteri Serif in corsivo, attribuzione con micro-etichette, cartoncino sottilissimo.
"Nessuno mi ha detto di controllare. È proprio quel silenzio che siamo qui per rompere."Sopravvissuta, con diagnosi a 24 anni
Blocco per donazioni o iscrizioni a fine articolo. Colore blu navy scuro con accenti in ciano primario, colonna singola centrata, larghezza massima di circa 720px.
Ogni dollaro viene gestito secondo gli stessi criteri che si riflettono nei nostri rating indipendenti.
Fai una donazione a TCFIl movimento è un accenno, non una rappresentazione. Tutto si muove lungo la stessa curva breve, e nulla si muove se non è necessario.
da 0,18 s a 0,2 s facilità per quanto riguarda il colore, lo sfondo, il bordo e l'opacità. Niente di più lungo, niente di troppo vivace.
Il bordo è in TCF Cyan con un anello abbinato di 1px (box-shadow: 0 0 0 1px #00B4DB). No transY Inserimento delle schede nei nuovi lavori; i sistemi di inserimento preesistenti vengono rimossi man mano che le pagine vengono ricostruite.
Passando il mouse su una riga, le righe adiacenti vengono spostate a opacità: 0,55, trasforma la frase in corsivo in ciano e sposta la freccia di 4px. La riga su cui si passa il mouse mantiene la massima opacità.
Ogni elemento interattivo viene :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Non rimuovere mai le ghiere di messa a fuoco senza sostituirle.
Nessun effetto di pulsazione, bagliore, rimbalzo, parallasse o movimento in riproduzione automatica. Nessuna animazione che si ripeta mentre la pagina rimane inattiva.
Il sito funziona con Squarespace 7.1, quindi la maggior parte dei nuovi progetti grafici viene fornita sotto forma di blocco di codice autonomo inserito in una sezione del Fluid Engine. Queste regole impediscono che tali blocchi entrino in conflitto tra loro o con la piattaforma.
Ogni nuovo blocco utilizza il tcfx- prefisso. tcf- appartiene al CSS personalizzato legacy e causerà un conflitto.
.tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } e niente di più largo. Una larghezza pari a quella della pagina * Il reset ha già causato malfunzionamenti al sito in passato.
Verifica ogni regola presente nella classe radice del blocco. Un blocco di codice dovrebbe poter essere incollato in qualsiasi pagina senza effetti collaterali.
Se un <style> utilizzi @import Per i font, deve trovarsi nella prima riga di quel tag, altrimenti il browser lo ignora.
I file HTML e CSS di produzione vengono forniti senza commenti. Documenta invece il blocco nelle note di progetto.
Testo, numeri o SVG incorporati. Le emoji vengono visualizzate in modo non uniforme sulle diverse piattaforme e sono percepite come informali.
Il colore "Deep Navy" sostituisce il nero in tutta l'interfaccia utente. Il nero puro è riservato ai contenuti multimediali.
Utilizza il layout del telefono come base e aggiungi min-width query verso l'alto. Pile a colonna singola, clamp() carattere, margini ridotti al di sotto dei 640px, aree di interazione ottimizzate per il tocco.
target="_blank" viene sempre fornito con rel="noopener noreferrer".
Quando si rimodella una pagina esistente, è necessario mantenere esattamente i titoli, il testo del corpo, gli URL e i parametri UTM. Segnalare eventuali modifiche apportate, anziché effettuarle in modo silenzioso.
Gli eroi ricostruiti mantengono esattamente un H1 con il testo originale, per motivi di SEO. Evitate Squarespace's testo con scala quadrata wrapper, le sue dimensioni inline possono scomparire durante l'esecuzione e causare il collasso dell'intestazione.
Per rendere scura la sezione di un blocco, seleziona il livello di sfondo, non il riquadro della sezione, e dipingi .page-section elimina qualsiasi divisore clip-path.
.page-section:has(.tcfx-block) .section-background { background: #0F172A !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }