OpenDesign·你的设计资产库

网页参考

Displaay

一家独立字体铸造厂,以俏皮、艺术化的视觉效果呈现其独特的零售和定制字体。

TypographyFoundry
Displaay 网站截图

01

设计气质 DNA

字体铸造厂零售字体定制字体独立

一个通过富有表现力的布局展示字体艺术的创意工作室。

02

色彩

#020202Ink
#76756FInk soft
#FFFFFFBG
#C9C9C8BG soft
rgba(0,0,0,1.0)Line

以单色为基底,通过大胆、高对比度的摄影和插图来定义色彩故事。

03

字体

humanist-sans

  • display44px · 400
  • headline28px · 400
  • body15px · 400

标题使用简洁的 humanist-sans 字体,字间距紧凑。 · 正文保持充足的行高以确保可读性。 · 字体粗细主要为常规(400),营造精致的编辑感。

04

间距

4px
8px
15px
20px
25px
32px
48px
96px

章节之间留白充足,UI 元素内部采用紧凑的 padding。

05

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

sm · 8px
md · 10px
lg · 20px
pill · 999px

按钮和标签采用 1px 实线黑边框,形成锐利的图形轮廓风格。

无

06

布局

1400container
12columns
24pxgutter
768 / 1024breakpoints

首屏为左对齐的排版文字与右对齐的操作按钮;下方为基于网格的功能卡片。

07

动效与交互

150msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素上平滑的背景和颜色过渡。

细微的背景或边框颜色变化,伴有平滑过渡。 · 即时状态变更,通常触发页面或章节导航。

08

组件

  • button 药丸形和圆角矩形轮廓按钮,带有 1px 实线边框,在 hover 状态下于填充与轮廓样式间切换。
  • card 以图像为主的卡片,搭配粗体文字,并采用黄色或绿色等明亮背景色。
  • chip 用于分类的小型轮廓标签,如“新品”、“定制”或“零售”。
  • input 极简风格,可能集成在商店功能中。
  • hero 大型排版导语陈述,搭配高冲击力的摄影横幅。

09

文案语气与禁用清单

  • 语气 专业、直接,且略带俏皮。
  • 标题风格 加粗、小写或句首大写的陈述,强调铸造厂的使命。
  • 按钮文案 行动导向的标签,如“试用”、“测试器”和“商店”。
  • 不要使用投影或柔和渐变——截图显示为锐利的 1px 实线边框和扁平表面。
  • 不要将所有文字居中对齐——截图显示为强烈的左对齐排版层次。
  • 不要对所有元素都使用粗体——截图显示主要使用常规(400)字重。
  • 不要将导航隐藏在复杂菜单后——截图显示为直接、可见的药丸形链接。
  • 不要将柔和、柔和的色调作为主要调色板——截图显示为高对比度的黑/白/灰基底,搭配鲜艳的图像填充。
  • 不要使用标准系统字体——截图对所有品牌和标题都使用了自定义字体。
  • 避免: 避免过于复杂的句子或华丽的辞藻。
  • 避免: 避免为 UI 元素使用装饰性字体;保持其功能性。
  • 避免: 避免杂乱的布局;保持充足的留白。

10

包内真实截图

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

11

System Prompt

这是一个独立字体铸造厂(Displaay)的网站,具有干净、编辑感的审美,其单色调色板(#FFFFFF、#C9C9C8、#020202、#76756F)是其根基。排版依赖自定义 humanist-sans 字体,具有大尺寸展示比例和常规字重。布局宽敞且左对齐,为按钮和标签等 UI 组件使用锐利的 1px 黑色边框。关键避免项:避免柔和阴影或无边框的圆角矩形,避免将所有文字居中,切勿为展示标题使用通用的无衬线字体。设计精致、俏皮且具有画廊感,专注于字体样本和摄影的视觉冲击力。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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