Design Map

Spacing Scale

• 基准单位 4px；组件内实际主用 4 / 8 / 12 / 16px（频次：12×100、5×55、8×54、4×49、16×45）
• 段落级跳跃：28px（30 处）→ 64px（定制段上下距）→ 72px（通用 section 上下距）
• 区块头到内容：40px（.sec-head margin-bottom）
• 移动端（≤860px）section 上下距收到 56px

Font Hierarchy

• 字族：全站唯一 ui-sans-serif（811 个元素），无第二字族
• hero h1：56px / 550 / 行高 64.96px / 字距 -0.56px
• section h2：48px / 550 / 57.6px / -0.48px
• 卡片 h3：22px / 550 / 27.5px / -0.22px
• 导语与正文：16.5px、15.5px、14.5px / 400
• 图注与元信息：13.5px、13px、12.5px、12px、11.5px / 400
• 字重仅 550（228 次）与 400（182 次）两档

Color Palette

• 纸底（主背景，53.5% 可视面积）：#F7F5F2
• 白卡/面板（22.2%）：#FFFFFF
• 深色带（追踪区，24%）：#2B2825
• 正文主色：#47423D（104 次）
• 次级文字：#736F6C（199 次）
• 标题墨色：rgba(0,0,0,0.87)
• 反白正文：rgba(255,255,255,0.75)；弱化白：#CCC9C6
• 强调荧光黄：#DFFF38（仅 3 个元素，可视面积 0%，只做标题下划线与地图命中点）

Image Ratios

• 头像：1:1（96px 原图渲染 42px）
• 界面展示：无位图——全部 SVG/HTML 原生复刻（全站位图仅 32 张头像 + 8 张群聊证据截图 + 1 个二维码）

Component Tokens

• 圆角：999px（胶囊 43 处）、16px（卡片 13 处）、20px（大面板 5 处）、8px（小件 7 处）、50%（圆点 9 处）
• 阴影：无（shadows: []）——零海拔，分组靠 1px hairline 与底色差
• 网格：两栏 435.188px + 652.812px，gap 56px；容器约 1240px 级
• 动效：只动 opacity / transform；缓动 cubic-bezier(0.2,0.6,0.2,1) 0.7s（入场）、cubic-bezier(0.34,1.56,0.64,1) 0.5s（胶囊回弹）
• 可达性：:focus-visible 存在；prefers-reduced-motion 全兜底
• 主 CTA：黑底白字胶囊；次 CTA：纸白底 + 1px 黑描边胶囊

---

Taste DNA

纸感暖白取代纯白画布

• Trigger: 整站需要一个能承载 15 个模块、超 11,000px 长滚动的底色
• Decision: 选偏暖的 #F7F5F2 纸底（53.5% 可视面积）、纯白 #FFFFFF 只留给卡片（22.2%）——而不是纯白铺满全站，也不是用深色 hero 大图制造气势
• Reason: 长滚动下纯白会让模块边界消失、眼睛失去停靠点；暖白纸底天然切分模块，并把白卡变成可读实体，读者不必靠阴影就能看出层级
• Evidence: backgroundColors #F7F5F2 53.5% vs #FFFFFF 22.2%；深色带仅 24%（单段追踪区）；shadows: []

黑即 CTA，黄色只做下划线

• Trigger: 每个模块都要放转化入口，而品牌色是亮度极高的荧光黄
• Decision: 主转化全部交给黑底胶囊；#DFFF38 全页只出现在 3 个元素、可视面积 0%，只做标题词下划线与地图命中点——而不是把荧光黄做成按钮底、进度条或图标色
• Reason: 荧光黄大面积会因亮度压倒文字、毁掉可读性；作为黑色 CTA 的稀有强调色，它能精确标记「这一处是重点」，让读者在任何一屏都能一眼找到唯一的黑入口
• Evidence: #DFFF38 count=3 / areaPct=0；hero 高亮仅覆盖「询盘」二字；主 CTA 均为黑底白字胶囊

零海拔 + 1px 发丝线分组

• Trigger: 浅色长页里需要区分几十个模块与卡片
• Decision: 全程不用 box-shadow（实测为空数组），用 1px hairline 与底色差切分——而不是卡片加投影、区块加漂浮层
• Reason: 投影在小屏与低质量屏上会变脏，也让「哪里可点」变模糊；发丝线＋底色差把层级交给排版与留白，任意缩放、任意定格帧都保持干净
• Evidence: effects.shadows = []；圆角 999/16/20px 承担形态区分；深色追踪带与纸底硬接无过渡

单一字族两档字重

• Trigger: 同一套页面要承载营销标题、数据表、长文案与图注
• Decision: 只用一个字族、只留 550/400 两个字重，层级由字号（56/48/22px）与负字距（-0.56/-0.48/-0.22px）建立——而不是标题配展示字体、正文配衬线，或多档字重细分层级
• Reason: 多字族多字重在中文混排下极易失去节奏且加载翻倍；单族双字重让中文与数字共用一套骨架，读者感知到的差异全部来自大小与间距，而不是字体互相打架
• Evidence: uniqueFamilies: ui-sans-serif count=811；weightDistribution 550×228 / 400×182（无第三档）；字距随字号等比收紧

复现方式：NODE_PATH=$HOME/.local/lib/pw/node_modules node ~/.dsh/skills/taste/capture.cjs http://localhost:8098/ docs/ui-evidence/laifaxin-home，产物 laifaxin-home-{viewport,mid,footer}.jpeg + laifaxin-home-dom.json。