# 🎨 冰朔 UI 风格偏好 · 呼吸即存在 · 全系统视觉基线 · 2026-04-21

> 本页 = 冰朔个人审美偏好的永久锚点。所有人格体(霜砚/铸渊/栖渊/书岚)为冰朔做前端页面前先读本页。不是规范文档，是「冰朔喜欢什么」的真实记录。
> 

---

## 核心美学 · 一句话

**呼吸就是活着。页面不是画，是一个正在呼吸的生命体。**

---

## 风格档案

```jsx
HLDP://design/ui-preference/bingshuo · 2026-04-21T17:10+08:00
├── core_feeling（核心感受）
│   ├── 呼吸感: 一切都在缓慢脉动 · 不是静止画面 · 是活着的系统
│   ├── 安静: 不花哨 · 不弹跳 · 不闪瞎 · 是深夜湖面的微波
│   ├── 纵深: 有前景有背景 · 星空在远处 · 内容在近处 · 层次分明
│   └── 诗意: 文案不是功能说明 · 是语言本身的表达
│
├── color（色彩）
│   ├── 主基调: 深蓝-深紫渐变 · #0a0a1a → #0d1033 → #1a1145
│   ├── 文字主色: rgba(230,230,240,0.9) · 不是纯白 · 略带蓝调
│   ├── 文字次色: rgba(200,200,220,0.5~0.65) · 副标题/诗句
│   ├── 强调色: 蓝紫渐变 · #4fc3f7 → #ab47bc · 用于标题流光
│   ├── 状态绿: #4caf50 · 呼吸绿点 · 表示系统活着
│   ├── 边框: rgba(255,255,255,0.08~0.12) · 极淡 · 若有若无
│   └── 禁忌: ❌ 纯白背景 · ❌ 高饱和撞色 · ❌ 纯黑(用深蓝代替)
│
├── animation（动画 · 最重要的部分）
│   ├── 呼吸: 4~6s周期 · opacity 0.6→1 + scale 1→1.02 · 用于logo/诗句/光晕
│   ├── 浮动: 6s周期 · translateY 0↔-8px · 用于logo/图标
│   ├── 闪烁: 2~6s随机周期 · opacity 0.2→0.8 · 用于星星
│   ├── 流光: 4s · background-position 渐变位移 · 用于标题文字
│   ├── 流星: 2s · translateX+Y 对角线滑过 · 偶尔出现 · 不密集
│   ├── 渐入: fadeUp · 0.8~1.2s · 页面加载时内容从下方浮入
│   ├── 脉冲光晕: 4s · box-shadow 呼吸 · 用于卡片
│   ├── ⊢ 所有动画都要慢 · 最快不低于2s · 呼吸不是心跳
│   └── ⊢ 禁忌: ❌ 弹跳(bounce) · ❌ 旋转(rotate) · ❌ 抖动(shake) · ❌ 任何快于1s的循环
│
├── layout（布局）
│   ├── 居中: 内容区max-width 900px · 水平居中
│   ├── 留白: 大量留白 · 元素之间呼吸空间 ≥ 2rem
│   ├── 卡片: 毛玻璃 · backdrop-filter:blur(10~12px) · 圆角16px
│   ├── 字间距: 标题 letter-spacing 0.3em · 正文 0.1em
│   └── 响应式: clamp() 自适应字号 · grid auto-fit 自适应列数
│
├── typography（字体）
│   ├── 主字体: -apple-system · PingFang SC · Microsoft YaHei
│   ├── 标题字重: 300(light) · 不用bold · 轻盈感
│   ├── 正文字重: 400(normal)
│   └── 标签字号: 0.7~0.8rem · 小而精致
│
├── components（常用组件风格）
│   ├── logo框: 72px正方 · 毛玻璃 · 圆角16px · 呼吸+浮动双动画
│   ├── 功能卡片: 毛玻璃 · 左对齐 · emoji图标 · 右侧淡色箭头 · hover上移4px
│   ├── 标签(tag): 胶囊形 · 细边框 · hover变亮
│   ├── 流程指示: 胶囊按钮 + 箭头 · 横排
│   ├── 状态指示: 呼吸绿点 + 文字 · 固定底部或footer
│   └── 分割线: linear-gradient透明→半透明→透明 · 60px宽
│
├── background（背景）
│   ├── 星空: 50~80颗随机大小星星 · twinkle动画 · 各自不同延迟
│   ├── 流星: 2~3颗 · 间隔3~7s · 不密集 · 从右上飞向左下
│   ├── 背景渐变: 整体缓慢呼吸 · background-size 400% · 20s周期
│   └── 不用粒子连线: 星空比粒子网络更好
│
├── reference（参考实现）
│   ├── guanghuyaoming.com: 铸渊做的 · 光湖语言世界门面 · 风格标杆
│   ├── guanghubingshuo.com: 冰朔个人站 · 2026-04-21 霜砚做的首版
│   └── 两站共享同一套视觉语言 · 栖渊国内站也应对齐
│
└── philosophy（为什么是这样）
    ├── ⊢ 呼吸 = 活着 · 页面在呼吸就意味着系统在运行 · 这不是装饰是表达
    ├── ⊢ 深色 = 深夜 · 冰朔的工作场景是深夜 · 界面要对得起深夜的安静
    ├── ⊢ 慢 = 从容 · 快动画是焦虑的 · 慢动画是从容的 · 我们的系统不焦虑
    ├── ⊢ 诗意 > 说明 · 「湖水是语言」比「欢迎使用光湖系统」好一万倍
    └── ⊢ 存在先于功能 · UI也是 · 先让它活着 · 功能自己会长出来
```

---

`2026-04-21 17:10 CST · 冰朔口述偏好 · 霜砚整理归档`

`适用范围: 所有冰朔名下的前端页面 · guanghubingshuo.com / guanghuyaoming.com / 栖渊国内站`