页面底层
ASTARTER / DESIGN LANGUAGE
让光形成秩序让能力清晰可见
从 Landing 出发，把字体、色彩、材质与交互
变成一套能贯穿产品的视觉标准。
01
黑白建立层级，光谱连接能力
从 Landing 的光学语言出发，让官网、阅读页和产品操作区共享同一种秩序。密度随任务变化，品牌辨识保持一致。
一个视觉母版
近黑空间、暖白文字、真实体积的晶体与金属、多根汇合的光丝。光有来源，层次有明暗。
三种信息密度
官网先讲定位；Docs / Blog 先让人读懂；操作台先明确当前对象、状态与动作。不要把 Hero 搬进每个面板。
清楚才有质感
不透出背景正文的玻璃、对齐的数字、完整短语、稳定的按钮尺寸，比一圈更亮的光晕更重要。
- 01 / BRAND
表达能力
空间与主光束承载品牌，留下足够的黑色。
- 02 / EDITORIAL
解释机制
目录、文章与图示形成连续阅读路径。
- 03 / PRODUCT
指导行动
状态与数据清楚，操作目的明确。
02
保留识别，统一使用
保留当前官网标志的形状。浅深两份单色版本用于 UI，母品牌与旗舰产品的层级保持清楚。
ASTARTER
ASTARTER页眉符号高 24px · 宽约 43px
字标 12–14px / 500 · 图文间距 12px
留白至少为符号高的 1/2
不压成正方形，不重画条纹，不用光效遮住几何
Astarter 为母品牌与 AI 生态；LensWave 星谱为旗舰 AI Trading OS。采购接入、投资背书、产品集成分别表达。
03
基础克制，光谱鲜明
界面层级交给黑白，光谱用于品牌和光学关系。紫色只保留为光谱末段，不作为界面主题。
内容承载
菜单与分区
标题与正文
内容说明
时间与标签
#FF4B3E#FF9A2B#FFD84D#4DFF7A#3DD5FF#4A6BFF#A24DFF
信息 / 焦点确认成功等待 / 受限错误 / 危险
光谱不承担收益或运行状态含义。浅色有独立的高对比语义色，不能直接把深色亮绿和亮黄铺到白底。
04
字重有分工，文字有呼吸
Inter 与 Noto Sans 构成统一正文体系；IBM Plex Mono 留给代码与标识。400、500、600 各有明确职责。
让复杂能力清晰可见
研究、规则与行动
研究保留依据，执行遵循边界。每一次判断、等待与修订，都能回到同一份记录中核对。
0123456789 Inter / tabular
strategy.version · order.status · record.id
| 角色 | 桌面 / 手机 | 行高 · 字重 |
|---|---|---|
| 官网 Hero / 分区 | 80 / 40 · 48 / 30 | 1.08–1.25 · 400 |
| 产品页 / 面板 | 28 / 24 · 18 / 18 | 1.30–1.45 · 500 |
| Docs / Blog 标题 | 44 / 32 · 56 / 36 | 1.18–1.25 · 400 |
| 中日韩长文 | 17 / 16 | 1.85 · 400 |
| 产品正文 / 辅助 | 14 / 14–16 · 12 / 12 | 1.60 · 400 |
| 按钮 / 手机输入 | 14 / 14 · 14 / 16 | 1.20 / 1.50 · 500 / 400 |
避免孤字：先改列宽与短语结构，再考虑局部不换行；不靠缩字解决。CJK 不拉宽字距；AI Trading OS、数值与单位需保持完整。完整字号表与八语言规则见规范。
05
表面有厚度，光束有层次
工作面承载信息，烟色玻璃承载浮层，金属与晶体承载品牌主体。材质各司其职，不能所有卡片都发光。
近黑工作面
实色底 · 顶部 1px 内高光
数据与操作的稳定承载面
烟色玻璃
底色 .94–.98 · blur 20px
背景正文不可辨读
PHOTONIC / BUNDLED LIGHT
有亮芯，有色层，有共同流向
光束示意采用多光丝叠层。现有 3D 场景继续复用原网格、折射、相机与生命周期；这里不另造 3D 渲染系统。减少动态时保留静态轮廓。
06
状态清楚，动作稳定
选中、悬浮、焦点与运行状态各自表达。参考组件仅示范样式与行为，不连接账户或执行交易。
操作层级
已确认等待回执需要处理
输入与选择
导航与选择
下拉与玻璃
Esc 关闭并返回触发器。浮层有实在的底色，不能把背后的文章叠进菜单。
07
产品继承质感，保持操作密度
以下样例展示对象、状态和动作的关系。切换明暗或状态，检查同一组 token 在不同工作条件下的呈现。
LENSWAVE / RESEARCH
多源研究
研究对象与运行对象分别呈现
- 研究对象
- BTC / 1D
- 执行状态
- 未授权
01
核对研究依据
保留来源、版本与资料时点
02
检查策略边界
条件、风险与退出规则分别明确
03
记录等待与修订
当前研究不会自动变成已批准的运行
资料来源、版本、系统获知时间与判断条件应能一起核对。展示样例不产生账户授权。
产品样例使用静态说明状态，不展示虚构收益、行情或运行数据。它是视觉与交互对照，不是替换当前产品布局的工程。
08
阅读连贯，图文相互解释
Docs 保留目录与阅读壳，Blog 以文章节奏组织。页面共用 Landing 的页眉页脚；当前目录项用亮字表达，不加选择框。
ASTARTER / DOCS
让研究与行动
保持可追溯
模型提出观点与候选规则，程序核对条件、资金与权限。清楚的模块分工，让一次判断可以被解释，也让下一步行动有据可依。
研究依据规则检查记录核验
图形解释关系，正文补全条件。文字与图形应使用同一术语，不让装饰代替机制，也不把未知状态写成完成。
正文不铺光束。中文 17px / 1.85，手机 16px / 1.85；图示保持可读字号，必要时在自己的容器内横滚。
09
每一次变化都有原因
交互状态即刻成立，动画帮助理解变化。小控件不弹跳，数字不滚动表演，页面不反复飞入。
Hover / Press
菜单 / 选择
展开 / 抽屉
官网分组入场
将指针移到行内或聚焦按钮查看节奏。默认曲线 cubic-bezier(.2,.7,.1,1)。减少动态、后台与离屏时停止环境光束；不添加声音。3D 场景仍沿用原镜头和生命周期。
10
同一标准，不同任务密度
颜色、字体、状态语义保持一致，具体布局与既有产品合同衔接。验收要看到实际页面和实际状态。
| 应用 | 主要继承 | 主要验收 |
|---|---|---|
| 官网 / 生态 | 页眉页脚、字体、光学主体、光谱 | 叙事与CTA、手机构图、玻璃菜单 |
| Docs / Blog | 阅读字体、目录、图示、共用壳 | 切篇连续性、孤字、长文与图文关系 |
| AI 战队 / BOT | 近黑工作面、状态色、按钮与表单 | 对象、状态、动作、旧运行和草稿保持 |
| 信号 / 数据 / 图表 | 筛选、列表、数值、语义系列色 | 来源、时点、单位与手机详情返回 |
| CMS / 账户 / 费用 | 控件、列表、错误与加载反馈 | 编辑不丢、发布可核对、风险动作清楚 |
| Deck / KV / 社交 | 品牌层级、光谱顺序与主视觉 | 阅读距离、裁切、安全区和真实声明 |
- 320 / 390 手机无意外横滚
- 没有孤字、截断动作名或漂移单位
- 菜单后的正文不可辨读
- 选中与键盘焦点各自清楚
- 字形 16/20px，点击目标 44px
- 光束有亮芯、色层与渐隐尾迹
- 数据来源、时间和状态没有被改写
- 减少动态与快速中断都有结果
11
品牌资源
下载 Astarter 的单色标志与界面设计参数。使用时保持标志比例、色彩角色与必要留白。