IKEA 网站预览
IKEA 网站预览

IKEA

白色基底、分屏构图与渐变图像。

页面以白色为基底,搭配近黑色文字。局部操作控件以黄色强调。字体采用 Noto IKEA。视觉特点包括分屏构图、渐变图像、紧密字距、网格布局。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • #ffdb00 仅用于主要 CTA 和精选强调卡片,不作为正文或信息内容背景。
  • 全部边角设为 8px,体系恰好只有一种边框圆角。
  • 每个标题使用 700 字重,每个正文元素使用 400,不引入中等、半粗体或细体。
  • 带文字叠层的图像卡片都添加 30–60% 不透明度的黑色渐变叠层。
  • 圆形黑色箭头按钮作为通用“导航”提示:Ink Black 填充、白箭头、8px 或 50% 圆角。
  • 正文保持 16px、1.57 行高;IKEA 的正文字间行距宽松而非紧凑。
  • #0159a3 仅用于文字链接,不用于按钮或背景。

建议避免

  • 不引入阴影、抬升或任何深度效果;体系完全扁平。
  • 不使用超过一种圆角,所有位置为 8px,没有例外。
  • 不添加 300、500、600 等其他字重;二元的 400/700 体系就是约束。
  • 正文不直接放在没有渐变叠层的摄影上。
  • 蓝色 #0159a3 不作为 CTA 按钮填充,它只服务链接,而非操作。
  • 不柔化 letter-spacing;负字间距是结构要求,而非装饰。
  • 不添加强调渐变或颜色过渡;体系拒绝表面上的所有渐变填充。