Lego

白色基底、胶囊形控件与紧密字距。
页面以白色为基底,搭配近黑色文字。局部操作控件以橙色强调。字体采用 Cera Pro、Cera Pro Italic。视觉特点包括胶囊形控件、紧密字距、居中构图、网格布局。适合参考的场景:摄影作品集、视觉内容展示页。
查看原始网站使用规范
建议采用
- 所有交互按钮(包括行动号召、次要和仅图标圆形控件)均使用999px的边距圆角 — 无例外。
- 在产品图片上放置黄色(#FFD502)徽章,边距为0px,内边距为4px 12px — 从不将徽章的角做圆角处理。
- 仅使用橙色(#F47D20)作为主要购买行动号召按钮的颜色;将深蓝色(#005AD2)保留给次要/信息类胶囊按钮。
- 所有24px及以上标题均使用Cera Pro 700字体,字间距设为-0.02em。
- 产品卡片保持8px的圆角,采用分段构造:图像区域顶部圆角,内容区域底部圆角,白色填充,无阴影 — 依赖于#F6F6F6页面背景色来形成对比。
- 所有浅色背景上均使用#141414作为默认文字颜色;正文文字绝不使用纯黑色(#000000)替代。
- 保持黄色(#FFD502)的页眉栏和正方形LEGO标志块作为唯一的色彩导航表面 — 从不引入彩色顶部导航背景。
建议避免
- 徽章/标签元素绝不使用圆角 — 0px的锐角是状态标签的贴纸/价格标签特征。
- 产品卡片绝不使用阴影 — 仅通过背景色对比实现层级感(#FFFFFF卡片在#F6F6F6基底上)。
- 每个页面区块内绝不使用超过一个行动号召按钮颜色 — 所有购买类行动号召按钮均为#F47D20,所有次要行动号召按钮为描边或#005AD2。
- 绝不使用Cera Pro 300字重 — 该站点仅使用400、500和700字重;低于常规的字重属于非品牌风格。
- 绝不将文字密集内容叠加在首屏图像上,除非有足够透明的半透明遮罩或白色卡片叠加层 — 首屏文字块使用白色背景面板,而非文字覆盖图像。
- 绝不使用圆润的输入框 — 搜索和表单字段的圆角为0px,以在视觉上区分数据输入与交互控件。
- 绝不将LEGO藏青色(#201D48)用作页面中间的区块背景 — 该颜色仅属于页脚锚点。