Charte graphique · v1.0

Déléguer. Respirer.
Reprendre le contrôle.

Le système visuel d'Ava : assistance virtuelle premium pour les professionnels qui veulent récupérer leur temps. Un univers bleu pétrole, structuré et humain, ponctué d'un orange franc.

B2B · DélégationPremium, pas froidWeb · Social · Commercial
01

L'univers de marque

Ava aide les professionnels à déléguer les tâches chronophages pour gagner du temps et retrouver de la liberté. L'identité doit être rassurante et fluide : assez premium pour inspirer confiance, assez humaine pour rester accessible.

Positionnement

Professionnel, moderne, fluide. Le calme d'un fond bleu profond, l'énergie d'un accent orange utilisé avec parcimonie.

Personnalité

Élégante et efficace. La signature manuscrite apporte la touche humaine ; la grille structure et rassure.

À éviter

Le corporate froid, le luxe doré, le gadget startup, le trop féminin, le surchargé. On garde de la respiration partout.

03

Palette couleurs

Le bleu pétrole domine (80 % des surfaces). L'orange est un accent, jamais un aplat de fond géant. Le doré reste un highlight rare. Le gris clair porte le texte courant sur fond sombre.

1 · Couleurs principales

Bleu pétrole#082131
Fond maître
Bleu foncé#0B2D3F
Surfaces / nav
Orange principal#F97316
Accent & CTA
Blanc#FFFFFF
Titres / logo

2 · Couleurs secondaires

Bleu secondaire#11384B
Cards
Bleu doux#173A50
Cards / inputs
Ligne de grille#244B5C
Bordures / grille
Gris texte clair#C0CCD5
Texte courant

3 · Couleurs d'accent

Orange principal#F97316
Boutons, mots-clés
Orange CTA#EF6C28
Hover / pression
Doré highlight#F5BA54
Labels rares, étoiles

4 · Couleurs de texte

Titres
Blanc
#FFFFFF
Texte courant
Gris clair
#C0CCD5
Mot-clé / lien
Orange
#F97316
Label / highlight
Doré
#F5BA54

5 · Couleurs de fond

Fond principal
Pétrole
#082131
Nav / sections
Bleu foncé
#0B2D3F
Cards
Bleu secondaire
#11384B
Fond clair (inversé)
Blanc
#FFFFFF

6 · Couleurs UI

Boutons
Primaire
#F97316
Hover
#EF6C28
Liens & bordures
Lien
#F97316
Bordure / card
#244B5C
Alertes
Info
#173A50
Succès
#F5BA54
04

Typographies

La signature manuscrite du logo est déjà très « humaine ». On la fait contraster avec des sans-serif nettes et géométriques : Space Grotesk pour les titres (caractère, un peu technique), Inter pour le texte (neutre, ultra-lisible). Toutes deux gratuites, Google Fonts, parfaites pour le web.

Space Grotesk

Display · Titres
Ava Aa
ABCDEFG abcdefg 0123456789

Inter

Body · Paragraphes
Ava Aa
ABCDEFG abcdefg 0123456789

Option premium

Alternative haut de gamme

Pour un cran plus premium : Fraunces (serif moderne) en gros titres éditoriaux, ou General Sans en display. À réserver aux supports vitrines.

Hiérarchie & exemples d'usage
Gagnez du temps
H1 · Space Grotesk SemiBold 600
52 px desktop / 34 px mobile · interligne 1.05 · letter-spacing −2 %
Déléguez l'essentiel
H2 · Space Grotesk SemiBold 600
38 px / 28 px · interligne 1.1 · −2 %
Une assistante, vraiment
H3 · Space Grotesk Medium 500
26 px / 22 px · interligne 1.2
Ava prend en charge vos tâches répétitives pour vous rendre vos heures les plus précieuses.
Texte courant · Inter Regular 400
17 px / 16 px · interligne 1.6
Réserver un appel
Bouton · Space Grotesk SemiBold 600
15 px · letter-spacing +1 %
Assistance virtuelle
Petit label · Space Grotesk SemiBold 600
12 px · MAJ · letter-spacing +22 %
« Vous décidez. Ava exécute. »
Citation / signature · Space Grotesk Italic 400
24 px · interligne 1.3
Tailles desktop → mobile
  • H1 — 52 / 34 px
  • H2 — 38 / 28 px
  • H3 — 26 / 22 px
  • Body — 17 / 16 px
  • Small / label — 12 px
Règles de réglage
  • Titres : graisse 500–600, jamais 700 en grand
  • Interligne titres 1.05–1.2, corps 1.6
  • Letter-spacing négatif (−2 %) sur les gros titres
  • Labels en MAJ : +22 % de letter-spacing
  • Largeur de ligne de lecture : 60–75 caractères
05

UI Kit

Composants arrondis, cards sombres légèrement translucides, boutons orange. Beaucoup de respiration. La couleur fait le travail : on évite les bordures lourdes et les ombres dures.

Boutons

Primaire (orange, CTA unique par écran) · Secondaire (contour) · Ghost (lien-bouton). Hover : orange foncé #EF6C28 + léger lift.

Badges
● Nouveau ★ Populaire Inclus
Liens

Découvrez comment déléguer en 24 h et reprenez la main sur votre agenda.

Card type

Gestion d'agenda

Ava organise vos rendez-vous, relance vos prospects et protège vos créneaux de concentration.

Formulaire
Demander un devis
Radius
8
14
22
pill

Inputs 14 · cards 22 · boutons/badges pill.

Spacing (base 4)
8
16
24
32
48

Échelle 4 / 8 / 16 / 24 / 32 / 48 / 64. Sections : 70–96 px.

Ombres

Soft (boutons) · Card (élévation). Diffuses, jamais dures.

ℹ️
Info. Votre demande est en cours de traitement.
Confirmé. Votre appel est réservé.
!
Attention. Il reste une étape à compléter.
Grille de mise en page

Conteneur max 1080–1200 px, 12 colonnes, gouttière 24 px, marges latérales 28 px (16 px mobile). La grille fine bleu pétrole (#244B5C) reste discrète en arrière-plan : elle structure sans saturer.

06

Charte éditoriale

Ava parle comme une partenaire de confiance : claire, élégante, directe. On vend du temps retrouvé et de la sérénité, pas des « solutions innovantes ».

Ton de voix

Tutoiement de l'ambition, vouvoiement du client. Phrases courtes. Verbes d'action. On rassure sans infantiliser, on est premium sans être distant. Jamais de jargon corporate.

Mots à utiliser
  • déléguer
  • gagner du temps
  • liberté
  • sérénité
  • fluide
  • fiable
  • sur-mesure
Mots à éviter
  • disrupter
  • révolutionnaire
  • synergie
  • solution clé en main
  • leader du marché
  • booster
Phrases commerciales
  • « Reprenez les heures que vous donnez à l'administratif. »
  • « Vous décidez, Ava exécute. »
  • « Une assistante qui comprend votre métier. »
Exemples de CTA
  • Réserver un appel
  • Déléguer dès maintenant
  • Voir comment ça marche
  • Obtenir mon devis
Titres de sections
  • Ce qu'Ava prend en charge
  • Comment ça fonctionne
  • Ils ont délégué, ils respirent
  • Des tarifs simples
07

Exemples d'application

Le système en situation : web, social, commercial, contact. Mêmes règles partout, fond pétrole + grille discrète + accent orange.

1 · Hero de site web

Reprenez le contrôle de votre temps

Ava prend en charge vos tâches chronophages. Vous gardez la vision, on gère l'exécution.

2 · Post LinkedIn

Ava
Assistance virtuelle · Sponsorisé
3 h par jour perdues en administratif, c'est 1 mois de travail offert chaque année. Et si vous le repreniez ? 👇

Déléguez l'administratif.
Récupérez vos heures.

3 · Story Instagram

Et si vous déléguiez tout ça ?

Swipe up →

4 · Slide de présentation commerciale

Offre · 2026

Trois heures rendues, chaque jour.

AVA — ASSISTANCE VIRTUELLE PREMIUM

5 · Carte de visite & signature mail

Ava
Votre assistante virtuelle
hello@ava.co · ava.co
Équipe Ava
Assistance virtuelle premium
hello@ava.co · +33 0 00 00 00 00 · ava.co

6 · Page « Services »

Agenda & RDV

Planification, relances, rappels. Votre calendrier travaille pour vous.

✉️

Boîte mail

Tri, réponses types, priorisation. L'inbox zéro, sans y penser.

📄

Administratif

Devis, factures, suivi. Le back-office géré, vous gardez la vision.

7 · Page « Tarifs »

Essentiel
390€/mois
  • 10 h déléguées
  • Agenda & mails
  • Support sous 24 h
Choisir
★ Populaire
Pro
690€/mois
  • 25 h déléguées
  • Tout l'Essentiel
  • Administratif inclus
  • Interlocuteur dédié
Choisir
Sur-mesure
Sur devis
  • Volume illimité
  • Process personnalisés
  • Priorité absolue
Nous contacter
08

Les règles essentielles

À garder sous les yeux avant de produire n'importe quel support Ava.

  1. Fond pétrole d'abord. #082131 domine ~80 % des surfaces. La grille #244B5C reste discrète.
  2. Orange = accent, pas fond. #F97316 sur les CTA, mots-clés, points. Un seul CTA orange par écran.
  3. Doré rare. #F5BA54 réservé aux labels et highlights ponctuels (étoiles, « populaire »).
  4. Logo intouchable. Jamais déformé, incliné, ombré, ni posé en blanc sur fond clair. Marge = 2× le point.
  5. Favicon ≠ signature. En petit, on utilise le monogramme « a » + point, pas la signature complète.
  6. Deux typos, deux rôles. Space Grotesk pour les titres, Inter pour le corps. Letter-spacing négatif sur les gros titres.
  7. Tout est arrondi. Cards 22 px, inputs 14 px, boutons et badges en pill. Ombres diffuses, jamais dures.
  8. De l'air. Sections 70–96 px, largeur de lecture 60–75 caractères. La respiration fait le premium.
  9. Voix claire. On vend du temps et de la sérénité. Verbes d'action, zéro jargon corporate.
  10. Humain + structuré. La signature manuscrite (chaleur) contre la grille nette (fiabilité) : c'est tout l'équilibre d'Ava.