Files
novalon-website/PRODUCT.md
T
zhangxiang f8917d4fda 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
2026-09-20 11:50:58 +08:00

2.3 KiB
Raw Blame History

Design Context

Users

  • 中国企业决策者(CEO/CIO/CTO),寻求数字化转型服务
  • 使用场景:评估技术供应商、了解解决方案、发起咨询
  • 期望感受:专业可信、决断清晰、技术前沿

Brand Personality

  • 沉稳 · 精致 · 可信赖
  • 咨询顾问式的断言表达:答案先行、有立场、有依据
  • 不是高高在上的"专家",而是坐下来一起想办法的"同行者"

Aesthetic Direction

  • 风格: The Crimson Ledger(可审计的宣言)— 大字排印、细线分栏、克制的深红信号,像顶级咨询机构的账本页面
  • 参考: Bain / McKinsey 官网(答案先行的陈述式标题、数据条、结构化留白)
  • 核心视觉: 深红断言 Hero + hairline 账本分栏 + bain-card 细线卡片 + 编号数据条
  • 反参考: 过度装饰、花哨动画、多色渐变、拥挤布局;旧水墨体系(旋转渐变边框、鼠标跟随光晕)已退役

Design Principles

  1. 答案先行 — 标题直接给出结论与价值判断,不做悬案式文案;副标题与数据负责佐证
  2. 朱砂信号(Cinnabar Signal — 品牌红 #C41E3A 是唯一信号色:每页 ≥3 处触达点、面积 ≤10%;用于强调,绝不作装饰主色
  3. 账本骨架 — 层次由 hairline 分隔线、对齐网格与字号字重建立,而非颜色多样性或装饰性边框
  4. 安静底面 — 背景为白 / mist #F8FAFC 交替分区;深红区块与 ink #0A0E14 深色只留给 CTA 与收束区块
  5. 克制动效 — 动效服务于信息传达:180–280ms、--ease-ink、hover 轻 lift + shadow,不做循环装饰动画

视觉令牌

令牌权威来源为 DESIGN.md(含机器可读 YAML 令牌层与 .impeccable/design.json 侧车)。本文件不再罗列具体令牌值,仅保留产品级永久约束:

  • 品牌红 #C41E3A 每页 ≥3 触达点、面积 ≤10%
  • 字体全部使用本地文件(Geist woff2 + PingFang 回退),禁止外部字体 CDN
  • 动效时长 180280ms--transition-fast--transition-normal),缓动 cubic-bezier(0.22, 1, 0.36, 1)--ease-ink
  • 字距下限 -0.04em,不得更紧
  • 暗黑模式由 html[data-theme='dark'] 覆盖 CSS 变量驱动,组件不得写死颜色字面量
  • 楷体(--font-brand)为遗留例外,仅存量页面保留,新页面禁用