Charte graphique, version 1, 21/09/2026

La santé de l'équipement, prouvée machine par machine.

Le système visuel de l'application de terrain de Pilates Reformer Care et Fitness Equipment Care. Un technicien ganté devant un reformer, un administrateur qui prépare la journée, un responsable de studio qui scanne un QR : trois écrans, une seule identité.

Reformer · Studio Alma

RF-2419-0087

Studio Lumen, Paris 11 (données fictives)

La plaque, élément signature. Sa règle d'usage

Passe 1

Le plan, avant la première ligne de code

Le monde du client en cinq mots

Ressort, rail, sangle, plaque gravée, lumière crème. Un reformer, c'est un chariot qui glisse sur deux rails, des ressorts calibrés, des sangles de cuir, une plaque de numéro de série rivetée sous le cadre, dans une salle éclairée doux. Tout ce qui suit vient de là.

Palette

Dominante possédée : le vert de Fitness Equipment Care, la seule couleur que le client a nommée (Pouya, RDV2 : « J'aime beaucoup le color scheme de celui-là »). Vert-atelier #051A14 en fond de marque, lime-ressort #C5EB96 en accent unique, crème-studio #F6F4F0 pour la douceur du monde Pilates. Le bordeaux de pilatesreformercare.com ne sert pas : l'outil porte une seule identité, pas celle d'une des deux marques. L'accent porte un sens et un seul : la preuve faite (étape terminée, point de contrôle OK, ticket résolu, action principale). Rationné : deux ou trois occurrences par écran, jamais décoratif.

Typographie

Fraunces en display, graisse 300 sur les titres d'écran et 700 sur les titres de section. C'est le risque assumé de cette charte : une serif optique et douce dans un outil de terrain, là où les concurrents (« style dinosaures », Kevin, RDV3) empilent de la grotesque grise. Elle porte le premium et la douceur crème que Gilles a posés en RDV2, sans jamais descendre dans l'interface : les libellés, les boutons, les données restent en Manrope, déjà en place chez pilatesreformercare.com, très lisible à 390 px et pourvue de chiffres tabulaires. Saut de 1 rem à 3 rem entre le corps et le titre d'écran, graisse 300 contre 800. Échelle fermée à six tailles, on n'en sort pas.

Macrostructure

Une colonne de travail étroite calée à gauche (34 rem au plus, la largeur d'un pouce qui coche) et une gouttière d'état plus fine à droite qui porte l'avancement, le statut et la preuve ; rien n'est centré, la rupture est volontaire et se retrouve sur les trois espaces. Sur mobile, la gouttière descend et devient la barre basse fixe.

Élément signature

La plaque. Le bandeau vert-atelier à coin inférieur droit chanfreiné qui porte le numéro de série en lime tabular-nums, copie directe de la plaque rivetée sous le cadre d'un reformer. Elle est identique partout : fiche machine, intervention, ticket, rapport PDF, page QR imprimable.

Tokens

Palette

Six couleurs de marque. Aucune couleur hors token dans le markup.

vert-atelier

#051A14

Fond de marque, plaque, barre latérale, texte principal sur clair.

vert-chariot

#0E3B2C

Surface sombre secondaire, filets sur fond sombre, survol de menu.

lime-ressort

#C5EB96

Accent unique : action principale et preuve faite. Rationné.

crème-studio

#F6F4F0

Fond d'application sur les trois espaces.

craie

#FFFFFF

Surfaces posées : cartes, lignes de tableau, champs.

gris-rail

#5E6F66

Texte secondaire sur fond clair uniquement.

Signaux d'atelier

Ce ne sont pas des couleurs de marque : elles ne servent qu'à dire l'état d'une machine ou d'une étape, jamais à décorer.

oxyde-panne

#8F2A1E

ambre-en-cours

#7A5308

brume

#A8BDB2

Texte secondaire sur fond sombre.

trait

#C9C3B8

Filets. Bordure de champ : #7E8A82.

Échelle fermée, six tailles

Typographie

ecran · 3rem (mobile 1.875) · Fraunces 300

Intervention du 14 octobre

section · 1.5rem (mobile 1.25) · Fraunces 700

Machines à contrôler

pivot · 1.25rem · Manrope 700

Tendre les ressorts, 4 positions

corps · 1rem · Manrope 400 et 500

Vérifier que le chariot revient en butée sans point dur, sur toute la longueur du rail. Photographier la sangle gauche si elle marque.

annexe · 0.875rem · Manrope 500

Dernière maintenance le 08/04/2026 par Jonas Meier (technicien fictif).

plaque · 0.75rem · Manrope 800 · capitales, interlettrage +0.08em

Numéro de série / Serial number

Seul niveau où l'interlettrage est modifié, et pour une raison : ce sont des micro-capitales gravées, illisibles serrées.

Deux variantes, pas trois

Boutons

Hauteur minimale 44 px partout, y compris sur desktop : le technicien est ganté et la lumière change.

Principal

Lime-ressort sur vert-atelier. Une seule occurrence par écran.

Bloqué, le bouton reste à sa place et garde sa taille : la raison s'écrit dessous. Un bouton qui disparaît fait croire à une panne, et le technicien rappelle le bureau.

Secondaire

Contour vert-atelier, fond transparent. Tout le reste.

Une action destructrice n'a pas de bouton : on archive ou on annule, jamais on supprime. Le libellé porte le verbe du métier (« Clôturer l'intervention », pas « Valider »).

Aucun widget natif brut

Contrôles de formulaire

Tel que gravé sous le cadre. Il devient le lien du QR code.

Ce numéro existe déjà sur une machine du site Studio Lumen.

Point de contrôle / Checkpoint

Le chariot revient en butée sans point dur.

Trois segments de 48 px de haut, jamais un radio natif : c'est le geste le plus répété de l'application, sur un téléphone, avec des gants.

Photo obligatoire / Required photo

Plaque de série lisible, avant démontage. 2 sur 3

Vignettes 96 px, croix de retrait de 28 px au coin. L'étape ne se termine pas tant que le compte n'y est pas.

Surfaces

Cartes et fiches

Fond craie sur fond crème, un filet bas et une ombre portée très basse : la carte est posée, pas encadrée. Dans une rangée, les bas de cartes s'alignent.

Installation · 14/10/2026

Studio Lumen, Paris 11

En cours

3 machines, technicien Jonas Meier (fictif). 12 rue de la Folie Méricourt.

6/11

Maintenance · 17/10/2026

Hôtel Verrière, Genève

Planifiée

7 machines, technicien non affecté. Accès par le sous-sol, badge à l'accueil.

0/24

Noms de sites, techniciens et dates fictifs.

Densité admin, desktop

Tableau

Pas de bordures verticales, un filet horizontal, une rupture de poids toutes les quatre lignes sur les listes longues. Le tableau défile dans son conteneur plutôt que de déborder.

Machine Modèle Site Dernière visite État
RF-2419-0087ReformerStudio Lumen08/04/2026En service
RF-2419-0104ReformerStudio Lumen08/04/2026En service
CH-0088-0012MegaformerHôtel Verrière22/01/2026Hors service
CD-0310-0003Elina CadillacSpa Calanque03/09/2026En service
RF-2419-0211ReformerSpa Calanque03/09/2026À contrôler

Parc fictif, aucune donnée réelle.

Trois familles, jamais mélangées

Badges de statut

Intervention

Planifiée · En cours · Clôturée · Annulée

Planifiée / Planned En cours / In progress Clôturée / Closed Annulée / Cancelled

Planifiée tant que le technicien n'a pas démarré, en cours dès la première étape, clôturée quand le rapport part. Annulée reste visible dans l'historique du site, elle ne s'efface pas.

Ticket client

Cinq états, dans l'ordre, jamais en arrière.

Reçu / Received Accepté / Accepted Planifié / Scheduled En cours / In progress Résolu / Resolved

Suivi côté client

Étape 3 sur 5, planifié le 17/10/2026.

Point de contrôle

Le seul endroit où le lime dit « vérifié ».

OK Pas OK / Not OK N.A. À faire / To do

Un badge ne porte jamais la couleur seule : le mot est toujours écrit. Lumière de cave, écran sale, daltonisme, la lecture tient quand même.

Une phrase humaine, une action

États vides

Rien de prévu aujourd'hui

Votre prochaine intervention est le 17 octobre à Genève.

Ce site n'a pas encore de machine

Ajoutez le modèle et le numéro de série, le QR code se génère tout de suite.

Aucune panne signalée

Vos cinq machines tournent. Si l'une coince, scannez son QR code et décrivez le problème.

Flash et alertes

Messages système

Intervention clôturée

Le rapport PDF est parti aux deux contacts de Studio Lumen.

Clôture impossible

Il manque la photo de la plaque de série sur la machine RF-2419-0104, étape 3.

QR code non associé

Cette machine attend son autocollant. Scannez-le avant de commencer l'installation.

Connexion perdue

La brique 1 a besoin du réseau. Rapprochez-vous de la borne, votre saisie en cours est conservée à l'écran.

Le composant le plus utilisé de l'application

L'étape d'intervention

Un écran, une étape. Consigne, points de contrôle, photos, puis un seul bouton. Le technicien ne choisit rien, il avance (Kevin, RDV2 : « il n'y a aucune interprétation, aucune sélection »).

Maintenance · Studio Lumen

Reformer · Studio Alma

RF-2419-0087

6/11

Étape 6 / Step 6

Contrôler la tension des quatre ressorts

Chariot en butée, sangles décrochées. Chaque ressort doit revenir sans bruit sec et sans jeu au crochet.

Ressort rouge, crochet intact

Ressort bleu, retour sans point dur

Photos obligatoires 1 sur 2

Il manque une photo et un point de contrôle.

Règles du composant

  • La plaque en tête, toujours : le technicien voit sur quelle machine il travaille avant de lire la consigne.
  • La barre d'avancement reste dans l'en-tête sombre, jamais dans le corps : c'est de l'état, pas du travail.
  • Un seul bouton principal par étape, en pleine largeur et en bas, atteignable au pouce.
  • Le bouton reste visible même bloqué, avec la raison écrite dessous : un bouton caché fait croire à une panne.
  • Pas OK impose un commentaire ; le rapport PDF porte la même mention.
  • Étape faite enchaîne sur l'étape suivante sans écran intermédiaire.

Consignes, ressorts et numéros de cet exemple : fictifs.

Élément signature

La plaque

Reformer · Studio Alma

RF-2419-0087

Studio Lumen, Paris 11

Megaformer · Horizon Asnières

CH-0088-0012

Grand format (fiche machine, en-tête d'étape) et format réduit (liste, ticket, ligne de rapport). Données fictives.

Machine sans QR posé : pas de plaque vide

Elina Pilates · Cadillac

Série à saisir

Sur la page QR imprimable

Reformer · n°3

RF-2419-0087

Un souci sur cette machine ? Scannez, décrivez, nous ouvrons le ticket.

La même plaque se retrouve en tête du rapport PDF envoyé au client.

Sous le cadre d'un reformer est rivetée une petite plaque métal, coin coupé, où le numéro de série est gravé. C'est la seule chose qui identifie la machine sans ambiguïté, et c'est ce que le QR code remplace à l'écran. On la reproduit telle quelle.

Sa construction

  • Fond vert-atelier (grand format) ou vert-chariot (format réduit).
  • Coin inférieur droit chanfreiné à 14 px (9 px en format réduit), les trois autres coins carrés à 2 px.
  • Marque et modèle en micro-capitales brume, au-dessus.
  • Numéro de série en Fraunces 300, lime-ressort, tabular-nums.
  • Site en annexe brume, au-dessous, en grand format seulement.

Sa règle d'usage

  • Une seule plaque par écran, en tête du contenu, avant tout titre de travail.
  • Jamais sans numéro de série : une machine qui n'a pas encore reçu son QR affiche « Série à saisir » à la place, pas une plaque vide.
  • Jamais décorative : pas de plaque sur un tableau de bord, une liste de clients, un écran de connexion.
  • Elle se retrouve à l'identique sur le PDF de rapport et sur la page QR imprimable : c'est ce qui fait reconnaître le document comme venant de l'application.
  • Le chanfrein ne s'applique à rien d'autre qu'aux surfaces de cette famille (plaques, cartes, boutons, vignettes). Jamais deux rayons différents dans un même bloc.

WCAG 2.1, calcul de luminance relative

Contrastes vérifiés

Seuil retenu : 4.5:1 pour tout texte, y compris les grands titres. Aucun couple de la charte ne descend sous ce seuil. Les couples exclus sont listés à la fin.

TexteFond RatioUsage
lime-ressort #C5EB96vert-atelier #051A1413.48Numéro de série sur la plaque, onglet actif
craie #FFFFFFvert-atelier #051A1418.04Texte principal sur fond sombre
brume #A8BDB2vert-atelier #051A149.09Texte secondaire sur fond sombre
lime-ressort #C5EB96vert-chariot #0E3B2C9.34Plaque réduite, barre basse active
brume #A8BDB2vert-chariot #0E3B2C6.30Marque et modèle sur plaque réduite
vert-atelier #051A14lime-ressort #C5EB9613.48Bouton principal, segment OK
vert-atelier #051A14crème-studio #F6F4F016.42Texte principal sur fond d'application
vert-atelier #051A14craie #FFFFFF18.04Texte principal sur carte
gris-rail #5E6F66crème-studio #F6F4F04.85Texte secondaire, limite basse assumée
gris-rail #5E6F66craie #FFFFFF5.33Texte secondaire sur carte
oxyde-panne #8F2A1Ecraie #FFFFFF8.34Message d'erreur
oxyde-panne #8F2A1Efond-panne #F6E2DE6.69Badge Pas OK, Hors service, Reçu
texte-ok #2C4A16fond-ok #E3F2CE8.51Badge OK, Clôturée, Résolu
ambre-en-cours #7A5308fond-en-cours #F5E9CE5.68Badge En cours, À contrôler
texte-na #4A5450fond-na #E8E6E06.29Badge N.A., Planifiée, bouton désactivé
ambre-en-cours #7A5308craie #FFFFFF6.84Avertissement QR non associé
craie #FFFFFFoxyde-panne #8F2A1E8.34Segment Pas OK sélectionné

Couples interdits, calculés et écartés

  • gris-rail #5E6F66 sur vert-atelier #051A14 : 3.39. Sur fond sombre, le texte secondaire est en brume, jamais en gris-rail.
  • lime-ressort #C5EB96 sur crème-studio #F6F4F0 : 1.22. Le lime ne porte jamais de texte sur fond clair ; il n'y sert que de remplissage derrière du vert-atelier.
  • trait #C9C3B8 sur crème-studio : 1.27. C'est un filet, pas un texte, et jamais la seule frontière d'un champ (bordure de champ : #7E8A82, 3.5).

Trois propositions

Nom de l'application

Contraintes reprises des échanges : un nom à part, pas celui de la société (Pouya, RDV2), qui parle de santé de l'équipement de fitness plutôt que de Pilates (Kevin, RDV2), court, prononçable en anglais, en français et en allemand, déployable un jour chez un autre opérateur. Les trois noms ont été cherchés côté éditeurs de maintenance et de field service : aucun n'y est porté (UpKeep, Fiix, Limble, MaintainX, ServiceTitan et Tendo sont pris, ce dernier écarté pour cette raison). La disponibilité des noms de domaine et des marques n'est pas vérifiée ici, c'est un point à traiter avant la mise en ligne.

Notre recommandation

kura

Wordmark : Fraunces 300 bas de casse, précédé de la plaque lime chanfreinée.

Du latin cura, le soin que l'on prend d'une chose. Le mot existe déjà dans les trois langues du produit : care en anglais, cure en français, Kur en allemand, et il se prononce pareil partout. Deux syllabes, aucun lien avec le Pilates, aucun lien avec ANEHO : il tient aussi bien sur un parc de reformers que sur un parc de tapis de course.

En usage

« Rapport Kura du 14/10/2026 », « Scannez pour ouvrir Kura ».

Proposition 2

ATESTA

Wordmark : Manrope 800 capitales espacées, le E posé sur une plaque vert-atelier.

De attester : to attest, attester, attestieren. Le mot dit exactement ce que l'application produit, une preuve datée et photographiée que la machine a été contrôlée, que le client reçoit en PDF. Trois syllabes, sans équivalent chez les éditeurs de maintenance, et très aligné sur le positionnement premium que Kevin demande.

En usage

« Attestation Atesta », « 57 points attestés ».

Proposition 3

Sanvia

Wordmark : Fraunces, 700 sur la première syllabe et 300 sur la seconde, barre lime en fin de mot.

Sanus et via : la route de santé d'une machine, son historique d'installation, de maintenances et de pannes, site après site. C'est ce que le QR code ouvre. Trois syllabes, sonorité douce qui va avec l'univers crème du Pilates, et un mot assez neutre pour un déploiement chez un autre opérateur.

En usage

« L'historique Sanvia de la machine », « Sanvia by Fitness Equipment Care ».

Pourquoi Kura en premier

C'est le seul des trois qui s'écrit et se prononce à l'identique pour un technicien néerlandais, un studio parisien et un hôtel suisse allemand, et le seul assez court pour tenir dans une barre latérale de 208 px et sur un autocollant de QR code. Atesta est plus explicite sur la preuve mais plus administratif ; Sanvia est le plus doux mais aussi le plus proche du vocabulaire médical.

À copier tel quel

tailwind.config.js

Aucune couleur, aucune taille de police hors de ces tokens dans le markup de l'application.

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      colors: {
        atelier:        '#051A14', // vert-atelier
        chariot:        '#0E3B2C', // vert-chariot
        ressort:        '#C5EB96', // lime-ressort, accent unique
        studio:         '#F6F4F0', // creme-studio, fond d'application
        craie:          '#FFFFFF', // surfaces posees : cartes, lignes, champs
        rail:           '#5E6F66', // texte secondaire sur clair UNIQUEMENT
        brume:          '#A8BDB2', // texte secondaire sur sombre
        trait:          '#C9C3B8',
        'trait-fort':   '#7E8A82', // bordure de champ
        panne:          '#8F2A1E',
        encours:        '#7A5308',
        'fond-ok':      '#E3F2CE',
        'texte-ok':     '#2C4A16',
        'fond-panne':   '#F6E2DE',
        'fond-encours': '#F5E9CE',
        'fond-na':      '#E8E6E0',
        'texte-na':     '#4A5450'
      },
      fontFamily: {
        display: ['Fraunces', 'Georgia', 'serif'],
        sans:    ['Manrope', 'system-ui', 'sans-serif']
      },
      fontSize: { // echelle fermee, six tailles
        plaque:  ['0.75rem',  { lineHeight: '1rem',    letterSpacing: '0.08em', fontWeight: '800' }],
        annexe:  ['0.875rem', { lineHeight: '1.35rem' }],
        corps:   ['1rem',     { lineHeight: '1.6rem' }],
        pivot:   ['1.25rem',  { lineHeight: '1.75rem' }],
        section: ['1.5rem',   { lineHeight: '1.85rem' }],
        ecran:   ['3rem',     { lineHeight: '3.1rem' }],
        // numero de serie grave sur la plaque, hors echelle de texte
        'plaque-qr':    ['1.2rem',  { lineHeight: '1.5rem' }],
        'plaque-etape': ['1.35rem', { lineHeight: '1.5rem' }],
        'plaque-ligne': ['1.35rem', { lineHeight: '1.6rem' }],
        'plaque-fiche': ['2rem',    { lineHeight: '2.1rem' }],
        // wordmarks, reserves a la section Nom de l'application et au bloc de marque
        'wordmark-sm':   ['1.35rem', { lineHeight: '1.5rem' }],
        'wordmark-caps': ['2rem',    { lineHeight: '1' }],
        'wordmark-md':   ['2.25rem', { lineHeight: '1' }],
        'wordmark-lg':   ['2.75rem', { lineHeight: '1' }]
      },
      letterSpacing: { wordmark: '0.14em' },
      borderRadius: { plaque: '2px', bloc: '10px', pilule: '999px' },
      boxShadow:    { pose: '0 1px 0 0 #C9C3B8, 0 8px 24px -18px rgba(5,26,20,.55)' },
      gridTemplateColumns: {
        travail:   'minmax(0,2fr) minmax(0,1fr)',
        panneau:   'minmax(0,1.4fr) minmax(0,1fr)',
        etape:     'minmax(0,420px) minmax(0,1fr)',
        signature: 'minmax(0,1fr) minmax(0,1.2fr)'
      },
      maxWidth:  { vignette: '220px' },
      minWidth:  { tableau: '680px', 'tableau-court': '640px' },
      minHeight: { cible: '44px', segment: '48px', 'entete-mobile': '112px', panneau: '340px' },
      width:     { 'jauge-54': '54%', 'jauge-55': '55%' }
    }
  },
  plugins: []
}

Le chanfrein, à poser dans application.css

.chanfrein    { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.chanfrein-sm { position: relative; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px),  calc(100% - 9px)  100%, 0 100%); }
/* La bordure suit la coupe : pseudo-élément qui hérite de la bordure haute (même épaisseur, même couleur). */
.chanfrein::after, .chanfrein-sm::after { content: ""; position: absolute; height: 0; pointer-events: none;
  border-top: inherit; transform: rotate(-45deg); }
.chanfrein::after    { width: 21px; right: -3.5px; bottom: 6px; }
.chanfrein-sm::after { width: 14px; right: -2.5px; bottom: 3.5px; }

Règle (21/09) : sur une surface pleine (vert-atelier, vert-chariot, lime), le chanfrein se suffit. Sur une surface claire, l'élément porte toujours une bordure (border border-trait au minimum, border-2 border-atelier pour un bouton) et le trait diagonal la prolonge : un coin coupé sans trait sur fond blanc se lit comme un défaut.

Titres d'écran : text-ecran sur desktop, text-section en dessous de 768 px. L'échelle ne s'élargit pas, on descend d'un cran.