Monarch

近白色基底、产品图像展示与胶囊形控件。
页面以近白色为基底,搭配近黑色文字。字体采用 ABC Oracle、Copernicus。视觉特点包括产品图像展示、胶囊形控件、紧密字距、细线分隔。适合参考的场景:金融产品官网、财务服务介绍页。
查看原始网站使用规范
建议采用
- Ember Orange #ff692d 专用于填充按钮、激活状态和眉题,绝不作为正文色或背景色层。
- 所有按钮设为 9999px 圆角,胶囊是系统最易识别元素。
- 所有标题用 Copernicus 350,匹配各字号负字间距:48px 时 -3.22px,40px 时 -2.40px,32px 时 -1.60px。
- 页面背景 Linen #efecea,卡片表面白色 #ffffff,绝不颠倒叠层。
- 所有细边框与分割线用 1px Stone #dcd9d6,暖灰与奶油画布和谐。
- 正文 ABC Oracle 字重 350-400,字间距 -0.010em,轻字重让橙强调主导。
- 产品界面嵌入 12px 圆角卡片,1px Stone 边框、双层阴影,这些截图是主要视觉证明。
建议避免
- 不要引入额外强调色,单色暖中性加唯一橙就是完整系统。
- 不要用方形或 4px 圆角按钮,9999px 胶囊不可妥协。
- 标题不要用 ABC Oracle,正文不要用 Copernicus,字体按角色严格分工。
- 背景不要用纯黑 #000000 或纯白 #ffffff,Ink 与 Linen 的暖变化使系统像编辑物,而非企业化。
- 卡片或按钮不要用重阴影,系统依靠 5% 不透明度细阴影,而非戏剧浮起。
- 正文不要大写或拉开字间距,宽字间距大写只留给眉题。
- 橙渐变红→橙不要用于界面元素,它只是推广强调,而非表面处理。