docs(logo): 新增 logo v5.1 正式资产、使用规范与构建脚本

- 白文印「标」(AI 生成原图经脚本抠图、统一为 #D9291C、矢量化)
- 字标:思源宋体 SemiBold + Libre Caslon;比例 H2,英文视觉内缩 C2
- svg/、png/、favicon:横版、竖版、反白、单色、印章、各尺寸图标
- scripts/:logo_lib.py 统一排版参数,build_assets.sh 一键生成
- logo-spec.md、logo-sheet.html、字体许可证(OFL)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
YANG JIANKUAN
2026-11-02 20:28:18 +08:00
parent f4ef7af542
commit 5753b51131
51 changed files with 1160 additions and 0 deletions

View File

@@ -0,0 +1,108 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标博士 Logo 预览</title>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="icon" href="png/favicon-16.png" sizes="16x16">
<style>
:root{--ink:#1D2733;--sub:#5C6670;--line:#D9DDD8;--paper:#F5F6F3;--dark:#1D2733;--seal:#D9291C;--navy:#1C2554;--fatal:#C4122F}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 "PingFang SC","Microsoft YaHei",system-ui,sans-serif}
main{max-width:1120px;margin:0 auto;padding:48px 24px 80px}
h1{font-size:28px;margin:0 0 6px}
h2{font-size:18px;margin:48px 0 6px}
p.note{color:var(--sub);margin:0 0 18px;max-width:46em}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tile{background:#fff;border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;gap:14px;justify-content:space-between;min-height:220px}
.tile.dark{background:var(--dark);border-color:var(--dark);color:#D5DAE0}
.tile img{display:block;max-width:100%;margin:auto}
.cap{font-size:13px;color:var(--sub)}
.tile.dark .cap{color:#AEB6C0}
.hero{background:#fff;border:1px solid var(--line);padding:56px;display:grid;place-items:center}
.hero img{width:min(720px,100%)}
.sizes{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.sizes figure{margin:0;text-align:center;font-size:12px;color:var(--sub)}
.sizes img{display:block;margin:0 auto 6px;image-rendering:auto}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.sw{background:#fff;border:1px solid var(--line)}
.sw i{display:block;height:72px}
.sw div{padding:12px 14px;font-size:13px}
.sw b{display:block;font-size:14px}
.dont{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.dont .tile{min-height:180px}
.dont .x{color:var(--fatal);font-weight:700;font-size:13px}
.stretch{width:100%;height:60px;object-fit:fill}
.source{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:start}
@media (max-width:640px){.hero{padding:24px}.tile{padding:20px}}
</style>
</head>
<body>
<main>
<h1>标博士 Logo</h1>
<p class="note">v5.1(2026-11-02):思源宋体 SemiBold + Libre Caslon,印章与文字块等高(H2),英文按视觉边缘内缩(C2)。使用规范见 logo-spec.md。</p>
<div class="hero"><img src="svg/logo-horizontal-textured.svg" alt="标博士横版主 logo:朱砂白文印「标」与藏青宋体字标"></div>
<h2>组合</h2>
<p class="note">质感版用于印章显示大于 64px 的场合;干净版用于界面小尺寸和单色印刷。深色背景用反白版,印章下面垫了纸色底。</p>
<div class="grid">
<div class="tile"><img src="svg/logo-horizontal-textured.svg" alt="横版质感版"><span class="cap">横版 · 质感(主 logo)</span></div>
<div class="tile dark"><img src="svg/logo-horizontal-textured-reverse.svg" alt="横版质感反白版"><span class="cap">横版 · 质感 · 深色背景</span></div>
<div class="tile"><img src="svg/logo-horizontal.svg" alt="横版干净版"><span class="cap">横版 · 干净</span></div>
<div class="tile dark"><img src="svg/logo-horizontal-reverse.svg" alt="横版干净反白版"><span class="cap">横版 · 干净 · 深色背景</span></div>
<div class="tile"><img src="svg/logo-vertical-textured.svg" alt="竖版质感版" style="width:200px"><span class="cap">竖版 · 质感</span></div>
<div class="tile dark"><img src="svg/logo-vertical-textured-reverse.svg" alt="竖版质感反白版" style="width:200px"><span class="cap">竖版 · 质感 · 深色背景</span></div>
<div class="tile"><img src="svg/logo-mono-black.svg" alt="单色黑版"><span class="cap">单色 · 黑</span></div>
<div class="tile dark"><img src="svg/logo-mono-white.svg" alt="单色白版"><span class="cap">单色 · 白</span></div>
</div>
<h2>印章与字标</h2>
<div class="grid">
<div class="tile"><img src="svg/seal-textured.svg" alt="印章质感版" style="width:220px"><span class="cap">印章 · 质感</span></div>
<div class="tile"><img src="svg/seal.svg" alt="印章干净版" style="width:220px"><span class="cap">印章 · 干净</span></div>
<div class="tile"><img src="svg/seal-small.svg" alt="印章小尺寸版" style="width:220px"><span class="cap">印章 · 小尺寸专用(白笔画加粗,放大展示)</span></div>
<div class="tile"><img src="svg/wordmark.svg" alt="字标" style="width:260px"><span class="cap">字标 · 思源宋体 SemiBold + Libre Caslon</span></div>
</div>
<h2>实际尺寸</h2>
<p class="note">以下都是 1:1 显示。16px 用加粗简化的「标」字,32–64px 用小尺寸专用印章,128px 以上用质感版。</p>
<div class="tile">
<div class="sizes">
<figure><img src="svg/favicon-16.svg" width="16" height="16" alt="16px 图标">16px</figure>
<figure><img src="svg/seal-small.svg" width="32" height="32" alt="32px 图标">32px</figure>
<figure><img src="svg/seal-small.svg" width="64" height="64" alt="64px 印章">64px</figure>
<figure><img src="svg/seal-textured.svg" width="128" height="128" alt="128px 印章">128px</figure>
<figure><img src="png/apple-touch-icon-180.png" width="90" height="90" alt="应用图标">应用图标(白底)</figure>
</div>
<div class="sizes">
<figure><img src="svg/logo-horizontal.svg" width="160" alt="横版 160px 宽">横版最小 160px</figure>
<figure><img src="svg/logo-horizontal-textured.svg" width="320" alt="横版 320px 宽">横版 320px</figure>
</div>
</div>
<h2>颜色</h2>
<div class="swatches">
<div class="sw"><i style="background:#D9291C"></i><div><b>印章红 #D9291C</b>朱砂色,只用于 logo · 白底 4.9:1</div></div>
<div class="sw"><i style="background:#1C2554"></i><div><b>字标藏青 #1C2554</b>白底 14.6:1</div></div>
<div class="sw"><i style="background:#C4122F"></i><div><b>界面致命红 #C4122F</b>偏洋红,只用于界面问题级别,不用于 logo</div></div>
</div>
<h2>错误用法</h2>
<div class="dont">
<div class="tile"><span class="x">不要当作「通过」章</span><span class="cap">不能把印章盖在检查报告或任何结论上,也不能和「通过」「合格」字样组合。印章代表品牌,不代表检查结果。</span></div>
<div class="tile"><img class="stretch" src="svg/logo-horizontal.svg" alt="被拉伸的 logo 示例"><span class="x">不要拉伸变形</span></div>
<div class="tile"><img src="svg/logo-horizontal.svg" alt="字标被换色的示例" style="filter:hue-rotate(140deg)"><span class="x">不要改颜色</span></div>
<div class="tile dark"><img src="svg/logo-horizontal-textured.svg" alt="深色背景误用浅色版示例"><span class="x">深色背景不要用浅色版</span><span class="cap">请改用反白版。</span></div>
</div>
<h2>来源</h2>
<p class="note">印章由 ChatGPT 图像生成(提示词见 image-gen/PROMPT.md),经脚本抠图、统一颜色、矢量化后得到。左边是原图,右边是处理后的质感版。</p>
<div class="source">
<div class="tile"><img src="image-gen/exec-8232d0a3-8729-49ae-ba65-5af3eb398ea1.png" alt="AI 生成的印章原图" style="width:240px"><span class="cap">原图(1254px)</span></div>
<div class="tile"><img src="svg/seal-textured.svg" alt="处理后的质感版印章" style="width:240px"><span class="cap">处理后:颜色统一为 #D9291C,背景透明,矢量化</span></div>
</div>
</main>
</body>
</html>