关于本站
本站是一个用于演示 Frutiger Aero 美学风格的技术实验: 用现代 Astro 框架重现 2000 年代数字自然的视觉语言,并沉淀为可复用的组件库。
设计说明
视觉规范忠实参照 Frutiger Aero 的经典特征:圆角玻璃面板、 硬分割光泽渐变、水与气泡意象, 以及天空蓝、草木绿、辉光青的配色体系。
纯 CSS 渐变 SVG 原创徽标 无框架依赖 可访问性优先
设计令牌
核心变量
由 CSS 自定义属性驱动的设计系统
| 令牌 | 值 | 用途 |
|---|---|---|
| --aero-blue | #128dd5 | 主色 / 按钮 / 链接 |
| --aero-sky | #9ad1fc | 渐变与玻璃反光 |
| --aero-glow | #63e8ff | 辉光与光晕 |
| --r-md | 10px | 卡片圆角 |
| --shadow-glass | 0 8px 32px | 玻璃投影 |
背景模式
四层渐变与墙纸,Settings 可切换
默认背景为四层叠加渐变(光晕 ×3 + 斜向渐变),颜色随主题联动; 亦可切换为 Frutiger Aero 经典墙纸,选择自动保存。
渐变(默认) 墙纸模式可切换主题体系
海洋蓝
blue palette
点击侧边栏圆点应用
青草绿
green palette
点击侧边栏圆点应用
樱花粉
pink palette
点击侧边栏圆点应用
银灰
silver palette
点击侧边栏圆点应用
技术栈
构建本站使用的工具与语言
- A Astro 6 + TypeScript
- V Vercel 部署
- C CSS 自定义属性令牌
- 事 事件委托运行时
风格信条
设计上坚持的原则
- 忠 忠于经典比例与配色
- 每 每个效果可解释、可复用
- 尊 尊重减少动效偏好
- 内 内容与样式完全原创
联系方式
免责声明
本站为风格致敬的非商业演示项目,与任何真实产品无关。