Tastiie Brain

Charte Couleurs et Typographie

3 min de lecture

Charte Couleurs et Typographie

Statut

Cette page est une proposition structurée à date, basée sur le logo, le site public et les usages observés.
Elle n’est pas encore canonique.

1. Intention de marque

Le système visuel Tastiie doit exprimer :

  • gourmandise
  • fraîcheur
  • simplicité
  • fiabilité de service
  • accessibilité premium

2. Couleurs recommandées

Palette cœur

Bleu de structure

  • Nom recommandé : Bleu Tastiie
  • HEX de travail : #001C69
  • Rôle : structure, titres, éléments de confiance, navigation, contrastes forts

Orange d’action

  • Nom recommandé : Orange Gourmand
  • HEX de travail : #FF8C00
  • Rôle : CTA, mises en avant, callouts, actions principales

Vert fraîcheur

  • Nom recommandé : Vert Fraîcheur
  • HEX de travail : #61A94C
  • Rôle : accents food, responsabilité, tags positifs, rappels de marque
  • color.logo.orange : #FD8616
  • color.logo.green : #68C951
  • color.logo.black : #000000

Neutres recommandés

  • color.neutral.900 : #212529
  • color.neutral.700 : #666666
  • color.neutral.500 : #6C757D
  • color.neutral.300 : #DEE2E6
  • color.neutral.100 : #F5F5F5
  • color.surface.default : #FFFFFF
  • color.surface.alt : #F8F9FA

3. Règles d’usage couleur

Ce qui est recommandé

  • utiliser le bleu pour la structure et la confiance
  • utiliser l’orange pour l’action
  • utiliser le vert avec parcimonie comme accent utile
  • conserver des fonds clairs pour laisser respirer l’offre food

Ce qu’il faut éviter

  • trop mélanger orange et vert dans un même composant primaire
  • utiliser trop de bleus différents sans hiérarchie
  • transformer le vert en couleur UI dominante partout
  • surcharger les pages avec trop d’accents concurrents

4. Typographie recommandée

Police UI recommandée

  • Montserrat comme base de travail
  • Raison : lisible, directe, suffisamment contemporaine, déjà présente sur le site observé

Structure recommandée

Display / titres forts

  • Montserrat Bold ou SemiBold
  • usage : hero, titres de section, messages clés

Titres de contenu

  • Montserrat SemiBold
  • usage : H2, H3, cartes, blocs de réassurance

Texte courant

  • Montserrat Regular ou Medium
  • usage : paragraphes, fiches, textes d’accompagnement

Chiffres / prix

  • Montserrat Bold
  • usage : prix, KPI, bénéfices visibles, CTA commerciaux

5. Hiérarchie recommandée

  • H1 : fort, simple, peu bavard
  • H2 : bénéfice ou section
  • H3 : sous-bloc, carte, argument
  • Body : aéré, phrases courtes, ton simple
  • Caption : secondaire, jamais trop faible en contraste

6. Ton typographique

Le système ne doit pas sonner :

  • trop luxe
  • trop tech
  • trop institutionnel

Il doit rester :

  • chaleureux
  • clair
  • lisible
  • orienté conversion
  • orienté food et service

7. Recommandations pour la refonte WooCommerce

  • figer 1 seule famille principale UI
  • réduire les écarts de tailles et de graisses
  • formaliser une échelle typographique simple
  • relier systématiquement couleur et fonction
  • prévoir une documentation Figma / front synchronisée

8. À confirmer plus tard

  • valeurs officielles finales des couleurs
  • éventuelle palette secondaire
  • équivalents print
  • éventuelle police de marque complémentaire

Vue Graphique

Liens retour