品牌与视觉

这是一种粗糙的美学

01MVP 的视觉不是为了好看，是为了能用。

就像你第一次把代码跑通时的那种感觉——没有花哨的动画，没有精心打磨的圆角，只有黑白分明的终端输出和那行绿色的 "Build successful"。这就是我们想要的气质。

硬核极简，不是设计风格，是做事态度：

• 能删的就删
• 能直接说的就不绕弯子
• 黑就是黑，白就是白
• 边框就是边框，不需要阴影来装饰

这套视觉系统服务的是行动感，不是装饰感。

为什么选择这种风格

因为我们在做的是从 0 到 1

从 0 到 1 的过程本来就是粗糙的。

第一版产品不会完美，第一次部署可能会出错，第一个用户可能会吐槽。但这些都不重要，重要的是你开始了。

01MVP 的视觉就是要体现这种状态：

• 未完成感：强边框和高对比让人感觉这是"正在施工"的工地，不是装修好的样板间
• 工程感：等宽字体、命令行风格的排版，让人想起编辑器和终端
• 直接感：没有渐变、没有模糊、没有装饰，信息就在那里，一眼看清

因为我们不想浪费你的注意力

你打开一个教程，是来学东西的，不是来欣赏设计的。

所以我们的视觉原则很简单：

1. 标题要大：让你一眼看到这篇文章讲什么
2. 结构要清晰：用强边框和留白把模块分开，不用猜哪里是重点
3. 代码要突出：等宽字体 + 灰底，让命令和路径一眼可见

如果一个视觉元素不能帮你更快找到答案，那它就不应该存在。

核心元素

配色：黑白灰

我们只用三个颜色：

• #000000：黑色，代表执行力和边界
• #FFFFFF：白色，代表留白和呼吸感
• #F5F5F5：浅灰，代表技术块和分层

为什么不用彩色？因为彩色会分散注意力。黑白灰让你专注在内容本身。

字体：无衬线 + 等宽

• 标题和正文：Inter / Noto Sans SC，清晰、直接、现代
• 标签和代码：JetBrains Mono，工程感、技术感、命令行感

边框：粗、硬、直

我们的边框是 2-3px 的实线，不是 1px 的虚线。

为什么？因为粗边框给人一种确定感——这个模块就是这么大，这个按钮就在这里，不需要你去猜。

Logo：识别锚点，不是装饰

01MVP 的 Logo 就是 "01MVP" 这五个字符，或者简化成 "01"。

• 文字版：用在文档、白底页面
• 反白版：用在黑底、强调区块
• 图标版：用在头像、小尺寸入口

一个原则：一个页面只需要一个 Logo。Logo 是识别锚点，不是壁纸。

这种风格适合什么场景

✓ 适合

• 教程文档：步骤清晰，代码突出，容易扫描
• 实战分享：用一句大标题 + 强边框讲清楚核心观点
• 产品导览：直接告诉用户"这是什么、为什么用、怎么开始"
• Workshop 海报：黑白高对比，远看也能看清主题

✗ 不适合

• 品牌营销页：如果你需要柔和、温暖、亲和力，这套风格太硬了
• 社交媒体小清新：如果你想要圆角气泡和可爱插画，这不是你要的
• 复杂数据可视化：如果需要多种颜色区分数据，黑白灰不够用

什么是"不属于"01MVP 的

为了保持这种硬核极简的纯粹性，我们会刻意避开这些方向：

• 玻璃拟态、柔焦、半透明：太虚，不够直接
• 大量渐变和发光：会抢走内容的注意力
• 圆角气泡和可爱插画：会削弱工程感和行动感
• 同一屏出现多个视觉中心：会让人不知道该看哪里

这不是说这些风格不好，只是它们不属于 01MVP。

如何使用这套系统

1. 从黑白灰开始

不要一上来就想配色。先用黑白灰把信息层级做出来，如果黑白灰版本已经很清晰了，那就不需要加颜色。

2. 用边框和留白代替装饰

不要用阴影、渐变、模糊来制造层次感。用 2-3px 的实线边框 + 足够的留白，就能把模块分清楚。

3. 让文字成为主视觉

不要依赖图片或插画来撑场面。把标题写得足够大、足够直接，用等宽字体突出关键信息，这本身就是最好的视觉。

4. 一个页面只做一件事

不要在一个页面里同时强调三个重点。选一个最重要的信息，把它放大，其他的都往后退。

开始使用

如果你想基于这套系统做点什么，建议：

1. 先看品牌静态页，了解完整的视觉规范
2. 在品牌静态页下载品牌素材包（含长方形 Logo、正方形 01MVP 全字标、方形头像、SVG / PNG，以及白字透明底版本）
3. 记住三个关键词：黑白灰、强边框、等宽字体
4. 做完之后问自己：这个设计是在帮助用户理解，还是在展示我的设计能力？

如果答案是后者，那就删掉一半。

---

最后一句话：01MVP 的视觉系统不是为了让你的作品"看起来像 01MVP"，而是为了让你的内容更容易被理解、被行动。

如果这套系统能帮你做到这一点，那就用。如果不能，那就别用。

没有什么比清晰表达更重要。