A4 横版 24 页:品牌概述、标志、标准色、字体、背景与错误用法、 应用示例(名片、信封、信纸、检查报告、演示文稿、网站、图标)、文件与授权。 附 HTML 源文件、标注图与重新导出说明。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
702 lines
53 KiB
HTML
702 lines
53 KiB
HTML
<!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">
|
||
<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:30mm 8mm 34mm">
|
||
<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>
|
||
</div>
|
||
<div>
|
||
<h2>应用图标</h2>
|
||
<div style="display:flex;gap:6mm;align-items:flex-end;margin-top:3mm">
|
||
<div style="text-align:center"><img src="../logo/png/icon-512.png" style="width:38mm;border-radius:8.4mm;box-shadow:0 .5mm 1.5mm rgba(0,0,0,.15);display:block"><span class="cap">应用图标</span></div>
|
||
<div style="text-align:center"><img src="../logo/png/icon-192.png" style="width:19mm;border-radius:4.2mm;box-shadow:0 .5mm 1.5mm rgba(0,0,0,.15);display:block"><span class="cap">小图标</span></div>
|
||
</div>
|
||
<p class="small sub" style="margin-top:4mm">白底,印章占图标边长的 80%。系统会自动加圆角,图标文件本身保持方形。</p>
|
||
<h3 style="margin-top:8mm">邮件签名</h3>
|
||
<div style="background:#fff;border:.25mm solid var(--rule);padding:4mm;margin-top:2mm">
|
||
<div style="font:700 9pt var(--serif)">黄晓沁 销售专家</div>
|
||
<div style="font:500 7pt/1.6 var(--fig);color:var(--sub);margin:1mm 0 3mm">138 1452 1983<br>romy@biaoboshi.cn<br>www.biaoboshi.cn</div>
|
||
<img src="../logo/svg/logo-horizontal.svg" style="width:30mm">
|
||
</div>
|
||
<p class="cap">签名中的标志用 PNG(logo-horizontal-1200.png 缩放显示),宽 120–160 像素。</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">png/</td><td class="small">横版 1200 / 2400 px、竖版 600 px、印章 1024 px,图标 16 / 32 / 180 / 192 / 512 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>
|