HOUSEPLANT 网站预览
HOUSEPLANT 网站预览

HOUSEPLANT

暖白色基底、大字排版与细线分隔。

页面以暖白色为基底,搭配深红色文字。字体采用 Houseplant、Roboto。视觉特点包括大字排版、细线分隔、摄影展示、分屏构图。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • #321e1是唯一主要操作色,按钮采用实色填充,没有渐变或悬停变色。
  • 页面画布设为#f4f1e0(Linen),绝不用纯白;温暖奶油色是系统身份。
  • 45px+时应用-0.05em letter-spacing,正文字号-0.02em;字间距对于定制字体个性不可更改。
  • 所有按钮圆角4px,所有卡片8px,不引入更大圆角;系统保持锐利。
  • 产品摄影提供全部彩色;UI保持棕与奶油单色,图像带来陶土、绿和温暖木色。
  • 保持宽松纵向节奏,主要分区之间80-120px,元素之间20px,卡片内边距20px。
  • 每页都以60-70px超大页脚文字标志锚定,品牌名作为图形收尾。

建议避免

  • 背景绝不要使用纯白(#FFFFFF);Linen #f4f1e0是标准画布。
  • 按钮或交互状态不要引入蓝、绿、红等强调色,棕与奶油系统刻意狭窄。
  • 标题不要使用系统无衬线;30px+定制Houseplant字体是品牌标志性特征。
  • 避免阴影超出卡片唯一的rgba(0,0,0,0.1) 0px 2px 8px,不采用辉光或彩色阴影。
  • 正文或产品描述不要居中;除导航文字标志与首屏标题之外,所有内容都左对齐。
  • border-radius绝不要超过8px;胶囊、圆形和大型圆润形状会破坏复古目录几何。
  • 不要添加渐变、玻璃拟态或装饰叠加层;系统只有平面表面、细线和柔和阴影。