Eddie 网站预览
Eddie 网站预览

Eddie

如同温暖奶油纸上的粉彩贴纸包。

Eddie置身于柔和画布的产品世界:温暖米白舞台(#f7f4f2)上,宽松圆角卡片悬浮于带薰衣草色调的阴影。色彩叙事分为两部分,结构骨架是奶油色上的近黑,确保最高清晰度,内容卡片则爆发出粉彩薰衣草、鲜亮青柠和天蓝,让每个分区像独立房间,而非统一滚动页面。顶部排版自信响亮,粗重展示字号66–119px,随后收缩为紧密紧凑的正文系统。组件高度圆润,30–40px圆角,通过彩色填充而非轮廓建立层级,悬浮操作按钮则为实黑胶囊。机器人吉祥物图标是重复品牌印记,一个带面孔的圆角方形,放在柔和薰衣草徽章内,作为贯穿页面的视觉标志。

查看原始网站

使用规范

建议采用

  • 任何高于30px的标题都采用Founders Grotesk 700,粗重几何字形是首屏语气。
  • 每个抬升元素,包括导航、按钮和卡片,都采用薰衣草阴影rgba(198,185,237,0.3) 5px 5px 20px;它是系统唯一阴影。
  • 按钮圆角25px,徽章30px,大卡片40px,圆角层级不可更改。
  • 吉祥物徽章在标题中行内替代一个词,将品牌身份融入文案。
  • 卡片设为完整40px圆角与20–40px内边距,让薰衣草、青柠或白色填充承担视觉层级,而非边框或阴影。
  • 奶油色上的正文保持16–18px、400字重和黑色(#000000),主要文案绝不要改成灰色降低对比。
  • 页面背景使用奶油画布#f7f4f2,纯白只留给卡片表面和反白文字。

建议避免

  • 不要引入额外阴影色或多层阴影叠加,唯一薰衣草色调阴影定义抬升系统。
  • 任何卡片、按钮或徽章都不要采用0–5px锐利圆角,25–40px范围定义系统柔软感。
  • 标题不要低于30px或高于120px,66–119px展示层级和22–30px副标题层级是两种获准标题尺度。
  • 正文不要采用#d8d1ff、#d2e534或#89cdf3强调色,它们只用于表面填充,其上全部文字必须黑色。
  • 不要添加渐变,系统严格为平面填充和唯一阴影色调。
  • 不要引入Wisteria、Periwinkle、Lime Voltage和Sky Signal之外的新强调色相,四强调色调色板就是系统。
  • 主要操作不要采用纯描边按钮,主要操作始终为实黑填充胶囊。