{
  "_meta": {
    "verifiedAt": "2026-06-12T00:00:00Z",
    "fileKey": "YbsPRUVmNdsbN40NNwh1Gn",
    "method": "published-catalog-read",
    "collection": { "name": "TVU Design System", "id": "VariableCollectionId:1558:94780", "variableCount": 98, "modes": ["Dark", "Light"], "defaultMode": "Dark" },
    "notes": [
      "All semantic color variables are aliases that resolve to UX/Grey primitives per mode. bindApi 'boundVariable' = use figma.variables.setBoundVariableForPaint / node.setBoundVariable('fills',...) or paint binding.",
      "spacing/radius/size are real bindable FLOAT Number Variables (resolvedType FLOAT). spacing scopes=GAP/LETTER_SPACING/PARAGRAPH_*, radius scopes=CORNER_RADIUS, size scopes=WIDTH_HEIGHT. Each is itself an alias onto a Basic Size/#N primitive but the named token IS the bindable variable.",
      "text styles & effect styles are Figma STYLES (not variables) — bind via node.setTextStyleIdAsync(key->id) / node.setEffectStyleIdAsync. Keys below are publishable keys; import with importStyleByKeyAsync.",
      "Font note: Roboto SemiBold (no space) is the verified style string in this file for text styles >=16. PingFang SC uses 'Semibold' (no space, lowercase b)."
    ],
    "notFound": [
      "No --bg-topbar-named variable named differently; semantic Top Bar exists as 'Color Type/Background/Top Bar'.",
      "Size token --size scale not requested in code map; size variables (Size/* and Module Width/*) captured under numberVars.size for completeness."
    ]
  },
  "semanticColors": {
    "text": [
      { "figmaName": "Color Type/Text/Heading & Button", "values": { "Dark": "#ffffff", "Light": "#000000" }, "canonicalToken": "--text-heading", "variableId": "VariableID:2611:56882", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Text/Text_1", "values": { "Dark": "#f8f8f8", "Light": "#141414" }, "canonicalToken": "--text-body", "variableId": "VariableID:2611:57509", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Text/Text_2", "values": { "Dark": "#cccccc", "Light": "#434343" }, "canonicalToken": "--text-2", "variableId": "VariableID:2611:57609", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Text/Tips", "values": { "Dark": "#9e9e9e", "Light": "#595959" }, "canonicalToken": "--text-tips", "variableId": "VariableID:2611:57610", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Text/Placeholder & Button", "values": { "Dark": "#7b7b7b", "Light": "#9e9e9e" }, "canonicalToken": "--text-placeholder", "variableId": "VariableID:2611:57611", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Text/Disable", "values": { "Dark": "#595959", "Light": "#cccccc" }, "canonicalToken": "--text-disabled", "variableId": "VariableID:2611:57612", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Text/Primary Button", "values": { "Dark": "#f8f8f8", "Light": "#f8f8f8" }, "canonicalToken": null, "variableId": "VariableID:4263:102", "bindApi": "boundVariable", "note": "no code-map entry; scopes=ALL_SCOPES" },
      { "figmaName": "Color Type/Text/Enable Grey button", "values": { "Dark": "#cccccc", "Light": "#434343" }, "canonicalToken": null, "variableId": "VariableID:2611:57613", "bindApi": "boundVariable", "note": "component-state token, no global code-map entry" },
      { "figmaName": "Color Type/Text/Hover Grey button", "values": { "Dark": "#cccccc", "Light": "#434343" }, "canonicalToken": null, "variableId": "VariableID:2611:57627", "bindApi": "boundVariable", "note": "component-state token" },
      { "figmaName": "Color Type/Text/Disable Grey Button", "values": { "Dark": "#7b7b7b", "Light": "#9e9e9e" }, "canonicalToken": null, "variableId": "VariableID:2611:57614", "bindApi": "boundVariable", "note": "component-state token" }
    ],
    "icon": [
      { "figmaName": "Color Type/Icon/Active & Hover", "values": { "Dark": "#f8f8f8", "Light": "#434343" }, "canonicalToken": "--icon-active", "variableId": "VariableID:2611:57615", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Icon/Default", "values": { "Dark": "#9e9e9e", "Light": "#595959" }, "canonicalToken": "--icon-default", "variableId": "VariableID:2611:57617", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Icon/Placeholder", "values": { "Dark": "#7b7b7b", "Light": "#9e9e9e" }, "canonicalToken": "--icon-placeholder", "variableId": "VariableID:4264:16525", "bindApi": "boundVariable", "note": "scopes=ALL_SCOPES" },
      { "figmaName": "Color Type/Icon/Disable", "values": { "Dark": "#595959", "Light": "#cccccc" }, "canonicalToken": "--icon-disabled", "variableId": "VariableID:2611:57618", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Icon/Disable Grey Button", "values": { "Dark": "#7b7b7b", "Light": "#9e9e9e" }, "canonicalToken": null, "variableId": "VariableID:4600:22579", "bindApi": "boundVariable", "note": "component-state token, no global code-map entry" }
    ],
    "background": [
      { "figmaName": "Color Type/Background/Layer_1", "values": { "Dark": "#141414", "Light": "#ffffff" }, "canonicalToken": "--bg-layer1", "variableId": "VariableID:2611:57619", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Background/Layer_2", "values": { "Dark": "#1f1f1f", "Light": "#f8f8f8" }, "canonicalToken": "--bg-layer2", "variableId": "VariableID:2611:57620", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Background/Layer_3", "values": { "Dark": "#262626", "Light": "#f0f0f0" }, "canonicalToken": "--bg-layer3", "variableId": "VariableID:2611:57621", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Background/Layer_4", "values": { "Dark": "#353535", "Light": "#dbdbdb" }, "canonicalToken": "--bg-layer4", "variableId": "VariableID:2611:57622", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Background/Top Bar", "values": { "Dark": "#000000", "Light": "#ffffff" }, "canonicalToken": "--bg-topbar", "variableId": "VariableID:2611:57623", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Background/Enable Grey Button", "values": { "Dark": "#434343", "Light": "#dbdbdb" }, "canonicalToken": null, "variableId": "VariableID:2611:57625", "bindApi": "boundVariable", "note": "component-state token" },
      { "figmaName": "Color Type/Background/Hover Grey Button", "values": { "Dark": "#595959", "Light": "#cccccc" }, "canonicalToken": null, "variableId": "VariableID:2611:57624", "bindApi": "boundVariable", "note": "component-state token" },
      { "figmaName": "Color Type/Background/Disable Grey Button", "values": { "Dark": "#434343", "Light": "#dbdbdb" }, "canonicalToken": null, "variableId": "VariableID:2611:57626", "bindApi": "boundVariable", "note": "component-state token" }
    ],
    "line": [
      { "figmaName": "Color Type/Line/Popup Border", "values": { "Dark": "#595959", "Light": "#f0f0f0" }, "canonicalToken": "--line-border", "variableId": "VariableID:2611:57628", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Line/Deep Divider", "values": { "Dark": "#353535", "Light": "#dbdbdb" }, "canonicalToken": "--line-deep", "variableId": "VariableID:2611:57629", "bindApi": "boundVariable" },
      { "figmaName": "Color Type/Line/Light Divider", "values": { "Dark": "#434343", "Light": "#cccccc" }, "canonicalToken": "--line-light", "variableId": "VariableID:2611:57630", "bindApi": "boundVariable" }
    ]
  },
  "greyPrimitives": [
    { "figmaName": "UX/Grey/grey-1 #FFFFFF", "values": { "Dark": "#ffffff", "Light": "#ffffff" }, "canonicalToken": "--color-white", "variableId": "VariableID:1558:94781" },
    { "figmaName": "UX/Grey/grey-2 #F8F8F8", "values": { "Dark": "#f8f8f8", "Light": "#f8f8f8" }, "canonicalToken": "--color-grey-2", "variableId": "VariableID:1558:94782" },
    { "figmaName": "UX/Grey/grey-3 #F0F0F0", "values": { "Dark": "#f0f0f0", "Light": "#f0f0f0" }, "canonicalToken": "--color-grey-3", "variableId": "VariableID:1558:94783" },
    { "figmaName": "UX/Grey/grey-4 #DBDBDB", "values": { "Dark": "#dbdbdb", "Light": "#dbdbdb" }, "canonicalToken": "--color-grey-4", "variableId": "VariableID:1558:94784" },
    { "figmaName": "UX/Grey/grey-5 #CCCCCC", "values": { "Dark": "#cccccc", "Light": "#cccccc" }, "canonicalToken": "--color-grey-5", "variableId": "VariableID:1558:94785" },
    { "figmaName": "UX/Grey/grey-6 #9E9E9E", "values": { "Dark": "#9e9e9e", "Light": "#9e9e9e" }, "canonicalToken": "--color-grey-6", "variableId": "VariableID:1558:94786" },
    { "figmaName": "UX/Grey/grey-7 #7B7B7B", "values": { "Dark": "#7b7b7b", "Light": "#7b7b7b" }, "canonicalToken": "--color-grey-7", "variableId": "VariableID:1608:170962" },
    { "figmaName": "UX/Grey/grey-8 #595959", "values": { "Dark": "#595959", "Light": "#595959" }, "canonicalToken": "--color-grey-8", "variableId": "VariableID:1558:94787" },
    { "figmaName": "UX/Grey/grey-9 #434343", "values": { "Dark": "#434343", "Light": "#434343" }, "canonicalToken": "--color-grey-9", "variableId": "VariableID:1558:94788" },
    { "figmaName": "UX/Grey/grey-10 #353535", "values": { "Dark": "#353535", "Light": "#353535" }, "canonicalToken": "--color-grey-10", "variableId": "VariableID:1558:94789" },
    { "figmaName": "UX/Grey/grey-11 #262626", "values": { "Dark": "#262626", "Light": "#262626" }, "canonicalToken": "--color-grey-11", "variableId": "VariableID:1558:94790" },
    { "figmaName": "UX/Grey/grey-12 #1F1F1F", "values": { "Dark": "#1f1f1f", "Light": "#1f1f1f" }, "canonicalToken": "--color-grey-12", "variableId": "VariableID:1558:94791" },
    { "figmaName": "UX/Grey/grey-13 #141414", "values": { "Dark": "#141414", "Light": "#141414" }, "canonicalToken": "--color-grey-13", "variableId": "VariableID:1558:94792" },
    { "figmaName": "UX/Grey/grey-14 #000000", "values": { "Dark": "#000000", "Light": "#000000" }, "canonicalToken": "--color-grey-14", "variableId": "VariableID:1558:94793" }
  ],
  "brandSemanticColors": [
    { "figmaName": "UX/Brand/Brand", "values": { "Dark": "#2fb54e", "Light": "#299f45" }, "variableId": "VariableID:1626:104889" },
    { "figmaName": "UX/Brand/Match,Hover", "values": { "Dark": "#0b2b13", "Light": "#f1fbf3" }, "variableId": "VariableID:1626:104890" },
    { "figmaName": "UX/Brand/Disable", "values": { "Dark": "#1a652c", "Light": "#8fcc9d" }, "variableId": "VariableID:1626:104891" },
    { "figmaName": "UX/Brand/Hover", "values": { "Dark": "#41c760", "Light": "#00ac39" }, "variableId": "VariableID:1626:104892" },
    { "figmaName": "UX/Red/Default", "values": { "Dark": "#ea4233", "Light": "#dc2717" }, "variableId": "VariableID:1671:111623" },
    { "figmaName": "UX/Red/Hover 1", "values": { "Dark": "#ed5b4e", "Light": "#eb493a" }, "variableId": "VariableID:1671:111625" },
    { "figmaName": "UX/Red/Msg-bg", "values": { "Dark": "#fff1f0", "Light": "#fff1f0" }, "variableId": "VariableID:1671:111677" },
    { "figmaName": "UX/Orange/Default", "values": { "Dark": "#f68512", "Light": "#e26601" }, "variableId": "VariableID:1671:114765" },
    { "figmaName": "UX/Orange/Hover 1", "values": { "Dark": "#f89c3e", "Light": "#e97413" }, "variableId": "VariableID:1671:114768" },
    { "figmaName": "UX/Orange/Msg-bg", "values": { "Dark": "#fff3db", "Light": "#fff3db" }, "variableId": "VariableID:1671:114769" },
    { "figmaName": "UX/Orange/Time Zone", "values": { "Dark": "#d39f39", "Light": "#d39f39" }, "variableId": "VariableID:2986:79742" },
    { "figmaName": "UX/Blue/Default", "values": { "Dark": "#3892f3", "Light": "#0473d5" }, "variableId": "VariableID:1671:114779" },
    { "figmaName": "UX/Blue/Hover 1", "values": { "Dark": "#62a9f6", "Light": "#118dfb" }, "variableId": "VariableID:1671:114780" },
    { "figmaName": "UX/Blue/Msg-bg", "values": { "Dark": "#e1eefd", "Light": "#e1eefd" }, "variableId": "VariableID:1671:114781" }
  ],
  "numberVars": {
    "spacing": [
      { "figmaName": "Spacing/XXS", "value": 4, "variableId": "VariableID:2566:30030", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-xxs" },
      { "figmaName": "Spacing/XS", "value": 8, "variableId": "VariableID:2566:30031", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-xs" },
      { "figmaName": "Spacing/S", "value": 12, "variableId": "VariableID:2566:30032", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-s" },
      { "figmaName": "Spacing/M", "value": 16, "variableId": "VariableID:2566:30033", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-m" },
      { "figmaName": "Spacing/L", "value": 24, "variableId": "VariableID:2566:30034", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-l" },
      { "figmaName": "Spacing/XL", "value": 32, "variableId": "VariableID:2566:30035", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-xl" },
      { "figmaName": "Spacing/XXL", "value": 40, "variableId": "VariableID:2566:30036", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-xxl" },
      { "figmaName": "Spacing/XXXL", "value": 56, "variableId": "VariableID:2566:30037", "resolvedType": "FLOAT", "bindable": true, "scopes": ["GAP", "LETTER_SPACING", "PARAGRAPH_SPACING", "PARAGRAPH_INDENT"], "canonicalToken": "--sp-xxxl" }
    ],
    "radius": [
      { "figmaName": "Radius/XS", "value": 2, "variableId": "VariableID:2599:68160", "resolvedType": "FLOAT", "bindable": true, "scopes": ["CORNER_RADIUS"], "canonicalToken": "--r-xs" },
      { "figmaName": "Radius/S", "value": 4, "variableId": "VariableID:2599:68161", "resolvedType": "FLOAT", "bindable": true, "scopes": ["CORNER_RADIUS"], "canonicalToken": "--r-s" },
      { "figmaName": "Radius/M", "value": 8, "variableId": "VariableID:2599:77691", "resolvedType": "FLOAT", "bindable": true, "scopes": ["CORNER_RADIUS"], "canonicalToken": "--r-m" },
      { "figmaName": "Radius/L", "value": 12, "variableId": "VariableID:2599:77692", "resolvedType": "FLOAT", "bindable": true, "scopes": ["CORNER_RADIUS"], "canonicalToken": "--r-l" },
      { "figmaName": "Radius/XL", "value": 16, "variableId": "VariableID:2599:77693", "resolvedType": "FLOAT", "bindable": true, "scopes": ["CORNER_RADIUS"], "canonicalToken": null, "note": "no code-map entry; extend if needed" },
      { "figmaName": "Radius/XXL", "value": 20, "variableId": "VariableID:2599:77694", "resolvedType": "FLOAT", "bindable": true, "scopes": ["CORNER_RADIUS"], "canonicalToken": null, "note": "no code-map entry; extend if needed" }
    ],
    "size": [
      { "figmaName": "Size/XXXXS", "value": 16, "variableId": "VariableID:2599:51287", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Size/XXXS", "value": 24, "variableId": "VariableID:2599:51286", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Size/XXS", "value": 32, "variableId": "VariableID:2599:51285", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Size/XS", "value": 40, "variableId": "VariableID:2599:51281", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Size/S", "value": 64, "variableId": "VariableID:2599:51284", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Size/M", "value": 80, "variableId": "VariableID:2599:51282", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Size/L", "value": 264, "variableId": "VariableID:2599:51283", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/XXS", "value": 200, "variableId": "VariableID:2566:34915", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/XS", "value": 240, "variableId": "VariableID:2599:51271", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/S", "value": 280, "variableId": "VariableID:2599:51272", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/M", "value": 320, "variableId": "VariableID:2599:51273", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/L", "value": 360, "variableId": "VariableID:2599:51274", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/XL", "value": 480, "variableId": "VariableID:2599:51275", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/XXL", "value": 680, "variableId": "VariableID:2599:51276", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/XXXL", "value": 920, "variableId": "VariableID:2599:51277", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null },
      { "figmaName": "Module Width/XXXXL", "value": 1200, "variableId": "VariableID:2599:51278", "resolvedType": "FLOAT", "bindable": true, "scopes": ["WIDTH_HEIGHT"], "canonicalToken": null }
    ],
    "basicSizePrimitives": [
      { "figmaName": "Basic Size/#2", "value": 2, "variableId": "VariableID:2599:77698", "resolvedType": "FLOAT", "bindable": false, "scopes": [], "note": "raw primitive, scopes empty = hidden from pickers; consumed by aliases" },
      { "figmaName": "Basic Size/#4", "value": 4, "variableId": "VariableID:2566:29683", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#8", "value": 8, "variableId": "VariableID:2566:29684", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#12", "value": 12, "variableId": "VariableID:2566:30024", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#16", "value": 16, "variableId": "VariableID:2566:30025", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#20", "value": 20, "variableId": "VariableID:2566:30026", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#24", "value": 24, "variableId": "VariableID:2599:77695", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#32", "value": 32, "variableId": "VariableID:2566:30027", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#36", "value": 36, "variableId": "VariableID:2599:77696", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#40", "value": 40, "variableId": "VariableID:2566:30028", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#48", "value": 48, "variableId": "VariableID:2599:77697", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#56", "value": 56, "variableId": "VariableID:2566:30029", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#64", "value": 64, "variableId": "VariableID:2599:77699", "resolvedType": "FLOAT", "bindable": false, "scopes": [] },
      { "figmaName": "Basic Size/#80", "value": 80, "variableId": "VariableID:2599:77700", "resolvedType": "FLOAT", "bindable": false, "scopes": [] }
    ]
  },
  "textStyles": [
    { "figmaName": "Roboto/12 tips", "fontFamily": "Roboto", "fontWeight": "Regular", "fontSize": 12, "lineHeight": { "unit": "PIXELS", "value": 16 }, "key": "f673286294e9a1682e26dd142a49ef81632b6bf8", "canonicalToken": "--text-style-tips", "bindApi": "setTextStyleIdAsync" },
    { "figmaName": "Roboto/14 body", "fontFamily": "Roboto", "fontWeight": "Regular", "fontSize": 14, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "8f5ccd467d0d4392e21feba07f3f8c6a3f613d6d", "canonicalToken": "--text-style-body", "bindApi": "setTextStyleIdAsync" },
    { "figmaName": "Roboto/16 pop title", "fontFamily": "Roboto", "fontWeight": "SemiBold", "fontSize": 16, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "77e0ddcf5584764332666afcbc7726e2b01c4a8a", "canonicalToken": "--text-style-pop-title", "bindApi": "setTextStyleIdAsync" },
    { "figmaName": "Roboto/18 headline 2", "fontFamily": "Roboto", "fontWeight": "SemiBold", "fontSize": 18, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "36262dfdbc9553c0877d5b2affac0a252456387a", "canonicalToken": "--text-style-headline-2", "bindApi": "setTextStyleIdAsync" },
    { "figmaName": "Roboto/20 headline 1", "fontFamily": "Roboto", "fontWeight": "SemiBold", "fontSize": 20, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "fbd089ca26881a0ec8b3ae0490c69816d9ac0efc", "canonicalToken": "--text-style-headline-1", "bindApi": "setTextStyleIdAsync" },
    { "figmaName": "Roboto/22 large title", "fontFamily": "Roboto", "fontWeight": "SemiBold", "fontSize": 22, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "dd3cf25d6944b8aba30830f8aa9e0d781b419b71", "canonicalToken": "--text-style-large-title-22", "bindApi": "setTextStyleIdAsync" },
    { "figmaName": "Roboto/24 large title", "fontFamily": "Roboto", "fontWeight": "SemiBold", "fontSize": 24, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "c34118ed50cfb98272b61c365f59b0ac7cb4d7c6", "canonicalToken": "--text-style-large-title-24", "bindApi": "setTextStyleIdAsync" },
    { "figmaName": "Roboto/PingFang SC/12 tips", "fontFamily": "PingFang SC", "fontWeight": "Regular", "fontSize": 12, "lineHeight": { "unit": "PIXELS", "value": 16 }, "key": "73ec1c5ce88aa119873d4343a38691043dc23ac0", "canonicalToken": "--text-style-tips", "bindApi": "setTextStyleIdAsync", "note": "CJK twin of Roboto/12 tips" },
    { "figmaName": "Roboto/PingFang SC/14 body", "fontFamily": "PingFang SC", "fontWeight": "Regular", "fontSize": 14, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "c03f34c7b46d05802016635a7b04bf9f7885e01d", "canonicalToken": "--text-style-body", "bindApi": "setTextStyleIdAsync", "note": "CJK twin" },
    { "figmaName": "Roboto/PingFang SC/16 pop title", "fontFamily": "PingFang SC", "fontWeight": "Semibold", "fontSize": 16, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "5d86d10246af4fd902c977294f951e07cef32280", "canonicalToken": "--text-style-pop-title", "bindApi": "setTextStyleIdAsync", "note": "CJK twin" },
    { "figmaName": "Roboto/PingFang SC/18 headline 2", "fontFamily": "PingFang SC", "fontWeight": "Semibold", "fontSize": 18, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "bfdc2c4efbf36a037bb3bf429a715302a3d19836", "canonicalToken": "--text-style-headline-2", "bindApi": "setTextStyleIdAsync", "note": "CJK twin" },
    { "figmaName": "Roboto/PingFang SC/20 headline 1", "fontFamily": "PingFang SC", "fontWeight": "Semibold", "fontSize": 20, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "8d8e2e34a0867fb9c3f536de44b23645309fc7c2", "canonicalToken": "--text-style-headline-1", "bindApi": "setTextStyleIdAsync", "note": "CJK twin" },
    { "figmaName": "Roboto/PingFang SC/22 large title", "fontFamily": "PingFang SC", "fontWeight": "Semibold", "fontSize": 22, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "4b1ae055a851bf728839a7f1797d2e9186a10ea1", "canonicalToken": "--text-style-large-title-22", "bindApi": "setTextStyleIdAsync", "note": "CJK twin" },
    { "figmaName": "Roboto/PingFang SC/24 large title", "fontFamily": "PingFang SC", "fontWeight": "Semibold", "fontSize": 24, "lineHeight": { "unit": "PERCENT", "value": 150 }, "key": "fa0e2de69ff1532fdfde28894c308e573bc5a452", "canonicalToken": "--text-style-large-title-24", "bindApi": "setTextStyleIdAsync", "note": "CJK twin" }
  ],
  "effectStyles": [
    { "figmaName": "L1 shadow", "key": "f401c3212c519cbcb0e57f262e7a53ab6260e277", "layers": "3x DROP_SHADOW (radius 12/6/2, y 5/3/1, black a .09/.12/.16)", "canonicalToken": "--shadow-l1", "bindApi": "setEffectStyleIdAsync" },
    { "figmaName": "L2 shadow", "key": "bd7bd06a27df1225a5eb1ae6cf60249d3c600df3", "layers": "3x DROP_SHADOW (radius 28/16/6, y 9/6/3, black a .05/.08/.12)", "canonicalToken": "--shadow-l2", "bindApi": "setEffectStyleIdAsync" },
    { "figmaName": "L3 shadow", "key": "b8b7ac1783493280f504f2993855a7b491409ee0", "layers": "3x DROP_SHADOW (radius 48/28/16, y 12/9/6, black a .03/.05/.08)", "canonicalToken": "--shadow-l3", "bindApi": "setEffectStyleIdAsync" },
    { "figmaName": "Mask blur8  #000-60%", "key": "38f743fa80fa9e183abe9363dd1a85608acbae95", "layers": "1x BACKGROUND_BLUR radius 8", "canonicalToken": null, "bindApi": "setEffectStyleIdAsync", "note": "no code-map entry; backdrop blur for masks/overlays" }
  ]
}