精选 · 开放 · 免费
Fictional Typeface
一款喧闹的、漫画风格的字体展示页,专为古怪几何字体设计。
TypographyExpressivePlayfulCuration
01
设计气质 DNA
漫画玩趣古怪喧闹友好
一幅活起来的波普艺术漫画书页
02
色彩
#FD4B38Accent
#000000Ink
#666666Ink soft
#FFE9CEBG
#FFFFFFBG soft
#9D968EMuted
rgba(255,255,255,1.0)Line
柔和桃色背景上的高饱和度波普色彩(红、黄、绿、紫),营造出玩趣、混乱而又统一的漫画美学。
03
字体
humanist-sans
- display
201px · 400 - heading
50px · 400 - body
21px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
漫画分格与有意重叠、散落的元素
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 15px
pill · 999px
极简或白色边框,形状无深色描边
0px 0px 0px 2px rgb(251, 215, 12)
06
布局
1280container
1columns
24pxgutter
768 / 1024breakpoints
散落、非线性的漫画分格构图
07
动效与交互
150msmicro
220mssmall
400msmedium
cubic-bezier(0.34, 1.56, 0.64, 1)easing
悬停时跃动的缩放变换 · 充满活力的漫画风格动画
弹性缓动的缩放变换(1.1-1.2) · 按下状态,尺寸略微缩小
08
组件
- button 圆角药丸按钮,常带粗体背景色并旋转角度
- card 漫画对话框与星爆形状
- chip 旋转标签,纯色背景
- hero 大幅混乱排列的重叠漫画元素
09
文案语气与禁用清单
- 语气 喧闹、热情、玩趣
- 标题风格 全大写、粗体、常带角度旋转
- 按钮文案 以行动为导向,漫画式视觉强调
- 勿用柔和配色——截图显示高饱和度波普色彩
- 勿将元素严格对齐网格——截图显示有意散落的元素
- 勿用柔和阴影——截图显示无投影的纯色形状
- 勿保持文字水平——截图显示多处旋转的文字元素
- 勿用衬线字体——截图显示所有内容均使用人文主义无衬线字体
- 勿保持一致间距——截图显示重叠元素与多变间隙
- 避免: 企业化
- 避免: 正式
- 避免: 含蓄
- 避免: 极简主义
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个玩趣的、漫画风格的字体展示站点。视觉语言采用柔和桃色背景(#FFE9CE)上散落、重叠的漫画元素(对话框、星爆、贴纸)。字体专用于自定义人文主义无衬线字体,颜色为黑色(#000000)。高饱和度强调色包括红色(#FD4B38)、绿色(#3CCB09)、紫色(#8A53FF)和黄色(#FFD80C)。元素有意旋转、重叠、散落,而非遵循严格网格。交互采用弹性、跃动的变换。关键禁忌:绝不使用柔和或企业化配色,绝不将元素对齐僵化网格,绝不使用柔和阴影或边框,也绝不保持文字水平而不添加玩趣旋转。
en · zh-CN · zh-TW · ja · ko