{
  "meta": {
    "name": "Tiny Component Recipes",
    "version": "0.1.0"
  },
  "components": [
    {
      "id": "navigation-pill",
      "name": "悬浮导航胶囊",
      "when": "长页面有 4–6 个主要锚点，需要轻量定位。",
      "anatomy": [
        "品牌名",
        "细分隔",
        "锚点链接",
        "当前状态"
      ],
      "defaults": [
        "暖白纸面",
        "细米色描边",
        "pill 圆角",
        "桌面悬浮，移动端简化品牌副信息"
      ],
      "avoid": [
        "超过 6 个一级入口",
        "把外站入口全部塞进主导航",
        "用悬停才显示文字"
      ]
    },
    {
      "id": "button",
      "name": "主次按钮",
      "when": "页面需要一个明确的下一步，或一个并列但更轻的操作。",
      "anatomy": [
        "清楚动词",
        "可选方向标识",
        "focus 状态",
        "disabled 状态"
      ],
      "defaults": [
        "主按钮墨黑底白字",
        "次按钮纸面细边框蓝字",
        "触控高度不低于 44px",
        "hover 仅轻微上移或变色"
      ],
      "avoid": [
        "同一区域出现两个主按钮",
        "仅用图标表达关键操作",
        "危险操作沿用主按钮文案"
      ]
    },
    {
      "id": "paper-card",
      "name": "纸张卡片",
      "when": "内容是独立对象，适合被打开、比较、加入轮播或承载行动。",
      "anatomy": [
        "可选 eyebrow",
        "标题",
        "正文",
        "行动",
        "可选轻装饰"
      ],
      "defaults": [
        "paper 背景",
        "24px 圆角",
        "1px line 描边",
        "柔和 paper 阴影",
        "长文限制在舒适阅读宽度"
      ],
      "avoid": [
        "为了分隔而把每一行都做成卡片",
        "多层嵌套卡片",
        "移动端使用内滚动来控制高度"
      ]
    },
    {
      "id": "content-carousel",
      "name": "内容轮播",
      "when": "一组同等重要但不需要并列浏览的叙事内容，例如瞬间、作品或照片。",
      "anatomy": [
        "卡片舞台",
        "上/下一张按钮",
        "当前位置",
        "自动播放控制（如启用）"
      ],
      "defaults": [
        "横向连续切换",
        "相邻内容预载",
        "悬停与聚焦暂停",
        "固定图片比例、统一卡片最小高度"
      ],
      "avoid": [
        "上下切换配左右箭头",
        "先清空后加载",
        "自动轮播没有停止入口",
        "缩窄后裁掉配图"
      ]
    },
    {
      "id": "section-heading",
      "name": "章节标题",
      "when": "长页需要帮助用户理解目前所在的内容章节。",
      "anatomy": [
        "小号编号 / 英文元信息",
        "中文标题",
        "可选右侧行动或说明"
      ],
      "defaults": [
        "编号使用低饱和蓝",
        "标题用手写展示字体",
        "操作保持在同一基线或在移动端自然折行"
      ],
      "avoid": [
        "每段文字都用章节标题",
        "标题与正文对比不足",
        "纯装饰编号占据更多注意力"
      ]
    },
    {
      "id": "moment-card",
      "name": "瞬间叙事卡",
      "when": "以一张横图加一段短文讲一个有时间感的经历。",
      "anatomy": [
        "16:9 配图",
        "年份",
        "标题",
        "80–130 字正文",
        "可选标签"
      ],
      "defaults": [
        "桌面横向固定舞台",
        "移动端配图与文字居中",
        "文字区有统一最低高度但不滚动",
        "圆角由图片框和外卡共同承担"
      ],
      "avoid": [
        "标题过大压过配图",
        "卡片高度随段落跳变",
        "把时间线放进每张卡导致重复"
      ]
    }
  ]
}