Explore o tema Alaska da Auro com tokens reais de cores semânticas e tipografia, tipografia baseada em classes e o componente nativo de voo. Dois registros originais de voos demonstram filtragem e seleção locais, sem representar inventário ou reservas de companhias aéreas.
Interpretação original e independente HTML das funções do tema Alaska e da hierarquia de informações de voos. Sem ambiente de execução nativo do Auro, fontes da marca, inventário ao vivo ou reservas. · Referência de implementação
02
Alaska Airlines Auro Referência de design do sistema de design
Documentação pública atual do tema Alaska CSS e dos componentes do Auro. O espaçamento e o raio do exemplo original são explicitamente escolhas da aplicação, pois não foi possível verificar uma escala primitiva atual completa. Valores legados do Auro Classic não foram misturados à referência Alaska.
Sistema de design Alaska Airlines Auro: escolha Alaska explicitamente antes de compor a página
Os temas atual e de migração não são intercambiáveis
Auro oferece Alaska, Hawaiian e Atmos como temas distintos. Alaska Classic mantém valores visuais antigos sob nomes mais recentes para facilitar a migração; Auro Classic está obsoleto. O arquivo de entrada fornecido importa o arquivo Alaska CSS e aplica o atributo aag-theme-as.
Um valor data-aag-theme aninhado pode alterar o tema de uma seção. Esse recurso é útil para plataformas compartilhadas, mas não significa que uma tela com as cores de Alaska deva usar discretamente a tipografia Hawaiian ou valores legados. O exemplo mantém um único tema coerente em toda a página.
Sistema de design Alaska Airlines Auro: a ênfase da marca é diferente do texto de leitura
Use a função semântica de primeiro plano
A fonte atual dos tokens Alaska usa #2a2a2a para o texto padrão e #676767 para o texto atenuado. A função de marca principal é #01426a, e #00274a é sua contraparte mais intensa. Essas funções são diferentes, mesmo quando um título e um botão ocupam a mesma área.
O exemplo usa texto em tom neutro escuro para os dados do voo e azul para dar ênfase às interações. Os detalhes em menta e ciano aparecem na ilustração de paisagem original, não como indicadores de status sem documentação. Um voo selecionado é identificado tanto pelo texto e pelo estado do botão quanto pela borda.
Sistema de design Alaska Airlines Auro: use as classes tipográficas compatíveis
Quatro grupos expressam diferentes finalidades
O guia tipográfico atual da Auro divide os estilos em corpo, títulos, exibição e destaque. Títulos são usados para cabeçalhos semânticos, enquanto exibição serve para textos visualmente proeminentes que não são títulos na hierarquia do documento. O guia recomenda classes como body-default e body-lg, em vez de recriar todas as regras de fonte para cada elemento.
A fonte Alaska define AS Circular para o corpo e os títulos, e Good OT para textos de destaque. Ela também fornece funções distintas de peso e altura de linha. A prévia offline usa a família tipográfica alternativa documentada, sem fingir que essas fontes estão disponíveis localmente.
Sistema de design Alaska Airlines Auro: o componente de voo representa um itinerário estruturado
Transmita as informações de horário sem descartar o deslocamento UTC
auro-flight combina as informações de partida, chegada e trecho com auro-flightline. O exemplo básico aceita um array de identificadores de voo, uma duração em minutos, dois códigos de estação e duas datas e horas no formato ISO. O código fornecido preserva os deslocamentos explícitos, em vez de transmitir um horário local ambíguo.
Os dois registros de exemplo originais usam os mesmos fusos horários de partida e chegada, portanto suas durações de 150 minutos são compatíveis com os horários. Eles não correspondem a voos reais. Um itinerário com conexão em produção também precisa da representação de trechos documentada; uma lista simples de identificadores não deve ser usada, sozinha, para indicar uma conexão confirmada.
Sistema de design Alaska Airlines Auro: mantenha a escolha da aplicação fora dos dados de exibição
Um resultado visível e um resultado selecionado são estados diferentes
O exemplo nativo usa auro-flight para exibir cada registro e um botão comum para a seleção local. Isso evita inventar um API de seleção no componente de exibição. A aplicação controla o identificador selecionado e o reflete por meio de aria-pressed.
Ao alterar o filtro de período de partida, a seleção e a mensagem são apagadas. Sem essa etapa, a interface poderia indicar que uma opção oculta continua selecionada. A prévia deixa o resultado explícito: uma amostra foi escolhida somente para esta página, e nenhuma reserva foi feita.
Filtre os registros originais pelo período de partida.
Exiba os dados restantes do voo sem alterar seus valores.
Selecione uma amostra visível pelo identificador estável.
Sistema de design Alaska Airlines Auro: carregue os fundamentos tipográficos junto com o código do componente
Tokens, WCSS e elementos resolvem problemas diferentes
Os tokens de design fornecem valores. Web Core Style Sheets fornece estilos fundamentais e classes tipográficas. O pacote de voo registra o elemento personalizado. Instalar apenas um desses recursos não equivale a criar uma página completa com a identidade da marca.
WCSS é uma base modular, não um único arquivo-fonte que contenha todos os estilos possíveis. No v12, o caminho Sass migrou de @import para @use e @forward. O exemplo escolhe a folha de estilos Alaska pré-compilada documentada, em vez de misturar instruções Sass antigas com a estrutura atual do pacote.
Sistema de design Alaska Airlines Auro: use rótulos reais para controles e status
Não dependa apenas da cor para comunicar o resultado
O filtro tem um rótulo visível, e cada ação de seleção informa o resultado. Uma região de status anuncia a amostra selecionada em texto. As informações de partida e chegada continuam compreensíveis sem a linha decorativa ou a paisagem.
Em uma extensão que coleta dados de viajantes, Auro Input oferece os slots label e helpText, valida por padrão quando o campo perde o foco e permite alterar esse comportamento com validateOnInput ou noValidate. A ação de limpar redefine o valor como undefined. Respeite esses contratos, em vez de presumir que todo componente de formulário retorna o mesmo valor vazio.
Mantenha as informações de horário e estação em texto legível.
Identifique o filtro com um rótulo separado da contagem de resultados.
Use a região de status para informar uma escolha local real.
Não exiba um indicador de carregamento para uma atualização imediata de estado.
Sistema de design Alaska Airlines Auro: registre nomes alternativos somente quando as versões realmente coexistirem
Separe a classe do componente do registro global
A importação padrão do pacote de voos registra auro-flight automaticamente. A entrada /class disponibiliza AuroFlight para chamadas explícitas a register(name) quando várias versões precisam de nomes de elementos personalizados distintos no mesmo documento. Um nome personalizado precisa incluir um hífen.
Este é um recurso para gerenciar conflitos, não uma exigência para uma página comum com uma única versão. Mantenha o nome padrão no exemplo simples, fixe as dependências por meio de um arquivo de lock e revise as migrações antes de substituir uma versão principal. As lacunas e os raios do preview original continuam sendo decisões da aplicação; esta página não os apresenta como primitivas Auro verificadas.
Alaska Airlines Auro Exemplos de componentes do sistema de design
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação original e offline HTML dos papéis do tema Alaska e da hierarquia das informações de voo. Sem runtime nativo do Auro, fontes da marca, inventário em tempo real ou reservas.
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>
Os voos são registros fictícios e fixos. O exemplo nativo do Auro fornece as propriedades de auro-flight e os recursos do tema Alaska; este documento HTML não consulta a disponibilidade.
Exibição nativa de voos com seleção original da aplicação
Cada auro-flight recebe datas com deslocamento de fuso horário, códigos de estação e um array JSON de rótulos de voo. Um select e um botão nativos adicionam filtragem local e controle da seleção fora do componente de exibição.
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}
O botão de seleção faz parte da lógica da aplicação, não é um evento inventado de auro-flight.
Ao alterar o período, uma seleção anterior é removida para que opções ocultas não induzam ao erro.
Todos os números, as datas e os horários de voo do exemplo são fictícios.
04
Alaska Airlines Auro Configuração de agente de IA para sistema de design
Ponto de partida para implementação
Ponto de entrada completo da aplicação e CSS para um projeto Vite vanilla existente. Mantenha as versões instaladas no arquivo de lock do projeto. A compilação nativa dos componentes não foi verificada aqui; o exemplo incorporado usa um HTML independente e offline. AS Circular e Good OT não estão incluídas.
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}
Um prompt para seu projeto
Prompt para agente de IA
Monte uma lista de voos Auro Alaska com aag-theme-as explícito, CSS de tokens do Alaska, tipografia WCSS e campos nativos de auro-flight. Mantenha coerentes os deslocamentos ISO e a duração. Adicione filtragem e seleção controladas pela aplicação sem inventar eventos de componente, remova opções ocultas e identifique cada registro como dado de exemplo.
05
Alaska Airlines Auro Fontes e escopo do sistema de design
Referência independente OpenDesign. Todos os números, as datas e os horários de voo são fictícios; não representam horários, tarifas, disponibilidade ou reservas de uma companhia aérea. O espaçamento da aplicação não é apresentado como uma escala oficial de tokens.
