Système de design Radix Themes.

Thème visuel et ambiance du système de design Radix Themes

Une interface de travail, pas un tableau d’inspiration

Radix Themes est une référence utile pour les produits dans lesquels les utilisateurs lisent, prennent des décisions, saisissent des informations et reprennent un travail inachevé. Son caractère visuel repose sur des espacements mesurés, des surfaces discrètes, une hiérarchie typographique claire et des états de composants cohérents et reproductibles. Servez-vous de ce guide pour créer un espace de travail de projet, un espace de compte, un écran de paramètres ou un parcours de vérification de données. L’objectif est de concevoir un écran de travail cohérent avec du contenu réel, et non un assemblage de composants attrayants sans tâche à accomplir.

Choisissez le bon point de départ

Pour une application React, commencez par utiliser le package Radix Themes proprement dit et ses composants avant d’écrire des remplacements personnalisés. Pour un concept visuel utilisant une autre pile technologique, prenez ces principes comme référence et présentez le résultat comme inspiré du système. Radix Themes et Radix Primitives constituent deux points de départ différents : ce guide porte sur la bibliothèque Themes, qui fournit un style. Un guide OpenDesign ne transforme pas une maquette HTML quelconque en implémentation Radix native.

Partez d’une tâche concrète

1. Choisissez une action principale pour le premier écran, par exemple créer un projet ou enregistrer les paramètres du compte.
2. Présentez les informations nécessaires à la décision avant l’action.
3. Distinguez visuellement la navigation, les métadonnées des objets, les champs modifiables et les retours d’information.
4. Lors de la conception, utilisez des titres longs et réalistes, plusieurs valeurs de statut et un état vide.
5. Un écran qui ne fonctionne qu’avec trois libellés courts de remplacement ne constitue pas encore un système utilisable.

Ton et contenu

Utilisez des libellés descriptifs et concis, des verbes précis et des explications directes. Un bouton doit indiquer la suite : Enregistrer les modifications, Inviter un membre ou Créer un projet. Réservez les titres au sujet de chaque section ; évitez d’affubler chaque petit contrôle d’un slogan publicitaire. En cas d’échec d’une action, expliquez à la personne ce qu’elle peut corriger et préservez son travail. Il s’agit de recommandations éditoriales de OpenDesign pour appliquer cette référence, et non d’API supplémentaires fournies par Radix.

Palette et rôles des couleurs du système de design Radix Themes

Distinguez la couleur de marque de la signification

Utilisez le thème au lieu de coder les écrans en dur

La configuration officielle de Theme expose accentColor et grayColor. Choisissez-les à la racine afin que les composants partagent les mêmes décisions. Dans les composants personnalisés, utilisez les variables CSS du thème actuel plutôt que de copier une couleur depuis une capture d’écran. La référence ci-dessous présente un sous-ensemble concis et pratique. Un jeton correspond à un rôle au sein d’un thème configuré ; il ne garantit pas qu’une valeur hexadécimale restera identique en mode clair, en mode sombre et avec chaque choix de couleur d’accentuation.

Hiérarchie des surfaces et des bordures

Commencez par un arrière-plan de page discret. Donnez aux cartes et aux panneaux modifiables une surface distincte uniquement lorsqu’ils regroupent des tâches liées. Utilisez des séparateurs pour les lignes qui appartiennent à une même liste. Évitez d’ajouter simultanément une bordure, une ombre, un arrière-plan teinté et un badge autour de chaque élément. Dans un écran de paramètres, un seul panneau avec des lignes séparées est généralement plus clair que six cartes flottantes. Maintenez une hiérarchie visible avec un faible contraste, sans rendre le texte essentiel trop pâle.

Apparence claire et sombre

Utilisez le paramètre d’apparence officiel pour les composants natifs et vérifiez les deux modes avec le même contenu. Ne créez pas un écran sombre en inversant aveuglément les couleurs ou en réutilisant les ombres du mode clair. Vérifiez séparément les superpositions, les champs inactifs, les séparateurs, les lignes sélectionnées et le texte sur les couleurs d’accentuation. L’étude interactive de cette page présente un petit ensemble de choix de thème ; le terrain de jeu officiel fait référence pour l’ensemble de la bibliothèque et son comportement natif.

Contraste et repères redondants

Vérifiez les paires de couleurs de premier plan et d’arrière-plan finales après avoir modifié la couleur d’accentuation ou la surface. Associez la couleur à du texte pour les états tels que En attente, Terminé et Échec. Ajoutez une coche ou un autre repère visuel pour les options sélectionnées. Ne partez pas du principe qu’une bibliothèque de composants accessibles rend accessibles toutes les combinaisons de contenu et de thèmes : vos libellés, imbrications, éléments CSS personnalisés et l’ordre des informations influent toujours sur l’utilisation de l’écran dans son ensemble.

Règles typographiques du système de design Radix Themes

Une hiérarchie de lecture bien pensée

Donnez à l’écran un titre clair, puis différenciez les titres de section, le corps du texte, les libellés de champs et les métadonnées complémentaires. Utilisez le moins de tailles possible pour exprimer ces relations. Dans les écrans de produits denses, des libellés lisibles comptent davantage qu’une typographie d’affichage surdimensionnée. Gardez chaque paragraphe descriptif près du contrôle qu’il explique et veillez à ce que les libellés restent visibles une fois le champ renseigné. Le texte indicatif est une aide, pas un substitut au libellé d’un champ.

Échelle typographique et graisse

Radix documente une échelle typographique en neuf niveaux, avec des tailles de police, des hauteurs de ligne et des espacements de lettres associés. Le tableau de référence de cette page reprend ces valeurs pour l’échelle de base. Choisissez un niveau dans son ensemble au lieu de lui associer une hauteur de ligne sans rapport. Utilisez une graisse normale pour le corps du texte et une graisse plus marquée pour les titres ou les libellés sélectionnés. Si tout est en gras, la hiérarchie disparaît ; si tous les textes secondaires sont trop clairs, l’écran devient difficile à lire.

Choix des polices et polices de remplacement

Radix Themes utilise par défaut une pile de polices système. Conservez cette pile si la portabilité compte davantage qu’une police de marque particulière, ou configurez une police sous licence à l’aide du mécanisme de personnalisation documenté. Le site OpenDesign environnant utilise Albert Sans ; cela ne fait pas d’Albert Sans la police officielle de Radix. Pour les applications multilingues, testez des libellés représentatifs en chinois, japonais et coréen, ainsi que des libellés longs dans des langues européennes, avec les polices de remplacement réellement utilisées.

Nombres, code et retours à la ligne

Alignez les colonnes numériques pour pouvoir comparer les valeurs verticalement. Utilisez une police à chasse fixe pour le code, les identifiants et les jetons lorsque les limites entre caractères sont importantes. Laissez les titres et les descriptions revenir naturellement à la ligne ; ne tronquez pas les instructions essentielles uniquement pour conserver la hauteur d’une carte. Pour une chaîne qui ne peut réellement pas être coupée, comme un identifiant, prévoyez un retour à la ligne contrôlé ou une action de copie. Sur mobile, préservez l’intégralité du sens même lorsque la mise en page change.

La longueur du contenu fait partie de la conception

Testez un nom de projet long, un rôle de membre sur deux lignes et une action traduite avant de déclarer un composant réutilisable. Dans la mesure du possible, laissez les boutons s’élargir plutôt que de leur imposer à tous une largeur fixe. Limitez les paragraphes à une largeur de lecture confortable et utilisez des listes ou un tableau lorsque l’utilisateur doit comparer des informations parallèles. Ne divisez pas un texte explicatif en une multitude de petites cartes décoratives dans le seul but de donner à la page un aspect plus travaillé.

Style et états des composants du système de design Radix Themes

Boutons et hiérarchie des actions

Dans un groupe d’actions, identifiez la décision principale et donnez-lui le traitement le plus marqué. Les actions secondaires doivent rester faciles à trouver sans rivaliser à égalité. Distinguez les actions destructrices des confirmations ordinaires. Pendant l’envoi, empêchez les opérations en double et indiquez visiblement la progression ; une fois l’opération terminée, affichez le résultat réel. Si la raison pour laquelle un bouton est désactivé n’est pas évidente à partir du formulaire, expliquez-la à proximité.

Champs de saisie et formulaires

• Placez un libellé permanent au-dessus ou à côté de chaque champ de saisie.
• Gardez le texte d’aide près du champ concerné et associez les messages de validation au champ plutôt que de les afficher uniquement dans une bannière générique.
• Conservez les valeurs saisies lorsque la validation échoue.
• Regroupez les champs liés sous un titre de section explicite.
• Utilisez le type de champ et la valeur d’autocomplétion appropriés pour que le navigateur et les technologies d’assistance puissent aider la personne à effectuer la tâche.

Cartes, listes et tableaux

Utilisez une carte pour un objet autonome doté d’un résumé et d’une action pertinents. Utilisez une liste pour une série d’enregistrements similaires, et un tableau lorsque les utilisateurs doivent comparer les attributs de plusieurs enregistrements. Affichez des champs réels, comme le responsable, la date de mise à jour et le statut, plutôt que des fragments de graphiques décoratifs. Une carte ne doit pas être cliquable d’une manière qui entre en conflit avec des liens ou des boutons imbriqués ; choisissez une cible de lien claire et préservez le comportement normal au clavier.

Navigation et sélection

Séparez la navigation globale des onglets de page et des filtres locaux. La destination active doit rester identifiable sans dépendre uniquement de la couleur d’accentuation. Utilisez des liens pour la navigation et des boutons pour les changements sur place. Si vous implémentez un modèle à onglets, prévoyez le comportement au clavier correspondant ; sinon, utilisez un groupe clairement libellé de boutons ordinaires. Ne donnez pas à une rangée d’éléments span une apparence interactive si elle ne peut pas être utilisée comme telle.

Menus, boîtes de dialogue et superpositions

Utilisez le composant natif de la bibliothèque pour les comportements complexes lors de l’implémentation d’un produit React. Une boîte de dialogue doit avoir un titre, une méthode de fermeture claire, une gestion appropriée du focus et permettre de revenir au contrôle qui l’a déclenchée. Évitez de créer une fenêtre modale à partir d’une carte positionnée de manière absolue sans prévoir ces comportements. Limitez la boîte de dialogue à une seule décision ; les parcours de modification plus longs méritent souvent leur propre page plutôt qu’une superposition de plus en plus encombrée.

Chargement, état vide, erreur et réussite

• Concevez chaque état en fonction de la même tâche réelle.
• Une liste de projets vide doit expliquer comment créer le premier projet.
• Un état de chargement doit préserver une structure suffisante pour éviter un déplacement perturbant.
• Une erreur doit proposer une prochaine étape pertinente et ne pas effacer le travail accompli.
• Un message de réussite doit indiquer ce qui a changé.
• Les boutons de démonstration statiques de cette page illustrent l’apparence ; ils ne prouvent pas le comportement de ces états en production.

Système de design Radix Themes : mise en page, espacement et densité

Utilisez une échelle d’espacement commune

L’échelle d’espacement documentée comporte neuf valeurs de base : 4, 8, 12, 16, 24, 32, 40, 48 et 64 pixels. Utilisez les petites valeurs à l’intérieur de contrôles étroitement liés et les grandes entre les sections indépendantes. Maintenez un lien visuel entre un titre et son contenu. Ne répartissez pas l’espace vide uniformément dans le seul but de remplir l’écran : la proximité doit indiquer quels éléments d’information vont ensemble.

La densité dépend de la tâche

Un répertoire de ressources doit afficher suffisamment d’entrées pour permettre les comparaisons. Un formulaire de configuration doit laisser de la place aux libellés, aux aides et aux erreurs. Une page de lecture doit offrir une largeur de ligne stable et un plan visible. Adaptez la densité à la tâche plutôt que d’appliquer la même taille de carte partout. Radix propose également un réglage d’échelle qui ajuste ensemble les dimensions associées ; évaluez la lisibilité et les zones interactives qui en résultent avant d’adopter une échelle compacte par défaut dans le produit.

Comportement de la grille et du conteneur

Commencez par un conteneur de page, puis définissez le contenu principal et les éventuelles colonnes auxiliaires. Gardez les textes longs dans une colonne lisible, même lorsque la zone de travail est large. Aux largeurs réduites, déplacez le contenu auxiliaire sous le contenu principal ou transformez une longue colonne en contrôle de navigation locale accessible. Préservez l’ordre du contenu dans le code source afin que le parcours mobile et l’ordre de navigation au clavier restent cohérents, indépendamment de la disposition de la grille de bureau.

Préférez les rangées aux cartes imbriquées

Pour une référence compacte de jetons, placez le nom, la valeur et l’usage sur une seule ligne facile à parcourir. Pour un catalogue, regroupez le titre, la catégorie, la description et la destination. La répétition de boîtes imbriquées ajoute du bruit visuel et occupe une largeur qui devrait revenir au contenu. Préférez un séparateur fin entre les rangées associées ; réservez les panneaux encadrés aux véritables changements de contexte, comme un aperçu en direct ou un exemple de code.

Gardez le contenu important visible

Ne réduisez pas un guide détaillé à de brefs résumés dans le seul but de raccourcir la page. Proposez une table des matières et des intertitres bien marqués pour permettre aux lecteurs d’accéder directement à la section pertinente. Si un filtre ou un accordéon modifie la visibilité du contenu, l’état vide et l’état sélectionné doivent être clairs. Évitez les listes internes avec leur propre défilement, sauf si elles répondent à un véritable besoin d’interaction ; pour une longue collection de ressources, le défilement normal de la page est généralement plus pratique.

Système de design Radix Themes : rayons, profondeur et mouvement

Le rayon exprime une relation

Radix propose des réglages de rayon nommés et un comportement contextuel des composants. Choisissez un réglage au niveau du thème plutôt que d’attribuer le même rayon arbitraire à chaque élément. Un bouton, une case à cocher et un grand panneau ont des rôles structurels différents. Gardez leurs formes cohérentes sans effacer ces différences. Si votre composant utilise son propre jeton de rayon, testez-le à côté d’un bouton et d’un champ natifs avant de décider qu’il appartient au même système.

La profondeur distingue les couches

Utilisez la profondeur pour distinguer une superposition de la page sous-jacente ou un panneau interactif d’une surface d’arrière-plan discrète. Radix fournit une échelle d’ombres à six niveaux. Évitez de traiter l’indice d’ombre comme un classement décoratif des cartes. Un catalogue dense peut souvent se passer d’ombres et utiliser uniquement des bordures. Vérifiez les ombres dans les deux apparences ; un flou conçu pour le mode clair, reproduit sur une surface sombre, risque de disparaître ou de créer un halo qui suggère une profondeur inadéquate.

Le mouvement doit clarifier un changement

Utilisez des transitions brèves pour signaler une sélection, une ouverture, une progression ou un passage entre des états connexes. Ne retardez pas l’affichage du contenu avec une animation d’entrée. Évitez les mouvements continus en arrière-plan sur un écran destiné au travail. Respectez les préférences de réduction des animations et veillez à ce que l’état final reste lisible lorsque les transitions sont désactivées. Dans une implémentation personnalisée, le choix des durées relève de l’application ; ce guide n’invente pas de jeton de durée officiel de Radix dont l’existence n’a pas été vérifiée.

Des interactions sans effets superflus

Un effet au survol doit indiquer qu’un élément peut être utilisé. Un effet de focus doit rester bien visible par rapport aux surfaces adjacentes. Évitez de déplacer au survol une ligne dense au point de faire bouger les informations pendant leur lecture. Sur les écrans tactiles, les actions essentielles doivent rester accessibles sans survol. L’effet est réussi s’il aide à comprendre la commande, et non s’il attire l’attention sur l’animation elle-même.

Radix Themes Principes à suivre et à éviter pour le système de design

À suivre : concevoir un écran complet

Créez un écran avec sa navigation réelle, un contenu pertinent, une action principale et au moins un état exceptionnel. Examinez l’écran avant d’en extraire des dizaines de composants réutilisables. Consignez les choix intentionnels, comme la couleur d’accent, la densité, les niveaux typographiques et le texte des états vides. Vous fournirez ainsi à un agent IA un cadre précis à respecter et pourrez repérer plus facilement les écarts lors des itérations suivantes.

À suivre : assurer la cohérence entre les composants natifs et personnalisés

Privilégiez les composants existants de la bibliothèque pour les comportements qu’elle prend déjà en charge. Utilisez les variables de thème dans les composants personnalisés et vérifiez leur rendu dans les deux thèmes. Préservez les libellés et la sémantique HTML lors de la mise en forme. Si le projet possède déjà un système de design, comparez-le à cette référence avant de le remplacer ; une seconde couche de thème non maîtrisée risque d’ajouter des incohérences plutôt que d’en supprimer.

À éviter : recréer une identité de marque en changeant les couleurs

Changer uniquement la couleur d’accent ne suffit pas à créer une interface cohérente. L’espacement, la typographie, la hiérarchie du contenu, les modèles d’interaction et les choix adaptatifs contribuent largement à l’identité visuelle. Ne prétendez pas qu’il s’agit d’une intégration officielle au seul motif qu’une maquette ressemble à la bibliothèque. Évitez de reprendre les marques déposées, les ressources propriétaires ou les déclarations commerciales d’un autre produit dans l’interface d’un nouveau produit.

À éviter : sacrifier le sens pour obtenir une capture d’écran plus épurée

Radix Themes Comportement adaptatif et accessibilité du système de design

Adaptez la structure avant de la réduire

Quand l’écran rétrécit, réduisez le nombre de colonnes, raccourcissez le parcours vers l’action principale et intégrez les informations secondaires au flux de lecture normal. Ne réduisez pas un tableau de bord pour ordinateur comme s’il s’agissait d’une image et ne prétendez pas obtenir ainsi une mise en page mobile. Gardez le même contenu accessible en le faisant revenir à la ligne, en l’empilant ou en utilisant une présentation de tableau adaptée. Conservez des liens descriptifs afin que leur destination reste compréhensible même en dehors de la carte sur ordinateur qui les entoure.

Utilisez les points de rupture documentés à bon escient

Les noms officiels des points de rupture sont initial, xs, sm, md, lg et xl. Leurs largeurs minimales sont respectivement de 0, 520, 768, 1024, 1280 et 1640 pixels. Considérez-les comme des outils disponibles, et non comme des changements de mise en page obligatoires à chaque étape. Ajoutez un point de rupture lorsque le contenu nécessite une disposition différente. Testez également une largeur située entre deux points de rupture nommés, ainsi que le point de rupture lui-même, pour repérer les mises en page intermédiaires fragiles.

Clavier et focus

• Toute action importante doit pouvoir être effectuée au clavier.
• Distinguez clairement l’état de focus de celui du survol et veillez à ce qu’il reste visible même si un conteneur rogne son contenu.
• Évitez les valeurs tabindex positives, qui peuvent réorganiser les commandes de manière imprévisible.
• Après la modification des résultats par un filtre, conservez le focus sur la commande et affichez un décompte concis des résultats.
• À la fermeture d’une boîte de dialogue modale, ramenez le focus à un emplacement pertinent au lieu de laisser la personne au début du document.

Libellés, zones d’activation et texte d’assistance

Attribuez aux commandes composées uniquement d’une icône un nom accessible qui indique leur action, et non la forme de l’icône. Prévoyez des zones tactiles confortables, même si l’icône visible est petite. Excluez les icônes décoratives de l’arbre d’accessibilité. Signalez les mises à jour, comme l’enregistrement de modifications ou le nombre de résultats de recherche, sans annoncer sans cesse du contenu sans rapport. Si un état est représenté à la fois par une icône et du texte, évitez que le lecteur d’écran répète le même message.

Validez avec du contenu réel

• Vérifiez le rendu sur ordinateur, sur tablette et sur un téléphone à écran étroit.
• Incluez un texte qui s’agrandit, une image manquante, une liste vide et un identifiant long sans espace.
• Testez la page avec la réduction des animations activée et en naviguant au clavier.
• Après tout changement important de couleur, examinez les deux thèmes.
• Les vérifications automatisées peuvent repérer des problèmes structurels, mais elles ne peuvent pas déterminer si la hiérarchie, la densité du contenu et le caractère visuel d’ensemble répondent aux besoins visés du produit.

Radix Themes Guide de création de prompts pour agents IA et d’implémentation du système de design

Préparez le contexte du projet

1. Indiquez à l’agent IA de programmation ce qui est en cours de création, qui l’utilisera, quelle est l’action principale et quels fichiers existants définissent le design actuel.
2. Joignez ce guide comme référence au lieu de demander à l’agent d’imiter une capture d’écran non spécifiée.
3. Si vous utilisez React, précisez qu’il faut privilégier les composants natifs Radix Themes.
4. Si vous utilisez une autre pile technologique, demandez une interprétation clairement identifiée comme telle et examinez le travail d’interaction supplémentaire qu’elle nécessitera.

Définissez une première version complète

Demandez un écran fonctionnel avec du contenu réel et un petit nombre d’états. Précisez la navigation, les champs, les métadonnées des objets et le résultat attendu de l’action principale. Incluez dans la demande le focus clavier, un état vide, la validation et une mise en page étroite. Indiquez les contraintes à préserver, par exemple un en-tête existant, un contrat de données en production ou un bloc de contenu approuvé précédemment.

Effectuez la revue dans l’ordre qui révèle les vrais problèmes

1. Vérifiez d’abord que l’écran permet d’accomplir la tâche visée.
2. Comparez ensuite la hiérarchie de l’information, l’espacement, la typographie et les couleurs avec la référence choisie.
3. Enfin, testez les états interactifs et les mises en page adaptatives.
4. N’acceptez pas un changement visuel au seul motif que la page se compile ou qu’une capture d’écran semble soignée.
5. Vérifiez que les contenus longs, les erreurs et les actions répétées fonctionnent toujours après les ajustements visuels.

Faites évoluer le système en vous appuyant sur des décisions explicites

Une fois le premier écran fonctionnel, consignez la configuration du thème, les rôles typographiques, les choix d’espacement et les modèles de composants à réutiliser. Demandez à l’agent IA d’appliquer ces décisions à l’écran suivant sans réécrire silencieusement le contenu approuvé. Si un nouvel écran nécessite un modèle différent, documentez-en la raison et vérifiez la cohérence avec l’écran précédent. Faites évoluer le système à partir de comportements vérifiés plutôt que de générer une grande collection de pages qui se ressemblent en surface.

Périmètre connu et limites des sources