Teleqo
Système de design
v1.0

Source de vérité · conformité UX

Le système de design Teleqo, gouverné par les lois de l'UX.

Chaque jeton de ce système se rattache à une autorité publiée : WCAG, ISO, Nielsen, Fitts, Bringhurst, Müller-Brockmann. Les règles ci-dessous sont des contraintes, pas des préférences. Elles sont formulées en grammaire normative (SBVR) et vérifiées en direct là où c'est mesurable.

La marque

Teleqo porte les messages qui comptent jusqu'aux personnes qui doivent les entendre.

Et nous faisons en sorte qu'ils soient compris. C'est la marque, et c'est aussi la mesure du système.

Positionnement
Affaires publiques, à l'échelle institutionnelle.
Standard
La compréhension, conçue avec rigueur.
Modèle
En marque blanche, jamais à la commission.

Les règles

Huit contraintes, huit autorités.

Tout ce qui précède tient à ce qui suit. Chaque jeton de la marque se rattache à une règle vérifiable et à une source primaire.

01

Fondations

Autorités : Nielsen (10 heuristiques, 1994) · Norman (7 étapes de l'action, 1988) · ISO 9241-110.

RÈGLE · SBVR

Il est obligatoire que chaque écran rende visible l'état du système, parle le langage de l'utilisateur et offre une issue claire à l'erreur.

Visibilité de l'état · en-tête collant, page active soulignée
Correspondance au monde réel · libellés en langage clair
Contrôle & liberté · navigation réversible, aucune impasse
Cohérence & standards · un seul vocabulaire visuel

Conforme

02

Couleur & contraste

Autorité : WCAG 2.2 · SC 1.4.3 (texte) · SC 1.4.11 (composants). Formule de luminance enregistrée : (L1 + 0,05) / (L2 + 0,05).

Il est obligatoire que tout texte présente un contraste ≥ 4,5:1 (≥ 3:1 pour le grand texte et les composants d'interface).

Audit de contraste des paires de couleurs du système, calculé en direct selon WCAG 2.2.
Paire Aperçu Ratio Statut

Ratios calculés en direct à partir des jetons rendus (oklch résolu par canvas).

03

Typographie

Autorités : Bringhurst (Elements of Typographic Style) · Tim Brown (échelle modulaire à 13 ratios). Échelle Teleqo : quarte juste (1,333) à partir de 16 px.

RÈGLE · SBVR

Il est obligatoire que le corps de texte mesure ≥ 16 px et que la largeur de lecture reste entre 45 et 75 caractères.

Titre · 67–90 px
Section · 38–50 px
Sous-titre · 28 px
Corps · 16 px (plancher)

Conforme

04

Espacement & grille

Autorités : grille à 8 points (quantum Q = 8 px) · Müller-Brockmann (Grid Systems) · grille responsive à 12 colonnes.

RÈGLE · SBVR

Il est obligatoire que tout espacement soit un multiple entier de 8 px ; il est interdit d'introduire une valeur hors grille.

Conforme · 8-pt

05

Interaction

Autorités : Fitts (1954) · Hick-Hyman · Apple HIG (cible ≥ 44 pt) · WCAG 2.5.8 (cible ≥ 24 px) · Miller 7±2.

FITTS · CIBLES

Il est obligatoire que toute cible interactive mesure ≥ 44 × 44 px.

HICK-HYMAN · MILLER

Il est obligatoire que la navigation principale reste à ≤ 7 choix afin de borner le temps de décision.

Accueil Le standard Breffage 3 / 7
06

Mouvement

Autorités : Material Motion · easing CSS (cubic-bezier) · WCAG 2.3.3 (animations à la demande).

RÈGLE · SBVR

Il est obligatoire que le mouvement respecte prefers-reduced-motion ; il est interdit d'imposer une animation à qui l'a désactivée.

durée · 200–500 ms
easing · cubic-bezier(0.2, 0, 0, 1)
repli · mouvement réduit honoré

Conforme

07

Accessibilité

Autorité : WCAG 2.2 niveau AA · ARIA 1.2 · EN 301 549. Cible Teleqo : conformité AA intégrale.

  • 1.4.3Contraste minimum AA · vérifié en direct ci-dessus
  • 2.5.8Taille de cible ≥ 24 px (≥ 44 px visé)
  • 2.1.1Tout est opérable au clavier
  • 2.4.7Focus toujours visible
  • 1.3.1Structure sémantique · titres H1–H3, repères ARIA
  • 3.1.2Langue de chaque page déclarée
08

Contenu

Autorités : ISO 24495-1:2023 (langage clair) · guide de rédaction du gouvernement du Canada · Flesch (lisibilité).

RÈGLE · SBVR

Il est obligatoire que le texte soit pertinent, facile à trouver, à comprendre et à utiliser ; il est interdit d'employer du jargon sans l'expliquer.

Voix active & forme positive
Phrases courtes · une idée chacune
Mots familiers · pas d'italique décorative
Adresse directe · « nous » / « vous »

Conforme · langage clair