bid-doctor/docs/design/logo/archive/v1/logo-sheet.html

<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>标博士 · 标志资产预览</title><style>
*{box-sizing:border-box}body{margin:0;background:#f5f6f3;color:#1d2733;font:15px/1.7 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:48px 24px}h1{font-size:36px;margin:0}h2{margin:50px 0 12px;font-size:22px}p{color:#5c6670}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.card{background:#fff;border:1px solid #d9ddd8;padding:22px;min-width:0}.dark{background:#1d2733;color:white;border-color:#1d2733}.dark p{color:#c8d0d7}.stage{height:145px;display:flex;align-items:center;justify-content:center}.stage img{max-width:90%;max-height:110px}.label{font-size:12px;letter-spacing:.04em;color:#5c6670}.dark .label{color:#cad1d8}.sizes{display:flex;gap:28px;align-items:end;flex-wrap:wrap}.sizes figure{margin:0;text-align:center}.sizes img{display:block;margin:auto}.safe{display:inline-block;padding:24px;border:1px dashed #2f5bd3;background:#e7edfb}.safe img{display:block;width:277px;max-width:100%}.bad img{width:210px;max-width:100%}.stretch img{height:45px}.bad strong{display:block;color:#c4122f}.chip{display:inline-block;width:18px;height:18px;vertical-align:middle;margin-right:8px}
</style></head><body><main><h1>标博士 · 标志资产</h1><p>方印与逐项核对 · 预览及使用边界。详细数据见 <a href="logo-spec.md">使用规范</a>。</p>
<h2>标准组合</h2><div class="grid">
<div class="card"><span class="label">横版 / 浅底</span><div class="stage"><img src="svg/logo-horizontal.svg" alt="横版标志"></div></div><div class="card dark"><span class="label">横版反白 / 深底</span><div class="stage"><img src="svg/logo-horizontal-reverse.svg" alt="横版反白标志"></div></div>
<div class="card"><span class="label">竖版 / 浅底</span><div class="stage"><img src="svg/logo-vertical.svg" alt="竖版标志"></div></div><div class="card"><span class="label">字标 / 浅底</span><div class="stage"><img src="svg/wordmark.svg" alt="标博士字标"></div></div>
<div class="card"><span class="label">单色黑 / 浅底</span><div class="stage"><img src="svg/logo-mono-black.svg" alt="单色黑标志"></div></div><div class="card dark"><span class="label">单色白 / 深底</span><div class="stage"><img src="svg/logo-mono-white.svg" alt="单色白标志"></div></div>
<div class="card"><span class="label">印章主稿 / 浅底</span><div class="stage"><img src="svg/mark.svg" alt="印章主稿"></div></div><div class="card dark"><span class="label">印章主稿 / 深底</span><div class="stage"><img src="svg/mark.svg" alt="深底印章主稿"></div></div>
<div class="card"><span class="label">小尺寸图形 / 浅底</span><div class="stage"><img src="svg/mark-small.svg" alt="小尺寸印章"></div></div><div class="card dark"><span class="label">小尺寸图形 / 深底</span><div class="stage"><img src="svg/mark-small.svg" alt="深底小尺寸印章"></div></div></div>
<h2>全部版本在浅色 / 深色背景上的对照</h2><p>用于检查对比度；反白和单色版本仅在规范指定的背景上使用。</p><div class="grid"><div class="card"><span class="label">印章主稿 / 浅底</span><div class="stage"><img src="svg/mark.svg" alt="印章主稿"></div></div><div class="card dark"><span class="label">印章主稿 / 深底</span><div class="stage"><img src="svg/mark.svg" alt="印章主稿"></div></div><div class="card"><span class="label">小尺寸印章 / 浅底</span><div class="stage"><img src="svg/mark-small.svg" alt="小尺寸印章"></div></div><div class="card dark"><span class="label">小尺寸印章 / 深底</span><div class="stage"><img src="svg/mark-small.svg" alt="小尺寸印章"></div></div><div class="card"><span class="label">横版 / 浅底</span><div class="stage"><img src="svg/logo-horizontal.svg" alt="横版"></div></div><div class="card dark"><span class="label">横版 / 深底</span><div class="stage"><img src="svg/logo-horizontal.svg" alt="横版"></div></div><div class="card"><span class="label">竖版 / 浅底</span><div class="stage"><img src="svg/logo-vertical.svg" alt="竖版"></div></div><div class="card dark"><span class="label">竖版 / 深底</span><div class="stage"><img src="svg/logo-vertical.svg" alt="竖版"></div></div><div class="card"><span class="label">字标 / 浅底</span><div class="stage"><img src="svg/wordmark.svg" alt="字标"></div></div><div class="card dark"><span class="label">字标 / 深底</span><div class="stage"><img src="svg/wordmark.svg" alt="字标"></div></div><div class="card"><span class="label">横版反白 / 浅底</span><div class="stage"><img src="svg/logo-horizontal-reverse.svg" alt="横版反白"></div></div><div class="card dark"><span class="label">横版反白 / 深底</span><div class="stage"><img src="svg/logo-horizontal-reverse.svg" alt="横版反白"></div></div><div class="card"><span class="label">单色黑 / 浅底</span><div class="stage"><img src="svg/logo-mono-black.svg" alt="单色黑"></div></div><div class="card dark"><span class="label">单色黑 / 深底</span><div class="stage"><img src="svg/logo-mono-black.svg" alt="单色黑"></div></div><div class="card"><span class="label">单色白 / 浅底</span><div class="stage"><img src="svg/logo-mono-white.svg" alt="单色白"></div></div><div class="card dark"><span class="label">单色白 / 深底</span><div class="stage"><img src="svg/logo-mono-white.svg" alt="单色白"></div></div></div>
<h2>16px 备选 · 待确认</h2><p>A 为红色圆角方块与粗白勾，B 为加粗简化的「标」字；当前 favicon-16.png 暂用 A。下方左侧为实际 16px，右侧为像素放大示意。</p><div class="grid"><div class="card"><span class="label">方案 A · 对勾</span><div class="sizes"><img src="png/favicon-16.png" width="16" height="16" alt="方案 A 实际大小"><img src="png/favicon-16.png" width="128" height="128" style="image-rendering:pixelated" alt="方案 A 像素放大"></div></div><div class="card"><span class="label">方案 B · 标字</span><div class="sizes"><img src="png/favicon-16-b.png" width="16" height="16" alt="方案 B 实际大小"><img src="png/favicon-16-b.png" width="128" height="128" style="image-rendering:pixelated" alt="方案 B 像素放大"></div></div></div>
<h2>实际尺寸</h2><p>16px 暂用 A，最终方案待确认；32px 使用小尺寸印章，64、128px 使用主稿。</p><div class="card sizes"><figure><img src="png/favicon-16.png" width="16" height="16" alt="16 像素"><figcaption>16px</figcaption></figure><figure><img src="png/favicon-32.png" width="32" height="32" alt="32 像素"><figcaption>32px</figcaption></figure><figure><img src="svg/mark.svg" width="64" height="64" alt="64 像素"><figcaption>64px</figcaption></figure><figure><img src="svg/mark.svg" width="128" height="128" alt="128 像素"><figcaption>128px</figcaption></figure></div><p>横版 120px：中文可辨，拼音仅作为视觉识别；推荐至少 160px。</p><div class="card"><img src="svg/logo-horizontal.svg" width="120" alt="120 像素横版"></div>
<h2>安全区</h2><p>从标志最外沿向外保留至少方印高度 H 的四分之一，蓝色区域示意 H/4。</p><div class="safe"><img src="svg/logo-horizontal.svg" alt="安全区示意"></div>
<h2>错误用法</h2><div class="grid"><div class="card bad stretch"><strong>不要拉伸</strong><img src="svg/logo-horizontal.svg" alt="被压扁的错误示例"></div><div class="card bad"><strong>不要与结论组合或盖章</strong><p>不得作为「通过 / 合格 / 已审核」章，盖在检查报告、投标文件或任何结论上，也不得与「通过」「合格」组合。</p></div><div class="card bad"><strong>不要混用界面致命红</strong><p><i class="chip" style="background:#D2282E"></i>标志印章红 <i class="chip" style="background:#C4122F"></i>界面致命红</p></div></div>
</main></body></html>