Files
bid-doctor/docs/design/vi/vi-manual.html
YANG JIANKUAN 9aff7c499c docs(vi): 应用图标页改为 iPhone 18 Pro 主屏幕模拟
- 第 22 页右栏换成 iPhone 18 Pro 主屏幕效果图(黑色机身、Black 壁纸、4 行图标,第四行为股市和标博士),旁边是 Apple 连续曲率圆角裁切的两个尺寸图标;邮件签名移到左栏
- 新增 vi/mockup/:iphone-home.html 排版,fetch.sh 获取系统图标和壁纸,build.sh 量机身、生成遮罩并按 3 倍截图
- Apple 素材(机身、壁纸、系统图标)版权归 Apple,放在 mockup/apple/ 不进 git;机身需本人同意 Apple Design Resources 许可后手动放入,使用限制见 mockup/README.md
- 重新导出 VI 手册 PDF

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 10:10:59 +08:00

710 lines
55 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>标博士 视觉识别规范</title>
<style>
@font-face{font-family:"BBS Serif";src:url("../logo/.work/fonts/NotoSerifSC%5Bwght%5D.ttf") format("truetype");font-weight:200 900}
@font-face{font-family:"BBS Sans";src:url("../logo/.work/fonts/NotoSansSC%5Bwght%5D.ttf") format("truetype");font-weight:100 900}
@font-face{font-family:"Caslon";src:url("../logo/.work/fonts/LibreCaslonText%5Bwght%5D.ttf") format("truetype");font-weight:400 700}
@font-face{font-family:"Barlow SC";src:url("../logo/.work/fonts/BarlowSemiCondensed-Medium.ttf") format("truetype");font-weight:500}
@font-face{font-family:"Barlow SC";src:url("../logo/.work/fonts/BarlowSemiCondensed-SemiBold.ttf") format("truetype");font-weight:600}
@page{size:297mm 210mm;margin:0}
:root{
--paper:#F5F6F3;--white:#FFFFFF;--ink:#1D2733;--sub:#5C6670;--rule:#D9DDD8;
--pencil:#2F5BD3;--pencil-soft:#E7EDFB;--seal:#D9291C;--navy:#1C2554;
--fatal:#C4122F;--amber:#A66300;--ok:#2E6B4F;
--serif:"BBS Serif","Songti SC",serif;--sans:"BBS Sans","PingFang SC","Microsoft YaHei",sans-serif;
--latin:"Caslon",serif;--fig:"Barlow SC","BBS Sans",sans-serif;
}
*{box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
html,body{margin:0;padding:0;background:#888}
body{font:10.5pt/1.7 var(--sans);color:var(--ink)}
.page{width:297mm;height:210mm;position:relative;overflow:hidden;background:var(--paper);padding:20mm 20mm 16mm;page-break-after:always;break-after:page;margin:0 auto}
@media screen{.page{margin:8mm auto;box-shadow:0 2px 8px rgba(0,0,0,.25)}}
.page.white{background:var(--white)}
.page.dark{background:var(--ink);color:#E9ECEF}
/* 页眉页脚 */
.run{position:absolute;top:9mm;left:20mm;right:20mm;display:flex;justify-content:space-between;font-size:7.5pt;color:var(--sub);border-bottom:.25mm solid var(--rule);padding-bottom:2mm}
.run b{font-weight:500;color:var(--ink)}
.folio{position:absolute;bottom:8mm;right:20mm;font:600 9pt var(--fig);color:var(--sub)}
.dark .run{color:#9AA4AE;border-color:#3A4552}.dark .run b{color:#E9ECEF}.dark .folio{color:#9AA4AE}
/* 标题 */
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0}
.chap{display:flex;align-items:baseline;gap:5mm;margin:0 0 9mm}
.chap .no{font:600 34pt/1 var(--fig);color:var(--pencil)}
.chap h1{font-size:26pt;line-height:1.2}
h2{font-size:17pt;margin:0 0 3.5mm}
h3{font-size:12pt;margin:0 0 1.5mm}
p{margin:0 0 2.5mm}
.lede{font-size:12pt;line-height:1.8;max-width:165mm}
.sub{color:var(--sub)}
.small{font-size:9.2pt;line-height:1.65}
.fig{font-family:var(--fig);font-weight:600;letter-spacing:.01em}
.note{font-size:8.8pt;color:var(--sub)}
.pencil{color:var(--pencil)}
/* 版式 */
.cols{display:grid;gap:8mm}
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}
.c12{grid-template-columns:1fr 2fr}.c21{grid-template-columns:2fr 1fr}
.tile{background:var(--white);border:.25mm solid var(--rule);display:flex;align-items:center;justify-content:center;position:relative}
.tile.paper{background:var(--paper)}.tile.dark{background:var(--ink);border-color:var(--ink)}
.cap{font-size:8.6pt;color:var(--sub);margin-top:2mm;line-height:1.55}
.cap code,.mono{font:500 8.6pt var(--fig);color:var(--sub)}
.rule-list{margin:0;padding:0;list-style:none}
.rule-list li{padding:3.6mm 0;border-top:.25mm solid var(--rule)}
.rule-list li:first-child{border-top:0}
table{border-collapse:collapse;width:100%;font-size:10pt}
th,td{text-align:left;vertical-align:top;padding:3.4mm 4mm;border-bottom:.25mm solid var(--rule)}
th{font-weight:700;color:var(--sub);font-size:8.6pt;border-bottom:.4mm solid var(--ink)}
.redline{border-left:1mm solid var(--fatal);padding:3mm 5mm;background:#FBEDEF;font-size:9.5pt}
.redline b{color:var(--fatal)}
.compact .chap{margin-bottom:6mm}
.compact .lede{font-size:11pt;line-height:1.7}
.compact .rule-list li{padding:2.2mm 0}
.compact td,.compact th{padding:2.3mm 4mm}
/* 封面 */
.cover{display:grid;grid-template-columns:105mm 1fr;gap:18mm;align-items:center;padding:24mm 26mm}
.cover .seal{width:105mm}
.cover h1{font-size:34pt;letter-spacing:.06em;margin:0 0 4mm}
.cover .en{font:600 13pt var(--latin);letter-spacing:.32em;color:var(--sub);margin:0 0 16mm}
.cover .wm{width:92mm;display:block;margin-bottom:16mm}
.cover .meta{font-size:9pt;color:var(--sub);line-height:1.9}
/* 目录 */
.toc{display:grid;grid-template-columns:1fr 1fr;gap:0 18mm;margin-top:4mm}
.toc .item{display:grid;grid-template-columns:16mm 1fr auto;align-items:baseline;padding:6mm 0;border-bottom:.25mm solid var(--rule)}
.toc .n{font:600 16pt var(--fig);color:var(--pencil)}
.toc .t{font:700 15pt var(--serif)}
.toc .s{display:block;font:400 9.5pt var(--sans);color:var(--sub);margin-top:1mm}
.toc .p{font:600 12pt var(--fig);color:var(--sub)}
/* 色块 */
.sw{background:var(--white);border:.25mm solid var(--rule)}
.sw .chip{height:38mm}
.sw .info{padding:3.5mm 5mm;font-size:9pt;line-height:1.7}
.sw .info b{display:block;font:700 12.5pt var(--serif);margin-bottom:1mm}
.sw.big .chip{height:88mm}
.kv{display:grid;grid-template-columns:13mm 1fr;font-family:var(--fig);font-weight:500;color:var(--ink)}
.kv span:nth-child(odd){color:var(--sub)}
.ratio{display:flex;height:12mm;border:.25mm solid var(--rule)}
.ratio div{display:flex;align-items:center;justify-content:center;font:600 8.6pt var(--fig);color:#fff}
/* 字体样张 */
.spec{background:var(--white);border:.25mm solid var(--rule);padding:8mm 9mm}
.spec .big{font-size:34pt;line-height:1.25;margin:3mm 0 4mm;white-space:nowrap}
.spec .row{font-size:9pt;color:var(--sub);border-top:.25mm solid var(--rule);padding-top:2mm;margin-top:3mm}
/* 错误用法 */
.dont{display:grid;grid-template-columns:repeat(4,1fr);gap:6mm}
.dont .tile{height:54mm;overflow:hidden}
.dont .x{font:700 10pt var(--sans);color:var(--fatal);margin-top:2mm}
.dont .why{font-size:8.8pt;color:var(--sub);line-height:1.5}
/* 应用:名片 */
.card{width:90mm;height:54mm;background:var(--white);border:.25mm solid var(--rule);position:relative;box-shadow:0 .6mm 1.5mm rgba(0,0,0,.08)}
.card.back{background:var(--ink)}
/* 应用:纸张 */
.sheet{background:var(--white);border:.25mm solid var(--rule);box-shadow:0 .6mm 1.5mm rgba(0,0,0,.08);position:relative;overflow:hidden}
/* 应用:演示文稿 */
.slide{aspect-ratio:16/9;background:var(--white);border:.25mm solid var(--rule);position:relative;overflow:hidden}
/* 应用:浏览器 */
.browser{background:var(--white);border:.25mm solid var(--rule);border-radius:2mm;overflow:hidden}
.browser .bar{background:#E8EAED;height:9mm;display:flex;align-items:flex-end;padding:0 3mm;gap:2mm}
.browser .tab{background:var(--white);border-radius:1.5mm 1.5mm 0 0;height:7mm;padding:0 3mm;display:flex;align-items:center;gap:1.8mm;font-size:7pt}
.browser .tab img{width:16px;height:16px;image-rendering:auto}
</style>
</head>
<body>
<!-- ============ 1 封面 ============ -->
<section class="page cover">
<img class="seal" src="../logo/svg/seal-textured.svg" alt="标博士印章">
<div>
<h1>视觉识别规范</h1>
<p class="en">VISUAL IDENTITY</p>
<img class="wm" src="../logo/svg/wordmark.svg" alt="标博士 BIAOBOSHI">
<div class="meta">第 1.1 版<br>2026 年 11 月<br>适用于产品界面、官网、宣传物料与对外文件</div>
</div>
</section>
<!-- ============ 2 目录 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>目录</span></div>
<div class="chap"><h1>目录</h1></div>
<div class="toc">
<div class="item"><span class="n">00</span><span class="t">关于本手册<span class="s">用途与使用方法</span></span><span class="p">3</span></div>
<div class="item"><span class="n">04</span><span class="t">标准字体<span class="s">品牌字体、界面字体、数字字体</span></span><span class="p">15</span></div>
<div class="item"><span class="n">01</span><span class="t">品牌概述<span class="s">定位、性格、口号、语气</span></span><span class="p">4</span></div>
<div class="item"><span class="n">05</span><span class="t">背景与错误用法<span class="s">反白、单色、不允许的做法</span></span><span class="p">16</span></div>
<div class="item"><span class="n">02</span><span class="t">标志<span class="s">释义、组合、构成、安全区、尺寸</span></span><span class="p">6</span></div>
<div class="item"><span class="n">06</span><span class="t">应用示例<span class="s">名片、信封、公文、报告、演示、网站、图标</span></span><span class="p">18</span></div>
<div class="item"><span class="n">03</span><span class="t">标准色<span class="s">品牌色、校样色系、使用规则</span></span><span class="p">12</span></div>
<div class="item"><span class="n">07</span><span class="t">文件与授权<span class="s">资产清单、字体许可、版本记录</span></span><span class="p">23</span></div>
</div>
<div class="folio">2</div>
</section>
<!-- ============ 3 关于本手册 ============ -->
<section class="page compact">
<div class="run"><b>标博士 视觉识别规范</b><span>00 关于本手册</span></div>
<div class="chap"><span class="no">00</span><h1>关于本手册</h1></div>
<div class="cols c2">
<div>
<p class="lede">本手册规定「标博士」品牌的视觉识别:标志、颜色、字体以及它们在常见物料上的用法。产品界面、官网、宣传物料和对外文件都以本手册为准。</p>
<p class="lede">手册里的尺寸、比例和颜色都来自正式的标志文件,不要从本 PDF 中截图使用标志。需要标志文件时,请使用第 07 章列出的 SVG 和 PNG。</p>
</div>
<div>
<h2>三条基本原则</h2>
<ul class="rule-list">
<li><h3>出处看得见</h3><p class="small sub">标博士的核心是「可复核」,每条结论都能回到原文。视觉上,出处、依据永远是看得见的一部分,用蓝铅笔色标出。</p></li>
<li><h3>红色只说两件事</h3><p class="small sub">印章红只属于标志;致命红只表示需要处理的问题。其他场合不用红色。</p></li>
<li><h3>辅助,而不是担保</h3><p class="small sub">标志代表品牌,不代表检查结论。任何情况下都不能把标志当作「通过」「合格」章使用。</p></li>
</ul>
</div>
</div>
<h2 style="margin-top:4mm">按场景查阅</h2>
<table style="font-size:9.5pt">
<thead><tr><th style="width:22%">场景</th><th style="width:22%">先看</th><th>关键规则</th></tr></thead>
<tbody>
<tr><td><b>产品界面</b></td><td>02 标志、03 标准色、04 字体</td><td class="sub">印章红不进界面;红色只表示需要处理的问题</td></tr>
<tr><td><b>官网与营销物料</b></td><td>02 标志、03 标准色、06 应用</td><td class="sub">主标志用横版质感版;口号「标博士,你的AI投标专家」</td></tr>
<tr><td><b>检查报告与对外文件</b></td><td>02 标志、06 应用</td><td class="sub">标志只放页眉;不盖章、不写「通过 / 合格」</td></tr>
<tr><td><b>印刷物料</b></td><td>02 标志、03 标准色、07 文件</td><td class="sub">使用 SVG 文件;印章红以打样为准</td></tr>
</tbody>
</table>
<div class="folio">3</div>
</section>
<!-- ============ 4 品牌概述 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>01 品牌概述</span></div>
<div class="chap"><span class="no">01</span><h1>品牌概述</h1></div>
<div class="cols c21" style="align-items:start">
<div>
<h2>投前审校员</h2>
<p class="lede">标博士把招标文件里的每一条要求,跟投标文件逐条对上,指出哪里没对上、依据在原文哪一页,最后由投标人确认。</p>
<p class="lede sub">不替你打包票,但让每一条判断都查得到依据。</p>
<div style="margin-top:14mm;font:700 34pt/1.2 var(--serif);letter-spacing:.03em">标博士,你的AI投标专家</div>
<p class="note" style="margin-top:2mm">品牌口号,固定写法(AI 两侧不加空格,结尾不加标点)。「专家」指懂行、查得细;具体结论仍用「辅助检查」「风险提示」表述,不承诺结果。</p>
</div>
<div>
<h2>品牌性格</h2>
<ul class="rule-list">
<li><h3>较真</h3><p class="small sub">逐条、不跳过、不含糊。「没找到」也要说清楚找过哪些地方。</p></li>
<li><h3>有据</h3><p class="small sub">说什么都带出处。出处是每条结论的固定组成部分,不是附加信息。</p></li>
<li><h3>沉着</h3><p class="small sub">截止前不添乱、不吓人。致命问题说清后果和改法,不用惊叹号。</p></li>
</ul>
<p class="note" style="margin-top:4mm">不是什么:不是「黑科技」,不是「AI 全自动」,不卖萌。</p>
</div>
</div>
<div class="folio">4</div>
</section>
<!-- ============ 5 语气 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>01 品牌概述</span></div>
<h2>品牌语气</h2>
<p class="lede sub" style="margin-bottom:5mm">文字和视觉一样是品牌的一部分。界面、报告、宣传都按下面的原则写。</p>
<table>
<thead><tr><th style="width:24%">原则</th><th style="width:38%">这样写</th><th>不这样写</th></tr></thead>
<tbody>
<tr><td><b>说依据,不说保证</b></td><td>未找到对 ★ 条款的响应(招标文件第 38 页)</td><td class="sub">您的标书存在严重问题!</td></tr>
<tr><td><b>说投标人的话</b></td><td>★ 条款、无效投标、开标一览表、采购包</td><td class="sub">要素、实体、规则命中</td></tr>
<tr><td><b>结论在前,出处在后</b></td><td>报价超过采购包 2 的最高限价 1.6 万元。依据:第一章第 4 条</td><td class="sub">先长篇解释规则,最后才给结论</td></tr>
<tr><td><b>后果和改法一起说</b></td><td>这一项会导致投标无效。请在技术偏离表第 12 行补充响应。</td><td class="sub">请注意!</td></tr>
<tr><td><b>AI 产出明确标出</b></td><td>AI 摘要、AI 初稿;确认后由人署名</td><td class="sub">把 AI 结论写得像定论</td></tr>
<tr><td><b>不越过红线</b></td><td>辅助检查、风险提示</td><td class="sub">保证不废标、零废标、100% 通过</td></tr>
</tbody>
</table>
<div class="folio">5</div>
</section>
<!-- ============ 6 标志释义 ============ -->
<section class="page white">
<div class="run"><b>标博士 视觉识别规范</b><span>02 标志</span></div>
<div class="chap"><span class="no">02</span><h1>标志</h1></div>
<div style="display:flex;justify-content:center;margin:4mm 0 14mm"><img src="../logo/svg/logo-horizontal-textured.svg" style="width:205mm" alt="标博士横版标志"></div>
<div class="cols c3">
<div><h3>一方白文印</h3><p class="small sub">红底白字,字是纸的颜色。盖章是投标人每天都在做的事:投标函、授权书、骑缝章。印章代表专业和郑重,带着真实印泥的颗粒和毛边。</p></div>
<div><h3>宋体与 Caslon</h3><p class="small sub">「标博士」用思源宋体:招标文件和公文都以宋体为正文,投标人最熟悉。拼音用 Libre Caslon,和宋体同属铅字印刷传统,稳重而不张扬。</p></div>
<div><h3>印章不是结论</h3><p class="small sub">标志代表品牌,不代表任何检查结果。它不能盖在报告或投标文件的结论上,也不能和「通过」「合格」等字样组合。</p></div>
</div>
<div class="folio">6</div>
</section>
<!-- ============ 7 标准组合 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>02 标志</span></div>
<h2>标准组合</h2>
<p class="sub" style="margin-bottom:6mm">横版是主标志,优先使用;竖版用于方形或纵向的空间,例如登录页、海报、展架。</p>
<div class="cols c21">
<div>
<div class="tile" style="height:112mm"><img src="../logo/svg/logo-horizontal-textured.svg" style="width:150mm" alt="横版"></div>
<p class="cap">横版(主标志)<br><code>svg/logo-horizontal-textured.svg</code></p>
</div>
<div>
<div class="tile" style="height:112mm"><img src="../logo/svg/logo-vertical-textured.svg" style="width:60mm" alt="竖版"></div>
<p class="cap">竖版<br><code>svg/logo-vertical-textured.svg</code></p>
</div>
</div>
<p class="note" style="margin-top:6mm">每种组合都有「质感版」和「干净版」。印章显示大于 64 像素(印刷约 17 毫米)时用质感版;更小的尺寸、界面元素和单色印刷用干净版(文件名不带 textured)。</p>
<div class="folio">7</div>
</section>
<!-- ============ 8 构成与比例 ============ -->
<section class="page white">
<div class="run"><b>标博士 视觉识别规范</b><span>02 标志</span></div>
<h2>构成与比例</h2>
<p class="sub" style="margin-bottom:4mm">以文字块高度 H(「标博士」顶端到拼音底部)为基准。图中蓝色标注的尺寸直接取自标志文件。</p>
<img src="diagrams/construction-horizontal.svg" style="width:100%;height:104mm;object-fit:contain" alt="横版构成">
<div class="cols c3" style="margin-top:5mm">
<div><h3>印章与文字等高</h3><p class="small sub">印章实心部分高 1.02H,上下各比文字块多 1%,补偿印章颗粒边缘带来的「显小」。参照中国银行、招商银行等「图形 + 中英两行」组合的通行做法。</p></div>
<div><h3>中文与拼音</h3><p class="small sub">以中文字高为 100:拼音大写字母高 20,中文与拼音间距 14。拼音全大写,按中文宽度两端对齐。</p></div>
<div><h3>拼音按视觉边缘内缩</h3><p class="small sub">「标」「士」两端只有细横画尖,B 和 I 两端是粗竖画。几何上对齐时英文看起来更宽,因此拼音左内缩 5、右内缩 5.8。</p></div>
</div>
<div class="folio">8</div>
</section>
<!-- ============ 9 竖版 + 安全区 ============ -->
<section class="page white">
<div class="run"><b>标博士 视觉识别规范</b><span>02 标志</span></div>
<div class="cols c2">
<div>
<h2>竖版比例</h2>
<p class="sub small">印章边长为字标宽度 W 的一半,水平居中;印章与字标的间距为印章边长的 18%。</p>
<img src="diagrams/construction-vertical.svg" style="width:100%;height:128mm;object-fit:contain;margin-top:5mm" alt="竖版构成">
</div>
<div>
<h2>安全区</h2>
<p class="sub small">标志四周至少留出 H/4 的空白,其中不放任何文字、图形或其他标志的边缘。安全区是最小值,空间允许时尽量留更多。</p>
<img src="diagrams/clearspace.svg" style="width:100%;height:128mm;object-fit:contain;margin-top:5mm" alt="安全区">
</div>
</div>
<div class="folio">9</div>
</section>
<!-- ============ 10 最小尺寸 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>02 标志</span></div>
<h2>最小尺寸</h2>
<p class="sub" style="margin-bottom:6mm">小于下列尺寸时标志会失去辨识度。拼音在小尺寸下只起装饰作用;需要读清拼音时,请按「拼音可读」一栏的尺寸使用。</p>
<table style="margin-bottom:8mm">
<thead><tr><th>版本</th><th>屏幕最小</th><th>印刷最小</th><th>拼音可读</th><th>文件</th></tr></thead>
<tbody>
<tr><td><b>横版</b></td><td class="fig">160 px 宽</td><td class="fig">30 mm 宽</td><td class="fig">320 px / 45 mm 宽</td><td class="mono">logo-horizontal.svg</td></tr>
<tr><td><b>竖版</b></td><td class="fig">96 px 宽</td><td class="fig">20 mm 宽</td><td class="fig">200 px / 30 mm 宽</td><td class="mono">logo-vertical.svg</td></tr>
<tr><td><b>单独印章</b></td><td class="fig">32 px</td><td class="fig">8 mm</td><td>—</td><td class="mono">seal-small.svg(32–64 px)</td></tr>
<tr><td><b>16 像素图标</b></td><td class="fig">16 px</td><td>—</td><td>—</td><td class="mono">favicon-16.svg(专用造型)</td></tr>
</tbody>
</table>
<h3>实际效果(屏幕像素)</h3>
<div style="display:flex;align-items:flex-end;gap:10mm;margin-top:3mm" class="small sub">
<div><img src="../logo/svg/logo-horizontal.svg" style="width:160px;display:block"><span class="fig">160 px</span></div>
<div><img src="../logo/svg/logo-horizontal.svg" style="width:320px;display:block"><span class="fig">320 px</span></div>
<div><img src="../logo/svg/seal-small.svg" style="width:32px;display:block"><span class="fig">32 px</span></div>
<div><img src="../logo/svg/seal-small.svg" style="width:64px;display:block"><span class="fig">64 px</span></div>
<div><img src="../logo/svg/favicon-16.svg" style="width:16px;display:block"><span class="fig">16 px</span></div>
</div>
<div class="folio">10</div>
</section>
<!-- ============ 11 标志元素 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>02 标志</span></div>
<h2>标志元素</h2>
<p class="sub" style="margin-bottom:6mm">印章和字标可以单独使用:印章用于头像、图标、水印;字标用于已经出现过印章的版面,例如报告页眉。</p>
<div class="cols c4">
<div><div class="tile" style="height:72mm"><img src="../logo/svg/seal-textured.svg" style="width:40mm"></div><p class="cap">印章 质感版<br><code>seal-textured.svg</code></p></div>
<div><div class="tile" style="height:72mm"><img src="../logo/svg/seal.svg" style="width:40mm"></div><p class="cap">印章 干净版<br><code>seal.svg</code></p></div>
<div><div class="tile" style="height:72mm"><img src="../logo/svg/seal-small.svg" style="width:40mm"></div><p class="cap">印章 小尺寸版(白色笔画加粗,放大展示)<br><code>seal-small.svg</code></p></div>
<div><div class="tile" style="height:72mm"><img src="../logo/svg/favicon-16.svg" style="width:40mm"></div><p class="cap">16 像素专用(加粗简化的「标」字,放大展示)<br><code>favicon-16.svg</code></p></div>
</div>
<div class="cols c2" style="margin-top:6mm">
<div><div class="tile" style="height:44mm"><img src="../logo/svg/wordmark.svg" style="width:82mm"></div><p class="cap">字标 藏青 <code>wordmark.svg</code></p></div>
<div><div class="tile dark" style="height:44mm"><img src="../logo/svg/wordmark-reverse.svg" style="width:82mm"></div><p class="cap">字标 反白 <code>wordmark-reverse.svg</code></p></div>
</div>
<div class="folio">11</div>
</section>
<!-- ============ 12 品牌标准色 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>03 标准色</span></div>
<div class="chap"><span class="no">03</span><h1>标准色</h1></div>
<div class="cols c2">
<div class="sw big"><div class="chip" style="background:#D9291C"></div><div class="info"><b>印章红</b>朱砂色,偏橙。<strong>只用于标志。</strong>
<div class="kv" style="margin-top:2mm"><span>HEX</span><span>#D9291C</span><span>RGB</span><span>R217 G41 B28</span><span>CMYK</span><span>C0 M81 Y87 K15</span><span>对比</span><span>白底 4.9 : 1</span></div></div></div>
<div class="sw big"><div class="chip" style="background:#1C2554"></div><div class="info"><b>藏青</b>字标颜色,也可用于需要品牌感的标题。
<div class="kv" style="margin-top:2mm"><span>HEX</span><span>#1C2554</span><span>RGB</span><span>R28 G37 B84</span><span>CMYK</span><span>C67 M56 Y0 K67</span><span>对比</span><span>白底 14.6 : 1</span></div></div></div>
</div>
<p class="note" style="margin-top:4mm">CMYK 为换算的近似值。印章红在四色印刷下会偏暗,正式印刷请以打样为准,必要时使用专色(请印厂比对潘通色号)。</p>
<div class="folio">12</div>
</section>
<!-- ============ 13 校样色系 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>03 标准色</span></div>
<h2>校样色系</h2>
<p class="sub" style="margin-bottom:5mm">产品界面和文件版式使用的颜色,来自出版社的校对传统:蓝铅笔是机器的批注,墨是人确认后的定稿,红笔只用来标问题。颜色本身就说明了「谁说的、确认没有」。</p>
<div class="cols c3" style="gap:5mm">
<div class="sw"><div class="chip" style="background:#1D2733"></div><div class="info"><b>墨</b>正文、标题、人工确认后的内容<div class="kv"><span>HEX</span><span>#1D2733</span><span>CMYK</span><span>C43 M24 Y0 K80</span></div></div></div>
<div class="sw"><div class="chip" style="background:#2F5BD3"></div><div class="info"><b>蓝铅笔</b>AI 标注、原文出处、链接、待确认<div class="kv"><span>HEX</span><span>#2F5BD3</span><span>CMYK</span><span>C78 M57 Y0 K17</span></div></div></div>
<div class="sw"><div class="chip" style="background:#F5F6F3"></div><div class="info"><b>校样纸</b>页面底色,冷灰白,不是米色<div class="kv"><span>HEX</span><span>#F5F6F3</span><span>CMYK</span><span>C0 M0 Y1 K4</span></div></div></div>
<div class="sw"><div class="chip" style="background:#C4122F"></div><div class="info"><b>致命红</b>只用于致命级问题<div class="kv"><span>HEX</span><span>#C4122F</span><span>CMYK</span><span>C0 M91 Y76 K23</span></div></div></div>
<div class="sw"><div class="chip" style="background:#A66300"></div><div class="info"><b>赭</b>重要级问题;只用于标签和大字<div class="kv"><span>HEX</span><span>#A66300</span><span>CMYK</span><span>C0 M40 Y100 K35</span></div></div></div>
<div class="sw"><div class="chip" style="background:#2E6B4F"></div><div class="info"><b>定稿绿</b>已确认、确认人署名<div class="kv"><span>HEX</span><span>#2E6B4F</span><span>CMYK</span><span>C57 M0 Y26 K58</span></div></div></div>
</div>
<div class="folio">13</div>
</section>
<!-- ============ 14 色彩规则 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>03 标准色</span></div>
<h2>使用规则</h2>
<div class="cols c2" style="margin-top:4mm">
<div>
<h3>用色比例</h3>
<p class="small sub">版面以纸色和墨色为主,蓝铅笔点出依据,状态色只出现在有问题的地方。</p>
<div class="ratio" style="margin:3mm 0 1.5mm">
<div style="flex:60;background:#F5F6F3;color:var(--sub)">校样纸 / 白 60%</div>
<div style="flex:25;background:#1D2733">墨 25%</div>
<div style="flex:10;background:#2F5BD3">蓝 10%</div>
<div style="flex:5;background:#C4122F">5%</div>
</div>
<p class="note">最后 5% 是致命红、赭、定稿绿等状态色的总和。</p>
<h3 style="margin-top:8mm">对比度</h3>
<p class="small sub">正文文字与背景的对比度不低于 4.5 : 1。赭色在校样纸上只有 4.4 : 1,所以只能用于标签和 14 号以上的大字。</p>
</div>
<div>
<h3>两种红色不能混用</h3>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:4mm;margin:3mm 0">
<div><div style="height:40mm;background:#D9291C"></div><p class="cap"><b style="color:var(--ink)">印章红 #D9291C</b><br>偏橙。只用于标志。</p></div>
<div><div style="height:40mm;background:#C4122F"></div><p class="cap"><b style="color:var(--ink)">致命红 #C4122F</b><br>偏洋红。只用于界面中的致命问题。</p></div>
</div>
<div class="redline">不要把印章红用在按钮、标签、提示上,也不要把致命红用在标志上。<b>红色出现在界面里,就意味着有问题需要处理。</b></div>
</div>
</div>
<h3 style="margin-top:7mm">文字与背景的允许组合</h3>
<div class="cols c4" style="gap:4mm;margin-top:2mm">
<div style="background:#F5F6F3;border:.25mm solid var(--rule);padding:4mm"><div style="font:700 13pt var(--serif);color:#1D2733">墨字 校样纸</div><div class="fig" style="font-size:9pt;color:var(--sub)">13.9 : 1 正文</div></div>
<div style="background:#F5F6F3;border:.25mm solid var(--rule);padding:4mm"><div style="font:700 13pt var(--serif);color:#2F5BD3">蓝铅笔 校样纸</div><div class="fig" style="font-size:9pt;color:var(--sub)">5.4 : 1 出处、链接</div></div>
<div style="background:#1D2733;padding:4mm"><div style="font:700 13pt var(--serif);color:#fff">白字 墨色</div><div class="fig" style="font-size:9pt;color:#AEB6C0">15.1 : 1 封面、页脚</div></div>
<div style="background:#F5F6F3;border:.25mm solid var(--rule);padding:4mm"><div style="font:700 13pt var(--serif);color:#A66300">赭 校样纸</div><div class="fig" style="font-size:9pt;color:var(--sub)">4.4 : 1 只用于标签和大字</div></div>
</div>
<div class="folio">14</div>
</section>
<!-- ============ 15 字体 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>04 标准字体</span></div>
<div class="chap"><span class="no">04</span><h1>标准字体</h1></div>
<div class="cols c2" style="gap:6mm">
<div class="spec">
<h3>思源宋体 品牌标题</h3>
<div class="big" style="font-family:var(--serif);font-weight:700;font-size:26pt">标博士,你的AI投标专家</div>
<p class="small sub">用于标志字标、文件与页面的大标题、报告封面。常用字重 SemiBold 与 Bold。</p>
<div class="row">Noto Serif SC,SIL OFL 1.1,可免费商用</div>
</div>
<div class="spec">
<h3>思源黑体 / 系统黑体 界面与正文</h3>
<div class="big" style="font-family:var(--sans);font-weight:500">报价超过采购包限价</div>
<p class="small sub">用于界面、表格和正文。网页优先使用系统字体(苹方、微软雅黑),文件和印刷使用思源黑体。</p>
<div class="row">Noto Sans SC,SIL OFL 1.1,可免费商用</div>
</div>
<div class="spec">
<h3>Libre Caslon 英文品牌字</h3>
<div class="big" style="font-family:var(--latin);font-weight:600;letter-spacing:.2em;font-size:24pt">BIAOBOSHI</div>
<p class="small sub">只用于标志拼音和少量英文标题,全大写并拉开字距。</p>
<div class="row">Libre Caslon Text,SIL OFL 1.1,可免费商用</div>
</div>
<div class="spec">
<h3>Barlow Semi Condensed 数字</h3>
<div class="big" style="font-family:var(--fig);font-weight:600;font-size:25pt">第 38 页 ≥512G 132.00 万元</div>
<p class="small sub">用于页码、金额、参数与表格数字。字形窄、数字等宽,列与列对得齐。</p>
<div class="row">Barlow Semi Condensed,SIL OFL 1.1,可免费商用</div>
</div>
</div>
<div class="folio">15</div>
</section>
<!-- ============ 16 背景与反白 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>05 背景与错误用法</span></div>
<div class="chap"><span class="no">05</span><h1>背景与错误用法</h1></div>
<p class="sub" style="margin:-3mm 0 6mm">浅色背景用标准版;深色背景用反白版(文件名带 reverse),印章下面垫有纸色底,白字保持纸的颜色。单色版用于传真、盖章、单色印刷等只能用一种颜色的场合。</p>
<div class="cols c3" style="gap:5mm">
<div><div class="tile" style="height:56mm"><img src="../logo/svg/logo-horizontal-textured.svg" style="width:62mm"></div><p class="cap">白色背景 标准版</p></div>
<div><div class="tile paper" style="height:56mm"><img src="../logo/svg/logo-horizontal-textured.svg" style="width:62mm"></div><p class="cap">校样纸背景 标准版</p></div>
<div><div class="tile dark" style="height:56mm"><img src="../logo/svg/logo-horizontal-textured-reverse.svg" style="width:62mm"></div><p class="cap">墨色背景 反白版 <code>*-reverse.svg</code></p></div>
<div><div class="tile" style="height:56mm"><img src="../logo/svg/logo-mono-black.svg" style="width:62mm"></div><p class="cap">单色 黑 <code>logo-mono-black.svg</code></p></div>
<div><div class="tile dark" style="height:56mm"><img src="../logo/svg/logo-mono-white.svg" style="width:62mm"></div><p class="cap">单色 白 <code>logo-mono-white.svg</code></p></div>
<div><div class="tile" style="height:56mm;background:#1C2554;border-color:#1C2554"><img src="../logo/svg/logo-horizontal-textured-reverse.svg" style="width:62mm"></div><p class="cap">藏青背景 反白版</p></div>
</div>
<div class="folio">16</div>
</section>
<!-- ============ 17 错误用法 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>05 背景与错误用法</span></div>
<h2>错误用法</h2>
<p class="sub" style="margin-bottom:5mm">以下做法都不允许。需要特殊用法时,请先联系品牌负责人。</p>
<div class="dont">
<div><div class="tile"><img src="../logo/svg/logo-horizontal.svg" style="width:58mm;height:9mm;object-fit:fill"></div><p class="x">不要拉伸或压扁</p><p class="why">只能等比缩放。</p></div>
<div><div class="tile"><img src="../logo/svg/logo-horizontal.svg" style="width:50mm;filter:hue-rotate(150deg) saturate(1.4)"></div><p class="x">不要改颜色</p><p class="why">只用标准色、反白或单色版。</p></div>
<div><div class="tile"><img src="../logo/svg/logo-horizontal.svg" style="width:48mm;transform:rotate(-12deg)"></div><p class="x">不要旋转</p><p class="why">标志始终水平放置。</p></div>
<div><div class="tile"><img src="../logo/svg/logo-horizontal.svg" style="width:50mm;filter:drop-shadow(1.2mm 1.2mm .8mm rgba(0,0,0,.45))"></div><p class="x">不要加阴影、描边或特效</p><p class="why">印章的质感已经足够。</p></div>
<div><div class="tile"><div style="display:flex;align-items:center;gap:3mm"><img src="../logo/svg/seal.svg" style="width:13mm"><span style="font:700 17pt 'Microsoft YaHei','PingFang SC',sans-serif;color:#1C2554">标博士</span></div></div><p class="x">不要用其他字体重排</p><p class="why">字标只能使用正式文件。</p></div>
<div><div class="tile"><div style="display:flex;flex-direction:column;align-items:center;gap:2mm"><img src="../logo/svg/wordmark.svg" style="width:42mm"><img src="../logo/svg/seal.svg" style="width:9mm"></div></div><p class="x">不要改变印章与字标的位置</p><p class="why">只用横版和竖版两种组合。</p></div>
<div><div class="tile dark"><img src="../logo/svg/logo-horizontal.svg" style="width:50mm"></div><p class="x">深色背景不要用标准版</p><p class="why">请改用反白版。</p></div>
<div><div class="tile" style="flex-direction:column;gap:1mm"><div style="font:700 13pt var(--serif)">检查结论:合格</div><img src="../logo/svg/seal-textured.svg" style="width:14mm;transform:rotate(-8deg);opacity:.92"></div><p class="x">不要当作「通过 / 合格」章</p><p class="why">标志不代表检查结果,这是产品红线。</p></div>
</div>
<div class="folio">17</div>
</section>
<!-- ============ 18 名片与信封 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>06 应用示例</span></div>
<div class="chap"><span class="no">06</span><h1>应用示例</h1></div>
<div class="cols" style="grid-template-columns:96mm 1fr;gap:14mm">
<div>
<h3>名片(90 × 54 mm,1 : 1)</h3>
<div class="card" style="margin-top:3mm">
<img src="../logo/svg/logo-horizontal-textured.svg" style="position:absolute;left:7mm;top:6mm;width:32mm">
<div style="position:absolute;left:7mm;bottom:5.5mm">
<div style="font:700 11pt var(--serif)">黄晓沁</div>
<div style="font-size:7pt;color:var(--sub)">销售专家</div>
<div style="font:500 7pt/1.6 var(--fig);color:var(--ink);margin-top:1.5mm">电话 138 1452 1983<br>邮箱 romy@biaoboshi.cn</div>
<div style="font:500 6.5pt/1.6 var(--sans);color:var(--sub);margin-top:.5mm">南京市江宁区双龙大道3333号 211100<br><span style="font-family:var(--fig)">www.biaoboshi.cn</span></div>
</div>
</div>
<div class="card back" style="margin-top:5mm;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3mm">
<img src="../logo/svg/seal-textured.svg" style="width:16mm">
<div style="font:600 8pt var(--serif);color:#E9ECEF;letter-spacing:.1em">标博士,你的<span style="letter-spacing:.02em">AI</span>投标专家</div>
</div>
<p class="cap">正面白底:横版质感版、姓名、职务、电话、邮箱、地址与邮编、官网;背面墨色底:印章居中、口号。</p>
</div>
<div>
<h3>信封(DL 220 × 110 mm,1 : 2)</h3>
<div style="display:flex;gap:6mm;margin-top:3mm;align-items:flex-start">
<div>
<div class="sheet" style="width:110mm;height:55mm">
<div style="position:absolute;top:5mm;left:7.5mm;width:4mm;height:5mm;border:.35mm solid #D9291C"></div><div style="position:absolute;top:5mm;left:12.5mm;width:4mm;height:5mm;border:.35mm solid #D9291C"></div><div style="position:absolute;top:5mm;left:17.5mm;width:4mm;height:5mm;border:.35mm solid #D9291C"></div><div style="position:absolute;top:5mm;left:22.5mm;width:4mm;height:5mm;border:.35mm solid #D9291C"></div><div style="position:absolute;top:5mm;left:27.5mm;width:4mm;height:5mm;border:.35mm solid #D9291C"></div><div style="position:absolute;top:5mm;left:32.5mm;width:4mm;height:5mm;border:.35mm solid #D9291C"></div>
<div style="position:absolute;top:4mm;right:5mm;width:10mm;height:12.5mm;border:.3mm dashed var(--rule);font-size:4.5pt;color:var(--sub);display:flex;align-items:center;justify-content:center;text-align:center">贴邮票处</div>
<div style="position:absolute;left:14mm;right:24mm;top:22mm;border-top:.25mm solid #E3E6E2"></div>
<div style="position:absolute;left:14mm;right:24mm;top:29mm;border-top:.25mm solid #E3E6E2"></div>
<img src="../logo/svg/logo-horizontal.svg" style="position:absolute;right:6mm;bottom:12.5mm;width:24mm">
<div style="position:absolute;right:6mm;bottom:3.5mm;font:500 4.8pt/1.5 var(--fig);color:var(--sub);text-align:right">南京市江宁区双龙大道3333号 邮编 211100<br>寄件人 黄晓沁 138 1452 1983 romy@biaoboshi.cn</div>
</div>
<p class="cap">正面</p>
<div class="sheet" style="width:110mm;height:55mm;margin-top:3mm">
<div style="position:absolute;left:0;right:0;top:0;height:16mm;border-bottom:.3mm solid var(--rule);background:#FAFBF9"></div>
<img src="../logo/svg/seal-textured.svg" style="position:absolute;left:50%;top:20mm;width:12mm;transform:translateX(-50%)">
<div style="position:absolute;left:0;right:0;bottom:9mm;text-align:center;font:600 6pt var(--serif);color:var(--sub);letter-spacing:.08em">标博士,你的<span style="letter-spacing:.02em">AI</span>投标专家</div>
</div>
<p class="cap">背面(封舌在上)</p>
</div>
<ul class="rule-list" style="flex:1">
<li><h3>邮政要素</h3><p class="small sub">邮编框、贴邮票处的尺寸和位置按国家标准 GB/T 1416 印制。邮编框按国标用金红色,这是「红色只说两件事」规则的法定例外。</p></li>
<li><h3>品牌要素</h3><p class="small sub">横版干净版放在右下角,下方一行寄件人信息;收件区留白,不放图形。</p></li>
<li><h3>背面</h3><p class="small sub">印章居中,下方口号;封舌区域保持素净。</p></li>
</ul>
</div>
</div>
</div>
<div class="folio">18</div>
</section>
<!-- ============ 19 公文首页 / 信纸 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>06 应用示例</span></div>
<h2>公文首页 / 信纸(A4 竖版)</h2>
<div style="display:flex;gap:14mm;margin-top:4mm;align-items:flex-start">
<div class="sheet" style="width:112mm;height:158mm;flex:none">
<img src="../logo/svg/logo-horizontal.svg" style="position:absolute;left:10mm;top:10mm;width:34mm">
<div style="position:absolute;left:10mm;right:10mm;top:24mm;border-top:.3mm solid var(--rule)"></div>
<div style="position:absolute;left:10mm;top:31mm;right:10mm">
<div style="font:700 10pt var(--serif);margin-bottom:2.5mm">关于标段三投标文件检查结果的说明</div>
<div style="height:1.8mm;background:#E3E6E2;margin:1.8mm 0;width:100%"></div><div style="height:1.8mm;background:#E3E6E2;margin:1.8mm 0;width:96%"></div><div style="height:1.8mm;background:#E3E6E2;margin:1.8mm 0;width:88%"></div><div style="height:1.8mm;background:#E3E6E2;margin:1.8mm 0;width:93%"></div><div style="height:1.8mm;background:#E3E6E2;margin:1.8mm 0;width:70%"></div>
</div>
<div style="position:absolute;left:10mm;right:10mm;bottom:8mm;border-top:.3mm solid var(--rule);padding-top:1.8mm;font:500 6pt var(--fig);color:var(--sub)">标博士 南京市江宁区双龙大道3333号 211100 www.biaoboshi.cn romy@biaoboshi.cn</div>
</div>
<ul class="rule-list" style="flex:1;max-width:120mm">
<li><h3>页眉</h3><p class="small sub">左上角放横版干净版,宽度约为版心的 1/5,下方一条细线与正文分开。</p></li>
<li><h3>正文</h3><p class="small sub">标题用思源宋体,正文用思源黑体或仿宋(正式公文按单位规定)。正文区域不放印章图形。</p></li>
<li><h3>页脚</h3><p class="small sub">放机构名称、地址与联系方式,用辅助灰小字。</p></li>
<li><h3>纸张与印刷</h3><p class="small sub">白色胶版纸或道林纸;标志按标准色印刷,印章红以打样为准。电子版用同一版式的 Word 模板。</p></li>
</ul>
</div>
<div class="folio">19</div>
</section>
<!-- ============ 19 检查报告 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>06 应用示例</span></div>
<div class="cols" style="grid-template-columns:112mm 1fr;gap:14mm">
<div class="sheet" style="width:112mm;height:158mm">
<img src="../logo/svg/logo-horizontal.svg" style="position:absolute;left:10mm;top:10mm;width:30mm">
<div style="position:absolute;left:10mm;right:10mm;top:38mm">
<div style="font:700 17pt/1.3 var(--serif)">废标风险检查报告</div>
<div style="font-size:7pt;color:var(--sub);margin-top:3mm;line-height:1.8">项目:智慧规划资源 2025 标段三<br>采购包:采购包 2<br>投标文件版本:v3<br>检查时间:2026 年 11 月 2 日 14:05</div>
<div style="margin-top:6mm;display:flex;gap:4mm;font:600 9pt var(--fig)"><span style="color:var(--fatal)">致命 2</span><span style="color:var(--amber)">重要 1</span><span style="color:var(--sub)">提示 4</span></div>
</div>
<div style="position:absolute;left:10mm;right:10mm;bottom:10mm;border-top:.3mm solid var(--rule);padding-top:2mm;font-size:5.6pt;line-height:1.6;color:var(--sub)">本报告为辅助检查结果,检查范围见第 2 页。所有结论均附原文出处,需由投标人逐项确认,不构成对投标结果的任何保证。</div>
</div>
<div>
<h2>检查报告封面</h2>
<ul class="rule-list">
<li><h3>标志只放在页眉</h3><p class="small sub">使用横版干净版,放在左上角。标志和报告结论之间保持距离,不叠放、不靠近统计数字。</p></li>
<li><h3>不盖章、不写「通过」</h3><p class="small sub">报告的任何位置都不出现印章图形或「通过 / 合格 / 已审核」等字样。问题统计只写数量和级别。</p></li>
<li><h3>免责声明固定在页脚</h3><p class="small sub">说明「辅助检查、附原文出处、由投标人确认、不构成保证」,并指向检查范围所在页。</p></li>
<li><h3>级别颜色</h3><p class="small sub">致命用致命红,重要用赭,提示用辅助灰。印章红不出现在报告正文里。</p></li>
</ul>
<div class="redline" style="margin-top:4mm"><b>产品红线:</b>报告只提供风险提示和依据,不承诺结果。视觉上任何「盖章认证」的暗示都不允许。</div>
</div>
</div>
<div class="folio">20</div>
</section>
<!-- ============ 20 演示文稿 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>06 应用示例</span></div>
<h2>演示文稿(16 : 9)</h2>
<div class="cols" style="grid-template-columns:3fr 2fr;gap:8mm;margin-top:4mm;align-items:end">
<div>
<div class="slide" style="background:var(--ink)">
<img src="../logo/svg/seal-textured.svg" style="position:absolute;left:9%;top:16%;width:14%">
<div style="position:absolute;left:9%;top:47%;right:9%;color:#fff">
<div style="font:700 17pt/1.3 var(--serif)">标博士,你的AI投标专家</div>
<div style="font-size:7.5pt;color:#AEB6C0;margin-top:2mm">标博士产品介绍 2026 年 11 月</div>
</div>
<img src="../logo/svg/wordmark-reverse.svg" style="position:absolute;right:6%;bottom:8%;width:17%">
</div>
<p class="cap">封面:墨色底,印章居左上,标题用思源宋体,字标放右下角。</p>
</div>
<div>
<div class="slide" style="background:var(--paper)">
<div style="position:absolute;left:6%;top:9%;font:700 11pt var(--serif)">检查结果概览</div>
<img src="../logo/svg/logo-horizontal.svg" style="position:absolute;right:5%;top:8%;width:15%">
<div style="position:absolute;left:6%;top:28%;right:6%;display:grid;grid-template-columns:repeat(3,1fr);gap:4%">
<div style="background:#fff;border:.25mm solid var(--rule);padding:3mm"><div style="font:600 18pt var(--fig);color:var(--fatal)">2</div><div style="font-size:6.5pt;color:var(--sub)">致命问题</div></div>
<div style="background:#fff;border:.25mm solid var(--rule);padding:3mm"><div style="font:600 18pt var(--fig);color:var(--amber)">1</div><div style="font-size:6.5pt;color:var(--sub)">重要问题</div></div>
<div style="background:#fff;border:.25mm solid var(--rule);padding:3mm"><div style="font:600 18pt var(--fig);color:var(--pencil)">46</div><div style="font-size:6.5pt;color:var(--sub)">条要求附有出处</div></div>
</div>
<div style="position:absolute;left:6%;bottom:9%;font-size:6pt;color:var(--sub)">示意数据</div>
</div>
<p class="cap">内页:校样纸底,标题左上,横版干净版右上;数字用 Barlow Semi Condensed。</p>
</div>
</div>
<div class="cols c3" style="margin-top:9mm">
<div><h3>封面用墨色底</h3><p class="small sub">墨色底上印章最醒目。标题用思源宋体,一句话说清主题;字标放右下角,不和印章抢位置。</p></div>
<div><h3>内页用校样纸底</h3><p class="small sub">标题固定在左上,横版干净版固定在右上,宽度约为页面的 15%。正文和图表区域不放标志。</p></div>
<div><h3>数字和出处</h3><p class="small sub">统计数字用 Barlow Semi Condensed,问题级别用状态色;凡是结论都在页面上注明出处或「示意数据」。</p></div>
</div>
<div class="folio">21</div>
</section>
<!-- ============ 21 网站与图标 ============ -->
<section class="page">
<!-- Apple 风格连续曲率圆角(squircle):iOS 图标遮罩的贝塞尔近似,r = 边长 × 22.37%。用 SVG 裁切而不是 CSS 遮罩,导出 PDF 时边缘干净 -->
<svg width="0" height="0" style="position:absolute"><clipPath id="squircle"><path d="M34.20 0.00L65.80 0.00C75.65 0.00 80.57 0.00 85.87 1.68C91.66 3.78 96.22 8.34 98.32 14.13C100.00 19.43 100.00 24.35 100.00 34.20L100.00 65.80C100.00 75.65 100.00 80.57 98.32 85.87C96.22 91.66 91.66 96.22 85.87 98.32C80.57 100.00 75.65 100.00 65.80 100.00L34.20 100.00C24.35 100.00 19.43 100.00 14.13 98.32C8.34 96.22 3.78 91.66 1.68 85.87C0.00 80.57 0.00 75.65 0.00 65.80L0.00 34.20C0.00 24.35 0.00 19.43 1.68 14.13C3.78 8.34 8.34 3.78 14.13 1.68C19.43 0.00 24.35 0.00 34.20 0.00Z"/></clipPath></svg>
<div class="run"><b>标博士 视觉识别规范</b><span>06 应用示例</span></div>
<div class="cols c21" style="gap:10mm">
<div>
<h2>网站</h2>
<div class="browser" style="margin-top:3mm">
<div class="bar"><div class="tab"><img src="../logo/png/favicon-16.png" alt="">标博士 投前废标风险检查</div></div>
<div style="background:#fff;border-bottom:.25mm solid var(--rule);padding:1.6mm 4mm"><div style="background:#F1F3F4;border-radius:3mm;padding:1mm 4mm;font:500 7.5pt var(--fig);color:var(--sub)">www.biaoboshi.cn</div></div>
<div style="background:var(--paper)">
<div style="display:flex;justify-content:space-between;align-items:center;padding:4mm 6mm;background:#fff;border-bottom:.25mm solid var(--rule)">
<img src="../logo/svg/logo-horizontal.svg" style="width:34mm">
<div style="display:flex;gap:6mm;font-size:7.5pt;color:var(--sub)"><span>产品</span><span>价格</span><span>帮助</span><span style="color:var(--ink);font-weight:500">登录</span></div>
</div>
<div style="padding:15mm 8mm 17mm">
<div style="font:700 26pt/1.25 var(--serif)">标博士,你的AI投标专家</div>
<div style="font-size:8.5pt;color:var(--sub);margin:3mm 0 5mm;max-width:110mm">上传招标文件,得到一份能逐条回到原文的检查清单;递交前核对投标文件,逐项确认后导出报告。</div>
<span style="display:inline-block;background:var(--ink);color:#fff;font-size:8pt;padding:2mm 5mm">免费检查一个项目</span>
</div>
</div>
</div>
<p class="cap">页头左侧放横版干净版,高度约 32–40 像素。浏览器标签使用 16 像素专用图标。</p>
<h3 style="margin-top:5mm">邮件签名</h3>
<div style="display:flex;gap:8mm;align-items:center;margin-top:2mm">
<div style="background:#fff;border:.25mm solid var(--rule);padding:3.5mm 5mm;width:96mm;flex:none;display:flex;justify-content:space-between;align-items:flex-end">
<div><div style="font:700 9pt var(--serif)">黄晓沁 销售专家</div>
<div style="font:500 7pt/1.6 var(--fig);color:var(--sub);margin-top:1mm">138 1452 1983<br>romy@biaoboshi.cn<br>www.biaoboshi.cn</div></div>
<img src="../logo/svg/logo-horizontal.svg" style="width:30mm">
</div>
<p class="cap" style="margin:0">签名中的标志用 PNG(logo-horizontal-1200.png 缩放显示),宽 120–160 像素。</p>
</div>
</div>
<div>
<h2>应用图标</h2>
<div style="display:flex;gap:5mm;align-items:flex-start;margin-top:3mm">
<img src="mockup/apple/iphone-home.png" alt="iPhone 桌面" style="width:56mm;display:block;flex:none">
<div style="display:flex;flex-direction:column;gap:5mm;padding-top:2mm">
<div><svg viewBox="0 0 100 100" style="width:20mm;display:block"><image href="../logo/png/icon-512.png" width="100" height="100" clip-path="url(#squircle)"/></svg><span class="cap">1024 / 512 px</span></div>
<div><svg viewBox="0 0 100 100" style="width:10mm;display:block"><image href="../logo/png/icon-192.png" width="100" height="100" clip-path="url(#squircle)"/></svg><span class="cap">180 / 192 px</span></div>
</div>
</div>
<p class="small sub" style="margin-top:3mm">印泥铺满整个图标,不留白边。图标文件保持方形、不带透明,圆角由系统按 Apple 的连续曲率圆角裁出。左图为 iPhone 18 Pro 主屏幕上的实际比例(机身、壁纸、系统图标为 Apple 素材,仅作示意)。</p>
</div>
</div>
<div class="folio">22</div>
</section>
<!-- ============ 22 文件与授权 ============ -->
<section class="page">
<div class="run"><b>标博士 视觉识别规范</b><span>07 文件与授权</span></div>
<div class="chap"><span class="no">07</span><h1>文件与授权</h1></div>
<div class="cols c2" style="gap:10mm">
<div>
<h3>标志文件(docs/design/logo/)</h3>
<table>
<tbody>
<tr><td class="mono">svg/logo-horizontal(-textured)(-reverse).svg</td><td class="small">横版:干净 / 质感 × 浅色 / 深色</td></tr>
<tr><td class="mono">svg/logo-vertical(-textured)(-reverse).svg</td><td class="small">竖版:同上</td></tr>
<tr><td class="mono">svg/logo-mono-black.svg / -white.svg</td><td class="small">单色</td></tr>
<tr><td class="mono">svg/seal(-textured)(-small).svg</td><td class="small">印章</td></tr>
<tr><td class="mono">svg/wordmark(-reverse).svg</td><td class="small">字标</td></tr>
<tr><td class="mono">svg/favicon-16.svg、favicon.svg</td><td class="small">网页图标</td></tr>
<tr><td class="mono">svg/app-icon.svg</td><td class="small">应用图标(印泥铺满)</td></tr>
<tr><td class="mono">png/</td><td class="small">横版 1200 / 2400 px、竖版 600 px、印章 1024 px,图标 16 / 32 px,应用图标 180 / 192 / 512 / 1024 px</td></tr>
</tbody>
</table>
<p class="note" style="margin-top:3mm">所有文件由 scripts/build_assets.sh 生成,修改请改 scripts/logo_lib.py 的参数后重新生成,不要手改 SVG。</p>
</div>
<div>
<h3>字体授权</h3>
<table>
<tbody>
<tr><td>思源宋体 Noto Serif SC</td><td class="small">SIL OFL 1.1</td></tr>
<tr><td>思源黑体 Noto Sans SC</td><td class="small">SIL OFL 1.1</td></tr>
<tr><td>Libre Caslon Text</td><td class="small">SIL OFL 1.1</td></tr>
<tr><td>Barlow Semi Condensed</td><td class="small">SIL OFL 1.1</td></tr>
</tbody>
</table>
<p class="note" style="margin-top:3mm">以上字体均可免费商用,标志文件中的文字已转为路径。</p>
<h3 style="margin-top:7mm">印章来源</h3>
<p class="small sub">印章图形由 AI 图像生成工具于 2026 年 11 月 2 日生成,经脚本处理后定稿,生成记录(提示词、原图、时间)已存档。申请商标前,请先做商标检索并咨询知识产权顾问。</p>
<h3 style="margin-top:5mm">版本</h3>
<p class="small sub"><span class="fig">1.1</span> 2026 年 11 月 口号改为「标博士,你的AI投标专家」;名片、信封、信纸、邮件签名使用正式联系人信息、地址、邮编与官网;新增信封<br><span class="fig">1.0</span> 2026 年 11 月 首版(标志 v5.1)</p>
</div>
</div>
<div class="folio">23</div>
</section>
<!-- ============ 23 封底 ============ -->
<section class="page dark" style="display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12mm">
<img src="../logo/svg/logo-vertical-textured-reverse.svg" style="width:72mm" alt="标博士">
<div style="font:600 12pt var(--serif);letter-spacing:.16em;color:#C9CFD6">标博士,你的<span style="letter-spacing:.02em">AI</span>投标专家</div>
<div style="font:500 10pt var(--fig);letter-spacing:.08em;color:#8B95A0;margin-top:-6mm">www.biaoboshi.cn</div>
</section>
</body>
</html>