精選 · 開放 · 免費
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 黑色 drop shadow。
- card 白色背景，1px 黑色邊框與 2px 黑色 drop shadow。
- chip N/A
- input N/A
- hero 居中標題，搭配散佈、具互動感的元素。
09
文案語氣與禁用清單
- 語氣 俏皮、直接，略帶不羈。
- 標題風格 對話式，常帶幽默感。
- 按鈕文案 簡潔，以行動為導向。
- 不要使用複雜的調色盤——截圖顯示嚴格的黑白配色方案。
- 不要使用裝飾性襯線字型——截圖顯示乾淨的無襯線體與單一過渡襯線體的組合。
- 不要在 UI 元素上使用圓角——截圖顯示銳利、方形的邊緣。
- 不要使用細微陰影——截圖顯示粗獷、硬邊的 2px 黑色 drop shadow。
- 不要使用繁雜的背景——截圖顯示乾淨、簡約的網格，背景為白色/近白色。
- 不要使用複雜的圖示——截圖使用簡單、手繪或平面 SVG 風格的圖示。
- 避免: 企業術語
- 避免: 過於正式的語言
- 避免: 雜亂的佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Oatly 是一個顛覆性、俏皮的品牌，採用草圖、手繪美學。設計依賴強烈的黑白調色盤（#000000、#FFFFFF、#F5F5F5）與襯線、無襯線及等寬字型的組合。佈局乾淨且基於網格，但感覺自發。關鍵禁忌：避免複雜配色、主要 UI 上的圓角，以及過度修飾或企業化的視覺。擁抱 raw、插畫風格，使用硬邊陰影與粗獷輪廓。
en · zh-CN · zh-TW · ja · ko