精选 · 开放 · 免费
Variable Fonts
一个专注于排版、可变字体与品牌案例的简洁资源中心。
TypographyEditorialCleanCurationReference
01
设计气质 DNA
TypographyVariable FontsFoundryExpertiseDesign
一个精致的设计资源库与研究中心
02
色彩
#1A73E8Accent
#1E242CInk
#576579Ink soft
#FFFFFFBG
#FCFCFDBG soft
#E7EAEABG quiet
rgba(231, 234, 238, 1)Line
简洁、高对比度的中性基底，搭配单一的功能性蓝色强调色
03
字体
grotesque-sans · monospace
- display
56px · 500 - h2
24px · 500 - body
16px · 400
使用标准的系统回退字体栈（Helvetica, Arial），以确保UI渲染的一致性 · 保持模块化比例，以建立清晰的排版层级 · 正文权重保持为400，以获得最佳可读性
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
标准4px网格系统，间距保持一致的24px
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 16px
pill · 999px
1px solid #E7EAEA
0px 1px 6px rgba(0, 0, 0, 0.06) · 0px 11px 15px rgba(0, 0, 0, 0.05)
06
布局
1280container
3columns
24pxgutter
768 / 1024breakpoints
响应式三列卡片网格，在移动端自动堆叠
07
动效与交互
220msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
卡片hover时，阴影与变换的微妙过渡 · 内容加载时的平滑淡入效果
增加交互卡片的阴影深度并略微放大 · 立即的视觉反馈与微妙的状态变化
08
组件
- button 功能性蓝色强调色按钮，白色文字，带有轻微圆角
- card 图片为主的卡片，16px圆角，hover时带有微妙的阴影
- chip 简单的文字分类标签，以点号分隔
- input 简洁的搜索输入框
- hero 大型、左对齐的排版式首屏区域
09
文案语气与禁用清单
- 语气 专业、权威且具教育性
- 标题风格 粗体、直接、以主题为核心
- 按钮文案 清晰、以行动为导向（例如“联系销售”）
- 勿使用过度装饰的衬线字体——截图展示的是简洁的grotesque-sans字体系统
- 勿添加厚重的投影——截图仅显示非常微妙的box-shadow
- 勿将所有文字居中——截图显示标题与正文均为左对齐
- 勿使用多种强调色——截图仅显示单一的功能性蓝色
- 勿为长文本使用过紧的行高——截图显示舒适的1.5倍行高
- 勿为所有元素使用圆角——截图显示直角与圆角卡片并存
- 避免: 避免使用过于随意的语言或俚语
- 避免: 避免使用会分散排版注意力的杂乱布局
- 避免: 避免使用会干扰阅读的不必要动画
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个专业的排版资源中心与字体铸造厂网站。它使用简洁、高对比度的调色板，以白色(#FFFFFF)和深墨水蓝(#1E242C)为核心，搭配单一的功能性蓝色(#1A73E8)用于主要操作。排版采用标准的grotesque-sans字体类别，同时用于标题和正文，并使用Helvetica和Arial作为回退字体栈。布局结构宽敞、左对齐，留有充足的空白。关键设计准则：坚持严格的单色强调色系统，保持清晰的排版层级，使用微妙、功能性的阴影而非厚重的装饰性阴影。避免杂乱的UI或过于活泼的元素，以免削弱其权威、教育性的基调。
en · zh-CN · zh-TW · ja · ko