Aplomb

Guide de styleStyle guide

Une feuille de plan, du bleu de tirage, du rouge pour ce que l’on ajoute. L’appli et le site partagent ces jetons : un seul produit.A drawing sheet, blueline ink, red for what you add. The app and the site share these tokens: one product.

Les écrans, fiches de spécification et correspondance des jetons avec Compose sont dans l’atlas, qui fait office de spécification vivante.Screens, spec cards and the token mapping to Compose are in the atlas, which acts as the living spec.

Les exemples sont des éléments de page, pas des captures de l’appli. Le raisonnement et les sources sont dans aplomb/design-android.md. Cette page est marquée noindex.The examples are page elements, not screenshots of the app. Reasoning and sources are in aplomb/design-android.md. This page is marked noindex.

CouleurColour

Deux rôles : le bleu porte le plan, le rouge porte ce que l’utilisateur ajoute (épingle, bouton principal, focus). Les couleurs de métier ne portent jamais un texte seules : toujours une lettre et une forme en plus, et du texte en encre.Two roles: blue carries the drawing, red carries what the user adds (pin, primary button, focus). Trade colours never carry text alone: always a letter and a shape too, and ink text.

  • Papier / Paper--paper · #FAFAF7dark #0E1626—
  • Encre / Ink--ink · #12306Bdark #E6ECF812,1:1 / 15,3:1
  • Encre douce / Soft ink--ink-soft · #3F5A8Fdark #A9BCE06,5:1 / 9,4:1
  • Trait / Line--line · #1F4E9Cdark #6F9BE87,6:1 / 6,5:1
  • Rouge de repère / Red--red · #D4283Adark #FF6B784,8:1 (fond / bg) · blanc 5,0:1 · dark 6,6:1
  • Rouge appuyé / Red deep--red-deep · #A91D2Ddark #FF9AA36,9:1
  • Architecte--t-archi · #33383Ddark #B8BEC611,3:1 / 9,7:1
  • Électricité--t-elec · #C77700dark #F0A0303,3:1 / 8,4:1
  • Plomberie--t-plomb · #0A7FB5dark #4DB8E84,3:1 / 8,0:1
  • Chauffage-vent.--t-cvc · #2C8A5Adark #4FC08A4,1:1 / 8,0:1

Rapports de contraste calculés (WCAG 2.x) contre le papier clair, puis contre le fond sombre. Le texte courant exige 4,5:1 ; les composants et grands textes 3:1. Les couleurs d’électricité, plomberie et chauffage sont sous 4,5:1 en clair : elles servent aux aplats et aux contours (3:1), jamais au texte.Contrast ratios computed (WCAG 2.x) against the light paper, then the dark background. Body text needs 4.5:1; components and large text 3:1. Electrical, plumbing and heating colours are under 4.5:1 in light: they are for fills and outlines (3:1), never for text.

Couleur dynamique du système (Material You) : non retenue pour les couleurs de métier et de repère, qui portent un sens. Possible plus tard pour les surfaces neutres.System dynamic colour (Material You): not used for trade and markup colours, which carry meaning. Possible later for neutral surfaces.

TypographieType

display 800 / 70% · clampPlan de l’étageFloor plan
title 800 / 88% · 1.35remVisite du 2 novembreVisit of 2 November
body 400 · 17 pxTexte courant en Atkinson Hyperlegible Next, conçue pour la lisibilité.Body text in Atkinson Hyperlegible Next, designed for legibility.
label 700 · 15 pxPoser une épingleDrop a pin
figures · tabular38,4 m · 62,0 m · 12,8 m²

Tout est en rem : l’échelle de police du système (jusqu’à 200 %) agrandit tout sans rien couper. Archivo reste réservée aux titres et aux chiffres, jamais au texte long.Everything is in rem: the system font scale (up to 200%) enlarges all without clipping. Archivo is for titles and figures only, never long text.

Formes et tactileShape and touch

Le plan reste anguleux (traits, cartouche). Tout ce qui se touche est arrondi, comme dans Material 3 : on voit où appuyer.The drawing stays angular (lines, title block). Everything you touch is rounded, as in Material 3: you see where to press.

xs 4s 8m 12l 16xl 28full

Cibles : 48 dp minimum partout, 56 dp pour les actions du plan (épingler, tourner, annuler), 8 dp d’écart. Pointillé rouge ci-dessous = zone réelle.Targets: 48 dp minimum everywhere, 56 dp for plan actions (pin, rotate, undo), 8 dp apart. Red dashes below = real hit area.

48
56 (plan)(plan)

Composants et étatsComponents and states

Cinq états lisibles sans couleur seule : repos, survol/appui (calque de 8 et 12 %), focus (anneau rouge de 3 px), activé, désactivé (texte et forme changent).Five states readable without colour alone: rest, hover/press (8 and 12% layer), focus (3 px red ring), on, disabled (text and shape change).

reposrest
survol 8 %hover 8%
appui 12 %press 12%
focus
désactivédisabled
tonal
contouroutlined
filtre : actif plein, inactif en pointilléfilter: on solid, off dashed

Les statuts d’observation ne reposent jamais sur la couleur : ○ à traiter, ◐ en cours, ● traité, ✓ levé, avec le mot écrit à côté.Observation statuses never rely on colour: ○ to do, ◐ doing, ● done, ✓ cleared, with the word written beside.

Navigation

Téléphone : barre du bas à trois destinations. Tablette et pliable ouvert : rail à gauche, puis liste et plan côte à côte. Même vocabulaire partout.Phone: bottom bar with three destinations. Tablet and unfolded: rail on the left, then list and plan side by side. Same vocabulary everywhere.

MouvementMotion

Court et utile : confirmer un geste (pose, tri), relier deux surfaces. 150 ms pour un état, 250 ms pour un panneau, 400 ms maximum. Aucun effet décoratif sur le plan : il doit rester immobile quand on vise.Short and useful: confirm a gesture (drop, sort), link two surfaces. 150 ms for a state, 250 ms for a panel, 400 ms at most. No decoration over the plan: it must stay still while you aim.

Avec « réduire les animations », le déplacement devient instantané (testez le réglage du système). Sur Android, les ressorts de Material 3 Expressive remplacent ces courbes ; le site garde une courbe CSS équivalente.With “reduce motion”, movement becomes instant (try the system setting). On Android, Material 3 Expressive springs replace these curves; the site keeps an equivalent CSS curve.

Clair et sombreLight and dark

Le sombre ne s’obtient pas en inversant : l’encre devient claire, le rouge s’éclaircit et son texte devient foncé. Plein soleil : le clair reste le mode par défaut du plan.Dark is not an inversion: ink turns light, red lightens and its text turns dark. In full sun, light stays the default for the plan.

ClairLight

Texte, trait et rouge sur papier.Text, line and red on paper.

SombreDark

Texte, trait et rouge sur fond nuit.Text, line and red on night.

Décidé le 3 nov. 2026 : barre du bas à trois destinations ; mode sombre dès la première version ; épingle décalée au-dessus du doigt, validée au relâchement.Decided 3 Nov 2026: bottom bar with three destinations; dark mode from the first version; pin offset above the finger, confirmed on release.

Statut : le sombre est défini et vérifié ici ; il n’est pas encore appliqué au site entier ni à l’atlas.Status: dark is defined and checked here; it is not yet applied to the whole site or the atlas.

TonVoice

  • Phrases courtes, verbes d’action : « Épingler », « Exporter ». Pas de point d’exclamation.Short sentences, action verbs: “Pin”, “Export”. No exclamation marks.
  • Jamais de verdict : on écrit « valeur mesurée 3,42 m », pas « correct » ni « conforme ». Un écart s’affiche, il ne se juge pas.Never a verdict: write “measured value 3.42 m”, not “correct” or “compliant”. A gap is shown, not judged.
  • Les erreurs disent quoi faire : « Réglez l’échelle pour saisir une cote ».Errors say what to do: “Set the scale to enter a dimension”.
  • Les maquettes sont dessinées, jamais présentées comme des captures.Mock-ups are drawn, never presented as screenshots.