精选 · 开放 · 免费
Sharp Type
一个为全球化数字字体铸造厂打造的、以排版为核心的精致网站。
typefoundry
01
设计气质 DNA
字体铸造厂全球化排版设计设计工具集定制字体
一个用于高端字体的纯粹画廊目录。
02
色彩
#000000Ink
#FFFFFFBG
#BDBDBDMuted
rgba(0,0,0,1)Line
极简的黑白搭配,辅以高饱和度、多样化的圆点指示器用于字体分类。
03
字体
geometric-sans · humanist-sans · monospace
- display
40px · 700 - body
21px · 400 - caption
14px · 400
仅用于标题和特定强调词,严格使用粗体字重 (700)。 · 对于大型展示文本,保持紧凑的字间距(负值)。 · 所有正文和导航元素使用标准字重 (400)。
04
间距
7px
14px
21px
28px
35px
42px
49px
以 7px 为基础单位,统一用于内边距、间距和外边距。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 10px
lg · 14px
pill · 999px
主要分隔线使用 1px 细黑线,次要边框则使用浅灰色 (rgb(189, 189, 189))。
rgb(128, 128, 128) 0px 0px 5px 0px
06
布局
1440container
3columns
21pxgutter
768 / 1024breakpoints
一种流体布局,在移动端呈现单列,而在字体目录中过渡为三列网格。
07
动效与交互
220msmicro
300mssmall
400msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
所有元素均通过 `all 0.3s` 应用过渡效果。 · 交互元素(如导航菜单)可能使用右侧定位的滑动面板。
所有交互元素使用标准的指针光标 (pointer)。 · 在指针按下时立即响应,符合标准网页交互。
08
组件
- button 幽灵按钮,带有 2px 蓝色边框、圆角端点和蓝色大写文本。
- card 用于字体列表的最小化卡片式行,由细线分隔。
- chip 放置在字体名称旁边的、小型的圆形色彩指示器(圆点)。
- input 在提供的截图中未可见。
- hero 一个极简的首屏区域,包含一个采用混合字重的大号描述性标题和一个彩色圆点。
09
文案语气与禁用清单
- 语气 专业、权威且极简。
- 标题风格 清晰、描述性强,并强调字体的技术范畴。
- 按钮文案 简洁、大写,通过色彩和边框实现视觉区分。
- 不要使用高饱和度的主色作为大面积背景——截图显示色彩仅严格用于小型圆点指示器。
- 不要使用深色模式或彩色背景——截图显示背景严格为白色 (#FFFFFF)。
- 不要对所有元素使用厚重的投影——截图显示仅在一个特定元素上使用了一个细微的投影。
- 不要为主界面或导航使用衬线字体——截图显示这些元素使用的是无衬线字体(分类为 humanist-sans)。
- 不要为导航或列表使用居中文本——截图显示所有导航和字体列表均为严格左对齐。
- 不要在一个组件中同时使用多种强调色——截图显示每个字体条目只使用一种颜色。
- 避免: 避免使用复杂的渐变或厚重的投影。
- 避免: 避免使用过于俏皮或随意的语言。
- 避免: 避免使用杂乱的布局或过多分散字体本身注意力的图像。
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
该网站是一个为全球化字体铸造厂打造的、精致的极简主义作品集。其设计 DNA 定义于一个超洁净、高对比度的黑色 (#000000) 与白色 (#FFFFFF) 配色方案,色彩仅被谨慎地用作字体名称旁的小型饱和圆形指示器。排版上,正文使用 humanist-sans 字体,展示元素使用 geometric-sans 字体,标题采用紧凑字间距,并基于 7px 的间距节奏。关键的设计约束包括:1) 保持严格的单色基调,不使用彩色背景,2) 确保所有导航和文本严格左对齐,3) 仅将色彩作为通过小型圆点指示器进行精确分类的工具,绝不作为主要 UI 背景。
en · zh-CN · zh-TW · ja · ko