@lark-apaas/coding-steering 0.1.70 → 0.1.71

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

@@ -1,348 +0,0 @@
----
-version: alpha
-name: industry
-name_zh: 工业图纸
-description: 工程图纸风格：冷灰白技术底配单一钢蓝，Barlow Condensed 标题与 Barlow 正文形成压缩对比；卡片、图框和按钮采用直角发丝边框与四角套准标，内容照片双色化为钢蓝。
-colors:
-  background: "#f2f2f3"
-  surface: "#e9e9ea"
-  foreground: "#1d1f20"
-  primary: "#5980a6"
-  primary-foreground: "#f2f2f3"
-  ring: "#5980a6"
-  primary-dark: "#416180"
-  primary-deep: "#1d2d3d"
-  primary-2: "#728fab"
-  neutral-dark: "#2b2b2d"
-typography:
-  heading:
-    fontFamily: "'Barlow Condensed', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif"
-    fontWeight: "600"
-    lineHeight: "1.12"
-  body:
-    fontFamily: "'Barlow', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif"
-    fontSize: "15px"
-    lineHeight: "1.55"
-  h1:
-    fontSize: "42px"
-  h2:
-    fontSize: "32px"
-  h3:
-    fontSize: "25px"
-spacing:
-  space-1: "3.4px"
-  space-2: "6.8px"
-  space-3: "10.2px"
-  space-4: "13.6px"
-  space-6: "20.4px"
-  space-8: "27.2px"
-rounded:
-  sm: "2px"
-  md: "4px"
-  lg: "7px"
-components:
-  blueprint-frame:
-    border: "1px solid color-mix(in srgb, {colors.foreground} 16%, transparent)"
-    borderRadius: "0"
-    background: "transparent"
-    description: "四角各带一个由两条 1px 线构成的套准十字标"
-  primary-button:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    border: "1px solid {colors.primary}"
-    borderRadius: "0"
-  duotone-image:
-    description: "图片去饱和后覆盖钢蓝混合层，并与 blueprint-frame 组合"
-anchors:
-  - id: drawing-paper
-    type: token
-    desc: 冷灰白图纸底与钢蓝构成单色技术基调
-  - id: condensed-heading
-    type: token
-    desc: 压缩标题与常规宽度正文形成明确对比
-  - id: blueprint-frame
-    type: component
-    desc: 透明直角线框配四角套准十字标
-  - id: solid-primary-only
-    type: component
-    desc: 主按钮是图板上主要的实体钢蓝区域
-  - id: modular-grid
-    type: pattern
-    desc: 内容沿等宽模块网格形成可见的横纵节奏
-  - id: steel-blue-duotone
-    type: pattern
-    desc: 内容照片统一进行钢蓝双色化处理
-gaps:
-  - 原始 styles.css、_ds_bundle.js 与模板资产未随 markdown 提供；接入时需使用来源资产。
-  - 暗色模式未定义。
-exceptions:
-  - 对话框是带 surface 填充的容器例外。
-  - 单选按钮保留圆形；主按钮允许实心钢蓝。
-  - primary-deep 仅可在演示分节页使用大面积色场。
----
-
-## Overview
-
-一张工程图纸：冷灰白技术底、钢蓝、压缩标题、模块网格与带四角套准标的透明线框构成主体。
-
-## Colors
-
-页面使用 {colors.background} 技术底、{colors.foreground} 正文和 {colors.primary} 钢蓝；段落级钢蓝文字使用 {colors.primary-dark}，大面积 {colors.primary-deep} 仅用于演示分节色场。主按钮文字用 {colors.primary-foreground}，键盘焦点环用 {colors.ring}。
-
-## Typography
-
-@import url('https://miaoda.feishu.cn/fonts/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
-
-HARD REQUIREMENT：字体加载与字体族分工禁止替换。标题使用 {typography.heading.fontFamily}，正文使用 {typography.body.fontFamily}；中文多行标题行高不低于 1.05，正文不低于 1.5，中文负字距归零。
-
-## Layout
-
-内容沿模块化等宽网格组织，保持清晰的横向与纵向节奏；网格列数与模块顺序根据内容和容器宽度自适应。
-
-## Elevation & Depth
-
-线稿卡片和图框通常不使用投影；需要层级时仅采用源规格的墨色调柔投影，不自造阴影。
-
-## Shapes
-
-组件采用直角、发丝边框和完整的四角套准标；图片使用钢蓝双色化包装器，图标统一 1.5 描边。
-
-## Components
-
-按钮、标签、原生表单、透明卡片、表格、对话框、blueprint 框架与 duotone 图像的精确规格见下方“来源规格”。
-
-## Hard Rules
-
-- 卡片、图框与按钮保持直角；透明卡片和图框保留完整四角套准标。
-- 卡片与图框保持透明线稿，主按钮是主要的实体钢蓝区域。
-- 标题使用压缩字族，正文使用常规宽度字族。
-- 内容照片使用 blueprint + duotone 包装器，图标描边为 1.5。
-
-## Exceptions
-
-- 对话框可使用 surface 填充；单选按钮保留圆形。
-- 演示分节页可使用 {colors.primary-deep} 整幅色场。
-
-## Source Specification
-
-以下内容从用户提供的原始 design.md 原样保留，仅将标题层级下调以纳入 DSM v1 单文件结构。
-
-### 一句话定位
-
-一张工程图纸。浅色技术底上的钢蓝，Barlow Condensed 标题配 Barlow 正文，模块化网格；卡片、图框、按钮都是**蓝图对象**——直角、发丝边框、四角带 `+` 套准标记。卡片和图框永远保持**透明线稿**；主按钮是图板上唯一的实体——实心钢蓝填充，但直角和角标一样不丢。照片双色化为钢蓝，图标细线。
-
----
-
-### 1. 颜色
-
-#### 基础角色
-
-| Token | 值 | 用途 |
-| --- | --- | --- |
-| `--color-background` | `#f2f2f3` | 图纸底（冷灰白） |
-| `--color-surface` | `#e9e9ea` | 仅 `.input` / `.dialog` 用（卡片**不用**它） |
-| `--color-foreground` | `#1d1f20` | 正文墨色 |
-| `--color-primary` | `#5980a6` | 钢蓝，唯一强调色 |
-| `--color-primary-2` | `#728fab` | 机器派生占位，视作与 primary 同一角色 |
-| `--color-divider` | `foreground` 16% 混合 | 所有发丝边框和分隔 |
-
-**单色方案**：没有第二强调色。`primary-2` 的整条色阶存在只为让两组变量都能解析——`.tag-accent-2` 看起来和 `.tag-accent` 基本一样。
-
-#### 色阶（OKLCH 同一感知明度轴，同 step 视觉重量一致）
-
-**Neutral** `#f5f5f8` · `#e7e7ea` · `#d4d4d7` · `#b7b7ba` · `#98989b` · `#7a7a7d` · `#5d5d60` · `#424244` · `#2b2b2d`
-
-**Primary** `#eef6ff` · `#d6ebff` · `#b5d9fd` · `#94bce3` · `#749dc4` · `#597ea3` · `#416180` · `#2c455d` · `#1d2d3d`
-
-**Primary-2（占位）** `#eef6ff` · `#d6ebff` · `#bdd8f2` · `#9ebbd8` · `#7e9cb8` · `#627d98` · `#486077` · `#314457` · `#1f2d3a`
-
-用法规则：
-- 100–300 → 浅色填充、hover 底、细边框
-- 500 → 该角色基准
-- 700–900 → 浅色填充上的文字、按下态
-- 优先取色阶 step，不要临时 `color-mix()`
-
-#### `--color-primary-900` 的特权
-
-`#1d2d3d` 可以铺**整幅色场**——deck 的分节页就用它：钢蓝作地，文字反白成纸色。这是唯一允许大面积上色的地方。（landing 的数字改走「画出来的规格牌」，落在纸底上，是另一套语法，不是色场。）
-
-#### 对比度红线
-
-primary 对底色只到 **3:1** —— 够图标、大字号、界面 chrome，**不够正文**。段落级钢蓝文字必须用 `--color-primary-700`（`#416180`）。
-
----
-
-### 2. 字体
-
-| Token | 值 |
-| --- | --- |
-| `--font-heading` | `"Barlow Condensed", system-ui, sans-serif` |
-| `--font-heading-weight` | `600` |
-| `--font-body` | `"Barlow", system-ui, sans-serif` |
-
-从 Google Fonts 载入：`Barlow:wght@400;500;700` + `Barlow+Condensed:wght@400;600`
-
-**标题压缩、正文不压缩** —— 这是本系统最容易被做错的一条：全篇都用 Condensed 就毁了对比。
-
-#### 字号阶梯
-
-| 元素 | 字号 | 备注 |
-| --- | --- | --- |
-| h1 | 42px | line-height 1.12，letter-spacing −0.015em |
-| h2 | 32px | 同上 |
-| h3 | 25px | 同上 |
-| h4 | 20px | 同上 |
-| h5 | 16px | 同上 |
-| h6 | 13px | **全大写**，letter-spacing 0.08em |
-| body | 15px | line-height 1.55，weight 400 |
-| figcaption | 11px | foreground 55% |
-| `.card-title` | 17px | heading 族 600 |
-| `.card-kicker` | 10px | 大写，ls 0.1em，钢蓝 |
-| `.btn` / `.input` | 14px | 刻意同字号——注册行里两者并排 |
-| `.tag` | 11px | |
-| `.table th` | 11px | 大写，ls 0.08em，foreground 60% |
-| `.dialog-title` | 20px | |
-
----
-
-### 3. 间距与圆角
-
-密度 **0.85×**（偏紧，已烘进变量）：
-
-```
---space-1: 3.4px   --space-2: 6.8px   --space-3: 10.2px
---space-4: 13.6px  --space-6: 20.4px  --space-8: 27.2px
-```
-
-圆角 token：`--radius-sm: 2px` / `--radius-md: 4px` / `--radius-lg: 7px`
-
-**但组件层把它们全部覆盖掉了** —— 样式表末尾：
-
-```css
-.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
-.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
-.btn { border: 1px solid var(--color-divider); }
-.btn-primary { border-color: var(--color-primary); }
-```
-
-所以实际渲染出来**全部是直角**。radius 变量只对你自己写的元素有意义，组件一律方角。
-
-### 4. 阴影
-
-```
---shadow-sm: 0 1px 2px  (#2b2b2d 14%)
---shadow-md: 0 3px 10px (#2b2b2d 16%)
---shadow-lg: 0 12px 32px (#2b2b2d 22%)
-```
-
-工具类 `.elev-sm / -md / -lg`。但线稿系统里阴影用得极少——透明卡片配投影是矛盾的，谨慎使用。不要自造 box-shadow。
-
----
-
-### 5. 蓝图框架（本系统的核心标识）
-
-```html
-<div class="card blueprint">
-  <i class="corner tl"></i><i class="corner tr"></i>
-  <i class="corner bl"></i><i class="corner br"></i>
-  …
-</div>
-```
-
-`.blueprint` = `position: relative` + 1px `--color-divider` 边 + `border-radius: 0`。
-
-四个 `.corner` 是 11×11px 的十字标，用 `::before`（1px 竖线）+ `::after`（1px 横线）画出，颜色是 `foreground` 55%，定位在框外 −6px 处。
-
-**注意**：`.blueprint` 与图像处理类（`.halftone` / `.plate` / `.duotone`）共用一个包装器时，样式表强制 `overflow: visible`——因为角标画在盒子外面，框必须赢过图像裁剪。
-
-**绝不许从已加框元素上去掉套准标记。** 四个都要，少一个就破了语法。
-
-### 6. 图像处理
-
-```html
-<figure class="blueprint duotone">
-  <i class="corner tl"></i>…
-  <img src="…">
-</figure>
-```
-
-`.duotone` = `position: relative; overflow: hidden` + 一层 `::after` 铺满 `--color-primary`，`mix-blend-mode: color`。效果是照片去饱和后被钢蓝洗过一遍，像跟着主题重新上色的丝网印。
-
-**所有内容照片都必须过这个包装器。** 图和图框跟卡片同样待遇：方角、发丝边、带角标，永不圆角、永不裁切成异形。
-
-### 7. 组件
-
-| 类名 | 说明 |
-| --- | --- |
-| `.btn` + `.btn-primary / -secondary / -ghost / -icon / -block` | 全部方角带边。primary 是实心钢蓝 + 钢蓝边 + 纸色字（图板上唯一实体）；ghost 边框透明；`.btn-icon` 36×36；字体 heading 族 600 / 14px |
-| `.tag` + `.tag-accent / -accent-2 / -neutral / -outline` | 方角小标签（100 底 + 800 字）。单色调色板下 primary-2 与 primary 观感相同 |
-| `.field` + `label` / `.input` / `.radio` + `.dot` / `.seg` + `.seg-opt` | 原生元素表单，无脚本。`.input` 36px 高、surface 底、方角、caret 钢蓝 |
-| `.card` + `.card-kicker / -title / -body / -meta` | **透明**、发丝边、方角；配 `.blueprint` + 四角标使用。`.elev-sm/md/lg` 可选高度 |
-| `.nav` + `.nav-brand` | 顶栏，`border-bottom: none` |
-| `.table` | 大写细字表头 + 8% 墨行线，hover 行底 4% |
-| `.dialog-backdrop` + `.dialog`（`-title / -body / -actions`） | 背景 `neutral-900` 50%；对话框 `min(440px, 100%)`、方角、**surface 填充 + 发丝边**（唯一带填充的容器例外） |
-| `.hr` | 1px 细线，存在但本系统偏好留白——**避免使用** |
-| `.blueprint` + 四个 `.corner` | 上面第 5 节 |
-| `.duotone` | 上面第 6 节 |
-| `.text-muted` | foreground 55% |
-
-#### 交互态（已内建，不要逐页重写）
-
-- `.btn-primary` hover → `--color-primary-600`；active → `--color-primary-700`
-- `.btn-secondary` hover → foreground 7%；active → 14%
-- `.btn-ghost` hover → 钢蓝 10%；active → 18%
-- `.input:hover` → 边框 foreground 45%；`:focus-visible` → 钢蓝边框，`outline-offset: 0`
-- `.radio input:checked + .dot` → 钢蓝填充 + `inset 0 0 0 4px var(--color-background)` 做内圈（这里是圆的——radio 保留 `border-radius: 50%`）
-- `.seg-opt:has(input:checked)` → 钢蓝底 + 纸色字
-- 键盘焦点：`:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px }`
-- `::selection` → 钢蓝 30%
-- disabled → `opacity: 0.45` + `cursor: not-allowed`
-- `a` → 钢蓝，`text-underline-offset: 3px`；`.nav a:hover` / `[aria-current=page]` → 钢蓝
-
-### 8. 图标
-
-Lucide（lucide.dev），**统一 stroke-width 1.5**。不许用粗描边。
-
-### 9. 布局方向
-
-模块化网格：内容放进**等宽单元格**，强横向与纵向节奏，结构可见。别把它做成流动的、居中的、卡片浮起的常规网页——它是图板。
-
----
-
-### 禁止清单
-
-1. 给卡片、图框、按钮加圆角
-2. 给卡片或图框加填充底（它们是线稿；实心 primary 主按钮是唯一刻意的例外）
-3. 从已加框元素上去掉套准标记
-4. 粗描边图标（Lucide 固定 1.5）
-5. 钢蓝之外的装饰色（唯一放行：`--color-primary-900` 在 deck 分节页铺整幅）
-6. 正文用 `--color-primary` 本值（要用 `-700`）
-7. 正文也用 Barlow Condensed
-8. `.hr` 当主要分隔手段
-9. 硬编码 hex / 字体名 / px（token 里已有的）
-
-### 接入方式
-
-```html
-<helmet>
-  <link rel="stylesheet" href="_ds/industry-7eb0c315-f7e5-4fe7-9873-401826ed322b/styles.css">
-  <script src="_ds/industry-7eb0c315-f7e5-4fe7-9873-401826ed322b/_ds_bundle.js"></script>
-</helmet>
-```
-
-组件直接在模板里挂载：
-
-```html
-<x-import component-from-global-scope="Industry_indust.Button" hint-size="auto,40px">Label</x-import>
-```
-
-### 可用模板
-
-- `templates/deck/` —— 21 页演示起点：封面、目录、分节页、分栏、四宫格、数据表、SVG 图表与时间轴、出血图、引言、结尾
-- `templates/landing/` —— 单页产品落地页（虚构产品 Holdfast，紧固件目录）：压缩字 hero、编号规格牌、线框单元格、双色照片
-- `assets/photo.jpg` —— 图像处理页用的参考照片
-
-## Do's and Don'ts
-
-- Do：按上述 token 与签名组件实现视觉语言，并根据用户内容组织信息。
-- Don't：不要为套用示例而改变用户内容的业务语义。

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

@@ -1,226 +0,0 @@
----
-version: alpha
-name: metabase
-name_zh: 湖光蓝调
-description: "纯白主面与大块极浅蓝静区，深蓝文字配明亮蓝主按钮和焦点；Lato 人文无衬线字体，4–12px 圆角、半透明边框、轻投影平铺卡片和较深漫射浮层构成层级。"
-
-colors:
-  background: "#FFFFFF"
-  foreground: "#222C3E"
-  card: "#FFFFFF"
-  primary: "#509EE3"
-  primary-foreground: "#FFFFFF"
-  muted: "#F0F8FF"
-  muted-foreground: "#5A6072"
-  accent: "#F0F8FF"
-  border: "rgba(90, 96, 114, 0.15)"
-  ring: "#509EE3"
-  surface-quiet: "#FAFBFE"
-  placeholder: "#8D93A5"
-  text-hint: "#4C5773"
-
-typography:
-  display:
-    fontFamily: '"Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 48px
-    lineHeight: 1.1
-    fontWeight: 700
-    letterSpacing: "-0.5px"
-  h1:
-    fontFamily: '"Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 40px
-    lineHeight: 1.2
-    fontWeight: 700
-    letterSpacing: "0"
-  h2:
-    fontFamily: '"Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 28px
-    lineHeight: 1.3
-    fontWeight: 700
-    letterSpacing: "0"
-  body:
-    fontFamily: '"Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 16px
-    lineHeight: 1.5
-    fontWeight: 400
-    letterSpacing: "0"
-  small:
-    fontFamily: '"Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif'
-    fontSize: 14px
-    lineHeight: 1.4
-    fontWeight: 400
-    letterSpacing: "0"
-
-rounded:
-  sm: 4px
-  md: 8px
-  lg: 12px
-  pill: 999px
-
-spacing:
-  xs: 4px
-  sm: 8px
-  md: 12px
-  lg: 16px
-  xl: 20px
-  2xl: 24px
-  3xl: 32px
-
-components:
-  button:
-    background: "{colors.primary}"
-    color: "{colors.primary-foreground}"
-    borderRadius: "{rounded.md}"
-    description: "主按钮用强调蓝实底 + 8px 圆角;次级为描边按钮(border {colors.border}、文字 {colors.foreground})。"
-  card:
-    background: "{colors.card}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.lg}"
-    boxShadow: "0 1px 2px rgba(16, 24, 40, 0.05)"
-    description: "干净白卡,纤细半透明中性边框 + 柔和漫射阴影,避免生硬边缘。"
-  chip:
-    borderRadius: "{rounded.pill}"
-    description: "柔和药丸标签,弱底 {colors.muted} 用于分类与筛选。"
-  input:
-    background: "{colors.background}"
-    border: "1px solid {colors.border}"
-    borderRadius: "{rounded.md}"
-    description: "干净描边输入框,聚焦描边转 {colors.primary}。"
-  hero:
-    background: "{colors.background}"
-    description: "大号标题 + 副标 + 两个醒目 CTA,纯白平面无渐变。"
-
-anchors:
-  - id: white-plus-vivid-blue
-    type: token
-    desc: "纯白底 + 醒目主色蓝强调(见 colors.primary),柔和中性调色板不与数据竞争"
-  - id: humanist-sans-bold-heads
-    type: token
-    desc: "人文无衬线全局承载,标题用 700 字重建立清晰层级"
-  - id: blue-solid-button
-    type: component
-    desc: "主按钮强调蓝实底 + 中圆角(见 rounded.md),次级为描边按钮"
-  - id: soft-shadow-card
-    type: component
-    desc: "白卡靠柔和漫射阴影 + 纤细半透明中性边框(colors.border)定义,无生硬边缘"
-  - id: open-airy-layout
-    type: pattern
-    desc: "标准居中容器 + 清晰分节线 + 充足留白,开放通透"
-  - id: rounded-corners-only
-    type: pattern
-    desc: "卡片与按钮一律圆角,不用尖锐 90 度直角"
-
-gaps:
-  - "深色模式:源明确排除,只做明亮浅色主题"
-  - "chip:源未明确出现,按柔和药丸形推导(见 Components)"
-  - "看板图表序列色:源未逐一给出,已按 primary 主序列 + 中性梯度补推(见 Components)"
----
-
-## Overview
-
-利用 AI 回答问题的开源分析平台。设计系统是一个简洁、数据驱动的仪表盘——一个精确的仪器面板,信息清晰度是首要结构原则;身份建立在开源、分析、AI 驱动与数据之上,构成从颜色到组件每个决策的逻辑基础。
-
-**One-liner:** 利用 AI 回答问题的开源分析平台。
-**Keywords:** 开源 · 数据分析 · AI 驱动 · 数据
-**Analogy:** 一个简洁、数据驱动的仪表盘。
-
-## Colors
-
-色彩系统简洁且以数据为中心,醒目主色蓝点缀白色背景,创造高清晰度画布,让数据可视化与交互元素呈现而不产生视觉竞争;调色板作为专业中立的框架。
-
-- **底色 `colors.background` `#FFFFFF`** — 主背景,纯白平面。
-- **卡面 `colors.card` `#FFFFFF`** — 白卡底色。
-- **柔底 `colors.muted` `#F0F8FF`** — 浅蓝静区与筛选区底色。
-- **静区 `colors.surface-quiet` `#FAFBFE`** — 极浅静区。
-- **正文 `colors.foreground` `#222C3E`** — 主要文本与关键数字。
-- **次级文本 `colors.muted-foreground` `#5A6072`** — 说明性文本。
-- **弱化 `colors.placeholder` `#8D93A5`** — 占位符。
-- **弱提示 `colors.text-hint` `#4C5773`** — 次级提示文字。
-- **主色 `colors.primary` `#509EE3`** — 醒目主色蓝,用于主按钮与交互焦点;`colors.ring` 同值作聚焦环,主按钮上的文字用 `colors.primary-foreground` `#FFFFFF`。
-- **弱强调底 `colors.accent` `#F0F8FF`** — 悬停、选中行和加载占位的浅蓝底。
-- **分隔线 `colors.border` `rgba(90, 96, 114, 0.15)`** — 纤细半透明中性边框。
-
-**用色原则:** 简洁数据导向,以白底上的醒目强调蓝为主色;不引入高对比霓虹色。
-
-## Typography
-
-字体由 Lato 人文主义无衬线系列处理,因干净专业与跨屏可读性被选用;比例从主标题到辅助文本逐步递进,为数据驱动内容建立清晰层级。
-
-- **@import(HARD REQUIREMENT / 禁止替换,原样写入全局样式首行):**
-  `@import url('https://miaoda.feishu.cn/fonts/css2?family=Lato:wght@400;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');`
-- **字体栈:** `"Lato", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif` —— 拉丁用 Lato(源推荐,人文无衬线),中文用 Noto Sans SC(气质同为清晰人文无衬线),系统字体末位保底。
-
-| 角色 | Size | Line-height | Weight | Letter-spacing | 用法 |
-|---|---|---|---|---|---|
-| display | 48px | 1.1 | 700 | -0.5px | 主标题 |
-| h1 | 40px | 1.2 | 700 | 0 | 主要章节标题 |
-| h2 | 28px | 1.3 | 700 | 0 | 子章节标题 |
-| body | 16px | 1.5 | 400 | 0 | 正文文本 |
-| small | 14px | 1.4 | 400 | 0 | 辅助文本 |
-
-**字体规则:**
-- 标题用 Lato 700 字重建立层级;正文用 400 字重保持易读。
-- display 用 -0.5px 负字距收紧,其余标题字距为 0。
-- **CJK 行高转译:** display 负字距在中文场景清零;中文标题 line-height 保持 ≥1.1,中文正文 ≥1.5,避免字形重叠。
-
-## Layout
-
-标准居中容器,提供稳定熟悉的框架;用清晰分节线与充足空白划分内容,保持开放通透。
-
-- **Container max:** 1280px
-- **Paragraph max:** 680px
-- **Grid:** 12 columns, gutter 24px
-- **Breakpoints:** 768 / 1024 px
-- **Rhythm:** 8px 基础单位 + 4px 微间距(见 spacing.xs / spacing.sm)。
-
-12 列仅作为对齐工具，不要求固定分栏、组件位置或页面骨架；实际列数与跨度按内容关系决定。
-
-## Elevation & Depth
-
-表面靠柔和漫射阴影创造微妙深度,避免生硬边缘;边框始终纤细浅淡,用半透明中性色定义卡片与输入框而不增加视觉重量。
-
-- 0 1px 2px rgba(16, 24, 40, 0.05)
-- 0 16px 28px -6px rgba(24, 39, 75, 0.12)
-- 0 32px 88px -4px rgba(24, 39, 75, 0.14)
-- **Borders:** 1px 实线 colors.border。
-
-## Shapes
-
-圆角一致,卡片与按钮用小到中圆角,药丸标签用满圆角;不用尖锐直角。
-
-- **Radius:** sm 4px(见 rounded.sm) · md 8px(rounded.md) · lg 12px(rounded.lg) · pill 999px(rounded.pill)
-- **Borders:** 1px 半透明中性边框 colors.border。
-
-## Components
-
-- **button:** 主按钮强调蓝实底(background {colors.primary}、文字 {colors.primary-foreground}、圆角 {rounded.md});次级为描边按钮(border {colors.border}、文字 {colors.foreground})。
-- **card:** 干净白卡(background {colors.card}、border 1px {colors.border}、圆角 {rounded.lg}),柔和漫射阴影 rgba(16,24,40,0.05)。
-- **chip:** 柔和药丸标签(圆角 {rounded.pill}),弱底 {colors.muted},用于分类与筛选。
-- **input:** 干净描边输入框(border 1px {colors.border}、圆角 {rounded.md}),聚焦描边转 {colors.primary}。
-- **hero:** 大号标题 + 副标 + 两个醒目 CTA,纯白平面无渐变。
-- **看板图表(数据看板落地补充):** 主序列用 colors.primary 醒目蓝,次序列/对比用 colors.placeholder 与柔和中性梯度;图表容器为白卡,柔和漫射阴影 + colors.border 纤细边框成组,不引入高对比霓虹色。
-
-## Do's and Don'ts
-
-**Do:**
-- 用清晰分节线与充足留白保持开放通透。
-- 标题用 700 字重建立粗体层级。
-- 卡片/按钮一律圆角,配柔和漫射阴影。
-
-**Don't:**
-- 别在正文用纤细优雅衬线 —— 一律人文无衬线。
-- 别用密集大段文字缺留白 —— 布局开放通透。
-- 别用复杂渐变做主背景 —— 背景纯白或极浅浅蓝。
-
-## Hard Rules
-
-- 不使用深色模式:背景始终明亮浅色 colors.background(#FFFFFF),只做浅色主题。
-- 不使用高对比霓虹色:强调统一用醒目主色蓝 colors.primary,其余为柔和中性。
-- 卡片与按钮不用尖锐 90 度直角,一律圆角。
-- 正文一律人文无衬线,不用纤细优雅衬线承载可读文本。
-- 主背景不用复杂渐变,保持纯白或极浅浅蓝平面。
-
-## Exceptions
-
-- 主按钮允许唯一的强调蓝实底(colors.primary):它是界面上主要的实底色块,承担关键行动召唤;次级动作用描边按钮。
-- 悬浮层/模态可用更深的第二/三层漫射阴影(0 16px 28px / 0 32px 88px),平铺卡片仍用第一层 0.05 极轻投影。