...

Design System

Cette page affiche un aperçu des polices et des couleurs globales du site. Les modifications effectuées dans les paramètres du site seront affichées ici.

Couleurs globales

Voici comment est utilisé le système de couleur :

  • Les arrières plans :
    • Clairs (le plus souvent) : Secondaire, Main_Tint, Main_Tint+
    • Foncé : Primaire
  • Les titres :
    • sur fond clair (le plus souvent) : Primaire
    • sur fond foncé: Secondaire
  • Les textes :
    • sur fond clair : Texte, Texte subtil
    • sur fond foncé : Blanc pur, Secondaire
  • Les boutons
    • Bouton 1 : Accent, Blanc pur
    • Bouton 2 : Blanc pur, Transparent, Accent
  • Les liens
    • sur fond clair : Accent, hover: Main_Tint (underline)
    • sur fond foncé : Main_Tint, hover:Main_Tint+, (underline)

Système

Primaire

Couleur let idName = 'primaire'; // Replace with the ID of the element you want to target // Get the color value let colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Secondaire

Couleur idName = 'secondaire'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Texte

Couleur idName = 'texte'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

accent

Couleur idName = 'accent'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Personnalisées

Texte subtil

Couleur idName = 'texteSubtil'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Texte gris clair

Couleur idName = 'texteGrisClair'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Transparent

Couleur idName = 'transparent'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Blanc pur

Couleur idName = 'blancPur'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Overlay

Couleur idName = 'ov'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Main_Tint+

Couleur idName = 'Main_Tplus'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Main_Tint

Couleur idName = 'Main_T'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Main_Shade

Couleur idName = 'Main_S'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Main_Shade+

Couleur idName = 'Main_Splus'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Main_BG

Couleur idName = 'Main_BG'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Main_BG+

Couleur idName = 'Main_BGplus'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Couleurs fonctionnelles

Danger

Couleur idName = 'danger'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Danger-dark

Couleur idName = 'dangerDark'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Warning

Couleur idName = 'warning'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Warning-dark

Couleur idName = 'warningDark'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Success

Couleur idName = 'success'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Success-dark

Couleur idName = 'successDark'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Info

Couleur idName = 'info'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Info-dark

Couleur idName = 'infoDark'; // Replace with the ID of the element you want to target // Get the color value colorValue = getColorValue(idName); // Set the content with the hexadecimal color value if (colorValue) { setContentWithHexColor(idName); }

Polices globales

Police principale (titres)

Police n°1

Police secondaire (textes)

Police n°2

Système

Primary

Un titre de caractère

Secondary

Un titre de caractère

body text

Entre le stimulus et la réponse, il y a un espace.
Dans cet espace se trouve notre pouvoir de choisir notre réponse.
Dans notre réponse résident notre croissance et notre liberté.

accent text

Entre le stimulus et la réponse, il y a un espace.
Dans cet espace se trouve notre pouvoir de choisir notre réponse.
Dans notre réponse résident notre croissance et notre liberté.

Personnalisées

Titre 404

404

Pré-Hero

Avant le titre

Titre Hero

Un titre de caractère

Sub-Héro

On ne voit bien qu'avec le cœur. L'essentiel est invisible pour les yeux.

Pré-T1

Avant le titre

Titre 1

Un titre de caractère

Sub-T1

On ne voit bien qu'avec le cœur. L'essentiel est invisible pour les yeux.

Pré-T2

Avant le titre

Titre 2

Un titre de caractère

Sub-T2

On ne voit bien qu'avec le cœur. L'essentiel est invisible pour les yeux.

Titre 3

Un titre de caractère​

Titre 4

Un titre de caractère​

Titre 5

Un titre de caractère​

Titre 6

Un titre de caractère​

Titre Boîte

Un titre de caractère​

Texte

Entre le stimulus et la réponse, il y a un espace.
Dans cet espace se trouve notre pouvoir de choisir notre réponse.
Dans notre réponse résident notre croissance et notre liberté.

Texte Accent

Entre le stimulus et la réponse, il y a un espace.
Dans cet espace se trouve notre pouvoir de choisir notre réponse.
Dans notre réponse résident notre croissance et notre liberté.

Texte Subtil

Entre le stimulus et la réponse, il y a un espace.
Dans cet espace se trouve notre pouvoir de choisir notre réponse.
Dans notre réponse résident notre croissance et notre liberté.

Texte Petit

Entre le stimulus et la réponse, il y a un espace.
Dans cet espace se trouve notre pouvoir de choisir notre réponse.
Dans notre réponse résident notre croissance et notre liberté.

Citation

Nommée doit être ta peur, avant de pouvoir la bannir.

Légende

Ce sont les petites lignes qui donnent le tableau de l'ensemble.

Navigation - toplinks

Téléphone Mail

Navigation

Accueil Services À propos Blog Contact

Boutons & Liens

Les boutons et les liens héritent de leur style à partir des paramètres globaux de polices et de couleurs définis dans les paramètres du site.

Action principale
Action secondaire

Les bonnes pratiques pour les liens consistent à les rendre explicites par leur sens, à ce qu’ils soient visuellement identifiables par soulignage ou gras. Pour les liens « Lire plus », il est recommandé de remplir le tag aria-label pour les personnes qui n’ont pas la vision pour naviguer mais écoutent les sites.

Lire plus

Les recommandations pour les liens dans le corps du texte sont les même que celles énoncées dans le texte adjacent.

Lire plus

Ceci est un pré-t2

Écrire sur un fond clair

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lire plus »

Ceci est un pré-t2

Écrire sur un fond foncé

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lire plus »

Aller au contenu principal Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.