精選 · 開放 · 免費

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

hover 時採用平滑的透明度與變換過渡效果。 · 背景元素帶有類似視差的效果。

細微的顏色或透明度變化。 · 無自訂的點擊動畫效果。

08

組件

button 高對比度實心海軍藍按鈕（配白字），或海軍藍外框按鈕。
card 在畫面中不顯眼；影像直接置於背景造型之上。
chip 在截圖中未顯示。
input 標準矩形輸入框，採用實心深海軍藍邊框。
hero 大型不對稱英雄區域，背景為明亮天空色，並有一個顯眼的綠色弧形造型。

09

文案語氣與禁用清單

語氣俏皮、隨性且自信。
標題風格 簡短、有力且對話式。
按鈕文案 直接且以行動為導向。

勿使用通用的無襯線字體——該網站採用特定、具特色的 grotesque-sans 字體家族。
勿使用深色模式——該網站的識別度建立在明亮、輕盈的粉彩色背景上。
勿使用複雜的格線佈局——英雄區域採用清晰的不對稱分割。
勿使用厚重的陰影效果——設計偏向平面風格，依賴色彩對比營造層次。
勿使用亮霓虹色調——色彩方案由柔和粉彩與深海軍藍組成。
勿使用襯線字體——整個網站採用一致的無襯線系統。
避免: 過度技術化或 clinical 的語言。
避免: 激進或高壓的銷售策略。
避免: 冗長複雜的段落。

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