OpenDesign·你的设计资产库

网页参考

Wearemotto

一个以字体为主导的大胆机构网站，通过巨大的展示字体和广阔的留白来吸引注意力。

AgencyBold TypographyCleanPremiumCase Study
Wearemotto 网站截图

01

设计气质 DNA

策略设计咨询创新未来主义

品牌策略领域的高端建筑事务所

02

色彩

#1B1B1CInk
#717476Ink soft
#F4F3F0BG
#848484Muted
rgba(0, 0, 0, 1)Line

以温暖的中性色为基础的高对比度单色系

03

字体

geometric-sans · humanist-sans

  • display153px · 500
  • heading-199px · 500
  • body20px · 500

巨大的全大写展示字体主导布局 · 大号展示文本使用紧凑的行高（1.0） · 所有文本一致使用中等字重（500）

04

间距

4px
8px
16px
19px
24px
32px
38px
48px
67px
77px
99px
158px

慷慨的垂直间距，主要部分顶部有158px的内边距

05

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

sm · 0px
md · 9px
lg · 9999px
pill · 9999px

活跃的CTA下划线使用1px实线黑色边框

06

布局

1440container
12columns
23pxgutter
768 / 1024breakpoints

全出血的hero区域，用于作品集项目的宽幅多栏网格

07

动效与交互

350msmicro
400mssmall
750msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

内容揭示使用平滑、高输出的缓动 · hover时微妙的透明度过渡 · 作品集元素使用复杂的transform动画

链接和按钮上的微妙颜色或透明度变化 · 即时响应，平滑缓动进入新状态

08

组件

  • button 带有实线黑色1px下划线的文本链接
  • card 以图片为主的作品集网格项目，带有极简的文字标签
  • hero 巨大的分层标题，左侧对齐的描述和向下箭头指示器

09

文案语气与禁用清单

  • 语气 自信、权威且富有远见
  • 标题风格 使用巨大的全大写几何无衬线字体的声明式语句
  • 按钮文案 简洁、直接的文本链接，视觉重量极小
  • 不要使用多种强调色——截图显示的是严格单色的配色方案，带有温暖的米白色背景。
  • 不要使用小而居中的标题——截图显示的是巨大的、左对齐的、跨越视口的展示字体。
  • 不要使用重阴影或3D效果——截图显示的是完全扁平的2D表面。
  • 不要使用圆角按钮或卡片——截图显示的是尖锐的边缘或非常特定的圆形药丸形状。
  • 不要使用衬线字体——截图显示的是严格的无衬线字体系统。
  • 不要使用密集的多栏文本布局——截图显示的是极端的留白和主要的单栏阅读流程。
  • 避免: 俏皮语言
  • 避免: 圆角
  • 避免: 明亮的强调色
  • 避免: 密集的文本块

10

包内真实截图

Wearemotto — 桌面首屏（hero）
桌面首屏（hero）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Wearemotto — 移动首屏
移动首屏

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

11

System Prompt

这是一个高端机构和咨询网站，其特点是巨大、大胆的展示型排版和广阔的留白。主色调是温暖的米白色背景（#F4F3F0）和深黑色文字（#1B1B1C），营造出精致的高对比度美学。字体使用几何和人文无衬线类别，展示标题使用极端尺寸（150px+），行高紧凑（1.0），字重中等。交互平滑而精致，依赖于微妙的透明度和颜色变化。关键是不要使用圆角、阴影或明亮的强调色；设计纯粹依赖于排版尺度和空间节奏。避免杂乱的布局，并确保所有标题保持左对齐和大写以最大化冲击力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。