
Auros
带有生物发光数据球的深海终端
Auros 的运作方式如同一个沉浸于深渊的金融科技终端:近乎黑色的蓝绿色画布上点缀着生物发光的数据球,光线从蓝绿色渐变至粉色,营造出一种深邃、流动且富有层次感的视觉效果。界面设计极简且极具电影感,仅使用一块中等厚度的用户显示屏(Matter),并采用醒目的负向跟踪来营造视觉尺度,同时又不显得过于刺眼。色彩分布均匀——几乎所有内容都使用无彩色的白色和银色,而彩色调色板则用于营造氛围渐变、区分卡片表面以及一个标志性的药丸形按钮,该按钮的颜色会从蓝绿色渐变至薰衣草粉色。卡片并非漂浮在高度之上,而是漂浮在微妙的蓝绿色表面脊线上(半径 16 像素,无阴影),因此层级关系被感知为水的深度,而非纸上的阴影。组件设计精巧,宛如精密仪器:大写字母跟踪标记、纤细的几何箭头图标以及浅粉色的大号数字读数。
一个深色的全宽画布,内容最大宽度为 1440 像素。主要元素是一个居中的文本块(标题 → 副标题 → 行动号召),横跨整个视口高度,背景元素为粒子效果。各个部分是全宽条状,彼此之间以 68 像素以上的宽垂直间距分隔,画布和略微凹陷的表面交替出现。“探索”部分采用非对称的双栏布局:左侧栏包含堆叠的功能卡片,右侧栏则展示几何分子插图。内容居中排列在窄列中(最大约 600 像素),便于阅读,而非横跨整个页面。页脚是一个凹陷的凹槽(#011d1c),垂直边距为 120 像素,营造出深水池的效果。导航栏是一个纤细的透明面板,元素间距为 16-24 像素。整体节奏流畅而富有电影感,每个部分都显得舒展自如,深邃如水的配色方案营造出一种随着阅读深入而不断沉浸的感觉。
视觉风格简约而富有氛围感。首页以一个三维粒子球体为特色——数千个细小的蓝绿色和白色圆点构成一个旋转的球体,与画布和边缘的淡紫色点缀相呼应,营造出一种类似信息对象的生物发光效果。右侧栏则以扁平化的几何分子图(深色画布上的白色圆圈和细连接线)作为装饰元素。没有照片、没有生活方式图片、没有人物——视觉语言基于简洁的数据图表和抽象图形。粒子球体是品牌识别的核心视觉元素;它必须在每个重要页面上至少出现一次,以强化深海的隐喻。
调色板
品牌
- Liquid Abyss
#012624— 页面的主要背景是页面的底部、页眉、主要元素以及主色调的深蓝绿色区域,营造出一种深海氛围。 - Liquid Deep
#011d1c— 凹陷的表面是画框底部的背景和更深的纸板面板。它看起来比画布暗半个色调,从而营造出一种微妙的向下深度渐变效果。 - Liquid Kelp
#003734— 凸起的卡片表面和按钮填充——凸起的表面位于深渊上方一级。用于功能卡片、内容面板和渐变按钮的起始点。
中性的
- Liquid Mist
#edfffe— 清冷的白色突出了正文、章节标题和温暖明亮的字体。微妙的蓝色调将正文与绿松石色的配色方案联系起来。 - Platinum
#ffffff— 纯白色用于标题、导航元素、图标轮廓和高对比度文本。它是所有标题级别和主导航的主要文本颜色。 - Silver Mist
#bbc7c6— 次要文本、低调的描述和链接颜色均保持原样。它们略带绿色调,与蓝绿色背景相得益彰。 - Ash
#f2f2f2— 用于引用和评论的附加文本。一种中性、冷灰色调,适合当银雾色的蓝绿色底色显得过于明亮时使用。 - Slate Deep
#707777— 适用于非活动或低能见度背景,表面略带色调。它位于画布和纸板之间,形成非常细微的高度差。 - Lavender Phosphor
#fde9ff— 背光颜色用于显示大型统计数据、计数器数字和重要指标。标志性渐变色中的粉色少量使用,作为深色表面上的发光点缀。
排版
从 10 像素到 96 像素 · 6 步
- Matter — 替代品: Inter · 轮廓 400, 500 · 标题和正文的主要字体使用 500 字重,所有标题(H1–H3)和大尺寸动态文本(86–295px)均采用此字重。正文和用户界面文本则使用 400 字重。该字体在大尺寸下采用较大的负间距(61px 时为 -0.04em,86px 时为 -0.046em),而在标题大写部分则采用较大的正间距(20px 时为 0.08em,12px 时为 0.12em,10px 时为 0.15em)。标题仅使用中等字重是该字体的一大特色——不使用粗体或细体——这赋予了字体一种统一而自信的风格。
- Arial — 替代品: system-ui · 轮廓 400 · 交互式 UI 元素(导航、按钮、页眉微文案、页脚)的备用方案。仅在 14px 高度显示——在 Matter 未加载时用作安全、通用的备用方案,涵盖表单标签、按钮文本和小型辅助文本。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 平均的 |
| 基本步骤 | 20px |
| 按钮半径 | 6px |
| 卡片半径 | 16px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 68px |
| 页面宽度 | 1440px |
AI 将按照Auros风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Design Full-Time — 一间配有一盏暖色调聚光灯的影棚
- Air — 雕塑作品《透过玻璃的午夜天空》
- Slash — 午夜金库,内有镀金账簿
- Raycast — 午夜指挥中心,珊瑚霓虹灯
- Dimension — 黄昏时分,灯光昏暗的工作台面配有磨砂玻璃面板。
- Modal — 昏暗的服务器机房里,一个发光的终端机——唯一的光源是明亮的绿色。
- Giga — 午夜的地平线笼罩着结霜的黑曜石
- Reflect Notes — 繁星点点的紫色空间是一个黑暗的天文台,音符像星座一样漂浮在近乎漆黑的靛蓝色空旷背景上。
- Ameba — 午夜时分的控制室——磨砂玻璃面板内闪烁着电蓝色的光芒
- AgentQL — 夜幕降临,航站楼上空出现北极光
- Frame — 一个用于放映午夜电影的影院。在一个黑暗的房间里,一束蓝色的聚光灯承担着所有的照明工作,用户界面融入背景,让创意内容得以投射到前方。
- Harness — 午夜时分,任务控制中心闪烁着磷光绿光。