La tête
Illustre la maîtrise, les cycles et l’harmonie.
Massothérapie
Guide des normes graphiques
attitudemassotherapie.com
01
Le cœur de notre entreprise, nos valeurs et notre personnalité.
Offrir des services de massothérapie, une formation de pointe et des ateliers axés sur le bien-être et la créativité, pour toucher l’être dans sa globalité et enrichir l’expérience humaine avec bienveillance et excellence.
Devenir la référence incontournable en massothérapie, formation, et ateliers de bien-être dans la région de Québec, en étant reconnus pour la qualité exceptionnelle de nos services et notre accueil inspirant.
Nous cultivons un ton chaleureux, bienveillant, simple et inspirant, qui reflète notre engagement envers le bien-être, la créativité et l’excellence.
Chaleureux · Bienveillant · Simple · Inspirant
Nous valorisons l’écoute et la compréhension des besoins pour créer des interactions humaines et attentionnées.
Nous offrons des services et des formations basés sur un savoir-faire rigoureux et réfléchi.
Nous cultivons un accueil chaleureux et une approche axée sur le bien-être de chaque personne.
Nous transmettons des compétences solides grâce à une pratique ancrée et une formation soignée.
02
L’emblème que nous avons conçu s’inspire de la rose des vents et des points cardinaux, symbole d’orientation et de direction, ce qui reflète le parcours de l’entreprise au fil de ses 35 années d’existence. Ce visuel témoigne de l’évolution, de la présence affirmée dans notre milieu et de l’influence qui s’étend au-delà de sa communauté locale.
Inspiré des points cardinaux, il incarne à la fois l’orientation et les fondations solides sur lesquelles repose l’entreprise.
Chaque composante visuelle traduit des valeurs essentielles : le savoir-être, le savoir-faire et le savoir, des éléments clés du discours et de la démarche de l’entreprise.
L’ensemble a été conçu dans un esprit de fluidité, de simplicité et de modernité, en cohérence avec l’identité et la vision de l’organisation.
L’emblème se compose de cinq éléments porteurs de sens.
Version principale. Utilisé pour la plupart des supports, sauf en cas de limitation de taille ou d’espace.
Utilisations optimales : emballage, étiquette, réseaux sociaux.
Utilisé lorsque l’espace est limité. Interchangeable avec le logo vertical selon le contexte.
Utilisations optimales : sites web, signatures de courriel, en-têtes de papeterie.
Version simplifiée optimisée pour les petits visuels et usages plus ludiques.
Utilisations optimales : favicons, icônes d’app, vêtements, marchandises · en-tête et pied de page du site (format ≤ 96px).
Les variations de couleurs permettent au logo de fonctionner dans différents contextes.
Votre logo a besoin d’espace pour respirer afin de préserver son intégrité.
La zone de protection du logo est égale au double de la lettre « L » de « l’attitude » du logo. Aucun élément graphique ne doit empiéter sur cette zone, quel que soit le médium employé.
Il importe également que le format du médium soit plus grand que la zone de protection. Autrement dit, le haut, le bas et les côtés du logotype doivent être suffisamment éloignés des extrémités du médium.
Pour les meilleures pratiques, ne pas modifier ni déformer les logos de quelque manière que ce soit. Tout changement, grand ou petit, modifie l’impact et la cohérence de la marque.
Ne pas utiliser un logo de couleur sur un fond de couleur autre que celles associées à la marque ; privilégier la version noire ou renversée sur les photos et images. Le logo est figé dans sa construction, il ne peut pas être modifié.
Voici quelques erreurs courantes à éviter.
Le logo s'adapte selon la largeur du viewport pour préserver lisibilité et hiérarchie visuelle dans le header.
< 640 px
Logo alternatif dans le header (emblème circulaire compact, format ≤ 96 px).
640 px – 900 px
Logo horizontal pour optimiser l'espace de la barre supérieure.
≥ 900 px
Logo horizontal fixe en haut (header sticky).
03
La couleur est l'un des premiers points de contact d'une marque, et pour maintenir l'apparence et la convivialité, une palette de couleurs cohérente doit être utilisée.
Les couleurs principales doivent occuper environ 60 % de l'espace de conception.
Les couleurs secondaires viennent après les couleurs dominantes et doivent utiliser la moitié de l'espace de création (30 %).
La couleur d'accent devrait utiliser environ 10 % de l'espace de conception.
Le noir et le blanc sont des couleurs d'appui. Ils ne s'intègrent pas forcément dans le nuancier. On les utilise en complément. On utilise un blanc #FAFAFA dans les déclinaisons numériques.
SUITE
Les couleurs communiquent le message de l'identité graphique. Elles racontent une histoire et viennent chercher l'émotionnel de l'image de marque. Cet univers doit être unique et facilement reconnaissable. Les couleurs peuvent aider à la compréhension, à la bonne lecture et à la mémorisation d'une identité de marque.
Pour chacune des couleurs de la marque, il est possible d'utiliser les déclinaisons de teintes. Ceci permet de créer un effet de profondeur lors de l'élaboration des visuels et aussi à réaliser du ton sur ton.
Chaque couleur de la marque est disponible à 80 % / 60 % / 40 % / 20 % pour créer profondeur et effets ton sur ton.
04
La typographie domine notre perception du monde. Elle est omniprésente dans la lecture d’une marque, que cela soit dans son logo ou dans son identité visuelle (supports Web et impressions).
Les polices de caractères de la marque doivent être utilisées dans tous les documents imprimés et numériques pour que la marque reste cohérente sur toutes les plateformes.
Police officielle de la charte. Détails complets conservés pour activation lors d'un achat futur de licence.
Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Utiliser pour « L’Attitude »
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Utiliser pour « Massothérapie »
Cette police de caractères est utilisée dans le logo et en majuscule pour les titres. Le crénage doit être un mode optique en tout temps.
Alternative libre Google Fonts (OFL) utilisée actuellement à la place de Silka Mono — aucune licence requise.
Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Utiliser pour « L’Attitude »
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Utiliser pour « Massothérapie »
Cette police de caractères est utilisée dans le logo et en majuscule pour les titres. Le crénage doit être un mode optique en tout temps.
Thin
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Black
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
123456789
Cette police de caractères est utilisée en majuscule pour les sous-titres. On utilise la police de caractères avec ses graisses et italiques pour créer la hiérarchie dans les textes.
Utilisez la hiérarchie recommandée pour la cohérence et la lisibilité. Donnez au texte et aux éléments suffisamment d’espace pour une mise en page plus légère. La couleur peut être incorporée en fonction de la hiérarchie.
Utilisez le ratio d’or pour déterminer la taille de police la plus équilibrée tout en étant lisible. On multiplie ou divise la taille de police spécifique par 1,618 pour obtenir la taille correspondante du texte ou du titre. Par exemple, pour un titre de 14 pt, un corps de texte de 9 pt sera bien.
Pour le corps du texte, la taille en points/pt doit être de 8 à 11 pt dans les documents imprimés.
Un sur-titre ici
21 ptsLe titre ici
13 ptsOu un sous-titre là
8 ptsElluptin ctempos et officabo. Ut et ut et velicatent quibusa volentis et mos untis sum quibus exeritiis molores sincil in nusdae offic temoluptatem expliquiatur mil ipsaped ipicide imosandaes aut faccae inum ut pos autae voluptas estium doluptati ut qui cum lantem volore volorio qui cusam dendanda aut inctiatibusa diorecus ipsum, quodi reic te eatibus torerup tatiatis molorum re ditiis dellor apita corum re, sendipit voloresciur as pa nonsequunt fugitiis eveniaspe.
« une petite citation d’inspiration »
13 ptssurbrillance & accent
6 ptsnote de bas de page
Les ratios sont calculés selon la norme WCAG 2.1. Le niveau AA est le minimum légal recommandé pour tout site web.
05
.webp ou .jpg optimisésalt descriptif sur chaque imagefill: currentColor.webp ou .jpg optimisé — compresser avant déploiementalt descriptif sur tous les logos et imagesfont-display: swap pour éviter le blocage du rendutext-align: justify — risque de trous typographiques.png ou .jpg basse résolutiontransform: rotate, filter, ou opacity non autorisée sur le logoL’image est un excellent outil pour communiquer de manière unique avec votre public.
Il est possible d’utiliser des photos qui viennent directement des activités de l’entreprise tant que les personnes sur les photos ont donné leur consentement.
On évite les images et photos ayant trop d’éléments, de mauvaise qualité (toujours s’assurer d’avoir une résolution optimale), sombres ou mal éclairées, avec un traitement trop intense ou qui encouragent maladroitement des préjugés négatifs ou de fausses conceptions.
Évitez les textes sur les photos. Le texte va dans la description du visuel.
Les motifs et les textures peuvent être utilisés dans les documents imprimés et numériques pour donner plus de profondeur aux communications visuelles. Ils ajoutent à l’expérience de votre public et renforcent votre identité.
Il est possible d’utiliser tous les élements dans toutes les variations de couleurs de l’identité visuelle.
Les icônes peuvent être utilisées à grande ou à petite échelle dans les documents imprimés et numériques. Le style d’icône doit être conservé pour que la marque reste cohérente.
Il est possible d’utiliser tous les élements dans toutes les variations de couleurs de l’identité visuelle.
06
12 colonnes · gouttière 24px · container max 1200px. Les mises en page soins / école / ateliers utilisent toutes le même référentiel.
1 colonne · margin 1.5rem
2 colonnes · margin 2rem
12 colonnes · margin auto
Basée sur une unité de 8 px, chaque palier double ou suit la progression naturelle. La cohérence d’espacement donne l’impression d’aération et de luxe discrète au site.
--space-10.25rem · 4px--space-20.5rem · 8px--space-30.75rem · 12px--space-41rem · 16px--space-51.5rem · 24px--space-62rem · 32px--space-73rem · 48px--space-84rem · 64px--space-96rem · 96px--space-108rem · 128pxPatterns présents sur toutes les pages publiques. Le header est sticky desktop ; le footer riche porte le NAP (lu depuis le singleton EmDash nap) et alimente le maillage interne SEO.
Sticky · fond --blanc · ombre --shadow-sm au scroll
Logo à gauche · 4 menus au centre (À propos · Formations · Services · Réserver)
CTA « Réserver » en bouton primaire à droite
Hauteur ~ 72 px · padding vertical --s-4
Logo · hamburger · CTA « Réserver » réduit
Drawer plein écran · focus trap · escape ferme
Liens en pile · sous-menus en accordéon
Overlay rgba(40,40,40,.5) derrière
Fond --roche-volcanique · texte --blanc
3-4 colonnes : Marque (NAP + sociaux), Liens, Pratique
Bas de page : © · mentions légales · politique de confidentialité · plan du site
NAP injecté depuis le singleton EmDash nap