Ember.Ember

Writing and accessibility

Writing and accessibility

Tone, French typography, accessibility and downloadable resources.

Tone and formal address

In French, the app and the site address users formally ("vous"), with the same copy rules.

Rules

  • Formal address everywhere, including in the app's messages, errors and help bubbles.
  • Short sentences, one action verb per button, in the infinitive: "Envoyer", "Créer un dossier", "Valider".
  • Instructions and messages in the formal imperative: "Décrivez votre priorité", "Vérifiez votre connexion".
  • No final period in a button label, a tab, a field or a title.
  • Sentence case: one initial capital, never title case.
  • Ellipsis "…" (a single character) for loading: "Enregistrement…".
  • Deliberate exception: composer suggestions and the user's requests to Ember use the singular imperative ("Prépare mon dossier…"): it is the user's own voice.
  • No long dash, white text on every orange button, no invented figure, testimonial or logo, plain language.

Examples

  • 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

Do

  • Décrivez votre priorité.

    Do: Use formal address, with a clear action.

  • Envoyer

    Do: One verb per button, no final period.

Don't

  • Décris ta priorité.

    Don't: Use informal address in site or app copy.

  • Envoyer.

    Don't: A period at the end of a button label.

French typography

The rules are applied at the source, in the message files and in every French text in the code, then guarded by a test.

Rules

French typography rules
SignRule
« : »non-breaking space (U+00A0) before
« ; ? ! »narrow non-breaking space (U+202F) before
« »non-breaking space (U+00A0) inside; never " or “ ”
Apostrophecurly ’, never straight
Ellipsisa single "…" character
Thousandsnarrow non-breaking space (U+202F): "1 000"
Long dashnever, neither em dash nor en dash
Inversionsjoined by U+2060: "dilue-t-il" never breaks across lines

Before and after

The frenchSpaces() function applies the rules to titles composed in code. The symbol ⎵ marks a non-breaking space or a link between two words: the line cannot break at that point.

frenchSpaces demonstration
BeforeAfter
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⎵?

Accessibility

44 px targets, visible focus, measured contrasts, keyboard, reduced motion.

Touch targets

AppSite

Preview at real scale

44 px: below 1,024 px
40 px: from 1,024 px, compact buttons
36 px: from 1,024 px, dense buttons
  • At least 44 px below 1,024 px for a button, a standalone link, a field, a list row and a segment; at least 40 px above.
  • A visually smaller control keeps a 44 px clickable area through a pseudo-element (before:absolute before:-inset-2).
  • Composer (send, dictate): h-11 w-11 lg:h-9 lg:w-9. Actions under a reply: h-11 w-11 lg:h-8 lg:w-8.
  • touch-action: manipulation on a, button, [role=button], summary against the double-tap delay.

Focus

AppSite

Preview: the shared ring

Buttonring-ember-700: 3.56:1 · large text
field: ember-700 border and ring
Focus rings
ElementClasses
Buttons, links, clickable cards, chips, tabsfocus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ember-700 focus-visible:ring-offset-2
Fields and composerfocus-visible:border-ember-700 focus-visible:ring-2 focus-visible:ring-ember-700/25
App dark surfacethe offset takes the surface color (ring-offset-neutral-900)

ember-700 is 3.56:1 on white: it is a brand orange that meets the 3:1 threshold of a focus indicator.

Contrasts, keyboard, motion, language

AppSite
  • Contrasts: see Measured contrasts. White text stays on every orange button; orange text is ember-800; useful text is never lighter than neutral-500.
  • Keyboard and screen readers: mega menu and language menu fully usable by keyboard; mobile menu with focus trap; tabs role="tablist"; FAQ aria-expanded with inert; role="switch" and role="radiogroup"; field errors role="alert"; icon alone = aria-label and tooltip.
  • Reduced motion: covered in both products (see Foundations, Motion).
  • Zoom: zoomable viewport; fields and composer at 16 px on phones to prevent automatic iOS zoom.
  • Language: <html lang> according to the locale.

Resources

Brand files, ready to use.

  • Complete brand assets

    ZIP: symbols, palette (text, JSON, CSS), presentation texts

    Download

  • Color symbol

    PNG, 622 × 571 px, transparent background

    Download

  • White symbol

    PNG, 622 × 571 px, transparent background

    Download

  • Palette in CSS

    Variables for the ember and neutral palettes and the state colors

    Download

  • Palette in JSON

    Same values, for a tool or a script

    Download

Fonts: Satoshi and Inter, to download from their publishers. The same files are listed on the design system home page.

Rule
The high-resolution PNG is the official logo asset.