Locomotive

一个平衡了编辑式优雅与大胆技术精确度的高端设计工作室。

使用纯黑和纯白的高对比度配色方案，点缀一抹高饱和度的橙色。

didone-serif · grotesque-sans

• display110px · 400
• headline70px · 400
• body26px · 400
• caption15px · 400

开放且宽敞的布局，拥有充裕的内边距（垂直方向40px）和元素间一致的间距（20px）。

最小化但精确的2px实线边框，用于分隔线和结构化标签。

非对称网格布局，强烈注重大型主视觉图像和覆盖在视觉元素上的文字。

hover 状态下透明度和背景色的平滑过渡。 · 交互式UI元素精确、快速的 transform 变换。 · 可能用于背景图像的沉浸式、复杂的 Canvas 或 WebGL 效果。

通过精确缓动曲线实现的微妙透明度或背景色变化。 · 通过 transform 或透明度偏移提供即时反馈。

• button 基于文本的导航链接，带有微妙的方向箭头或定制字体，无传统按钮样式。
• card 在主视觉区极少或不存在卡片；依赖大型沉浸式图像而非包含式卡片。
• hero 全出血或占主导地位的摄影/视频背景，叠加大型衬线字体排版。

• 语气 专业、创新、自信，带有一丝趣味。
• 标题风格 粗体、大尺寸的衬线字体，具有编辑感和高端感。
• 按钮文案 微妙、聚焦文本的行动号召，自然融入导航或布局中。

• 不要在任何元素上使用圆角——截图显示的是尖锐的、0px半径的框和卡片。
• 不要使用投影或复杂的深度效果——截图依赖于纯粹的字体和颜色对比。
• 不要使用多色配色方案——截图严格限定为黑、白和一种橙色点缀。
• 不要为标题使用小而紧凑的字体——截图展示的是高达110px的巨型显示字体。
• 不要使用标准、厚重的按钮组件——截图使用文本链接和微妙边框进行交互。
• 不要在文字后使用繁复的背景——截图使用高对比度纯色背景或简洁的图像。
• 避免: 避免随意或过于友好的语言。
• 避免: 避免复杂的渐变或投影效果。
• 避免: 避免杂乱的布局或过多的UI组件。

历史提取与模型分析 · 尚未逐项校验