Progettazione di prodotti aziendali · Nuova risorsa
Sistema di progettazione Alaska Airlines Auro.
Esplora il tema Alaska di Auro con token semantici reali per colori e tipografia, tipografia basata su classi e il componente nativo per i voli. Due voli originali dimostrano il filtraggio e la selezione locali, senza rappresentare la disponibilità di una compagnia aerea né consentire prenotazioni.
Interpretazione offline originale HTML dei ruoli del tema Alaska e della gerarchia delle informazioni di volo. Nessun runtime Auro nativo, font del brand, inventario in tempo reale o prenotazione. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema sistema di design Alaska Airlines Auro
Tema Alaska pubblico attuale CSS e documentazione dei componenti Auro. Spaziatura e raggio nell’esempio originale sono esplicitamente scelte applicative, poiché non è stata verificata una scala completa e attuale delle primitive. I valori legacy di Auro Classic non sono combinati con il riferimento Alaska.
Sistema di progettazione sistema di design Alaska Airlines Auro — Scegli esplicitamente Alaska prima di comporre la pagina
I temi attuali e quelli di migrazione non sono intercambiabili
Auro supporta Alaska, Hawaiian e Atmos come temi distinti. Alaska Classic mantiene i valori visivi precedenti sotto nomi più recenti per agevolare la migrazione; Auro Classic è deprecato. La voce fornita importa il file Alaska CSS e applica l’attributo aag-theme-as.
Un valore data-aag-theme annidato può cambiare il tema di una sezione. Questa funzionalità è utile per piattaforme condivise, ma non significa che una schermata con i colori Alaska debba adottare senza dichiararlo la tipografia Hawaiian o i valori legacy. L’esempio mantiene un unico tema coerente in tutta l’interfaccia.
Sistema di progettazione sistema di design Alaska Airlines Auro — L’enfasi del brand è diversa dal testo di lettura
Usa il ruolo semantico del primo piano
La fonte attuale dei token Alaska usa #2a2a2a per il testo predefinito e #676767 per il testo attenuato. Il ruolo primario del brand è #01426a, mentre #00274a è la variante più intensa. Sono funzioni diverse, anche quando un titolo e un pulsante occupano la stessa area.
L’esempio usa caratteri di colore neutro scuro per i dettagli del volo e il blu per evidenziare gli elementi interattivi. Gli accenti menta e ciano compaiono nell’illustrazione originale del paesaggio, non come indicatori di stato non documentati. Il volo selezionato è identificato sia dal testo e dallo stato del pulsante, sia dal bordo.
Sistema di progettazione sistema di design Alaska Airlines Auro — Applica le classi tipografiche supportate
Quattro gruppi esprimono funzioni diverse
La guida tipografica attuale di Auro suddivide gli stili in corpo, titoli, display e accenti. Lo stile heading è destinato ai titoli semantici, mentre display si usa per testi visivamente prominenti che non sono titoli nella gerarchia del documento. La guida consiglia classi come body-default e body-lg invece di ricreare tutte le regole tipografiche per ogni elemento.
La fonte Alaska indica AS Circular per il testo del corpo e i titoli, e Good OT per gli accenti. Fornisce inoltre ruoli distinti per il peso e l’interlinea. L’anteprima offline usa la famiglia di fallback documentata, senza fingere che questi font siano disponibili in locale.
Sistema di progettazione sistema di design Alaska Airlines Auro — Il componente flight rappresenta un itinerario strutturato
Trasmetti le informazioni orarie senza perdere l’offset
auro-flight combina le informazioni su partenza, arrivo e tratta con auro-flightline. L’esempio di base accetta un array di etichette del volo, una durata in minuti, due codici di stazione e due date e orari ISO. Il codice fornito conserva gli offset espliciti invece di passare una stringa ambigua con l’ora locale.
I due record originali di esempio usano gli stessi fusi orari di partenza e arrivo, quindi le durate di 150 minuti corrispondono agli orari indicati. Non si tratta di servizi reali. Un itinerario con coincidenza di produzione richiede anche la rappresentazione della tratta documentata; un semplice elenco di etichette non deve suggerire una coincidenza verificata.
Sistema di progettazione sistema di design Alaska Airlines Auro — Mantieni la scelta dell’applicazione al di fuori dei dati di visualizzazione
Un risultato visibile e un risultato selezionato sono stati diversi
L’esempio nativo usa auro-flight per visualizzare ogni record e un normale pulsante per la selezione locale. In questo modo non si inventa un’API di selezione API per il componente di visualizzazione. L’applicazione gestisce l’identificatore selezionato e lo riflette tramite aria-pressed.
Quando cambia il filtro della fascia oraria di partenza, la selezione e il messaggio vengono cancellati. Senza questo passaggio, l’interfaccia potrebbe indicare che un’opzione nascosta è ancora selezionata. L’anteprima chiarisce l’esito: è stato scelto un esempio solo per questa pagina e non è stata effettuata alcuna prenotazione.
Filtra i record originali per fascia oraria di partenza.
Visualizza i dettagli rimanenti del volo senza modificarne i valori.
Seleziona un esempio visibile tramite il suo identificatore stabile.
Sistema di progettazione sistema di design Alaska Airlines Auro — Carica i fondamenti tipografici insieme al codice dei componenti
Token, WCSS ed elementi risolvono problemi diversi
I token di progettazione forniscono i valori. Web Core Style Sheets fornisce stili fondamentali e classi tipografiche. Il pacchetto flight registra l’elemento personalizzato. Installare solo uno di questi componenti non equivale a creare una pagina completa con il brand.
WCSS è una base modulare, non un unico file sorgente per ogni stile possibile. Con v12, il percorso Sass è passato da @import a @use e @forward. L’esempio sceglie il foglio di stile Alaska precompilato e documentato, invece di combinare vecchie istruzioni Sass con la struttura attuale del pacchetto.
Sistema di progettazione sistema di design Alaska Airlines Auro — Usa etichette reali per i controlli e lo stato
Non affidare tutto il risultato al colore
Il filtro ha un’etichetta visibile e ogni azione di selezione ne descrive l’esito. Un’area di stato annuncia in testo l’esempio selezionato. Le informazioni su partenza e arrivo restano comprensibili anche senza la linea decorativa o il paesaggio.
Per un’estensione che raccoglie i dati dei viaggiatori, Auro Input supporta gli slot label e helpText, convalida per impostazione predefinita alla perdita del focus e consente di cambiare questa tempistica tramite validateOnInput o noValidate. La cancellazione reimposta value a undefined. È necessario rispettare questi comportamenti, senza presumere che ogni componente di un modulo restituisca lo stesso valore vuoto.
Mantieni le informazioni su orari e stazioni come testo leggibile.
Etichetta il filtro separatamente dal conteggio dei risultati.
Usa l’area di stato per comunicare una scelta locale effettiva.
Non mostrare uno spinner di caricamento per un aggiornamento immediato dello stato.
Sistema di progettazione sistema di design Alaska Airlines Auro — Registra nomi alternativi solo quando coesistono davvero più versioni
Separa la classe di un componente dalla registrazione globale
L’importazione standard del pacchetto dei voli registra automaticamente auro-flight. La voce /class espone AuroFlight per le chiamate esplicite a register(name), quando più versioni richiedono nomi di elementi personalizzati distinti nello stesso documento. Un nome personalizzato deve includere un trattino.
Questa funzionalità serve a gestire i conflitti, non è necessaria per una normale pagina con una sola versione. Per l’esempio semplice, mantieni il nome predefinito, blocca le dipendenze tramite un lockfile e verifica le migrazioni prima di sostituire una versione principale. Le lacune e i raggi degli angoli dell’anteprima originale restano decisioni applicative: questa pagina non li presenta come primitive Auro verificate.
Alaska Airlines Auro Esempi di componenti del sistema di design
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione offline originale HTML dei ruoli del tema Alaska e della gerarchia delle informazioni di volo. Nessun runtime Auro nativo, font del brand, disponibilità in tempo reale o prenotazione.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Original flight choices</title><style>*{box-sizing:border-box}body{margin:0;color:#2a2a2a;background:#fff;font:16px/1.625 system-ui,-apple-system,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #01426a;outline-offset:4px}header{padding:20px 32px;display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid #ddd}header b{color:#01426a;letter-spacing:2px;font-size:14px}header small{color:#676767}.hero{background:#ebf3f9;position:relative;overflow:hidden}.hero-inner{max-width:1100px;margin:auto;padding:36px 32px 48px;position:relative;z-index:1}.hero h1{font-size:42px;line-height:1.3;font-weight:300;margin:0 0 12px}.hero p{max-width:480px;margin:0;color:#676767}.mountain{position:absolute;right:-20px;bottom:-25px;width:43%;height:180px;background:#cfe0ef;clip-path:polygon(0 100%,35% 10%,55% 55%,75% 0,100% 100%)}.mountain:after{content:'';position:absolute;inset:50px -15px 0 45px;background:#a3cd6a;clip-path:polygon(0 100%,45% 10%,100% 100%)}main{max-width:1100px;margin:auto;padding:32px}.toolbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.toolbar label{display:block;font-size:14px;margin-bottom:8px}select{padding:10px 40px 10px 12px;border:1px solid #959595;border-radius:8px;background:#fff;color:#2a2a2a}#count{font-size:14px;color:#676767;margin:0}.flight{border:1px solid #ddd;border-radius:12px;padding:24px;margin-bottom:16px}.flight.selected{border:2px solid #01426a;padding:23px;background:#f7fbfd}.flight-head{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#676767;margin-bottom:24px}.sample-tag{background:#ebf3f9;color:#01426a;padding:0 8px;border-radius:4px}.flight-body{display:grid;grid-template-columns:1fr 160px 1fr auto;gap:24px;align-items:center}.station b{display:block;font-size:28px;line-height:1.3;font-weight:400}.station span{display:block;font-size:14px;color:#676767}.line{text-align:center;color:#676767;font-size:12px}.line i{display:block;height:1px;background:#00274a;position:relative;margin:12px 0}.line i:before,.line i:after{content:'';width:7px;height:7px;background:#fff;border:1px solid #00274a;border-radius:50%;position:absolute;top:-3px;left:0}.line i:after{left:auto;right:0}.flight button{border:0;border-radius:8px;background:#01426a;color:#fff;padding:12px 20px;white-space:nowrap}.flight button:hover{background:#00274a}.selected button{background:#fff;border:1px solid #01426a;color:#01426a}.summary{background:#ebf3f9;border-left:4px solid #01426a;padding:16px 24px;margin-top:24px}.summary:empty{display:none}footer{font-size:12px;line-height:1.5;color:#676767;margin-top:24px}@media(max-width:700px){header{padding:16px;gap:16px}header small{max-width:140px}.hero-inner{padding:28px 16px 40px}.hero h1{font-size:32px}.hero p{max-width:80%}.mountain{opacity:.45;width:70%}main{padding:24px 16px}.toolbar{gap:16px}.flight{padding:20px}.flight.selected{padding:19px}.flight-body{grid-template-columns:1fr 80px 1fr;gap:12px}.flight button{grid-column:1/-1;width:100%;margin-top:8px}.station b{font-size:22px}.flight-head{font-size:12px}.station span{font-size:12px}select{max-width:185px;padding-right:24px}}
</style><header><b>JOURNEY EXPLORER</b><small>Independent Auro interpretation</small></header><div class="hero"><div class="mountain" aria-hidden="true"></div><div class="hero-inner"><h1>A little closer to your next adventure.</h1><p>Explore two original flight examples and keep a choice for this page session.</p></div></div><main><div class="toolbar"><div><label for="period">Departure period</label><select id="period"><option value="all">All times</option><option value="morning">Morning</option><option value="evening">Evening</option></select></div><p id="count" aria-live="polite"></p></div><section id="results" aria-label="Sample flights"></section><p id="selection" class="summary" role="status"></p><footer>Fictional flights for interface exploration. No real schedule, fare, seat availability or booking. Times use the same sample UTC−07:00 offset. Original landscape artwork.</footer></main><script>const data=[{id:'am',name:'Morning sample',number:'DEMO 01',dep:'08:00',arr:'10:30',period:'morning'},{id:'pm',name:'Evening sample',number:'DEMO 02',dep:'17:00',arr:'19:30',period:'evening'}];let selected='';function render(){const period=document.querySelector('#period').value,visible=data.filter(x=>period==='all'||x.period===period);document.querySelector('#count').textContent=`${visible.length} sample ${visible.length===1?'flight':'flights'}`;document.querySelector('#results').innerHTML=visible.map(x=>`<article class="flight ${selected===x.id?'selected':''}"><div class="flight-head"><span>${x.name} · ${x.number}</span><span class="sample-tag">Original sample</span></div><div class="flight-body"><div class="station"><b>${x.dep}</b><span>SEA · Seattle</span></div><div class="line">2h 30m<i></i>Nonstop study</div><div class="station"><b>${x.arr}</b><span>LAX · Los Angeles</span></div><button type="button" data-id="${x.id}" aria-pressed="${selected===x.id}">${selected===x.id?'Selected sample':'Select this sample'}</button></div></article>`).join('');document.querySelectorAll('[data-id]').forEach(button=>button.onclick=()=>{selected=button.dataset.id;const x=data.find(x=>x.id===selected);document.querySelector('#selection').textContent=`${x.name} selected: ${x.dep} SEA → ${x.arr} LAX. No booking made.`;render();document.querySelector(`[data-id="${selected}"]`).focus()})}document.querySelector('#period').onchange=()=>{selected='';document.querySelector('#selection').textContent='';render()};render();</script></html>
I voli sono dati fittizi e fissi. L’esempio Auro nativo fornisce le proprietà di auro-flight e le risorse del tema Alaska; questo documento HTML non verifica la disponibilità.
Visualizzazione nativa dei voli con selezione applicativa originale
Ogni auro-flight riceve date con offset, codici delle stazioni e un array JSON di etichette dei voli. Un elemento select e un pulsante nativi aggiungono filtri locali e lo stato della selezione, al di fuori del componente di visualizzazione.
javascript
// src/main.js in a Vite vanilla project
// npm install @aurodesignsystem/auro-flight @aurodesignsystem/design-tokens @aurodesignsystem/webcorestylesheets
import '@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css';
import '@aurodesignsystem/webcorestylesheets/dist/bundled/themes/alaska.global.min.css';
import '@aurodesignsystem/auro-flight';
import './style.css';
document.documentElement.setAttribute('data-aag-theme','aag-theme-as');
const flights=[
{id:'sample-am',label:'Morning sample',number:'DEMO 01',departure:'2030-06-15T08:00:00-07:00',arrival:'2030-06-15T10:30:00-07:00',period:'morning'},
{id:'sample-pm',label:'Evening sample',number:'DEMO 02',departure:'2030-06-15T17:00:00-07:00',arrival:'2030-06-15T19:30:00-07:00',period:'evening'}
];
let selected='';
document.querySelector('#app').innerHTML=`<main><h1>Explore sample flights</h1>
<p class="body-default">Original records, not a live schedule or booking service.</p>
<label for="period">Departure period</label><select id="period"><option value="all">All times</option><option value="morning">Morning</option><option value="evening">Evening</option></select>
<div id="results"></div><p id="selection" role="status"></p></main>`;
function render(){const period=document.querySelector('#period').value;const target=document.querySelector('#results');target.replaceChildren();
flights.filter(f=>period==='all'||f.period===period).forEach(f=>{
const article=document.createElement('article'), title=document.createElement('h2');title.textContent=f.label;
const component=document.createElement('auro-flight');component.setAttribute('flights',JSON.stringify([f.number]));component.setAttribute('duration','150');component.setAttribute('departureTime',f.departure);component.setAttribute('arrivalTime',f.arrival);component.setAttribute('departureStation','SEA');component.setAttribute('arrivalStation','LAX');component.append(document.createElement('auro-flightline'));
const button=document.createElement('button');button.type='button';button.textContent=selected===f.id?'Selected sample':'Select this sample';button.setAttribute('aria-pressed',String(selected===f.id));button.onclick=()=>{selected=f.id;document.querySelector('#selection').textContent=f.label+' selected for this page only. No booking made.';render();};
article.append(title,component,button);target.append(article);
});
}
document.querySelector('#period').onchange=()=>{selected='';document.querySelector('#selection').textContent='';render();};render();
/* src/style.css — application layout, not official size tokens */
main{max-width:64rem;margin:auto;padding:24px}
article{padding:24px;margin-block:16px;border:1px solid var(--ds-basic-color-border-subtle);border-radius:12px}
button{font:inherit;background:var(--ds-advanced-color-button-primary-background);color:var(--ds-advanced-color-button-primary-text);padding:12px 24px;border:0;border-radius:8px;margin-top:16px}
button:hover{background:var(--ds-advanced-color-button-primary-background-hover)}
button:focus-visible,select:focus-visible{outline:3px solid var(--ds-advanced-color-state-focused);outline-offset:4px}
select{font:inherit;padding:12px;margin:8px 0 16px}
Il pulsante di selezione implementa la logica applicativa, non un evento auro-flight inventato.
Modificare il periodo cancella il record selezionato in precedenza, evitando che selezioni nascoste possano trarre in inganno.
Tutti i numeri dei voli, le date e gli orari dell’esempio sono fittizi.
04
Alaska Airlines Auro Configurazione dell’agent per il sistema di design
Punto di partenza per l’implementazione
Punto di ingresso completo dell’applicazione e CSS per un progetto Vite vanilla esistente. Mantieni le versioni installate nel lockfile del progetto. La compilazione dei componenti nativi non è stata verificata qui; l’esempio incorporato usa un’interpretazione offline indipendente HTML. Non include AS Circular né Good OT.
javascript
// src/main.js in a Vite vanilla project
// npm install @aurodesignsystem/auro-flight @aurodesignsystem/design-tokens @aurodesignsystem/webcorestylesheets
import '@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css';
import '@aurodesignsystem/webcorestylesheets/dist/bundled/themes/alaska.global.min.css';
import '@aurodesignsystem/auro-flight';
import './style.css';
document.documentElement.setAttribute('data-aag-theme','aag-theme-as');
const flights=[
{id:'sample-am',label:'Morning sample',number:'DEMO 01',departure:'2030-06-15T08:00:00-07:00',arrival:'2030-06-15T10:30:00-07:00',period:'morning'},
{id:'sample-pm',label:'Evening sample',number:'DEMO 02',departure:'2030-06-15T17:00:00-07:00',arrival:'2030-06-15T19:30:00-07:00',period:'evening'}
];
let selected='';
document.querySelector('#app').innerHTML=`<main><h1>Explore sample flights</h1>
<p class="body-default">Original records, not a live schedule or booking service.</p>
<label for="period">Departure period</label><select id="period"><option value="all">All times</option><option value="morning">Morning</option><option value="evening">Evening</option></select>
<div id="results"></div><p id="selection" role="status"></p></main>`;
function render(){const period=document.querySelector('#period').value;const target=document.querySelector('#results');target.replaceChildren();
flights.filter(f=>period==='all'||f.period===period).forEach(f=>{
const article=document.createElement('article'), title=document.createElement('h2');title.textContent=f.label;
const component=document.createElement('auro-flight');component.setAttribute('flights',JSON.stringify([f.number]));component.setAttribute('duration','150');component.setAttribute('departureTime',f.departure);component.setAttribute('arrivalTime',f.arrival);component.setAttribute('departureStation','SEA');component.setAttribute('arrivalStation','LAX');component.append(document.createElement('auro-flightline'));
const button=document.createElement('button');button.type='button';button.textContent=selected===f.id?'Selected sample':'Select this sample';button.setAttribute('aria-pressed',String(selected===f.id));button.onclick=()=>{selected=f.id;document.querySelector('#selection').textContent=f.label+' selected for this page only. No booking made.';render();};
article.append(title,component,button);target.append(article);
});
}
document.querySelector('#period').onchange=()=>{selected='';document.querySelector('#selection').textContent='';render();};render();
/* src/style.css — application layout, not official size tokens */
main{max-width:64rem;margin:auto;padding:24px}
article{padding:24px;margin-block:16px;border:1px solid var(--ds-basic-color-border-subtle);border-radius:12px}
button{font:inherit;background:var(--ds-advanced-color-button-primary-background);color:var(--ds-advanced-color-button-primary-text);padding:12px 24px;border:0;border-radius:8px;margin-top:16px}
button:hover{background:var(--ds-advanced-color-button-primary-background-hover)}
button:focus-visible,select:focus-visible{outline:3px solid var(--ds-advanced-color-state-focused);outline-offset:4px}
select{font:inherit;padding:12px;margin:8px 0 16px}
Un prompt per il tuo progetto
Prompt per l’agente
Componi un elenco di voli Auro Alaska con aag-theme-as esplicito, CSS dei token Alaska, tipografia WCSS e campi nativi di auro-flight. Mantieni coerenti gli offset ISO e la durata. Aggiungi filtri e selezione gestiti dall’applicazione senza inventare eventi del componente, cancella le scelte nascoste e indica ogni record come dato di esempio.
05
Alaska Airlines Auro Fonti e ambito del sistema di design
Riferimento indipendente OpenDesign. Tutti i numeri dei voli, le date e gli orari sono fittizi; non rappresentano orari, tariffe, disponibilità o prenotazioni di una compagnia aerea. La spaziatura dell’applicazione non è presentata come scala ufficiale dei token.
