精選 · 開放 · 免費

Aesop

為策展護膚與香氛產品打造的內斂、高端電商體驗。

ecommerceeditorialminimal

Aesop 網站截圖

↓ 下載設計系統包 (31 MB)在 OpenDesign 中開啟

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

📦 瀏覽包內檔案 →

01

設計氣質 DNA

藥劑師極簡主義植物學高端護膚策展

一個植物學藥劑產品的數位藝廊

02

色彩

#333333Ink

#666666Ink soft

#FFFEF2BG

#93938DMuted

rgba(51, 51, 51, 0.2)Line

高對比、內斂的色盤，優先考量排版與產品影像。

03

字型

humanist-sans

display31px · 400
h131px · 400
body14px · 400
caption11px · 400
label12px · 400

所有主要文字元素使用 humanist-sans。 · 保持輕盈至標準字重（400），營造精緻感。 · 確保充裕的行高（1.2-1.3）以提升可讀性。

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

一致的 4px 格線，搭配適中的縮放階梯。

05

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

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid rgba(51, 51, 51, 0.2)

rgba(255, 254, 242, 0.2) 0px 2px 4px 0px

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

不對稱格線，搭配大型產品攝影與置中的文字區塊。

07

動效與互動

200msmicro

250mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

hover 時平滑的背景色過渡。 · 互動元素上細膩的 transform 效果。

細膩的背景色變化與游標更新。 · 透過過渡效果提供即時視覺回饋。

08

組件

button 幽靈/外框樣式，使用細邊框與大寫文字。
card 簡潔卡片，具最少邊框與置中的產品圖片。
chip 細膩、帶邊框的篩選標籤，用於產品屬性。
input 極簡的搜尋輸入框，具細邊框與圖示。
hero 全寬攝影背景，搭配置中的文字覆蓋層。

09

文案語氣與禁用清單

語氣精緻、詩意且具資訊性。
標題風格 簡潔、引人遐想的標題。
按鈕文案 低調，使用箭頭或簡單文字如「探索」。

勿使用明亮、飽和的強調色——色盤為低飽和與中性。
勿使用厚重、粗體的字重——設計依賴輕盈與標準字重。
勿使用圓角或柔軟陰影——美學講求銳利與精確。
勿使用複雜、多彩的漸層——背景為單一、溫潤的米白色。
勿使用雜亂的版面——優先考量充裕留白與大型影像。
勿使用吵雜、急迫的行動呼籲文字——保持低調與優雅。
避免: 銷售語言
避免: 吵雜的促銷橫幅
避免: 雜亂的介面

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Aesop — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

為一個策展護膚與香氛品牌，設計內斂、高端的電商體驗。色盤使用溫潤的米白色（#FFFEF2）背景，搭配深灰色（#333333）墨色與低飽和（#93938D）強調色。排版全面採用 humanist-sans，使用輕盈至標準字重（400）以營造精緻、輕盈的感受。關鍵禁忌：永不使用明亮的強調色；避免厚重字重；並保持充裕的留白。版面應有如數位藝廊，搭配大型產品攝影與置中的文字區塊。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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