精选 · 开放 · 免费

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

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

UI元素状态变化的平滑过渡。 · 页面章节的细微入场动画。

交互元素上的细微颜色变化或透明度改变。 · 通过状态变化提供即时视觉反馈。

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