{
  "$description": "Figma variables — New Design system Demo",
  "ref": {
    "color": {
      "yellow": {
        "100": {
          "$type": "color",
          "$value": "#fff1be"
        },
        "400": {
          "$type": "color",
          "$value": "#ffdd00"
        },
        "450": {
          "$type": "color",
          "$value": "#eacb00"
        },
        "500": {
          "$type": "color",
          "$value": "#ffc300"
        },
        "700": {
          "$type": "color",
          "$value": "#b39b00"
        },
        "800": {
          "$type": "color",
          "$value": "#b38900"
        },
        "900": {
          "$type": "color",
          "$value": "#7a5c00"
        }
      },
      "neutral": {
        "0": {
          "$type": "color",
          "$value": "#ffffff"
        },
        "50": {
          "$type": "color",
          "$value": "#f2f2f2"
        },
        "100": {
          "$type": "color",
          "$value": "#e6e6e6"
        },
        "200": {
          "$type": "color",
          "$value": "#d9d9d9"
        },
        "300": {
          "$type": "color",
          "$value": "#bfbfbf"
        },
        "400": {
          "$type": "color",
          "$value": "#999999"
        },
        "500": {
          "$type": "color",
          "$value": "#767676"
        },
        "600": {
          "$type": "color",
          "$value": "#5a5a5a"
        },
        "700": {
          "$type": "color",
          "$value": "#404040"
        },
        "800": {
          "$type": "color",
          "$value": "#272727"
        },
        "850": {
          "$type": "color",
          "$value": "#212121"
        },
        "880": {
          "$type": "color",
          "$value": "#171717"
        },
        "890": {
          "$type": "color",
          "$value": "#121212"
        },
        "900": {
          "$type": "color",
          "$value": "#000000"
        }
      },
      "blue": {
        "100": {
          "$type": "color",
          "$value": "#d0e1ee"
        },
        "300": {
          "$type": "color",
          "$value": "#4da6f7"
        },
        "500": {
          "$type": "color",
          "$value": "#0a8cf2"
        },
        "700": {
          "$type": "color",
          "$value": "#0859a6"
        }
      },
      "green": {
        "100": {
          "$type": "color",
          "$value": "#c9f1e8"
        },
        "500": {
          "$type": "color",
          "$value": "#049d79"
        },
        "800": {
          "$type": "color",
          "$value": "#025240"
        }
      },
      "red": {
        "50": {
          "$type": "color",
          "$value": "#ffe2e2"
        },
        "100": {
          "$type": "color",
          "$value": "#f6ddd5"
        },
        "200": {
          "$type": "color",
          "$value": "#ffb7b7"
        },
        "300": {
          "$type": "color",
          "$value": "#ed967b"
        },
        "600": {
          "$type": "color",
          "$value": "#cd0000"
        },
        "700": {
          "$type": "color",
          "$value": "#a52603"
        },
        "800": {
          "$type": "color",
          "$value": "#8e3737"
        },
        "850": {
          "$type": "color",
          "$value": "#710f0f"
        },
        "900": {
          "$type": "color",
          "$value": "#5a1502"
        }
      },
      "shadow": {
        "10": {
          "$type": "color",
          "$value": "#0000001a"
        },
        "18": {
          "$type": "color",
          "$value": "#0000002e"
        },
        "32": {
          "$type": "color",
          "$value": "#00000052"
        },
        "48": {
          "$type": "color",
          "$value": "#0000007a"
        },
        "64": {
          "$type": "color",
          "$value": "#000000a3"
        }
      },
      "transparent": {
        "$type": "color",
        "$value": "#00000000"
      },
      "scrim": {
        "64": {
          "$type": "color",
          "$value": "#000000a3"
        },
        "72": {
          "$type": "color",
          "$value": "#000000b8"
        }
      },
      "veil": {
        "70": {
          "$type": "color",
          "$value": "#ffffffb3"
        }
      }
    },
    "space": {
      "none": {
        "$type": "dimension",
        "$value": "0px"
      },
      "xs": {
        "$type": "dimension",
        "$value": "4px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "8px"
      },
      "md": {
        "$type": "dimension",
        "$value": "12px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "16px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "24px"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "32px"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "40px"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "48px"
      },
      "5xl": {
        "$type": "dimension",
        "$value": "64px"
      },
      "2xs": {
        "$type": "dimension",
        "$value": "2px"
      },
      "xs-plus": {
        "$type": "dimension",
        "$value": "6px"
      }
    },
    "radius": {
      "none": {
        "$type": "dimension",
        "$value": "0px"
      },
      "xs": {
        "$type": "dimension",
        "$value": "4px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "8px"
      },
      "md": {
        "$type": "dimension",
        "$value": "12px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "16px"
      },
      "pill": {
        "$type": "dimension",
        "$value": "48px"
      },
      "full": {
        "$type": "dimension",
        "$value": "999px"
      },
      "xs-plus": {
        "$type": "dimension",
        "$value": "6px"
      }
    },
    "font-size": {
      "xs": {
        "$type": "dimension",
        "$value": "12px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "14px"
      },
      "md": {
        "$type": "dimension",
        "$value": "16px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "20px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "24px"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "32px"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "40px"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "64px"
      }
    },
    "line-height": {
      "xs": {
        "$type": "dimension",
        "$value": "16px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "18px"
      },
      "md": {
        "$type": "dimension",
        "$value": "22px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "24px"
      },
      "xl": {
        "$type": "dimension",
        "$value": "26px"
      },
      "2xl": {
        "$type": "dimension",
        "$value": "28px"
      },
      "3xl": {
        "$type": "dimension",
        "$value": "36px"
      },
      "4xl": {
        "$type": "dimension",
        "$value": "46px"
      },
      "5xl": {
        "$type": "dimension",
        "$value": "64px"
      }
    },
    "font-family": {
      "display": {
        "$type": "fontFamily",
        "$value": "Archivo"
      },
      "body": {
        "$type": "fontFamily",
        "$value": "Roboto"
      }
    },
    "elevation": {
      "sm": {
        "y": {
          "$type": "dimension",
          "$value": "2px"
        },
        "blur": {
          "$type": "dimension",
          "$value": "8px"
        }
      },
      "md": {
        "y": {
          "$type": "dimension",
          "$value": "8px"
        },
        "blur": {
          "$type": "dimension",
          "$value": "24px"
        }
      },
      "lg": {
        "y": {
          "$type": "dimension",
          "$value": "16px"
        },
        "blur": {
          "$type": "dimension",
          "$value": "40px"
        }
      }
    },
    "icon-size": {
      "sm": {
        "$type": "dimension",
        "$value": "16px"
      },
      "md": {
        "$type": "dimension",
        "$value": "20px"
      },
      "lg": {
        "$type": "dimension",
        "$value": "24px"
      }
    },
    "motion": {
      "duration": {
        "instant": {
          "$type": "duration",
          "$value": "100ms"
        },
        "fast": {
          "$type": "duration",
          "$value": "150ms"
        },
        "base": {
          "$type": "duration",
          "$value": "250ms"
        },
        "slow": {
          "$type": "duration",
          "$value": "400ms"
        },
        "enter": {
          "$type": "duration",
          "$value": "450ms"
        },
        "toggle": {
          "$type": "duration",
          "$value": "200ms"
        },
        "gentle": {
          "$type": "duration",
          "$value": "800ms"
        }
      },
      "ease": {
        "standard": {
          "$type": "cubicBezier",
          "$value": "cubic-bezier(0.2, 0, 0, 1)"
        },
        "enter": {
          "$type": "cubicBezier",
          "$value": "cubic-bezier(0, 0, 0, 1)"
        },
        "exit": {
          "$type": "cubicBezier",
          "$value": "cubic-bezier(0.3, 0, 1, 1)"
        },
        "gentle": {
          "$type": "cubicBezier",
          "$value": "cubic-bezier(0.22, 1, 0.36, 1)"
        }
      },
      "stagger": {
        "tight": {
          "$type": "duration",
          "$value": "40ms"
        },
        "base": {
          "$type": "duration",
          "$value": "60ms"
        },
        "loose": {
          "$type": "duration",
          "$value": "150ms"
        }
      },
      "travel": {
        "parallax": {
          "$type": "dimension",
          "$value": "72px"
        }
      }
    },
    "blur": {
      "veil": {
        "$type": "dimension",
        "$value": "8px"
      },
      "hint": {
        "$type": "dimension",
        "$value": "3px"
      }
    },
    "border-width": {
      "hairline": {
        "$type": "dimension",
        "$value": "1px"
      },
      "thin": {
        "$type": "dimension",
        "$value": "1px"
      },
      "thick": {
        "$type": "dimension",
        "$value": "2px"
      }
    }
  },
  "sys": {
    "surface": {
      "page": {
        "$type": "color",
        "$value": "{ref.color.neutral.0}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.0}",
            "dark": "{ref.color.neutral.800}"
          }
        }
      },
      "raised": {
        "$type": "color",
        "$value": "{ref.color.neutral.0}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.0}",
            "dark": "{ref.color.neutral.700}"
          }
        }
      },
      "sunken": {
        "$type": "color",
        "$value": "{ref.color.neutral.50}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.50}",
            "dark": "{ref.color.neutral.880}"
          }
        }
      },
      "inverse": {
        "$type": "color",
        "$value": "{ref.color.neutral.900}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.900}",
            "dark": "{ref.color.neutral.0}"
          }
        }
      },
      "brand": {
        "$type": "color",
        "$value": "{ref.color.yellow.400}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.yellow.400}",
            "dark": "{ref.color.yellow.400}"
          }
        }
      },
      "disabled": {
        "$type": "color",
        "$value": "{ref.color.neutral.100}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.100}",
            "dark": "{ref.color.neutral.600}"
          }
        }
      },
      "fixed-dark": {
        "$type": "color",
        "$value": "{ref.color.neutral.900}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.900}",
            "dark": "{ref.color.neutral.900}"
          }
        }
      },
      "brand-veil": {
        "$type": "color",
        "$value": "{ref.color.veil.70}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.veil.70}",
            "dark": "{ref.color.scrim.72}"
          }
        }
      },
      "media-veil": {
        "$type": "color",
        "$value": "{ref.color.neutral.50}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.50}",
            "dark": "{ref.color.neutral.900}"
          }
        }
      },
      "inset": {
        "$type": "color",
        "$value": "{ref.color.neutral.50}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.50}",
            "dark": "{ref.color.neutral.850}"
          }
        }
      },
      "brand-bar": {
        "$type": "color",
        "$value": "{ref.color.yellow.450}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.yellow.450}",
            "dark": "{ref.color.yellow.450}"
          }
        }
      },
      "inset-on-brand": {
        "$type": "color",
        "$value": "{ref.color.neutral.50}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.50}",
            "dark": "{ref.color.neutral.600}"
          }
        }
      }
    },
    "text": {
      "primary": {
        "$type": "color",
        "$value": "{ref.color.neutral.900}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.900}",
            "dark": "{ref.color.neutral.0}"
          }
        }
      },
      "secondary": {
        "$type": "color",
        "$value": "{ref.color.neutral.600}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.600}",
            "dark": "{ref.color.neutral.300}"
          }
        }
      },
      "disabled": {
        "$type": "color",
        "$value": "{ref.color.neutral.400}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.400}",
            "dark": "{ref.color.neutral.600}"
          }
        }
      },
      "inverse": {
        "$type": "color",
        "$value": "{ref.color.neutral.0}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.0}",
            "dark": "{ref.color.neutral.900}"
          }
        }
      },
      "inverse-secondary": {
        "$type": "color",
        "$value": "{ref.color.neutral.400}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.400}",
            "dark": "{ref.color.neutral.600}"
          }
        }
      },
      "link": {
        "$type": "color",
        "$value": "{ref.color.blue.700}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.blue.700}",
            "dark": "{ref.color.blue.300}"
          }
        }
      },
      "on-brand": {
        "$type": "color",
        "$value": "{ref.color.neutral.900}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.900}",
            "dark": "{ref.color.neutral.900}"
          }
        }
      },
      "on-fixed-dark": {
        "$type": "color",
        "$value": "{ref.color.neutral.0}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.0}",
            "dark": "{ref.color.neutral.0}"
          }
        }
      },
      "on-fixed-dark-secondary": {
        "$type": "color",
        "$value": "{ref.color.neutral.400}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.400}",
            "dark": "{ref.color.neutral.400}"
          }
        }
      },
      "on-media": {
        "$type": "color",
        "$value": "{ref.color.neutral.0}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.0}",
            "dark": "{ref.color.neutral.0}"
          }
        }
      },
      "on-media-secondary": {
        "$type": "color",
        "$value": "{ref.color.neutral.200}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.200}",
            "dark": "{ref.color.neutral.200}"
          }
        }
      }
    },
    "border": {
      "subtle": {
        "$type": "color",
        "$value": "{ref.color.neutral.100}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.100}",
            "dark": "{ref.color.neutral.600}"
          }
        }
      },
      "default": {
        "$type": "color",
        "$value": "{ref.color.neutral.500}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.500}",
            "dark": "{ref.color.neutral.400}"
          }
        }
      },
      "strong": {
        "$type": "color",
        "$value": "{ref.color.neutral.900}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.900}",
            "dark": "{ref.color.neutral.0}"
          }
        }
      },
      "focus": {
        "$type": "color",
        "$value": "{ref.color.blue.500}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.blue.500}",
            "dark": "{ref.color.blue.300}"
          }
        }
      },
      "inverse": {
        "$type": "color",
        "$value": "{ref.color.neutral.700}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.700}",
            "dark": "{ref.color.neutral.300}"
          }
        }
      },
      "on-fixed-dark": {
        "$type": "color",
        "$value": "{ref.color.neutral.700}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.700}",
            "dark": "{ref.color.neutral.700}"
          }
        }
      },
      "on-brand": {
        "$type": "color",
        "$value": "{ref.color.neutral.890}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.890}",
            "dark": "{ref.color.neutral.890}"
          }
        }
      }
    },
    "action": {
      "primary": {
        "bg": {
          "$type": "color",
          "$value": "{ref.color.yellow.400}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.yellow.400}",
              "dark": "{ref.color.yellow.400}"
            }
          }
        },
        "bg-hover": {
          "$type": "color",
          "$value": "{ref.color.yellow.500}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.yellow.500}",
              "dark": "{ref.color.yellow.500}"
            }
          }
        },
        "bg-active": {
          "$type": "color",
          "$value": "{ref.color.yellow.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.yellow.100}",
              "dark": "{ref.color.yellow.100}"
            }
          }
        },
        "bg-disabled": {
          "$type": "color",
          "$value": "{ref.color.neutral.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.100}",
              "dark": "{ref.color.neutral.600}"
            }
          }
        },
        "fg": {
          "$type": "color",
          "$value": "{ref.color.neutral.900}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.900}",
              "dark": "{ref.color.neutral.900}"
            }
          }
        },
        "fg-disabled": {
          "$type": "color",
          "$value": "{ref.color.neutral.400}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.400}",
              "dark": "{ref.color.neutral.400}"
            }
          }
        }
      },
      "secondary": {
        "bg": {
          "$type": "color",
          "$value": "{ref.color.neutral.900}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.900}",
              "dark": "{ref.color.neutral.0}"
            }
          }
        },
        "bg-hover": {
          "$type": "color",
          "$value": "{ref.color.neutral.800}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.800}",
              "dark": "{ref.color.neutral.50}"
            }
          }
        },
        "bg-active": {
          "$type": "color",
          "$value": "{ref.color.neutral.700}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.700}",
              "dark": "{ref.color.neutral.100}"
            }
          }
        },
        "bg-disabled": {
          "$type": "color",
          "$value": "{ref.color.neutral.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.100}",
              "dark": "{ref.color.neutral.600}"
            }
          }
        },
        "fg": {
          "$type": "color",
          "$value": "{ref.color.neutral.0}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.0}",
              "dark": "{ref.color.neutral.900}"
            }
          }
        },
        "fg-disabled": {
          "$type": "color",
          "$value": "{ref.color.neutral.400}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.400}",
              "dark": "{ref.color.neutral.400}"
            }
          }
        }
      },
      "tertiary": {
        "bg": {
          "$type": "color",
          "$value": "{ref.color.transparent}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.transparent}",
              "dark": "{ref.color.transparent}"
            }
          }
        },
        "bg-hover": {
          "$type": "color",
          "$value": "{ref.color.neutral.50}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.50}",
              "dark": "{ref.color.neutral.700}"
            }
          }
        },
        "bg-active": {
          "$type": "color",
          "$value": "{ref.color.neutral.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.100}",
              "dark": "{ref.color.neutral.600}"
            }
          }
        },
        "bg-disabled": {
          "$type": "color",
          "$value": "{ref.color.transparent}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.transparent}",
              "dark": "{ref.color.transparent}"
            }
          }
        },
        "fg": {
          "$type": "color",
          "$value": "{ref.color.neutral.900}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.900}",
              "dark": "{ref.color.neutral.0}"
            }
          }
        },
        "fg-disabled": {
          "$type": "color",
          "$value": "{ref.color.neutral.400}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.neutral.400}",
              "dark": "{ref.color.neutral.400}"
            }
          }
        }
      }
    },
    "feedback": {
      "info": {
        "bg": {
          "$type": "color",
          "$value": "{ref.color.blue.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.blue.100}",
              "dark": "{ref.color.blue.700}"
            }
          }
        },
        "fg": {
          "$type": "color",
          "$value": "{ref.color.blue.700}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.blue.700}",
              "dark": "{ref.color.blue.100}"
            }
          }
        }
      },
      "success": {
        "bg": {
          "$type": "color",
          "$value": "{ref.color.green.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.green.100}",
              "dark": "{ref.color.green.800}"
            }
          }
        },
        "fg": {
          "$type": "color",
          "$value": "{ref.color.green.800}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.green.800}",
              "dark": "{ref.color.green.100}"
            }
          }
        }
      },
      "error": {
        "bg": {
          "$type": "color",
          "$value": "{ref.color.red.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.red.100}",
              "dark": "{ref.color.red.900}"
            }
          }
        },
        "fg": {
          "$type": "color",
          "$value": "{ref.color.red.700}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.red.700}",
              "dark": "{ref.color.red.100}"
            }
          }
        },
        "surface": {
          "$type": "color",
          "$value": "{ref.color.red.50}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.red.50}",
              "dark": "{ref.color.red.800}"
            }
          }
        },
        "inset": {
          "$type": "color",
          "$value": "{ref.color.red.200}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.red.200}",
              "dark": "{ref.color.red.850}"
            }
          }
        },
        "text": {
          "$type": "color",
          "$value": "{ref.color.red.600}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.red.600}",
              "dark": "{ref.color.neutral.0}"
            }
          }
        },
        "text-secondary": {
          "$type": "color",
          "$value": "{ref.color.red.700}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.red.700}",
              "dark": "{ref.color.red.300}"
            }
          }
        }
      },
      "warning": {
        "bg": {
          "$type": "color",
          "$value": "{ref.color.yellow.900}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.yellow.900}",
              "dark": "{ref.color.yellow.900}"
            }
          }
        },
        "fg": {
          "$type": "color",
          "$value": "{ref.color.yellow.100}",
          "$extensions": {
            "com.figma.modes": {
              "light": "{ref.color.yellow.100}",
              "dark": "{ref.color.yellow.100}"
            }
          }
        }
      }
    },
    "shadow": {
      "sm": {
        "$type": "color",
        "$value": "{ref.color.shadow.10}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.shadow.10}",
            "dark": "{ref.color.shadow.32}"
          }
        }
      },
      "md": {
        "$type": "color",
        "$value": "{ref.color.shadow.18}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.shadow.18}",
            "dark": "{ref.color.shadow.48}"
          }
        }
      },
      "lg": {
        "$type": "color",
        "$value": "{ref.color.shadow.32}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.shadow.32}",
            "dark": "{ref.color.shadow.64}"
          }
        }
      }
    },
    "radius": {
      "control": {
        "$type": "dimension",
        "$value": "{ref.radius.sm}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.radius.sm}",
            "dark": "{ref.radius.sm}"
          }
        }
      },
      "container": {
        "$type": "dimension",
        "$value": "{ref.radius.lg}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.radius.lg}",
            "dark": "{ref.radius.lg}"
          }
        }
      },
      "pill": {
        "$type": "dimension",
        "$value": "{ref.radius.pill}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.radius.pill}",
            "dark": "{ref.radius.pill}"
          }
        }
      },
      "key": {
        "$type": "dimension",
        "$value": "{ref.radius.xs-plus}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.radius.xs-plus}",
            "dark": "{ref.radius.xs-plus}"
          }
        }
      }
    },
    "type": {
      "page-title": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.3xl}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.4xl}"
        }
      },
      "section-title": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.2xl}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.3xl}"
        }
      },
      "subsection-title": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.xl}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.2xl}"
        }
      },
      "card-title": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.lg}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.lg}"
        }
      },
      "lead": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.lg}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.xl}"
        }
      },
      "action-label": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.md}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.lg}"
        }
      },
      "overline": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.xs}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.xs}"
        }
      },
      "body": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.md}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.md}"
        }
      },
      "body-compact": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.sm}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.sm}"
        }
      },
      "caption": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.xs}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.xs}"
        }
      },
      "hero-title": {
        "size": {
          "$type": "dimension",
          "$value": "{ref.font-size.4xl}"
        },
        "line": {
          "$type": "dimension",
          "$value": "{ref.line-height.5xl}"
        }
      }
    },
    "syntax": {
      "key": {
        "$type": "color",
        "$value": "{ref.color.blue.700}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.blue.700}",
            "dark": "{ref.color.blue.300}"
          }
        }
      },
      "string": {
        "$type": "color",
        "$value": "{ref.color.green.800}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.green.800}",
            "dark": "{ref.color.green.100}"
          }
        }
      },
      "number": {
        "$type": "color",
        "$value": "{ref.color.yellow.900}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.yellow.900}",
            "dark": "{ref.color.yellow.100}"
          }
        }
      },
      "literal": {
        "$type": "color",
        "$value": "{ref.color.red.700}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.red.700}",
            "dark": "{ref.color.red.100}"
          }
        }
      },
      "punctuation": {
        "$type": "color",
        "$value": "{ref.color.neutral.600}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.600}",
            "dark": "{ref.color.neutral.400}"
          }
        }
      }
    },
    "indicator": {
      "active": {
        "$type": "color",
        "$value": "{ref.color.neutral.400}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.400}",
            "dark": "{ref.color.neutral.200}"
          }
        }
      },
      "inactive": {
        "$type": "color",
        "$value": "{ref.color.neutral.200}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.color.neutral.200}",
            "dark": "{ref.color.neutral.880}"
          }
        }
      }
    },
    "space": {
      "keypad-gutter": {
        "$type": "dimension",
        "$value": "{ref.space.xs-plus}",
        "$extensions": {
          "com.figma.modes": {
            "light": "{ref.space.xs-plus}",
            "dark": "{ref.space.xs-plus}"
          }
        }
      }
    }
  }
}