精选 · 开放 · 免费
Milieu Grotesque
一个精选优质字体与设计铸造厂的策展平台。
typefoundry
01
设计气质 DNA
字体排印字体铸造厂设计字体策展
一个面向字体设计师的高端画廊。
02
色彩
#1A73E8Accent
#1E242CInk
#576579Ink soft
#FFFFFFBG
#F4F4F4BG soft
#313945Muted
rgba(30,36,44,1.0)Line
在洁净的浅色背景上使用高对比度的深色文本,并以鲜明的蓝色作为交互元素的强调色。
03
字体
grotesque-sans · humanist-sans
- display
56px · 500 - heading
26px · 400 - body
13px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
统一使用 4px 的倍数作为 padding 和 margin 的基准。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用主墨色绘制 1px 的实线边框。
rgba(0, 0, 0, 0.06) 0px 1px 6px 0px · rgba(0, 0, 0, 0.16) 0px 2px 32px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽首图区块,过渡到用于内容卡片的结构化网格布局。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
所有交互元素均采用平滑过渡 · 广泛的布局变化使用 0.5s 时长
交互元素上的细微颜色或透明度变化。 · 提供即时反馈,无明显的缩放变换。
08
组件
- button 采用实心强调色、药丸形圆角和白色文本的按钮。
- card 以图像为主、界面元素极简的卡片,常采用全出血式摄影构图。
- chip 用于筛选或分类的小型圆角标签。
- input 带有醒目放大镜图标和“AI 搜索”行动号召的搜索栏。
- hero 大型、富有戏剧性的摄影背景,覆盖文本并使用高对比度排印。
09
文案语气与禁用清单
- 语气 专业、权威且富有创意的精致感。
- 标题风格 粗体、简洁且常采用超大尺寸以展示字体效果。
- 按钮文案 直接且以行动为导向,利用强烈的颜色对比。
- 不要使用圆润、友好的图标——截图显示的是尖锐、几何化的 UI 元素
- 不要在各处应用投影——截图显示的是大部分扁平、洁净的表面
- 不要使用多彩的彩虹色板——截图显示的是严谨的蓝色与深中性色方案
- 不要在 UI 中使用手写体或装饰性字体——截图显示的是严格功能性的无衬线字体
- 不要使用低对比度的灰色文本——截图显示的是高对比度的深墨色文本以确保可读性
- 不要在文本后使用杂乱的背景——截图显示的是洁净的白色或纯深色区块
- 避免: 俏皮或异想天开的语言
- 避免: 过于复杂的行话
- 避免: 杂乱的布局
- 避免: 不必要的装饰性元素
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一个具有洁净编辑美学的精致字体铸造厂市场。关键颜色为墨色 #1E242C 在白色 #FFFFFF 上,并以蓝色 #1A73E8 作为强调色。字体排印采用无衬线字体中的怪诞体和人文主义体类别。关键禁忌:避免异想天开的图标,尽量减少投影,避免多彩色板,严格使用功能性无衬线字体,确保高对比度文本,并保持背景洁净以确保可读性。
en · zh-CN · zh-TW · ja · ko