01
颜色：浅色背景该怎么组合
问题根因 ── 标志是「白色圆角底板 + 紫色三面体」一个整体。白底板在深色背景上是“托”，把宝石衬亮；放到浅色背景，白底板和米白糊在一起、边界消失，整枚标志像散了架。
上一版的错在哪：它把白底板整个扔掉，只留一颗 deep 宝石、再给宝石加阴影 ── 阴影只衬托了里面的宝石，整枚标志已经不完整、只剩半个。正解是不拆标志：保持整枚 logo 完整，把承托阴影加在整张圆角卡片上，像一张悬浮的卡片，用它自己的投影把整个标志抬离浅底。
正解：给整枚标志加承托阴影
白底板 + 紫宝石原封不动，只给整张圆角卡片罩一层柔和落影 drop-shadow 0 2 7 / 墨 22% + 0 1 2 / 墨 10%，再补 0.5px 发丝描边定边界。深、浅背景用同一枚完整标志，浅色只是多了一层把它整体抬起来的阴影。
一句话结论：不拆标志。深、浅背景都用同一枚完整标志（白底板 + 紫宝石）；浅色场景给整枚标志加一层承托阴影 + 0.5px 发丝描边，把整张圆角卡片抬离浅底 ── 整个 logo 始终完整，不再只剩半个。落地时浅色页自动套这层阴影即可，标志文件本身不变。
02
字号：“造物云”收小一档
你的感觉对 ── 现在字标和图标几乎等高，重心压在文字上。把字标降到图标视高的约 0.62 倍，图标当主、文字当注脚，横向组合更挺、留白更稳。下面左右对照（同一图标高度 28px）。
- 图标视高
- 28–30px（顶栏）
- 字标视高
- 15px ≈ 图标 ×0.62（原 20px）
- 图字间距
- 10px（原 13px）
- 字标取色
currentColor── 深色页 浅色页 自动切换
已同步把 nav-lab.html / design-system.html 顶栏的 .brand 字号建议一起调小，落地时统一吃这套比例即可。
03
微动画：让标志“会造物、会折光”
品牌叫造物云，标记本身是一颗由三个面拼成的等距立方／晶体。所以动画不该是随便转一圈，而要落在两个品牌词上 ── “造物”=被构建出来、“晶体”=会折光的精工感。下面三个方案现场跑，鼠标移到卡片上看悬停效果。
我的建议组合：载入跑一次 A 结晶造物 → 之后常驻 B 切面流光（约每 3 秒一轮，极淡）→ 鼠标悬停叠加 C 的 3D 侧倾。三者叠起来既有“造物”的叙事、又有晶体的精工反光，且都很轻、不抢内容。下面是叠好的成品预览。
★
推荐成品 · 现场预览
A + B + C 三动画叠加，字号用第②节的 0.62 比例，颜色随背景自适应。点“重放结晶”看载入动画；切到浅色页可验证组合关系。
悬停标志看 3D 侧倾 · 切换右上角主题验证浅色组合
- 载入
- 结晶造物（一次性，0.66s）
- 常驻
- 切面流光（3.4s 循环，brightness 1→1.24，极淡）
- 悬停
- 3D 侧倾 rotateY 20° / rotateX -7°
- 浅色承托
- 整枚标志 + 承托阴影 + 发丝边（保持完整，切到浅色页可验证）
所有动画都遵循 prefers-reduced-motion ── 用户系统开了“减少动态效果”时自动降级为静态标志，符合无障碍与你“克制专业”的取向。落地时把这段逻辑封进 brand.js，各页 <span class="mkslot"> 一行即可复用。