VI / 0xhardman
# the visual identity behind everything you see here
Soul
— 一句话定位A non-typical freedom-seeking full-stack developer.
彩虹是唯一的色彩声明， 其它一切都是黑、白、灰。 Strict palette—— 一种声音，最有力。
Color
— rainbow + black & whiteThe Rainbow / 8 fixed colors
8 色，固定顺序，固定 90° 横向。任何变体都从这 8 色派生。 r4 (green) 和 r7 (purple) 是连接器，让彩虹和终端绿/以太紫血脉相通。
Strict Palette / 严格调色
#0A0A0A · 文字、Logo、所有非彩虹强调#FAFAFA · 背景，比纯白有温度#525252 · 次要文字、hover 状态、分割线一种色彩 + 黑白灰 = 最强识别度。
Linear / Vercel / Stripe 都是这个原则——彩虹是签名，其余皆中性。
Rainbow Rules / 用法守则
- YES · 彩虹做边不做面，做装饰不做文字（border / bar / dot / CTA edge）
- YES · 默认流动 4s，hover 加速到 1s——平时低调，互动时活泼
- YES · 动态不合适的场景（小图标 / 列表 / favicon / OG / 截图 / 打印）改用
-static变体 - YES · 唯一例外：孤立的“hero 大标题”时刻可染整段（如 /vi 页顶 “VI” 字样），但这是签名级使用，不是常规 pattern
- NO · 大面积彩虹背景（喧宾夺主）
- NO · 同屏超过 3 个动态彩虹元素同时跑（眼花）
- NO · 在文字流里穿插染色的词（“0x”、“freedom-seeking”之类）——彩虹不再进文字
- NO · 改变 8 色的色号、顺序或角度
Motion vs Static / 动态与静态
彩虹的默认形态是动态（4s 横向流动），用于大尺寸品牌时刻。 但有些场景动态不合适——这时用静态变体，配色完全相同，仅去掉动画。
- · 章节分隔 / 主 CTA / hero 装饰条
- · 仅在“品牌时刻”的瞬间使用
- · class:
.rainbow-bar/.btn-rainbow
- · favicon / OG / 截图 / PDF / 打印
- · < 32px 图标 · 列表 · 表格 · tag
- · 边:
.rainbow-bar-static· 4 色软切片 (r1→r4) - · 圆点:
.rainbow-dot· 完整 8 色压成 conic 圆，可作行内签名
判断规则：动态需要“够大、够独”； 只要尺寸小、数量多、要被截图/导出、或动会和别的元素打架——立刻切静态。
无障碍兜底：prefers-reduced-motion 用户会自动看到静态版（CSS 已配）。
On Dark / 黑底测试
所有彩虹变体在 ink 背景上的实测——黑底是 mascot 区、终端区、视频角标、暗模式 OG 卡的常见环境。
黑底上 8 色全开正合适——夜空里的霓虹。 CTA 内层 mask 改用 ink 即可。
红橙黄绿在黑底上像火焰/夕阳——暖色和暗背景天然协调。 dot 仍用全 8 色，小尺寸下扛得住。
观察： 动态版在黑底上是“霓虹”气质，静态版是“余烬”气质—— 两种都成立，所以不再单独定义 dark variant。 同一套 token，跨亮暗背景。
Brand Mark / 品牌签名的着色
主品牌名只写 0xhardman，纯 ink，不染彩虹、不带 .eth。
曾经试过把 0x 染彩虹做“web3 双关”，但 8 色挤在 2 字符里压成红橙黄一段，反而成了文字噪点。 Rainbow 退回到自己的本职——只做装饰位（边、CTA、分隔条、圆点签名），不再混入文字流。
- · 想要色彩签名时，用
.rainbow-dot紧贴在文字前——色和字分开，互不打架 - · ENS 全名
0xhardman.eth只在 footer 一处低调出现，给认得 ENS 的人看 - · 真正的“签名”请用
<BrandSignature />（脸 + 文字 lockup），见 §03
Logo
— 一身三任 · V1 + V2 · 文字 lockupBrand Lockup / 文字签名组合
Logo 单独出现时（OG 卡、社交分享、README banner、视频角标），陌生人看不出是谁。组合签名把脸 + 文字锁定在一起——脸保留人格，文字承担可发现性（搜索、SEO、被引用）。 导出图片时优先用这个组合，而不是裸 logo。
文字纯 ink，不染彩虹——脸已经是这套签名的色彩锚点，再叠 0x 彩虹就是双重签名，反而稀释 logo。 彩虹 0x 留给没有脸的纯文字场景（导航栏、内文提及）。
0xhardman0xhardman0xhardman0xhardman0xhardman0xhardman- · 三个尺寸（sm 28px · md 44px · lg 72px）；尺寸指脸的高度，文字字号自动跟
- · 脸与文字之间的间距 =
gap-1.5（6px），紧凑一体，不要拉远 - · 用法：
<BrandSignature size="md" variant="dark" />
手绘风人脸轮廓——AI 时代的“人类真迹证明”。 一身三任：Logo（品牌）= Avatar（头像）= Signature（签章）。 只有亮 / 暗两个版本，看背景色选用。
用于浅色背景
filter: invert(1)
判断规则：背景亮度 > 50% 用 V1，< 50% 用 V2。 不需要思考“该用哪个变体”——看背景色就行。
Logo Rules
- YES · 所有 hardman / 0xhardman 身份的地方都用这个 logo
- YES · 留白 padding ≥ logo 高度的 10%（给手绘线条呼吸）
- NO · 不要叠加装饰（戴帽子、加眼镜）——那是 mascot 才做的
- NO · 不要拉伸 / 压扁（保持 1:1）
- NO · 不要染成除黑 / 白之外的颜色
Typography
— Mono + 文楷VI 字体栈只有两个——每一个都覆盖全场景。
全站用 Mono 当 Sans 用——这是你的字体签名
有手写感但不像草稿——给中文长文用
Size Scale / 尺寸阶梯
Soul Statement
Mono for the world.
Wenkai for the heart.
Components
— 按钮、装饰、组合 — 复用单元CTA Button · live demo
主 CTA 用 .btn-rainbow——外层彩虹背板 + 内层白色 mask， 色彩只在边出现，不喧宾夺主。 静态变体 .btn-rainbow-static 用于无法动效的场景。
- · hover 看动态版的 glow 加速 + 上浮
- · 内层 mask 在亮底用白，暗底改 ink（见 §01 黑底测试）
- · 用法：
<button className="btn-rainbow"><span className="btn-rainbow__mask">…</span></button>
More to come
后续把 BrandSignature、tag、card、social embed 等组件统一收纳到这一节。 目前先放 CTA。
Out of VI
— section 级风格元素 · 非 VI 主体VI 定义“全站用什么”。某些 section 可以有自己的局部风格—— 比如未来计划做的“复古显示器风像素艺术展区”会用 VT323 + 终端绿 + 黑底， ASCII art 也属于这一层。
原则：VI 是 brand identity（识别码），section 风格是 brand expression（表达）。 VI 必须精简稳定，section 可以灵活演绎。
# decision log
— Rainbow chosen as soul color (over Apple / Instagram / RainbowKit / Holographic / Pixel)
— Terminal green & eth purple retired — strict palette: rainbow only, rest neutral
— Logo simplified from 8 variants to 2 (V1 master + V2 inverted)
— Signature Seal removed (no high-frequency use case)
— VT323 dropped from VI font stack, kept as section-level style
— Typography reduced to 2 fonts: Geist Mono + 文楷
VI v2 · 2026.05.01 · 0xhardman