精选 · 开放 · 免费
Lineto
一个简洁的单色字体样张界面,用于展示 Electa 字体家族。
typefoundry
01
设计气质 DNA
排版字体铸造厂字体设计样张极简
现代字体铸造厂的数字字体样张手册
02
色彩
#000000Ink
#FFFFFFBG
#FFFDF7BG quiet
#E0E0E0Muted
rgba(0,0,0,0.12)Line
严格的单色无彩色方案
03
字体
transitional-serif · humanist-sans · monospace
- display
20px · 400 - body
19px · 400
基础字号为 19px,字间距 0.38px · 正文文本行高为 23px · 导航与强调文本行高为 38px
04
间距
2px
4px
8px
16px
24px
32px
48px
64px
96px
紧密网格,基础单元为 2px 与 7.6px
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 19px
lg · 19px
pill · 999px
无可见边框,严格单色边缘
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
固定页眉含标志与搜索,极简滚动主体,固定底部操作栏
07
动效与交互
200msmicro
200mssmall
1500msmedium
lineareasing
透明度过渡用于 1.5s 的渐变 · 宽度与可见性过渡用于 0.2s 的切换
按钮和链接上的指针光标 · 平滑的过渡触发
08
组件
- button 实心黑色胶囊形按钮,配白色文本及箭头/眼睛图标
- card 无,布局依赖原始排版样张文本
- chip 无
- input 黑色圆形内的搜索图标,底部栏中的文本输入框
- hero 作为主要视觉元素的大规模排版样张级联
09
文案语气与禁用清单
- 语气 极简、冷静、专业
- 标题风格 直接,无标点,品牌名小写
- 按钮文案 祈使句式配合图标(阅读更多,查看全部)
- 不要使用多种字体族——截图显示仅使用了一种无衬线体和一种衬线体
- 不要添加渐变或投影——截图显示为完全扁平的哑光黑白表面
- 不要居中主要文本块——截图显示样张级联严格左对齐
- 不要使用装饰性图像或照片——截图显示纯排版是唯一的视觉元素
- 不要为样张使用大字号——截图显示所有正文元素均为统一的 19px 文本
- 不要在主按钮上使用圆角——截图显示为完全的胶囊形按钮
- 避免: 过多的空白内边距
- 避免: 彩色强调色
- 避免: 装饰性元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个用于 Lineto 设计的 Electa 字体的字体铸造厂样张网站。设计采用仅使用黑与白的极简单色界面。主要字体类别为用于导航和 UI 元素的人文无衬线体,用于主要字体样张展示的过渡衬线体。关键颜色严格限定为 #000000 和 #FFFFFF,并在部分样张区域使用微妙的离白 #FFFDF7。布局左对齐,顶部和底部固定,设有导航栏和操作栏。关键约束:切勿使用彩色强调色,切勿添加装饰性图像,切勿使用投影,并严格保持单色无彩色方案。排版是界面的唯一焦点。
en · zh-CN · zh-TW · ja · ko