变量档案 · Design Tokens
design 站全部全局变量 · 31 个 · 4 分组 · 建于 2026-10-25 · 色系 43 色另见色系展示页 · 以后新增变量须同步本页
字体族 ×2
Aa 企业级 B2B 独立站 Inter · PingFang · 微雅黑
ty-font = "Inter","PingFang SC","Microsoft YaHei",sans-serif · 全站唯一主字体族,标题靠字重/字号区分
Aa code {} => Consolas Monaco 等宽
ty-font-mono = Consolas, Monaco, monospace · 代码 / 数据展示专用,非正文字体
字号 ×8(m 档以上 clamp 流式)
Aa 企业站文字 12px · ty-text-xs
Aa 企业站文字 14px · ty-text-s
Aa 企业站正文 15~16px · ty-text-m
Aa 强调文字 17~18px · ty-text-l
Aa 小标题 20~24px · ty-text-xl
Aa 区块标题 25~32px · ty-text-2xl
Aa 页面标题 30~42px · ty-text-3xl
Aa Banner 主标题 36~56px · ty-text-4xl
间距 ×15(色块宽 = 实际值)
ty-space-4 = 4px · 图标与文字间隙
ty-space-8 = 8px · 紧凑元素内距
ty-space-12 = 12px · 网格 gap
ty-space-16 = 16px · 卡片内距
ty-space-24 = 24px · 组件间距
ty-space-32 = 32px · 卡片间 / gap-div
ty-space-48 = 48px · 模块内分区(移动端重设值档)
ty-space-80 = 80px · 区块上下距(桌面)
ty-space-120 = 120px · 大区块 / Hero 上下距
ty-space-section = 80px · ★ 区块统一上下距(语义)
ty-space-gap-block = 40px · ★ 区块内模块间(语义)
ty-space-gap-div = 32px · 分隔间距(语义)
ty-space-gap-item = 16px · 列表条目 / 组内元素间(语义,补 32 与 10 之间缺档)
ty-space-gap-element = 10px · 元素间(语义)
ty-space-p-button = 10px · 文段与按钮间距(语义)
圆角 ×6
ty-radius-4 = 4px · 徽章 / 小按钮
ty-radius-8 = 8px · 输入框 / 小卡
ty-radius-12 = 12px · ★ 卡片标准圆角(全站主力)
ty-radius-16 = 16px · 大卡 / 弹窗
ty-radius-24 = 24px · 大区块 / 特色卡
ty-radius-full = 9999px · 胶囊按钮 / 头像
以上即当前全部 31 个全局变量 —— 与主题样式档案页(ty-theme-styles)、色系展示页(ty-colors)共同构成 design 站设计基础三档案。以后新增变量,建完即同步本页。