MornRain · 晨雨 品牌视觉识别系统

三元素层层包含：环（时间／Солнечный сезон）→ 滴（雨／Фенология）→ M（品牌）。形简意赅，故可在极小尺寸下依然清晰。

2.1 主标识（图形 + 标准字）

logo-primary.svg · Morn（晨·天蓝）+ Rain（雨·竹青）双色拆分标准字

标准字中，「Morn」取晨雨天蓝 #0EA5E9、「Rain」取植物竹青 #26A69A，以色彩呼应「晨 / 雨」二元语义；下方中文副标「晨雨 · 24 солнечных сезонаЭстетика фенологии」为可选组合；网页端品牌字标自 2026-09 起统一采用「MornRain · 晨雨」双语配对形式（英文名 + 中文名，中文名稍小、次色）。

2.2 纯图形版（标记 / Mark）

logo-mark.svg · 精细标记

透明背景 · 可直接用于网页 / 头像

favicon.svg · 小尺寸简化标记

2.3 单色版

logo-monochrome.svg · 单一石墨灰线稿

反白线稿（示意反转）· 用于深色底

浅墨 55% · 水印 / 辅助场景

单色版去除色彩与填充，仅保留线稿轮廓，适用于单色印刷、印章、刺绣、Fax/传真、激光雕刻等无彩色场景，颜色可替换为任意单色（默认石墨灰 #334155）。

2.4 深色 / 浅色背景适配版

浅色背景 · 用默认渐变瓷片标记

深色背景 · 默认标记（渐变瓷片仍醒目）

logo-dark.svg · 深空蓝瓷片专版

logo-white.svg · 反白线稿（深色页脚 / 暗色模式）

横向组合 · 深色底（标准字需转反白）

社交头像 / 应用方形场景

选择规则：浅色背景用默认渐变瓷片标记；深色背景优先用 logo-dark 深空蓝瓷片版或 logo-white 反白线稿版。渐变瓷片因其自身高饱和，在深色底上亦可用，但最稳妥为专版。

2.5 标准色值

2.6 安全留白（Clear Space）

2.7 最小使用尺寸

16px

24px

32px

48px

≥48px 用精细标记

应用形态	屏幕最小尺寸	印刷最小尺寸	说明
主标识（图形+标准字）	120 px 宽	30 mm 宽	低于此值改用纯图形版
精细标记（含负形 M + Солнечный сезон环）	48 px	12 mm	须清晰呈现环与 M
小尺寸简化标记（favicon）	16 px	5 mm	加粗 M，保证辨识
单色线稿版	24 px	8 mm	线宽不低于 2 px

2.8 使用规范速查

2.9 主标识栅格交付（PNG 1x / 2x）

logo-primary-348.png · 1x 横向主标识

logo-primary-696.png · 2x 视网膜版本

logo-mark-512.png · 透明底大图 / OG 占位

横向主标识按 1x（348 画布） 与 2x（696 画布） 两档交付，分别用于常规屏与视网膜屏 / 印刷取图；纯图形标记按 512×512 交付，可直接用作 Open Graph 图、分享卡片与浅色底水印。除应用图标为满版瓷片外，其余 PNG 均为透明背景（checker 棋盘格仅为示意透明区）。

3.1 Favicon（网站图标）

favicon-16.png

favicon-24.png

favicon-32.png（主流）

favicon-48.png

favicon.ico · 多尺寸容器

同时提供 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 移动端 / 桌面端应用图标

appicon-180.png · Apple Touch Icon

appicon-192.png · Android / PWA

appicon-512.png · PWA 清单 / 高清

app-icon.svg · 矢量源（可改色 / 重导出）

应用图标采用 满版出血瓷片（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-share

3.4 多尺寸适配方案

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

色彩与线宽由 svg/ 源文件统一控制（描边 2.5px、圆头圆角、无填充），三档 PNG 为同源等比导出；若需与页面主题色联动，请直接引用 SVG 源。

原站 · 占位标识

青色方块 + 白字「M」，无语义；色值混用 #3A9E9E、#1ABC9C、#2C3E50。

M

MornRain · 晨雨

新标识 · 品牌系统

同款圆角方块Язык升级为「晨雨之滴 + 负形 M + Солнечный сезон环」，色彩统一为天蓝→竹青渐变。

协调要点

• 形态延续：保留原站导航 .brand .mark 的「圆角瓷片」Язык（圆角半径 ~24%），仅在内部替换为品牌图形，视觉过渡平滑。
• 色彩归一：主色沿用站点既有的晨雨天蓝 #0EA5E9 与植物竹青 #26A69A，直接匹配 :root 中的 --mornrain-primary / --mornrain-accent；建议将旧值 #3A9E9E / #1ABC9C 统一替换。
• 渐变一致：瓷片渐变与站点按钮 .btn-primary 渐变方向、色序保持一致（135° 天蓝→竹青），形成视觉同源。
• 气质契合：图形克制留白、线条圆润，契合站点毛玻璃、衬线标题、通透留白的「大气雅致」基调，不增加视觉噪音。
• 语义互补：「滴」呼应Поэзия ветра и дождя与Солнечный сезонФенология，「环」呼应24 солнечных сезона循环，「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 即可无缝接入。

6.1 完整资产索引

线上目录：主题根 assets/brand/（本节所有路径均相对该目录）。

矢量源 /svg（17 个）

栅格位图 /png（35 个）与海报 /poster（4 个）

渐变主视觉 · 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 海报文件矩阵

7.2 矢量源实样

svg/poster-hero.svg

与 PNG 位图同版的渐变主视觉矢量源，可无损缩放至任意尺寸（印刷 / 大幅输出）。

svg/poster-bg-light.svg

浅色纯净背景的矢量源，便于叠加文案与微调配色后重新导出。

8.1 目录结构

全部品牌资产集中在主题 assets/brand/ 目录下，与本设计稿的相对引用一一对应：

8.2 页面内引用约定（重要）

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/ 四张海报

更新流程

• 几何或配色变更 → 只改 svg/ 源文件；
• 重跑 export-png.js / make-poster.js 重新导出位图与海报；
• 整包覆盖线上 assets/brand/，不要手工编辑位图，避免与矢量源分叉；
• 刷新 /brand-guide 校验页面与引用路径，并在上表追加变更记录。