精選 · 開放 · 免費

AREA 17

採用單色調色板與廣闊留白、由字體驅動的精緻代理商作品集。

agencyeditorial
AREA 17 網站截圖
↓ 下載設計系統包 (9 MB)在 OpenDesign 中開啟

原站: https://area17.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

合作影響力策略性高級設計驅動

高端建築期刊與全球策略公司的結合。

02

色彩

#1A1A1AInk
#949495Ink soft
#FFFFFFBG
#F2F2F2BG quiet
#757575Muted
rgba(230, 230, 230, 1)Line

嚴格單色調，運用高對比度的字體排印與廣闊的留白，建立高級、編輯風格的質感。

03

字型

grotesque-sans

大型展示尺寸採用緊湊的負字距 · 中等字重 (500) 專用於標誌符號與特定介面強調 · 左對齊的字體排印，區塊間留有寬裕的垂直留白

04

間距

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

寬裕、不對稱的間距，搭配大型空白區段與帶有內距的文字區塊

05

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

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

微妙的 1px 邊框，主要用於 Cookie 同意操作與特定分隔線。

rgb(0, 0, 0) 0px 0px 0px 1px · rgba(0, 0, 0, 0) 0px 0px 0px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

非對稱格線，內容大量偏左，運用大量的內距與留白來定義結構。

07

動效與互動

150msmicro
300mssmall
1000msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing

大型影像與頁面載入揭示採用緩慢、流暢的透明度與變換轉場 (1s) · 互動元素（如按鈕）採用較快、微妙的色彩與背景轉場 (0.3s)

互動文字與按鈕上帶有微妙的色彩轉變或輕微透明度變化。 · 無侵略性的視覺回饋，維持沉穩、編輯風格的氛圍。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

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

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一個高級代理商網站，以超級簡潔、極簡主義的美學與廣闊留白為特徵。主要顏色是純白 (#FFFFFF) 與近黑墨色 (#1A1A1A)，淺灰色 (#F2F2F2, #949495) 用於微妙的背景對比與柔和文字。字體排印嚴格採用現代 grotesque-sans，包含非常大、左對齊的展示標題 (55px)，帶有緊湊的負字距 (-0.825px)。關鍵設計規則包括：避免使用任何鮮豔的強調色（調色板嚴格單色）、避免裝飾性襯線或俏皮字體、避免擁擠的格線或厚重陰影，並保持寬裕、不對稱的垂直節奏。對大型影像使用緩慢、流暢 (1s) 的透明度轉場，互動狀態則使用較快 (0.3s) 的轉場。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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