精选 · 开放 · 免费

Recess

一个融合了俏皮奇思与现代极简主义的高端饮品品牌网站。

beveragedtc

Recess 网站截图

↓ 下载设计系统包 (26 MB)在 OpenDesign 中打开

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

📦 浏览包内文件 →

01

设计气质 DNA

宁静现代俏皮清新极简

一个沉稳而精致的饮品品牌，融合了现代极简主义与俏皮、异想天开的元素。

02

色彩

#25385BInk

#394A6AInk soft

#C8D8FFBG

#E8F0FFBG soft

rgba(37, 56, 91, 1)Line

采用柔和的粉彩背景，搭配高对比度的深海军蓝文字，以确保可读性。

03

字体

grotesque-sans

display60px · 700
h140px · 700
body16px · 400
caption14px · 400

为大标题使用紧凑的字距，以形成坚实的排版区块。 · 在不同字号间保持一致的行高，以形成有韵律的阅读体验。

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

采用一致的 4px 基础比例，提供标准的网页间距。

05

表面 (圆角 / 阴影 / 边线)

sm · 0px

md · 4px

lg · 12px

pill · 999px

按钮和输入框使用 2px 实线深海军蓝边框。

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

不对称的首屏布局，文字在左，图像在右。

07

动效与交互

150msmicro

300mssmall

600msmedium

cubic-bezier(0.175, 0.885, 0.32, 1.275)easing

悬停时平滑的透明度和变换过渡。 · 背景元素上的类视差效果。

细微的颜色或透明度变化。 · 无可见的自定义点击动画。

08

组件

button 高对比度的实心海军蓝按钮配白色文字，或海军蓝描边按钮。
card 不明显突出；图像直接放置在背景形状上。
chip 在截图中不可见。
input 标准的矩形输入框，带有实线深海军蓝边框。
hero 一个大型的不对称首屏区域，拥有明亮的天空背景和醒目的绿色弧形形状。

09

文案语气与禁用清单

语气俏皮、随意且自信。
标题风格 简短、有力、对话式。
按钮文案 直接且以行动为导向。

勿使用通用的无衬线字体——该网站依赖于特定的、富有特色的 grotesque-sans 字族。
勿使用暗黑模式——网站的身份构建于明亮、通透的粉彩背景之上。
勿使用复杂的网格布局——首屏区域采用清晰的不对称分割。
勿使用厚重的投影——设计是扁平的，依靠色彩对比来营造深度。
勿使用明亮的霓虹强调色——调色盘由柔和的粉彩和深海军蓝构成。
勿使用衬线字体——整个网站使用统一的无衬线系统。
避免: 过于技术化或临床化的语言。
避免: 激进或高压的销售策略。
避免: 冗长、复杂的段落。

10

包内真实截图

Recess — 桌面首屏（hero） — 桌面首屏（hero）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Recess — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

定位：一个面向现代、健康意识消费者的高端、俏皮饮品品牌。关键十六进制颜色：#C8D8FF（背景）、#25385B（墨色）、#163BF3（强调蓝）、#A8B2FF（柔和背景）。字体类别：富有特色的 grotesque-sans，以呈现大胆、现代的外观。关键禁忌：勿使用暗黑模式，避免复杂网格，且不要使用厚重投影。保持随意而有力的品牌语调，呼应品牌轻松的活力。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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