精选 · 开放 · 免费
Tokyo Uk
以智能驱动的数字体验工程。
AgencyBold TypographyCurationPhotographicPremium
01
设计气质 DNA
机构数字工作室工程智能作品集
一个高端数字机构，通过电影感影像和巨幅排版展示其大胆的作品。
02
色彩
#000000Ink
#ffffffBG
rgba(0,0,0,1)Line
鲜明的高对比度调色板，依赖大胆排版和大幅摄影，而非复杂的色彩系统。
03
字体
geometric-sans
- display
400px · 500 - h1
40px · 400 - body
16px · 400
首屏文字动态缩放以填满视窗宽度 · 正文保持约 680px 的舒适阅读宽度 · 导航与副标题使用轻字重（300）
04
间距
4px
8px
12px
16px
24px
32px
40px
48px
64px
80px
96px
120px
宽裕的留白，顶部内边距 120px，网格项目间间距 80px。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 8px
pill · 999px
无可见边框；依赖图像对比度与留白进行分隔。
06
布局
1400container
12columns
24pxgutter
768 / 1024breakpoints
全出血首屏，后接响应式双栏项目展示网格。
07
动效与交互
100msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
文本链接的 hover 过渡
文本链接与导航项上的细微透明度或颜色过渡。 · 交互元素上使用标准指针光标。
08
组件
- button 极简的纯文本导航，无明确按钮形状。
- card 大型基于图像的项目卡片，下方配有简洁文字描述。
- hero 电影感全视窗背景图像，叠加巨幅排版文字。
09
文案语气与禁用清单
- 语气 自信、专业且克制。
- 标题风格 巨幅、全大写或加粗无衬线字体，主导整个视窗。
- 按钮文案 克制的文本链接，而非醒目的按钮。
- 不要使用彩色强调色——截图显示的是严格的黑白调色板。
- 不要为卡片添加投影——截图显示的是扁平化的基于图像的卡片。
- 不要使用衬线字体——截图显示的是统一的几何无衬线字体家族。
- 不要在首屏堆砌界面元素——截图仅显示巨幅文字和背景图像。
- 不要使用小字号作为标题——截图显示的是填满屏幕的巨幅展示文字。
- 不要使用明确的按钮形状——截图显示的是极简的纯文本导航。
- 避免: 杂乱的布局
- 避免: 装饰性图形
- 避免: 醒目的行动号召按钮
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端数字机构作品集，采用严格的黑白调色板（#000000，#ffffff）和大胆的几何无衬线字体（Aeonik）。布局大量依赖全出血摄影、巨幅展示文字和宽裕的留白（120px 内边距，80px 间距）。关键是没有彩色强调色、没有投影、也没有醒目的按钮。设计是克制的，让作品和大胆排版自己说话。避免添加不必要的界面元素或装饰性图形。
en · zh-CN · zh-TW · ja · ko