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

Isla Beauty

奶油色药剂铺,以手术般精确的红色点缀:温暖羊皮纸墙面、琥珀色瓶子,以及每张标签上唯一的红色印章。

Isla 像一间带有温暖编辑气质的药剂铺:奶油色纸张画布上,一抹鲜红像闹钟般唤起注意;字体将几何无衬线 Soehne/Nimbus 与用于情感表达场景的 Garamond italic 搭配。配色贴近肌肤与纸张,采用灰白、暖沙色、淡粉和深墨色;红色只以小面积的功能性爆发出现,用于 CTA、区块眉题、加入购物车按钮填充和行内强调。组件平面而安静,采用 3px 圆角和细线边框,不设阴影或渐变。布局保留呼吸空间,产品摄影承担视觉分量,文字则保持沉着的语气:字间距较宽的全大写标签、衬线斜体和无衬线正文依次形成层次。

查看原始网站

使用规范

建议采用

  • 品牌红只使用 #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。