Guide de style

Ce guide de style offre un aperçu complet du système de conception visuelle du site web de la Fondation contre le cancer des testicules, en mettant l'accent sur les couleurs et la typographie.

Palette de couleurs

La palette de couleurs est un élément essentiel de l'identité de marque, car elle permet de créer une image cohérente et reconnaissable. Elle se compose de couleurs primaires, secondaires et d'accentuation, qui sont utilisées de manière stratégique sur l'ensemble du site web.

Couleurs primaires

Les couleurs primaires sont les couleurs les plus fréquemment utilisées dans le design ; elles incarnent l'identité fondamentale de la marque.

Cyan/Turquoise primaire

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

Couleur principale de la marque, utilisée pour les arrière-plans, les boutons et les éléments visuels clés.

Noir

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

Le corps du texte, les titres sur fond clair et le pied de page du site web.

Blanc

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

Texte de corps sur fond sombre, arrière-plans pour les sections de contenu.

Couleurs secondaires et d'accent

Les couleurs secondaires et d'accent sont utilisées pour mettre en valeur les couleurs principales et attirer l'attention sur des éléments spécifiques, tels que les boutons, les liens et les sections d'information.

Bleu marine foncé

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

Arrière-plans pour les fiches statistiques et autres sections mises en évidence.

Gris ardoise

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

Boutons secondaires et éléments de l'interface utilisateur.

Gris clair

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

Des arrière-plans pour les cartes et les modules de contenu afin de créer une séparation visuelle.

Gris moyen

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

Les bordures et les éléments d'interface utilisateur discrets.

Blanc cassé

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

De légères variations dans l'arrière-plan.

Typographie

Le site web utilise une police à empattement pour les titres et une police sans empattement pour le corps du texte, ce qui permet de créer une hiérarchie typographique claire et lisible.

DM Serif Display

Serif • Titres

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Sans-serif • Corps du texte

Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Échelle typographique

Les exemples suivants présentent les tailles et les graisses de police utilisées pour les différents éléments de texte du site web.

BARRE DE LIENS RÉDUITE
Police Inter
Taille 0,74 rem
Poids 600
TITRE 1 (H1)
Police DM Serif Display
Taille 62 px
Poids 400

Lutter contre le cancer des testicules grâce au dépistage précoce

TITRE 2 (H2)
Police DM Serif Display
Taille 40 px - 48 px
Poids 400 - 800

Notre mission : sauver des vies grâce à l'éducation

TITRE 3 (H3)
Police DM Serif Display
Taille 28 px
Poids 400

Apprenez à réaliser un auto-examen des testicules

TEXTE DU CORPS (P)
Police Inter
Taille 17,5 px
Poids 400

Fondée en 2009, la Testicular Cancer Foundation est une organisation à but non lucratif de type 501(c)(3) et la seule association dédiée au cancer des testicules disposant d'une équipe à plein temps aux États-Unis. Nous sommes une équipe composée de survivants, d'aidants et de militants qui ont à cœur de renforcer l'éducation et la sensibilisation.

POLICE DES BOUTONS
Police Inter
Taille 0,9 rem
Poids 600
Espacement des caractères 0,07 em
Transformer Mettre en majuscules
Hauteur de ligne 1,8 em