Adora 网站预览
Adora 网站预览

Adora

浅色基底、胶囊形控件与居中构图。

页面以浅色为基底,搭配深蓝色文字。局部操作控件以蓝色强调。字体采用 PolySans、Plus Jakarta Sans。视觉特点包括胶囊形控件、居中构图、网格布局、宽松留白。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 仅在视口内使用电紫罗兰色(#592eff)作为单个填充型行动按钮(CTA),以及激活链接边框和选中徽章描边 —— 严禁作为大面积背景色使用
  • 将展示标题设置为 PolySans 700 字重,配色为 #21164c(午夜紫),而非纯黑色,使紫罗兰色底纹与行动色形成呼应
  • 在所有字体尺寸中普遍应用 -0.02em 字间距 —— 这是唯一能统一 PolySans 与 Plus Jakarta 的排版操作
  • 在卡片和产品框上使用 40px 和 64px 的边距圆角 —— 宽松的圆角是系统设计原则,而非默认 16px
  • 将柔和的粉彩点缀(#bcf2ff、#dfff9d、#ffaae6)限制在绘画风格的背景和波浪下划线中 —— 它们绝不能作为按钮填充或大文本颜色使用
  • 在展示标题中,仅在 1-2 个词下方添加手绘波浪下划线,以增强编辑感 —— 严禁用于正文或 UI 标签
  • 保持浮动导航为白色胶囊,圆角 40px;严禁将其转换为满幅标题栏

建议避免

  • 禁止在文本或页面背景上使用 #592eff —— 它是行动色,而非品牌主色调
  • 禁止将 #bcf2ff、#dfff9d 或 #ffaae6 用作填充按钮背景或大文本颜色 —— 它们仅作为装饰使用
  • 禁止将圆润按钮(8-12px)与锐角方块卡片混合 —— 系统信任容器使用大圆角、控件使用小圆角
  • 禁止将正文文本设为纯 #000000 —— 应使用 #353241,以保持中性色的紫罗兰底纹,与品牌调性呼应
  • 禁止为卡片添加阴影以增强立体感 —— 深度来自白底白层叠加与宽大圆角,而非阴影堆叠
  • 禁止引入第三种展示字体或衬线字体 —— 标题使用 PolySans,其余部分使用 Plus Jakarta Sans,构成封闭的字体对
  • 禁止将文本块后的绘画风格背景延伸 —— 该背景仅应出现在产品框和图像容器之后,绝不能用于阅读内容的背景