成对使用
primary + primary-inktint + on-tint
深色主按钮用深字，不把白字放在浅色容器上。
A SHARED WAY TO DESIGN
让每一页，都像同一个产品。
从已确认的 App 推介页面，提炼成可以直接上手的 V3 视觉语言。
01 / COLOR WITH A PURPOSE
主题会变，层级不变。
中性表面承载内容，主题色标识操作，状态色解释结果。
不要靠颜色独自解释状态
“已完成”“需补充”与图标一起显示。切换主色时，成功色保持成功语义。
02 / TYPE DOES THE ORGANIZING
Montserrat，让层级更清楚。
DISPLAY / 28–40 · 800 · ink
推荐 Pixiv-Shaft
SECTION / 20 · 700 · ink
推荐任务
CARD / 15–16 · 600 · ink
邀请首位好友
BODY / 14–16 · 400 · ink
推荐朋友下载并使用 Pixiv-Shaft。条件、期限和下一步都写清楚，让用户自己决定。
CAPTION / 11–12 · 400 · muted
字号参考以可读性为底线，Android 正文使用 sp 并支持系统缩放。
Aa 0123400 · 正文
Aa 0123500 · 辅助强调
Aa 0123600 · 卡片与数字
Aa 0123700 · 标题
Aa 0123800 · 主视觉
03 / BUILD WITH THE SAME PIECES
从这些组件，组成新页面。
这里的组件可直接复用；示例交互不连接业务接口。
A / 操作层级
每个区域，一个最强操作
48px 热区 · 胶囊形状 · 按压缩放 0.96
B / 形状分工
图标 17/7、卡片 22、面板 24、Hero 30。异形集中在小面积记忆点，正文与列表保持平稳。
邀请首位好友
标题说明任务，正文补充条件，下方进度告诉用户下一步。
有效体验1 / 3
04 / DESIGN WHAT HAPPENS NEXT
状态完整，页面才完整。
点击下面的状态，观察标题、说明和动作一起变化。
未开始◷ 审核中! 需补充! 加载失败✓ 已完成
05 / A LANGUAGE, NOT ONE LAYOUT
业务可以不同，风格依然相通。
运营 / 会员
标题 + Hero + 任务卡 + 汇总。一个有记忆点的主视觉。
下载 / 管理
紧凑汇总 + 筛选 + 列表。稳定的状态与操作。
设置 / 账户
分区 + 连通行。外角与内角形成清楚的分组。
作品 / 作者
内容主视觉 + 轻容器。沿用 V3 沉浸式环境色。