OpenDesign·你的设计资产库

网页参考

Allcapstype

一个简洁的、以排版为核心的字体铸造厂网站,拥有引人注目的霓虹洋红色标志性元素。

TypographyDesign ToolsPremiumCurationClean

封面待补录,可通过原站查看设计。

01

设计气质 DNA

字体铸造厂现代粗体展示

一个纯粹的画廊,排版即是艺术。

02

色彩

#FF009EAccent
#000000Ink
#FFFFFFBG
#999999Muted
rgba(0, 0, 0, 0.1)Line

高对比度的单色调,搭配单一、强烈的霓虹洋红色点缀。

03

字体

grotesque-sans · monospaced

  • display432px · 500
  • heading32px · 400
  • body12px · 400

为 UI 文本使用宽字间距,以维持精致、通透的感觉。 · 将字重严格限制在 400 和 500,以保持统一、现代的外观。 · 允许展示型排版极其巨大且富有表现力。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

非对称布局,配有充裕的水平间距。

05

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

sm · 3px
md · 4px
lg · 16px
pill · 999px

无边框;依靠间距和颜色进行视觉区分。

06

布局

1440container
12columns
18pxgutter
768 / 1024breakpoints

全宽主视觉区域,随后是字体样本网格展示。

07

动效与交互

100msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

为交互元素使用平滑的透明度和变换过渡。 · 悬停时产生细微的缩放或颜色变化。

微妙的颜色变化或透明度调整。 · 即时视觉反馈。

08

组件

  • button 高对比度的胶囊形按钮,采用霓虹洋红色背景。
  • card 极简风格的卡片,呈现字体样本,聚焦于排版本身。
  • chip 小巧、干净的标签,用于展示样式数量与元数据。
  • input 极简的无边框输入框。
  • hero 占据主导的展示型字体,带有柔和的霓虹洋红色光晕效果。

09

文案语气与禁用清单

  • 语气 专业、精致,略带趣味性。
  • 标题风格 粗体、以展示为主,常带有霓虹光效。
  • 按钮文案 直接且以行动为导向(例如:'购买')。
  • 不要使用深色背景作为主表面——截图显示的是明亮的白色画布。
  • 不要将霓虹洋红色点缀用于大段文本——它仅用于小型交互元素和主视觉光晕。
  • 不要在大多数组件上使用圆角——截图显示的是方形或仅有极微圆角的元素。
  • 不要使用投影来营造深度——该设计依赖于扁平表面与色彩对比。
  • 不要使用小而拥挤的排版——该设计优先考虑大尺度与充足留白。
  • 不要使用复杂的多色渐变——调色板是严格的单色加单一点缀色。
  • 避免: 避免使用过于随意或口语化的语言。
  • 避免: 避免在界面上堆砌不必要的文本。
  • 避免: 避免使用多种相互竞争的点缀色。

10

包内真实截图

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

11

System Prompt

这是一个高端字体铸造厂网站,采用简洁、高对比度的美学风格。主色调由纯白色背景 (#FFFFFF) 和纯黑色文本 (#000000) 构成,单一的、鲜艳的霓虹洋红色 (#FF009E) 被审慎地用于交互元素和主视觉光晕效果。排版采用粗犷、富有表现力的 grotesque-sans 展示型字体与精致、字间距宽松的正文文本相结合。布局宽敞且基于网格,让排版得以呼吸。关键约束:不要将霓虹洋红色用于正文;避免使用厚重的投影;保持边角大多为方形;坚持严格的单色加单一点缀色的调色板;并确保元素间有充足的留白。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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