zhangxiang
611b6b87fe
复评（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
242 lines
14 KiB
Markdown
242 lines
14 KiB
Markdown
---
|
||
name: Novalon Website
|
||
description: 数字化转型咨询公司的可审计宣言 — Bain 式深红陈述、数据先行、零编造信任语法
|
||
colors:
|
||
cinnabar: "#C41E3A"
|
||
cinnabar-deep: "#A01830"
|
||
cinnabar-ember: "#E04A68"
|
||
cinnabar-blush: "#FEF2F4"
|
||
crimson-veil: "#8B1530"
|
||
cinnabar-light: "#F87171"
|
||
ink: "#0A0E14"
|
||
ink-rise: "#0F1419"
|
||
ink-pillar: "#151B23"
|
||
paper: "#FFFFFF"
|
||
mist: "#F8FAFC"
|
||
slate-cool: "#F1F5F9"
|
||
graphite: "#334155"
|
||
graphite-soft: "#475569"
|
||
haze: "#64748B"
|
||
hairline: "#EEF2F7"
|
||
rule: "#CBD5E1"
|
||
typography:
|
||
display:
|
||
fontFamily: "Geist Sans, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif"
|
||
fontSize: "clamp(2.25rem, 5vw + 1rem, 6rem)"
|
||
fontWeight: 900
|
||
lineHeight: 0.92
|
||
letterSpacing: "-0.03em"
|
||
headline:
|
||
fontFamily: "Geist Sans, PingFang SC, Microsoft YaHei, sans-serif"
|
||
fontSize: "clamp(1.875rem, 2vw + 1rem, 3.75rem)"
|
||
fontWeight: 800
|
||
lineHeight: 0.95
|
||
letterSpacing: "-0.02em"
|
||
title:
|
||
fontFamily: "Geist Sans, PingFang SC, Microsoft YaHei, sans-serif"
|
||
fontSize: "1.25rem–1.5rem"
|
||
fontWeight: 700
|
||
lineHeight: 1.35
|
||
body:
|
||
fontFamily: "Geist Sans, PingFang SC, Microsoft YaHei, sans-serif"
|
||
fontSize: "1rem"
|
||
fontWeight: 400
|
||
lineHeight: 1.65
|
||
label:
|
||
fontFamily: "Geist Sans, PingFang SC, Microsoft YaHei, sans-serif"
|
||
fontSize: "0.8125rem"
|
||
fontWeight: 500
|
||
lineHeight: 1.4
|
||
letterSpacing: "0.08em–0.15em"
|
||
mono:
|
||
fontFamily: "Geist Mono, SFMono-Regular, Menlo, monospace"
|
||
fontSize: "0.75rem"
|
||
fontWeight: 400
|
||
letterSpacing: "0.2em"
|
||
rounded:
|
||
xs: "3px"
|
||
sm: "6px"
|
||
md: "8px"
|
||
lg: "12px"
|
||
xl: "18px"
|
||
2xl: "24px"
|
||
full: "9999px"
|
||
spacing:
|
||
xs: "4px"
|
||
sm: "8px"
|
||
md: "16px"
|
||
lg: "24px"
|
||
xl: "32px"
|
||
2xl: "48px"
|
||
3xl: "64px"
|
||
4xl: "96px"
|
||
5xl: "128px"
|
||
6xl: "192px"
|
||
components:
|
||
cta-primary:
|
||
backgroundColor: "{colors.cinnabar}"
|
||
textColor: "{colors.paper}"
|
||
rounded: "{rounded.full}"
|
||
padding: "16px 40px"
|
||
cta-primary-hover:
|
||
backgroundColor: "{colors.cinnabar-deep}"
|
||
cta-secondary:
|
||
textColor: "{colors.ink}"
|
||
rounded: "{rounded.full}"
|
||
padding: "16px 40px"
|
||
cta-dark:
|
||
textColor: "#F8FAFC"
|
||
rounded: "{rounded.full}"
|
||
padding: "16px 40px"
|
||
card-bain:
|
||
backgroundColor: "{colors.paper}"
|
||
rounded: "{rounded.lg}"
|
||
padding: "24px"
|
||
input-field:
|
||
backgroundColor: "{colors.paper}"
|
||
rounded: "{rounded.sm}"
|
||
size: "height 44px"
|
||
badge-pill:
|
||
backgroundColor: "{colors.cinnabar-blush}"
|
||
textColor: "{colors.cinnabar}"
|
||
rounded: "{rounded.full}"
|
||
---
|
||
|
||
# Design System: Novalon Website
|
||
|
||
## Overview
|
||
|
||
**Creative North Star: "The Crimson Ledger · 可审计的宣言"**
|
||
|
||
Novalon 的界面是一份可以逐条审计的经营宣言。它模仿顶级咨询公司（Bain 系）的陈述方式：先给答案，再给论证 —— 巨型黑体断言占据首屏，三条实测数字紧随其后，朱砂红只落在结论、行动与强调上。整个系统的情绪是「沉稳、精致、可信赖」：不是高高在上的专家，而是坐下来一起想办法的同行者。
|
||
|
||
第二支柱是「诚实语法」：不虚构案例、不伪造数据。未发布的内容明说「内测中 / 首批共创 / 敬请期待」，每个数字带来源角注。这份克制本身被当作差异化资产，视觉系统配合它：宁可有大面积留白与「暂未发布」，不放一张假图、一句空话。
|
||
|
||
深色模式不是附属品而是一等公民：主题由 `html[data-theme]` 驱动，仅覆盖 CSS 变量，每个文字令牌附带实测对比度注释（全部达 WCAG AA），品牌红走「底色 / 文字」双通道以保证反色后仍达标。
|
||
|
||
**Key Characteristics:**
|
||
- 答案先行的宣言 Hero，按页型分三档音量：首页全幅宣言 / hub 紧凑引言 / 信任页降档宣言
|
||
- 朱砂红是「结论电压」：每页 ≥3 处触达点、面积 ≤10%
|
||
- 柔和阴影分层替代硬边框分界；细发线（1px）只做区域呼吸线
|
||
- 明暗双主题逐令牌审校，对比度实测值写进代码注释
|
||
- 动效 180–280ms、ease-ink 曲线、reduced-motion 全链路守卫
|
||
|
||
## Colors
|
||
|
||
中性色是纸与墨的冷调 slate 系，全部色彩张力由一个声音承担 —— 朱砂。
|
||
|
||
### Primary
|
||
- **Cinnabar Signal 朱砂信号** (`{colors.cinnabar}` #C41E3A): 品牌红。CTA 填充、标题关键词下划线、active 导航下划线、数据数字、卡片顶部 2px 红条、hover 焦点环。
|
||
- **Cinnabar Deep** (`{colors.cinnabar-deep}` #A01830): 品牌红 hover 态。
|
||
- **Cinnabar Ember** (`{colors.cinnabar-ember}` #E04A68): 亮部变体，用于装饰性强调。
|
||
- **Cinnabar Blush** (`{colors.cinnabar-blush}` #FEF2F4): 红底最浅层，badge 背景、错误提示底。
|
||
- **Crimson Veil** (`{colors.crimson-veil}` #8B1530): 深红全幅区块背景（Bain 式引述区/CTA 区），其上文字用 #F8FAFC。
|
||
|
||
### Neutral
|
||
- **Ink** (`{colors.ink}` #0A0E14): 近黑的冷墨。主文字、深色页底、描边按钮文字。暗黑模式下语义整体反转（ink 变浅、paper 变深），但「深色区块」类令牌（`--color-dark-*`、overlay、footer）显式引用、不随反色。
|
||
- **Ink Rise / Ink Pillar** (`{colors.ink-rise}` / `{colors.ink-pillar}`): 暗黑模式的两级深底。
|
||
- **Paper** (`{colors.paper}` #FFFFFF): 主底与卡片底。
|
||
- **Mist** (`{colors.mist}` #F8FAFC): 交替 section 底、次级面。
|
||
- **Slate Cool** (`{colors.slate-cool}` #F1F5F9): 三级底、hover 底。
|
||
- **Graphite** (`{colors.graphite}` #334155): 正文次级文字（AA 达标）。
|
||
- **Haze** (`{colors.haze}` #64748B): 辅助文字与占位符下限（4.76:1）；更浅的 `--color-text-hint` #7C8CA5 仅允许出现在 ≥24px 装饰大字。
|
||
- **Hairline** (`{colors.hairline}` #EEF2F7): 卡片描边、gap-px 网格线 —— 刻意淡到近乎不可见，分界交给阴影。
|
||
- **Rule** (`{colors.rule}` #CBD5E1): 可见分隔线、次级边框。
|
||
|
||
### Functional
|
||
- success/warning/error/info 各带「本体 + 文字专用」双令牌（如 `--color-success` 仅 3.30:1，正文必须用 `--color-success-text` #15803D）。错误色直接复用品牌红。
|
||
|
||
### 编码辅色（非装饰）
|
||
蓝/青/琥珀/紫/青柠/玫红/靛 7 个 accent 仅用于服务与行业编码（图标底、solution 卡 accent），一律 12% 软底变体成对出现。**它们永远不组合成渐变，也不承担全局氛围。**
|
||
|
||
### Named Rules
|
||
**The One Voice Rule.** 一屏之内，色彩主张只允许朱砂一个声音发言；accent 编码色是分类标签，不是情绪表达。
|
||
**The Two-Channel Red Rule.** 底色用 `--color-brand`（暗黑不翻），文字用 `--color-brand-ink`（暗黑翻至 #F87171）。合并成一条是 bug 的源头——红底白字按钮与深底红字要同时达标。
|
||
**The Ledger Budget Rule.** 品牌红触达每页 ≥3 处、面积 ≤10%。红色稀缺才值钱。
|
||
|
||
## Typography
|
||
|
||
**Display/Body Font:** Geist Sans（本地 woff2，next/font），中文逐字符回退 PingFang SC / 微软雅黑
|
||
**Label/Mono Font:** Geist Mono（编号、digest、eyebrow 英文装饰位）
|
||
**Legacy Exception:** `--font-brand` 楷体（STKaiti/KaiTi）仅存于遗留页 `/about/brand`，**新页面禁用**。
|
||
|
||
**Character:** 无衬线黑体的极端粗细跨度（400 正文 ↔ 900 断言）就是层级本身；中文靠字族回退保持现代感，不用书法制造「文化氛围」。
|
||
|
||
### Hierarchy
|
||
- **Display** (900, 3rem→6rem 经 `--font-size-7xl` 变量随断点放大, leading 0.92–0.95, tracking -0.03em): 首屏宣言本体，第二行常染品牌红或加红下划线。注意：本项目 fontSize 在 `theme.extend` 中自定义到 7xl(≥1024px 时 6rem)，Tailwind 默认 `text-8xl` 与它同值（6rem）——历史遗留的 `xl:text-8xl` 是无效层级，子页 Hero 已全部移除。
|
||
- **Headline** (800/900, 1.875rem→3.75rem, leading ~0.95): Section 标题。
|
||
- **Title** (600–700, 1.125–1.5rem): 卡片标题。
|
||
- **Body** (400, 1rem/1.0625rem, leading 1.65–1.85): 正文；`text-text-secondary` 为默认灰度。
|
||
- **Label** (500, 0.8125rem, tracking 0.08–0.15em, 可 uppercase): eyebrow、badge、导航眉标。
|
||
- **Mono Caption** (0.75rem, tracking 0.2em uppercase): 编号、digest、技术注记。
|
||
|
||
### Named Rules
|
||
**The Answer-First Rule.** 标题写结论断言，不写问句或口号铺垫；紧随其后的数字条是证据。
|
||
**The -0.04em Floor.** 追踪最紧 -0.04em（现用最紧 -0.03em）；display 不超过 6rem。
|
||
**The 10px Floor.** 10–11px 大写 tracking 微标签（eyebrow、digest、case 分类签）是 Bain 账本风的有意下限，全站保留、不上坡；绝对像素字号不得 <10px，由 `src/lib/constants/font-floor.test.ts` 机械守卫禁止再引入（rem 因 18px 根字号歧义不纳入）。
|
||
|
||
## Layout
|
||
|
||
12 列网格心智（`--grid-columns: 12`），容器上限 1360px（`--container-max`），水平内边距 16→40px 随断点。Mobile First，Tailwind 默认断点（sm 640 / md 768 / lg 1024 / xl 1280）。
|
||
|
||
- 纵向节奏：section 默认 `--section-padding-y` = 96px（`py-20 md:py-28` 一族），呼吸区 `section-breathing` 128→192px，数据密集区 `section-compact` 48→64px。
|
||
- Bain 式不对称栅格是主力构图：`asymmetric-wide-narrow` 5fr/3fr、`asymmetric-narrow-wide` 3fr/5fr、`asymmetric-three` 2fr/1fr/1fr（lg 起生效）。
|
||
- 卡片密集区用 gap-px + 发线底色（`bg-border-primary`）的无缝网格，而非卡片间留大缝。
|
||
- Section 背景在 Paper ↔ Mist 间交替，上下以 1px 发线收边；深色/深红区块作为全幅打断。
|
||
- Hero 四档音量（2026-09-19 layout+distill 定型，critique 复评补第四档）：**首页** `min-h-[90vh]`+粒子场，全站唯一全幅宣言档；**hub 目录页**（products/solutions/services）与**叶子详情**（service-detail）为紧凑引言：无 min-h、`py-16 sm:py-20 lg:py-28`、标题封顶 `lg:text-6xl xl:text-7xl`，其下重复的 Hero 数据条已删；**信任页**（about/team）`min-h-[60vh]`、`lg:py-40`、标题封顶 `lg:text-7xl`，保留宣言气场与 CMS 驱动数据条；**独立内容页**（cases `70vh` / news `75vh` / methodology `60vh` / product-detail·solution-detail `80vh`）允许中等音量引言，但**转化页不得用**——/contact 已改紧凑档（无 min-h、`py-16 sm:py-20 lg:py-28`，表单回到首屏视野）。/about/brand 为遗产豁免（90vh，随页面退役一并处理）。
|
||
|
||
## Elevation & Depth
|
||
|
||
分层靠「几乎看不见的边框 + 真实柔和的阴影」完成：`--color-border-primary` 被刻意软化到 #EEF2F7，卡片默认 `--shadow-sm`/card-shadow 贴地，hover 升至 `--card-shadow-hover` 并 translateY(-4px)。阴影全部从墨色 rgba(10,14,20,α) 取用，不用纯黑。
|
||
|
||
### Shadow Vocabulary
|
||
- **xs–xl 层级带** (`0 1px 1px α0.03` → `0 24px 56px α0.1`): 微边界 → 卡片 → 下拉 → 模态 → 全屏浮层。
|
||
- **Brand Halo** (`0 6px 24px rgba(196,30,58,0.22)`，hover 加深至 0.32): 仅 CTA/品牌强调元素的有色阴影。
|
||
- **Inset / Glow** (`inset 0 2px 4px`; `0 0 40px rgba(196,30,58,0.15)`): 凹陷输入与慎用光晕。
|
||
|
||
### Named Rules
|
||
**The Quiet Border Rule.** 边框只负责「有没有」，深度全部交给阴影；禁止用重边框线做层级。
|
||
|
||
## Shapes
|
||
|
||
柔边体系：徽章/焦点元素 3px、按钮/输入 6px、卡片/弹窗 8px、大卡 12px（`--card-border-radius`）、英雄卡 18px、全屏弹窗 24px；CTA 与 badge 一律全圆角 pill。特色几何：区块顶/底 0.5–2px 朱砂条带、`corner-frame` L 形角框（16px 红色直角）、`clip-slant` 斜切（Accenture 遗产，仅装饰带使用）。卡片在 1px 淡边框与阴影之间只声明一次 elevation（边框为 hairline 级）。
|
||
|
||
## Components
|
||
|
||
### Buttons（CTAButton，全站行动召唤）
|
||
- **Shape:** 全圆角 pill（rounded-full），内置 ArrowRight 箭头签名，hover 位移 translate-x。
|
||
- **Primary:** 朱砂填充 + 白字（16px 40px），hover 转 Cinnabar Deep；**Secondary:** 墨色 20% 描边透明底；**Dark:** 深色区块专用浅描边；**Inline:** 透明小箭头文字链，用于卡内「了解更多」。
|
||
- 交互 Button（ui/button.tsx）另带 6 档 size 与 ripple，触控下限 44×44px。
|
||
|
||
### Cards / Containers（bain-card）
|
||
- **Corner Style:** 12px 柔边；**Background:** Paper；**Border:** 1px hairline；**Shadow:** card-shadow → hover 抬升 4px + card-shadow-hover；内边距 24px（大 40px）。
|
||
|
||
### Inputs / Fields
|
||
- Paper 底、hairline 描边、6px 圆角、44px 高；focus 转 `border-brand/50`；标签常驻（placeholder 仅作示例）；错误文案内联于字段下。
|
||
|
||
### Navigation
|
||
- 白色 sticky 头部，active 项朱砂下划线；桌面 hover 展开 mega dropdown（分组 + 描述 + 状态 badge）；移动端汉堡 + 底部 tab bar 双轨（在办：收敛为一套）；skip-link 常驻。
|
||
|
||
### 数据条（Stats Strip）
|
||
- 3 项为宜：数字用 display 级 font-black + `tabular-nums` + 品牌红，label 用小灰字。这是「答案先行」的结构件，但仅在数据不被本页其它区域重复时放置（首页成果带、信任页 Hero）；hub 页 Hero 的数据条因与下方网格逐字重复已移除。
|
||
|
||
### Badge / 状态签
|
||
- Pill，12% 软底或 blush 底 + 品牌/编码色文字 + 20% 同色描边；「内测中 / 敬请期待」等诚实状态以此呈现。
|
||
|
||
## Do's and Don'ts
|
||
|
||
### Do:
|
||
- **Do** 让每个 section 以可验证的陈述开场，数据、来源角注跟上（The Answer-First Rule）。
|
||
- **Do** 新文字令牌落地前先在代码注释写实测对比度比值（沿现制度：如 5.74:1、AA 判定）。
|
||
- **Do** 用 `text-brand-ink` 写红色文字、`bg-brand` 做红色填充，永不混用（双通道）。
|
||
- **Do** 入场动效统一 ease-ink `cubic-bezier(0.22,1,0.36,1)`、180–280ms，stagger 用 `--stagger-*` 令牌；reduced-motion 时退为静态。
|
||
- **Do** 未发布内容使用 `ContentUnavailableState`（带导航出口），空/错/成功态永远给出下一步。
|
||
|
||
### Don't:
|
||
- **Don't** 用多色渐变、玻璃拟态或彩色光晕制造「科技感」；科技感到数字和排版为止。
|
||
- **Don't** 在新页面使用楷体 `--font-brand`（例外遗产，仅 /about/brand）。
|
||
- **Don't** 把内容入场做成 spring 回弹（`--ease-spring*` 死令牌已于 2026-09-19 polish 批次删除；原则保留，防止回归）。
|
||
- **Don't** 用 `--color-text-hint` (#7C8CA5) 写正文/占位符（仅 ≥24px 装饰大字）。
|
||
- **Don't** 虚构案例、客户 logo、产品截图；宁可用 badge 承认「内测中」。
|
||
- **Don't** 让 CTA 文案自由发挥：预约动作全站统一「预约咨询」。
|