Diabla 网站预览
Diabla 网站预览

Diabla

白色基底、宽松留白与网格布局。

页面以白色为基底,搭配深灰色文字。字体采用 LinotypeHelveticaNeueLTStdLt、LinotypeHelveticaNeueLTStdRoman。视觉特点包括宽松留白、网格布局、文字主导、大幅图像展示。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 使用带边框的朱红按钮(#ed2e38 1px 边框,透明填充,14px 圆角,6px 25px 内边距)作为默认交互元素——它是品牌的标志性控件
  • 将展示标题设置为 Helvetica Neue Light,字号 80–110px,行高 0.88–0.91;这种压缩的行距是使文字具有编辑风格的关键
  • 将粉粉画布(#fcf0f3)作为全页面背景使用;绝不切换为纯白色——温暖的粉色调是品牌氛围的体现
  • 正文使用炭黑(#333333),而非纯黑色;较柔和的黑色让朱红成为唯一的锐利边缘
  • 将朱红(#ed2e38)限制用于:品牌标识、导航链接、边框按钮轮廓和编辑体标题——绝不以大面积填充方式使用
  • 在大写标题(14–22px 炭黑或朱红)上方叠加全大写眉题(12–14px 朱红)以形成网站反复出现的编辑风格模式
  • 首屏和编辑类摄影应完整铺满全视口宽度;绝不内嵌、圆角或框住产品图片

建议避免

  • 不要使用实心红色 CTA——品牌通过边框和墨色表达,而非实心按钮
  • 不要使用 Helvetica 的粗体或中粗字重;系统刻意保持单字重(仅 400),层级由大小和色彩决定
  • 不要添加阴影、浮起效果或卡片抬升——所有表面保持平面,如同印刷类编辑页面
  • 不要引入除朱红之外的饱和辅助色;色彩调性以中性为主,朱红被严格控制
  • 不要将导航左对齐——导航分布于左中右,品牌标识居中
  • 不要使用纯白(#ffffff)作为页面表面——画布始终为粉粉画布(#fcf0f3)
  • 不要将三栏编辑网格打破为非对称或砖墙布局;各栏等宽,留白分隔