Installation · 14/10/2026
Studio Lumen, Paris 11
3 machines, technicien Jonas Meier (fictif). 12 rue de la Folie Méricourt.
Charte graphique, version 1, 21/09/2026
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
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à.
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.
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.
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.
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
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.
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
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
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
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
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
3 machines, technicien Jonas Meier (fictif). 12 rue de la Folie Méricourt.
Maintenance · 17/10/2026
7 machines, technicien non affecté. Accès par le sous-sol, badge à l'accueil.
Noms de sites, techniciens et dates fictifs.
Densité admin, desktop
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-0087 | Reformer | Studio Lumen | 08/04/2026 | En service |
| RF-2419-0104 | Reformer | Studio Lumen | 08/04/2026 | En service |
| CH-0088-0012 | Megaformer | Hôtel Verrière | 22/01/2026 | Hors service |
| CD-0310-0003 | Elina Cadillac | Spa Calanque | 03/09/2026 | En service |
| RF-2419-0211 | Reformer | Spa Calanque | 03/09/2026 | À contrôler |
Parc fictif, aucune donnée réelle.
Trois familles, jamais mélangées
Intervention
Planifiée · En cours · Clôturée · Annulée
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.
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é ».
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
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
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
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
Étape 6 / Step 6
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
Consignes, ressorts et numéros de cet exemple : fictifs.
Élément signature
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.
tabular-nums.WCAG 2.1, calcul de luminance relative
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.
| Texte | Fond | Ratio | Usage |
|---|---|---|---|
| lime-ressort #C5EB96 | vert-atelier #051A14 | 13.48 | Numéro de série sur la plaque, onglet actif |
| craie #FFFFFF | vert-atelier #051A14 | 18.04 | Texte principal sur fond sombre |
| brume #A8BDB2 | vert-atelier #051A14 | 9.09 | Texte secondaire sur fond sombre |
| lime-ressort #C5EB96 | vert-chariot #0E3B2C | 9.34 | Plaque réduite, barre basse active |
| brume #A8BDB2 | vert-chariot #0E3B2C | 6.30 | Marque et modèle sur plaque réduite |
| vert-atelier #051A14 | lime-ressort #C5EB96 | 13.48 | Bouton principal, segment OK |
| vert-atelier #051A14 | crème-studio #F6F4F0 | 16.42 | Texte principal sur fond d'application |
| vert-atelier #051A14 | craie #FFFFFF | 18.04 | Texte principal sur carte |
| gris-rail #5E6F66 | crème-studio #F6F4F0 | 4.85 | Texte secondaire, limite basse assumée |
| gris-rail #5E6F66 | craie #FFFFFF | 5.33 | Texte secondaire sur carte |
| oxyde-panne #8F2A1E | craie #FFFFFF | 8.34 | Message d'erreur |
| oxyde-panne #8F2A1E | fond-panne #F6E2DE | 6.69 | Badge Pas OK, Hors service, Reçu |
| texte-ok #2C4A16 | fond-ok #E3F2CE | 8.51 | Badge OK, Clôturée, Résolu |
| ambre-en-cours #7A5308 | fond-en-cours #F5E9CE | 5.68 | Badge En cours, À contrôler |
| texte-na #4A5450 | fond-na #E8E6E0 | 6.29 | Badge N.A., Planifiée, bouton désactivé |
| ambre-en-cours #7A5308 | craie #FFFFFF | 6.84 | Avertissement QR non associé |
| craie #FFFFFF | oxyde-panne #8F2A1E | 8.34 | Segment Pas OK sélectionné |
Couples interdits, calculés et écartés
Trois propositions
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
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
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
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
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.