Système de design
MTM
Mwamba Tshilumba Michée
« Le pouls de la création. »
Charte visuelle d'une application multimédia mobile-first, pensée pour Android : sombre par défaut, dense en contenu, légère à l'usage. Une seule couleur signature, une typographie caractérielle, des surfaces sobres qui laissent les images parler.
Marque
Le monogramme MTM se lit comme une lettre M et comme un égaliseur : deux montants hauts, un montant court au centre.
Symbole seul
Logotype horizontal
Sur fond clair
À faire
- · Réserve d'espace = hauteur d'un montant autour du symbole
- · Taille minimale : 24 px (écran), 8 mm (impression)
- · Dégradé or → jade uniquement sur fonds sombres
À éviter
- · Déformer, incliner ou recolorer le symbole
- · Poser le dégradé sur une photo chargée sans voile
- · Ajouter une ombre portée au symbole
Palette
Une dominante encre, un accent or affirmé, trois soutiens. Toutes les valeurs sont exprimées en OKLCH.
Accent principal — actions, sélection, marque
--mtm-gold
oklch(0.803 0.152 74)
Dégradés, lumière, survol
--mtm-gold-soft
oklch(0.87 0.09 82)
Secondaire — validation, données, liens
--mtm-jade
oklch(0.762 0.132 168)
Direct, alerte, favori
--mtm-ember
oklch(0.652 0.213 24)
4e accent — listes, catégories
--mtm-violet
oklch(0.62 0.17 300)
Fond d'application
--background
oklch(0.145 0.013 265)
Cartes, barres, panneaux
--mtm-surface
oklch(0.196 0.014 265)
Éléments empilés
--mtm-surface-2
oklch(0.252 0.016 265)
Règle des 60/30/10
60 % encre et surfaces · 30 % images et texte · 10 % accent or. L'or ne sert jamais de fond de grande surface : il signale l'action, la sélection et la marque.
Typographie
Bricolage Grotesque pour les titres · Manrope pour le texte · Instrument Serif italique pour l'éditorial.
Aa Éé
Bricolage Grotesque
Titres, chiffres, logotype
Aa Éé
Manrope
Interface, texte courant
Aa Éé
Instrument Serif
Citations, accroches
Composants
Les briques réutilisables de l'interface MTM.
Boutons
Étiquettes & badges
Champs
Progression & états
Barre de navigation
Cinq destinations maximum. Le bouton « Créer » est surélevé et coloré : c'est la seule action de la barre, jamais une destination passive.
Formes & icônes
Angles très arrondis, trait d'icône constant, cibles tactiles généreuses.
Icônes · trait 2,2–2,6
Rayons
Mouvement
Court, courbé, jamais décoratif : le mouvement explique la hiérarchie.
Apparition
620 ms · cubic-bezier(0.22, 1, 0.36, 1) · décalage de 60 ms par élément
Appui
150 ms · scale 0.97 — retour tactile sur chaque cible
Direct
Halo pulsé 2 s sur les contenus en cours de diffusion
Toutes les animations sont désactivées si le système demande une réduction du mouvement (prefers-reduced-motion).
Accessibilité & ton
Lisible dehors, utilisable d'une main, écrit sans jargon.
Accessibilité
- · Contraste minimum 4,5:1 sur tout texte courant
- · Cibles tactiles ≥ 48 × 48 px, espacées de 8 px
- · Actions principales dans le tiers bas de l'écran (usage à une main)
- · Texte alternatif sur chaque visuel, libellés ARIA sur les icônes seules
- · Aucun sens porté par la seule couleur (icône + libellé)
Ton de voix
- · Direct et chaleureux, jamais familier
- · Verbes d'action à l'infinitif : « Regarder », « Écouter », « Publier »
- · Phrases courtes, une idée par ligne
- · Le créateur avant l'algorithme : on nomme les gens