AetherVPN
AETHER / DESIGN SYSTEM — V1.0

让连接有形,
让自由有感。

AetherVPN 的品牌与界面基础规范。以清晰的层级、克制的光感和可复用组件,建立一致的产品体验。

品牌方向 / 数字空间视觉语言 / 光轨与留白应用 / 网站与客户端
01 / BRAND CORE

以太光轨

环绕的轨道代表开放与连接,中央光束代表轻点即达。图形在 16px favicon 到大幅品牌画面之间保持可辨识。

AetherVPN 标识AetherVPNPRIMARY / DARK
AetherVPN 标识AetherVPNON LIGHT
AetherVPN 应用图标APP ICON / FAVICON

使用规则:标识四周至少留出图标宽度的 1/4;勿拉伸、倾斜或在复杂背景上直接使用无底色版本。

02 / COLOR & TYPE

冷静,带一点光。

深海军蓝承担品牌识别和高对比信息,冰青用于主要行动,浅紫与天空蓝用于辅助光感。

Midnight#081331 · 主背景
Ink#132444 · 主要文字
Aether Mint#70E7D4 · 主行动
Sky#83BEFF · 辅助光
Violet#C3A8FF · 辅助光
Cloud#F7F9FC · 页面底色
DISPLAY / 72–126

更有余地。

粗字重与紧凑字距形成清晰焦点。

BODY / 16–18

从日常浏览到远方灵感,以轻盈的一次连接,拥抱更广阔的数字世界。

正文使用 Noto Sans SC / DM Sans,行高 1.65–1.9。

03 / COMPONENTS

组件与状态

主要操作始终保持清晰的视觉优先级;信息卡片使用统一圆角、内边距和边框体系。

BUTTONS / DEFAULT

最小点击区域 44px;主要按钮 56px 高;焦点状态显示 3px 冰青轮廓。

CARDS / INFORMATION
01 / EFFORTLESS

一触即达

把时间还给你,让连接更简单。

了解更多 ↗
STATUS / CONNECTION
已连接 正在连接 未连接

状态始终搭配文字说明,不只依赖颜色。

LAYOUT / RESPONSIVE
≥ 120012 栏 / 容器 1240px
821–1199平板布局 / 弹性列
≤ 820纵向结构 / 移动导航
≤ 600手机卡片 / 双列平台
DESIGNED TO MOVE WITH YOU

把一切,连接起来。

查看官网设计 ↗