Psyché

Psyché

Particularités

Psyché est le thème le plus classique et versatile. Ses images avec bords carré et sa sobriété lui assure une grande élégance et flexibilité. En toute simplicité, ce thème habillera parfaitement votre contenu.

Paramètres globaux

  • Les titres et les textes sont alignés à gauche
  • Les CTA ont un bord arrondis de 25px
  • Les images utilisées dans les widgets sont à bords carré
image

  • Bouton primaire : à bords arrondis (25px)
  • Bouton secondaire : bords arrondis (25px)
  • Bouton tertiaire : pas de bordure ni de couleur d’arrière plan
  • Les Heros avec images alignés à gauche ou à droite affichent celles-ci sur 50% de la largeur à partir de la grille, bords carrés
  • Les éléments actifs du menu sont dans la couleur primaire
  • Les icônes et pictos sont inchangeables
  • Le fond de page (body) utilise la couleur Light
  • Ratio image:
    • Bloc Hero → 12:5
    • Bloc Text-image → 4:5
    • Blocs Colonnes, News et Event → 5:3
    • Bloc Image et Video → 6:4
    • Bloc Profile → 1:1

Application des variables de couleurs inhérentes au thèmes

💡
Par défaut non customizable à partir des réglages de Minos

Primary color

Utilisée par défaut pour la couleur:

  • Pour les flèches indiquant qu’il y a des éléments de sous-menu
  • Pour les flèches indiquant les pages suivantes dans le l’index des évènements
  • Dans le l’index des évènements, l’élément en dessous des différentes vues, indiquant sur quel type de vues, l’utilisateur est.
  • en couleur d’arrière plan pour les boutons en focus des paginations sur la page search

Secondary color

Utilisée par défaut pour la couleur:

  • background-color de la légende des images - widget image
  • arrière-plan des dates pour le bloc Events, de la Single Event et du mini calendrier dans le l’index des évènements
  • arrière-plan de tout le bloc Formulaire
  • pour les icons du bloc Profil

Tertiary color

Utilisée par défaut pour la couleur:

  • des widgets impairs dans la page
  • de la barre de navigation upper
  • Pour marquer le contraste avec le fond de toute la section en couleur light
    • Bloc Colonnes: la bordure de chacune des cartes est en couleur tertiaire lorsque le bloc est à une position pair
    • Bloc News et Events: la couleur d’arrière-plan de chacune des cartes est en couleur tertiaire lorsque le bloc est à une position pair
    • l’index des évènements, en vue par jour, mois et en liste, pour l’arrière-plan des cartes et les bordures du tableau
  • l’arrière-plan du Footer (cf. Footer customizable)
  • du background des sous-menus dans la barre de navigation upper et down
  • en couleur d’arrière plan pour les boutons des paginations sur la page search

Dark color

  • des icons liés aux évènements
🤗
Conseil: Etant très peu exploitée par défaut ailleurs, nous vous la conseillons à l’utilisation de vos titres (de H1 à H4 et de vos paragraphes)

Light color

Utilisée par défaut pour la couleur:

  • des widgets pairs dans la page
  • de fond de la page (body)
  • de la barre de navigation down
  • de la bordure des sous-menus dans la barre de navigation upper et down
  • de tous les éléments textes (titres et paragraphes) du bloc Formulaire
  • la bordure des éléments du formulaire (input, select, …)
  • La bordure et l’arrière plan des radio button et des checkbox
  • Bloc Hero avec image en background unqiuement: tous les éléments textes (titres et paragraphes) pour des soucis de contrast.
  • 🤗
    Conseil: si choix de l’image en background, nous vous conseillons une image qui permettra le contraste avec la couleur du texte en light.
  • Pour marquer le contraste avec le fond de toute la section en couleur tertiaire
    • Bloc Colonnes: la bordure de chacune des cartes est en couleur light lorsque le bloc est à une position impair
    • Bloc News et Events: la couleur d’arrière-plan de chacune des cartes est en couleur light lorsque le bloc est à une position impair

Footer

Les couleurs des éléments et d’arrière-plan du footer sont également customizables: pour plus de renseignements voir comment changer les couleurs des éléments du footer

Il y a 4 variables de couleurs utilisées par défaut dans le footer

  • La couleur primaire pour les flèches indiquant qu’il y a des éléments de sous-menu
  • La couleur secondaire pour les éléments suvolés (menus, contact info et réseaux sociaux)
  • La couleur tertiaire pour l’arrière-plan
  • La couleur sombre/dark pour les titres et les menus

💡
Conseils
  • Succession des sections avec alternance des couleurs de fond (couleur tertiary et light). Pour cette raison, il est conseillé que ces deux couleurs aient des teintes assez proches l’une de l’autre pour envisager une alternance agréable visuellement. Il est néanmoins possible de jouer avec les “compositions” de Minos pour changer localement cette logique.
  • Nous conseillons pour le texte et les titres d’utiliser une couleur sombre (Dark Color) si les réglages derrière les variables de couleurs tertiaire et claire (Tertiary color & Light color) sont claires afin de garder un contraste assez important pour avoir une bonne lisibilité des textes.
  • Pour une question de contraste, la couleur secondaire doit être une couleur plus foncée que les couleurs primaire et tertiaire

Typographies

Pour les typographies, vous avez pour le moment à dispositions 12 polices qui sont toutes des “Google fonts”.

Les polices ne vous inspirent pas ? Nous pouvons en rajouter une pour vous. Nous vous conseillons des google fonts et il est toujours possible de trouver une typographie équivalente à celle de votre charte graphique.

  • Dans la barre de navigation du bas, le texte prendra toujours en compte le réglages de la police faits sous l’onglet navigation (cf. Attribution de la police et des couleurs aux différents éléments).
  • Dans la barre de navigation du haut, les réglages de navigation seront respectées à l’exception, pour plus de lisibilité et pour des questions de design propre au thème:
    • du caractère de la police: par défaut, le texte sera en majuscule
    • la taille de la police : par défaut est de 12px

💡
Conseils

Déclinaisons

Déclinaison Milieu médical

image