精选 · 开放 · 免费
Allbirds
将极简UI与自然摄影融合的纯净、土质电商设计。
ecommercesustainable
01
设计气质 DNA
可持续自然极简生态意识舒适
一个现代、可持续的零售品牌，专注于透明度和天然材料。
02
色彩
#2D383DAccent
#000000Ink
#555555Ink soft
#FFFFFFBG
#E0DACFBG soft
#212121BG quiet
#696969Muted
rgba(0,0,0,0.1)Line
高对比度的自然色系搭配深沉柔和的锚定色
03
字体
humanist-sans · geometric-sans
- display
40px · 500 - body
16px · 400
展示字体：用于首屏标题和主要标语。 · 正文字体：用于常规阅读和描述性文本。 · 等宽字体：用于标签和次要UI元素。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于4px的统一基准单位，各部分之间留有充裕空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid rgba(0,0,0,0.1)，用于微妙分隔。
rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 20px 25px -5px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽首屏配以居中模态覆盖层。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0, 0.63, 1)easing
hover状态和背景颜色的平滑过渡。
微妙的背景颜色偏移或透明度变化。 · 通过transform或颜色提供直接的视觉反馈。
08
组件
- button 带微小圆角的纯色填充按钮。
- card 简洁卡片，搭配大幅产品摄影。
- chip 极简标签，使用大写文本。
- input 标准表单输入框，具有清晰的focus状态。
- hero 大型生活方式摄影，配以居中文本覆盖。
09
文案语气与禁用清单
- 语气 透明、平易近人、直截了当。
- 标题风格 简短、有力、以利益为导向。
- 按钮文案 直接且以行动为导向，具有清晰的视觉权重。
- 不要使用霓虹色或高饱和度颜色——截图显示的是类似#E0DACF的柔和土质色调
- 不要使用过度压缩的字体——截图显示的是人文主义无衬线和几何无衬线类别
- 不要使用厚重的投影——截图显示的是用于提升层次的微妙、柔和阴影
- 不要使用杂乱的布局——截图显示的是充裕的留白和单一的模态焦点
- 不要对正文使用全大写——截图将大写保留用于UI标签和简短标题
- 不要到处使用尖锐的直角——截图显示的是药丸形状和最大16px圆角的混合使用
- 避免: 充满术语的技术语言。
- 避免: 激进的销售策略。
- 避免: 过于复杂的句子结构。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个专注于天然材料和透明度的可持续电商平台。视觉身份以纯净、极简的美学为核心，采用纯白（#FFFFFF）、柔和土质中性色（#E0DACF）和深沉柔和锚定色（#212121，#2D383D）构成的高对比度调色板。字体依赖人文主义无衬线用于展示和正文，搭配几何无衬线用于UI标签，等宽字体用于次要元素。布局宽敞，采用1280px容器和12列网格。关键约束包括避免霓虹色或高饱和度颜色、抵制过于复杂或杂乱的布局，以及避免使用刺眼的投影或尖锐的直角。保持透明、直截了当的语气，标题简短有力。
en · zh-CN · zh-TW · ja · ko