Design de produits d’entreprise · Nouvelle ressource
Système de design Orange OUDS Web.
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.
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-action-selected
#f15e00
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-action-hover
rgba(0, 0, 0, 0.68)
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-action-pressed
#f15e00
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-bg-primary
#fff
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-bg-secondary
#f4f4f4
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-border-default
rgba(0, 0, 0, 0.2)
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-always-black
#000
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
--bs-color-always-white
#fff
Premières déclarations, correspondant au thème clair, du préréglage Orange 1.4. Le thème sombre résout ses propres valeurs via data-bs-theme au lieu de réutiliser ce tableau comme couleurs littérales.
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
--bs-font-size-display-large
2.5rem
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
--bs-font-size-heading-large
1.5rem
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
--bs-font-size-body-large
1rem
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
--bs-font-size-body-medium
0.875rem
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
--bs-font-size-body-small
0.75rem
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
--bs-font-line-height-body-large
1.5
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
--bs-font-line-height-body-medium
1.4285714286
Déclarations publiées des polices et des styles typographiques. L’étude intégrée utilise explicitement Arial comme solution de repli, et non les fichiers de police HelvNeueOrange de la marque.
Valeurs par défaut du composant natif. Le panneau latéral d’origine remplace la largeur par 440px, tandis que la règle native de largeur maximale le maintient dans les limites de la fenêtre.
--bs-offcanvas-width
400px
Valeurs par défaut du composant natif. Le panneau latéral d’origine remplace la largeur par 440px, tandis que la règle native de largeur maximale le maintient dans les limites de la fenêtre.
--bs-offcanvas-height
30vh
Valeurs par défaut du composant natif. Le panneau latéral d’origine remplace la largeur par 440px, tandis que la règle native de largeur maximale le maintient dans les limites de la fenêtre.
--bs-offcanvas-transition
transform 0.3s ease-in-out
Valeurs par défaut du composant natif. Le panneau latéral d’origine remplace la largeur par 440px, tandis que la règle native de largeur maximale le maintient dans les limites de la fenêtre.
Structure des packages et du thème du système de design Orange OUDS Orange OUDS Web
Installer ensemble les packages commun et Orange
OUDS Web 1.4.0 sépare le comportement partagé du thème de marque. L’exemple installe @ouds/web-common et @ouds/web-orange dans la même version. Le package Orange fournit le CSS compilé, tandis que le package commun fournit le JavaScript navigateur intégré. Le document racine importe les deux chemins explicites : le guide ne laisse donc pas le lecteur avec une commande d’installation et une page statique sans style.
@ouds/web-orange fournit le CSS du thème Orange.
@ouds/web-common fournit le JavaScript partagé.
Dans cet exemple, les deux packages sont épinglés à la version 1.4.0.
Considérer OUDS comme un contrat de composants à part entière
OUDS repose sur Bootstrap, mais cette filiation ne signifie pas que toutes les classes en amont sont directement interchangeables. Cette version utilise btn-brand, btn-default et d’autres variantes nommées. La comparaison fournie utilise ces classes réelles et les attributs de données natifs d’Offcanvas. Une migration doit comparer le balisage et les valeurs du thème, plutôt que de simplement remplacer l’URL d’une feuille de style.
Rôles sémantiques des couleurs et de la typographie du système de design Orange OUDS Orange OUDS Web
Utiliser les variables sémantiques installées
Les cartes d’origine utilisent color-bg-primary et color-border-default. L’accent discret de l’en-tête suit color-action-selected, qui prend la valeur #f15e00 dans les déclarations du thème clair. Le thème sombre modifie ces rôles via data-bs-theme sur l’élément racine. Le guide consigne donc les valeurs du thème clair avec leur portée et laisse l’environnement d’exécution choisir l’apparence appropriée, au lieu de présenter un code hexadécimal orange comme s’il résumait tout le design system.
Préciser les choix typographiques
Le package place HelvNeueOrange en premier dans sa liste de polices. Cette étude intégrée supprime les déclarations font-face inutilisées et utilise explicitement Arial comme solution de repli. Le tableau décrit néanmoins la famille et les rôles typographiques du corps de texte réellement publiés. Le chargement du CSS de composants ne prouve pas que la police de marque est chargée ; un projet qui adopte cette police doit gérer ses fichiers de polices de manière adaptée.
Cartes comparatives et contenu du système de design Orange OUDS Orange OUDS Web
Donner à la comparaison une véritable structure de décision
Les trois cartes présentent des volumes de données fictifs, une brève description de l’usage et une action d’inspection. Chacune contient un texte complet plutôt qu’une capture d’écran de lignes de remplacement. Il s’agit de contenu original créé pour l’étude, et non d’offres, de tarifs ou de contrats Orange actuels. L’absence de prix dans cet exercice de conception évite également de laisser croire qu’il s’agit d’une offre achetable ou d’un parcours de commande.
Conserver un alignement cohérent au bas des cartes répétées
La composition pour ordinateur de bureau utilise trois colonnes de grille de largeur égale et des cartes en flex-column, ce qui permet d’aligner les actions d’inspection en bas. À 720px, elle passe sur une seule colonne à hauteur naturelle. Les classes de bouton natives fournissent les états d’action réels ; la grille environnante, le padding de 24px et l’ordre du contenu relèvent des choix d’application d’origine visibles dans le CSS fourni.
Composition native Offcanvas du système de design Orange OUDS Orange OUDS Web
Remplir le panneau latéral à partir de son déclencheur
Chaque bouton d’inspection pointe vers le même Offcanvas #details et contient un petit index data-plan. L’événement show.bs.offcanvas expose relatedTarget, qui permet de sélectionner le titre, la description et la liste de caractéristiques d’origine correspondants avant l’affichage du panneau latéral. La liste est créée avec textContent et de véritables éléments de liste, afin de séparer les données du balisage. Le titre du panneau latéral est associé via aria-labelledby.
Laisser l’environnement d’exécution natif gérer l’ouverture et la fermeture
Choix local et rétablissement dans le système de design Orange OUDS Orange OUDS Web
Décrire l’action réellement effectuée
Ce choix local mémorise uniquement le forfait fictif sélectionné et affiche ce choix sous les cartes. Le message précise explicitement qu’aucune commande n’a été passée. Un nouveau choix remplace le précédent ; l’effacement masque le message et redonne le focus au premier bouton d’inspection. Aucune information n’est envoyée à un compte, un panier ou un service de paiement.
Dissocier l’apparence de la sélection
L’action de bascule entre les thèmes clair et sombre modifie l’attribut de thème racine ainsi que son propre libellé. Elle conserve le choix local en cours et le contenu des trois cartes. Cette distinction est utile pour tester un thème : un changement visuel ne doit pas réinitialiser silencieusement la comparaison en cours de l’utilisateur. L’étude utilise le CSS natif dans les deux apparences ; seule la composition extérieure est fournie par l’application.
Système de design Orange OUDS Web Orange OUDS — comportement au clavier et sur écran étroit
Nommer les actions de fermeture et d’inspection
Chaque action de carte inclut le nom du forfait, et le bouton natif de fermeture, uniquement composé d’une icône, porte le libellé accessible explicite « Fermer les détails ». Le panneau latéral possède un attribut tabindex et un titre étiqueté afin que la gestion du focus fonctionne avec l’implémentation native. Les tests ouvrent le panneau Explorer, le ferment avec Échap et vérifient que le focus revient à son déclencheur avant de passer à une autre carte.
Conserver le panneau latéral dans les limites de la fenêtre visible
L’application choisit une largeur de panneau de 440px, mais la règle max-width native d’Offcanvas le maintient dans les limites d’une fenêtre étroite. Les cartes s’empilent et le remplissage extérieur diminue sur les petits écrans. L’exemple a été vérifié aux largeurs de 280px, 390px, tablette et ordinateur, après la sélection d’un forfait et le changement d’apparence, et pas seulement dans son état initial.
Système de design Orange OUDS Web Orange OUDS — intégration statique complète
Utiliser l’exemple complet en trois fichiers
Enregistrez orange-index.html sous le nom index.html et placez orange.css et orange-app.js à côté. Installez les deux packages épinglés et servez le répertoire. Le fichier HTML inclut les deux chemins d’accès aux ressources natives, tout le contenu des cartes, la structure du panneau latéral et le script de l’application. Aucun wrapper React, échafaudage manquant ou SDK inventé n’est nécessaire pour reproduire cette composition dans le navigateur.
Placez ensemble les trois fichiers fournis.
Installez les deux packages OUDS correspondants.
Servez le dossier et inspectez chaque carte.
Testez Échap, le retour du focus, l’effacement local et les deux apparences.
Conserver le code et les ressources de la même version
En cas de changement de version, vérifiez ensemble les variantes de bouton, l’espace de noms des données API, les noms des événements et les variables de thème. Des fichiers CSS d’une version et des scripts d’une autre peuvent sembler corrects jusqu’à ce qu’une interaction révèle leur incompatibilité. La version fournie constitue une référence concrète et testée, sans garantir que toute combinaison future de packages se comportera de la même façon.
Exemples de composants du système de design Orange OUDS Web
orange-index.html
Balisage complet et imports natifs de CSS/JavaScript.
html
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bundle comparison study</title><link rel="stylesheet" href="./node_modules/@ouds/web-orange/dist/css/ouds-web.min.css"><link rel="stylesheet" href="./orange.css"></head><body><main><header><div><p>OUDS WEB / ORIGINAL COMPARISON STUDY</p><h1>Choose room for your day</h1><p class="scope">Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.</p></div><button id="theme" class="btn btn-default" type="button">Use dark appearance</button></header><div class="plans"><article class="plan"><h2>Everyday</h2><p class="amount">8 GB</p><p>For messages, maps and occasional listening.</p><button class="btn btn-brand" data-plan="0" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Everyday</button></article><article class="plan"><h2>Explore</h2><p class="amount">25 GB</p><p>More room for podcasts and a longer journey.</p><button class="btn btn-brand" data-plan="1" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Explore</button></article><article class="plan"><h2>Create</h2><p class="amount">60 GB</p><p>A larger sample allowance for sharing on the move.</p><button class="btn btn-brand" data-plan="2" data-bs-toggle="offcanvas" data-bs-target="#details" aria-controls="details">Inspect Create</button></article></div><section id="selected" hidden><p role="status" id="selection-message"></p><button id="clear" class="btn btn-default">Clear local choice</button></section><p class="fine">OUDS Web 1.4.0 native CSS and Offcanvas runtime; original sample content and local selection. Arial fallback is used instead of Orange’s branded typeface.</p></main><aside class="offcanvas offcanvas-end" tabindex="-1" id="details" aria-labelledby="drawer-title"><div class="offcanvas-header"><h2 class="offcanvas-title" id="drawer-title">Bundle details</h2><button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close details"></button></div><div class="offcanvas-body"><p id="drawer-description"></p><ul id="features"></ul><p>No account is connected. Keeping a choice changes this preview only.</p><button id="choose" class="btn btn-brand">Keep this local choice</button></div></aside><script src="./node_modules/@ouds/web-common/dist/js/ouds-web.bundle.min.js"></script><script src="./orange-app.js"></script></body></html>
Enregistrez orange-index.html sous le nom index.html ; conservez les deux autres noms tels quels.
orange-app.js
Gestion native des événements du panneau latéral et état local de la sélection et du thème.
javascript
const plans=[["Everyday", "8 GB", "For messages, maps and occasional listening.", ["8 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Explore", "25 GB", "More room for podcasts and a longer journey.", ["25 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]], ["Create", "60 GB", "A larger sample allowance for sharing on the move.", ["60 GB of fictional monthly data", "One original study profile", "No contract, order or payment"]]];let current=0;const drawer=document.querySelector('#details');drawer.addEventListener('show.bs.offcanvas',event=>{current=Number(event.relatedTarget.dataset.plan);const[name,amount,description,features]=plans[current];document.querySelector('#drawer-title').textContent=name+' · '+amount;document.querySelector('#drawer-description').textContent=description;document.querySelector('#features').replaceChildren(...features.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));});document.querySelector('#choose').addEventListener('click',()=>{document.querySelector('#selected').hidden=false;document.querySelector('#selection-message').textContent=plans[current][0]+' is your local preview choice. No order was placed.';oudsWeb.Offcanvas.getInstance(drawer).hide();});document.querySelector('#clear').addEventListener('click',()=>{document.querySelector('#selected').hidden=true;document.querySelector('[data-plan]').focus()});document.querySelector('#theme').addEventListener('click',e=>{let dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance'});
Enregistrez orange-index.html sous le nom index.html ; conservez les deux autres noms tels quels.
04
Configuration de l’agent du système de design Orange OUDS Web
Point de départ de l’implémentation
Ouvrez http://localhost:8000/. Cette méthode utilise des ressources natives compilées et ne nécessite pas de compilation Sass.
sh
npm init -y
npm install @ouds/[email protected] @ouds/[email protected]
# Save index.html, orange.css and orange-app.js from the supplied examples.
python3 -m http.server 8000
Un prompt pour votre projet
Prompt pour l’agent IA
Reproduisez intégralement l’étude comparative OUDS Web 1.4 avec les packages common/Orange correspondants, les variantes réelles btn-brand et btn-default, les événements natifs d’Offcanvas et API, la résolution des tokens clairs/sombres et une solution de repli Arial explicite. Conservez le caractère fictif de tout le contenu des forfaits et limitez strictement la sélection à l’application locale.
05
Sources et périmètre du système de design Orange OUDS Web
Runtime réel d’Offcanvas et CSS d’OUDS Web, avec des forfaits fictifs d’origine OpenDesign et une sélection locale. La solution de repli Arial est explicite ; aucune offre commerciale ni commande n’est représentée.
