Fallen Grape 网站预览
Fallen Grape 网站预览

Fallen Grape

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

页面以暖白色为基底,搭配深橙色文字。字体采用 Romie、Arial Narrow。视觉特点包括细线分隔、摄影展示、扁平表面、衬线字形。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有展示标题、品牌标识和编辑正文文本使用 Romie(衬线字体),字号 20px 及以上
  • 所有功能性 UI 元素(导航、按钮、产品标题、辅助文本)使用 Arial Narrow(紧凑无衬线字体),始终使用大写,字间距为 0.0430em 至 0.0630em
  • 所有边框设置为 1px 实线深褐色(#7c664d)——这是主要的结构分隔线,禁止使用阴影实现立体感
  • 所有组件保持 0px 边距(border-radius)——锐利的边缘强化了葡萄酒标签和手压纸张的美学
  • 按钮背景使用桃沙色(#e1c6ab)或陶土光晕(#e3a36e),文字使用核桃墨水,边框为 1px 核桃墨水边框
  • 大部分满幅区域底色保持复古奶油色(#ece0d2);仅在卡片和导航中使用骨白(#f3f3f3)以实现微妙的层次感
  • 谨慎使用鼠尾草绿(#d8deb7)——仅用于装饰性标题点缀或植物插图色调,禁止用于交互元素

建议避免

  • 任何组件均不添加盒阴影或投影阴影——此设计刻意保持扁平与纸张质感
  • 卡片、按钮或图片均不使用圆角(border-radius > 0px)——0px 的锐利边缘是标志性特征
  • 背景中禁止使用冷灰、蓝色或纯白(#ffffff)——整个配色体系为温暖的大地色系
  • 禁止使用 Arial Narrow 用于展示标题或大篇幅编辑正文——仅保留用于 24px 以下的功能性/辅助文本
  • 禁止将小型段落超过2 行的正文使用紧凑无衬线字体——应切换至 Romie 以提升可读性
  • 禁止将鼠尾草绿(#d8deb7)应用于按钮、链接或交互状态——仅作为装饰用途
  • 禁止引入明亮的主色(饱和的蓝色、绿色、紫色)——所有点缀必须保持在温暖的桃红/陶土色系中