深空蓝 · 深浅主题规范
票据投资者 APP ／ 设计基调 · 语义 Token · 双主题对照 · 换肤机制与落地
模块设计规范 FOUNDATION
规格iOS 390 × 844 @3x
主题深空蓝 Light / Dark
版本v1.3 · 2026-10-14
01设计基调深空蓝 Deep-Space Blue · v1.3 按代码现状改写（色值唯一来源 theme/colors.ts 即抄自本页）

气质 TONE

  • 克制的蓝：品牌色只出现在可点击与关键结论上，不做装饰
  • 琥珀作第二强调：进行中 / 费用 / 到期这类要注意但不危险的信息
  • 数字优先：金额与数字用 Inter（等宽数字，纵向对齐便于比价）；账号、代码、BCP 47 标签用 Menlo 等宽
  • 线性图标；全站唯一的插画是空态文件夹，三色随主题
  • 机构档案：应用名、Logo、持牌信息取 brands/<id>/brand.json；品牌配色可按机构覆盖，泓衍票据用本页基线

    • 换肤机制 SKIN

  • 三态：跟随系统（缺省）/ 浅色 / 深色，入口「我的 → 外观」，存本机
  • 同一套语义键两套取值，组件零改动；只换颜色，布局、字号、间距、圆角、图标不变
  • 涨跌色两套：红涨绿跌（缺省）/ 绿涨红跌，全站盈亏色一起对调
  • 外观偏好同步给原生层：液态玻璃底栏、键盘、系统选择器跟着变
  • 启动页固定品牌蓝，不跟主题

    • 无障碍 A11Y

    正文对比度≥ 7:1（AAA）
    次要文字≥ 4.5:1（AA）
    最小触控热区44 × 44 pt（不足的补热区）
    最小字号正文 12；表头与标签 10.5
    字号档位标准 / 中等 / 大字（1 / 1.12 / 1.24，仅原生）
    状态传达颜色 + 文字双通道
    深色纯黑禁用（用 #0B1020）
    02语义 Token 对照组件只引用语义名；第二行小字是代码里的键（theme/colors.ts）
    TOKENLIGHTDARK用途
    --app-bgappBg#F6F8FB#0B1020页面底色
    --surfacesurface#FFFFFF#131B2E卡片 / 导航 / 弹窗
    --surface-2surface2#F1F4F9#18223A表头 / 次级面 / 输入底
    --surface-3surface3#E8EDF5#1E2A45置灰主按钮底 / 灰标签底 / 深色分段选中
    --lineline#E3E9F1#232F4B分割线；深色下卡片描边
    --line-2line2#CFD9E7#32436A描边按钮 / 输入框 / 复选框
    --ink-1ink1#0F1B33#EAF0FA主文字 / 金额
    --ink-2ink2#4C5C78#A5B4D0字段名 / 正文
    --ink-3ink3#8A99B2#7486A5辅助说明 / 时间戳
    --ink-4ink4#AEBACD#54658A占位 / 置灰文字 / 已失效
    --brandbrand#1B4FD8#5B8CFF主按钮 / 选中 / 链接
    --brand-2brand2#123CAE#7FA6FF品牌渐变第二色
    --brand-weakbrandWeak#E7EEFFrgba(91,140,255,.16)选中弱底 / 高亮行 / 信息条
    --on-brandonBrand#FFFFFF#05122E品牌实心底上的文字（深色下转近黑）
    --accentamber#B4700E#F0A93B进行中 / 费用 / 到期角标
    --riserise#E5484D#FF6B6E涨 / 盈利（可切方案）
    --fallfall#12A594#2FD4B9跌 / 亏损（可切方案）
    --dangerdanger#DC2626#FF6B6E校验失败 / 强平 / 撤单
    --warnwarn#C2410C#F59E42风险提示条 / 通知未开启
    --okok#0F7B4F#2FD4B9通过 / 成功 / 已完成
    --scrimscrimrgba(11,18,34,.42)rgba(2,6,16,.62)弹窗遮罩
    ToasttoastBgrgba(15,25,45,.90)rgba(230,238,250,.94)Toast 胶囊（深色下反白，字 #0B1020）
    03字号 · 圆角 · 间距 · 控件两套主题共用，切换时全部不变（代码 theme/tokens.ts）

    字号 TYPE SCALE

    18,268,67133 / 600　资产主数值（Inter）
    共赢票据22 / 600　大标题
    费用信息17 / 600　导航栏标题
    贵州茅台15 / 400　列表主文
    2026-08-15 14:2512.5　辅助说明
    名义本金10.5　表头 / Tab 文字
    中文 / 英文系统字体（PingFang SC · TC / SF Pro）
    数字Inter（随包内置）
    等宽Menlo

    圆角 RADIUS

    4 · 标签
    9 · Chip / 筛选
    10 · 小按钮 / 搜索
    11 · 输入框
    12 · 主按钮
    14 · 卡片
    16 · 弹窗 / Hero
    底部面板18 18 0 0
    手机外框42（仅图纸）

    间距 SPACING

    页面左右边距16
    卡片内边距15（询价 / 订单卡 13）
    卡片间距11
    分组标题上 / 下16 / 8
    列表行上下内边距14
    Hero 内边距18
    居中弹窗 / 筛选面板左右18 / 20
    大标题栏左右20

    控件 CONTROLS

    主按钮 / 导航栏46
    输入框（也是最小热区）44
    小按钮 / 搜索框 / 步进器38
    筛选按钮34
    Chip32
    复选框 / 批量复选框 / 单选16 / 20 / 15
    底部 TabH5 自绘 72 + 安全区；原生用系统底栏
    04整页对照左浅右深 · 同一份 DOM 只换 data-theme · 取自 04-A1 / 02-Q1
    LIGHT　　DARK
    9:41

    资金账户

    合计资产净值 HKD
    18,268,671.64
    票据估值368,000.00
    冻结金额0.00
    现金可用123,456.00
    币种现金余额可取金额购买力
    HKD3,456.003,456.003,456.00
    USD23,456.0023,456.0023,456.00
    CNY123,456.00123,456.00123,456.00
    资金流水
    资金划转
    展期记录

    持仓票据8

    默认排序（创建时间倒序）
    增额到期
    贵州茅台 C
    600519.SH · Delta A
    221,234.00 HKD票据估值
    -178,766.00 HKD-89.38%
    名义/冻结名义200万 CNY20万 CNY
    票据面值20万 HKD
    现价/期初价1,234.561,204.56
    强平价1,000.00
    到期日12/16
    详情卖出增额展期
    到期
    贵州茅台 C
    600519.SH · Delta A
    161,234.00 HKD票据估值
    -38,766.00 HKD-19.38%
    名义/冻结名义200万 / 0 CNY
    票据面值20万 HKD
    现价/期初价1,234.56 / 1,204.56
    强平价1,000.00
    到期日12/16
    详情卖出增额展期
    票据
    账户
    消息
    我的
    P1 · LIGHT
    资金账户 · 浅色
    • 白卡浮在 #F6F8FB 页面底上，靠投影分层
    • Hero 是全页唯一大面积彩色（品牌蓝渐变）
    P1 · DARK
    资金账户 · 深色
    • 卡片改用 --line 描边分层（深色下投影不可见）
    • Hero 渐变压暗并加品牌色描边；角标等实心底上的文字转近黑
    9:41

    共赢票据

    询价订单
    股票代码/拼音/名称
    方向
    CALL只读
    周期
    1M
    名义本金
    100万200万300万500万1000万自定义
    询价

    今日询价 · 倒序

    NEW
    贵州茅台 C
    600519.SH · CALL · 1M
    已完成
    11:15:15
    名义本金200万报价3 条
    贵州燃气 C
    600903.SH · CALL · 1M
    询价中
    11:42:40
    名义本金100万报价--
    贵州三力 C
    603439.SH · CALL · 1M
    待处理
    10:49:41
    名义本金500万报价--
    平安银行 C
    000001.SZ · CALL · 1M
    已拒绝
    09:40:12
    名义本金100万报价--
    票据
    账户
    消息
    我的
    P2 · LIGHT
    询价主页 · 浅色
    • 筛选区是白色面板，列表卡片在灰底上
    • 只读字段用次级面底 + 「只读」字样，不靠置灰
    P2 · DARK
    询价主页 · 深色
    • 品牌色提亮为 #5B8CFF，主按钮文字转 #05122E
    • 置灰按钮用 --surface-3 底 + --ink-4 字，辉光消失
    05组件级对照同一组件在两套主题下的取值差异 · 变体以代码为准（AppButton / StatusDot / Tag / CornerBadge）
    按钮 BUTTON · LIGHT
    主按钮
    次按钮（描边）
    次级面按钮（重置）
    禁用
    登出（危险文字）
    按钮 BUTTON · DARK
    主按钮
    次按钮（描边）
    次级面按钮（重置）
    禁用
    登出（危险文字）
    状态 STATUS · LIGHT
    待报询价中待审批已完成已拒绝已失效
    状态 STATUS · DARK
    待报询价中待审批已完成已拒绝已失效
    输入与提示 · LIGHT
    增额金额
    最低增额10万万
    50万
    5万
    最低增额10万
    本条为通知副本，以询价单实时状态为准。
    本次为强制更新，请升级后继续使用。
    输入与提示 · DARK
    增额金额
    最低增额10万万
    50万
    5万
    最低增额10万
    本条为通知副本，以询价单实时状态为准。
    本次为强制更新，请升级后继续使用。
    标签 · 角标 · 涨跌 · LIGHT
    买入卖出已开通增额到期已撤
    增额到期待生效NEW
    +221,234.00 HKD+10.62%-178,766.00 HKD-89.38%0.00 HKD0.00%
    标签 · 角标 · 涨跌 · DARK
    买入卖出已开通增额到期已撤
    增额到期待生效NEW
    +221,234.00 HKD+10.62%-178,766.00 HKD-89.38%0.00 HKD0.00%
    筛选组件 · LIGHT
    股票代码/拼音/名称
    近三月 筛选
    全部待审批已驳回已通过
    筛选组件 · DARK
    股票代码/拼音/名称
    近三月 筛选
    全部待审批已驳回已通过
  • 按钮三种变体：主按钮（实心）· 次按钮（描边）· 次级面（筛选面板「重置」、弹层「取消」）；没有实心危险按钮，危险动作用次按钮 + 危险色字或确认框里的危险色文字
  • 主按钮置灰是三件套：--surface-3 底 + --ink-4 字 + 去辉光；次按钮置灰用透明度
  • 状态点：进行中两档画空心圈（询价中 = 琥珀、待审批 = 品牌），已终结的画实心点；认不出的状态只写文字、不画点
  • 标签九种色调：brand · amber · rise · fall · ok · warn · mute（弱底）＋ solid · danger（实心）
    • 06换肤落地三端同一份主题代码，只有跟随系统的信号来源不同
    端主题载体跟随系统切换与注意
    iOSTamagui 主题 light / dark（色值来自 theme/colors.ts）系统外观（traitCollection）强制模式把偏好下发 overrideUserInterfaceStyle：液态玻璃底栏、键盘、系统选择器跟着变；状态栏随主题；不重启
    Android同上系统外观（uiMode）下发 AppCompatDelegate 夜间模式；根窗口底色同步刷，返回手势时屏幕边缘不闪浅色
    H5同上（react-native-web）prefers-color-scheme静态渲染的首屏固定浅色，水合后切到偏好（与语言同一做法）
    硬规则　① 十六进制色值只允许出现在 theme/colors.ts，组件一律引用语义键；② 切主题不得改变任何尺寸（布局、字号、间距、圆角、图标）；③ 状态传达必须颜色 + 文字双通道；④ 机构换品牌色只改 BRAND_PALETTES 的深浅两套覆盖，不改组件。