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, Bg_Tint, Bg_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: AccentTint (underline)
    • sur fond foncé : AccentTint, hover:AccentTint+, (underline)

Système

Primaire

Couleur

Secondaire

Couleur

Texte

Couleur

accent

Couleur

Personnalisées

Texte subtil

Couleur

Texte gris clair

Couleur

Transparent

Couleur

Blanc pur

Couleur

BleuRoyal_Tint+

Couleur

BleuRoyal_Tint

Couleur

BleuRoyal_Shade

Couleur

BleuRoyal_Shade+

Couleur

Overlay bg

Couleur

BG_Tint

Couleur

BG_Tint+

Couleur

Couleurs fonctionnelles

Danger

Couleur

Danger-dark

Couleur

Warning

Couleur

Warning-dark

Couleur

Success

Couleur

Success-dark

Couleur

Info

Couleur

Info-dark

Couleur

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 »

Skip to content