IvyLabs Design BostonIvy 爬山虎 v0.3.0

字体

字族

风格 界面(ui) 标题(display) 数字(data)
青藤 Inter → 系统黑体 同界面 Inter(等宽数字)
萌虎 Fredoka → 系统圆体 → 系统黑体 同界面 Fredoka
像素 JetBrains Mono → 系统黑体 Silkscreen(只用于英文和数字)→ JetBrains Mono JetBrains Mono

字号阶梯

每种风格六级,名字相同,数值不同。组件只引用名字:Web 用 var(--type-task),Flutter 用 textTheme.bodyLarge。

名称 用途 Flutter 青藤 萌虎 像素
title 页面、项目标题 headlineSmall 22 / 28 · 700 32 / 38 · 700 22 / 30 · 700
heading 分组、区块标题 titleMedium 15 / 22 · 600 17 / 24 · 700 11 / 16 · Silkscreen
task 任务标题、按钮 bodyLarge 14 / 20 · 500 16 / 22 · 600 13 / 20 · 500
body 描述、评论、正文 bodyMedium 14 / 22 · 400 15 / 22 · 500 13 / 20 · 400
caption 元信息、标签、计数 labelMedium / bodySmall 12 / 16 · 500 13 / 18 · 600 12 / 16 · 400
timer 计时器数字 displaySmall 26 / 30 · 700 40 / 44 · 700 24 / 28 · Silkscreen

格式为「字号 / 行高 · 字重」,单位 px。

规则