Zenfeel
Identité

Identité & logos

Référentiel d’usage pour la marque Zenfeel : logotype, couleurs, typographie, tailles minimales, zone de protection, bonnes pratiques & interdits. Cette page vous permet d’utiliser la marque correctement dans vos supports.

Logotype — version principale

Logotype Zenfeel
  • Utiliser **la version fournie** (SVG vectoriel) sans modification.
  • Fond recommandé : **sombre** pour un contraste confortable.
  • Respecter la **zone de protection** : laisser au minimum un espace égal à la hauteur du « Z » tout autour.
Télécharger le logo (SVG)

Logotype sur fond clair

Logotype Zenfeel sur fond clair
  • Assurer un **contraste suffisant** (AA au minimum).
  • Éviter les fonds très texturés ; privilégier des surfaces **uniformes**.
  • Ne pas coller d’éléments au logo : conserver la **zone de respiration**.

Tailles minimales & respiration

Web
Largeur minimale recommandée : **120 px**.
En dessous, préférer une version compacte ou retirer le logo.
Impression
Largeur minimale recommandée : **25 mm**.
Respecter la zone de protection (≥ 1× hauteur du “Z”).

Palette de couleurs

Brand — #78D2C3
Accent — #D7B77A
Fond — #0B0F14
Texte — #EAE EF4
Muted — #A9B5C1

La palette est cohérente avec l’interface du site. Éviter les saturations extrêmes et les fonds agressifs.

Typographie

Le site utilise la **pile système** pour garantir performance et lisibilité : ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial.

Zenfeel — Calme, simplicité, authenticité.
Texte exemple : “Respirer, s’ancrer, revenir à l’essentiel.”

Corps recommandé pour le texte : 16–18 px web. Interlignage confortable (~1.6).

Mauvais usages (à proscrire)

  • Étirement, déformation, rotation, effets (ombres fortes, outline, glow).
  • Recolorisation hors palette ou contraste insuffisant.
  • Recadrage dans un conteneur trop serré (perte de lisibilité).
  • Pose sur des images très chargées sans fond de sécurité.

Icônes & favicon

Fichiers conseillés : assets/icon-16.png, assets/icon-32.png, assets/icon-180.png, assets/icon-192.png, assets/icon-512.png et un site.webmanifest.

<link rel="apple-touch-icon" sizes="180x180" href="assets/icon-180.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/icon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/icon-16.png">
<link rel="manifest" href="site.webmanifest">

En **file://**, notre script corrige les chemins si nécessaire.