Yellowbird® 网站预览
Yellowbird® 网站预览

Yellowbird®

黄色基底、胶囊形控件与细线分隔。

页面以黄色为基底,搭配近黑色文字。字体采用 Gooper、ABC Monument Grotesk。视觉特点包括胶囊形控件、细线分隔、网格布局、手绘图形。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 每个全宽区块都以 #ffe845 作满幅画布;首屏、产品网格、评价和页脚都应在黄色上,绝不在白或灰上。
  • 正文与标题只用 Monument Grotesk 字重 400;系统没有这个字体的粗体,层级来自字号和字间距,而非字重。
  • 所有产品卡片与图片使用 30px 圆角,主要按钮 14px,分类徽章 6px;这三种圆角定义形状语言。
  • 区块通过黄色条带 → 奶油卡片 → 黄色条带的色彩切换分隔,不用阴影或分割线,设计刻意平面。
  • Gooper 91px 展示字体只用于文字标志及同等品牌宣言,绝不用在产品名、正文或界面文字中。
  • 所有行动按钮使用 Monument Grotesk 18px,全大写,字间距 -0.011em;按钮排版一致性是标志。
  • 每个视口恰好一处提示使用放射星形贴纸模式,重复作为母题会失去冲击力。

建议避免

  • 绝不引入黄、黑、白、奶油、蓝之外的新彩色,系统力量来自双色纪律。
  • 卡片或按钮绝不添加投影、内光晕或模糊,分隔来自实黑描边,而非浮起。
  • 蓝色 #007aff 绝不用作按钮背景填充或导航,它只是幽灵边框工具色。
  • Monument Grotesk 字重绝不超过 400;字体不提供粗体,伪粗体会破坏几何均匀性。
  • 黄色画布上,正文绝不无卡片表面地放在白色上;浮在白色上的文字像损坏,应明确用奶油或纯白卡片表面。
  • 正文或展示文字绝不用正字间距,唯一正字间距 0.05em 留给 Pitch Sans 评价署名。
  • 文字标志绝不低于 61px,也不用标准展示字体替代 Gooper;圆泡状定制字体是品牌最易识别的元素。