LUNCH 网站预览
LUNCH 网站预览

LUNCH

明暗对比、大幅摄影展示与大字排版。

页面兼有浅色与深色区域。字体采用 Good Sans、Redaction。视觉特点包括大幅摄影展示、大字排版、网格布局、宽松留白。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 仅使用四色调板:#000000 用于所有文字与线条,#f4f1e4 用于内容背景,#fcfaf1 用于首屏上下文UI及表面变体,#b8aad0 用于品牌低语(公告栏、页脚、‘售罄’状态)。
  • 所有文字使用 Good Sans 字体;在层级表达中优先通过字重(400 与 700)区分,而非单纯增大字号。
  • 交互元素仅以文字链接呈现,带有1px下划线,而非填充按钮——这是一个以文字为核心的界面,而非按钮驱动的界面。
  • 让产品与编辑摄影承担视觉重量;UI仅作为框架存在,而非表演者。
  • 将首屏品牌标识作为唯一一次字体表现的高潮——每页仅使用一个大型 Redaction 字体实例,其他情况均不以显示尺寸呈现。
  • 搭配深色满幅摄影与温暖羊皮纸质感的产品板块,形成杂志式的节奏感。
  • 保持卡片与图像边缘锐利(全场景半径为0px)——系统依赖于平滑、画廊式构图。

建议避免

  • 不要引入填充按钮、胶囊形控件或圆角——系统所有组件的半径均为0px。
  • 不要将 #b8aad0 用作CTA背景或行动号召填充——它仅用于公告栏、页脚和‘售罄’状态的品牌低语。
  • 不要使用渐变、投影或玻璃态设计——系统采用平面表面与摄影深度表达。
  • 不要将正文文字尺寸放大至32px以上(除首屏品牌标识外)——Good Sans 是工作用字体,非展示用字体。
  • 不要添加彩色边框或色彩化UI元素;所有结构线条均为 #000000。
  • 不要将品牌色拆分为亮/暗变体——薰衣草薄纱为单一色调,仅作为语境标点使用。
  • 不要添加装饰性图标、徽章或UI装饰——产品摄影与品牌标识是唯一的视觉表演者。