Radix Themes
Une référence pratique pour les interfaces produit : couleurs personnalisables selon le thème, échelle de neuf niveaux pour la typographie et l’espacement, états des composants et guide complet pour les agents IA.
Explorez les palettes, la typographie, les composants, la mise en page et des guides de conception complets. Comparez des directions visuelles, consultez leurs règles et trouvez la référence adaptée à votre prochain projet.
Une référence pratique pour les interfaces produit : couleurs personnalisables selon le thème, échelle de neuf niveaux pour la typographie et l’espacement, états des composants et guide complet pour les agents IA.

Créez une interface pratique de contrôle des quantités avec l’unité magique de 16 px de Mozaic, des commandes assorties de 48 px, de véritables imports SCSS et des classes BEM. Le planificateur de rayonnage permet d’observer les limites, les erreurs typées et un récapitulatif local des matériaux.

Étudiez React Spectrum v3 à l’aide d’un tableau de ressources créatives sélectionnables et d’un inspecteur de préréglages d’exportation. Découvrez les thèmes Provider, l’échelle des champs de saisie, les propriétés de style prises en charge, les collections indexées et les différences entre v3 et la nouvelle implémentation Spectrum 2.

Créez des parcours de service plus longs avec l’espacement concret d’AgDS, ses propriétés adaptatives et le modèle d’état de TaskList. Essayez un processus de préparation dont l’étape de révision ne se déverrouille que lorsque les prérequis sont remplis.

Explorez le thème Alaska d’Auro à travers de véritables jetons sémantiques de couleur et de typographie, une typographie fondée sur des classes et le composant de vol natif. Deux vols fictifs d’origine illustrent le filtrage et la sélection locaux sans représenter l’inventaire ni les réservations d’une compagnie aérienne.

Utilisez les composants Web natifs d’Alberta et ses jetons de design publiés pour créer une liste de préparation complète, avec des choix accessibles, une progression calculée et des commentaires de révision transparents.

Utilisez le contrat réel et open source de Switch de Amsterdam, avec un thème neutre complet, des libellés accessibles et des préférences de lecture appliquées immédiatement.

Créez un sélecteur de sections de rapport avec le composant Transfer contrôlé d’Arco. Découvrez ses véritables échelles d’espacement et de taille, ses conventions de variables CSS, ses surfaces sémantiques et la différence entre sélectionner des lignes et les déplacer.

Ariakit fournit des composants React sans style, avec un état partagé explicite et des éléments accessibles combinables. Son combobox distingue la saisie de texte de la sélection validée, ce qui le rend utile pour les sélecteurs pilotés par la recherche ; le chercheur de références ci-dessous illustre cette distinction à l’aide de résultats regroupés et indisponibles.

Créez un tableau de planification des tickets avec les jetons sémantiques Atlassian, une échelle d’espacement de huit pixels, les véritables API de Button, Lozenge et Toggle, ainsi que la configuration de style Compiled requise. Consultez un ticket, filtrez le tableau et déplacez un élément de travail local sans confondre sélection et statut.

Un guide de configuration Cloudscape avec de véritables jetons de mise à jour visuelle, un espacement adapté à la densité, des API de formulaire contrôlées et un assistant fonctionnel en deux étapes pour la création de ressources.

Créez un parcours de validation bancaire aux couleurs de la marque avec les modules Angular de Backbase, l’export du thème sémantique et des états de révision explicites. Comparez les API Web aux dimensions natives documentées séparément.

Bits UI fournit des composants Svelte sans interface prédéfinie, composés à l’aide d’éléments natifs et de l’état de Svelte 5. L’exemple associe une case à cocher à état mixte calculé, des sections d’accordéon dépliables indépendamment et une boîte de dialogue de révision basée sur un portail, avec la configuration de style complète.

Utilisez Bootstrap 5.3.8 avec son échelle d’espacement réelle, ses couleurs sémantiques, sa grille adaptative et ses API de composants. Essayez un formulaire de réservation fonctionnel, un récapitulatif des erreurs, un filtre de tableau, une fenêtre modale et un sélecteur de mode de couleur, puis réutilisez le code documenté.

Créez un formulaire de préférences de rappel inspiré de la Colombie-Britannique, avec de véritables jetons sémantiques, les commandes Aria natives de React, des champs de contact conditionnels et une validation complète.

Créez un bureau éditorial avec la structure réelle des champs et contrôles de Bulma, des colonnes adaptatives, des modificateurs de couleur sémantiques et des variables CSS, avec un code de validation complet.

Découvrez la typographie, les jetons sémantiques et les composants Web natifs de GC Design System grâce à un guide de préparation complet avec recherche, divulgation et gestion de l’état vide.

Mettez en œuvre la grille éditoriale, la typographie actuelle et les composants Expandables natifs de CFPB avec une fiche de lecture fonctionnelle, des API de paquet vérifiées et des limites d’identité clairement définies.

Une référence Chakra UI v3 sur les jetons, les rôles de couleurs sémantiques, les recettes et les composants de formulaire composés. Examinez les échelles réelles d’espacement et de typographie, puis testez un formulaire natif de profil d’espace de travail avec validation, simulation d’échec de l’enregistrement et apparence claire ou sombre.

Implémentez CMS Core avec des variables de thème versionnées, les véritables API du composant Review et un flux fonctionnel de modification et de révision qui préserve les réponses saisies et le focus.

Une file de révision CoreUI reposant sur les véritables variables de thème 5.9, des onglets natifs, la sélection par lots avec cases à cocher et une notification persistante permettant d’annuler la dernière opération d’archivage locale.

Un studio d’invitation natif de CSS qui présente les 5 thèmes sémantiques de daisyUI, les couleurs associées au contenu, les options d’adhésion par boutons radio, les commandes de plage, la validation du navigateur et une véritable étape de révision dans une boîte de dialogue.

Créez une recherche d’appareils avec filtres contextuels à l’aide de DDS v3 : couleurs sémantiques, échelle typographique adaptative, espacement par jetons et composition InputGroup dont le filtrage relève de l’application.

Découvrez le thème DKFDS du Danemark, ses véritables échelles Sass et ses modèles de tableaux accessibles grâce à une comparaison complète de ressources, avec tri numérique, recherche lancée à la validation et récupération après un résultat vide.

Créez un parcours de services facile à suivre avec la véritable typographie de Bootstrap Italia, une structure Stepper adaptative et un état de formulaire local récupérable.

Découvrez les véritables rôles du thème Designsystemet, ses modes de taille et le comportement natif des champs grâce à un éditeur complet de brief de tâche, avec indication du nombre de caractères et préservation de l’état de présentation.

Découvrez la typographie, la grille et l’accordéon API du système de l’État français dans leur contexte institutionnel. Comparez les comportements d’ouverture liés et indépendants dans un exemple pédagogique au ton neutre.

Étudiez les échelles de couleurs et d’espacement de Duet et LocalTapiola à travers un parcours de sélection de dates, avec valeurs de date ISO, validation explicite de la plage, méthodes de focus du composant et distinction claire avec le sélecteur open source.

Créez un explorateur de journaux Elastic UI avec les échelles Borealis vérifiées, des commandes natives de tableau et de recherche, un filtre de gravité, des événements enregistrés localement et le code source complet de React.

Utilisez le véritable modèle Transfer de Element Plus, ses filtres et ses options désactivées pour créer un espace de travail de sélection de modules, fondé sur des couleurs, des tailles de caractères et des dimensions de commandes vérifiées.

Découvrez le contrat de tableau de données de Soul, son espacement de six pixels, ses rôles de couleurs en couches et sa typographie Inter compacte. Comparez la sélection multiple, la représentation des données manquantes et les lignes de synthèse, puis examinez les points d’entrée vérifiés du paquet privé React.

Une référence pratique à Calcite pour les outils spatiaux qui exigent de la précision : surfaces sémantiques, actions bleues, panneaux d’inspection compacts, véritables API de saisie et exemple complet d’examen local d’un site.

Examinez les rôles de couleur, de typographie et d’espacement de l’EC Europa à travers un brief complet avec accordéon natif, incluant la navigation au clavier, l’ouverture de tous les éléments et une solution de repli lisible en l’absence de JavaScript.

Une composition native d’accordéon et de panneau coulissant Flowbite 4, avec des alias de thème sémantique vérifiés, une liste de préparation persistante et un parcours accessible de prise de notes sur les matériaux, enregistré localement.

Une étagère de lecture native Fomantic UI, avec des valeurs de thème compilées et vérifiées, les modules jQuery de menu déroulant et de notation, une prise en charge explicite du clavier et une liste de lecture locale persistante.

Un espace de vérification fonctionnel Foundation, utilisant XY Grid, les validateurs personnalisés d’Abide, la confirmation Reveal, les paramètres Sass réels et un code d’intégration locale complet.

Un carnet de croquis natif Framework7 avec de véritables actions swipeout, les valeurs explicites du thème iOS, une commande d’action accessible au clavier et une liste filtrée qui conserve les études terminées jusqu’à la réinitialisation.

Un guide Pajamas pour les flux de travail techniques : véritables jetons sémantiques, typographie et espacement fluides, inspecteur de pipeline par étapes, affichage lisible des erreurs et simulation explicite d’une nouvelle tentative locale.

Créez une liste de préparation avec les véritables créateurs Button et Input de gluestack, les couleurs sémantiques explicites de la v5 et le code source complet de React Native Web. Examinez la validation, les actions au clavier, l’identité stable des éléments et le calcul local de la progression de préparation.

Découvrez les véritables rôles de couleur de Gov Design System CE, les emplacements des cartes et la pagination native à travers une boîte à outils de lecture complète pour six ressources, avec gestion explicite du focus et de l’état de la page.

Créez un parcours de questions et de vérification des réponses dans le style de GOV.UK, avec l’échelle typographique actuelle de la v6, un espacement adaptatif, des couleurs fonctionnelles, une validation liée et une intégration concrète au front-end.

Découvrez HarvardSites en tant que plateforme éditoriale : comparez les styles de site, choisissez des associations de polices documentées et composez des pages universitaires à partir de composants de contenu conçus à cet effet.

Headless UI fournit des composants d’interaction React sans style prédéfini pour les boîtes de dialogue, les listes de sélection et les interrupteurs. Ce guide porte sur la composition de leur comportement natif en matière de focus, de sélection et de fenêtres contextuelles avec du CSS ordinaire, à partir d’un flux de partage de documents comme exemple fonctionnel.

Composez des groupes de sélection HDS natifs, des couleurs de retour sémantiques et des résumés d’erreurs liés, avec un parcours complet de vérification et de correction en local.

Une référence HeroUI v3 avec de véritables variables sémantiques CSS, des commandes composées React, des surfaces claires et sombres, et une méthode d’export d’images opérationnelle.

Modélisez une réservation de capacité avec les primitives de mise en page de Grommet, des champs de formulaire contrôlés et des jauges numériques. Utilisez délibérément l’échelle du thème et distinguez le thème de base Grommet du thème HPE installé séparément.

Créez des pages universitaires avec l’échelle de tokens réelle de Rivet, l’anatomie de ses composants HTML et des interactions clavier natives. Découvrez une page de présentation compacte d’atelier avec des onglets accessibles pour les informations pratiques.

Composez un formulaire de maintenance d’entreprise avec les véritables états de saisie IDS, des alias de thème et un identifiant de ressource exact. Examinez les tokens du thème public actuel, un package Web Components épinglé et un flux de brouillon local avec validation et réinitialisation.

Une interface native Ionic de préférences de lecture, avec des rôles de couleur vérifiés, la géométrie des curseurs iOS et Material, le comportement réel des segments et des interrupteurs, ainsi qu’un article qui s’adapte aux choix de police, de taille et de papier.

Créez des interfaces japonaises de services publics faciles à lire grâce aux rôles typographiques DADS, aux tokens sémantiques et à l’anatomie native des composants HTML. Essayez une recherche de reçu fonctionnelle avec des erreurs de format, un résultat sans correspondance et un relevé de statut consultable.

Créez un panneau de partage destiné aux créateurs, avec un contexte de cours facile à comprendre, des actions de copie claires et un retour honnête sur le presse-papiers. Découvrez l’anatomie des composants Rails de Sage, ses spécifications typographiques publiées et la couche de tokens Pine, plus récente et chargée depuis l’extérieur.

Créez une interface native KERN avec une typographie vérifiée, des thèmes sémantiques, des panneaux dépliables et un parcours de confirmation réversible.

Un guide Orbit axé sur le voyage, avec les couleurs et espacements réels du produit, des choix de bagages natifs, un récapitulatif de prix cohérent et un parcours complet de vérification en local.

Kobalte fournit des composants headless pour Solid, notamment des champs numériques avec valeurs brutes et formatées distinctes, une anatomie composée de cases à cocher et des boutons avec état activé. Ce guide relie ces primitives aux signaux Solid au moyen d’un outil de mise à l’échelle de recettes qui calcule les quantités et permet de réinitialiser les ingrédients cochés.

Découvrez le langage d’interface opérationnel de Maersk à travers les rôles du thème clair, les échelles de titres et de texte, les rayons imbriqués et la gestion des identifiants. Un exemple de recherche d’expédition montre la correspondance exacte des références et un historique des événements accessible, sans prétendre accéder aux données logistiques en direct.

Une référence Mantine 9 centrée sur un tableau natif des participants et un panneau de planification. Examinez les échelles réelles du thème, reliez useForm à TextInput, Select, Checkbox et DatePickerInput, puis essayez la validation avant d’ajouter un enregistrement local.

Les générateurs de stores et d’actions de Melt UI ajoutent un comportement accessible au balisage Svelte que vous contrôlez. Ce guide utilise @melt-ui/svelte 0.86.6 pour relier les générateurs de boutons radio, de curseurs et d’interrupteurs par leurs attributs, leurs actions et leurs stores inscriptibles ; il s’agit d’une solution distincte de la version plus récente basée sur les runes API.

Découvrez le flux de travail WordPress pris en charge par Forty-Two, sa palette Web et ses modèles d’annuaire, au moyen d’un exemple fonctionnel de filtre par rôle et domaine de recherche.

Créez un espace de travail Fluent UI React v9 avec de véritables tokens sémantiques, les échelles typographiques et d’espacement Web, des onglets contrôlés et une boîte de dialogue d’accès validée. Comparez les valeurs du thème, examinez l’anatomie des composants et essayez une interaction locale avant d’utiliser l’exemple complet React.

Composez un tableau de suivi des livraisons fonctionnel avec les tokens Vibe 4 et les commandes React. Distinguez les couleurs d’action sémantiques des étiquettes du tableau, découvrez les pas d’espacement nommés et les raccourcis de police, ainsi que la configuration explicite de CSS nécessaire à une nouvelle application.

Créez une interface de recherche où les nombres sont alignés, les couleurs des actifs gardent leur signification et la typographie reste lisible. Découvrez les constantes MDS, l’adoption de Vue 3, la transition Morningstar Intrinsic et un carnet d’allocation fictif avec tri.

Un guide éditorial Protocol avec les véritables familles de polices et échelles d’espacement et de conteneurs, une page de lecture illustrée et adaptative, ainsi qu’un exemple complet de formulaire natif CSS.

Un espace de travail natif Naive UI pour les tableaux de données, avec des valeurs d’objet de thème vérifiées, la sélection et le développement des lignes, le tri, la pagination et une action locale de vérification par lot.

Utilisez les véritables tokens ax de Aksel v8, la densité native des tableaux et la structure sémantique de leurs en-têtes. Triez et sélectionnez des dossiers de suivi fictifs tout en comparant les thèmes clair et sombre.

Utilisez la typographie NHS.UK, l’espacement adaptatif, les choix groupés par boutons radio et des détails contextuels pour créer un parcours clair de choix de rendez-vous.

Composez une interface de service public à partir de composants créés par des contributeurs et d’un thème explicite. Cette référence utilise Utrecht CSS pour illustrer la correspondance des tokens, l’anatomie d’une liste de données et deux thèmes originaux associés au même flux de modification.

Examinez les tokens du thème Therapy de Nord et les contrats des Web Components au moyen d’un brouillon de demande de salle : rôles de couleur réels, dimensions adaptatives des champs, validation explicite et résultats préparés localement.

Découvrez les tokens de design de NSW, la typographie Public Sans et des onglets natifs accessibles au clavier grâce à un guide d’atelier complet accompagné d’une liste de lecture locale autonome.

Créez un compositeur de briefs Nuxt UI 4.11.3 complet, avec de véritables composants Vue, des références sémantiques au thème, la validation des champs et un comportement explicite pour les brouillons locaux.

Créez une réponse à un sondage sans contradictions : cases à cocher natives de l’ONS, réponses mutuellement exclusives, références exactes aux types et aux couleurs, et processus complet de vérification locale.

Créez un guide détaillé de style ontarien avec une véritable typographie, les valeurs publiées d’espacement et de couleur, le comportement natif des accordéons et le code source complet correspondant à la version.

Découvrez la palette réelle d’Oracle JET 19 Redwood, ses rôles sémantiques et ses limites d’espacement et de densité grâce à une fiche de travail originale et complète pour l’analyse des stocks, entièrement modifiable.

Examinez les tokens sémantiques réels d’Orange OUDS 1.4, ses packages de thème et le comportement natif d’Offcanvas grâce à une étude comparative complète et adaptative.

Un éditeur de catalogue Oruga natif avec des étiquettes de sujet consultables et supprimables, des limites de vocabulaire appliquées, les véritables tokens d’un thème facultatif et une carte dynamique reflétant les étiquettes sélectionnées.

Créez un espace de travail dense pour les données avec Blueprint : tokens de typographie et d’intention vérifiés, tableau de données sélectionnable, panneau d’inspection et code source React complet.

Découvrez le système de contenu de Bolt aux couleurs de Pega : typographie fluide, espacements horizontaux et verticaux distincts, et composition d’accordéon Twig pour une page de ressources éditoriale.

Pico CSS applique des styles sémantiques à HTML avec une échelle typographique adaptative fondée sur les rem et des variables de thème. Ses versions standard, sans classes et conditionnelle ont des périmètres d’intégration différents ; ce guide utilise la version standard pour un formulaire de préférences de lecture avec des éléments natifs dépliables et des boîtes de dialogue.

Examinez la grille Bootstrap 3 de Poncho, ses couleurs d’action sémantiques et ses panneaux de service entièrement cliquables au fil d’un annuaire d’activités fonctionnel.

Découvrez Porsche Design System v4 à travers ses espacements fluides, ses jeux de couleurs CSS, la typographie Porsche Next et un configurateur à deux choix. La référence comprend les expressions réelles des tokens et un point d’entrée Vite complet utilisant les événements actuels du contrôle segmenté.

Un planificateur de sessions Preline natif avec des onglets liés, un plugin de saisie numérique à limites définies, les alias de thème installés, les véritables échelles Tailwind et une estimation locale du matériel qui se met à jour selon la session choisie.

Une implémentation PrimeVue dont la version est figée dans l’écosystème Prime UI : un arbre de documents au thème Aura avec les références réelles aux préréglages, l’expansion contrôlée, le filtrage, la sélection et l’épinglage local.

Pure CSS est une feuille de style modulaire pour les grilles, formulaires, boutons, menus et tableaux, sans moteur d’exécution de widgets. Ce guide montre comment son module de grille adaptative facultatif s’associe aux éléments sémantiques natifs dans un catalogue d’équipement filtrable, avec un tri et une sélection explicitement implémentés.

Un parcours guidé natif Quasar avec les véritables valeurs de marque et d’espacement, la validation QForm, un créateur de brief en trois étapes, des choix de format par boutons radio et un ordre du jour dynamique de quarante-cinq minutes.

Découvrez l’implémentation de Bootstrap au Queensland grâce à un sélecteur de ressources illustré complet, avec les véritables rôles du thème, le style natif des cases à cocher et une boîte de dialogue de vérification accessible.

Créez un compositeur de plan de concentration complet avec React Native Elements 5.0.0 : véritables rôles du thème, champs et sélections contrôlés, validation, confirmation locale et version web testée.

Un calendrier de révision natif React Suite avec les variables CSS v6 vérifiées, des marqueurs sur les cellules de date, un ordre du jour pour la journée sélectionnée, la validation modale et des règles de planification locale explicites.

Utilisez PatternFly pour créer un espace de travail opérationnel : références aux tokens sémantiques, cartes de service sélectionnables, sélection groupée à trois états, vérification du périmètre et code React natif complet.

Créez un sélecteur de commandes Cedar concret avec des vignettes Vue natives, les véritables valeurs des tokens, une navigation complète au clavier et une composition de produits adaptative.

Découvrez les véritables rôles de couleur de Ripple, son échelle d’espacement en 14 étapes et ses références typographiques adaptatives grâce à un calendrier d’atelier complet proposant une divulgation progressive, une progression et le déplacement du focus vers l’étape suivante au clavier.

Appliquez les recommandations publiques de Sainsbury’s en matière de design à un parcours complet de réservation d’un créneau de collecte : références réelles de palette et de tailles, choix par boutons radio accessibles, récapitulatif actualisé et retour local fidèle à la réalité.

Un guide Lightning pour les tâches exigeant une forte densité d’informations : valeurs réelles d’espacement, de typographie et de couleurs sémantiques, espace de travail modifiable pour les dossiers, validation des champs et historique des activités reflétant les changements locaux.

Découvrez la structure de consultation et d’interaction de One UI, les recommandations de marge de 24dp et l’exigence de mise à l’échelle du texte à 200 % grâce à un aperçu complet et original des préférences de lecture, avec apparence sombre et rétablissement explicite après réinitialisation.

Utilisez le thème Horizon de SAP Fiori avec UI5 Web Components : véritables paramètres de thème, densité du contenu définie explicitement, états de valeur sémantiques et composition d’une demande d’achat avec validation locale.

Appliquez les rôles typographiques, d’espacement et de couleur adaptatifs du gouvernement écossais à un champ natif avec compteur de caractères, qui conserve le texte au-delà de la limite et permet de corriger la saisie.

Découvrez Braid à travers une composition originale de recherche d’emploi : des variables propres à chaque thème, quatre véritables points de rupture, du texte contextuel, des styles de boutons distincts et un champ contrôlé qui explique les erreurs de validation au lieu de désactiver l’action.

Une référence Evergreen avec les valeurs de thème réelles, la saisie contrôlée de tags, la correspondance des règles en temps réel, un parcours de récupération depuis un état vide et une boîte de dialogue de révision native.

Créez une configuration d’espace de travail séquentielle avec les étapes de base recommandées par Semi, un Input et un Switch contrôlés, de véritables tokens de thème et un choix explicite entre les packages React 18 et React 19.

Un guide Intergalactic avec les tokens sémantiques et de graphiques actuels, des contrôles de filtrage natifs, une comparaison à échelle fixe, des détails sur l’élément sélectionné et un jeu de données complet et reproductible.

Explorez les références exactes de Horizon Workspace en matière d’espacement, de rayon et de typographie grâce à un parcours complet et local de demande et de révision, avec conservation des brouillons, validation, filtres d’état et récupération.

Concrétisez Anvil2 avec son modèle de tokens à trois niveaux, ses valeurs de rôles vérifiées en mode clair et sombre, et une interaction complète d’affectation de service avec des états de technicien, d’horaire et de révision synchronisés.

Examinez des événements industriels à l’aide d’un vocabulaire explicite de niveaux de gravité, de rôles de couleur adaptés au thème et de la liste d’événements iX API. Ce guide crée un carnet d’équipement local sans confondre un événement révisé avec une alarme machine résolue.

Utilisez les SGDS Web Components actuels avec de véritables tokens adaptatifs, des thèmes jour et nuit et des quantités natives bornées qui maintiennent la synchronisation d’un plan local.

Comparez les thèmes Cerberus, Mint et Rose réels de Skeleton 5.0.1 dans un espace de lecture complet, avec inspection des tokens en temps réel, associations de surfaces sombres et état local réversible.

Examinez les véritables tokens publics de Seeds pour les couleurs, l’espacement, la typographie des produits et les bordures dans une file complète de révision éditoriale, avec sélection mixte, états vides après filtrage et annulation.

Composez des pages éditoriales universitaires avec le preset Tailwind de Decanter, une échelle typographique adaptative et des marges fluides. Découvrez des cartes d’événements originales avec des filtres de sujet fonctionnels et des résumés dépliables.

Un guide Circuit avec des tokens sémantiques exacts, des propriétés natives de validation, un éditeur complet de fiches marchand et un aperçu illustré côté client.

Créez des formulaires de service public finlandais faciles à lire avec Source Sans 3, des tokens d’espacement explicites et un modèle de sélection de document permettant de corriger les choix.

Un journal de projet natif Tabler avec les véritables variables de thème 1.6, des cartes de chronologie, le contexte d’une datagrid, la validation d’une fenêtre modale et une composition claire ou sombre permettant d’ajouter des points de suivi locaux.

Explorez les véritables catégories de tokens v5 de Tamagui et ses thèmes bleus clair et sombre dans un tableau de suivi complet composé de composants natifs, avec validation, progression et récupération depuis un état vide.

Créez un éditeur de règles compact API avec TDesign React : des rôles de thème concrets, son échelle de tailles par incréments de deux pixels, l’enregistrement des champs Form et une composition Table typée.
Créez une interface de découverte de services avec les primitives documentées de Thumbprint v2 : des cartes de prestataires compactes, des détails de comparaison faciles à lire, des états de sélection clairs et une présélection toujours accessible.

Rédigez une notification avec le thème et les conventions de boutons de Paste, une échelle d’espacement vérifiée et une distinction claire entre la modification, la révision et l’envoi effectif d’un message.

UIkit associe un framework CSS, une personnalisation Less et des composants JavaScript pilotés par attributs. Son Switcher, son Accordion et sa grille adaptative fonctionnent de concert dans le planificateur d’atelier ci-dessous, pour illustrer la limite entre le comportement natif des composants et l’état de sélection de l’application.

Explorez les tokens de couleur et d’espacement publiés par l’UNDP, les onglets natifs utilisables au clavier et un exemple complet de lecture d’atelier avec progression locale de la révision.

Associez les tokens d’espacement de USWDS, les rôles de thème, les tableaux sémantiques et les accordéons natifs dans une comparaison d’offres consultable.

Créez des parcours de service clairs avec les tokens sémantiques de VA et la liste de processus native Process List : des explications visibles pour chaque étape, des libellés d’état explicites et des détails complémentaires qui préservent la lisibilité du parcours principal.

Un parcours mobile de sélection d’adresse conçu avec Vant 4 : de vraies variables CSS, une identité d’adresse contrôlée, la validation des champs, le changement de thème et un enregistrement explicitement limité au stockage local.

Utilisez Visa Nova CSS pour créer un choix clair de format de relevé, avec des boutons radio natifs, un en-tête dans une couleur différente et un récapitulatif de révision. Examinez les valeurs exactes du thème 1.6.5, l’espacement évolutif et l’intégration complète de la feuille de style.

Examinez la base web de Volvo Cars, axée sur HTML, ses véritables tokens en mode clair et le style natif de ses cartes sélectionnables dans un exemple complet de préparation de bagages, avec des choix indépendants, le changement de thème et la réinitialisation.

Fiche d’évaluation Vuestic native, avec thèmes clair et sombre vérifiés dans les sources, libellés de notation accessibles, validation de la zone de texte, moyenne calculée et état enregistré qui conserve l’évaluation terminée.

Créez des interfaces de lecture résilientes grâce à une typographie fluide, des rôles de couleurs sémantiques et du contenu repliable natif, qui reste lisible sans JavaScript.

Examinez les véritables jetons sémantiques de Web Awesome dans des éléments personnalisés natifs, notamment les changements de rayon et d’espacement propres à chaque portée, le style du shadow DOM, le comportement des menus déroulants et la validation des champs de saisie.

Utilisez la structure réelle de SearchInput de Codex, sa hiérarchie d’actions et ses jetons axés sur la lecture. Recherchez dans un index local d’articles, consultez un résultat, puis revenez à la même position de lecture.

Utilisez les rôles de thème et la syntaxe des jetons réels de Wanda dans un espace de travail complet dédié à la consultation des retours, avec filtres par sujet, contexte justificatif dépliable et carnet local persistant.

Élaborez un parcours d’apprentissage local avec le composant composé FormField de Canvas Kit, TextInput contrôlé et PrimaryButton, en distinguant les sources actuelles des jetons sémantiques des anciens exemples de migration space.x4.

Guide Garden pour le support, avec de véritables alias de thème, des échelles typographiques et de rayons, un composeur de réponse complet, des brouillons locaux tenant compte de la visibilité et la récupération des champs.
Place de marché du voyage. Accent corail chaleureux, visuels axés sur la photographie et interface aux formes arrondies.
Gestion de projet. Minimalisme poussé, précision et accent violet.
Système apaisant, presque monochrome, structuré autour d’un noir-bleu canard profond, avec de généreux espaces blancs et une typographie éditoriale.
Électronique grand public. Espaces blancs haut de gamme, SF Pro et images cinématographiques.
Infrastructure de paiement. Dégradés violets emblématiques et élégance d’une graisse 300.
Banque numérique. Interface sombre et élégante, cartes en dégradé et précision fintech.
Effet de verre dépoli aux couches translucides, au flou subtil et aux bordures lumineuses, pour apporter profondeur et élégance contemporaine.
Transfert d’argent. Accent vert vif, ton convivial et clair.
Automobile électrique. Épure radicale, photographie plein écran et interface réduite au minimum.
Plateforme d’apprentissage des langues. Vert vif emblématique du hibou, ombres marquées et plaisir ludique.
Plateforme axée sur le code. Densité fonctionnelle, précision du bleu sur blanc et fondations Primer.
Interface conversationnelle privilégiant l’IA, avec des commandes minimales, des résultats clairs et des tâches déléguées pour les flux de travail agentiques.
Hybride entre tableur et base de données. Esthétique des données structurées, colorée et conviviale.
Système de design structuré pour les entreprises, privilégiant la clarté, la cohérence et l’efficacité dans les applications web riches en données.
Tableau de bord d’application à l’esthétique violette, avec navigation supérieure, mises en page en cartes et flux de travail conçus d’abord pour les développeurs.
« Le navigateur qui navigue pour vous. » Surfaces translucides, chaleur des dégradés et mise en page centrée sur la barre latérale.
Style expressif à fort contraste, typographie créative et couleurs audacieuses pour des interfaces visuellement saisissantes.
Un système visuel digne d’un magazine, fondé sur le collage : toile couleur papier chaud, images surréalistes de plâtre et d’architecture, caractères d’affichage surdimensionnés, filets très fins, repères de section en chiffres romains et minuscules annotations éditoriales. Inspiré des standards de production des magazines imprimés haut de gamme (Monocle, Apartamento, IDEA), transposés dans un site web fonctionnel.
Mise en page sur une grille modulaire, avec des blocs en forme de cartes, une hiérarchie claire, des espacements doux et un contraste visuel subtil pour des interfaces organisées et faciles à parcourir.
Plateforme d’échange de cryptomonnaies. Accent jaune vif sur fond monochrome et urgence de salle de marché.
Automobile de luxe. Surfaces sombres haut de gamme et esthétique de l’ingénierie allemande de précision.
Sous-marque axée sur la performance automobile. Surfaces de cockpit presque noires, accents tricolores BMW M et géométrie d’ingénierie acérée.
Forte présence visuelle, typographie massive, couleurs très contrastées et mises en page affirmées.
Esthétique brute, anti-design, inspirée de l’architecture en béton, avec des éléments sans ornement, des mises en page déconcertantes et un minimalisme fonctionnel.
Marque d’hypercars. Fond noir cinématographique, austérité monochrome et typographie d’affichage monumentale.
Interface chaleureuse inspirée des cafés, aux tons chauds, à la typographie douce et aux mises en page épurées, pour une navigation détendue.
Outil de planification open source. Interface neutre et épurée, simplicité pensée pour les développeurs.
Plateforme de création visuelle. Dégradé violet-bleu éclatant, espacement généreux et formes accueillantes.
Marque d’infrastructure d’entreprise. Surfaces sombres inspirant confiance, touche de bleu Cisco et clarté technique.
Assistant IA d’Anthropic. Accent terre cuite chaleureux et mise en page éditoriale épurée.
Agence de création. Formes organiques, dégradés doux et mise en page conçue avec soin.
Formes douces et arrondies évoquant la 3D, qui rappellent l’argile malléable, avec des éléments ludiques et dodus et des surfaces colorées.
Un design axé sur la simplicité, avec beaucoup d’espace blanc, une typographie lisible et une palette restreinte pour limiter l’encombrement visuel.
Base de données analytique rapide. Style de documentation technique rehaussé de jaune.
Un langage de composants compact et sémantique pour les applications web modernes : surfaces neutres superposées, typographie Inter précise, commandes accessibles, rôles de couleur automatiques pour les modes clair et sombre, et palettes de graphiques adaptées aux tâches.
Plateforme d’IA d’entreprise. Dégradés vibrants et esthétique de tableau de bord riche en données.
Plateforme d’échange de cryptomonnaies. Identité bleue épurée, axée sur la confiance, à l’allure institutionnelle.
Palettes et dégradés vibrants à fort contraste pour des expériences utilisateur captivantes, mémorables et modernes.
Plateforme d’intégration d’outils. Interface sombre et moderne, avec des icônes d’intégration colorées.
Minimalisme contemporain, grilles Bento, prise en charge du mode sombre et mises en page accessibles et performantes.
Design professionnel fidèle à la marque, avec des grilles structurées, des mises en page minimalistes et des modèles cohérents pour l’entreprise.
Esthétique futuriste de science-fiction, avec des thèmes sombres, des accents néon vibrants et des éléments spatiaux immersifs.
Design ludique axé sur les personnages, avec une typographie expressive et des graphismes audacieux pour les pages d’accueil et les projets créatifs.
Éditeur de code conçu d’abord pour l’IA. Interface sombre et épurée, avec des accents dégradés.
Esthétique de plateforme cloud sombre, avec des grilles modulaires, des panneaux façon verre et une hiérarchie de données affirmée pour les tableaux de bord de productivité.
Plateforme vocale et de clavardage. Surfaces sombres par défaut, teinte bleu-violet profond et touches d’accent ludiques.
Technique de rendu à motifs de points qui simule les nuances avec une palette limitée, pour un rendu rétro nostalgique à fort contraste.
Style dessiné à la main, évoquant les croquis, avec des gribouillis, des polices manuscrites et des lignes imparfaites pour un rendu ludique et informel.
Design théâtral à fort contraste, avec des mises en page audacieuses, des visuels immersifs et des compositions originales qui captent l’attention.
Mise en page éditoriale inspirée des magazines, avec une typographie à empattements raffinée, des grilles structurées et une expérience de lecture élégante.
Esthétique gracieuse et raffinée, avec une typographie délicate, des palettes minimales et des mises en page soignées qui respirent la sophistication.
Plateforme vocale d’IA. Interface sombre et cinématographique, esthétique inspirée des formes d’onde audio.
Style dynamique et vibrant, avec des bordures épaisses, des formes géométriques, des couleurs à fort contraste et une typographie expressive qui évoque le mouvement et la vitalité.
Design d’entreprise épuré à fort contraste pour les flux de travail axés sur les données, avec des interactions intuitives par glisser-déposer et des mises en page structurées.
Plateforme native React. Thème sombre, interlettrage serré, priorité au code.
Design vibrant et affirmé, avec des couleurs audacieuses, des graphismes ludiques et des mises en page dynamiques qui allient créativité et structure.
Esthétique fantastique inspirée des jeux, avec des visuels audacieux et haut de gamme, des palettes riches et des éléments thématiques immersifs.
Automobile de luxe. Éditorial en clair-obscur, accents rouge Ferrari et noir cinématographique.
Outil de conception collaborative. Palette multicolore vibrante, à la fois ludique et professionnelle.
Style minimaliste en deux dimensions, avec des couleurs vives, une typographie épurée et aucun effet 3D, pour des interfaces rapides et conviviales.
Créateur de sites web. Noir et bleu audacieux, priorité au mouvement et au design.
Design accessible et intuitif, avec des éléments arrondis, beaucoup d’espace blanc et des palettes de couleurs pastel douces.
Design tourné vers l’avenir, avec une typographie inspirée de la technologie, des mises en page modernes et une esthétique épurée axée sur l’innovation.
Transitions fluides entre les couleurs et surfaces riches en dégradés pour des interfaces modernes et ludiques, pleines de profondeur visuelle.
Automatisation des infrastructures. Style épuré pour l’entreprise, en noir et blanc.
Affichage tête haute d’avion de chasse ou d’hélicoptère. Phosphore vert sur fond presque noir, incrustations de données en majuscules, géométrie angulaire. Zéro ambiguïté, même à grande vitesse et en altitude.
Centre communautaire d’apprentissage automatique. Accent jaune ensoleillé, identité monospace, ambiance joyeuse et dense.
Technologies d’entreprise. Système de design Carbon, palette bleue structurée.
Messagerie client. Palette bleue conviviale, modèles d’interface conversationnelle.
Système éditorial inspiré du papier : fond parchemin chaleureux, accent bleu encre et hiérarchie dominée par les caractères à empattements. Conçu pour les CV, les documents d’une page, les livres blancs, les portfolios et les présentations : tout ce qui doit évoquer une impression de haute qualité plutôt qu’une interface. Multilingue par conception (EN · zh-CN · ja).
Plateforme de négociation de cryptomonnaies. Interface sombre rehaussée de violet et tableaux de bord riches en données.
Marque de supercars. Surfaces d’un noir profond, accents dorés, typographie dramatique en majuscules.
Design axé sur la conversion, qui élimine les obstacles et guide les utilisateurs vers l’action grâce à la clarté, à la confiance et à la rapidité.
Un design ludique et minimaliste, aux couleurs vives, aux formes arrondies, aux bordures 3D tactiles et aux illustrations accueillantes, pour des interfaces accessibles.
La vidéo asynchrone avec Loom. Couleur primaire violette, surfaces accueillantes et mise en page axée sur la vidéo. Un style épuré et professionnel, sans paraître institutionnel.
Créateur full-stack basé sur l’IA. Dégradés ludiques et esthétique conviviale pour les développeurs.
Une esthétique sombre haut de gamme, avec des titres affirmés, une palette monochrome et un rendu raffiné, pour les expériences de marques de luxe.
Réseau mondial de paiement. Fond crème chaleureux, formes oblongues évoquant des orbites et chaleur éditoriale.
Material Design de Google, avec des surfaces superposées, des thèmes dynamiques, des animations intégrées et des modèles adaptatifs multiplateformes.
Boutique de produits technologiques. Photographie au premier plan, surfaces claires ou sombres et appels à l’action bleu Meta.
Un design épuré qui privilégie les espaces blancs, une typographie nette et une palette sobre, pour une clarté et une concentration maximales.
Fournisseur de modèles d’IA. Interface sombre et affirmée, rehaussée d’accents néon.
Plateforme de documentation. Design épuré, touches de vert et confort de lecture optimisé.
Collaboration visuelle. Accent jaune vif et esthétique de canevas infini.
Surveillance de missions spatiales et aérospatiales. Centre de contrôle sombre, télémétrie ambrée et précision monospace. La clarté fonctionnelle avant tout.
Fournisseur de LLM à poids ouverts. Minimalisme de conception française, dans des tons violets.
Un style éditorial contemporain, avec une typographie à empattements, des palettes minimalistes et des mises en page épurées pour des produits numériques soignés.
Base de données documentaire. Identité visuelle au feuillage vert, axée sur la documentation destinée aux développeurs.
Un design inspiré de la matrice, dominé par les caractères monospace, avec des éléments très contrastés, une densité compacte et une esthétique hacker chic.
Une interprétation moderne du brutalisme, avec des bordures épaisses, des couleurs d’accent vives et des mises en page brutes et très contrastées sur des surfaces chaleureuses.
Des effets de lueur néon électriques et des associations de couleurs très contrastées pour des interfaces audacieuses qui captent l’attention.
Des éléments d’interface doux et en relief, avec des ombres internes et externes sur des surfaces monochromes, pour un aspect tactile et intégré.
Un style par défaut épuré, axé sur le produit. À choisir lorsque le brief ne demande pas d’ambiance particulière : idéal pour les outils B2B, les tableaux de bord et les pages utilitaires.
Commerce de vêtements et d’équipements sportifs. Interface monochrome, typographie massive en capitales et photographies bord à bord.
Espace de travail tout-en-un. Minimalisme chaleureux, titres à empattements et surfaces douces.
Calcul sur GPU. Une énergie verte et noire, à l’esthétique technique et puissante.
Exécutez des LLM en local. Priorité au terminal et simplicité monochrome.
Plateforme de programmation assistée par l’IA. Thème sombre axé sur les développeurs.
Un design inspiré des salles d’arcade rétro, avec des polices pixelisées, des bordures pointillées, des couleurs ludiques et contrastées et une esthétique de jeu 8 bits.
Un design texturé comme du papier et inspiré de l’imprimé, avec peu de couleurs, une typographie nette à empattements ou sans empattements et des surfaces tactiles.
Moteur de recherche conversationnel basé sur l’IA. Fond très sombre, typographie incisive, accent violet unique et hiérarchie dense de l’information.
Un design qui crée de la profondeur spatiale grâce à des vues isométriques, des points de fuite et des éléments superposés qui guident le regard dans un réalisme tridimensionnel.
Découverte visuelle. Accent rouge, grille en mosaïque et images au premier plan.
Boutique de consoles de jeu. Mise en page articulée autour de trois surfaces, typographie d’affichage discrète et assurée, et agrandissement au survol avec accent cyan.
Analytique produit. Identité ludique avec un hérisson et interface sombre pensée pour les développeurs.
Une esthétique haut de gamme inspirée d’Apple, avec un espacement précis, une typographie moderne et un langage visuel raffiné et soigné.
Un design soigné, prêt pour l’entreprise, avec une typographie moderne, des mises en page structurées et une identité visuelle qui inspire confiance.
Un langage visuel inspiré de l’imprimé pour les livres, les magazines et les rapports, avec des grilles éditoriales et une typographie expressive.
Lanceur de productivité. Interface sombre élégante, rehaussée d’accents dégradés éclatants.
Un style moderne et minimaliste soigneusement composé, avec une élégante typographie à empattements et des palettes sobres et sophistiquées.
Automobile française. Dégradés d’aurores boréales éclatants, typographie NouvelR et énergie affirmée.
Exécutez des modèles de ML via API. Fond blanc épuré, code au premier plan.
E-mail API. Thème sombre minimaliste, rehaussé d’accents monospace.
Un design nostalgique, avec une typographie d’inspiration vintage, des palettes rétro très contrastées et des éléments visuels évocateurs du passé.
Génération de vidéos par IA. Interface sombre cinématographique et mise en page riche en médias.
CMS headless. Accent rouge et mise en page éditoriale axée sur le contenu.
Surveillance des erreurs. Tableau de bord sombre et dense en données, avec des accents roses et violets.
Un design inspiré de Shadcn/ui, avec des composants minimalistes et épurés, une palette monochrome et des modèles privilégiant les utilitaires.
Plateforme de commerce électronique. Esthétique cinématographique dominée par les tons sombres, accent vert néon et typographie ultralégère.
Un design direct et sans fioritures, avec une typographie claire, des couleurs neutres et des mises en page intuitives qui s’effacent au profit du contenu.
Imitation du monde réel avec des surfaces texturées, des effets 3D et des métaphores physiques familières pour créer des interfaces numériques intuitives.
Plateforme de communication professionnelle. Palette principale aubergine, logo aux multiples accents, surfaces claires et barre latérale sombre, ambiance chaleureuse et accessible.
Esthétique minimaliste moderne aux lignes épurées, palette de couleurs réfléchie, interactions discrètes et espacement cohérent.
Technologie spatiale. Noir et blanc tranchés, images pleine page, esthétique futuriste.
Espaces blancs généreux, marges intérieures cohérentes et mises en page en grille pour des interfaces épurées, lisibles et aérées.
Streaming musical. Vert éclatant sur fond sombre, typographie audacieuse, visuels centrés sur les pochettes d’album.
Marque mondiale de vente de café. Palette de verts à quatre niveaux, fond crème chaleureux, boutons entièrement arrondis.
Un design axé sur la narration, qui s’appuie sur les visuels, les textes et les interactions pour guider les utilisateurs dans des parcours captivants et chargés d’émotion.
Alternative open source à Firebase. Thème émeraude sombre, priorité au code.
Client de messagerie rapide. Interface sombre haut de gamme, priorité au clavier, lueur violette.
Design inspiré des jeux de blocs classiques, avec des couleurs ludiques, des polices d’affichage audacieuses et des mises en page compactes et dynamiques.
Média éditorial spécialisé en technologie. Accents vert menthe acide et ultraviolet, police d’affichage Manuka, vignettes d’articles façon affiche rave.
Infrastructure d’IA open source. Design technique inspiré des plans d’architecte.
Système de design éditorial et technique. Fond neutre, accent vermillon unique, angles vifs, typographie Geist, ombres marquées et composition structurée.
Surface : web. Un système sombre, cosmique et haut de gamme, aux effets de verre, qui restitue l’émerveillement saisissant d’une éclipse solaire — surfaces d’obsidienne, reflets ambrés de « couronne » et accents cyan atmosphériques.
Terminal de trading financier à la Bloomberg. Exclusivement sombre, riche en données, avec des signaux d’achat et de vente cyan et corail. Tout doit rester lisible d’un coup d’œil à deux mètres de distance.
Plateforme de mobilité. Noir et blanc audacieux, typographie resserrée, énergie urbaine.
Déploiement frontend. Précision du noir et blanc, police Geist.
Design vivant et coloré, typographie ludique et audacieuse, accents chaleureux et énergie visuelle dynamique.
Nostalgie des années 1950 à 1990, touches de skeuomorphisme, textures granuleuses, palettes rétro et typographie façon pixel.
Marque mondiale de télécommunications. Titres monumentaux en capitales, bandeaux de chapitre Vodafone Red.
Framework d’agent IA. Fond noir absolu, accent émeraude, esthétique native du terminal.
Une esthétique de magazine dominée par les sérifs. Accent terre cuite sur un papier blanc cassé chaleureux — idéal pour les contenus longs, les projets éditoriaux et les pages marketing axées sur la marque.
Terminal moderne. Interface sombre inspirée des IDE, commandes présentées sous forme de blocs.
Plateforme de collaboration. Typographie Momentum, système d’actions bleu, spectre d’accents multicolores pour les utilisateurs.
Créateur de sites web visuel. Esthétique soignée de site marketing, rehaussée d’accents bleus.
Langage visuel de marque pour les mini-programmes WeChat, les comptes officiels et les extensions de son écosystème ouvert.
Magazine technologique. Mise en page dense de journal sur fond blanc, titres en sérif personnalisés, intertitres en police monospace, liens bleu encre.
Laboratoire d’IA d’Elon Musk. Monochrome tranché, minimalisme futuriste.
Réseau social de contenu créé par les utilisateurs, consacré au mode de vie. Rouge de marque unique, grands rayons d’arrondi, priorité au contenu.
Plateforme d’automatisation. Orange chaleureux, illustrations conviviales au premier plan.
Aucun système correspondant. Essayez un autre nom ou une autre catégorie.
De la référence à l’interface
Ne vous limitez pas à la couleur d’accent. Comparez la typographie, l’espacement, les composants et la mise en page avec le type d’interface que vous créez.
Donnez à votre agent les règles de design et une tâche précise. Conservez la source et les contraintes existantes de votre projet au même endroit.
Vérifiez le contenu réel, les états des composants, l’utilisation au clavier et l’affichage sur un écran étroit avant d’appliquer cette orientation à l’ensemble de votre projet.
Votre propre langage visuel
Partez d’un site qui vous inspire ou d’un design déjà créé. Transformez ses choix visuels en un système à examiner, affiner et réutiliser.

Ajoutez un lien dans Design Systems. OpenDesign lit les styles et ressources accessibles pour organiser la palette, la typographie et les règles réutilisables. Examinez le résultat et affinez-le avec votre Agent.
Dans le menu Plus du projet, choisissez Créer un système de design. OpenDesign crée un nouveau projet à partir des fichiers existants, puis votre Agent en extrait les règles visuelles, composants et motifs récurrents.
Examinez les règles, les tokens de style et les aperçus UI. Affinez le package généré avant de l’utiliser comme point de départ pour votre prochain design.
Reliez votre workflow
Comparez OpenDesign à d’autres outils et choisissez un workflow adapté à votre façon de créer et d’itérer.
Comparer les outilsAgentDécouvrez des guides pour les agents de programmation, de la préparation du brief à la revue de l’interface.
Voir les guides AgentSkillsExplorez des Skills réutilisables pour des tâches de design ciblées et donnez une méthode plus précise à votre Agent.
Explorer les SkillsCréez avec OpenDesign
Choisissez un guide, donnez des consignes claires à votre agent et créez votre prochaine interface avec OpenDesign.