bella Kitchen Appliances 网站预览
bella Kitchen Appliances 网站预览

bella Kitchen Appliances

暖白色基底、胶囊形控件与分屏构图。

页面以暖白色为基底,搭配近黑色文字。字体采用 Supreme LL TT、Times。视觉特点包括胶囊形控件、分屏构图、居中构图、大幅摄影展示。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有非卡片区域的页面背景均使用 #ebeadf——温暖的奶油底色是画布,使白色卡片和珊瑚色点缀显得有目的性
  • 仅将 #f04923 作为功能性点缀使用:畅销标签、促销卡片背景和激活价格高亮——绝不可作为主要内容的大面积背景填充
  • 在所有尺寸下使用 Supreme LL TT 字体并保持 -0.05em 字间距——紧凑的字间距是品牌一致性的必要条件
  • 所有按钮、徽章和标签的边框半径均使用 999px——胶囊形状是按钮的表达语言
  • 所有卡片和图片容器的边框半径使用 12px——这是通用的表面圆角
  • 所有卡片内容内部间距使用 24px——产品卡片、特性卡片和促销卡片保持一致
  • 堆叠三个表面层级以营造深度:温暖画布(#ebeadf)→ 沙色驼牛(#d5cec0)→ 纯净白色(#ffffff)——通过色调温度定义层级,而非阴影叠加

建议避免

  • 页面背景不可使用冷白(#ffffff)——温暖的奶油画布才是 bella 具有居家、阳光特质的关键
  • 卡片不可添加阴影——bella 采用色调分层(画布 → 驼色 → 白色)替代阴影来定义层级
  • 不可使用多个强调色——珊瑚色(#f04923)是唯一的色彩强调;引入第二个品牌色会削弱温暖的居家身份
  • 不可使用蓝色作为 UI 颜色——首屏区域中的天蓝色是摄影内容,不是设计令牌
  • 不可使用衬线字体进行 UI 设计——Supreme LL TT(或其几何无衬线字体替代)是所有界面文本的唯一可接受字体
  • 卡片或容器不可使用尖角(0px 半径)——所有表面必须至少有 12px 圆角以保证柔和感
  • 正文文本不可居中对齐,也不可使用过长的行长度——产品描述和正文内容应左对齐,行宽最大为 60ch