Allbirds

白色基底、胶囊形控件与细线分隔。
页面以白色为基底,搭配近黑色文字。字体采用 Self Modern、Geograph。视觉特点包括胶囊形控件、细线分隔、衬线字形、大幅摄影展示。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 每个按钮、标签和图标按钮都使用 9999px 的胶囊形圆角。胶囊是品牌标志性的控件形态。
- 首屏和区块背景取自暖沙色系 #e0dacf、#ece9e2,而非中性灰,以保持大地色调。
- 所有全大写标签,包括导航、徽章和品类胶囊,都设置 0.10em 字间距。这种字间距是品牌的文字标志。
- Self Modern 只用于每屏最大的一个或两个标题;其余文字全部交给 Geograph。
- 品类导航卡片采用铺满卡片的实心色样背景。每张品类卡片本身就是其色彩叙事。
- 以 4px 为间距基准;元素间距优先使用 8/16/32 的增量,区块间距使用 40-56px。
- 阴影保持为零或接近零。元素通过色块和 1px 边框区分,而非悬浮效果。
建议避免
- 不要引入高饱和或彩色品牌色。系统刻意保持近乎无彩色,颜色来自产品摄影。
- 不要给卡片或按钮添加投影。Allbirds 通过平面色块和细线边框区分表面。
- 不要混用多种展示字体。Self Modern 每页最多出现一两次,而且始终使用 40px+ 字号。
- 正文不要使用低对比度灰色。白底正文保持 #212121 或 #525252,不得更浅。
- 不要用方形或圆角矩形按钮打破胶囊规则。每个交互控件都必须完全圆润。
- 界面表面不要使用渐变。品牌由平面色块构成,任何位置都不使用渐变填充。
- 不要添加装饰性图标颜色或多色图标集。图标始终以 #212121 或 #000000 单色呈现。