Ember.Ember

Écriture et accessibilité

Écriture et accessibilité

Le ton, la typographie française, l’accessibilité et les ressources à télécharger.

Ton et vouvoiement

L’application et le site vouvoient, avec les mêmes règles de copie.

Règles

  • Vouvoiement partout, y compris dans les messages, erreurs et bulles d’aide de l’application.
  • Phrases courtes, un verbe d’action par bouton, à l’infinitif : « Envoyer », « Créer un dossier », « Valider ».
  • Consignes et messages au vouvoiement impératif : « Décrivez votre priorité », « Vérifiez votre connexion ».
  • Pas de point final dans un libellé de bouton, un onglet, un champ ou un titre.
  • Casse de phrase : une majuscule initiale, jamais de casse de titre.
  • Points de suspension « … » (un seul caractère) pour un chargement : « Enregistrement… ».
  • Exception voulue : les suggestions du composeur et les demandes de l’utilisateur à Ember sont à l’impératif singulier (« Prépare mon dossier… ») : c’est la voix de l’utilisateur.
  • Pas de tiret long, texte blanc sur tout bouton orange, aucun chiffre, témoignage ou logo inventé, français simple.

Exemples

  • L’équipe IA qui fait avancer votre entreprise.
  • Financez, créez, prospectez, faites⁠-⁠vous connaître : dites ce qui bloque, Ember s’en charge.
  • Sur quoi voulez⁠-⁠vous avancer aujourd’hui ?
  • Votre prochaine décision peut commencer ici.
  • Décrivez votre priorité. Ember vous aide à avancer.
  • Commencer gratuitement · Commencer · Se connecter

À faire

  • Décrivez votre priorité.

    À faire : Vouvoyer, avec une action claire.

  • Envoyer

    À faire : Un verbe par bouton, sans point final.

À ne pas faire

  • Décris ta priorité.

    À ne pas faire : Tutoyer dans un texte du site ou de l’app.

  • Envoyer.

    À ne pas faire : Un point à la fin d’un libellé de bouton.

Typographie française

Les règles sont appliquées à la source, dans les fichiers de messages et dans tout texte français du code, puis gardées par un test.

Règles

Règles de typographie française
SigneRègle
« : »espace insécable (U+00A0) avant
« ; ? ! »espace fine insécable (U+202F) avant
« »espace insécable (U+00A0) à l’intérieur ; jamais " ni “ ”
Apostrophecourbe ’, jamais droite
Points de suspensionun seul caractère « … »
Milliersespace fine insécable (U+202F) : « 1 000 »
Tiret longjamais, ni cadratin ni demi-cadratin
Inversionsliées par U+2060 : « dilue-t-il » ne se coupe pas

Avant et après

La fonction frenchSpaces() applique les règles aux titres composés dans le code. Le symbole ⎵ marque une espace insécable ou un lien entre deux mots : la ligne ne peut pas se couper à cet endroit.

Démonstration de frenchSpaces
AvantAprès
Merci !Merci⎵!
Que s’est-il passé ?Que s’est⎵-⎵il passé⎵?
Dites-nous : comment ça marche ?Dites⎵-⎵nous⎵: comment ça marche⎵?
« Ember. »«⎵Ember.⎵»
Dilue-t-il votre message ?Dilue⎵-⎵t⎵-⎵il votre message⎵?

Accessibilité

Cibles de 44 px, focus visible, contrastes mesurés, clavier, mouvement réduit.

Cibles tactiles

AppSite

Aperçu à l’échelle réelle

44 px : sous 1 024 px
40 px : dès 1 024 px, boutons compacts
36 px : dès 1 024 px, boutons denses
  • 44 px au moins sous 1 024 px pour un bouton, un lien seul, un champ, une ligne de liste et un segment ; 40 px au moins au-dessus.
  • Un contrôle visuellement plus petit garde une zone cliquable de 44 px par pseudo-élément (before:absolute before:-inset-2).
  • Composeur (envoyer, dicter) : h-11 w-11 lg:h-9 lg:w-9. Actions sous une réponse : h-11 w-11 lg:h-8 lg:w-8.
  • touch-action: manipulation sur a, button, [role=button], summary contre le délai de double appui.

Focus

AppSite

Aperçu : l’anneau commun

Boutonring-ember-700 : 3,56:1 · gros texte
champ : bordure et anneau ember-700
Anneaux de focus
ÉlémentClasses
Boutons, liens, cartes cliquables, puces, ongletsfocus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2
Champs et composeurfocus-visible:border-ember-700 focus-visible:ring-2 focus-visible:ring-ember-700/25
Surface sombre de l’apple décalage prend la couleur de la surface (ring-offset-neutral-900)

ember-700 fait 3,56:1 sur blanc : c’est un orange de la marque qui respecte le seuil de 3:1 d’un indicateur de focus.

Contrastes, clavier, mouvement, langue

AppSite
  • Contrastes : voir Contrastes mesurés. Le texte blanc reste sur tout bouton orange ; le texte orange est ember-800 ; un texte utile n’est jamais plus clair que neutral-500.
  • Clavier et lecteurs d’écran : méga-menu et menu de langue complets au clavier ; menu mobile avec piège à focus ; onglets role="tablist" ; FAQ aria-expanded avec inert ; role="switch" et role="radiogroup" ; erreurs de champ role="alert" ; icône seule = aria-label et infobulle.
  • Mouvement réduit : couvert dans les deux produits (voir Fondations, Mouvement).
  • Zoom : viewport zoomable ; champs et composeur en 16 px sur téléphone contre le zoom automatique d’iOS.
  • Langue : <html lang> selon la locale.

Ressources

Les fichiers de marque, prêts à l’emploi.

  • Ressources de marque complètes

    ZIP : symboles, palette (texte, JSON, CSS), textes de présentation

    Télécharger

  • Symbole en couleur

    PNG, 622 × 571 px, fond transparent

    Télécharger

  • Symbole blanc

    PNG, 622 × 571 px, fond transparent

    Télécharger

  • Palette en CSS

    Variables des palettes ember, neutral et des couleurs d’état

    Télécharger

  • Palette en JSON

    Mêmes valeurs, pour un outil ou un script

    Télécharger

Polices : Satoshi et Inter, à télécharger chez leurs éditeurs. Les mêmes fichiers sont listés sur la page d’accueil du design system.

Règle
Le PNG haute définition est la ressource officielle du logo.