← Retour au site

l’attitude

Massothérapie

Guide des normes graphiques

attitudemassotherapie.com

01

L’ADN de marque

Le cœur de notre entreprise, nos valeurs et notre personnalité.

Notre mission

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.

La vision

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.

Le ton

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

Nos valeurs

Respect & Empathie

Nous valorisons l’écoute et la compréhension des besoins pour créer des interactions humaines et attentionnées.

Excellence & Maîtrise

Nous offrons des services et des formations basés sur un savoir-faire rigoureux et réfléchi.

Bienveillance & Générosité

Nous cultivons un accueil chaleureux et une approche axée sur le bien-être de chaque personne.

Savoir-faire & Expertise

Nous transmettons des compétences solides grâce à une pratique ancrée et une formation soignée.

Divisions

Services massothérapie Formation massothérapie

03

Les couleurs

couleurs

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.

Heure du Thé
HEX #6B774F
RGB 107 / 119 / 79
CMYK 58 / 38 / 76 / 10
PANTONE 5763 C / PANTONE 371 U
Vie de Toscane
HEX #AD5120
RGB 173 / 81 / 32
CMYK 24 / 77 / 100 / 14
PANTONE 1605 C / PANTONE 2021 U
Bois Flotté
HEX #B48954
RGB 180 / 137 / 84
CMYK 28 / 44 / 76 / 6
PANTONE 2317 C / PANTONE 4026 U
Fleur de Bleuet
HEX #9AC1E5
RGB 154 / 193 / 229
CMYK 37 / 14 / 1 / 0
PANTONE 283 C / PANTONE 544 U
Crème
HEX #E8E4E2
RGB 232 / 228 / 226
CMYK 8 / 7 / 8 / 0
PANTONE 9285 C / PANTONE 9043 U
Roche Volcanique
HEX #282828
RGB 40 / 40 / 40
CMYK 71 / 65 / 64 / 68
PANTONE Black C / PANTONE Neutral Black U

couleurs

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.

Déclinaisons interactives

Chaque couleur de la marque est disponible à 80 % / 60 % / 40 % / 20 % pour créer profondeur et effets ton sur ton.

#6B774F
Heure du Thé
100%
80%
60%
40%
20%
#B48954
Bois Flotté
100%
80%
60%
40%
20%
#AD5120
Vie de Toscane
100%
80%
60%
40%
20%
#E8E4E2
Crème
100%
80%
60%
40%
20%
#282828
Roche Volcanique
100%
80%
60%
40%
20%
#9AC1E5
Fleur de Bleuet
100%
80%
60%
40%
20%

04

La typographie

typographie

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.

🔒 Payante · non utilisée

Silka Mono

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.

✓ Active · gratuite

DM Mono

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.

Roboto

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.

hiérarchie

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.

13 pts

Un sur-titre ici

21 pts

Le titre ici

13 pts

Ou un sous-titre là

8 pts

Elluptin 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.

17 pts

« une petite citation d’inspiration »

13 pts

surbrillance & accent

6 pts

note de bas de page

accessibilité — wcag 2.1

Les ratios sont calculés selon la norme WCAG 2.1. Le niveau AA est le minimum légal recommandé pour tout site web.

Aa Bb Cc
Roche Volcanique sur Blanc
14.13:1 AAA
Aa Bb Cc
Roche Volcanique sur Crème
11.67:1 AAA
Aa Bb Cc
Roche Volcanique sur Bleuet
7.82:1 AAA
Aa Bb Cc
Blanc sur Roche Volcanique
14.13:1 AAA
Aa Bb Cc
Blanc sur Vie de Toscane
5.06:1 AA
Aa Bb Cc
Blanc sur Heure du Thé
4.6:1 AA
Aa Bb Cc
Vie de Toscane sur Blanc
5.06:1 AA
Aa Bb Cc
Heure du Thé sur Blanc
4.6:1 AA
Aa Bb Cc
Bois Flotté sur Roche
4.67:1 AA
Aa Bb Cc
Blanc sur Bois Flotté
3.03:1 AA large
Aa Bb Cc
Heure du Thé sur Crème
3.8:1 AA large
Aa Bb Cc
Vie de Toscane sur Crème
4.18:1 AA large
Aa Bb Cc
Bois Flotté sur Crème
2.5:1 FAIL
Aa Bb Cc
Bleuet sur Blanc
1.81:1 FAIL
Aa Bb Cc
Bleuet sur Crème
1.49:1 FAIL

05

Les éléments graphiques

Directives photographies

✓ À utiliser

  • · Photos issues des activités (avec consentement)
  • · Nature, corps, textures organiques, lumière douce
  • · Images évocatrices cohérentes avec la marque
  • · Formats .webp ou .jpg optimisés
  • · Attribut alt descriptif sur chaque image

✕ À éviter

  • · Trop d’éléments dans le cadre
  • · Photos sombres, mal éclairées, filtrées intensément
  • · Texte superposé directement sur les photos
  • · Contenu véhiculant des préjugés négatifs

Bonnes pratiques web

photographies

L’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.

Palmier vert · feuilles luxuriantes Palmier doré · ombre chaude Pieds nus · noir et blanc Dos · texture peau Plante verte · feuilles

motifs et textures

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.

Motif géométrique outline · cime/tête/marée Texture terracotta · vie-de-toscane Motif géométrique inversé · ciel Texture eau · reflets bleus Texture fougère · ombre verte Texture ombre brune · graminées

icônes

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.

Icône cime · Heure du Thé Icône cime · Vie de Toscane Icône cime · Bois Flotté Icône tête · Bois Flotté Icône tête · Heure du Thé Icône tête · Vie de Toscane Icône marée · Vie de Toscane Icône marée · Bois Flotté Icône marée · Heure du Thé

06

Système & Layout

12 colonnes · gouttière 24px · container max 1200px. Les mises en page soins / école / ateliers utilisent toutes le même référentiel.

Points de rupture

Mobile

< 640px

1 colonne · margin 1.5rem

  • Navigation hamburger
  • Sections en pleine largeur

Tablette

640px – 900px

2 colonnes · margin 2rem

  • Navigation condensée
  • Grilles en 2 colonnes

Desktop

≥ 900px

12 colonnes · margin auto

  • Navigation complète visible
  • Grilles 3 et 4 colonnes

Layouts typiques — site vitrine

Échelle d’espacement

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 · 128px

Header & Footer canoniques

Patterns 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.

Header desktop

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

Header mobile (< 900 px)

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

Footer

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