Mercury

近黑色基底、大幅摄影展示与胶囊形控件。
页面以近黑色为基底,搭配近白色文字。局部操作控件以蓝色强调。字体采用 arcadia、arcadiaDisplay。视觉特点包括大幅摄影展示、胶囊形控件、圆角卡片、扁平表面。适合参考的场景:金融产品官网、财务服务介绍页。
查看原始网站使用规范
建议采用
- 每页仅使用钴蓝色 #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(卡片);禁止使用中灰色或彩色条带