OpenDesign·你的设计资产库

网页参考

Frere-Jones Type

一家高端独立字体铸造厂,通过简约、编辑式的设计展示原创字体。

TypographyFoundry
Frere-Jones Type 网站截图

01

设计气质 DNA

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

一个精致的、具有传统工艺精神的工作室,优先考虑字形的清晰度与美感。

02

色彩

#87ADE0Accent
#000000Ink
#FFFFFFBG
#E6E6E6Muted
rgba(0,0,0,1)Line

高对比度单色方案,配以一个用于展示样式的灰蓝色点缀色。

03

字体

transitional-serif · humanist-sans · monospaced

  • display86px · 700
  • h156px · 700
  • body16px · 400
  • caption12px · 400

使用过渡衬线字体作为大型展示文字,以突显字体细节 · 所有功能性界面和正文使用人文主义无衬线字体

04

间距

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

充裕的留白,遵循严格的4px基线网格。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

使用1px实心黑线作为细微分隔符和按钮边框。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

清晰的网格布局,为主视觉、关于、博客及定制工作划分明确区块。

07

动效与交互

100msmicro
250mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

主视觉轮播中字体样本之间的细微交叉淡入淡出

文本链接和按钮在悬停时出现细微的颜色变化或下划线。 · 立即过渡到下一个状态或页面。

08

组件

  • button 简单的带下划线文字,或黑底白字的样式;不使用圆角。
  • card 全宽区块或用于展示定制工作的粗网格块,通常为黑底白字。
  • chip 简单的带下划线文字标签,如' Releases '。
  • input 极简、无边框的搜索栏。
  • hero 巨大的、全出血的黑色或蓝色字体样本,旨在展示字体本身。

09

文案语气与禁用清单

  • 语气 权威、精致且内敛。
  • 标题风格 简短、直接,常直接使用字体名称。
  • 按钮文案 低调的文字链接,如'关于我们'或'阅读全文 →',很少使用大型按钮。
  • 不要在按钮或卡片上使用圆角——截图显示为尖锐的90度直角。
  • 不要在界面元素上使用投影——截图显示为完全扁平的表面。
  • 不要使用广泛、多彩的调色板——截图显示为严格的黑白加单一点缀色方案。
  • 不要使用装饰性无衬线字体作为大型展示——截图显示使用粗体过渡衬线字体作为样本。
  • 不要使用厚重、粗壮的边框——截图显示使用非常细的1px边框或无边框。
  • 不要在界面中堆砌图标——截图几乎完全依赖文字和字体。
  • 避免: 避免使用过度表现性或装饰性的元素
  • 避免: 避免使用明亮、霓虹或冲突的颜色
  • 避免: 避免在主要界面元素上使用圆角

10

包内真实截图

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

11

System Prompt

这是一个高端、编辑风格的独立字体铸造厂网站。它使用严格的高对比度单色方案(黑色 #000000 和白色 #FFFFFF),并配以一个专门用于大型字体样本的灰蓝色点缀色(#87ADE0)。排版上,展示文字使用粗体过渡衬线字体,正文和界面使用简洁的人文主义无衬线字体。布局宽敞且基于网格,将字体样本本身作为主要的视觉焦点。关键约束:不要在界面元素上使用圆角;保持边框极简(1px实心黑线);避免投影;且一次只使用一种点缀色。保持高度精致、内敛的语调,让字形自己说话。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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