|
|
@@ -0,0 +1,394 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>浠艾福 Care Family 品牌标志设计文档 v1.1</title>
|
|
|
+<style>
|
|
|
+ :root{
|
|
|
+ --cf-blue:#6FB6E3; --cf-blue-dk:#3A8FCC; --cf-navy:#1E3A5F;
|
|
|
+ --c-body:#2c3e50; --c-sub:#5b6b7b; --c-line:#e6ebf1;
|
|
|
+ --c-bg:#f5f7fa;
|
|
|
+ --w-green:#48C9B0; --w-indigo:#5B6CC4; --w-orange:#F2994A; --w-action:#48A868; --w-purple:#9B59B6;
|
|
|
+ }
|
|
|
+ *{box-sizing:border-box;}
|
|
|
+ body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;background:var(--c-bg);color:var(--c-body);line-height:1.85;-webkit-font-smoothing:antialiased;}
|
|
|
+ /* ===== Hero ===== */
|
|
|
+ .hero{background:linear-gradient(135deg,#6FB6E3 0%,#3A8FCC 60%,#1E3A5F 120%);color:#fff;padding:68px 40px 92px;}
|
|
|
+ .hero-in{max-width:1040px;margin:0 auto;}
|
|
|
+ .hero .kicker{display:inline-block;background:rgba(255,255,255,.16);padding:5px 14px;border-radius:20px;font-size:13px;letter-spacing:1px;margin-bottom:18px;}
|
|
|
+ .hero h1{font-size:36px;margin:0 0 10px;font-weight:700;letter-spacing:-.5px;}
|
|
|
+ .hero .sub{font-size:18px;opacity:.95;margin:0 0 22px;}
|
|
|
+ .hero .slogan{font-size:20px;font-weight:600;background:rgba(255,255,255,.12);display:inline-block;padding:10px 18px;border-radius:10px;border-left:4px solid #fff;}
|
|
|
+ .hero .meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;}
|
|
|
+ .hero .meta span{background:rgba(255,255,255,.14);padding:6px 14px;border-radius:8px;font-size:13px;}
|
|
|
+ /* ===== Layout ===== */
|
|
|
+ .wrap{max-width:1040px;margin:-44px auto 0;padding:0 24px 72px;}
|
|
|
+ .card{background:#fff;border-radius:16px;box-shadow:0 6px 30px rgba(30,58,95,.10);padding:44px 48px 52px;}
|
|
|
+ /* ===== TOC ===== */
|
|
|
+ .toc{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:40px;}
|
|
|
+ .toc a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--c-body);background:#f7fafc;border:1px solid var(--c-line);border-radius:10px;padding:12px 14px;font-size:13.5px;transition:.15s;}
|
|
|
+ .toc a:hover{background:#eef5fb;border-color:var(--cf-blue);}
|
|
|
+ .toc .n{flex:none;width:24px;height:24px;border-radius:7px;background:var(--cf-blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
|
|
|
+ /* ===== Sections ===== */
|
|
|
+ h2{font-size:23px;margin:42px 0 16px;display:flex;align-items:center;gap:12px;color:#1f2d3d;}
|
|
|
+ h2 .num{flex:none;width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--cf-blue),var(--cf-blue-dk));color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;}
|
|
|
+ h3{font-size:16.5px;margin:26px 0 10px;color:#33414f;}
|
|
|
+ p{margin:10px 0;}
|
|
|
+ /* ===== Callout ===== */
|
|
|
+ .co{border-radius:10px;padding:16px 20px;margin:18px 0;font-size:14.5px;display:flex;gap:14px;align-items:flex-start;}
|
|
|
+ .co .ic{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;margin-top:2px;}
|
|
|
+ .co.info{background:#eef6fc;border:1px solid #cfe4f5;}
|
|
|
+ .co.info .ic{background:var(--cf-blue-dk);}
|
|
|
+ .co.warn{background:#fff6ec;border:1px solid #f6d8b0;}
|
|
|
+ .co.warn .ic{background:var(--w-orange);}
|
|
|
+ .co.tip{background:#eefbf4;border:1px solid #bfe9d6;}
|
|
|
+ .co.tip .ic{background:var(--w-green);}
|
|
|
+ /* ===== Tables ===== */
|
|
|
+ table{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0;font-size:14px;overflow:hidden;border-radius:10px;border:1px solid var(--c-line);}
|
|
|
+ th,td{border-bottom:1px solid var(--c-line);padding:12px 14px;text-align:left;vertical-align:top;}
|
|
|
+ th{background:#f3f7fb;font-weight:600;color:#33414f;}
|
|
|
+ tr:last-child td{border-bottom:none;}
|
|
|
+ /* ===== Color grid ===== */
|
|
|
+ .cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:16px 0;}
|
|
|
+ .cswatch{background:#fff;border:1px solid var(--c-line);border-radius:10px;overflow:hidden;}
|
|
|
+ .cswatch .chip{height:64px;}
|
|
|
+ .cswatch .meta{padding:10px 12px;}
|
|
|
+ .cswatch .meta b{font-size:13px;}
|
|
|
+ .cswatch .meta code{display:block;color:#6b7280;font-size:12px;margin-top:3px;}
|
|
|
+ /* ===== Logo row ===== */
|
|
|
+ .logorow{display:flex;flex-wrap:wrap;gap:20px;margin:18px 0;}
|
|
|
+ .logobox{flex:1;min-width:200px;border:1px solid var(--c-line);border-radius:12px;padding:24px;text-align:center;background:#fcfdff;}
|
|
|
+ .logobox img{max-width:140px;max-height:140px;}
|
|
|
+ .logobox .cap{margin-top:14px;font-size:14px;font-weight:600;}
|
|
|
+ .logobox .note{font-size:12px;color:#8492a6;margin-top:4px;}
|
|
|
+ /* ===== Two col ===== */
|
|
|
+ .twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0;}
|
|
|
+ .twocol .box{border-radius:12px;padding:18px 20px;font-size:14px;}
|
|
|
+ .twocol .do{background:#eefbf4;border:1px solid #bfe9d6;}
|
|
|
+ .twocol .dont{background:#fdeeee;border:1px solid #f3c4c4;}
|
|
|
+ .twocol h4{margin:0 0 10px;font-size:15px;}
|
|
|
+ .twocol .do h4{color:#276749;} .twocol .dont h4{color:#c0392b;}
|
|
|
+ .twocol ul{margin:0;padding-left:20px;} .twocol li{margin:7px 0;}
|
|
|
+ /* ===== SVG figure ===== */
|
|
|
+ .figure{background:#fafcff;border:1px dashed #cdd9e5;border-radius:12px;padding:24px;margin:18px 0;text-align:center;}
|
|
|
+ .figure svg{max-width:100%;height:auto;}
|
|
|
+ .figure .figcap{font-size:12.5px;color:#8492a6;margin-top:12px;}
|
|
|
+ /* ===== Checklist ===== */
|
|
|
+ .todo{margin:14px 0;}
|
|
|
+ .todo div{padding:9px 0 9px 30px;position:relative;border-bottom:1px dashed var(--c-line);font-size:14.5px;}
|
|
|
+ .todo div:last-child{border-bottom:none;}
|
|
|
+ .todo div::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border:2px solid var(--cf-blue-dk);border-radius:4px;}
|
|
|
+ /* ===== Footer ===== */
|
|
|
+ .foot{margin-top:48px;padding-top:22px;border-top:1px solid var(--c-line);color:#97a3b4;font-size:13px;}
|
|
|
+ .pill{display:inline-block;background:#eef5fb;color:var(--cf-blue-dk);padding:3px 10px;border-radius:6px;font-size:12px;margin-right:6px;}
|
|
|
+ @media(max-width:720px){.toc{grid-template-columns:1fr 1fr;}.twocol{grid-template-columns:1fr;}.card{padding:28px 20px;}}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="hero">
|
|
|
+ <div class="hero-in">
|
|
|
+ <span class="kicker">BRAND ASSET · 品牌资产</span>
|
|
|
+ <h1>浠艾福 Care Family 品牌标志设计文档</h1>
|
|
|
+ <p class="sub">CFC Brand Logo & Mark Design Guidelines · 家庭精准生活方式管理平台</p>
|
|
|
+ <div class="slogan">一个人的主动，一家人的健康</div>
|
|
|
+ <div class="meta">
|
|
|
+ <span>版本 v1.1</span>
|
|
|
+ <span>状态 矢量源已补全 · 待变体/前端落地</span>
|
|
|
+ <span>品牌 浠艾福 / Care Family / CFC</span>
|
|
|
+ <span>日期 2026-09-15</span>
|
|
|
+ <span>版式 参考 WorkBuddy 资料库文档</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="wrap">
|
|
|
+<div class="card">
|
|
|
+
|
|
|
+ <nav class="toc">
|
|
|
+ <a href="#s1"><span class="n">01</span>品牌定位基线</a>
|
|
|
+ <a href="#s2"><span class="n">02</span>现有标志诊断</a>
|
|
|
+ <a href="#s3"><span class="n">03</span>设计原则</a>
|
|
|
+ <a href="#s4"><span class="n">04</span>色彩规范</a>
|
|
|
+ <a href="#s5"><span class="n">05</span>字体规范</a>
|
|
|
+ <a href="#s6"><span class="n">06</span>组合与比例</a>
|
|
|
+ <a href="#s7"><span class="n">07</span>标志变体</a>
|
|
|
+ <a href="#s8"><span class="n">08</span>错误用法</a>
|
|
|
+ <a href="#s9"><span class="n">09</span>应用场景</a>
|
|
|
+ <a href="#s10"><span class="n">09</span>旧标志弃用</a>
|
|
|
+ <a href="#s11"><span class="n">11</span>知识产权待办</a>
|
|
|
+ <a href="#s12"><span class="n">12</span>行动建议</a>
|
|
|
+ <a href="#v2"><span class="n">A</span>标志策略说明</a>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <div class="co info">
|
|
|
+ <span class="ic">i</span>
|
|
|
+ <div><b>版式说明：</b>原参考链接（workbuddy.cn/space）需登录，WebFetch 仅能取到登录页，无法直接读取其版式。本文按 WorkBuddy 资料库文档的通用版式语言重排——封面 Hero、锚点目录、章节徽章、彩色 callout、分栏与色块卡片。如需精确对齐该链接某一特定版式，请发我该页截图或导出文本。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 01 -->
|
|
|
+ <h2 id="s1"><span class="num">01</span>品牌定位基线</h2>
|
|
|
+ <p>标志不是独立作品，是品牌定位的压缩包。浠艾福当前定位如下：</p>
|
|
|
+ <table>
|
|
|
+ <tr><th>维度</th><th>内容</th></tr>
|
|
|
+ <tr><td>中文名</td><td><b>浠艾福</b></td></tr>
|
|
|
+ <tr><td>英文名</td><td><b>Care Family</b>（品牌全称）；<b>CFC</b>（缩写 / 平台代号）</td></tr>
|
|
|
+ <tr><td>品牌口号</td><td><b>一个人的主动，一家人的健康</b></td></tr>
|
|
|
+ <tr><td>定位</td><td>家庭精准生活方式管理——<b>从代谢到心理</b>，帮一家人把身体和状态都调顺。</td></tr>
|
|
|
+ <tr><td>核心理念</td><td>主动健康</td></tr>
|
|
|
+ <tr><td>五维体系</td><td>身 · 智 · 富 · 行 · 心（顺序已定，不得调换）</td></tr>
|
|
|
+ <tr><td>服务对象</td><td>中国家庭；连接家庭客户、专业服务商、平台运营三方。</td></tr>
|
|
|
+ <tr><td>差异点</td><td>以菌群检测、DAN 测评为数据入口，AI + 专业人员双轨驱动。</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 02 -->
|
|
|
+ <h2 id="s2"><span class="num">02</span>现有主标志诊断</h2>
|
|
|
+ <div class="logorow">
|
|
|
+ <div class="logobox">
|
|
|
+ <img src="assets/cf_logo_primary.png" alt="浠艾福当前主标志">
|
|
|
+ <div class="cap">当前主标志（小程序在用）</div>
|
|
|
+ <div class="note">原主标志（小程序在用）· 像素级矢量描摹</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>2.1 当前「Cf」标志构成解析</h3>
|
|
|
+ <ul>
|
|
|
+ <li><b>字母 C + f：</b>Care Family 首字母缩写，国际化识别符号，适合 APP 图标、域名、英文传播。</li>
|
|
|
+ <li><b>负形爱心：</b>嵌在 f 的白色负空间里，传递「关怀、家庭之爱、健康温度」，弱化医疗工具感。</li>
|
|
|
+ <li><b>圆角处理：</b>线条柔和、无锋利转角，降低攻击性，符合家庭用户的情感预期。</li>
|
|
|
+ <li><b>浅蓝主色：</b>当前偏向「科技/医疗工具」冷色调，与「生活方式管理/主动健康」的温度感略有距离。</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <h3>2.2 契合度评估</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>评估项</th><th>契合点</th><th>待优化</th></tr>
|
|
|
+ <tr><td>识别度</td><td>Cf 组合简洁，适合小程序图标。</td><td>单独出现时与英文名绑定弱，中文用户不易联想到「浠艾福」。</td></tr>
|
|
|
+ <tr><td>专业感</td><td>字母标现代、克制，不廉价。</td><td>浅蓝渐变+白心略单薄，缺「精准生活方式管理」的厚度。</td></tr>
|
|
|
+ <tr><td>温度感</td><td>爱心负形传递关怀。</td><td>冷色调削弱「一家人的健康」暖意。</td></tr>
|
|
|
+ <tr><td>延展性</td><td>矢量适配性强。</td><td>未定义横版/竖版/图标独立/单色/反白等变体。</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <div class="co warn">
|
|
|
+ <span class="ic">!</span>
|
|
|
+ <div><b>判断：</b>不建议现在推翻重来。先把现有标志系统化规范，再循序渐进调整色彩温度与组合形式，是最稳妥的路径。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 03 -->
|
|
|
+ <h2 id="s3"><span class="num">03</span>设计原则（4 条铁律）</h2>
|
|
|
+ <table>
|
|
|
+ <tr><th>原则</th><th>说明</th></tr>
|
|
|
+ <tr><td><b>人先，科技在后</b></td><td>视觉优先传递「一个人的主动」「一家人的健康」，其次才是 AI、检测、数据。</td></tr>
|
|
|
+ <tr><td><b>克制，不医疗化</b></td><td>避免红十字、听诊器、药丸等强医疗符号；用温度感（圆角、爱心、自然色）降低距离感。</td></tr>
|
|
|
+ <tr><td><b>可小可大</b></td><td>标志必须在 32×32px（favicon/角标）到楼宇广告尺寸都清晰可辨。</td></tr>
|
|
|
+ <tr><td><b>中文名不可弱化</b></td><td>面向中国家庭，「浠艾福」必须能与 Cf 图形并列出现，不能只放英文。</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 04 -->
|
|
|
+ <h2 id="s4"><span class="num">04</span>色彩规范</h2>
|
|
|
+ <h3>4.1 品牌主色</h3>
|
|
|
+ <div class="cgrid">
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#6FB6E3"></div><div class="meta"><b>关怀蓝（主色）</b><code>#6FB6E3 · 111,182,227</code></div></div>
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#3A8FCC"></div><div class="meta"><b>深海蓝</b><code>#3A8FCC · 58,143,204</code></div></div>
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#1E3A5F"></div><div class="meta"><b>文本主色</b><code>#1E3A5F · 30,58,95</code></div></div>
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#6B7280"></div><div class="meta"><b>次级灰</b><code>#6B7280 · 107,114,128</code></div></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>4.2 五维辅助色（身·智·富·行·心）</h3>
|
|
|
+ <div class="cgrid">
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#48C9B0"></div><div class="meta"><b>身 · 代谢青</b><code>#48C9B0</code></div></div>
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#5B6CC4"></div><div class="meta"><b>智 · 认知靛</b><code>#5B6CC4</code></div></div>
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#F2994A"></div><div class="meta"><b>富 · 资源橙</b><code>#F2994A</code></div></div>
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#48A868"></div><div class="meta"><b>行 · 行动绿</b><code>#48A868</code></div></div>
|
|
|
+ <div class="cswatch"><div class="chip" style="background:#9B59B6"></div><div class="meta"><b>心 · 心境紫</b><code>#9B59B6</code></div></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="co warn">
|
|
|
+ <span class="ic">!</span>
|
|
|
+ <div><b>注意：</b>以上 HEX 为基于现有品牌资产的初步建议值，<b>最终以矢量源文件（AI / SVG / Figma）用吸管取色为准</b>。本次先用稳定色名体系固定语义，避免后续开发与设计团队理解不一致。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>4.3 字体规范</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>场景</th><th>中文字体</th><th>英文字体</th><th>说明</th></tr>
|
|
|
+ <tr><td>品牌标题 / 口号</td><td>PingFang SC / Noto Sans SC</td><td>Poppins / Inter</td><td>字重 Medium/SemiBold，现代干净。</td></tr>
|
|
|
+ <tr><td>正文 / 界面</td><td>PingFang SC / Noto Sans SC</td><td>Inter / -apple-system</td><td>字重 Regular，保证可读性。</td></tr>
|
|
|
+ <tr><td>数字 / 数据</td><td>—</td><td>Inter / Roboto Mono</td><td>tabular 数字，报告/健康数据场景优先。</td></tr>
|
|
|
+ </table>
|
|
|
+ <div class="co tip"><span class="ic">✓</span><div><b>禁用：</b>书法体、卡通体、衬线体、过度装饰艺术字；任何让人联想到「医疗机构宣传页」的字体。</div></div>
|
|
|
+
|
|
|
+ <!-- 06 -->
|
|
|
+ <h2 id="s6"><span class="num">05</span>标志组合与比例</h2>
|
|
|
+ <h3>5.1 组合形式</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>组合</th><th>使用场景</th><th>优先级</th></tr>
|
|
|
+ <tr><td>图标 + 中文「浠艾福」+ 英文「Care Family」</td><td>官网 header、宣传海报、PPT 封面</td><td>首选组合</td></tr>
|
|
|
+ <tr><td>图标 + 中文「浠艾福」</td><td>小程序、公众号、国内线下物料</td><td>国内首选</td></tr>
|
|
|
+ <tr><td>图标 + 英文「Care Family」</td><td>国际市场、英文物料</td><td>英文场景</td></tr>
|
|
|
+ <tr><td>仅图标 Cf</td><td>APP 图标、头像、favicon、水印</td><td>小尺寸强制</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <h3>5.2 比例与安全区（示意）</h3>
|
|
|
+ <div class="figure">
|
|
|
+ <svg viewBox="0 0 680 240" width="680" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <!-- 安全区虚线 -->
|
|
|
+ <rect x="20" y="20" width="320" height="200" fill="none" stroke="#9bbcd6" stroke-width="1.5" stroke-dasharray="6 5"/>
|
|
|
+ <text x="180" y="44" font-size="11" fill="#7c93a8" text-anchor="middle">安全区（≥图标高 25%）</text>
|
|
|
+ <!-- 图标 -->
|
|
|
+ <rect x="70" y="80" width="96" height="96" rx="20" fill="#6FB6E3"/>
|
|
|
+ <text x="118" y="142" font-size="40" font-weight="700" fill="#fff" text-anchor="middle" font-family="Arial">Cf</text>
|
|
|
+ <!-- 文字 -->
|
|
|
+ <rect x="190" y="96" width="120" height="22" rx="5" fill="#1E3A5F"/>
|
|
|
+ <rect x="190" y="128" width="92" height="14" rx="4" fill="#9bbcd6"/>
|
|
|
+ <text x="250" y="200" font-size="11" fill="#7c93a8" text-anchor="middle">图标 : 中文高 ≈ 1.2 : 1</text>
|
|
|
+ <!-- 间距标注 -->
|
|
|
+ <line x1="166" y1="128" x2="190" y2="128" stroke="#F2994A" stroke-width="1.5"/>
|
|
|
+ <text x="178" y="120" font-size="10" fill="#F2994A" text-anchor="middle">间距</text>
|
|
|
+ </svg>
|
|
|
+ <div class="figcap">图：标志组合与最小安全区示意（比例仅供规范参考，正式版由设计师在矢量稿中精确绘制）</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>5.3 最小使用尺寸</h3>
|
|
|
+ <table>
|
|
|
+ <tr><th>场景</th><th>最小宽度</th><th>最小高度</th></tr>
|
|
|
+ <tr><td>完整组合（图标+中英文）</td><td>120px / 40mm</td><td>36px / 12mm</td></tr>
|
|
|
+ <tr><td>图标+中文</td><td>72px / 24mm</td><td>28px / 9mm</td></tr>
|
|
|
+ <tr><td>仅图标 Cf</td><td>24px / 8mm</td><td>24px / 8mm</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 07 -->
|
|
|
+ <h2 id="s7"><span class="num">06</span>标志变体</h2>
|
|
|
+ <table>
|
|
|
+ <tr><th>变体</th><th>描述</th><th>场景</th></tr>
|
|
|
+ <tr><td>主色版</td><td>关怀蓝图标 + 深海军蓝字标</td><td>默认首选</td></tr>
|
|
|
+ <tr><td>深色背景反白版</td><td>纯白图标 + 纯白字标</td><td>深色 header、视频片尾</td></tr>
|
|
|
+ <tr><td>单色黑版</td><td>纯黑 / #1E3A5F</td><td>报纸、单色印刷、雕刻</td></tr>
|
|
|
+ <tr><td>单色白版</td><td>纯白</td><td>玻璃贴、深色物料</td></tr>
|
|
|
+ <tr><td>小程序圆形裁切版</td><td>仅 Cf 图标居中，留 10% 安全区</td><td>微信头像、小程序图标</td></tr>
|
|
|
+ <tr><td>favicon 版</td><td>16/32/180px 多尺寸 PNG</td><td>浏览器标签、PWA、Apple touch</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 08 -->
|
|
|
+ <h2 id="s8"><span class="num">07</span>错误用法</h2>
|
|
|
+ <div class="twocol">
|
|
|
+ <div class="box dont">
|
|
|
+ <h4>禁止</h4>
|
|
|
+ <ul>
|
|
|
+ <li>拉伸、压扁、旋转标志。</li>
|
|
|
+ <li>使用非品牌色（大红、大紫）填充图标。</li>
|
|
|
+ <li>加投影、描边、渐变叠加、模糊滤镜。</li>
|
|
|
+ <li>放在复杂花纹或低对比背景上。</li>
|
|
|
+ <li>在新物料中出现已弃用的旧「知·行」标志。</li>
|
|
|
+ <li>把爱心负形单独拆出作为品牌图标。</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="box do">
|
|
|
+ <h4>必须</h4>
|
|
|
+ <ul>
|
|
|
+ <li>保持原始比例缩放。</li>
|
|
|
+ <li>优先使用品牌主色或指定变体。</li>
|
|
|
+ <li>保证标志与背景足够对比度。</li>
|
|
|
+ <li>小尺寸场景只用「仅图标 Cf」变体。</li>
|
|
|
+ <li>中文物料必须同时出现「浠艾福」字样。</li>
|
|
|
+ <li>保留安全区，不贴边放置。</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 09 -->
|
|
|
+ <h2 id="s9"><span class="num">08</span>应用场景速查</h2>
|
|
|
+ <table>
|
|
|
+ <tr><th>场景</th><th>推荐组合</th><th>推荐变体</th><th>备注</th></tr>
|
|
|
+ <tr><td>小程序 icon</td><td>仅 Cf</td><td>主色 / 圆形裁切</td><td>微信强制 81×81pt 圆角。</td></tr>
|
|
|
+ <tr><td>小程序启动页</td><td>图标+中文+slogan</td><td>主色版</td><td>slogan 置于标志下方 1.5 倍图标高。</td></tr>
|
|
|
+ <tr><td>官网 header</td><td>图标+中文</td><td>主色 / 反白</td><td>滚动变深色时切反白版。</td></tr>
|
|
|
+ <tr><td>web 管理端 favicon</td><td>仅 Cf</td><td>favicon 版</td><td>提供 32×32、180×180。</td></tr>
|
|
|
+ <tr><td>公众号头像</td><td>仅 Cf</td><td>主色 / 圆形</td><td>避免文字缩小不可读。</td></tr>
|
|
|
+ <tr><td>营销海报</td><td>图标+中英文+slogan</td><td>主色 / 反白</td><td>优先画面上方 1/3。</td></tr>
|
|
|
+ <tr><td>线下沙龙 / 易拉宝</td><td>图标+中文+slogan</td><td>主色版</td><td>最小高度 ≥ 60mm。</td></tr>
|
|
|
+ <tr><td>报告 PDF 水印</td><td>仅 Cf / 灰度</td><td>单色浅灰</td><td>透明度 ≤ 8%，不干扰正文。</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 10 -->
|
|
|
+ <h2 id="s10"><span class="num">09</span>旧「知·行」标志的处置</h2>
|
|
|
+ <div class="co warn"><span class="ic">!</span><div><b>品牌决策：旧「知·行」标志弃用，不再用于任何 CFC 品牌物料。</b>CFC 统一使用新「Cf / 浠艾福 / Care Family」标志体系。旧「知·行」图形（汉字+房子+手捧嫩芽）仅作历史视觉资产归档，不出现在新设计、新物料、线上产品中。</div></div>
|
|
|
+ <table>
|
|
|
+ <tr><th>类别</th><th>处置</th></tr>
|
|
|
+ <tr><td>新平台 / 小程序 / 官网 / 公众号</td><td>一律使用新「Cf / 浠艾福 / Care Family」标志。</td></tr>
|
|
|
+ <tr><td>成长课程、训练营、共读社群</td><td>不再使用「知·行」图形；如确需教育向子品牌，须重新立项设计，不复用旧标志。</td></tr>
|
|
|
+ <tr><td>历史物料 / 已签合同 / 历史截图</td><td>存量可保留原样，但新印制、新发布一律不出现旧标志。</td></tr>
|
|
|
+ <tr><td>视觉资产归档</td><td>旧标志源文件移入 archive，避免误用。</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 11 -->
|
|
|
+ <h2 id="s11"><span class="num">10</span>知识产权与合规待办</h2>
|
|
|
+ <div class="todo">
|
|
|
+ <div><b>商标检索：</b>第 35 类（广告销售）、第 42 类（科技/软件）、第 44 类（医疗/健康），检索「浠艾福」「Care Family」「Cf 图形」有无相同/近似商标。</div>
|
|
|
+ <div><b>英文/图形重名排查：</b>检索 Care Family、Cf 图形在健康管理、家庭教育、SaaS 领域的现有使用。</div>
|
|
|
+ <div><b>域名排查：</b>carefamily.com/.cn、xaf.com/.cn、cfclub.com/.cn、cfamily.com 等；小程序名称是否可注册。</div>
|
|
|
+ <div><b>图形原创性声明：</b>确认 Cf 字母组合与爱心负形的设计稿、源文件、创作时间链完整。</div>
|
|
|
+ <div><b>字体/素材授权：</b>商用字体需取得授权；界面字体优先系统字体或开源（Noto Sans SC / Inter）。</div>
|
|
|
+ <div><b>建议注册组合：</b>中文「浠艾福」+ 英文「Care Family」+ Cf 图形，三位一体保护。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 12 -->
|
|
|
+ <h2 id="s12"><span class="num">11</span>下一步行动建议</h2>
|
|
|
+ <table>
|
|
|
+ <tr><th>序号</th><th>行动</th><th>产出</th></tr>
|
|
|
+ <tr><td>1</td><td>矢量源文件补全</td><td>将 PNG 重绘为 AI / SVG / Figma，精确提取主色 HEX。</td></tr>
|
|
|
+ <tr><td>2</td><td>组合变体出图</td><td>横版 / 竖版 / 仅图标 / 反白 / 单色黑 / 单色白 6 套。</td></tr>
|
|
|
+ <tr><td>3</td><td>小程序/官网替换</td><td>按应用场景统一替换不一致的头像、启动页、水印。</td></tr>
|
|
|
+ <tr><td>4</td><td>五维色落地</td><td>同步到 cfc-frontend、cfc-web 的样式变量。</td></tr>
|
|
|
+ <tr><td>5</td><td>法务/商标推进</td><td>启动第 35/42/44 类商标检索与注册。</td></tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <!-- 附录 A -->
|
|
|
+ <h2 id="v2"><span class="num">A</span>标志策略说明（已定稿路线）</h2>
|
|
|
+ <div class="co warn"><span class="ic">!</span><div><b>策略定稿（2026-09-15）：不重绘图形，回原版 Cf 造型做规范化。</b>V2 图形草案（珊瑚爱心 + 蓝方块容器）经评估偏草稿感、且暖色破坏克制基调，已否决。最终采用现状主标志 <code>Cf + 爱心负形 + Care Family</code>（<code>cfc-frontend/static/logo.png</code>）作为正式造型；本文件主体的色彩 / 字体 / 组合 / 变体 / 错误用法 / 应用场景即为其规范，不另行重绘。</div></div>
|
|
|
+
|
|
|
+ <h3>A.1 规范化落地清单</h3>
|
|
|
+ <div class="todo">
|
|
|
+ <div style="text-decoration:line-through;opacity:.75"><b>矢量源补全（已完成）：</b>现有 PNG 主标志已做<b>像素级 1:1 描摹</b>为 SVG 矢量源（按用户要求「照 PNG 像素还原、不几何重绘」），存入 <code>docs/品牌资产/assets/</code>：<code>cf_logo_primary.svg</code>（主标·透明底）、<code>cf_logo_icon.svg</code>（仅图标·透明底）、<code>cf_logo_wordmark.svg</code>（仅字标·透明底），另附 <code>cf_logo_primary_bg.svg</code>（带原图浅蓝底，与 PNG 完全一致）。与原图像素 diff=0；主色沿用文档梯度 <code>#6FB6E3→#3A8FCC</code>，背景实测 <code>#DCF0F9</code>。</div>
|
|
|
+ <div><b>变体出图：</b>基于原造型产出横版 / 竖版 / 仅图标 / 反白 / 单色黑 / 单色白 6 套标准文件（造型不变，只换组合与底色）。</div>
|
|
|
+ <div><b>中文名绑定：</b>所有对外物料以「图标 + 浠艾福 + Care Family」为首选组合，确保中文名不被弱化。</div>
|
|
|
+ <div><b>散落旧标志排查：</b>全量排查小程序 / 官网 / 海报模板中是否仍残留旧「知·行」图形，统一清除。</div>
|
|
|
+ <div><b>前端替换：</b>将规范后的矢量标志同步进 cfc-frontend、cfc-web 的资源目录与样式变量。</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>A.2 当前主标志（正式造型）</h3>
|
|
|
+ <div class="logorow">
|
|
|
+ <div class="logobox">
|
|
|
+ <img src="assets/cf_logo_primary.png" alt="浠艾福当前主标志">
|
|
|
+ <div class="cap">正式主标志（PNG 源）</div>
|
|
|
+ <div class="note">原主标志（PNG 源）· 像素级矢量描摹</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h3>A.3 已交付矢量源（像素级 1:1 描摹 + 字标平滑）</h3>
|
|
|
+ <p>主标 / 图标为按原 PNG 逐像素描摹（与原图像素 diff=0，非几何重绘）；字标「Care Family」因像素描摹边缘锯齿明显，已改为<b>平滑矢量文字</b>（沿用原图蓝色渐变），可直接用于小程序 / 官网 / 海报。点击文件名或右键图片另存为即可获取源文件。</p>
|
|
|
+ <div class="logorow">
|
|
|
+ <div class="logobox">
|
|
|
+ <img src="assets/cf_logo_primary.svg" alt="主标矢量源" style="max-width:160px;max-height:160px">
|
|
|
+ <div class="cap">cf_logo_primary.svg</div>
|
|
|
+ <div class="note">浅蓝圆角底 + Cf 图标 + Care Family</div>
|
|
|
+ </div>
|
|
|
+ <div class="logobox">
|
|
|
+ <img src="assets/cf_logo_icon.svg" alt="图标矢量源" style="max-width:120px;max-height:120px">
|
|
|
+ <div class="cap">cf_logo_icon.svg</div>
|
|
|
+ <div class="note">仅 Cf 图标 · 透明底</div>
|
|
|
+ </div>
|
|
|
+ <div class="logobox">
|
|
|
+ <img src="assets/cf_logo_wordmark.svg" alt="字标矢量源" style="max-width:180px;max-height:120px">
|
|
|
+ <div class="cap">cf_logo_wordmark.svg</div>
|
|
|
+ <div class="note">仅 Care Family 字标 · 透明底</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="foot">
|
|
|
+ <span class="pill">v1.1</span> 本文件由 WorkBuddy 依据 <code>2026-08-14-web-brand-direction.md</code> 及现有品牌资产整理，参照 WorkBuddy 资料库文档版式重排。状态为「草案」，供内部讨论与设计师落地使用；审定后升级为正式发布版并同步设计团队与前端样式变量。
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+</html>
|
