feat(ui): 营销站 UI/UE/UX 治理 P0→P3 收官
复评（impeccable critique）全部 Priority Issues 与 Minor Observations 落地： - P0 数字口径：MetricsBasisNote 单一真源 + metrics-basis.test fs 防线，接入 products/solutions/services/home/about；纯渲染端加角注，不动 DB/seed 值 - P1 转化断头路：敬请期待态 + 404 语境出口 + services 空态双出口 - P1 首页并卡：TrustSection 早鸟横幅并入 CasesSection 单张深色共创卡 - P2 CTA 治理：CONSULT_CTA_ALLOWLIST 白名单 + 逐字符扫描器，/contact CTA 全归一 - P3 polish：footer 补 服务/公司列、contact 死三元/空槽/toast、GlobalErrorTracker 幂等日志 - 文档同源：PRODUCT/CONTEXT 动效带统一 180–280ms；DESIGN.md 立 The 10px Floor； font-floor.test 守卫禁止再引入 <10px（保留 10/11px 有意 Bain 微标签） Gates: type-check 0 · jest 1581/132 · lint 0e/126w · contrast 7/7 · headings 10/10
This commit is contained in:
+19
-58
@@ -3,73 +3,34 @@
|
||||
### Users
|
||||
- 中国企业决策者（CEO/CIO/CTO），寻求数字化转型服务
|
||||
- 使用场景：评估技术供应商、了解解决方案、发起咨询
|
||||
- 期望感受：专业可信、文化共鸣、技术前沿
|
||||
- 期望感受：专业可信、决断清晰、技术前沿
|
||||
|
||||
### Brand Personality
|
||||
- 沉稳 · 精致 · 可信赖
|
||||
- 东方水墨美学 + 现代科技感
|
||||
- 咨询顾问式的断言表达：答案先行、有立场、有依据
|
||||
- 不是高高在上的"专家"，而是坐下来一起想办法的"同行者"
|
||||
|
||||
### Aesthetic Direction
|
||||
- **风格**: 水墨雅致 — 以留白和排版取胜，特效点到为止
|
||||
- **参考**: Apple 中国官网（极致留白、精准排版、微妙动效）
|
||||
- **核心视觉**: 墨韵流光（旋转渐变边框 + 鼠标跟随光晕）— 全站统一
|
||||
- **反参考**: 过度装饰、花哨动画、多色渐变、拥挤布局
|
||||
- **风格**: The Crimson Ledger（可审计的宣言）— 大字排印、细线分栏、克制的深红信号，像顶级咨询机构的账本页面
|
||||
- **参考**: Bain / McKinsey 官网（答案先行的陈述式标题、数据条、结构化留白）
|
||||
- **核心视觉**: 深红断言 Hero + hairline 账本分栏 + bain-card 细线卡片 + 编号数据条
|
||||
- **反参考**: 过度装饰、花哨动画、多色渐变、拥挤布局；旧水墨体系（旋转渐变边框、鼠标跟随光晕）已退役
|
||||
|
||||
### Design Principles
|
||||
|
||||
1. **留白即力量** — 内容呼吸，不拥挤。section 间距 generous，卡片内部留白充足
|
||||
2. **墨韵流光统一** — 所有卡片共享 ink-glow-border + mouse-follow 系统，但参数克制
|
||||
3. **朱砂点睛** — 品牌红 #C41E3A 仅作点缀，不作为主色调。标题中关键词用 font-calligraphy 突出
|
||||
4. **层次分明** — 通过字重和间距建立层级，而非颜色多样性
|
||||
5. **克制动效** — 动效服务于信息传达，不炫技。hover 效果统一：translateY(-4px) + shadow + glow
|
||||
1. **答案先行** — 标题直接给出结论与价值判断，不做悬案式文案；副标题与数据负责佐证
|
||||
2. **朱砂信号（Cinnabar Signal）** — 品牌红 #C41E3A 是唯一信号色：每页 ≥3 处触达点、面积 ≤10%；用于强调，绝不作装饰主色
|
||||
3. **账本骨架** — 层次由 hairline 分隔线、对齐网格与字号字重建立，而非颜色多样性或装饰性边框
|
||||
4. **安静底面** — 背景为白 / mist #F8FAFC 交替分区；深红区块与 ink #0A0E14 深色只留给 CTA 与收束区块
|
||||
5. **克制动效** — 动效服务于信息传达：180–280ms、`--ease-ink`、hover 轻 lift + shadow，不做循环装饰动画
|
||||
|
||||
### Design Tokens
|
||||
### 视觉令牌
|
||||
|
||||
#### Colors (Strict)
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| ink | #1C1C1C | 主文字、深色背景 |
|
||||
| ink-light | #595959 | 次要文字（唯一值） |
|
||||
| ink-muted | #A3A3A3 | 辅助文字（唯一值） |
|
||||
| cinnabar | #C41E3A | 品牌强调色，仅点缀 |
|
||||
| paper | #FFFFFF | 主背景 |
|
||||
| paper-warm | #FAFAFA | 交替 section 背景 |
|
||||
| ink-dark | #0A0A0A | CTA 深色背景 |
|
||||
令牌权威来源为 [DESIGN.md](DESIGN.md)（含机器可读 YAML 令牌层与 `.impeccable/design.json` 侧车）。本文件不再罗列具体令牌值，仅保留产品级永久约束：
|
||||
|
||||
#### Typography
|
||||
| Level | Size | Weight | Usage |
|
||||
|-------|------|--------|-------|
|
||||
| H1 | text-5xl sm:text-6xl lg:text-7xl | font-normal (brand) | Hero 品牌名 |
|
||||
| H2 | text-3xl sm:text-4xl | font-semibold | Section 标题 |
|
||||
| H3 | text-lg sm:text-xl | font-semibold | Card 标题 |
|
||||
| Body | text-base | normal | 正文描述 |
|
||||
| Small | text-sm | normal | 辅助信息 |
|
||||
| Mono | text-xs font-mono | normal | 编号标签 |
|
||||
|
||||
#### Spacing
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| section-y | py-20 md:py-28 | Section 纵向间距 |
|
||||
| card-p | p-6 md:p-8 | 卡片内边距 |
|
||||
| grid-gap | gap-6 md:gap-8 | 网格间距 |
|
||||
|
||||
#### Card System
|
||||
- 所有卡片: `ink-glow-border rounded-2xl` + mouse-follow + hover translateY(-4px)
|
||||
- 鼠标光晕: `radial-gradient(400px circle, rgba(accent, 0.04), transparent 40%)`
|
||||
- 阴影: hover `0 16px 32px rgba(0,0,0,0.08)` / default `0 1px 3px rgba(0,0,0,0.04)`
|
||||
- 边框: ink-glow-border 旋转渐变
|
||||
|
||||
#### Section Backgrounds (Alternating)
|
||||
1. Hero: paper (#FFFFFF)
|
||||
2. Social Proof: paper-warm (#FAFAFA)
|
||||
3. Product Matrix: paper (#FFFFFF)
|
||||
4. Challenge: paper-warm (#FAFAFA)
|
||||
5. Services: paper (#FFFFFF)
|
||||
6. Methodology: paper-warm (#FAFAFA)
|
||||
7. Home Solutions: paper (#FFFFFF)
|
||||
8. Testimonials: paper-warm (#FAFAFA)
|
||||
9. Team: paper (#FFFFFF)
|
||||
10. About: paper-warm (#FAFAFA)
|
||||
11. News: paper (#FFFFFF)
|
||||
12. CTA: ink-dark (#1C1C1C)
|
||||
- 品牌红 #C41E3A 每页 ≥3 触达点、面积 ≤10%
|
||||
- 字体全部使用本地文件（Geist woff2 + PingFang 回退），禁止外部字体 CDN
|
||||
- 动效时长 180–280ms（`--transition-fast` … `--transition-normal`），缓动 `cubic-bezier(0.22, 1, 0.36, 1)`（`--ease-ink`）
|
||||
- 字距下限 -0.04em，不得更紧
|
||||
- 暗黑模式由 `html[data-theme='dark']` 覆盖 CSS 变量驱动，组件不得写死颜色字面量
|
||||
- 楷体（`--font-brand`）为遗留例外，仅存量页面保留，新页面禁用
|
||||
|
||||
Reference in New Issue
Block a user