110 lines
8.0 KiB
JSON
110 lines
8.0 KiB
JSON
{
|
||
"meta": {
|
||
"name": "备考通 Design Tokens",
|
||
"version": "1.0.0",
|
||
"date": "2026-08-26",
|
||
"source": "设计规范-备考通-20260826.md (Ardot 文件 718570750880145 真实变量校准)",
|
||
"scope": "响应式 Web（移动优先），桌面 1440×900 / 移动 390×844",
|
||
"note": "前端唯一颜色/排印/圆角/阴影来源。前端必须引用变量，禁止硬编码。"
|
||
},
|
||
"color": {
|
||
"bgCanvas": { "value": "#F7F6F2", "type": "color", "role": "画布/页面背景（浅米白）" },
|
||
"bgCard": { "value": "#FFFFFF", "type": "color", "role": "卡片/面板背景" },
|
||
"bgSoft": { "value": "#EFEFF5", "type": "color", "role": "图标底、次级填充、标签底、进度条轨道" },
|
||
"borderSubtle":{ "value": "#E8E6E0", "type": "color", "role": "卡片描边、分隔线（中性浅暖）" },
|
||
|
||
"primary": { "value": "#2B4C8F", "type": "color", "role": "主按钮、主色、选中态高亮底、进度填充" },
|
||
"primaryDeep": { "value": "#1B2D5B", "type": "color", "role": "渐变深端、页面主标题强调、深蓝 hero 底" },
|
||
"primaryBright": { "value": "#3A6BD8", "type": "color", "role": "渐变亮端、hero 卡片、active 图标" },
|
||
|
||
"textPrimary": { "value": "#1A1F2E", "type": "color", "role": "主标题、正文主色" },
|
||
"textSecondary": { "value": "#6B7280", "type": "color", "role": "副标题、描述文字、图标默认色" },
|
||
"textMuted": { "value": "#9CA2AD", "type": "color", "role": "弱提示、占位、次要标记" },
|
||
|
||
"success": { "value": "#1B9266", "type": "color", "role": "正向趋势、正确率、达标" },
|
||
"successSoft": { "value": "#E0F5EB", "type": "color", "role": "正向标签底、打卡徽章底" },
|
||
"warning": { "value": "#DC9A1E", "type": "color", "role": "提醒、中等状态" },
|
||
"warningSoft": { "value": "#FEF0D1", "type": "color", "role": "提醒标签底" },
|
||
"danger": { "value": "#D14C55", "type": "color", "role": "负向、错误、待复习错题数" },
|
||
"dangerSoft": { "value": "#FCE5E7", "type": "color", "role": "危险标签底、错误提示底" },
|
||
|
||
"onAccent": { "value": "#FFFFFF", "type": "color", "role": "主色/深蓝底上的前景色（按钮文字、深蓝 hero 文字）" },
|
||
"white": { "value": "#FFFFFF", "type": "color", "role": "纯白（唯一允许的裸色值，卡片/描边场景）" },
|
||
|
||
"gradients": {
|
||
"heroDeep": { "value": "linear-gradient(135deg, #1B2D5B 0%, #3A6BD8 100%)", "type": "gradient", "role": "首页 hero 卡 / 要闻置顶卡（primaryDeep→primaryBright）" },
|
||
"heroPrimary":{ "value": "linear-gradient(180deg, #2B4C8F 0%, #1B2D5B 100%)", "type": "gradient", "role": "移动首页深蓝 hero（primary→primaryDeep）" }
|
||
}
|
||
},
|
||
|
||
"font": {
|
||
"fontSans": { "value": "'Sarasa Gothic SC', 'PingFang SC', sans-serif", "type": "fontFamily", "role": "中文正文/标题/标签" },
|
||
"fontNum": { "value": "'Inter', 'SF Pro', sans-serif", "type": "fontFamily", "role": "统计数字/时间/单价/代码标识" }
|
||
},
|
||
|
||
"typography": {
|
||
"h1": { "fontSize": "24px", "fontWeight": "700", "lineHeight": "1.2", "fontFamily": "fontSans", "color": "textPrimary", "role": "页面主标题（数据中枢/刷题中心/模考分析/备考计划/设置/要闻）" },
|
||
"dataNum": { "fontSize": "22px", "fontWeight": "700", "lineHeight": "1.2", "fontFamily": "fontNum", "color": "textPrimary", "role": "统计数字核心值（数据大字，数值字体 Inter Bold 必需）" },
|
||
"cardTitle": { "fontSize": "15px", "fontWeight": "600", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "textPrimary", "role": "区块/卡片标题" },
|
||
"label": { "fontSize": "12px", "fontWeight": "400", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "textSecondary", "role": "字段名、标签、表头" },
|
||
"labelBold": { "fontSize": "12px", "fontWeight": "600", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "textSecondary", "role": "强标签、徽章文字" },
|
||
"subtitle": { "fontSize": "13px", "fontWeight": "400", "lineHeight": "1.5", "fontFamily": "fontSans", "color": "textSecondary", "role": "页面副文案、表头摘要" },
|
||
"button": { "fontSize": "13px", "fontWeight": "600", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "onAccent", "role": "按钮文字" },
|
||
"trend": { "fontSize": "11px", "fontWeight": "500", "lineHeight": "1.4", "fontFamily": "fontSans", "color": "success", "role": "涨跌、占比标注、趋势指数（color 按语义覆盖 success/danger）" },
|
||
"body": { "fontSize": "14px", "fontWeight": "400", "lineHeight": "1.5", "fontFamily": "fontSans", "color": "textPrimary", "role": "正文描述、题干" }
|
||
},
|
||
|
||
"radius": {
|
||
"sm": { "value": "8px", "type": "dimension", "role": "图标底、小徽章、输入框内元素" },
|
||
"md": { "value": "12px", "type": "dimension", "role": "次级卡、分段切换、标签、表单输入框" },
|
||
"lg": { "value": "16px", "type": "dimension", "role": "标准卡片（默认）" },
|
||
"xl": { "value": "24px", "type": "dimension", "role": "Hero 渐变大卡" },
|
||
"pill": { "value": "999px", "type": "dimension", "role": "头像、胶囊按钮、天数徽章" },
|
||
"btn": { "value": "10px", "type": "dimension", "role": "主/次按钮圆角" }
|
||
},
|
||
|
||
"shadow": {
|
||
"level0": { "value": "none", "type": "boxShadow", "role": "平面卡片（默认）" },
|
||
"level1": { "value": "0 1px 2px rgba(0,0,0,0.04)", "type": "boxShadow", "role": "悬浮态轻投影" },
|
||
"level2": { "value": "0 4px 12px rgba(27,45,91,0.08)", "type": "boxShadow", "role": "弹层、浮起卡片、TabBar" },
|
||
"level3": { "value": "0 8px 24px rgba(27,45,91,0.14)", "type": "boxShadow", "role": "模态、下拉菜单" }
|
||
},
|
||
|
||
"spacing": {
|
||
"space1": { "value": "4px", "type": "dimension" },
|
||
"space2": { "value": "8px", "type": "dimension" },
|
||
"space3": { "value": "12px", "type": "dimension" },
|
||
"space4": { "value": "16px", "type": "dimension" },
|
||
"space5": { "value": "20px", "type": "dimension" },
|
||
"space6": { "value": "24px", "type": "dimension" },
|
||
"space8": { "value": "32px", "type": "dimension" }
|
||
},
|
||
|
||
"layout": {
|
||
"sidebarWidthDesktop": { "value": "220px", "type": "dimension", "role": "桌面侧边栏宽度" },
|
||
"contentMaxWidth": { "value": "1220px", "type": "dimension", "role": "桌面内容主区宽" },
|
||
"desktopPadding": { "value": "32px", "type": "dimension", "role": "桌面左右 padding" },
|
||
"mobilePadding": { "value": "24px", "type": "dimension", "role": "移动左右 padding" },
|
||
"cardPaddingDesktop": { "value": "24px", "type": "dimension", "role": "卡片内边距（桌面）" },
|
||
"cardPaddingMobile": { "value": "16px", "type": "dimension", "role": "卡片内边距（移动）" },
|
||
"cardGapDesktop": { "value": "20px", "type": "dimension", "role": "卡片间距（桌面）" },
|
||
"cardGapMobile": { "value": "12px", "type": "dimension", "role": "卡片间距（移动）" },
|
||
"tabBarHeightMobile": { "value": "120px", "type": "dimension", "role": "移动 TabBar 高度" },
|
||
"btnHeight": { "value": "40px", "type": "dimension", "role": "标准按钮高度" },
|
||
"btnHeightPill": { "value": "44px", "type": "dimension", "role": "胶囊按钮高度" }
|
||
},
|
||
|
||
"breakpoint": {
|
||
"mobile": { "value": "390px", "type": "dimension", "role": "移动优先基准" },
|
||
"desktop":{ "value": "1440px", "type": "dimension", "role": "桌面基准" }
|
||
},
|
||
|
||
"motion": {
|
||
"hoverFast": { "value": "120ms", "type": "duration", "role": "按钮 hover 背景过渡" },
|
||
"cardHover": { "value": "160ms", "type": "duration", "role": "卡片 hover 投影过渡" },
|
||
"switch": { "value": "250ms", "type": "duration", "role": "切换/展开" },
|
||
"tabFade": { "value": "200ms", "type": "duration", "role": "移动 Tab 切换淡入" },
|
||
"ease": { "value": "ease", "type": "cubicBezier", "role": "默认缓动" }
|
||
}
|
||
}
|