OpenDesign·你的设计资产库

网页参考

Production Type

一个精致、以留白为主导的字体铸造厂网站，专注于大型排版展示与精选字体集合。

TypographyFoundry
Production Type 网站截图

01

设计气质 DNA

TypographyFoundryCurationType Design

一个汇集高端字体的数字画廊，融合了编辑式呈现与功能性工具。

02

色彩

#ED0000Accent
#000000Ink
#757575Ink soft
#FFFFFFBG
#F2F2F2BG soft
#999999Muted
rgba(0,0,0,0.1)Line

以高对比度单色为基底，辅以一个极具侵略性的红色用于主要操作与品牌标识。

03

字体

grotesque-sans · humanist-sans

  • display72px · 400
  • h140px · 400
  • body15px · 400
  • small11px · 400

展示型文字采用紧凑的负字距以增强视觉冲击力。 · 正文采用充裕的行高以提升可读性。 · 主要品牌字体是一款无衬线怪诞体，在所有 UI 元素中保持统一使用。 · 特殊的字体展示会使用该字体本身进行实际呈现，通常以展示尺度呈现。

04

间距

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

充裕且富有呼吸感的节奏，章节间采用大间距垂直留白，以强调内容层级。

05

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

sm · 5px
md · 6px
lg · 12px
pill · 9999px

使用 1px solid rgba(0,0,0,0.1) 作为细微分隔线；按钮与标签采用药丸形边框。

06

布局

1400container
12columns
24pxgutter
768 / 1024breakpoints

采用不对称网格，包含一个用于字体展示的宽阔主内容区与一个导航侧边栏，运用大型图像卡片与紧凑的排版区块。

07

动效与交互

150msmicro
250mssmall
500msmedium
750mslarge
cubic-bezier(0.26, 1.04, 0.54, 1) for smooth, slightly bouncy UI transitions; cubic-bezier(0.77, 0, 0.175, 1) for more dramatic entrances.easing

页面元素采用流畅的透明度与 transform 过渡。 · 交互元素带有微妙的颜色过渡。 · 主要页面变化采用更长、更具电影感的转场。

交互元素上产生微妙的颜色偏移或透明度变化。 · 通过轻微的缩放或颜色变化提供即时视觉反馈。

08

组件

  • button 药丸形（9999px 圆角），采用黑色填充白色文字，或带边框的幽灵按钮。
  • card 简洁的白色卡片，带有大型图像页眉和精简文字，用于字体集合与播放列表。
  • chip 小型药丸形标签，用于字体风格（例如 'P' 代表生产环境）或类别。
  • input 极简的文本输入框，带有细底边线与微圆角。
  • hero 宏大的排版首屏区域，在纯净背景上以展示尺度呈现单款字体。

09

文案语气与禁用清单

  • 语气 权威、专业，其排版呈现略带诗意。
  • 标题风格 直接且具描述性，通常指明字体或其应用场景。
  • 按钮文案 行动导向，带有箭头，使用诸如 '发现' 或 '查看全部' 等直接语言。
  • 不要为主 UI 使用深色背景——截图显示为以白色背景配黑色文字为主。
  • 不要使用多种点缀色——截图显示仅使用红色（#ED0000）作为黑白基底上的统一点缀。
  • 不要为主按钮使用圆角矩形——截图显示的是药丸形（完全圆角）按钮。
  • 不要使用厚重的投影——截图显示为平面设计，投影极少或无。
  • 不要为 UI 元素使用装饰性或手写体字体——截图对所有界面文字使用统一的无衬线怪诞体。
  • 不要用过多元素使布局拥挤——截图显示有充裕的留白和清晰、聚焦的层级结构。
  • 避免: 过度随意的语言
  • 避免: 过多的感叹号
  • 避免: 模糊的营销话术
  • 避免: 花哨的装饰性元素

10

包内真实截图

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

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

11

System Prompt

这是一个专注于字体呈现与探索的高端字体铸造厂网站。设计采用高对比度单色基底（白色 #FFFFFF，黑色 #000000），辅以一个极具侵略性的红色（#ED0000）用于品牌与主要操作。排版至高无上，UI 使用无衬线怪诞体，字体展示则采用巨大的展示型文字。关键禁忌：绝不为主 UI 使用深色背景，绝不引入多种点缀色，绝不使用厚重投影。布局强调充裕的留白与整洁的、基于卡片的组织方式，用于字体集合与播放列表。文案权威且专业，使用直接、具描述性的标题。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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