色彩体系 · COLOR
背景 · 深海军蓝#0C1424 / 浅色 #F5F7FB
警示 · 红(跌/利息)#F4506B / 浅色 #E5484D
正文 · 白#F2F6FC / 浅色 #0E1B2C
字体排版 · TYPE
区块标题 · Section 12/800/字距1.8
迷你标签 · Label 10.5/800/字距1.6
正文 Body 14/400 —— 高数据密度、即时回应用户操作。
数字字体 · 系统适配(弃用 DIN,其比例数字无法严格等宽):Windows Segoe UI → macOS/iOS 系统字(SF)→ Android Roboto;全量数字启用 tabular-nums + lining-nums,保证每位等宽、列对齐端正。
SF Mono / Consolas · 仅用于公式与十六进制色值
间距栅格 · SPACING
基数 4px · 容器 1140px · 卡片内边距 22px · 圆角 16/12/9 · 药丸 999 · 区块间距 40px · 栅格 2/3 列自适应(≤900px 折叠单列)
基础组件 · COMPONENTS
12期24期
● 状态徽章
空状态插图 · EMPTY STATE(该站亦提供插图资源):无数据 / 列表为空时展示,统一 Filled 风格、currentColor 自适应深浅主题。
按钮状态规范 · BUTTON STATES:选中 / 激活态(.btn-p、.chip.on、.seg button.on、.btn-donate)统一以品牌青绿 --teal 为底、文字色 --teal-ink。
深色模式下 --teal-ink = #FFFFFF,浅色模式同样为 #FFFFFF —— 青绿底配纯白字,确保深色背景下选中态文字清晰可读、对比度充足。
数字输入隐藏原生步进箭头(无法适配双主题),期数增减由自定义步进器承担(IconPark Filled 图标、主题变量配色);滚动条全组件自绘(::-webkit-scrollbar / Firefox scrollbar-color),轨道 --card2、滑块 --border2、悬停 --faint,无原生箭头按钮,深浅主题自动切换。
设计理念(译自原站介绍):即时经济终端 · 高数据密度指标卡 + 迷你趋势图;计算界面简洁无干扰,
带「总计 / 红色扣税 / 绿色净额」即时视觉状态卡;深浅主题无缝切换、注重可读性与响应速度。
本页仅借鉴其视觉表达,功能模块为自有需求(财务比率 + 双还款测算)。