01Alaska Airlines Auro 设计系统界面预览
按出发时段筛选两条虚构航班记录并选择一条样本，反馈仅在当前会话中有效。
对 Alaska 主题角色与航班信息层级的原创离线 HTML 解读。不含原生 Auro 运行时、品牌字体、实时库存或预订。 ·
实现参考 02Alaska Airlines Auro 设计系统设计参考
当前公开的 Alaska 主题 CSS 与 Auro 组件文档。原始样本中的间距与圆角明确属于应用层选择，因为未能核实完整的当前基础尺度。旧版 Auro Classic 的取值不会混入 Alaska 参考。
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ds-basic-color-brand-primary | #01426a | 主品牌角色。 |
--ds-basic-color-brand-primary-bold | #00274a | 强品牌角色。 |
--ds-basic-color-brand-primary-muted | #ebf3f9 | 弱化的品牌背景层。 |
--ds-basic-color-brand-secondary | #5de3f7 | 次级强调色。 |
--ds-basic-color-brand-tertiary | #a3cd6a | 三级强调色。 |
--ds-basic-color-texticon-default | #2a2a2a | 正文阅读文本。 |
--ds-basic-color-texticon-muted | #676767 | 辅助性文本。 |
--ds-basic-color-border-default | #959595 | 默认边界。 |
--ds-basic-color-border-subtle | #dddddd | 细微分隔。 |
--ds-basic-color-status-success | #447a1f | 成功角色。 |
--ds-basic-color-status-error | #e31f26 | 错误角色。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ds-advanced-color-button-primary-background | #01426a | 主操作填充。 |
--ds-advanced-color-button-primary-background-hover | #00274a | 指针悬停填充。 |
--ds-advanced-color-button-primary-background-disabled | #acc9e2 | 禁用填充。 |
--ds-advanced-color-button-primary-text | #ffffff | 主文本。 |
--ds-advanced-color-button-secondary-background | #ffffff | 次级填充。 |
--ds-advanced-color-button-secondary-border | #01426a | 次级边界。 |
--ds-advanced-color-state-focused | #01426a | 焦点角色。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
--ds-basic-type-family-body | AS Circular | 正文字族。 |
--ds-basic-type-family-heading | AS Circular | 标题字族。 |
--ds-basic-type-family-accent | Good OT | 强调字族。 |
--ds-basic-type-line-height-body | 1.625rem | 正文行高角色。 |
--ds-basic-type-line-height-body2 | 1.5rem | 第二个正文角色。 |
--ds-basic-type-line-height-body3 | 1.25rem | 第三个正文角色。 |
--ds-basic-type-line-height-heading | 1.3 | 标题行高比例。 |
--ds-basic-type-weight-body | 450 | 正文字重。 |
--ds-basic-type-weight-heading | 300 | 标题字重。 |
--ds-basic-type-letter-spacing-accent | 0.05em | 强调字距。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
Alaska | data-aag-theme="aag-theme-as" | 当前的 Alaska 主题。 |
Alaska Classic | aag-theme-asc | 仅用于迁移的主题。 |
Hawaiian | aag-theme-ha | 独立的品牌主题。 |
Atmos | aag-theme-atm | 独立的品牌主题。 |
Auro Classic | Deprecated legacy theme | 仅用于向后兼容。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
flights | JSON array of flight labels | 示例 ["DEMO 01"]。 |
duration | Minutes | 原始样本时长 150。 |
departureTime / arrivalTime | ISO date-time with offset | 不要从站点代码推断时区。 |
departureStation / arrivalStation | Station codes | 示例为 SEA 与 LAX。 |
auro-flightline | Child custom element | 连接出发与到达的展示。 |
AuroFlight.register(name) | Custom-name registration | 避免多个版本发生冲突。 |
03Alaska Airlines Auro 设计系统完整指南
实用指南，介绍如何为真实界面选择、应用和评审此系统。
DESIGN-alaska-auro.md完整指导、实现起点和源代码链接。
下载指南Alaska Airlines Auro 设计系统 在编排页面之前明确选择 Alaska
当前主题与迁移主题不可互换
Auro 支持 Alaska、Hawaiian 与 Atmos 三种彼此不同的主题。Alaska Classic 以较新的名称保留旧的视觉取值，用于迁移；Auro Classic 已弃用。所提供的条目导入 Alaska 的 CSS 文件并应用 aag-theme-as 属性。
嵌套的 data-aag-theme 取值可以改变某个子区域的主题。该能力对共享平台很有用，但这并不意味着一个采用 Alaska 配色的界面可以悄然借用 Hawaiian 的排版或旧取值。本示例自始至终使用单一的连贯主题。
阅读配套规范
Alaska Airlines Auro 设计系统 品牌强调不同于正文阅读文本
使用语义前景角色
当前的 Alaska 令牌源使用 #2a2a2a 作为默认文本色，用 #676767 作为弱化文本色。品牌主角色为 #01426a，并以 #00274a 作为更强的对应色。即便标题与按钮处于同一区域，它们承担的职责也不相同。
本样本对航班事实信息使用深色中性字体，对交互强调使用蓝色。薄荷绿与青色强调色出现在原始风景插图中，而不是当作未记录的状态信号。被选中的航班既通过边界，也通过文本和按钮状态加以标识。
阅读配套规范
Alaska Airlines Auro 设计系统 应用受支持的排版类
四组样式表达各自用途
Auro 当前的排版指南将样式划分为正文、标题、展示与强调四组。标题用于语义上的标题，展示则用于在视觉上突出、但在文档层级中并非标题的文本。指南建议使用 body-default、body-lg 之类的类，而不是为每个元素重新构建全部字体规则。
Alaska 源文件指定 AS Circular 用于正文与标题，Good OT 用于强调文本，并提供彼此不同的字重与行高角色。离线预览使用文档记载的回退字族，而不是假装这些字体在本地可用。
阅读配套规范
Alaska Airlines Auro 设计系统 航班组件表示结构化的行程
传递时间信息时不要丢弃其偏移量
auro-flight 与 auro-flightline 结合，共同呈现出发、到达与航段信息。其基础示例接受 flight-label 数组、以分钟为单位的时长、两个站点代码以及两个 ISO 日期时间。所提供的代码保留了显式偏移量，而不是传入含义不明的本地时钟字符串。
两条原始样本记录使用相同的出发与到达时区，因此其 150 分钟时长与时间相符。它们并非真实服务。生产环境中的联程行程还需要文档所述的航段表示方式；仅靠扁平的标签列表不应被用来暗示已核实的衔接。
阅读配套规范
Alaska Airlines Auro 设计系统 将应用层选择与展示数据分离
可见的结果与选中的结果是不同状态
原生示例使用 auro-flight 展示每条记录，并使用普通按钮完成本地选择。这样就避免了在展示组件上臆造一个选择 API。选中的标识符由应用持有，并通过 aria-pressed 体现。
更改出发时段筛选条件会清除已选内容和提示信息。缺少这一步，界面就可能显示某个已隐藏的选项仍处于选中状态。预览会明确呈现结果：所选样本仅用于本页面，且未进行任何预订。
- 按出发时段筛选原始记录。
- 渲染其余航班信息，且不改变其数值。
- 通过稳定的标识符选择可见样本。
- 筛选条件变化时清除所选内容。
阅读配套规范
Alaska Airlines Auro 设计系统：在加载组件代码的同时加载排版基础
设计令牌、WCSS 与各类元素各自解决不同的问题
设计令牌提供取值；Web Core Style Sheets 提供基础样式与排版类；航班包则负责注册自定义元素。只安装其中某一项，并不等同于一个完整的品牌化页面。
WCSS 是一套可按需取用的基础，而非囊括所有可能样式的单一源文件。其 v12 Sass 路径已从 @import 迁移到 @use 与 @forward。本示例选用文档中说明的预构建 Alaska 样式表，而不是把旧式 Sass 指令与当前包结构混用。
阅读配套规范
Alaska Airlines Auro 设计系统：为控件与状态使用真实标签
不要让颜色独自承载全部结果
筛选器带有可见标签，每个选择操作都点明其结果。状态区域会以文字播报所选样本。即便没有装饰线条或风景图，出发与到达信息依然清晰可懂。
对于收集旅客信息的扩展，Auro Input 支持 label 与 helpText 插槽，默认在失焦时校验，并可通过 validateOnInput 或 noValidate 调整校验时机。其清除行为会将 value 重置为 undefined。应遵循这些约定，而不是假定每个表单组件都返回相同的空值。
- 将时间和车站信息保留为可读文本。
- 让筛选器的标签与结果计数彼此独立。
- 将状态区域用于真实的本地选择。
- 即时状态更新时不要显示加载中的旋转指示器。
阅读配套规范
Alaska Airlines Auro 设计系统：仅在版本确实共存时注册备用名称
将组件类与全局注册分开
航班包的标准导入会自动注册 auro-flight。其 /class 入口暴露 AuroFlight，供需要显式 register(name) 调用的场景使用，以便多个版本在同一文档上各自使用不同的自定义元素名。自定义名称必须包含连字符。
这是一项冲突管理特性，而非普通单版本页面的必需项。简单示例保留默认名称，通过锁文件固定依赖版本，并在替换主版本前审查迁移事项。原有预览中的间距与圆角仍属于应用层决策；本页面不会把它们重新标注为经验证的 Auro 基础元素。
阅读配套规范
Alaska Airlines Auro 设计系统组件示例
完整的独立交互示例
将完整文档保存为 index.html 并在浏览器中打开。原有的离线 HTML 对 Alaska 主题角色与航班信息层级的诠释。不含原生 Auro 运行时、品牌字体、实时库存或预订功能。
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>
代码参考
- 这些航班是虚构的固定记录。原生 Auro 示例提供 auro-flight 属性与 Alaska 主题资源；本 HTML 文档不查询可用性。
原生航班展示，搭配应用自有的选择逻辑
每个 auro-flight 都会接收带偏移量的日期、车站代码以及 JSON 航班标签数组。原生 select 与 button 在展示组件之外提供本地筛选与选择状态。
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}代码参考
- 选择按钮属于应用逻辑，并非臆造的 auro-flight 事件。
- 更改时段会清除先前选中的记录，以免隐藏的选择产生误导。
- 示例中的每个航班号、日期和时间均为虚构。
04Alaska Airlines Auro 设计系统：AI Agent 设置
实现起点
为现有的 Vite 原生项目提供完整的应用入口与 CSS。将已安装的版本保留在项目锁文件中。此处未验证原生组件编译；内嵌的示例采用独立的离线 HTML，且不打包 AS Circular 或 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}适用于你项目的提示词
Agent 提示词
组合出 Auro Alaska 航班列表，使用显式的 aag-theme-as、Alaska 设计令牌 CSS、WCSS 排版以及原生 auro-flight 字段。保持 ISO 偏移量与时长一致。添加应用自有的筛选与选择逻辑，不臆造组件事件，清除隐藏的选择，并把每条记录标注为示例数据。
05Alaska Airlines Auro 设计系统：来源与范围
独立的 OpenDesign 参考。所有航班号、日期和时间均为虚构；不代表任何航空公司班期、票价、可用性或预订信息。应用层的间距不作为官方令牌尺度。
