Design de produits d’entreprise · Nouvelle ressource
Système de design Alaska Airlines Auro.
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.
Interprétation originale hors ligne HTML des rôles du thème Alaska et de la hiérarchie des informations de vol. Aucun environnement d’exécution Auro natif, aucune police de marque, aucun inventaire en temps réel ni aucune réservation. · Référence de mise en œuvre
02
Référence de conception du système de design Alaska Airlines Auro
Thème Alaska public actuel CSS et documentation des composants Auro. Dans l’exemple d’origine, l’espacement et les rayons sont explicitement des choix propres à l’application, car l’échelle complète actuelle des primitives n’a pas été vérifiée. Les valeurs historiques d’Auro Classic ne sont pas mêlées à la référence Alaska.
Système de design Alaska Airlines Auro : choisissez explicitement Alaska avant de composer la page
Les thèmes actuels et les thèmes de migration ne sont pas interchangeables
Auro prend en charge Alaska, Hawaiian et Atmos en tant que thèmes distincts. Alaska Classic conserve d’anciennes valeurs visuelles sous des noms plus récents pour faciliter la migration ; Auro Classic est obsolète. Le fichier fourni importe le fichier Alaska CSS et applique l’attribut aag-theme-as.
Une valeur data-aag-theme imbriquée peut changer le thème d’une sous-section. Cette fonctionnalité est utile pour les plateformes partagées, mais ne signifie pas qu’un écran aux couleurs d’Alaska peut emprunter discrètement la typographie Hawaiian ou des valeurs historiques. L’exemple utilise un seul thème cohérent partout.
Système de design Alaska Airlines Auro : l’accentuation de la marque diffère du texte de lecture
Utilisez le rôle sémantique de premier plan
La source actuelle des jetons Alaska utilise #2a2a2a pour le texte par défaut et #676767 pour le texte atténué. Le rôle de couleur principale de la marque est #01426a, avec #00274a comme variante renforcée. Ces couleurs remplissent des fonctions différentes, même lorsqu’un titre et un bouton occupent la même zone.
L’exemple utilise une typographie neutre foncée pour les informations de vol et le bleu pour mettre en évidence les éléments interactifs. Les accents menthe et cyan figurent dans l’illustration de paysage d’origine, et non comme indicateurs d’état non documentés. Un vol sélectionné est indiqué par le texte et l’état du bouton, ainsi que par sa bordure.
Système de design Alaska Airlines Auro : appliquez les classes typographiques prises en charge
Quatre groupes définissent les usages
Le guide typographique actuel d’Auro répartit les styles en quatre groupes : corps de texte, titres, affichage et accentuation. Les styles de titre servent aux titres sémantiques, tandis que les styles d’affichage mettent visuellement en avant du texte qui n’est pas un titre dans la hiérarchie du document. Le guide recommande des classes comme body-default et body-lg plutôt que de recréer toutes les règles typographiques pour chaque élément.
La source Alaska indique AS Circular pour le corps de texte et les titres, et Good OT pour le texte d’accentuation. Elle fournit également des rôles distincts pour la graisse et l’interligne. L’aperçu hors ligne utilise la famille de polices de remplacement documentée, sans prétendre que ces polices sont disponibles localement.
Système de design Alaska Airlines Auro : le composant de vol représente un itinéraire structuré
Transmettez les informations horaires sans perdre leur décalage
auro-flight combine les informations de départ, d’arrivée et de secteur avec auro-flightline. Son exemple de base accepte un tableau de libellés de vol, une durée en minutes, deux codes de gare et deux dates-heures ISO. Le code fourni conserve les décalages explicites au lieu de transmettre une heure locale ambiguë.
Les deux exemples de vol d’origine utilisent les mêmes fuseaux horaires de départ et d’arrivée ; leurs durées de 150 minutes concordent donc avec les horaires indiqués. Il ne s’agit pas de vols réels. Pour un itinéraire avec correspondance en production, il faut également utiliser la représentation des secteurs documentée ; une simple liste de libellés ne doit pas laisser croire qu’une correspondance a été vérifiée.
Système de design Alaska Airlines Auro : gérez le choix dans l’application, et non dans les données d’affichage
Un résultat visible et un résultat sélectionné sont deux états différents
L’exemple natif utilise auro-flight pour afficher chaque entrée et un bouton standard pour la sélection locale. Il évite ainsi d’inventer une propriété de sélection API pour le composant d’affichage. L’identifiant sélectionné est géré par l’application et reflété par aria-pressed.
La modification du filtre de période de départ efface la sélection et le message. Sans cette étape, l’interface pourrait prétendre qu’une option masquée reste sélectionnée. L’aperçu indique clairement le résultat : un exemple a été choisi uniquement pour cette page, sans effectuer de réservation.
Filtrez les entrées d’origine par période de départ.
Affichez les autres informations du vol sans en modifier les valeurs.
Sélectionnez un exemple visible à l’aide de son identifiant stable.
Système de design Alaska Airlines Auro : chargez les bases typographiques avec le code des composants
Les jetons, WCSS et les éléments répondent à des besoins différents
Les jetons de design fournissent les valeurs. Les feuilles de style Web Core fournissent les styles de base et les classes typographiques. Le package flight enregistre l’élément personnalisé. Installer un seul de ces éléments ne suffit pas à créer une page entièrement conforme à la marque.
WCSS est une base à la carte, et non un fichier source unique regroupant tous les styles possibles. Dans la v12, le chemin Sass est passé de @import à @use et @forward. L’exemple choisit la feuille de style Alaska précompilée documentée, au lieu de mélanger d’anciennes instructions Sass avec la structure actuelle du package.
Utilisez de véritables libellés pour les commandes et les états du système de design Alaska Airlines Auro
Ne faites pas reposer tout le résultat sur la couleur
Le filtre est doté d’un libellé visible et chaque action de sélection indique son résultat. Une région d’état annonce par écrit l’échantillon sélectionné. Les lieux de départ et d’arrivée restent compréhensibles sans la ligne décorative ni le paysage.
Pour une extension qui recueille des renseignements sur les voyageurs, Auro Input prend en charge les emplacements label et helpText, valide par défaut à la perte de focus et permet de modifier ce comportement avec validateOnInput ou noValidate. Son action d’effacement réinitialise value à undefined. Il faut respecter ces contrats, sans supposer que chaque composant de formulaire renvoie la même valeur vide.
Présentez les heures et les renseignements sur les gares sous forme de texte lisible.
Libellez le filtre indépendamment du nombre de résultats.
Utilisez la région d’état pour annoncer un véritable choix local.
N’affichez pas d’indicateur de chargement pour une mise à jour immédiate de l’état.
N’enregistrez des noms alternatifs pour le système de design Alaska Airlines Auro que si plusieurs versions coexistent réellement
Distinguez une classe de composant de son enregistrement global
L’importation standard du package flight enregistre automatiquement auro-flight. Son entrée /class expose AuroFlight pour les appels explicites à register(name), lorsque plusieurs versions doivent utiliser des noms d’éléments personnalisés distincts dans le même document. Un nom personnalisé doit contenir un trait d’union.
Cette fonctionnalité sert à gérer les conflits, et non à créer une page normale utilisant une seule version. Conservez le nom par défaut pour l’exemple simple, épinglez les dépendances dans un fichier de verrouillage et examinez les migrations avant de remplacer une version majeure. Les écarts d’aperçu et les rayons d’origine restent des choix propres à l’application ; cette page ne les présente pas comme des primitives Auro vérifiées.
Exemples de composants du système de design Alaska Airlines Auro
Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation hors ligne HTML d’origine des rôles du thème Alaska et de la hiérarchie des informations de vol. N’inclut ni environnement d’exécution Auro natif, ni polices de marque, ni inventaire en temps réel, ni réservation.
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>
Les vols sont des entrées fictives statiques. L’exemple Auro natif fournit les propriétés de auro-flight et les ressources du thème Alaska ; ce document HTML ne consulte pas les disponibilités.
Affichage natif des vols avec sélection propre à l’application
Chaque auro-flight reçoit des dates tenant compte du décalage horaire, des codes de gare et un tableau JSON de libellés de vol. Un menu de sélection natif et un bouton ajoutent un filtrage et un état de sélection locaux, en dehors du composant d’affichage.
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}
Le bouton de sélection relève de la logique de l’application ; il ne s’agit pas d’un événement auro-flight inventé.
Le changement de période efface l’entrée précédemment sélectionnée afin qu’un choix masqué ne puisse pas induire en erreur.
Tous les numéros de vol, dates et heures de l’exemple sont fictifs.
04
Configuration de l’agent pour le système de design Alaska Airlines Auro
Point de départ de l’implémentation
Point d’entrée complet de l’application et CSS pour un projet Vite vanilla existant. Conservez les versions installées dans le fichier de verrouillage du projet. La compilation native des composants n’a pas été vérifiée ici ; l’exemple intégré utilise une interprétation hors ligne HTML indépendante. Il n’inclut pas AS Circular ni 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 pour votre projet
Prompt pour l’agent IA
Composez une liste de vols Auro Alaska avec aag-theme-as, les jetons Alaska CSS, la typographie WCSS et les champs natifs de auro-flight. Veillez à la cohérence des décalages ISO et des durées. Ajoutez le filtrage et la sélection gérés par l’application sans inventer d’événements de composant, effacez les choix masqués et indiquez que chaque entrée est un exemple.
05
Sources et périmètre du système de design Alaska Airlines Auro
Référence indépendante OpenDesign. Tous les numéros de vol, dates et heures sont fictifs ; aucun horaire, tarif, disponibilité ou service de réservation de compagnie aérienne n’est représenté. Les espacements de l’application ne sont pas présentés comme une échelle officielle de jetons.
