精選 · 開放 · 免費

Spindrift

結合鄉村攝影與簡潔現代排版的高端 DTC 飲品品牌。

beveragedtc
Spindrift 網站截圖
↓ 下載設計系統包 (23 MB)在 OpenDesign 中開啟

原站: https://www.drinkspindrift.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

有機新鮮自然清爽高端飲品

具有鄉村現代美學的高端有機果汁吧。

02

色彩

#6bbc37Accent
#ffffffInk
#363638Ink soft
#215212BG
#f5f5f5BG soft
#f9f6f0BG quiet
rgba(33, 82, 18, 1.0)Line

以深綠與清爽白色為主的大地有機色調。

03

字型

geometric-sans · humanist-sans

標題與內文字體採用幾何無襯線與人文無襯線類別。 · 標題使用緊湊字間距，營造現代簡潔感。 · 粗體字重使用極少，主要依賴尺寸建立層級。

04

間距

4px
8px
12px
16px
24px
32px
48px
64px
96px

以 4px 為基準的整潔網格系統，搭配充裕的垂直間距營造編輯流暢感。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px
md · 8px
lg · 12px
pill · 9999px

簡潔 minimal，多使用主色調綠色作為細微點綴。

0px 1px 2px 0px rgba(0, 0, 0, 0.24) · 0px 0px 2px 2px rgb(204, 204, 204)

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

以圖片與留白為優先的居中單欄式佈局。

07

動效與互動

300msmicro
400mssmall
600msmedium
cubic-bezier(0.77, 0, 0.175, 1)easing

介面元素狀態變化採用流暢過渡效果。 · 頁面區塊使用細微的入場動畫。

互動元素在懸停時產生細微色彩或透明度變化。 · 透過狀態變化提供即時視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Spindrift — 桌面首屏（hero）
桌面首屏（hero）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Spindrift — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

Spindrift 是一個具有自然有機美學的高端 DTC 飲品品牌。視覺語言以主導性的深綠色（#215212）色調為定調，搭配溫潤米白色（#f9f6f0）與鮮活萊姆綠（#6bbc37）點綴。排版簡潔現代，採用幾何無襯線與人文無襯線類別，字間距緊湊。關鍵元素包括全出血攝影背景、藥丸形按鈕與充裕留白。重要規則：避免使用冰冷臨床的白色；避免厚重複雜的投影效果；主要操作按鈕切勿使用尖銳直角設計。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko