精选 · 开放 · 免费
Frere-Jones Type
一家高端独立字体铸造厂，通过简约、编辑式的设计展示原创字体。
typefoundry
01
设计气质 DNA
字体设计字体铸造厂定制字体零售字体独立
一个精致的、具有传统工艺精神的工作室，优先考虑字形的清晰度与美感。
02
色彩
#87ADE0Accent
#000000Ink
#FFFFFFBG
#E6E6E6Muted
rgba(0,0,0,1)Line
高对比度单色方案，配以一个用于展示样式的灰蓝色点缀色。
03
字体
transitional-serif · humanist-sans · monospaced
- display
86px · 700 - h1
56px · 700 - body
16px · 400 - caption
12px · 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
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个高端、编辑风格的独立字体铸造厂网站。它使用严格的高对比度单色方案（黑色 #000000 和白色 #FFFFFF），并配以一个专门用于大型字体样本的灰蓝色点缀色（#87ADE0）。排版上，展示文字使用粗体过渡衬线字体，正文和界面使用简洁的人文主义无衬线字体。布局宽敞且基于网格，将字体样本本身作为主要的视觉焦点。关键约束：不要在界面元素上使用圆角；保持边框极简（1px实心黑线）；避免投影；且一次只使用一种点缀色。保持高度精致、内敛的语调，让字形自己说话。
en · zh-CN · zh-TW · ja · ko