品牌应用

Logo 和 ■ 的定义属于灵魂层，放在哪里、多大属于形态层。这一页是后者。

网页页头

本站页头就是标准实现：品牌名后紧随，一行，与主导航同高，不用 Logo 图片。

查看代码 · Source

<div class="wx-spread" style="padding-block:var(--space-3);border-block-end:var(--stroke-hairline) solid var(--color-border-subtle)">
  <a href="#web" style="display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-display);text-decoration:none"><span>文心 · 万形</span><span class="wx-seal" aria-hidden="true"></span></a>
  <nav class="wx-cluster" aria-label="示例导航"><a href="#web">设计</a><a href="#web">内容</a><a href="#web">组件</a></nav>
</div>

页头用 ■ 而不是 Logo，理由是尺度：一枚 24px 的印章会丢掉负空间里的几何，变成一个红色色块。Logo 有它的最小呈现尺寸，低于它就该降级为文字署名加 ■。

文章署名与页脚

文心 · 万形 2026-08-30

署名区是 ■ 必须出现的地方。wx-attr 就是为这个场景设计的组件： 40px 的短横线 + 名字 + 元数据，靠留白与页面其余部分分开，不靠方框。

品牌展示区

需要 Logo 本身的场合——产品入口、关于页、演示封面、印刷品——用 SVG 原件，不用缩放的 PNG。

万形：起源与交汇。

文心：知识与生长。

logo-mono.svg 是保留 currentColor 的源文件，不能直接作为外链 img 使用；使用方若需要它，须先在自己的交付链中解析颜色。本站网页只展示可独立呈现的朱砂印章。

尺度决定用哪一个

尺度	用什么	为什么
≥ 64px	朱砂印章 SVG	负空间里的几何关系读得出来。
24–48px	文字署名 + ■	2.5px 线宽在这个尺度开始糊。
< 24px	只用文字署名 + ■	印章缩到这里就只是一个红方块，不如直接用方块。
印刷 / 海报	SVG 原件，`vector-effect: non-scaling-stroke`	放大到海报尺度时线宽不跟着放大。

禁止清单

不要这样用

透明底座、1.5px 的 UI 线宽、rx="0" 直角、给主 Logo 写深色模式变色逻辑、把具象图标塞进印章内部、用模糊或投影补救缩放问题、把 Logo 和 ■ 并排放在同一处。

其中"不写深色模式变色逻辑"最容易被当成疏漏而"修复"。它是有意的： 实心红底白线在任何背景下都成立，而一个会随环境变色的印章就不再是印章。

资产清单

文件	用途
`kit/assets/brand/logo-wanxing.svg`	万形印章，交汇几何。
`kit/assets/brand/logo-wenxin.svg`	文心印章，分叉几何。
`kit/assets/brand/logo-mono.svg`	保留 `currentColor` 的源文件；外链 `img` 不继承页面颜色，需由使用方先解析颜色后交付。
`kit/assets/brand/brand-mark.svg`	静态 ■，用于无法执行 CSS 的场合（邮件、印刷）。
`.wx-seal`（CSS）	网页上的 ■：桌面/移动有固定默认尺寸，页头可显式加 `--lg` 变体，并随主题变色。页面上用这个，不用 SVG。