# Sistema di design Orange OUDS Web ## Anteprima dell’interfaccia del sistema di design Orange OUDS Web Esamina ogni pannello nativo, conserva una scelta locale e cambia l’aspetto. ## Riferimento di progettazione del sistema di design Orange OUDS Web Sorgente di @ouds/web-orange e @ouds/web-common 1.4.0 bloccata a una versione specifica, con le scelte di layout originali indicate separatamente. ### Ruoli semantici dei colori chiari | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bs-color-action-enabled | #000 | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-action-selected | #f15e00 | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-action-hover | rgba(0, 0, 0, 0.68) | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-action-pressed | #f15e00 | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-bg-primary | #fff | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-bg-secondary | #f4f4f4 | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-border-default | rgba(0, 0, 0, 0.2) | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-always-black | #000 | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | | --bs-color-always-white | #fff | Le prime dichiarazioni, per l’aspetto chiaro, del preset Orange 1.4. L’aspetto scuro risolve i propri valori tramite data-bs-theme, anziché riutilizzare questa tabella come insieme di colori letterali. | ### Scala degli spazi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bs-space-scaled-none | 0px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-3xsmall | 2px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-2xsmall | 4px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-xsmall | 8px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-small | 12px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-medium | 16px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-large | 24px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-xlarge | 32px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-2xlarge | 40px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | | --bs-space-scaled-3xlarge | 48px | Scala degli spazi effettivamente esportata. La composizione originale delle schede di confronto sceglie spaziature di 24px usando questi valori. | ### Ruoli tipografici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bs-font-sans-serif | "HelvNeueOrange", "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | | --bs-font-size-display-large | 2.5rem | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | | --bs-font-size-heading-large | 1.5rem | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | | --bs-font-size-body-large | 1rem | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | | --bs-font-size-body-medium | 0.875rem | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | | --bs-font-size-body-small | 0.75rem | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | | --bs-font-line-height-body-large | 1.5 | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | | --bs-font-line-height-body-medium | 1.4285714286 | Dichiarazioni pubblicate per font e tipografia. Lo studio incorporato usa il fallback esplicito Arial, non i file del font HelvNeueOrange con marchio. | ### Valori predefiniti di Offcanvas | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bs-offcanvas-zindex | 1045 | Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra. | | --bs-offcanvas-width | 400px | Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra. | | --bs-offcanvas-height | 30vh | Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra. | | --bs-offcanvas-transition | transform 0.3s ease-in-out | Valori predefiniti del componente nativo. Il pannello originale imposta la larghezza a 440px, mentre la regola max-width nativa lo mantiene entro i limiti della finestra. | ### Contratti nativi per pannelli e pulsanti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Brand action | .btn.btn-brand | La variante Orange effettiva; non dare per scontato che .btn-primary di Bootstrap a monte abbia lo stesso significato. | | Default action | .btn.btn-default | L’effettivo stile secondario/predefinito usato per cambiare aspetto e cancellare la scelta locale. | | Open trigger | data-bs-toggle="offcanvas" / data-bs-target | Gli attributi data API nativi aprono il pannello condiviso da ciascun pulsante dei piani originali. | | Content event | show.bs.offcanvas / event.relatedTarget | Leggi il piano selezionato dal trigger prima di visualizzare il contenuto del pannello. | | Close API | oudsWeb.Offcanvas.getInstance(element).hide() | Chiudi l’istanza nativa esistente dopo una scelta locale. | | Theme | data-bs-theme="light" or "dark" | Modifica le variabili effettive del tema senza ricreare lo stato del confronto. | ## Guida completa al sistema di design Orange OUDS Web Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Pacchetti e struttura dei temi di Orange OUDS nel sistema di design Orange OUDS Web ### Installa insieme i pacchetti common e Orange > OUDS Web 1.4.0 separa il comportamento condiviso dal tema con marchio. L’esempio installa @ouds/web-common e @ouds/web-orange alla stessa versione. Il pacchetto Orange fornisce CSS compilato, mentre il pacchetto common fornisce il browser JavaScript incluso. Il documento principale importa entrambi i percorsi espliciti, così la guida non lascia il lettore con un comando per il pacchetto e una pagina statica priva di stile. - @ouds/web-orange fornisce il tema Orange CSS. - @ouds/web-common fornisce JavaScript condiviso. - In questo esempio entrambi i pacchetti sono bloccati alla versione 1.4.0. ### Considera OUDS come un contratto di componenti a sé OUDS si basa su Bootstrap, ma questa derivazione non rende ogni classe a monte un sostituto diretto. Questa versione usa btn-brand, btn-default e altre varianti denominate. Il confronto fornito usa queste classi effettive e gli attributi data nativi di Offcanvas. Per una migrazione occorre confrontare sia il markup sia i valori del tema, invece di limitarsi a cambiare l’URL di un foglio di stile. ## Ruoli semantici di colore e tipografia di Orange OUDS nel sistema di design Orange OUDS Web ### Usa le variabili semantiche installate Le schede originali usano color-bg-primary e color-border-default. L’accento stretto dell’intestazione segue color-action-selected, che nelle dichiarazioni per l’aspetto chiaro corrisponde a #f15e00. Il tema scuro modifica questi ruoli tramite data-bs-theme sull’elemento radice. La guida riporta quindi i valori chiari con il relativo ambito e lascia che sia il runtime a selezionare l’aspetto corretto, anziché presentare un singolo codice esadecimale arancione come se rappresentasse l’intero sistema di design. ### Specifica chiaramente la tipografia Il pacchetto inserisce HelvNeueOrange all’inizio della propria pila di font. Questo studio incorporato localmente rimuove le dichiarazioni font-face inutilizzate e usa Arial come fallback esplicito. La tabella illustra comunque la famiglia effettiva pubblicata e i ruoli tipografici del testo. Il caricamento di CSS dei componenti non dimostra che il carattere tipografico con marchio sia stato caricato; un progetto che adotta quel font deve gestirne esplicitamente le risorse. ## Schede di confronto e contenuti di Orange OUDS nel sistema di design Orange OUDS Web ### Dai al confronto una struttura decisionale concreta Le tre schede mostrano quantità di dati fittizie, una breve descrizione dell’utilizzo e un’azione per esaminare i dettagli. Ogni scheda contiene testo completo, non uno screenshot di righe segnaposto. Sono contenuti originali per lo studio, non prodotti, prezzi o contratti Orange attuali. Escludere i prezzi da questo esercizio di progettazione evita anche di suggerire che si tratti di un’offerta acquistabile o di un flusso di pagamento. ### Mantieni coerente l’allineamento delle schede ripetute La composizione desktop usa tre colonne di griglia uguali e schede con layout flex a colonna, così le azioni di esame dei dettagli si allineano in basso. A 720px passa a una sola colonna con altezza naturale. Le classi native dei pulsanti forniscono gli stati effettivi delle azioni; la griglia circostante, la spaziatura interna di 24px e l’ordine dei contenuti sono scelte originali dell’applicazione visibili nel CSS fornito. ## Composizione nativa Offcanvas di Orange OUDS nel sistema di design Orange OUDS Web ### Popola il pannello a partire dal relativo trigger Ogni pulsante per esaminare i dettagli punta allo stesso Offcanvas #details e contiene un piccolo indice data-plan. L’evento show.bs.offcanvas espone relatedTarget, che seleziona il titolo, la descrizione e l’elenco di caratteristiche originali corrispondenti prima di mostrare il pannello. L’elenco viene creato con textContent ed elementi di lista reali, mantenendo i dati separati dal markup. Il titolo del pannello è associato tramite aria-labelledby. ### Lascia al runtime nativo la gestione dell’apertura e della chiusura L’attributo data API gestisce apertura, sfondo, tasto Escape e comportamento del focus. Dopo una scelta locale, il gestore usa oudsWeb.Offcanvas.getInstance(drawer).hide() per chiudere l’istanza esistente. Non rimuove una classe CSS lasciando attivi il blocco del focus o lo sfondo. Il test attende la fine della transizione prima di controllare il ripristino del focus, perché la chiusura asincrona fa parte del contratto del componente. ## Scelta locale e ripristino in Orange OUDS nel sistema di design Orange OUDS Web ### Descrivi l’azione realmente eseguita Questa scelta locale memorizza solo il piano fittizio selezionato e mostra la selezione sotto le schede. Il messaggio specifica chiaramente che non è stato effettuato alcun ordine. Una nuova scelta sostituisce quella precedente; cancellandola, il messaggio scompare e il focus torna al primo pulsante per esaminare i dettagli. Non viene inviato nulla a un account, a un carrello o a un servizio di pagamento. ### Mantieni l’aspetto distinto dalla selezione L’azione per passare dall’aspetto chiaro a quello scuro, o viceversa, modifica l’attributo del tema sull’elemento radice e l’etichetta della propria azione. Conserva la scelta locale attuale e i contenuti delle tre schede. È una distinzione utile quando si testa un tema: una modifica visiva non dovrebbe reimpostare silenziosamente il confronto in corso dell’utente. Lo studio usa CSS nativo in entrambi gli aspetti; solo la composizione esterna è fornita dall’applicazione. ## Comportamento da tastiera e su schermi stretti di Orange OUDS nel sistema di design Orange OUDS Web ### Assegna un nome alle azioni di chiusura e di esame Ogni azione delle schede include il nome del piano e il pulsante nativo di chiusura, composto dalla sola icona, ha l’etichetta accessibile esplicita «Chiudi i dettagli». Il pannello ha tabindex e un titolo etichettato, per consentire la gestione del focus tramite l’implementazione nativa. I test aprono il pannello Explore, lo chiudono con Escape e verificano che il focus torni al trigger prima di passare a un’altra scheda. ### Mantieni il pannello entro i limiti effettivi della finestra L’applicazione imposta la larghezza del pannello a 440px, ma la regola max-width nativa di Offcanvas lo mantiene entro i limiti di una finestra stretta. Le schede si dispongono in colonna e la spaziatura esterna si riduce sugli schermi piccoli. L’esempio è stato verificato a larghezze di 280px, 390px, tablet e desktop dopo aver selezionato un piano e cambiato l’aspetto, non solo nello stato iniziale. ## Integrazione statica completa di Orange OUDS nel sistema di design Orange OUDS Web ### Usa l’esempio completo composto da tre file Salva orange-index.html come index.html e tieni orange.css e orange-app.js nella stessa cartella. Installa i due pacchetti con versione bloccata e avvia il server nella directory. HTML include entrambi i percorsi degli asset nativi, tutti i contenuti delle schede, la struttura del drawer e lo script dell’applicazione. Non serve alcun wrapper React, scaffold mancante o SDK inventato per riprodurre questa composizione nel browser. 1. Salva insieme tutti e tre i file forniti. 2. Installa entrambi i pacchetti OUDS corrispondenti. 3. Avvia il server nella cartella e controlla ogni scheda. 4. Verifica Escape, il ripristino del focus, la cancellazione locale e entrambe le modalità di visualizzazione. ### Mantieni codice e asset sulla stessa release Se cambi versione, verifica insieme le varianti dei pulsanti, il namespace dei dati API, i nomi degli eventi e le variabili del tema. CSS di una release e script di un’altra possono sembrare corretti finché un’interazione non rivela l’incompatibilità. La versione fornita è un riferimento concreto e testato, non la garanzia che qualsiasi combinazione futura di pacchetti si comporti allo stesso modo. ## Orange OUDS Web Esempi di componenti del sistema di design ### orange-index.html Markup completo e importazioni native di CSS/JavaScript. ``` Bundle comparison study

OUDS WEB / ORIGINAL COMPARISON STUDY

Choose room for your day

Three fictional mobile-data bundles for inspecting Orange-themed cards, buttons and a native detail drawer. These are not commercial offers.

Everyday

8 GB

For messages, maps and occasional listening.

Explore

25 GB

More room for podcasts and a longer journey.

Create

60 GB

A larger sample allowance for sharing on the move.

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.

``` Riferimento del codice - Salva orange-index.html come index.html e lascia invariati i nomi degli altri due file. ### orange.css Disposizione originale e responsiva delle schede, con fallback del font esplicito. ``` *{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:4px solid var(--bs-color-action-selected);padding-bottom:24px}h1{font-size:36px;line-height:1.15;margin:12px 0}.scope{font-size:14px;line-height:1.6;max-width:75ch}.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}.plan{display:flex;flex-direction:column;border:1px solid var(--bs-color-border-default);padding:24px;background:var(--bs-color-bg-primary)}.plan h2{font-size:24px}.amount{font-size:40px;font-weight:700;line-height:1.2;margin:24px 0}.plan p{line-height:1.6}.plan .btn{margin-top:auto}.fine{font-size:13px;line-height:1.6;margin-top:24px}.offcanvas{--bs-offcanvas-width:440px}.offcanvas-header,.offcanvas-body{padding:24px}.offcanvas-header{gap:16px}.offcanvas-title{font-size:24px}.offcanvas-body p,.offcanvas-body li{line-height:1.6}.offcanvas-body ul{padding-left:24px}.offcanvas-body li{margin:12px 0}#selected{padding:24px;border:1px solid var(--bs-color-border-default);margin-top:24px}#selected p{margin:0}#selected .btn{margin-top:16px}@media(max-width:720px){main{padding:16px}.plans{grid-template-columns:1fr}.plan{padding:24px}.amount{margin:16px 0}.plan .btn{margin-top:16px}}[hidden]{display:none!important} ``` Riferimento del codice - Salva orange-index.html come index.html e lascia invariati i nomi degli altri due file. ### orange-app.js Gestione nativa degli eventi del drawer e stato locale della selezione e del tema. ``` 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'}); ``` Riferimento del codice - Salva orange-index.html come index.html e lascia invariati i nomi degli altri due file. ## Orange OUDS Web Configurazione dell’agente AI del sistema di design ### Punto di partenza per l’implementazione Apri http://localhost:8000/. Usa asset nativi compilati e non richiede una build Sass. ``` npm init -y npm install @ouds/web-common@1.4.0 @ouds/web-orange@1.4.0 # Save index.html, orange.css and orange-app.js from the supplied examples. python3 -m http.server 8000 ``` ### Un prompt per il tuo progetto ``` Implementa lo studio comparativo completo di OUDS Web 1.4, con i pacchetti common/Orange corrispondenti, le varianti reali btn-brand e btn-default, gli eventi nativi di Offcanvas e API, la risoluzione dei token per le modalità chiara e scura e il fallback esplicito ad Arial. Mantieni fittizi tutti i contenuti dei bundle e fai sì che la selezione resti strettamente locale. ``` ## Orange OUDS Web Fonti e ambito del sistema di design Runtime effettivi di OUDS Web CSS e Offcanvas, con bundle fittizi originali OpenDesign e selezione locale. Il fallback ad Arial è esplicito; non viene rappresentata alcuna offerta commerciale né alcun ordine. - Installazione Configurazione corrispondente dei pacchetti common e del tema. - Offcanvas Struttura del drawer, eventi e API. - Pulsanti Varianti e stati specifici di OUDS. - JavaScript Comportamento del runtime e limiti dell’integrazione. ## Orange OUDS Web Risorse correlate al sistema di design ### Palantir Blueprint Crea un’area di lavoro dati ad alta densità con Blueprint: token verificati per tipografia e intenti, tabella dati selezionabile, pannello di revisione e codice sorgente completo in React. ### Pega Bolt Esplora il sistema di contenuti di Bolt con marchio Pega: tipografia fluida, spaziature orizzontali e verticali separate e composizione di un accordion Twig per una pagina editoriale di risorse. ### Porsche sistema di design Esplora Porsche Design System v4 con spaziature fluide, schemi cromatici CSS, tipografia Porsche Next e un configuratore a due opzioni. Il riferimento include espressioni reali dei token e un entry point Vite completo che usa gli eventi attuali di segmented-control. - [Riferimento per l’implementazione](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Fonte](https://cdn.jsdelivr.net/npm/@ouds/web-orange@1.4.0/dist/css/ouds-web.css) - [Fonte](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Riferimento del codice](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/introduction/) - [Installazione Configurazione corrispondente dei pacchetti common e del tema.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/download/) - [Offcanvas Struttura del drawer, eventi e API.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/offcanvas/) - [Pulsanti Varianti e stati specifici di OUDS.](https://web.unified-design-system.orange.com/orange/docs/1.4/components/buttons/) - [JavaScript Comportamento del runtime e limiti dell’integrazione.](https://web.unified-design-system.orange.com/orange/docs/1.4/getting-started/javascript/)