精选 · 开放 · 免费

Thebeamslondon

实验性排版驱动的文化场所标识。

01

设计气质 DNA

一个探索视觉传达边界的现代画廊项目。

02

色彩

严格的单色调色板，依赖高对比度的黑白以获得最大视觉冲击力。

03

字体

neue-haas-grotesk

• display160px · 400
• heading38px · 400
• body19px · 400

在展示尺寸上使用紧凑的负字间距。 · 在所有尺寸上保持统一的400字重。 · 展示文本的行高应紧凑，但小尺寸文本的行高需保证可读性。

04

间距

一个结构化的4px基础网格，可扩展以容纳大型排版元素。

05

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

使用纤细的单像素黑线来分隔区块和定义输入字段。

06

布局

一个极简的、从边缘到边缘的网格，优先考虑巨大的排版元素而非传统内容块。

07

动效与交互

对重复文本进行持续的水平滚动。 · 交互元素上的细微可见性过渡。

细微的不透明度或颜色变化。 · 直接导航或表单提交。

08

组件

• button 极简的基于文本的链接，带'>'后缀。
• card 不适用，布局使用全宽区块。
• chip 不适用。
• input 仅带底部边框的单行文本输入框。
• hero 一种巨大的排版处理，将一个短语垂直重复以形成结构性图案。

09

文案语气与禁用清单

• 语气 直接、自信且富有艺术感。
• 标题风格 简短、有力的陈述，让排版完成视觉表达。
• 按钮文案 低调且功能化，使用简单的文本链接。

• 不要使用多种颜色 — 截图显示为严格的单色调色板。
• 不要为元素添加圆角 — 截图显示为尖锐的直角。
• 不要使用衬线字体 — 截图显示为统一使用 Neue Haas Grotesk。
• 不要使用投影或柔和的深度效果 — 截图依赖于平面。
• 不要用小型组件使布局显得拥挤 — 截图使用了大量开放空间。
• 不要使用趣味性或装饰性图标 — 截图仅使用'+'和'>'等基本符号。
• 避免: 装饰性元素
• 避免: 彩色渐变
• 避免: 圆角
• 避免: 厚重阴影
• 避免: 衬线字体
• 避免: 表情符号或趣味性图标

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko