{
  "_meta": {
    "extractedAt": "2026-05-18T09:46:54.575Z",
    "source": "figma-api",
    "purpose": "Figma 真源 Style 系统 normalized truth — Text Styles + Effect Styles + Scale tokens",
    "consumers": [
      "src/tokens/variables.css (canonical token values)",
      "src/design-system/translation/token-aliases.ts (figma Style name → canonical token alias)"
    ],
    "figmaFileKey": "YbsPRUVmNdsbN40NNwh1Gn"
  },
  "textStyles": {
    "Roboto/22 large title": {
      "fontFamily": "Roboto",
      "fontWeight": 600,
      "fontSize": 22,
      "lineHeight": 33,
      "lineHeightPercent": 150,
      "letterSpacing": 0,
      "canonicalToken": "--text-style-large-title-22"
    },
    "Roboto/12 tips": {
      "fontFamily": "Roboto",
      "fontWeight": 400,
      "fontSize": 12,
      "lineHeight": 16,
      "lineHeightPercent": 133,
      "letterSpacing": 0,
      "canonicalToken": "--text-style-tips"
    },
    "Roboto/16 pop title": {
      "fontFamily": "Roboto",
      "fontWeight": 600,
      "fontSize": 16,
      "lineHeight": 24,
      "lineHeightPercent": 150,
      "letterSpacing": 0,
      "canonicalToken": "--text-style-pop-title",
      "description": "headline 3"
    },
    "Roboto/18 headline 2": {
      "fontFamily": "Roboto",
      "fontWeight": 600,
      "fontSize": 18,
      "lineHeight": 27,
      "lineHeightPercent": 150,
      "letterSpacing": 0,
      "canonicalToken": "--text-style-headline-2"
    },
    "Roboto/14 body": {
      "fontFamily": "Roboto",
      "fontWeight": 400,
      "fontSize": 14,
      "lineHeight": 21,
      "lineHeightPercent": 150,
      "letterSpacing": 0,
      "canonicalToken": "--text-style-body"
    },
    "Roboto/20 headline 1": {
      "fontFamily": "Roboto",
      "fontWeight": 600,
      "fontSize": 20,
      "lineHeight": 30,
      "lineHeightPercent": 150,
      "letterSpacing": 0,
      "canonicalToken": "--text-style-headline-1"
    },
    "Roboto/24 large title": {
      "fontFamily": "Roboto",
      "fontWeight": 600,
      "fontSize": 24,
      "lineHeight": 36,
      "lineHeightPercent": 150,
      "letterSpacing": 0,
      "canonicalToken": "--text-style-large-title-24"
    },
    "Roboto/PingFang SC/22 large title": {
      "fontFamily": "PingFang SC",
      "fontWeight": 600,
      "fontSize": 22,
      "lineHeight": 33,
      "lineHeightPercent": 150,
      "letterSpacing": 0
    },
    "Roboto/PingFang SC/16 pop title": {
      "fontFamily": "PingFang SC",
      "fontWeight": 600,
      "fontSize": 16,
      "lineHeight": 24,
      "lineHeightPercent": 150,
      "letterSpacing": 0
    },
    "Roboto/PingFang SC/12 tips": {
      "fontFamily": "PingFang SC",
      "fontWeight": 400,
      "fontSize": 12,
      "lineHeight": 16,
      "lineHeightPercent": 133,
      "letterSpacing": 0
    },
    "Roboto/PingFang SC/20 headline 1": {
      "fontFamily": "PingFang SC",
      "fontWeight": 600,
      "fontSize": 20,
      "lineHeight": 30,
      "lineHeightPercent": 150,
      "letterSpacing": 0
    },
    "Roboto/PingFang SC/18 headline 2": {
      "fontFamily": "PingFang SC",
      "fontWeight": 600,
      "fontSize": 18,
      "lineHeight": 27,
      "lineHeightPercent": 150,
      "letterSpacing": 0
    },
    "Roboto/PingFang SC/14 body": {
      "fontFamily": "PingFang SC",
      "fontWeight": 400,
      "fontSize": 14,
      "lineHeight": 21,
      "lineHeightPercent": 150,
      "letterSpacing": 0
    },
    "Roboto/PingFang SC/24 large title": {
      "fontFamily": "PingFang SC",
      "fontWeight": 600,
      "fontSize": 24,
      "lineHeight": 36,
      "lineHeightPercent": 150,
      "letterSpacing": 0
    }
  },
  "effectStyles": {
    "L2 shadow": {
      "type": "multi-layer-drop-shadow",
      "layers": [
        {
          "offsetX": 0,
          "offsetY": 9,
          "blur": 28,
          "spread": 8,
          "color": "#0000000d",
          "opacityHex": "0d",
          "opacityPercent": 5
        },
        {
          "offsetX": 0,
          "offsetY": 6,
          "blur": 16,
          "spread": 0,
          "color": "#00000014",
          "opacityHex": "14",
          "opacityPercent": 8
        },
        {
          "offsetX": 0,
          "offsetY": 3,
          "blur": 6,
          "spread": -4,
          "color": "#0000001f",
          "opacityHex": "1f",
          "opacityPercent": 12
        }
      ],
      "cssBoxShadow": "0px 9px 28px 8px #0000000d, 0px 6px 16px 0px #00000014, 0px 3px 6px -4px #0000001f",
      "canonicalToken": "--shadow-l2",
      "usage": "Stable popovers / menus / tool panels"
    },
    "L3 shadow": {
      "type": "multi-layer-drop-shadow",
      "layers": [
        {
          "offsetX": 0,
          "offsetY": 12,
          "blur": 48,
          "spread": 16,
          "color": "#00000008",
          "opacityHex": "08",
          "opacityPercent": 3
        },
        {
          "offsetX": 0,
          "offsetY": 9,
          "blur": 28,
          "spread": 0,
          "color": "#0000000d",
          "opacityHex": "0d",
          "opacityPercent": 5
        },
        {
          "offsetX": 0,
          "offsetY": 6,
          "blur": 16,
          "spread": -8,
          "color": "#00000014",
          "opacityHex": "14",
          "opacityPercent": 8
        }
      ],
      "cssBoxShadow": "0px 12px 48px 16px #00000008, 0px 9px 28px 0px #0000000d, 0px 6px 16px -8px #00000014",
      "canonicalToken": "--shadow-l3",
      "usage": "Large floating surfaces — Tooltip / Notification / Popconfirm strong elevation"
    },
    "L1 shadow": {
      "type": "multi-layer-drop-shadow",
      "layers": [
        {
          "offsetX": 0,
          "offsetY": 5,
          "blur": 12,
          "spread": 4,
          "color": "#00000017",
          "opacityHex": "17",
          "opacityPercent": 9
        },
        {
          "offsetX": 0,
          "offsetY": 3,
          "blur": 6,
          "spread": 0,
          "color": "#0000001f",
          "opacityHex": "1f",
          "opacityPercent": 12
        },
        {
          "offsetX": 0,
          "offsetY": 1,
          "blur": 2,
          "spread": -2,
          "color": "#00000029",
          "opacityHex": "29",
          "opacityPercent": 16
        }
      ],
      "cssBoxShadow": "0px 5px 12px 4px #00000017, 0px 3px 6px 0px #0000001f, 0px 1px 2px -2px #00000029",
      "canonicalToken": "--shadow-l1",
      "usage": "Lightweight floating layers — dropdowns, slider thumbs, subtle lifts"
    },
    "Mask blur8 #000-60%": {
      "type": "background-blur",
      "blur": 8,
      "background": "#000",
      "opacity": 0.6,
      "cssBackdropFilter": "blur(8px)",
      "cssBackground": "rgba(0, 0, 0, 0.6)",
      "canonicalToken": "--mask-overlay (bg) + --mask-overlay-blur (filter)",
      "usage": "Backdrop mask for Dialog / Drawer / global overlays",
      "cssFilter": "blur(8px)"
    }
  },
  "scaleTokens": {
    "spacing": {
      "_basis": "tvu design system.basic size (px values)",
      "xxs": {
        "value": 4,
        "canonicalToken": "--sp-xxs",
        "figmaPath": "tvu design system.spacing.xxs → basic size.#4"
      },
      "xs": {
        "value": 8,
        "canonicalToken": "--sp-xs",
        "figmaPath": "spacing.xs → #8"
      },
      "s": {
        "value": 12,
        "canonicalToken": "--sp-s",
        "figmaPath": "spacing.s → #12"
      },
      "m": {
        "value": 16,
        "canonicalToken": "--sp-m",
        "figmaPath": "spacing.m → #16"
      },
      "l": {
        "value": 24,
        "canonicalToken": "--sp-l",
        "figmaPath": "spacing.l → #24"
      },
      "xl": {
        "value": 32,
        "canonicalToken": "--sp-xl",
        "figmaPath": "spacing.xl → #32"
      },
      "xxl": {
        "value": 40,
        "canonicalToken": "--sp-xxl",
        "figmaPath": "spacing.xxl → #40"
      },
      "xxxl": {
        "value": 56,
        "canonicalToken": "--sp-xxxl",
        "figmaPath": "spacing.xxxl → #56"
      }
    },
    "radius": {
      "xs": {
        "value": 2,
        "canonicalToken": "--r-xs",
        "figmaPath": "radius.xs → #2"
      },
      "s": {
        "value": 4,
        "canonicalToken": "--r-s",
        "figmaPath": "radius.s → #4"
      },
      "m": {
        "value": 8,
        "canonicalToken": "--r-m",
        "figmaPath": "radius.m → #8"
      },
      "l": {
        "value": 12,
        "canonicalToken": "--r-l",
        "figmaPath": "radius.l → #12"
      },
      "xl": {
        "value": 16,
        "canonicalToken": "--r-xl",
        "figmaPath": "radius.xl → #16"
      },
      "xxl": {
        "value": 20,
        "canonicalToken": "--r-xxl",
        "figmaPath": "radius.xxl → #20"
      }
    }
  },
  "_alignment_decisions": {
    "L1_L2_L3_simplified_in_canonical_BEFORE_2026_05_07": "canonical 之前用单层 box-shadow w/ high opacity (32%/48%/64%)。Figma 真源是 3-layered drop shadows w/ low opacities (3-16%) — 不同视觉深度。Decision (2026-05-07): update canonical to figma 3-layered truth.",
    "Mask_blur_canonical_value_change": "canonical --mask-overlay 之前 0.64; figma 真源 0.6 (60%) + 8px blur。Update canonical bg to 0.6 + 加 --mask-overlay-blur: 8px token。",
    "Text_Style_tokens_NOT_in_canonical_BEFORE_2026_05_07": "canonical 当前 typography 全 hardcoded inline (font-size: 14px; line-height: 21px) 在各 component CSS。Add 7 text-style composite + atomic tokens to enable canonical CSS use var(--text-style-body) instead of hardcode."
  }
}