@lark-apaas/coding-steering 0.1.70 → 0.1.72

package/steering/nestjs-react-fullstack/skills/design-guide/references/organic-minimalism.md

@@ -1,253 +0,0 @@
----
-version: alpha
-name: organic-minimalism
-name_zh: 有机极简
-description: 有机极简主义界面风——大面积留白配柔和自然绿调,超大圆角卡片(40-48px)+极简线性图标+无装饰主义排版;单一强调色石灰绿严格聚焦于激活态/CTA/关键结果,全局仅浅阴影(shadow-sm)。自然、轻盈、精确、值得信赖。
-colors:
-  background: "#FFFFFF"
-  card: "#F6F7F2"
-  header: "#1A1A1A"
-  foreground: "#1A1A1A"
-  muted-foreground: "#9CA3AF"
-  primary: "#D8EC9D"
-  primary-foreground: "#1A1A1A"
-  primary-strong: "#B3D166"
-  border: "rgba(243, 244, 246, 0.5)"
-  accent: "#F3F4F6"
-  primary-soft: "rgba(179, 209, 102, 0.3)"
-  select-target-hover: "#1F2937"
-  select-target-bg: "#111827"
-  selection-highlight: "#D1FAE5"
-typography:
-  base:
-    fontFamily: '"Noto Sans SC", sans-serif'
-    usage: 全局唯一字体族,标题/正文/数值统一继承(无字体切换);数值以 font-bold 呈现区分,非独立数字字体
-  hero-title:
-    fontSize: 48px
-    fontWeight: 700
-    lineHeight: leading-tight
-    usage: 页面主标题(Tailwind text-5xl font-bold leading-tight)
-  section-title:
-    fontSize: 36px
-    fontWeight: 700
-    usage: 区块标题、转换器数值显示(Tailwind text-4xl font-bold)
-  card-title:
-    fontSize: 24px
-    fontWeight: 700
-    usage: 网格卡片标题(Tailwind text-2xl font-bold)
-  body:
-    fontSize: 18px
-    fontWeight: 400
-    lineHeight: leading-relaxed
-    usage: 描述段落(Tailwind text-lg font-normal leading-relaxed)
-  small-label:
-    fontSize: 14px
-    fontWeight: 500
-    usage: 按钮文字、卡片副标题(Tailwind text-sm font-medium)
-  breadcrumb:
-    fontSize: 12px
-    fontWeight: 500
-    usage: 面包屑导航、底部版权(Tailwind text-[12px] font-medium)
-  micro-label:
-    fontSize: 11px
-    fontWeight: 700
-    letterSpacing: tracking-widest
-    upper: true
-    usage: 表单标签(uppercase+tracking-widest)、页脚关键词(Tailwind text-[11px] font-bold uppercase tracking-widest)
-  pill-select:
-    fontSize: 12px
-    fontWeight: 700
-    usage: 下拉选择器文字(Tailwind text-xs font-bold)
-rounded:
-  hero: 48px
-  panel: 40px
-  icon: 16px
-  full: 9999px
-spacing:
-  page-top: 48px
-  hero-margin-top: 64px
-  hero-padding: "48px~64px"
-  grid-margin-top: 96px
-  grid-margin-bottom: 128px
-  card-padding: 40px
-  panel-padding: "32px~48px"
-  grid-gap: 24px
-  form-group-gap: 48px
-  footer-padding: 48px
-components:
-  cta-button:
-    container: flex items-center gap-3 group px-1
-    text: "font-bold {colors.foreground}"
-    circle: "w-10 h-10 rounded-full {colors.primary} shadow-sm"
-    icon: "w-5 h-5 {colors.foreground}"
-    hover: group-hover:translate-x-1
-  learn-more-button:
-    container: flex items-center gap-2 group
-    text: "text-sm font-medium {colors.foreground}"
-    circle: "w-8 h-8 rounded-full {colors.accent}"
-    icon: "w-4 h-4 {colors.foreground}"
-    hover: group-hover:rotate-45
-  swap-button:
-    container: "w-12 h-12 rounded-full {colors.background} border border-gray-100 shadow-sm"
-    icon: "w-4 h-4 {colors.muted-foreground}"
-    hover: hover:bg-gray-50 hover:scale-110
-  category-card:
-    radius: "{rounded.panel}"
-    padding: "{spacing.card-padding}"
-    layout: "h-[320px] flex flex-col justify-between text-left"
-    default: "bg={colors.card},hover:bg-gray-100/50"
-    active: "bg={colors.primary}"
-    icon-container:
-      default: "w-12 h-12 {rounded.icon} bg-transparent {colors.foreground}"
-      active: "w-12 h-12 {rounded.icon} bg-white {colors.foreground}"
-      hover: group-hover:scale-110
-    title: "见 {typography.card-title}"
-    subtitle: "{colors.muted-foreground} text-sm mt-1"
-    arrow-default: "w-10 h-10 rounded-full bg-white shadow-sm,icon={colors.muted-foreground}"
-    arrow-active: "w-10 h-10 rounded-full bg-white,icon={colors.foreground}"
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
-  number-input:
-    style: "text-4xl font-bold {colors.foreground} bg-transparent focus:outline-none w-full"
-    placeholder: "0"
-    validation: "仅允许数字和小数点 /^-?\\d*\\.?\\d*$/"
-    appearance: "-webkit-appearance: none(隐藏浏览器数字控件)"
-  unit-select:
-    source: "bg={colors.primary-soft},文字色 text-lime-800(源未提供 hex,见 gaps),text-xs font-bold px-4 py-2 rounded-full,hover:bg-lime-primary/50"
-    target: "bg={colors.select-target-bg},color=white,text-xs font-bold px-4 py-2 rounded-full,hover:bg={colors.select-target-hover}"
-  result-display:
-    style: "text-4xl font-bold {colors.primary-strong} truncate w-full"
-anchors:
-  - id: huge-rounded-cards
-    type: token
-    desc: 全站卡片/面板圆角均为超大有机圆角(见 rounded.hero 与 rounded.panel),取代常规小圆角体系
-  - id: lime-accent-single
-    type: token
-    desc: 唯一强调色石灰绿(primary/primary-strong),仅用于激活态、CTA、数值结果,不做大面积铺色
-  - id: category-card-active-state
-    type: component
-    desc: 分类网格卡片默认态暖灰底,激活态整卡切换为强调色底+图标容器反白,是全站唯一的状态切换视觉焦点
-  - id: minimal-line-icon
-    type: pattern
-    desc: 全站图标为极简线性图标,无填充无装饰边框,仅描边呈现
-  - id: whitespace-heavy-layout
-    type: pattern
-    desc: 区块间距远大于常规密度,留白本身是主要视觉语言而非装饰元素
-  - id: soft-shadow-only
-    type: token
-    desc: 全局阴影统一为极轻的 shadow-sm 一档,无重投影、无模糊分级体系
-  - id: no-decoration-typography
-    type: pattern
-    desc: 全站单一无衬线字体族,无手写体/衬线体混排,标题与正文靠字重字号区分而非装饰
-gaps:
-  - 下拉选择器(来源单位)文字色 class 为 text-lime-800,源未提供对应 hex 值
-  - 源文件未提供字体 @import 语句(仅注明字体族名 'Noto Sans SC, sans-serif'),按规范补充标准 Google Fonts 引入,权重覆盖源文件实际使用的 400/500/700(补充项,请确认)
-  - 无暗色模式定义
-  - 无图表/数据看板组件规范(源为单位转换器工具页,不含图表场景)
-  - 无表单校验错误态样式定义(仅数字输入框的格式校验规则,无错误提示视觉)
-  - 未指定具体图标库,仅描述为"极简线性图标"(源无实现细节)
-exceptions:
-  - 互换按钮/圆形图标按钮/下拉选择器 Pill 使用 rounded.full(全圆),不遵循卡片类超大圆角(hero/panel)体系,圆形与卡片是两套独立圆角逻辑
-  - 页脚边框(border-t border-gray-100)使用不透明 gray-100,而非 colors.border 的半透明 rgba 值,是全局唯一使用不透明边框色的位置
-  - 下拉选择器(来源单位)文字色 text-lime-800 源未给出 hex,未纳入 colors 色板(见 gaps)
----
-
-## Overview
-
-有机极简主义界面风:超大留白 + 单一石灰绿强调色 + 极简线性图标构成自然、轻盈、精确、可信任的基调。整体节奏依赖宽松间距营造呼吸感，而非依赖装饰元素；模块类型和页面结构由任务决定。
-
-## Colors
-
-| 角色 | 值 | 用法 |
-|-----|-----|-----|
-| background | {colors.background} | 页面主背景 |
-| card | {colors.card} | 卡片/区块底色,带微黄暖灰调(转换器面板/网格卡片默认态) |
-| header | {colors.header} | 主标题文字 |
-| foreground | {colors.foreground} | 正文主色、按钮文字、图标默认色 |
-| muted-foreground | {colors.muted-foreground} | 辅助说明、副标题、标签文字、非激活箭头图标 |
-| primary | {colors.primary} | 石灰绿背景 —— CTA 圆形按钮底色、分类卡片激活态底色 |
-| primary-foreground | {colors.primary-foreground} | 压在石灰绿底上的文字/图标色(CTA 圆形按钮图标、激活态卡片文字,同 foreground) |
-| primary-strong | {colors.primary-strong} | 石灰绿文字 —— 转换结果数值 |
-| border | {colors.border} | 转换器面板极淡分割线 |
-| accent | {colors.accent} | 悬停态底色、"了解更多"按钮圆形底 |
-| primary-soft | {colors.primary-soft} | 下拉选择器(来源单位)背景,石灰绿低透明度 |
-| select-target-hover | {colors.select-target-hover} | 下拉选择器(目标单位)悬停色 |
-| select-target-bg | {colors.select-target-bg} | 下拉选择器(目标单位)默认背景,深色 |
-| selection-highlight | {colors.selection-highlight} | 文本选中高亮(selection:bg) |
-
-## Typography
-
-全局样式首行原样写入(HARD REQUIREMENT,禁止替换;补充项——源文件仅注明字体族名 "Noto Sans SC, sans-serif",未提供 @import 语句,此处按 Google Fonts 标准补充,权重覆盖源文件实际使用的 400/500/700,请确认):
-
-```css
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
-```
-
-全站单一字体族(见 frontmatter typography.base),无字体切换;数值继承同一字体,仅以 font-bold 呈现区分,非独立数字字体。
-
-| 层级 | 大小 | 字重 | 行高 | 用途 |
-|-----|-----|-----|-----|-----|
-| Hero Title | 48px(text-5xl) | 700(font-bold) | leading-tight | 页面主标题 |
-| Section Title | 36px(text-4xl) | 700(font-bold) | 默认 | 区块标题、转换器数值显示 |
-| Card Title | 24px(text-2xl) | 700(font-bold) | 默认 | 网格卡片标题 |
-| Body | 18px(text-lg) | 400(font-normal) | leading-relaxed | 描述段落 |
-| Small Label | 14px(text-sm) | 500(font-medium) | 默认 | 按钮文字、卡片副标题 |
-| Breadcrumb | 12px(text-[12px]) | 500(font-medium) | 默认 | 面包屑导航、底部版权 |
-| Micro Label | 11px(text-[11px]) | 700(font-bold) | 默认 | 表单标签(uppercase+tracking-widest)、页脚关键词 |
-| Pill / Select | 12px(text-xs) | 700(font-bold) | 默认 | 下拉选择器文字 |
-
-## Layout
-
-- 整体容器可参考 max-w-7xl(1280px) mx-auto px-6，并按内容密度调整。
-- 用超大圆角表面承载主任务或重要内容；卡片数量、列数、主次比例和区块顺序不作预设。
-- 间距系统:见 frontmatter spacing(page-top / hero-margin-top / hero-padding / grid-margin-top / grid-margin-bottom / card-padding / panel-padding / grid-gap / form-group-gap / footer-padding)。
-- 响应式断点按可读性减少列数和内边距，窄屏将相关内容自然重排，不固定为 2/5+3/5 或三列。
-
-## Elevation & Depth
-
-全局保持极轻阴影(仅 shadow-sm),强化通透感,无重阴影/无模糊层级体系:
-
-| 元素 | 阴影值 |
-|-----|-----|
-| 转换器白色面板 | shadow-sm |
-| CTA 圆形按钮 | shadow-sm |
-| 非激活卡片箭头按钮 | shadow-sm |
-| 互换按钮 | shadow-sm |
-
-无 hover 阴影升级,深度感完全依赖留白与超大圆角,不依赖阴影分级。
-
-## Shapes
-
-- 圆角体系:Hero 卡片 {rounded.hero},转换器面板/网格卡片 {rounded.panel},图标容器 {rounded.icon},圆形按钮/Pill {rounded.full}。全站无常规小圆角(4-8px)卡片,圆角只有"超大"与"全圆"两档。
-- 边框:转换器面板 border {colors.border};输入/输出下划线 border-b border-gray-100;互换按钮 border border-gray-100;页脚顶部 border-t border-gray-100。全局边框极淡(gray-100 或 border token 半透明),不用深色描边。
-- 图标:极简线性描边图标,无填充/无装饰边框(源未指定具体图标库,见 gaps)。
-- 动效:卡片切换 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);悬停微交互 scale-110 / translate-x-1 / rotate-45,幅度小、无弹跳。
-
-## Components
-
-详见 frontmatter components(cta-button / learn-more-button / swap-button / category-card / number-input / unit-select / result-display)。补充说明:
-
-- CTA 按钮悬停 group-hover:translate-x-1,圆形箭头底色即 primary。
-- "了解更多"按钮悬停 group-hover:rotate-45,圆形底色为中性灰 accent,与 CTA 的强调色圆形形成主/次按钮区分。
-- Category Card 默认态与激活态是本风格唯一的强调色触发点:默认态用 card 暖灰,激活态整卡切换为 primary,图标容器同步由透明切换为白底。
-- 下拉选择器(来源单位)用 primary-soft(石灰绿 30% 透明度)底,与(目标单位)深色 select-target-bg 底形成"来源=浅绿 / 目标=深灰"的语义区分。
-
-## Do's and Don'ts
-
-- 强调色(primary / primary-strong)只用于激活态、CTA、数值结果,不做大面积铺色。
-- 卡片/面板圆角保持超大(40px 以上),避免与常规小圆角混用打破"有机"气质。
-- 阴影统一用 shadow-sm 级别,不引入更重的投影分级。
-- 页面留白节奏(mt-24 / mb-32 等大间距)是气质核心,不为塞入更多内容压缩间距。
-
-## Hard Rules
-
-- 全局唯一强调色为石灰绿(primary / primary-strong),不得引入第二种强调色。
-- 卡片类圆角(Hero / 面板 / 网格卡片)必须使用 rounded.hero 或 rounded.panel(40px 以上),不得使用常规小圆角。
-- 阴影统一 shadow-sm,禁止使用更重的投影或模糊阴影层级。
-- 主字体族全局统一为 Noto Sans SC,不得混入手写体/衬线体等其他字体气质。
-- @import 字体加载行必须原样保留在全局样式首行,禁止替换或省略(HARD REQUIREMENT)。
-
-## Exceptions
-
-- 互换按钮/圆形图标按钮/下拉选择器 Pill 使用 rounded.full(全圆),不遵循卡片类超大圆角(hero / panel)体系,圆形与卡片是两套独立圆角逻辑。
-- 页脚边框(border-t border-gray-100)使用不透明 gray-100,而非 colors.border 的半透明 rgba 值,是全局唯一使用不透明边框色的位置。
-- 下拉选择器(来源单位)文字色 text-lime-800 源未给出 hex,未纳入 colors 色板(见 gaps)。

package/steering/nestjs-react-fullstack/skills/design-guide/references/pm-spec.md

@@ -1,234 +0,0 @@
----
-version: alpha
-name: pm-spec
-name_zh: 规格蓝本
-description: >-
-  单页产品规格 / PRD 风格：冷灰蓝纸面（background #f5f7fa / card 白）承载浓密文档流，
-  靛紫强调色 #4a36e3 仅点缀状态胶囊、引用块、指标目标与里程碑徽章；正文用 system-serif
-  Charter 起标题、系统无衬线走正文、等宽体承担全部 uppercase 微标签（面包屑 / 表头 /
-  徽章 / 页脚）。无阴影，层级只靠 1px 细线 (#e2e6ee) + 10px 圆角卡片。信息块以 grid
-  可在适合长文档精读的场景中使用纸面内容流与局部分栏。它定义文档气质，不强制所有主题采用同一种页面骨架。
-colors:
-  background: "#f5f7fa"
-  card: "#ffffff"
-  foreground: "#0e1322"
-  muted-foreground: "#5a647a"
-  border: "#e2e6ee"
-  line-strong: "#c8cfdb"
-  primary: "#4a36e3"
-  primary-foreground: "#ffffff"
-  accent: "#ece8ff"
-  warn: "#b8741a"
-  positive: "#1f8a5a"
-  th-bg: "#f8fafd"
-  primary-grad-end: "#8473ff"
-typography:
-  h1:
-    fontFamily: "'Charter', Georgia, 'PingFang SC', 'Noto Serif SC', serif"
-    fontSize: "42px"
-    lineHeight: "1.06"
-    letterSpacing: "-0.015em"
-    fontWeight: "700"
-  h2:
-    fontFamily: "'Charter', Georgia, 'PingFang SC', 'Noto Serif SC', serif"
-    fontSize: "24px"
-    letterSpacing: "-0.005em"
-  h2-small:
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, 'PingFang SC', sans-serif"
-    fontSize: "13px"
-    fontWeight: "400"
-    color: "{colors.muted-foreground}"
-  body:
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, 'PingFang SC', sans-serif"
-    fontSize: "14.5px"
-    lineHeight: "1.6"
-  summary:
-    fontSize: "17px"
-    color: "{colors.muted-foreground}"
-  quote:
-    fontFamily: "'Charter', Georgia, 'PingFang SC', 'Noto Serif SC', serif"
-    fontSize: "17px"
-    lineHeight: "1.5"
-  label:
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
-    fontSize: "10.5px"
-    letterSpacing: "0.06em"
-    textTransform: "uppercase"
-    color: "{colors.muted-foreground}"
-  crumb:
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
-    fontSize: "11.5px"
-    letterSpacing: "0.08em"
-    textTransform: "uppercase"
-    color: "{colors.muted-foreground}"
-rounded:
-  pill: "999px"
-  card: "10px"
-  quote: "6px"
-  button: "8px"
-  circle: "50%"
-spacing:
-  page-max: "1080px"
-  page-pad: "0 32px 64px"
-  section-gap: "40px"
-  block-gap: "14px"
-  card-pad: "22px 24px"
-  meta-gap: "32px"
-components:
-  header-top:
-    borderBottom: "1px solid {colors.border}"
-    padding: "16px 0"
-    description: "可选文档页头：面包屑、状态胶囊与 Owner/Updated/Reviewers 等 meta；仅在内容语义需要时使用"
-  pill-draft:
-    background: "{colors.accent}"
-    color: "{colors.primary}"
-    borderRadius: "{rounded.pill}"
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
-    padding: "4px 10px"
-  panel:
-    background: "{colors.card}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.card}"
-    padding: "{spacing.card-pad}"
-  quote-block:
-    background: "{colors.accent}"
-    borderLeft: "3px solid {colors.primary}"
-    borderRadius: "{rounded.quote}"
-    padding: "22px 24px"
-  metric-table:
-    background: "{colors.card}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.card}"
-    description: "th 用 label 排版 + 背景 {colors.th-bg}；行分隔 1px {colors.border}"
-  target-cell:
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
-    color: "{colors.primary}"
-    fontWeight: "600"
-  story-num:
-    background: "{colors.accent}"
-    color: "{colors.primary}"
-    borderRadius: "{rounded.circle}"
-  milestone-badge:
-    background: "{colors.accent}"
-    color: "{colors.primary}"
-    borderRadius: "{rounded.pill}"
-  avatar:
-    background: "linear-gradient(135deg, {colors.primary}, {colors.primary-grad-end})"
-    color: "{colors.primary-foreground}"
-    borderRadius: "{rounded.circle}"
-anchors:
-  - id: mono-uppercase-label
-    type: token
-    desc: 所有微标签（面包屑/表头/徽章/胶囊/页脚）走等宽体 + 全大写 + 字距，见 typography.label
-  - id: accent-frugal
-    type: pattern
-    desc: 靛紫强调色（见 colors.primary）克制使用——只落状态胶囊、引用左边框、指标目标、里程碑徽章
-  - id: borderless-cards
-    type: pattern
-    desc: 无阴影，卡片层级仅靠细线（colors.border）+ card 圆角，纸面浮在冷灰底上
-  - id: serif-headings
-    type: token
-    desc: 标题用 system-serif Charter（typography.h1/h2），正文与标签走无衬线/等宽，三字体分工
-  - id: pill-status
-    type: component
-    desc: 右上状态胶囊（Draft/Review/Approved）圆角全径 + 前置圆点，accent 底
-  - id: grid-blocks
-    type: pattern
-    desc: 对比型信息块可使用局部 grid 分栏，比例与列数按内容决定，窄屏自然收敛
-  - id: single-column-flow
-    type: pattern
-    desc: 长文档场景可采用纸面内容流与 spacing.page-max 作为阅读宽度参考，不限制其他应用形态
-gaps:
-  - "源仅 Draft 一种状态胶囊配色（accent/primary）；Review/Approved 的语义色未定义"
-  - "warn (#b8741a) 与 positive (#1f8a5a) 在示例中作为 CSS 变量声明但正文未实际着色，用途待补"
-  - "暗色模式未定义；仅浅色纸面"
-  - "补充项：源字体全为 system/local（Charter/Georgia/Inter），无 webfont @import；下方为 Inter 兜底 @import，Charter 缺失时退 Georgia 系统衬线"
-  - "补充项：源无 CJK 字形，已在 display/body fontFamily 末尾注入 PingFang SC 等系统兜底（非源值）"
-exceptions:
-  - primary 强调色允许在同屏出现多次（状态胶囊 + 指标目标 + 里程碑徽章 + 引用边框），因均属"结构性点缀"而非装饰
----
-
-## Overview
-
-把 PRD、规格说明与其他长文档型内容当作一页可精读的印刷文档来排：冷灰蓝底 `#f5f7fa` 上浮白色纸面卡片，靛紫 `#4a36e3` 作唯一强调色且极度克制。气质是"内部工具里的严肃文档"——衬线标题给权威感，等宽体承担所有元数据微标签，正文密而不挤（14.5px / 行高 1.6）。全程无阴影，深度只由 1px 细线与 10px 圆角表达。
-
-文档头条、状态胶囊、Owner / Updated / Reviewers 元信息，以及 Problem / Goals / Metrics / Milestones 等都是 PRD 场景的组件示例。使用时只选择与输入内容匹配的部分；非 PRD 应保留原有任务结构，不为套风格改写成固定文档章节。
-
-## Colors
-
-- **底色 paper flow**：页面底 `#f5f7fa`，所有内容卡片纸面 `#ffffff`，形成"纸浮在灰底上"的文档层。
-- **文字**：主文本 foreground `#0e1322`；次要/元信息 muted-foreground `#5a647a`。
-- **描边**：常规分隔 border `#e2e6ee`（卡片边框、行分隔、区块下边线）；强分隔 line-strong `#c8cfdb`（如禁用态 tick 底）。
-- **强调 primary `#4a36e3`**：唯一主强调色，用于状态胶囊文字、引用左边框、指标目标值、里程碑徽章、故事序号、用户故事中的加粗角色词。配套浅底 accent `#ece8ff` 做胶囊/徽章/序号圆的填充。
-- **语义色**：positive `#1f8a5a`（达成态 tick "✓"）、warn `#b8741a`（预警，示例中声明未着色）。
-- **辅助**：表头背景 th-bg `#f8fafd`；头像渐变 `linear-gradient(135deg, #4a36e3, #8473ff)`（primary → primary-grad-end）。
-
-## Typography
-
-三字体分工，各司其职，不得混用：
-- **衬线（display）** `'Charter', Georgia, serif`：仅标题——h1 42px/行高 1.06/字距 -0.015em/700、h2 24px/字距 -0.005em、引用正文 17px/行高 1.5、目标列表小标题、里程碑标题、goal-list h3。非 PRD 内容改写出的分节标题同样必须走这一衬线 h2，不得因为内容变了就换回无衬线。
-- **无衬线（body）** `-apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif`：正文 14.5px/行高 1.6、摘要 17px（muted-foreground）、h2 副标题 13px、故事与问题文本。
-- **等宽（mono）** `ui-monospace, SFMono-Regular, Menlo, monospace`：全部 uppercase 微标签——面包屑 11.5px/字距 0.08em、状态胶囊 11px/0.06em、表头 10.5px/0.06em、meta-row 标签 10.5px、里程碑徽章 10.5px、里程碑工期 11px、目标数值单元格、页脚 11.5px。
-
-字体加载（消费侧指令，原样写入全局样式首行，**禁止用 `<link>` 标签代替**）：
-```
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-```
-**HARD REQUIREMENT：字体栈与角色分工原样使用，禁止替换；上面这行 `@import` 必须以文本形式出现在全局 CSS 文件（或 `<style>` 标签）首行。禁止改写成 `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?...">`——两者渲染效果相近，但后者不满足"原样写入 @import"的硬性要求，判为违规。** Charter / Georgia 为系统衬线，无需 webfont；CJK 内容退 PingFang SC 等系统兜底。
-
-## Layout
-
-- **阅读容器**：长文内容可参考 `max-width 1080px`、上下 `margin 28px auto` 和 `page-pad`；工具、工作台或数据应用可按任务需要使用更宽或不同的信息架构。
-- **内容组织**：保留输入内容的语义结构。衬线标题、摘要、指标卡、图表和表格面板可按需组合，不要求每节同构。
-- **区块间距**：`section` 间 `margin-top 40px`；块内 grid 间距统一 `14px`（block-gap）。
-- **头部**：文档场景可使用 flex 两端对齐、`padding 16px 0` + 底部 1px border；应用导航形态由实际信息架构决定。
-- **grid 分栏**：对比信息、指标和里程碑可使用局部网格，比例与列数按内容量决定，不继承 PRD 示例值。
-- **元信息条**：`padding 16px 22px`，列间距 `32px`（meta-gap），标签在上（mono 小字）值在下。
-- **响应式**：窄屏减少局部网格列数、缩小标题并维持阅读顺序。
-
-## Elevation & Depth
-
-**零阴影体系。** 所有卡片（panel/table/story/step/question/meta-row）深度仅由 `1px solid #e2e6ee` 边框 + `10px` 圆角 + 纸白背景在灰底上表达。引用块用 3px primary 左边框作强调而非投影。层级靠"纸面 vs 底色"的明度差，不靠 z 轴。**hover/focus/active 等交互态同样不得引入投影**——按钮、输入框、可点击卡片的状态反馈一律改用边框颜色变化（如切到 `{colors.primary}` 或 `{colors.line-strong}`）或背景色微调，不加哪怕是 `0 1px 2px` 的轻投影。
-
-## Shapes
-
-- **卡片圆角** `10px`（card）：面板、表格、故事、里程碑、问题、元信息条统一。
-- **引用块** `6px`（quote）。
-- **按钮/顶部动作胶囊** `8px`（button）。
-- **全径胶囊** `999px`（pill）：状态胶囊、里程碑徽章。
-- **圆形** `50%`（circle）：目标/非目标 tick、故事序号、头像、状态胶囊前置圆点。
-- 强调面积小、以边框和圆角定义形状，不用大色块。
-
-## Components
-
-- **状态胶囊 pill**：`accent` 底 + `primary` 字，全径圆角，前置 6px 圆点，mono uppercase 11px。
-- **面板 panel / 引用 quote-block**：见 frontmatter components——panel 纸白 + 1px border；quote-block accent 底 + 3px primary 左边框，正文用衬线 17px。
-- **目标/非目标块**：两列 goal-list，小标题带圆形 tick——达成 `positive` 底白勾，排除 `line-strong` 底 muted-foreground 叉。
-- **指标表 metric-table**：th 用 label 排版 + `th-bg` 背景；目标列 target-cell 走 mono + primary + 600；行间 1px border 分隔，末行无线。
-- **用户故事 story**：左侧圆形序号（accent 底 primary 字 mono 600），右侧文本中角色词用 primary 加粗。
-- **里程碑 step**：顶部 pill 徽章（M1·日期）+ 衬线标题 + mono 工期 + 要点列表，4 列时间线。
-- **指派 chip / avatar**：问题右侧 muted-foreground 小字 + 圆形头像（primary→primary-grad-end 渐变，primary-foreground 白字缩写）。
-- **图表**：源无图表；如需数据可视化，序列色以 primary `#4a36e3` 起、primary-grad-end `#8473ff` 次，容器沿用 panel（纸白 + 1px border + card 圆角），图表本身不加投影、不脱离 panel 容器单独铺满一屏。
-
-## Hard Rules
-
-- **必须**保持三字体严格分工：衬线只用于标题/引用，等宽只用于 uppercase 微标签，正文无衬线。禁止用衬线排正文或用无衬线排标签。
-- **禁止**使用 box-shadow / drop-shadow，**含 hover/focus/active 等交互态和表单控件**；所有层级、所有状态只用 1px `{colors.border}` 边框 + `{rounded.card}` 圆角表达，交互反馈改用边框变色或背景色变化，不得加任何投影（哪怕是 `0 1px 2px` 的轻投影）。
-- **禁止**大面积铺 primary 色块；`{colors.primary}` 仅用于胶囊/徽章/序号/目标值/引用边框/角色词等结构性点缀。
-- **必须**让每个内容卡片坐在 `{colors.card}` 纸面上、页面底为 `{colors.background}`，不得反转。
-- 所有 uppercase 微标签**必须**带字距（≥0.06em）且用 `{typography.label}` 字体族。
-- **禁止**替换字体栈与 @import（见 Typography 硬指令）；**禁止**用 `<link rel="stylesheet" href="https://fonts.googleapis.com/...">` 标签加载字体来代替 @import——一律用 `<style>` 内 `@import url(...)` 或独立 CSS 文件首行的裸 `@import` 语句。
-
-## Exceptions
-
-- primary 强调色允许在同一屏出现多处（状态胶囊 + 指标目标 + 里程碑徽章 + 引用左边框 + 故事序号），因均属"结构性点缀"而非装饰性铺色，不违反克制原则。
-- warn `#b8741a` 与 positive `#1f8a5a` 作为语义储备色允许在需要"预警/达成"语义时启用（示例中仅 positive 用于 tick）。
-
-## Do's and Don'ts
-
-- **Do** 把长文档型内容（PRD 或其他）当作一页可精读文档排——密而有序、以细线分区、以衬线标题立权威。
-- **Do** 用 grid 分栏承载对比信息（问题/引用、目标/非目标、多相里程碑，或改写后的指标卡/图表分节）。
-- **Do** 用等宽小标签给每个数据点加"文档感"元信息（工期、日期、负责人）。
-- **Don't** 加投影、渐变大色块或多彩强调；克制是本风格的核心气质。
-- **Don't** 为复刻 PRD 示例改写用户的信息架构或补充无关章节。
-