Charte graphique · proposition

Blanc clinique, orange en surface, encre pleine.

Système de base pour massage-acupuncture.com. Chaque section sera construite contre cette charte, et non importée depuis son gabarit d’origine.

Sport & récupération Dos Articulaire Nice & Monaco
01 · Couleurs

Une base blanche, deux accents qui ne portent jamais de texte

Les valeurs d’orange et de bleu viennent de ton site actuel. Elles sont trop claires pour porter du texte : c’est une contrainte, pas un défaut, et elle donne au système sa cohérence.

Blanc

#ffffff

Fond de page. Le « très blanc » clinique.

Encre

#14201e

Tout le texte, titres comme corps.

16,5:1 · texte

Bleu brume

#f4f9fa

Lavis d’ambiance. C’est lui qui fait « médical ».

Surface

Orange brume

#fdf3f0

Pastilles, teintes de carte, respiration chaude.

Surface

Orange

#f29c8d

Filets, puces, soulignements, petits signes.

2,12:1 · surface

Bleu

#8fc5ce

Second signe, à doser très peu.

1,90:1 · surface

Bleu profond

#2b6b77

Si un jour il faut un lien coloré ou un second bouton.

6,05:1 · texte

Nuage

#f7f9fa

Délimiter une zone sans tracer de bordure.

Surface

Pourquoi l’orange ne peut pas être un bouton

Il faut 4,5:1 de contraste pour du texte courant. Ton orange actuel donne 1,80:1 sur blanc, celui de Digigrowth 2,32:1, le bleu 3,32:1. Un bouton orange à texte blanc serait sous le seuil de moitié.

La sortie est simple et c’est aussi le geste Digigrowth que tu aimes : les boutons sont en encre noire, l’orange habille les surfaces autour. Tu gardes la couleur, tu gardes la lisibilité.

Massage du dos, 75 minutes

Encre pleine sur blanc, pastille orange en surface.

Récupération

✓ 16,5:1 · lisible partout, y compris en plein soleil sur un téléphone

Massage du dos, 75 minutes

Le même texte en orange, et un bouton orange.

Réserver

✗ 1,80:1 et 2,12:1 · à proscrire, dans les deux cas

02 · Typographie

Trois pistes, à trancher à l’œil

Même contenu dans les trois, pour que tu compares la voix et non le texte. Deux remarques avant : la police de Healen (Helvetica Now Display) est commerciale, il faudrait l’acheter, et hors licence elle retombe sur Arial sous Windows. Celle de Serenique (Instrument Serif) est libre, mais c’est une voix de spa.

A Inter Tight + Inter libre · autohébergeable · pensée pour l’écran Ma recommandation

Massage sportif et massage du dos, à Nice.

Spécialiste sport, dos et articulaire

Un accompagnement sur-mesure validé par les athlètes olympiques pour optimiser vos performances et accélérer la récupération. 1 Bd Franck Pilatte, 06300 Nice. 06 82 42 58 05.

15 ansd’expertise
5,0note Google
224avis clients
170 €90 minutes
B Plus Jakarta Sans libre · la sans de Serenique et de Medefy · plus ronde

Massage sportif et massage du dos, à Nice.

Spécialiste sport, dos et articulaire

Un accompagnement sur-mesure validé par les athlètes olympiques pour optimiser vos performances et accélérer la récupération. 1 Bd Franck Pilatte, 06300 Nice. 06 82 42 58 05.

15 ansd’expertise
5,0note Google
224avis clients
170 €90 minutes
C Instrument Serif en titre + Inter en corps libre · la voix de Serenique, gardée pour les grands titres seulement

Massage sportif et massage du dos, à Nice.

Spécialiste sport, dos et articulaire

Un accompagnement sur-mesure validé par les athlètes olympiques pour optimiser vos performances et accélérer la récupération. 1 Bd Franck Pilatte, 06300 Nice. 06 82 42 58 05.

15 ansd’expertise
5,0note Google
224avis clients
170 €90 minutes

Pourquoi je penche pour A

Ton positionnement a changé depuis les premiers essais : sport, dos, articulaire. Le serif de Serenique parle spa et palace, il tirerait la page vers le bien-être que tu viens justement d’écarter.

Inter a été dessinée pour la lecture à l’écran : grande hauteur d’x, et surtout des caractères désambiguïsés. Sur une page pleine de 06 82 42 58 05, 1 Bd Franck Pilatte et 170 €, le 1 ne se confond pas avec le l, ni le 0 avec le O. C’est exactement ton obsession, appliquée à la typographie.

Si la chaleur du serif te manque, l’option C la garde pour les grands titres uniquement, sans contaminer le reste. C’est le compromis honnête.

03 · Échelle typographique

Des paliers francs, jamais deux tailles voisines

Deux tailles qui se ressemblent créent de la confusion, pas de la hiérarchie. Chaque palier saute nettement.

H1 · 44 → 68Massage sportif à Nice
H2 · 34 → 44Trois univers de soins
H3 · 21 → 24Massage du dos
Corps · 17Une combinaison de techniques unique pour une détente profonde et ciblée.
Petit · 15Séance d’acupression seule : environ 45 min.
Étiquette · 12Informations pratiques

La règle qui remplace le gris

Une métadonnée se distingue parce qu’elle est plus petite, plus grasse et en capitales espacées. Jamais parce qu’elle est plus pâle. Aucun texte de ce site ne descend sous l’encre pleine, et aucun élément contenant du texte ne porte d’opacity inférieure à 1.

04 · Rythme et espacements

C’est le vide qui sépare, pas les traits

Pas de filet horizontal entre les sections. On les sépare par du blanc, franchement.

Entre deux sections72 → 128 px
Titre → contenu34 px
Entre deux cartes14 px
Intérieur de carte24 → 34 px
Gouttière de page20 → 56 px

Longueur de ligne

Corps de texte plafonné à 64ch, chapeaux d’introduction à 52ch. Au-delà, l’œil perd la ligne au retour chariot. Alignement à gauche systématique, jamais de justification. Le centrage est réservé aux en-têtes de section de deux lignes maximum.

05 · Cartes

Deux régimes, jamais l’entre-deux

Soit la carte se détache franchement, soit elle se fond avec une simple découpe. Le voile intermédiaire, qu’on devine sans le voir, est le seul cas à proscrire.

Régime 1 · contraste franc

Massage sportif

Surface pleine, nettement différente du fond. Pour les cartes qui portent l’information principale et doivent arrêter le regard.

Régime 2 · fondu + découpe

Massage du dos

Aucun remplissage, un simple filet net. Pour délimiter des unités de sens quand le fond doit rester maître.

Rayons et ombres

Rayon 16px sur les cartes, 28px sur les grands panneaux, pilule complète sur les boutons. Ombre quasi nulle : 0 1px 2px rgba(20,32,30,.06). Elle décolle légèrement, elle ne décore pas.

06 · Boutons et liens

Un seul bouton d’action, en encre

L’action principale est toujours noire. Le reste est en second plan, sans jamais rivaliser.

Hiérarchie

Encre pleine pour l’action que tu veux vraiment : la prise de rendez-vous. Contour pour l’action secondaire. Orange brume pour un lien de parcours, sans poids d’action. Un seul bouton en encre par écran visible.

07 · Les lois de la page

Ce qu’on vérifie avant de livrer une section

1

Aucun texte atténué

Ni gris, ni taupe, ni opacity sous 1. La hiérarchie passe par la taille et la graisse.

2

Un seul accent

L’orange est la couleur de marque. Le bleu n’est qu’un lavis d’ambiance, jamais sur le même élément.

3

Une idée par bloc

Un titre, une phrase, une liste. Rien n’est empilé. L’œil sait où commence et où finit une unité.

4

Du vide qui sépare

Pas de filet horizontal entre les sections. Le blanc fait le travail.

5

Régime de carte net

Contraste franc, ou filet seul. Jamais un voile qu’on devine.

6

Ligne courte

64 caractères au maximum. Aligné à gauche. Jamais justifié.

Base de sections