Mercury

阿尔卑斯银行的蓝调时刻
Mercury 采用阿尔卑斯银行的美学风格:近黑色的画布(#171721)营造出类似天文台的电影感氛围,内容以微妙更亮的石墨卡片形式浮现。界面整体为单色——象牙色文字搭配乌黑底色,仅用一种鲜明的钴蓝色(#5266eb)作为唯一的色彩点缀,且专用于主要的‘开立账户’操作。字体承载表达力度:采用定制的显示字体,中等粗细 480(既非粗体也非细体),搭配精炼的正文字体,400粗细,形成自信却不张扬的语感。组件为扁平化且无边框,依靠 12px 圆角的石墨卡片抬升和胶囊形控件来定义结构,而非依赖阴影。满幅摄影风格的首屏区域——雾蒙山峦中一座孤零零的办公桌——在产品 UI 出现前先建立期待感,此后所有界面表面均保持这种静谧、高端的黑暗氛围。
查看原始网站使用规范
建议采用
- 每页仅使用钴蓝色 #5266eb 作为单一主要操作,绝不作为装饰性点缀、图标填充或次级按钮使用
- 所有卡片设置为 #1e1e2a,带有 12px 圆角和 32px 内边距——依赖画布的单步值提升,而非阴影,实现区分
- 所有标题使用 arcadiaDisplay 480(非 600/700)粗细——中等粗细是 Mercury 的标志性克制
- 所有交互控件(按钮、输入框、导航项)使用 32px 或 40px 的胶囊圆角——仅结构元素保留 4px 的锐利圆角
- 正文文字设置为 16px arcadia 400 粗细,行高 1.5——此为所有内容的密度基准
- 主要区块间保持 72px 的垂直节奏——宽敞的密度是高端质感的一部分
- 在透明描边/轮廓按钮上使用象牙色 #ededf3 作为边框和文字——次级操作绝不使用彩色
建议避免
- 禁止使用多种明亮辅助色——钴蓝色是唯一的色彩元素;引入绿色、红色或橙色会破坏单色基调
- 禁止为卡片或组件添加阴影——区分仅来自石墨色与乌黑色的明度差异
- 禁止在标题中使用粗体(700及以上)——arcadiaDisplay 480 为上限
- 禁止在按钮、输入框或导航项上使用锐利圆角(0–4px)——胶囊形状不可更改
- 禁止将正文文字设为 #ffffff——始终使用 #ededf3 象牙色;纯白在深色背景下会产生刺眼、冷峻的对比
- 禁止将填充钴蓝色的元素相邻放置,若相邻必须至少间隔 32px——密集排列会引发视觉冲突
- 禁止使用明亮或饱和的背景——每个表面要么是 #171721(画布),要么是 #1e1e2a(卡片);禁止使用中灰色或彩色条带