Brand Guide

Vision, Mission & Valeurs

Cérat Groupe Conseil est une firme de conseil stratégique spécialisée dans la structuration de la rentabilité interne des entreprises de construction au Québec.

Leadership terrain

La rentabilité commence dans le back-office. On le prouve sur le chantier.

Les 7 valeurs de marque

Positionnement

Proposition de valeur unique (UVP)

« La rentabilité commence dans le back-office. »

Nous sommes la seule firme au Québec qui intervient exclusivement sur la structure invisible du back-office des entreprises de construction, avec une méthode propriétaire (EMC²), pour transformer la comptabilité en outil de pilotage et la gestion en levier de rentabilité - avant toute optimisation ou implantation d'outils.

Ce que nous ne sommes PAS

Client idéal

La méthode EMC² - Détail

Logo

Le logo est une composition typographique structurée en trois éléments hiérarchiques : le trait horizontal doré, le mot CERAT en typographie hybride, et GROUPE CONSEIL en tracking élargi.

Version fond sombre - Usage principal

Version fond clair

Zone de protection

Zone de protection = hauteur du « C »

Taille minimale : 120px (numérique) / 30mm (impression)

Couleurs

L'identité repose sur trois couleurs exclusives. Cliquez sur un swatch pour copier le code HEX.

Couleurs primaires

Couleurs fonctionnelles

Ratios d'utilisation

Contrastes WCAG

Typographie

La famille typographique propriétaire CeratNova est chargée et utilisée en rendu réel sur cette page.

Substitutions typographiques

Code @font-face

@font-face {
  font-family: 'CeratNovaBold';
  src: url('CeratNovaBold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'CeratNovaRegular';
  src: url('CeratNovaRegular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Iconographie & Imagerie

Icônes linéaires, géométriques, trait fin à moyen (2px). Cohérence avec la pureté géométrique du logo.

Style recommandé

Bibliothèque recommandée : Lucide Icons - icônes linéaires open-source, cohérentes avec l'ADN géométrique de la marque.

Couleurs des icônes

Direction artistique photo

Directives photographiques

La photographie chez Cérat n'est jamais purement décorative : elle est stratégique. Chaque image doit ancrer visuellement la proposition de valeur - l'ordre dans le chaos, la maîtrise, et le back-office comme centre de décision.

Philosophie visuelle

Cérat montre ce que les autres ignorent : l'endroit où se gagne ou se perd l'argent. L'imagerie doit toujours ramener le regard vers l'intérieur, vers la structure, vers l'analyse.

Exemples photographiques Cérat

Accompagnement stratégique Leadership debout, équipe engagée, lumière naturelle - image conforme

Formation terrain Casque + micro : pont entre le chantier et la transmission du savoir

Événement professionnel Contact humain, échange direct - le terrain au sens relationnel

Salle de réunion Le back-office structuré : espace lumineux, posture professionnelle

Direction artistique

Traitement de l'humain

Sélection d'images stock

Overlay et superpositions

Checklist photo - Validation rapide

• La photo montre-t-elle le back-office plutôt que l'exécution manuelle ?
• Les personnes ont-elles l'air concentrées et professionnelles ?
• Les couleurs s'intègrent-elles avec le Bleu Nuit et l'Ocre ?
• L'image respire-t-elle assez pour du texte lisible par-dessus ?

Si une seule réponse est NON, l'image doit être changée ou recadrée.

Interdictions formelles

Applications visuelles

Formats et règles visuelles pour chaque canal de communication - LinkedIn, documents d'affaires, présentations et signatures courriel.

LinkedIn - Formats

Documents d'affaires

Présentations (PowerPoint / Keynote)

Signature courriel

[Prénom Nom]

[Titre]

Courriel : courriel@groupecerat.ca
Téléphone : (XXX) XXX-XXXX
Site web : groupecerat.ca

La rentabilité commence dans le back-office.

Récapitulatif des formats

Grille & Espacements

La mise en page incarne la valeur fondamentale de la marque : la structure. Base unit de 8px.

Grille 12 colonnes

Échelle d'espacement

Breakpoints

Composants UI

Composants rendus en temps réel avec la charte Cérat. Chaque élément est interactif.

<button class="btn btn--primary">Primaire</button>
<button class="btn btn--secondary">Secondaire</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--destructive">Destructif</button>

Principes UX & Interactions

Accessibilité, feedback, cohérence et approche mobile-first.

Micro-animations

États de l'interface

Wireframes de pages

Wireframes structurels montrant l'application de la grille et des composants Cérat.

Ton de voix & UX Writing

Direct, structurant, terrain, mobilisateur et humain - les 5 piliers de la voix Cérat.

Do / Don't linguistique

Les 4 règles du ton

Vocabulaire signature

Structure narrative signature

« Ce n'est pas [problème perçu]. C'est [vrai problème structurel]. »

Exemple : « Ce n'est pas un problème de ventes. C'est un problème de marge nette par projet non tracée. »

Emojis autorisés et leur fonction

Usage : 2 emojis maximum par post LinkedIn. Les icônes Lucide Icons sont préférées pour tous les autres supports.

Emojis à éviter

Personnalité de marque

Les 5 piliers qui définissent la voix et l'attitude de Cérat dans toutes les communications.

Authenticité & Structure

Directe, structurante, terrain, mobilisatrice et humaine.

Architecture du message

Parcours émotionnel, figure de style signature et structures narratives qui définissent le message Cérat.

Chaque message mobilise

Un parcours émotionnel en 5 temps : interpeller, confronter, révéler, mobiliser, ancrer.

Parcours émotionnel du lecteur

Figure de style signature

« Ce n'est pas X. C'est Y. »

Cette figure de style est l'ADN rhétorique de Cérat. Elle renverse la perception du lecteur en requalifiant le problème.

Règles linguistiques par canal

Chaque canal a son registre, son format et ses règles propres - tout en maintenant la cohérence Cérat.

Pronoms - Logique d'usage

Voix Emmanuelle vs voix Corporate

Vocabulaire de marque

Mots signatures, expressions propriétaires et lexique différenciateur - le vocabulaire Cérat est un outil stratégique.

On dit

Phrases signatures (à réutiliser)

Figure de style signature : « Ce n'est pas X. C'est Y. » - à utiliser dans au moins 1 contenu sur 2.

Lexique différenciateur complet

Mots et expressions interdits

Guide DO / DON'T

Les règles absolues de création de contenu chez Cérat - 15 bonnes pratiques et 15 interdits.

Les 15 DO

Les 15 DON'T

Templates de contenu

Modèles prêts à utiliser pour LinkedIn, blog, et formations - avec la structure narrative Cérat intégrée.

LinkedIn - Post Prise de conscience

LinkedIn - Post Résultat client

Blog - Structure article

Formation - Description

Gouvernance éditoriale

Processus de validation, fréquences de publication et règles de cohérence cross-canal.

Cohérence à chaque point de contact

Du LinkedIn au courriel, chaque communication porte la signature Cérat.

Checklist de publication

• Le contenu utilise-t-il le vocabulaire Cérat (pas de mots interdits) ?
• La structure narrative suit-elle le parcours émotionnel ?
• Y a-t-il un CTA spécifique et non générique ?
• Les visuels respectent-ils la charte photographique ?
• Le ton est-il cohérent avec la voix (Emmanuelle OU corporate, pas les deux) ?
• Les couleurs et polices sont-elles conformes à l'identité visuelle ?
• Le contenu contient-il au moins un exemple terrain ou un chiffre ?
• Les phrases font-elles maximum 20 mots ?
• Le contenu a-t-il été relu pour éliminer le jargon ?

Fréquences de publication recommandées

Cohérence cross-canal

Data Visualization

Palette dédiée aux graphiques et diagrammes, cohérente avec l'identité Cérat.

Palette graphiques

Exemple - Diagramme à barres

Exemple - Diagramme circulaire

Ressources & Checklist

Snippets copiables, variables CSS et checklist de conformité pour les développeurs.

Variables CSS (Design Tokens)

:root {
  --cerat-bleu:    #343F5F;
  --cerat-ocre:    #DCB363;
  --cerat-blanc:   #FFFFFF;
  --cerat-gris:    #2D2D2D;
  --cerat-perle:   #F2F2F2;
  --cerat-succes:  #5A7A64;
  --cerat-erreur:  #8B3A3A;
  --font-bold:     'CeratNovaBold', Arial, sans-serif;
  --font-regular:  'CeratNovaRegular', Arial, sans-serif;
  --radius:        4px;
  --transition:    250ms ease;
}

Checklist de conformité

• Utiliser uniquement les 3 couleurs primaires + fonctionnelles
• CeratNova chargé via @font-face avec font-display: swap
• Ratio de contraste WCAG AA minimum (4.5:1 pour texte)
• Touch targets de 44×44px minimum
• Focus visible sur tous les éléments interactifs
• Espacement basé sur la grille 8px (--space-1 à --space-10)
• Ton direct : phrases de max 20 mots, sujet-verbe-complément
• Pas de « optimiser », « innovant », « disruptif » dans le contenu
• Logo : zone de protection respectée, taille min 120px
• Transitions à 250ms ease pour les changements d'état

Fichiers assets