5753b51131
- 白文印「标」（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>
109 lines
7.5 KiB
HTML
109 lines
7.5 KiB
HTML
<!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>
|