精选 · 开放 · 免费

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

大型展示字体采用紧凑的负 letter-spacing · 中等字重（500）专用于标识与特定 UI 强调 · 左对齐排版，各文本块间留有充裕的垂直空白

04

间距

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

充裕、非对称的间距，设有大面积空白区域与带 padding 的文本块。

05

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

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

用于 cookie 同意操作与特定分隔线的微妙 1px 边框。

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

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

非对称网格，内容重心偏左，通过大量 padding 与留白来定义结构。

07

动效与交互

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

大型图像与页面加载揭示采用缓慢、平滑的 opacity 与 transform 过渡（1秒） · 交互元素如按钮采用更快、微妙的颜色与背景过渡（0.3秒）

交互文本与按钮上的微妙颜色偏移或轻微 opacity 变化。 · 无强烈的视觉反馈，保持平静、编辑的氛围。

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）与紧凑的负 letter-spacing（-0.825px）。关键设计规则包括：避免使用任何鲜艳的强调色（配色严格单色），避免装饰性衬线体或俏皮字体，避免杂乱的网格或厚重投影，并保持充裕、非对称的垂直节奏。揭示效果采用缓慢、平滑（1秒）的 opacity 过渡，交互状态则采用更快（0.3秒）的过渡。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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