精选 · 开放 · 免费
Locomotive
一个数字优先的设计机构，通过高对比度、字体驱动的布局展示其作品。
agencymotion
01
设计气质 DNA
数字优先设计机构创新有意义
一个平衡了编辑式优雅与大胆技术精确度的高端设计工作室。
02
色彩
#E05F15Accent
#000000Ink
#FFFFFFBG
rgba(0,0,0,1.0)Line
使用纯黑和纯白的高对比度配色方案，点缀一抹高饱和度的橙色。
03
字体
didone-serif · grotesque-sans
- display
110px · 400 - headline
70px · 400 - body
26px · 400 - caption
15px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
开放且宽敞的布局，拥有充裕的内边距（垂直方向40px）和元素间一致的间距（20px）。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
最小化但精确的2px实线边框，用于分隔线和结构化标签。
06
布局
1920container
12columns
24pxgutter
768 / 1024breakpoints
非对称网格布局，强烈注重大型主视觉图像和覆盖在视觉元素上的文字。
07
动效与交互
150msmicro
200mssmall
300msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
hover 状态下透明度和背景色的平滑过渡。 · 交互式UI元素精确、快速的 transform 变换。 · 可能用于背景图像的沉浸式、复杂的 Canvas 或 WebGL 效果。
通过精确缓动曲线实现的微妙透明度或背景色变化。 · 通过 transform 或透明度偏移提供即时反馈。
08
组件
- button 基于文本的导航链接，带有微妙的方向箭头或定制字体，无传统按钮样式。
- card 在主视觉区极少或不存在卡片；依赖大型沉浸式图像而非包含式卡片。
- hero 全出血或占主导地位的摄影/视频背景，叠加大型衬线字体排版。
09
文案语气与禁用清单
- 语气 专业、创新、自信，带有一丝趣味。
- 标题风格 粗体、大尺寸的衬线字体，具有编辑感和高端感。
- 按钮文案 微妙、聚焦文本的行动号召，自然融入导航或布局中。
- 不要在任何元素上使用圆角——截图显示的是尖锐的、0px半径的框和卡片。
- 不要使用投影或复杂的深度效果——截图依赖于纯粹的字体和颜色对比。
- 不要使用多色配色方案——截图严格限定为黑、白和一种橙色点缀。
- 不要为标题使用小而紧凑的字体——截图展示的是高达110px的巨型显示字体。
- 不要使用标准、厚重的按钮组件——截图使用文本链接和微妙边框进行交互。
- 不要在文字后使用繁复的背景——截图使用高对比度纯色背景或简洁的图像。
- 避免: 避免随意或过于友好的语言。
- 避免: 避免复杂的渐变或投影效果。
- 避免: 避免杂乱的布局或过多的UI组件。
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
Locomotive 是一家高端数字优先设计机构，其视觉形象由巨大的迪多内衬线展示字体、高对比度单色配色（黑色 #000000 和白色 #FFFFFF）以及单一的鲜艳橙色点缀 (#E05F15) 定义。布局依赖于大胆的字体（最大110px）和充裕的留白。交互效果微妙，使用透明度和背景色过渡，配合精确的 cubic-bezier 缓动。关键约束：避免圆角（保持半径为0px），避免投影，绝不使用厚重的传统按钮组件。系统强调一种干净、具有编辑感、表现力极强的美学，优先考虑大型图像和字体，而非复杂的UI控件。
en · zh-CN · zh-TW · ja · ko