精选 · 开放 · 免费
Instrument
Instrument 是一家高端数字机构，将大胆排版、3D 视觉与精致的编辑式布局相结合。
agencybrand
01
设计气质 DNA
数字优先创造力科技创意机构
一个将创造力与科技融合的数字优先设计机构。
02
色彩
#070708Ink
#525252Ink soft
#E8E8E9BG
#F0F0F1BG soft
#D4D4D5BG quiet
#808080Muted
rgba(7,7,8,0.5)Line
以高对比度单色为基底，在首屏区域点缀俏皮的3D渐变色。
03
字体
grotesque-sans · sans-serif · monospace
- display
352px · 400 - headline
36px · 400 - body
16px · 400
所有主要界面与正文文本均使用 Instrument-Sans。 · 使用 Instrument-Serif 作为优雅的编辑式强调。 · 使用 Instrument-Mono 用于技术性元数据或标签。 · 显示标题需设置紧凑的字距与高对比度。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
采用4px网格，并留有充裕的编辑式留白空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 24px
lg · 32px
pill · 999px
1px solid rgba(7,7,8,0.5)
0 0 0 1px rgba(7,7,8,0.5)
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
基于网格的布局，包含一个巨大的全出血首屏和层叠的内容区块。
07
动效与交互
150msmicro
250mssmall
350msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互状态采用平滑的颜色过渡。 · 悬停时通过细微的位移变换营造深度感。
反转颜色或进行细微的背景色偏移。 · 提供即时视觉反馈，无缩放弹跳效果。
08
组件
- button 药丸形的主按钮，采用高对比度的墨色/背景色。
- card 大型编辑式卡片，包含3D或摄影内容。
- chip 用于导航的小型药丸形标签，带细边框。
- input 极简的表单输入框，采用底部边框样式。
- hero 全出血的3D动画场景，中心设有播放按钮。
09
文案语气与禁用清单
- 语气 自信、极简、专业。
- 标题风格 粗体、大写、紧凑字距。
- 按钮文案 直接且以行动为导向。
- 不要使用多彩渐变——调色板以单色为主，仅在特定场景使用强调色。
- 不要在所有地方使用圆角——首屏采用直角与圆形。
- 不要使用厚重的投影——使用细微的1px边框进行分隔。
- 不要使用居中对齐的正文文本——布局严格左对齐。
- 不要使用随意或友好的字体——坚持使用锐利、怪诞的 Instrument 字体家族。
- 不要让界面显得拥挤——使用充裕的留白和清晰的层级。
- 避免: 杂乱的布局
- 避免: 通用的库存图片
- 避免: 刺眼的多色渐变
- 避免: 不必要的边框或阴影
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端数字优先设计机构的网站作品集。它以大胆的单色为基底（#E8E8E9 背景，#070708 墨色），并在首屏点缀俏皮的3D彩色元素。排版以定制的怪诞无衬线字体家族（Instrument-Sans）为主，用于巨大的、字距紧凑的标题和简洁的正文。关键要点：绝不使用居中对齐的正文（严格左对齐），绝不使用厚重的投影（改用1px边框），绝不破坏极简、高对比度的单色美学。布局采用编辑式风格，空间感强，基于4px网格和12栏系统。
en · zh-CN · zh-TW · ja · ko