Guida di stile

La presente guida stilistica offre una panoramica completa del sistema di progettazione visiva del sito web della Testicular Cancer Foundation, con particolare attenzione ai colori e alla tipografia.

Tavolozza dei colori

La tavolozza dei colori è un elemento fondamentale dell'identità del marchio, in quanto contribuisce a creare un'immagine coerente e riconoscibile. La tavolozza comprende colori primari, secondari e di accento, utilizzati in modo strategico in tutto il sito web.

Colori primari

I colori primari sono quelli più utilizzati nel design e rappresentano l'identità fondamentale del marchio.

Ciano/Turchese primario

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

Colore principale del marchio, utilizzato per sfondi, pulsanti ed elementi visivi chiave.

Nero

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

Testo del corpo, titoli su sfondi chiari e piè di pagina del sito web.

Bianco

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

Testo su sfondo scuro, sfondi per le sezioni di contenuto.

Colori secondari e di accento

I colori secondari e di accento vengono utilizzati per completare i colori primari e per attirare l'attenzione su elementi specifici, come pulsanti, link e sezioni informative.

Blu scuro

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

Sfondi per le schede statistiche e altre sezioni in evidenza.

Grigio ardesia

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

Pulsanti secondari ed elementi dell'interfaccia utente.

Grigio chiaro

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

Sfondi per le schede e i moduli di contenuto per creare una separazione visiva.

Grigio medio

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

Bordi ed elementi sottili dell'interfaccia utente.

Bianco sporco

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

Sottili variazioni di sfondo.

Tipografia

Il sito web utilizza una combinazione di caratteri serif per i titoli e caratteri sans-serif per il corpo del testo, creando una gerarchia tipografica chiara e leggibile.

DM Serif Display

Serif • Titoli

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans-serif • Testo del corpo

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Scala tipografica

Gli esempi seguenti illustrano le dimensioni e lo spessore dei caratteri utilizzati per i vari elementi di testo presenti sul sito web.

TITOLO 1 (H1)
Carattere DM Serif Display
Dimensione 62px
Peso 400

Combattere il cancro ai testicoli grazie alla diagnosi precoce

TITOLO 2 (H2)
Carattere DM Serif Display
Dimensioni 40px - 48px
Peso 400 - 800

La nostra missione: salvare vite umane attraverso l'istruzione

TITOLO 3 (H3)
Carattere DM Serif Display
Dimensione 28px
Peso 400

Scopri come eseguire l'autopalpazione dei testicoli

TESTO DEL CORPO (P)
Carattere Inter
Dimensione 17,5 px
Peso 400

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.

CARATTERE DEL PULSANTE
Carattere Inter
Dimensioni 0,9 rem
Peso 600
Spaziatura tra i caratteri 0,07 em
Trasforma Maiuscolo
Altezza della riga 1,8 em