sweetgreen 网站预览
sweetgreen 网站预览

sweetgreen

暖白色基底、胶囊形控件与大字排版。

页面以暖白色为基底,搭配近黑色文字。字体采用 SweetSans、Grenette。视觉特点包括胶囊形控件、大字排版、大幅摄影展示、宽松留白。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有主要展示标题均使用SweetSans,字号70–80px,字重400,行高0.85——字重与字号的比例是品牌调性
  • 页面背景默认使用#f4f3e7;仅在全宽内容区块交替时使用#d8e5d6或#e8dcc6
  • 主要行动按钮必须使用#e6ff55填充+#0e150文字,绝不反转色彩关系
  • 所有按钮均渲染为完全圆润的胶囊形(半径9999px),内边距16px 24px,使用SweetSansText字重700,字号16px
  • 食物摄影从边缘到边缘填满容器,采用 20px 的 border-radius 圆角;图像周围不加框架、边框或叠加层。
  • 使用‘立即下单 →’作为透明描边文本链接(无背景,箭头图标)用于所有次级产品操作
  • 所有在SweetSansText中字号小于24px的文本,必须应用正字间距(0.01–0.05em)以确保可读性

建议避免

  • 不要使用多个强调色——色彩调性被刻意限制为一种电黄绿(#e6ff55)和一种深森林绿(#00473c),分别用于行动与品牌标识
  • 不要将标题设置为700及以上字重——品牌的权威感来自大字号下400字重的沉稳自信
  • 不要为产品卡片添加背景、边框或阴影——照片本身即为卡片
  • 不要将电黄绿(#e6ff55)用于除主要行动按钮填充和可用性徽章之外的任何用途
  • 不要在展示类文本中使用大于1.0的行高——紧凑的行距才让标题显得庄重
  • 不要将按钮渲染为矩形、胶囊形或带有轻微圆角——仅允许胶囊形(9999px)
  • 不要使用渐变——系统为纯平面色彩,温暖感来自奶油画布和高饱和度摄影