# 三点水也工作室 · 池青品牌规范

池青配色版本 **1.0.0**，于 2026-09-15 确认；应用图标体系版本 **1.0.0**，于 2026-09-16 确认采用 **B · 实形水印**。配色候选的 A 与图标候选的 B 分属不同设计选择。

这份规范用于工作室官网和「三水」系列 App 的主题色、图标与界面。品牌基准色保持一致，界面通过语义变量适配深浅主题。后续 App 沿用 B 方案的固定构图、比例和三水标记，只替换功能图形。

## 1. 名称与标识

| 项目 | 规范 |
| --- | --- |
| 工作室名称 | 三点水也工作室 |
| 产品命名 | 三水 + 产品名，例如「三水笔记」 |
| 包名前缀 | `de.ycai` |
| 完整包名示例 | `de.ycai.sanshui.notes`，实际名称以具体产品配置为准 |
| 品牌线索 | 氵 + 也 = 池；水滴、涟漪和流动的线条 |

「三水清单」「三水时光」仅为命名及图标体系示例，不代表已发布的产品。不得把包名前缀当作已确认的官网域名。

## 2. 五个基准色

| 名称 | HEX | CSS 变量 | 用途 |
| --- | --- | --- | --- |
| 池青 · 主色 | `#087F8C` | `--brand-primary` | 浅色界面的主操作、链接、品牌标记、应用图标底色 |
| 薄荷青 · 点睛色 | `#73DED2` | `--brand-accent` | 深色界面主操作、焦点、高亮和小面积装饰 |
| 雾水白 · 浅底 | `#E6F5F3` | `--brand-tint` | 浅色背景、选中项、轻量分区 |
| 深池 · 深底 | `#081F24` | `--brand-dark` | 深色主题和官网大面积背景 |
| 墨青 · 文字 | `#17383C` | `--brand-ink` | 浅色界面主要文字和图形 |

面积参考：中性色约 **70%**、品牌色约 **25%**、点睛色约 **5%**。这是一种视觉节奏建议，应按具体界面调整。

## 3. 文字与对比度

- 池青主色上使用 **`#FFFFFF` 白字**，对比度约 **4.75:1**，可用于普通字号的按钮文字。
- 薄荷青上使用 **`#081F24` 深池文字**。不要在薄荷青上放白色正文。
- 浅色正文用墨青；深色正文用 `#F2F8F6`。次要文字使用主题变量，不直接给正文降低透明度。
- 颜色不要成为唯一状态提示；错误、成功、选中等状态同时配合文字、图标或边框。
- 渐变和发光用于展示性图形；表单、按钮、列表优先采用清晰的实色。

## 4. 色阶

| 级别 | HEX | 建议用途 |
| --- | --- | --- |
| 50 | `#F2FBF9` | 极浅分区 |
| 100 | `#E6F5F3` | 浅色底、选中背景 |
| 200 | `#BEEDE7` | 装饰、轻量边框 |
| 300 | `#9AE5DB` | 深色主按钮悬停 |
| 400 | `#73DED2` | 点睛色、深色主题主操作 |
| 500 | `#24ACB2` | 插画和图表辅助色 |
| 600 | `#087F8C` | 品牌主色、浅色主题主操作 |
| 700 | `#066874` | 浅色主按钮悬停 |
| 800 | `#0A4C57` | 浅色主按钮按下 |
| 900 | `#17383C` | 墨青文字 |
| 950 | `#081F24` | 深池背景 |

## 5. 界面主题与交互状态

使用 `tokens.json` 的 `modes.light` / `modes.dark`，或直接导入 `tokens.css`。组件应消费语义变量，避免散落硬编码色值。

| 角色 | 浅色 | 深色 |
| --- | --- | --- |
| 页面背景 | `#F7FAF9` | `#081F24` |
| 内容表面 | `#FFFFFF` | `#0E2A30` |
| 次级表面 | `#E6F5F3` | `#123239` |
| 浮层表面 | `#FFFFFF` | `#193B42` |
| 正文 | `#17383C` | `#F2F8F6` |
| 次要文字 | `#4A686A` | `#AEC9C7` |
| 辅助文字 | `#607B7C` | `#87AAA7` |
| 边框 | `#CEE1DD` | `#294B50` |
| 主按钮 | `#087F8C` | `#73DED2` |
| 主按钮文字 | `#FFFFFF` | `#081F24` |
| 悬停 | `#066874` | `#9AE5DB` |
| 按下 | `#0A4C57` | `#58CABE` |
| 焦点描边 | `#087F8C` | `#73DED2` |

焦点建议 2 px 描边，向外留 3–5 px；禁用控件可使用 38% 不透明度，并禁用对应操作。应用图标底色统一使用池青，不随界面深浅模式变化。

```html
<link rel="stylesheet" href="tokens.css">
<main data-theme="dark">
  <button class="primary">保存</button>
</main>
```

```css
.primary {
  background: var(--color-action);
  color: var(--color-on-action);
}
.primary:hover { background: var(--color-action-hover); }
.primary:active { background: var(--color-action-pressed); }
.primary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
```

其他技术栈可直接把 JSON 中的色值映射到 Android、iOS、Flutter 或桌面应用主题。包名前缀始终使用 `de.ycai`。

## 6. 语义色

| 状态 | 浅色前景 | 深色前景 |
| --- | --- | --- |
| 成功 | `#23724F` | `#74D7A6` |
| 警告 | `#965B10` | `#F0C26B` |
| 错误 | `#B83C49` | `#FF9FAD` |
| 信息 | `#285CE6` | `#8CBAFF` |

对应的背景容器色在 JSON 的 `successContainer` 等字段中。语义色表达固定含义，不随产品名称而改变，也不作为新的品牌主色。

## 7. 图标与基础标记

**正式方案：B · 实形水印。** 池青底色、白色实形、池青内部切口，上部为功能图形，下部为固定三水水印。决定及资产索引见 [icon-system.json](icon-system.json)。

- 每款产品复用同一底版，只替换功能图形，不改变主色、水印位置或视觉风格。
- 三水水印使用三滴水的原始路径；不能替换成三个圆点、省略号或随意组合的水滴。
- 主要内容约 20% 安全留白，保持相近视觉重量；功能形状可做少量光学校正，不能拉伸或改变水印。
- 不加入应用名称、小字、多层装饰边框或烘焙阴影；功能轮廓在小尺寸下应保持清晰。
- 原稿是完整、不透明的 1024 × 1024 方形画布。网页圆角是展示遮罩，平台资源按各自要求输出；Android 自适应图标应拆分背景与前景。
- 单独使用工作室标记时，可用池青、墨青或浅白，周围保留约一滴水宽度的净空；不要拉伸、旋转、描边或改变三滴水的相对位置。

| 参数 | B 方案 |
| --- | --- |
| SVG 坐标 | `viewBox="0 0 128 128"` |
| 功能内部设计区域 | 64 × 64 |
| 功能组 transform | `translate(29.76 19) scale(1.07)` |
| 三水水印 transform | `translate(54 84) scale(0.4)` |
| 切口线宽 | 内部坐标一般 3.8；时钟指针 4.5 |
| 切口端点、连接 | 圆形 `round` |

`assets/sanshui-notes.svg`、`sanshui-tasks.svg`、`sanshui-time.svg` 是 B 方案参考母版。新产品从 `assets/app-icon-template.svg` 复制底版，只填入 `product-glyph` 分组并更新标题；背景和 `brand-signature` 分组保持原样。

`assets/mark-teal.svg`、`mark-light.svg`、`mark-ink.svg` 为独立工作室基础标记。图标方案已确认不代表对应产品已经发布。

## 8. 文件与维护

- `tokens.json` 是色值来源；修改后在项目根目录执行 `npm run build`，自动生成 CSS 与品牌资源包。
- `tokens.css` 包含五个基准色、完整色阶及深浅主题语义变量。
- `sanshui-brand-kit.zip` 包含本规范、配色 JSON、CSS、图标决策 JSON 和全部 SVG 资源。
- 当前官网的「三水笔记」为概念展示，产品与联系方式尚未确定；没有虚构下载链接或联系地址。