Adora 网站预览
Adora 网站预览

Adora

印象派博物馆位于磨砂玻璃之后

Adora 将一个精确的产品分析界面包裹在印象派画廊之中 — 白色卡片和清晰的仪表盘置于类似画布的背景上,背景是旋涡状油彩色块,搭配手绘波浪下划线,使标题呈现出从笔记本到海报的过渡感。色彩叙事以白色表面的克制为主,仅用一个鲜明的紫罗兰色作为行动提示,辅以柔和的粉彩点缀(天空蓝、青柠绿、泡泡糖粉、亮大红),这些点缀仅作为小范围的装饰性彩点,而非大面积填充。形状采用自信的圆润处理:卡片和产品框的圆角非常 宽松(40-64px),徽章和浮动导航胶囊为体育场级圆角,按钮则为柔和圆角(8-12px)。字体搭配定制的展示字重(PolySans)在粗体字重下用于标题,搭配 Plus Jakarta Sans 在 400-500 字重用于界面,全局统一的 -0.02em 字间距拉紧整个系统,赋予其现代感与统一性。

查看原始网站

使用规范

建议采用

  • 仅在视口内使用电紫罗兰色(#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,构成封闭的字体对
  • 禁止将文本块后的绘画风格背景延伸 —— 该背景仅应出现在产品框和图像容器之后,绝不能用于阅读内容的背景