Isla Beauty 网站预览
Isla Beauty 网站预览

Isla Beauty

近白色基底、细线分隔与摄影展示。

页面以近白色为基底,搭配近黑色文字。字体采用 Soehne Buch、Nimbus Sans。视觉特点包括细线分隔、摄影展示、扁平表面、衬线字形。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 品牌红只使用 #e4263d,绝不替换为其他红色,也不为非关键场景改变色调或调浅。
  • 需要编辑式强调时,将 #e4263d 的 Garamond italic 短语与无衬线正文配对。
  • 所有 10–12px 的全大写微型标签都使用 Nimbus Sans 字重 500,字间距为 0.12–0.18em。
  • 每个矩形组件,包括卡片、按钮、输入框和图像,都使用 3px 圆角。999px 只用于胶囊和标签。
  • 页面画布设为奶油色 #f8f6f3,而非 #ffffff。白色只出现在卡片、按钮和产品图像上。
  • 每个区块的标题前都设置红色眉题标签,使用 11px 的 Nimbus、全大写和 0.18em 字间距,作为区块锚点。
  • 细线边框使用 1px 的 #000000 或 #e4dfd9,绝不使用 2px+,也不搭配阴影。

建议避免

  • 不要引入投影、发光效果或悬浮层。这套设计刻意保持平面感。
  • 不要使用带蓝色调的冷灰。所有中性色都应处于暖色范围,例如 #6f6f6f、#8a8580、#e4dfd9。
  • 矩形组件的圆角不要超过 3px。系统通过有意克制来保持锐利。
  • 同一段落不要混用超过一种衬线字体。Garamond Italic 是标点,而不是正文字体。
  • 红色填充的面积不要大于一个按钮。红色是印章,而不是整片色场。
  • 正文不要小于 13px 或大于 17px。13–17px 是系统的舒适范围。
  • #000000 只用于主要文字和主要边框,不用于其他用途。表面和次要文字改用 #1a1a1a 或 #3a3a3a。