Leandra-isler 网站预览
Leandra-isler 网站预览

Leandra-isler

暖白色基底、渐变展示与细线分隔。

页面以暖白色为基底,搭配近黑色文字。字体采用 PP Neue Montreal。视觉特点包括渐变展示、细线分隔、扁平表面、大字排版。适合参考的场景:摄影作品集、视觉内容展示页。

查看原始网站

使用规范

建议采用

  • 使用 PP Neue Montreal 作为所有元素的单一字体——不使用衬线体、不使用等宽字体、不使用展示字体
  • 将首屏标题缩放至122–173px,字重500,字间距-0.045em;这种极端尺寸是品牌的最强标识
  • 让 Vellum Sand(#f4e6cd)填满整个视口边缘到边缘,不设最大宽度容器,不使用卡片面板
  • 不同区块之间以80–120px的垂直间距加上可选的1px细线(#1e211)分隔,绝不使用卡片、染色面板或阴影
  • 交互元素以1px下划线(#1e211)标记,位于基线下方2–4px处;绝不使用填充按钮或胶囊形控件
  • 使用真实的植物摄影作为系统中唯一的非中性色彩;让叶片和茎干突破视口边界,暗示标本被压印在纸上
  • 在首屏区域应用垂直 4 色标线性渐变(184deg,#8f774b → #ba9d6a → #d6bd97 → #f4e6cd)作为微妙的底色晕染,使页面呈现阳光照耀下的羊皮纸质感,而非扁平的米黄色

建议避免

  • 不要引入任何新色彩——系统仅包含温暖的沙色、近黑色和摄影绿;任何蓝色、红色或饱和色都会破坏草药师的美学
  • 不要使用填充、胶囊形或圆角按钮——界面没有容器,因此按钮会与扁平的羊皮纸产生违和感
  • 不要将内容包裹在卡片、面板或带有阴影的框内;区块仅通过间距和细线分隔
  • 不要对首屏标题使用最大宽度居中布局——展示文本应延伸至视口边缘,以呈现编辑类印刷的视觉效果
  • 不要启用深色模式或反转配色方案;Vellum Sand 是品牌调性,而非仅是浅色主题的选项
  • 不要使用库存插图、装饰性图标或几何图形;唯一的视觉语言是排版和真实的植物
  • 不要将正文文本设置在16px以下或20px以上——页面刻意使用极小的图注和巨大的展示字号,但可读正文始终控制在这一狭窄范围内