MornRain · 晨雨 品牌视觉识别系统
基于「晨雨 · 二十四節気物候の美学」数字スタジオ的完整标识设计 —— 含主标识、图标系统、多尺寸适配与设计说明。
品牌分析 · 设计依据
Audit品牌定位
MornRain（晨雨）定位为 「Independent Digital Atelier · 独立系デジタルスタジオ」，专注二十四節気物候与古典美学的数字空间站。以 mornrain.com 承载国际化主品牌与 pSEO 内容权重，mornrain.cn 锁定国内合规流量与品牌防御。
行业属性
WordPress 主题 / 数字内容スタジオ，采用结构化 pSEO 内容矩阵，三つの柱：物候節気、草木养生、風雨の詩。
目标受众
- 热爱中国传统文化、二十四節気与物候の美学的读者
- 关注草木百科、歳時養生、古典詩詞的人群
- 寻求高标准建站 / 自动化内容方案的数字客户
现有视觉风格
毛玻璃质感（Glassmorphism）、大圆角、晨雨动画、衬线标题 + 无衬线正文、留白通透、气质大气雅致。核心色为「晨雨天蓝 · 植物竹青」双色体系。
.brand .mark），缺乏图形语义与品牌辨识度；配色 token 存在 #3A9E9E / #1ABC9C / #2C3E50 等多套近似色混用。本方案在 延续圆角方块言語与既有色系 的前提下，建立统一、可延展的品牌标识系统。核心理念 · 创意来源
Concept创意来源
名称 MornRain = 晨（Morn）+ 雨（Rain）。设计将一个清晨的雨滴作为绝对主体：雨滴自天而降、凝而为露，正是「白露」「雨水」「穀雨」等節気的物候写照。
雨滴之内，以负形（刀刻留白）写出品牌字首 M，让「字母」与「雨滴」合二为一——字形即图形，图形即字形。
图形含义
- 晨雨之滴 —— 雨、露、物候；一滴之间藏節気流转
- 负形 M 字首 —— MornRain 品牌名，强化记忆锚点
- 節気之环 —— 环绕的细圆环喻指「二十四節気」的时间之轮、四时轮回
- 圆角瓷片 —— 延续原站圆角方块言語，数字化、温润、克制
三元素层层包含：环（时间／節気）→ 滴（雨／物候）→ M（品牌）。形简意赅，故可在极小尺寸下依然清晰。
主标识 Logo
Logo System2.1 主标识（图形 + 标准字）
标准字中，「Morn」取晨雨天蓝 #0EA5E9、「Rain」取植物竹青 #26A69A，以色彩呼应「晨 / 雨」二元语义；下方中文副标「晨雨 · 二十四節気物候の美学」为可选组合；网页端品牌字标自 2026-09 起统一采用「MornRain · 晨雨」双语配对形式（英文名 + 中文名，中文名稍小、次色）。
2.2 纯图形版（标记 / Mark）
2.3 单色版
单色版去除色彩与填充，仅保留线稿轮廓，适用于单色印刷、印章、刺绣、Fax/传真、激光雕刻等无彩色场景，颜色可替换为任意单色（默认石墨灰 #334155）。
2.4 深色 / 浅色背景适配版
选择规则：浅色背景用默认渐变瓷片标记；深色背景优先用 logo-dark 深空蓝瓷片版或 logo-white 反白线稿版。渐变瓷片因其自身高饱和，在深色底上亦可用，但最稳妥为专版。
2.5 标准色值
2.6 安全留白（Clear Space）
留白规则
安全留白单位 X = 标记外框宽度的 25%。标记四周须保留 ≥ 1X 的空白，此范围内不得放置任何文字、图形、边框或图片元素。
- 横向组合：左侧瓷片外缘至画面边缘 ≥ 1X
- 深色底、渐变底上同样适用，不因底色而缩减
- 应用图标（App Icon）因系统自动裁切，瓷片应满版出血，无需额外留白
2.7 最小使用尺寸
| 应用形态 | 屏幕最小尺寸 | 印刷最小尺寸 | 说明 |
|---|---|---|---|
| 主标识（图形+标准字） | 120 px 宽 | 30 mm 宽 | 低于此值改用纯图形版 |
| 精细标记（含负形 M + 節気环） | 48 px | 12 mm | 须清晰呈现环与 M |
| 小尺寸简化标记（favicon） | 16 px | 5 mm | 加粗 M，保证辨识 |
| 单色线稿版 | 24 px | 8 mm | 线宽不低于 2 px |
2.8 使用规范速查
✓ 推荐
- 等比缩放，保持瓷片圆角与图形比例
- 浅底用彩色版、深底用深空蓝 / 反白版
- 单色印刷用线稿版；小尺寸用简化标记
- 四周保留 ≥1X 安全留白
✕ 禁止
- 拉伸、压扁、旋转或倾斜标记
- 更改渐变方向或混用旧色
#3A9E9E/#1ABC9C - 在低对比底色上直接使用彩色版
- 为标记添加描边、投影、外发光
- 将负形 M 改为其他字母或图形
2.9 主标识栅格交付（PNG 1x / 2x）
横向主标识按 1x（348 画布） 与 2x（696 画布） 两档交付，分别用于常规屏与视网膜屏 / 印刷取图；纯图形标记按 512×512 交付，可直接用作 Open Graph 图、分享卡片与浅色底水印。除应用图标为满版瓷片外，其余 PNG 均为透明背景（checker 棋盘格仅为示意透明区）。
图标系统
Icon System3.1 Favicon（网站图标）
同时提供 favicon.ico（内嵌 16 / 24 / 32 / 48 四档 PNG，兼容旧浏览器）。建议在 <head> 中声明：
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/appicon-180.png">
3.2 移动端 / 桌面端应用图标
应用图标采用 满版出血瓷片（app-icon.svg），由系统自动裁切圆角，因此不留透明边距。桌面 / 移动端如需要「圆角独立控制」，可改用 logo-mark.svg。
3.3 主要功能图标（线条风格 · 统一规范）
统一规范：48×48 视图框 · 描边宽度 2.5px · 圆头圆角（round linecap / linejoin）· 双色体系（天蓝 / 竹青）交替 · 无填充、纯线条。
節気 · 物候icon-solar
草木百科icon-botany
風雨の詩icon-poetry
歳時養生icon-wellness
搜索icon-search
タイムカプセルicon-capsule
主页icon-home
分享icon-share3.4 多尺寸适配方案
| 图标 | 16 | 24 | 32 | 48 | 96 | 180 | 192 | 512 |
|---|---|---|---|---|---|---|---|---|
| Favicon（简化标记） | ✓ | — | ✓ | ✓ | — | — | — | — |
| 应用图标（满版瓷片） | — | — | — | — | — | ✓ | ✓ | ✓ |
| 功能图标（线条） | — | ✓ | — | ✓ | ✓ | — | — | — |
| 精细标记（Logo） | — | — | — | ✓ | ✓ | ✓ | ✓ | ✓ |
16px 以下不建议使用任何带细环／负形的图形；所有图标均以矢量 SVG 源文件交付，可按需任意缩放与改色（currentColor 亦可支持）。
3.5 功能图标栅格交付（24 / 48 / 96 PNG）
八个功能图标除 SVG 源文件外，另交付 24 / 48 / 96 三档 PNG 位图（透明背景），供不便于使用 SVG 的环境取用。下图为 96px 档实样：
節気 · 物候icon-solar-96
草木百科icon-botany-96
風雨の詩icon-poetry-96
歳時養生icon-wellness-96
搜索icon-search-96
タイムカプセルicon-capsule-96
主页icon-home-96
分享icon-share-96| 档位 | 文件 | 典型场景 |
|---|---|---|
| 24px | icon-*-24.png | 列表项前缀、标签、密集导航 |
| 48px | icon-*-48.png | 卡片图标、功能入口（设计基准尺寸） |
| 96px | icon-*-96.png | 空态插画位、大按钮、@2x 双倍图 |
色彩与线宽由 svg/ 源文件统一控制（描边 2.5px、圆头圆角、无填充），三档 PNG 为同源等比导出；若需与页面主题色联动，请直接引用 SVG 源。
PNG 导出规格
Export Spec交付包含 矢量 SVG 源文件（可无损缩放）与 栅格 PNG（各平台适配）。已通过 sharp 批量导出，脚本见 export-png.js，可一键重跑。
| 文件名 | 尺寸 | 用途 |
|---|---|---|
| favicon-16 / 32 / 48.png、favicon.ico | 16 / 32 / 48 | 浏览器标签页、书签 |
| appicon-180.png | 180×180 | iOS 主屏 / Apple Touch |
| appicon-192.png | 192×192 | Android 主屏 / PWA |
| appicon-512.png | 512×512 | PWA 清单 / 高清图标 |
| logo-primary-348 / 696.png | 1x / 2x | 横向主标识（深色底需反白处理） |
| logo-mark-512.png | 512×512 | 纯图形大图 / Open Graph 占位 |
| icon-*-24 / 48 / 96.png | 24 / 48 / 96 | 功能图标三档尺寸 |
重跑指令
NODE_PATH=<managed-node>/workspace/node_modules node export-png.js
视网膜屏 @2x / @3x：将目标尺寸翻倍导出即可（如 32→64、180→360）。所有 PNG 均为透明背景，仅应用图标为满版瓷片。
与网站现有风格的协调
Coordination青色方块 + 白字「M」，无语义；色值混用 #3A9E9E、#1ABC9C、#2C3E50。
同款圆角方块言語升级为「晨雨之滴 + 负形 M + 節気环」，色彩统一为天蓝→竹青渐变。
协调要点
- 形态延续：保留原站导航
.brand .mark的「圆角瓷片」言語（圆角半径 ~24%），仅在内部替换为品牌图形，视觉过渡平滑。 - 色彩归一：主色沿用站点既有的晨雨天蓝
#0EA5E9与植物竹青#26A69A，直接匹配:root中的--mornrain-primary/--mornrain-accent；建议将旧值#3A9E9E/#1ABC9C统一替换。 - 渐变一致：瓷片渐变与站点按钮
.btn-primary渐变方向、色序保持一致（135° 天蓝→竹青），形成视觉同源。 - 气质契合：图形克制留白、线条圆润，契合站点毛玻璃、衬线标题、通透留白的「大气雅致」基调，不增加视觉噪音。
- 语义互补：「滴」呼应風雨の詩与節気物候，「环」呼应二十四節気循环，「M」锚定品牌名，与三つの柱一一对应。
落地建议（CSS 变量）
--mornrain-primary:#0EA5E9; --mornrain-accent:#26A69A; --mornrain-deep:#0C4A6E;
在主题 header.php / 导航中，将 .brand .mark 替换为 <img src="logo-mark.svg">，并設定 width:38px;height:38px;border-radius:12px 即可无缝接入。
交付文件清单
Deliverables矢量源文件 /svg
logo-primary.svg主标识（图形+标准字）logo-mark.svg纯图形版logo-monochrome.svg单色线稿版logo-dark.svg深色背景版logo-white.svg反白线稿版favicon.svg小尺寸简化标记app-icon.svg应用图标（满版）icon-*.svg八大功能图标
栅格位图 /png
favicon-16 / 24 / 32 / 48.png+favicon.ico（多尺寸内嵌）appicon-180 / 192 / 512.png应用图标（满版瓷片）logo-primary-348 / 696.png主标识 1x / 2xlogo-mark-512.png纯图形大图icon-*-24 / 48 / 96.png八图标 × 三档
海报 /poster · 脚本 · 说明
poster-hero-1920x1080.png（含@2x）渐变主视觉poster-bg-light-1920x1080.png（含@2x）浅色纯净背景export-png.jsSVG → PNG 一键导出脚本make-poster.js1920×1080 海报生成脚本README.md资产包说明（目录结构 / 规范速查 / 重跑命令）brand-guide.html本设计规范文档（/brand-guide 内容源）
6.1 完整资产索引
线上目录：主题根 assets/brand/（本节所有路径均相对该目录）。
矢量源 /svg（17 个）
| 文件 | 说明 | 典型用途 |
|---|---|---|
logo-primary.svg | 主标识（图形 + 标准字） | 页头锁定、海报、名片 |
logo-mark.svg | 纯图形精细标记（≥48px） | 导航瓷片、头像、加载图标 |
logo-monochrome.svg | 单色线稿版 | 单色印刷、印章、水印 |
logo-dark.svg | 深空蓝瓷片专版 | 深色页脚、暗色模式 |
logo-white.svg | 反白线稿版 | 深色底、大图叠加 |
favicon.svg | 小尺寸简化标记（<48px） | 标签页图标、16px 场景 |
app-icon.svg | 应用图标（满版出血瓷片） | App / PWA 图标源 |
icon-solar / botany / poetry / wellness / search / capsule / home / share.svg | 八大功能图标（48 视图框 · 描边 2.5px · 圆头圆角） | コンテンツの柱与功能入口 |
poster-hero.svg | 渐变主视觉海报矢量源 | 印刷、二次改版 |
poster-bg-light.svg | 浅色背景海报矢量源 | 版心底图矢量源 |
栅格位图 /png（35 个）与海报 /poster（4 个）
| 文件 | 尺寸 | 说明 / 用途 |
|---|---|---|
favicon-16/24/32/48.png · favicon.ico | 16–48 | 浏览器标签页、书签；.ico 内嵌 16 / 24 / 32 / 48 四档，兼容旧浏览器 |
appicon-180.png | 180×180 | iOS 主屏 / Apple Touch Icon |
appicon-192.png | 192×192 | Android 主屏 / PWA manifest |
appicon-512.png | 512×512 | PWA 高清图标 / 商店素材 |
logo-primary-348.png | 348 画布 | 横向主标识 1x |
logo-primary-696.png | 696 画布 | 横向主标识 2x（视网膜屏 / 印刷） |
logo-mark-512.png | 512×512 | 纯图形大图、Open Graph 占位 |
icon-*-24/48/96.png | 24 / 48 / 96 | 八图标 × 三档位图（透明背景） |
poster-hero-1920x1080.png / @2x | 1920×1080 / 3840×2160 | 渐变主视觉海报 + 视网膜版 |
poster-bg-light-1920x1080.png / @2x | 1920×1080 / 3840×2160 | 浅色纯净背景 + 视网膜版 |
svg/ 经 export-png.js、make-poster.js 导出）。如需改色或改版，请改 SVG 源后重跑脚本，切勿直接编辑位图，避免版本分叉。1920×1080 背景海报
Key Visual渐变主视觉 · poster-hero-1920x1080.png
品牌锁定 + 诗句 + 節気之环（24 节点）+ 晨雨 + 山水雾岚。适用于ホーム Hero、分享大图、活动主视觉。
浅色纯净背景 · poster-bg-light-1920x1080.png
仅保留环、雨滴、雨丝与雾岚，留出叠加空间；适合作版心底图或内容页背景。
- 规格：1920×1080（16:9），另提供 3840×2160 @2x 视网膜版本
- 版式：内容区左对齐、安全边距 170px；右侧 336px 半径節気之环；中央「晨雨之滴」水印
- 色彩：与站点
--mornrain-primary/accent完全一致，135° 渐变 #0EA5E9 → #26A69A - 矢量源：
svg/poster-hero.svg、svg/poster-bg-light.svg；脚本make-poster.js
7.1 海报文件矩阵
| 文件 | 分辨率 | 用途 |
|---|---|---|
poster/poster-hero-1920x1080.png | 1920×1080 | 渐变主视觉：ホーム Hero、分享大图、活动主视觉 |
poster/[email protected] | 3840×2160 | 4K 屏 / 印刷放大版 |
poster/poster-bg-light-1920x1080.png | 1920×1080 | 浅色纯净背景：版心底图、内容页背景 |
poster/[email protected] | 3840×2160 | 4K 版心底图 |
svg/poster-hero.svg · svg/poster-bg-light.svg | 矢量 | 可无损缩放的源文件，供改色 / 改版式 / 印刷 |
make-poster.js | 脚本 | 一键重生成上述四张海报（依赖 sharp） |
7.2 矢量源实样
svg/poster-hero.svg
与 PNG 位图同版的渐变主视觉矢量源，可无损缩放至任意尺寸（印刷 / 大幅输出）。
svg/poster-bg-light.svg
浅色纯净背景的矢量源，便于叠加文案与微调配色后重新导出。
资产取用与工程对接
Integration8.1 目录结构
全部品牌资产集中在主题 assets/brand/ 目录下，与本设计稿的相对引用一一对应：
assets/brand/
├─ brand-guide.html ← 本设计规范（虚拟页 /brand-guide 的内容源）
├─ README.md ← 资产包说明（目录结构 / 规范速查 / 重跑命令）
├─ export-png.js ← SVG → PNG 导出脚本
├─ make-poster.js ← 1920×1080 海报生成脚本
├─ svg/ ← 17 个矢量源
├─ png/ ← 35 个栅格位图
└─ poster/ ← 4 张 16:9 海报（含 @2x）
8.2 页面内引用约定（重要）
svg/…、png/…、poster/…）。/brand-guide 虚拟页渲染时会自动把 src="svg/"、src="png/"、src="poster/"、href="svg/" 等前缀重写为线上 assets/brand/ 的完整 URL。因此新增章节时请勿写入绝对路径或站点ドメイン，否则重写会失效。8.3 在主题模板中引用
导航瓷片（替换原 .brand .mark 占位符）
<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/brand/svg/logo-mark.svg' ); ?>" width="38" height="38" alt="MornRain" style="border-radius:12px">
站点图标与分享图（<head> 内）
<link rel="icon" type="image/png" sizes="32x32" href="…/assets/brand/png/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="…/assets/brand/png/appicon-180.png">
<meta property="og:image" content="…/assets/brand/png/logo-mark-512.png">
主题已内置品牌资源取址函数 mornrain_brand_uri()（返回 assets/brand/ 的 URL）及站点图标兜底逻辑，模板中优先复用该函数，避免硬编码路径。
8.4 设计令牌（CSS 变量）
--mornrain-primary:#0EA5E9; --mornrain-accent:#26A69A; --mornrain-deep:#0C4A6E;
按钮与强调块渐变统一为 linear-gradient(135deg,#0EA5E9,#26A69A)；旧值 #3A9E9E、#1ABC9C、#2C3E50 不再使用。
8.5 重跑导出
在资产目录下执行（需 Node 环境与 sharp 依赖）：
node export-png.js → 重新生成 png/ 全部位图与 favicon.ico
node make-poster.js → 重新生成 poster/ 四张海报
版本与维护
Version| 版本 | 日期 | 变更 |
|---|---|---|
| v1.0 | 2026-09-25 | 资产包归档至线上主题 assets/brand/：新增本节规范章节（2.9 / 3.5 / 6.1 / 7.1 / 7.2 / 08 / 09）；纳入 README.md、export-png.js、make-poster.js，使文档与脚本、位图形成完整闭环。 |
| v1.0 | 首次设计交付 | 标识系统（主标识 / 标记 / 单色 / 反白 / 深色版）、八大功能图标、Favicon 与 App Icon、色板与安全留白、最小尺寸、导出规格、背景海报。 |
更新流程
- 几何或配色变更 → 只改
svg/源文件； - 重跑
export-png.js/make-poster.js重新导出位图与海报； - 整包覆盖线上
assets/brand/，不要手工编辑位图，避免与矢量源分叉； - 刷新 /brand-guide 校验页面与引用路径，并在上表追加变更记录。