精选 · 开放 · 免费
Oatly
Oatly 采用一种趣味、涂鸦般的美学，搭配有限的配色和富有表现力的字体，传达出古怪、透明的品牌个性。
brandfoodquirky
01
设计气质 DNA
趣味性反讽颠覆性反设计直接
一个叛逆、涂鸦风格的品牌，感觉就像餐巾纸上的随手涂鸦。
02
色彩
#000000Ink
#F5F5F5BG
rgba(0,0,0,1)Line
高对比度的黑白配色，搭配极简、功能性的网格。
03
字体
transitional-serif · sans-serif · monospaced
- display
32px · 400 - body
16px · 400
主标题使用过渡衬线字体。 · 正文使用无衬线字体。 · 标签或 UI 元素使用等宽字体。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
基于 4px 的一致间距，搭配充足的留白。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid black
2px 2px 0px 0px rgb(0, 0, 0)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
基于网格的布局，混合居中和散落的元素。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
hover 状态下使用 0.3s translate 转换。
元素在 hover 时轻微移动。 · N/A
08
组件
- button 简洁、描边样式，带有 2px 黑色投影。
- card 白色背景，1px 黑色边框和 2px 黑色投影。
- chip N/A
- input N/A
- hero 居中的标题，搭配散落、具有交互感的元素。
09
文案语气与禁用清单
- 语气 趣味、直接，略带不羁。
- 标题风格 对话式，且常常带有幽默感。
- 按钮文案 简洁，以行动为导向。
- 不要使用复杂的配色方案——截图显示的是严格的黑白方案。
- 不要使用装饰性衬线字体——截图显示的是干净的无衬线字体与单个过渡衬线字体的混合。
- 不要在 UI 元素上使用圆角——截图显示的是锐利的方形边缘。
- 不要使用细微的阴影——截图显示的是粗重、硬边的 2px 黑色投影。
- 不要使用杂乱的背景——截图显示的是白色/灰白色背景上的简洁、极简网格。
- 不要使用复杂的图标——截图使用的是简单的手绘或扁平 SVG 风格图标。
- 避免: 企业行话
- 避免: 过于正式的语言
- 避免: 杂乱的布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Oatly 是一个具有颠覆性、趣味性的品牌，采用涂鸦、手绘风格的美学。设计依赖于原始的黑白配色方案（#000000, #FFFFFF, #F5F5F5）以及衬线、无衬线和等宽字体的混合使用。布局简洁且基于网格，但感觉自然随性。关键禁忌：避免复杂的配色方案、主要 UI 上的圆角，以及过于精致或企业化的视觉效果。拥抱原始的插图风格，使用硬边阴影和粗轮廓线。
en · zh-CN · zh-TW · ja · ko