@lark-apaas/coding-steering 0.1.70 → 0.1.71

package/steering/nestjs-react-fullstack/skills/design-guide/references/warm-elegance.md

@@ -1,217 +0,0 @@
----
-version: alpha
-name: warm-elegance
-name_zh: 暖调精致
-description: 暖调精致风——暖米/暖灰/暖黄三色渐变页面背景上叠放白色超圆角(32px)卡片,黄色(#FACC15)作为唯一强调色点缀 CTA/活跃态/装饰细节;深色反转区(#2D2D2D)与嵌入深色卡片(#1A1A1A)形成视觉对比层,纤细 pill 型 CSS 柱图/环形进度指示器(border trick)/线性进度条构成数据可视化语言,灰度高对比人物头像(仅内容涉及具体人物时)配渐变遮罩与磨砂玻璃标签点缀。温暖、安心、掌控感。
-colors:
-  background: "#FCF4D3"
-  page-gradient: "linear-gradient(to bottom right, rgba(228,229,230,0.6), rgba(250,237,182,0.6), rgba(243,232,203,0.6))"
-  card: "#FFFFFF"
-  surface-dark: "#2D2D2D"
-  surface-embed: "#1A1A1A"
-  foreground: "#1E293B"
-  muted-foreground: "#9CA3AF"
-  text-dim: "#64748B"
-  text-body: "#6B7280"
-  primary: "#FACC15"
-  border: "#F3F4F6"
-  positive: "rgb(90,173,112)"
-  danger: "#EF4444"
-  orange: "#F97316"
-typography:
-  body:
-    fontFamily: 'Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif'
-    fontWeight: [300, 400, 500, 600, 700]
-    usage: 全局唯一字体,覆盖所有文字层级
-rounded:
-  card: "2rem(32px)"
-  embed: "1.5rem(24px)"
-  icon-lg: "1rem(16px)"
-  icon: "0.75rem(12px)"
-  pill: 9999px
-spacing:
-  content-px: "1rem~2rem(p-4 md:p-8)"
-  grid-gap: "1.5rem(24px)"
-  section-gap: "2rem~2.5rem(mb-8/mb-10)"
-  card-padding: "1.5rem(p-6)"
-  goal-gap: "3rem(space-y-12)"
-components:
-  primary-card:
-    background: "{colors.card}"
-    padding: "1.5rem(p-6)"
-    borderRadius: "{rounded.card}"
-    boxShadow: "shadow-sm,hover=>shadow-md"
-    border: "1px solid {colors.border}"
-  dark-sidebar:
-    background: "{colors.surface-dark}"
-    padding: "2rem(p-8)"
-    borderRadius: "{rounded.card}"
-    boxShadow: shadow-2xl
-    decoration: "两处 blur 装饰光晕(左上 80px 白 5%透明/右下 60px 黄 10%透明)"
-  embed-card:
-    background: "{colors.surface-embed}"
-    padding: "1.25rem(p-5)"
-    borderRadius: "{rounded.embed}"
-    boxShadow: shadow-lg
-    hover: "-translate-y-1"
-  avatar-card:
-    usage: "仅当内容本身涉及具体人物(团队/专访/员工画像)时使用,禁止装饰性占位"
-    image: "grayscale contrast-125,group-hover:scale-110 duration-1000"
-    mask: "bg-linear-to-t from-black/80 via-transparent to-transparent"
-    status-tag: "磨砂玻璃 bg-white/10 backdrop-blur-md border-white/20,配 {colors.positive} 脉冲点"
-    value-pill: "border-white/40 bg-white/5 backdrop-blur-xl rounded-2xl"
-  progress-bar:
-    light: "h-1 bg-slate-50 rounded-full,填充色 {colors.primary}/slate-800/slate-300"
-    dark: "h-1.5 bg-white/10 rounded-full,填充色 {colors.primary}/white 40%透明/{colors.positive}/{colors.danger}(风险severity场景)"
-  charts:
-    palette: "{colors.primary} {colors.foreground} #94A3B8 {colors.positive} {colors.danger}"
-    bar: "barWidth 12,pill 全圆角[6,6,6,6],默认 #E2E8F0,emphasis {colors.primary}+黄色光晕阴影 shadowBlur 15"
-    pie: "环形 radius 60%~75%,padAngle 3,itemStyle 圆角 4,配色 primary/foreground/#CBD5E1"
-    line: "线宽 2px,主序列 {colors.primary},辅助序列 {colors.muted-foreground}/{colors.text-dim},极简 symbol(直径4px)或无 symbol,区域填充可选 {colors.primary} 8%透明渐变"
-    radar: "轴线 {colors.border} 细线,填充 {colors.primary}/{colors.positive} 半透明(opacity 0.15~0.2),圆点 symbol 4px,多序列取色顺序同 charts.palette"
-    tooltip: "白底,1px {colors.border} 边框,圆角 16px,box-shadow 0 4px 6px -1px rgba(0,0,0,0.1)"
-    axis: "隐藏轴线与刻度,标签 {colors.muted-foreground} 9px,网格线虚线 {colors.border} 或全隐藏——此克制原则适用于 bar/pie/line/radar 所有图表类型,禁止 ECharts 默认粗轴线/灰色网格"
-    legend: "底部,{colors.muted-foreground} 11px,圆点 icon 8×8"
-anchors:
-  - id: warm-gradient-bg
-    type: token
-    desc: 三色暖调 linear-gradient 页面背景(见 colors.page-gradient),奶油/暖灰/暖黄混合 0.6 透明度叠加
-  - id: super-rounded-card
-    type: token
-    desc: 白色卡片一律超圆角(见 rounded.card),嵌入深色卡片圆角略小一档(见 rounded.embed)
-  - id: accent-yellow-single
-    type: token
-    desc: 黄色(colors.primary)是全局唯一强调色,仅用于 CTA/活跃态/装饰细节,不作大面积底色
-  - id: dark-inversion-zone
-    type: component
-    desc: 深色侧边栏(surface-dark)+嵌入深色卡片(surface-embed)在浅色主体旁形成反转对比层
-  - id: pill-bar-progress
-    type: pattern
-    desc: 纤细 pill 型 CSS 柱图/线性进度条/环形指示器(border trick)构成数据可视化语言,非常规图表外观
-  - id: grayscale-avatar
-    type: component
-    desc: 人物头像灰度高对比处理(grayscale contrast-125)配渐变遮罩与磨砂玻璃标签——仅当内容本身涉及具体人物(团队/专访/员工画像)时使用,禁止装饰性占位
-gaps:
-  - "无暗色模式(dark mode)整体主题切换定义,深色区域为固定局部反转区而非可切换主题"
-  - "无表单控件(input/select/checkbox 等)规范"
-exceptions:
-  - 嵌入式深色卡片圆角用 rounded.embed(24px),不与主卡片 rounded.card(32px)统一
-  - 图标容器/列表按钮圆角用 rounded-xl(12px)/rounded-2xl(16px),小于卡片超圆角档位
-  - Logo/CTA 按钮/头像/环形指示器一律全圆(rounded.pill),不遵循超圆角档位
-  - 内容量较大时可纵向分 section，每段列数与比例按内容关系确定，并保持卡片圆角、深色反转区和强调色语言
----
-
-## Overview
-
-暖调精致风,三色暖调渐变(奶油/暖灰/暖黄各 0.6 透明度)铺满页面背景,承托白色超圆角(32px)卡片构成主内容区,黄色(colors.primary)作为唯一强调色点亮 CTA、活跃态与装饰细节。深色反转区(colors.surface-dark)与嵌入式深色卡片(colors.surface-embed)在浅色主体旁形成层次对比,营造精致感。数据可视化采用纤细 pill 型 CSS 柱图、环形进度指示器(border trick)与线性进度条,替代传统图表语言;人物头像做灰度高对比处理配渐变遮罩,磨砂玻璃标签点缀细节。页面结构由内容决定。情绪基调:温暖、安心、掌控感。
-
-## Colors
-
-| 角色 | 值 | 用法 |
-|-----|-----|-----|
-| background | {colors.background} | 渐变中段暖黄叠在白底上的单色,作画布底色;页面背景本身用 page-gradient |
-| page-gradient | {colors.page-gradient} | 页面暖调渐变背景 |
-| card | {colors.card} | 白色卡片底 |
-| surface-dark | {colors.surface-dark} | 深色反转侧边栏 |
-| surface-embed | {colors.surface-embed} | 嵌入式深色卡片 |
-| foreground | {colors.foreground} | 主要文字 |
-| muted-foreground | {colors.muted-foreground} | 次要文字、全大写标签 |
-| text-dim | {colors.text-dim} | 辅助标签(如进度条数值说明) |
-| text-body | {colors.text-body} | 正文默认颜色,比 text-dim 更浅 |
-| primary | {colors.primary} | 黄色强调:CTA、活跃态、装饰、图表高亮 |
-| border | {colors.border} | 白色卡片浅边框 |
-| positive | {colors.positive} | 正向/安全状态、脉冲点、深色区进度填充 |
-| danger | {colors.danger} | 紧急/告警标签、图表告警序列色、深色区风险进度填充 |
-| orange | {colors.orange} | 数值高亮变体色(Tailwind orange-500 标准值) |
-
-## Typography
-
-全局样式首行原样写入(HARD REQUIREMENT,禁止替换):
-
-```css
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-body { font-family: 'Inter', sans-serif; }
-```
-
-唯一字体:**Inter**(拉丁无衬线体,fontFamily 已追加 CJK 兜底 PingFang SC/Microsoft YaHei/Noto Sans SC,系统字体无需 @import)。
-
-| 层级 | 样式(Tailwind) | 颜色 |
-|-----|-----|-----|
-| 页面大标题 | text-4xl font-semibold tracking-tight | foreground |
-| 大数值 KPI | text-4xl font-light tracking-tight | foreground / positive / orange |
-| 卡片标题 | font-bold tracking-tight | foreground |
-| 卡片副标题 | text-xl font-bold | foreground |
-| 全大写标签 | text-[10px] font-bold uppercase tracking-widest | muted-foreground |
-| 斜体标签 | text-[10px] italic uppercase tracking-[0.2em] | muted-foreground |
-| 正文 | text-sm | {colors.text-body} |
-| 数据值 | text-sm font-mono font-bold tracking-tight | foreground |
-| 小标签 | text-[9px]/text-[8px] font-bold uppercase | 按语境变化 |
-| 深色区标题 | text-2xl font-bold italic tracking-tighter | 白 #FFFFFF |
-| 深色区进度 | text-3xl font-light font-mono opacity-50 | 白 #FFFFFF |
-
-## Layout
-
-- 内容容器:p-4 md:p-8,全宽响应式(无 max-width)。
-- 可选品牌标识区:左上 Logo pill(bg-black text-white px-5 py-2 rounded-full font-bold text-xl tracking-tighter + 黄色图标 + shadow-lg shadow-black/10);右上仅放报告元信息文字(日期/版本/来源),不放搜索/通知/用户头像等应用操作控件。
-- 可用非对称卡片组合制造主次层级，列数、比例、顺序和深色反转区的位置均按内容关系确定。
-- 内容量较大时纵向分 section，深色反转区可作为段内卡片、横向强调区或侧边区域，不要求贯穿全高。
-- Section 间距 mb-8/mb-10(32~40px)。
-- 响应式按内容优先级减少列数，窄屏避免深色区挤压主内容，内容容器从 p-8 收敛至 p-4。
-
-## Elevation & Depth
-
-| 元素 | 值 |
-|-----|-----|
-| 白色卡片 | shadow-sm,hover => shadow-md |
-| 深色侧边区 | shadow-2xl |
-| Logo | shadow-lg shadow-black/10 |
-| 嵌入深色卡片 | shadow-lg,hover:-translate-y-1 |
-| 活跃柱体黄色光晕 | shadow-[0_0_15px_rgba(250,204,21,0.4)] |
-| 状态脉冲点绿色光晕 | shadow-[0_0_8px_rgba(90,173,112,0.8)] |
-
-层次感 = 极轻阴影(浅色区)+ 深色实心反转(深色区)+ 局部发光阴影(强调态),不用硬偏移阴影。Hover 交互:白色卡片阴影增强;嵌入深色卡片上移;图片 group-hover:scale-110(1000ms);图标 group-hover 变黄底黑字(500ms);文字 group-hover 变黄;tracking 展开 group-hover:tracking-[0.25em];按钮 active:scale-95。
-
-## Shapes
-
-- 圆角档位:主卡片 {rounded.card}(32px)、嵌入卡片 {rounded.embed}(24px)、图标容器 {rounded.icon}(12px)/{rounded.icon-lg}(16px)、Logo/CTA/头像/环形指示器全圆 {rounded.pill}。
-- 边框语言:白色卡片 1px {colors.border}(近乎不可见);深色区域 border-white/10 或 border-dashed border-white/20;列表分隔 border-dashed border-gray-200。
-- 装饰元素:磨砂玻璃标签(backdrop-blur-md border border-white/20 bg-white/10);装饰光晕(blur-[80px] bg-white/5 左上 + blur-[60px] bg-primary/10 右下);灰度头像(grayscale contrast-125);渐变遮罩(bg-linear-to-t from-black/80 via-transparent to-transparent);脉冲动画(animate-pulse 状态点)。
-- 环形进度指示器用边框技巧实现:border-[10px] border-primary border-r-transparent rotate-45。
-
-## Components
-
-核心组件规格见 frontmatter components(primary-card / dark-sidebar / embed-card / avatar-card / progress-bar / charts)。补充细节:
-
-- **品牌标识(可选)**:Logo pill(bg-black text-white px-5 py-2 rounded-full font-bold text-xl tracking-tighter + 黄色图标 + shadow-lg shadow-black/10);右上仅放报告元信息文字(日期/版本/来源),不放搜索/通知/用户头像等应用操作控件。
-- **人物头像卡片(仅内容涉及具体人物时使用,禁装饰性占位)**:图片容器 rounded-2xl aspect-[4/5];状态标签左上(磨砂玻璃+{colors.positive} 脉冲点);底部信息 flex justify-between(白色名称 text-2xl + 标签 opacity-70 + 数值 pill 磨砂玻璃 rounded-2xl)。
-- **列表卡片**:标题 italic underline decoration-primary;告警标签 bg-red-50 text-red-500 rounded-full;列表项图标 bg-slate-50 rounded-xl(group-hover:bg-yellow-50);分隔线 hr border-dashed;底部按钮 rounded-2xl border border-slate-100。
-- **柱状图卡片(CSS)**:标题行圆点(w-2 h-2 bg-primary rounded-full)+ ArrowUpRight 图标;柱体区 flex items-end h-32;柱体 max-w-[12px] rounded-full,默认 bg-slate-100,活跃 bg-primary + 黄色光晕 + scale-x-110。
-- **日历卡片**:星期头 grid-cols-7 text-slate-300;日期格 w-10 h-10 rounded-xl,活跃日 bg-black text-white ring-4 ring-black/5 scale-110;标记点 absolute -bottom-1(活跃=primary,默认=slate-300)。
-- **深色侧边栏目标项**:图标 bg-white/10 rounded-xl(group-hover:bg-white/20);百分比 >50%=primary,<=50%=white/40,风险severity场景改用 danger 填充(如"高危"红色进度条);进度条填充 primary/white-40%/positive/danger;间距 space-y-12;底部 CTA 图标 group-hover:rotate-12,文字 group-hover:tracking-[0.25em]。
-- **图表(ECharts)**:序列色按 charts.palette 顺序;bar 为纤细 pill 型(barWidth 12,全圆角);pie 为环形(60%~75%);line/radar 规格见 frontmatter components.charts,一律去除默认粗轴线与灰色网格,风格与 bar/pie 保持一致克制;tooltip/axis/legend 规格见 frontmatter components.charts。
-
-## Do's and Don'ts
-
-- 优先使用设计系统定义的配色变量({colors.primary}/{colors.surface-dark}/{colors.positive} 等),通过透明度与渐变产生层次,保持整体暖色调统一感。
-- 数据可视化统一用 ECharts 配合 charts 主题配置,让图表在色彩与圆角上与卡片、进度条等 CSS 组件保持一致,包括 line/radar 等非 bar/pie 图表。
-- 保持浅色暖底与深色反转区的对比节奏,用超圆角(32px/24px)与极轻阴影营造柔和、精致的卡片层次。
-- 响应式断点内间距可微调;卡片内条目数量可增减;日历月份、进度条/百分比数值均可动态化。
-- 不要让黄色强调色覆盖大面积底色,仅用于点状/线状/CTA 场景。
-
-## Hard Rules
-
-- 页面背景必须为三色暖调 linear-gradient({colors.page-gradient}),禁止替换为纯色或其他色系渐变。
-- 主卡片圆角必须为 {rounded.card}(32px),禁止使用常规 rounded-lg/rounded-xl 等更小圆角(Exceptions 列明的除外)。
-- 强调色必须为 {colors.primary}(#FACC15),且为全局唯一强调色,不得引入第二强调色。
-- 页面应保留至少一处深色反转区({colors.surface-dark})或嵌入深色卡片({colors.surface-embed})作为对比锚点；形态和位置按内容决定。
-- 字体必须为 Inter,@import 必须原样写入全局样式首行,禁止替换或省略(HARD REQUIREMENT)。
-- 任何图表(bar/pie/line/radar)必须遵循 charts 规格去除 ECharts 默认粗轴线与灰色网格,禁止使用未经处理的默认样式。
-
-## Exceptions
-
-- 嵌入式深色卡片圆角用 {rounded.embed}(24px),不与主卡片 {rounded.card}(32px)统一。
-- 图标容器/列表按钮圆角用 {rounded.icon}(12px)/{rounded.icon-lg}(16px),小于卡片超圆角档位。
-- Logo/CTA 按钮/头像/环形指示器一律全圆({rounded.pill}),不遵循超圆角档位。
-- 透明胶带式磨砂玻璃标签自带 backdrop-blur,是允许的模糊效果(不属于阴影)。
-- 长内容允许纵向分 section，每段内部按内容关系自适应排列，并保持卡片圆角、深色反转区和强调色语言。
-

package/steering/nestjs-react-fullstack/skills/design-guide/references/wild-orange.md

@@ -1,203 +0,0 @@
----
-version: alpha
-name: wild-orange
-name_zh: 橙色野性
-description: 野性主义(Brutalist)×包豪斯几何×杂志编辑排版。纯白画布上黑色粗边框(2-4px)构建骨架,硬偏移阴影(4px/8px,零模糊)强化层次,橙色作为唯一暖色强调锚点,严格黑白橙三色配色。零圆角方形卡片(完全圆形徽章/头像除外),标题无衬线粗体大写,斜体衬线(Playfair Display)点缀装饰文字与数值,几何装饰圆呼应包豪斯语言。情绪基调:自信、大胆、现代。
-colors:
-  background: "#ffffff"
-  card: "#ffffff"
-  header: "#ff6600"
-  foreground: "#000000"
-  muted-foreground: "#666666"
-  primary: "#ff6600"
-  accent: "#ffd1b3"
-  border: "#000000"
-  gray-state: "#999999"
-typography:
-  heading-body:
-    fontFamily: 'Space Grotesk, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif'
-    fontWeight: 500
-    usage: 全局无衬线字体(标题/正文/标签/图表文字),标题额外 font-bold(700)+uppercase
-  decorative:
-    fontFamily: '"Playfair Display", serif'
-    fontStyle: italic
-    usage: 装饰性文字/副标题/信息卡片(小)数值,斜体点缀,不用于长正文
-rounded:
-  card: 0px
-  full: 9999px
-spacing:
-  page-px: "16px~32px(px-4 sm:px-6 lg:px-8)"
-  section-gap: 48px
-  card-padding: 24px
-  header-padding: "32px~64px(p-8 lg:p-16)"
-  component-gap: "16px/32px(gap-4/gap-8)"
-components:
-  brutal-card:
-    background: "{colors.card}"
-    border: "2px solid {colors.border}"
-    borderRadius: "{rounded.card}"
-    boxShadow: "4px 4px 0px 0px {colors.border}"
-    padding: "{spacing.card-padding}"
-    hover: "transform translate(2px,2px);boxShadow 收缩至 2px 2px 0px 0px {colors.border};transition all 0.2s ease"
-  header-banner:
-    background: "{colors.primary}"
-    border: "4px solid {colors.border}"
-    boxShadow: "8px 8px 0px 0px {colors.border}"
-    padding: "{spacing.header-padding}"
-    decoration: "几何装饰圆(absolute rounded-full border-2 border-black opacity-20,大圆/小圆两档)+黑底状态卡片"
-  navigation:
-    background: "{colors.card}"
-    borderBottom: "2px solid {colors.border}"
-    height: 64px
-    logo: "{colors.border}底,32×32,白字加粗"
-    versionBadge: "{rounded.full},{colors.primary}底,border 1px {colors.border},文字加粗"
-  badge:
-    borderRadius: "{rounded.full}"
-    border: "1px solid {colors.border}"
-    background: "{colors.card}或{colors.primary}"
-    padding: "4px 16px"
-    fontWeight: 700
-  info-card-small:
-    background: "{colors.card}"
-    border: "2px solid {colors.border}"
-    padding: 12px
-    valueFont: "{typography.decorative}"
-  charts:
-    palette: "{colors.primary} {colors.foreground} {colors.muted-foreground} {colors.accent} {colors.gray-state}"
-    container: "{colors.card}底+2px {colors.border}边框+4px 偏移阴影(即 brutal-card 样式)"
-    axis: "轴线/刻度 2px {colors.border},标签 11px 加粗(600),字体见 {typography.heading-body}"
-    tooltip: "{colors.card}底,2px {colors.border}边框,{rounded.card}(直角),硬阴影 4px 4px 0 {colors.border}"
-    legend: "icon=rect 16×16,itemGap 16,文字加粗(600)"
-anchors:
-  - id: brutal-border-shadow
-    type: pattern
-    desc: 全局粗黑边框叠加硬偏移阴影(见 components.brutal-card 的 boxShadow),零模糊,是品牌核心签名
-  - id: tri-color-strict
-    type: pattern
-    desc: 严格黑白橙三色系统(见 colors 各角色),不引入其他色相干扰纯粹性
-  - id: zero-radius-shape
-    type: pattern
-    desc: 卡片一律零圆角方形,唯一例外是完全圆形的徽章与头像(见 Exceptions)
-  - id: header-banner
-    type: component
-    desc: 橙色强调横幅+粗边框+几何装饰圆，可在最重要的内容区域作为视觉锚点
-  - id: playfair-italic-accent
-    type: token
-    desc: 衬线斜体(Playfair Display)专用于装饰性文字与信息卡数值,与无衬线正文对比
-  - id: hover-press-shift
-    type: pattern
-    desc: 卡片 hover 位移配合阴影收缩,模拟物理按压反馈
-  - id: geometric-circle-decor
-    type: component
-    desc: 低透明度描边几何圆装饰散布 Header 与卡片背景,呼应包豪斯几何语言
-gaps:
-  - 无暗色模式定义
-  - 无表单控件(input/select 等)规范
-  - 补充项:本文件 colors 全部 hex 值由源 HSL 值换算得出(源全部以 HSL 给出,无 hex),按标准 HSL→RGB→hex 公式精确换算,非凑整/非取默认值,可能有 ≤1 的舍入误差,不改变色相/饱和度/明度语义
-  - 补充项:字体加载语法由源 `<link>` 标签按 DSM 规范转换为等效 `@import`(URL/字重参数原样保留,仅切换加载语法)
-exceptions:
-  - 完全圆形的徽章/头像/滚动条滑块使用 {rounded.full},是零圆角规则唯一例外
-  - gray-state(灰色状态色)仅用于图表次级序列与灰色圆点标记,不用于正文/边框/主要强调
-  - Playfair Display 只承载拉丁装饰文字；中文装饰文字回退到 Songti SC / Noto Serif SC
----
-
-## Overview
-
-野性主义(Brutalist)× 包豪斯几何 × 杂志编辑排版。极简主义与强对比结合:纯白画布上黑色粗边框(2-4px)构建骨架,硬偏移阴影(4px/8px,零模糊)强化层次,橙色作为唯一暖色强调锚点。严格黑白橙三色配色,几何装饰圆与椭圆徽章点缀,零圆角方形卡片(完全圆形徽章/头像除外),标题无衬线粗体大写,斜体衬线(Playfair Display)点缀装饰文字与数值。情绪基调:自信、大胆、现代。
-
-## Colors
-
-| 角色 | 值 | 用法 |
-|-----|-----|-----|
-| background | {colors.background} | 页面背景(纯白) |
-| card | {colors.card} | 卡片背景(纯白) |
-| header | {colors.header} | Header 橙色横幅背景(与 primary 同值) |
-| foreground | {colors.foreground} | 正文(纯黑) |
-| muted-foreground | {colors.muted-foreground} | 次要文字(深灰) |
-| primary | {colors.primary} | 主交互色:橙色强调、CTA、状态激活、图表主色,权重最高 |
-| accent | {colors.accent} | 弱强调色:浅橙背景、头像底色、hover 轻底,权重低于 primary |
-| border | {colors.border} | 边框(纯黑粗线),承担结构角色;与 foreground 同值 |
-| gray-state | {colors.gray-state} | 中灰状态色、图表次级序列色 |
-
-三色原则:页面仅使用黑/白/橙三色(card/background 白,foreground/border 黑,primary/header 橙);accent 由 primary 提亮得到(H/S 不变,L 50%→85%);gray-state 为独立辅助状态色,不计入三色主色板。成功/激活语义色复用 primary;浅橙背景语义色复用 accent。选区样式:`::selection { background: {colors.primary}; color: white }`。
-
-换算说明:源色值为 HSL,本文件按标准 HSL→RGB→hex 公式换算为等值 hex(无信息损失,可能有 ≤1 舍入),详见 frontmatter gaps。
-
-## Typography
-
-全局样式首行原样写入(HARD REQUIREMENT,禁止替换):
-
-```css
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400;1,600&display=swap');
-```
-
-Space Grotesk 的 fontFamily 已含 CJK 兜底(PingFang SC/Microsoft YaHei/Noto Sans SC,系统字体无需 @import)。Playfair Display 仅用于拉丁装饰文字；中文装饰文字回退到 Songti SC / Noto Serif SC。
-
-| 层级 | 样式(Tailwind) | 颜色 |
-|-----|-----|-----|
-| H1 超大标题 | text-5xl lg:text-7xl font-bold uppercase tracking-tighter leading-[0.9] | foreground |
-| H2 章节标题 | text-3xl font-bold uppercase | foreground |
-| 装饰性文字 | font-serif italic text-lg({typography.decorative}) | foreground |
-| 正文 | text-sm font-normal | foreground |
-| 次要文字 | text-xs | muted-foreground |
-| 标签文字 | text-xs font-bold uppercase tracking-wider | foreground |
-
-## Layout
-
-- 导航若存在，可用 Logo 黑方块、粗体大写标题和橙色徽章延续视觉语言；位置和是否固定由应用信息架构决定。
-- 橙色强调横幅可用于主标题、关键结论或主要行动区域，使用 4px 黑边、brutal-shadow-lg 和几何装饰圆；不要求位于首屏。
-- 章节标题、内容卡片和其他模块按任务关系组合，不固定页面顺序。
-- 间距:页面边距 {spacing.page-px};区块间距 {spacing.section-gap};卡片内边距 {spacing.card-padding};组件间距 {spacing.component-gap}。
-- 响应式断点按信息关系减少列数和内边距；窄屏保证粗边框、硬阴影与文本之间有足够空间。
-
-## Elevation & Depth
-
-硬偏移阴影两档,全部零模糊,颜色一律 {colors.border}(黑):
-
-| 档位 | 值 |
-|-----|-----|
-| brutal-shadow | 4px 4px 0px 0px {colors.border} |
-| brutal-shadow-lg | 8px 8px 0px 0px {colors.border} |
-
-层次感 = 粗黑边框 + 硬偏移阴影,不用模糊阴影/渐变。Hover 交互:卡片位移 translate(2px,2px)+阴影收缩至 2px 2px 0px 0px {colors.border},transition all 0.2s ease。
-
-## Shapes
-
-- 圆角:卡片一律零圆角方形({rounded.card});完全圆形徽章/头像/滚动条滑块用 {rounded.full}(见 Exceptions)。
-- 边框语言:全局卡片 2px 实线 {colors.border};Header Banner 4px 实线;导航底边 2px;信息卡片(小)2px;装饰性描述文字左侧 4px 竖线({colors.border})。
-- 装饰元素:几何装饰圆(absolute rounded-full border-2 border-black opacity-20,大圆/小圆两档),散布 Header 与卡片背景;SVG 线性图标装饰(absolute top-0 right-0 p-12 opacity-10 {colors.foreground} stroke-width-1.5)。
-- 滚动条:轨道 #f1f1f1,滑块 {colors.border},宽 8px(源特定 UI 细节,未纳入 colors 命名色板)。
-- 动画:transition-all duration-200(卡片 hover 位移+阴影收缩)。
-
-## Components
-
-核心组件规格见 frontmatter components(brutal-card / header-banner / navigation / badge / info-card-small / charts)。补充细节:
-
-- **BrutalCard**:所有内容卡片的基座,头部 border-b-2 border-black pb-4 mb-6。
-- **HeaderBanner**:含标签(rounded-full border border-black bg-white px-4 py-1 text-sm font-bold)+描述(border-l-4 border-black pl-4 text-lg font-medium)。
-- **章节标题**:编号圆 w-10 h-10 border-2 border-black bg-primary rounded-full text-lg font-bold;标题 text-3xl font-bold uppercase;副标题 font-serif italic text-lg。
-- **野性主义卡片(内容卡)**:头像 w-12 h-12 rounded-full border-2 border-black bg-accent;橙色三角标记 text-primary "->" / 灰色圆点 w-2 h-2 rounded-full border border-black bg-gray-200(对应 colors.gray-state)。
-- **信息卡片(小)**:bg-white border-2 border-black p-3,标签 text-xs uppercase font-bold,值 font-serif italic text-lg(见 {typography.decorative})。
-- **图表(ECharts)**:序列色按 components.charts.palette 顺序;line/area smooth:false(硬朗折线)+symbol:'rect'(方形标记)+面积透明度 0.15;bar barWidth '50%'+borderRadius 0+2px 黑描边+硬阴影偏移 3px;pie 环形 50%~75%+padAngle 0+2px 黑描边;外部 label 加粗。图表容器高度与排列按数据量和可用空间确定。
-
-## Do's and Don'ts
-
-- Primary/Accent 分工:primary(橙)用于核心强调与交互,accent(浅橙)用于次级装饰与底色,权重不互换。
-- 大胆字重对比:标题用 font-bold(700)+装饰性文字用 Playfair 斜体,避免整段常规字重独立展示为标题。
-- Grid 优先布局:卡片网格严格对齐,图表边框/标记/阴影风格与整体统一,不单独设计。
-- 装饰圆/SVG 线性图标是低透明度点缀,避免高对比度喧宾夺主。
-
-## Hard Rules
-
-- 仅使用黑/白/橙三色(见 colors),禁止引入其他色相干扰画面纯粹性(gray-state 为独立辅助状态色,不计入三色主色板)。
-- 卡片圆角必须为 {rounded.card}(零圆角方形),完全圆形徽章/头像/滚动条滑块除外(见 Exceptions)。
-- 阴影必须是纯偏移硬阴影(0 模糊,{colors.border} 色),禁止使用模糊(blur)阴影或渐变阴影。
-- 卡片必须带 2px 实线 {colors.border} 边框(Header Banner 用 4px),禁止无边框卡片。
-- 字体 @import 必须原样写入全局样式首行,禁止替换或省略(HARD REQUIREMENT)。
-- 标题一律 uppercase + font-bold,禁止小写标题或常规字重独立展示为标题。
-
-## Exceptions
-
-- 完全圆形的徽章/头像/滚动条滑块使用 {rounded.full},是零圆角规则唯一例外。
-- gray-state(灰色状态色)仅用于图表次级序列与灰色圆点标记,不用于正文/边框/主要强调。
-- Playfair Display 仅用于拉丁装饰文字；中文装饰文字使用 Songti SC / Noto Serif SC。