{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "SurveyStream design tokens. Primitives are theme-agnostic; every semantic token is an alias, never a literal. Light and dark variants live under `theme`. Generated from color-system/tokens.json and typography/type-tokens.json.",
  "color": {
    "deepwater": {
      "500": {
        "$type": "color",
        "$value": "#0A6E86"
      },
      "600": {
        "$type": "color",
        "$value": "#085A6E"
      },
      "700": {
        "$type": "color",
        "$value": "#064A5B"
      },
      "800": {
        "$type": "color",
        "$value": "#0D2E3D"
      },
      "900": {
        "$type": "color",
        "$value": "#08222E"
      },
      "950": {
        "$type": "color",
        "$value": "#04171F"
      }
    },
    "stream": {
      "300": {
        "$type": "color",
        "$value": "#5FE3EC"
      },
      "400": {
        "$type": "color",
        "$value": "#3ACFE1"
      },
      "500": {
        "$type": "color",
        "$value": "#10BBD1"
      },
      "600": {
        "$type": "color",
        "$value": "#0BA3B7"
      }
    },
    "pulse": {
      "400": {
        "$type": "color",
        "$value": "#6BF3C0"
      },
      "500": {
        "$type": "color",
        "$value": "#2FE3A2"
      },
      "600": {
        "$type": "color",
        "$value": "#12987A"
      },
      "700": {
        "$type": "color",
        "$value": "#0E7A62"
      }
    },
    "payout": {
      "400": {
        "$type": "color",
        "$value": "#F7BE73"
      },
      "500": {
        "$type": "color",
        "$value": "#F2A23C"
      },
      "600": {
        "$type": "color",
        "$value": "#C77A1E"
      },
      "700": {
        "$type": "color",
        "$value": "#8A4E08"
      }
    },
    "neutral": {
      "50": {
        "$type": "color",
        "$value": "#F4F8F9"
      },
      "200": {
        "$type": "color",
        "$value": "#D3E0E2"
      },
      "400": {
        "$type": "color",
        "$value": "#8199A0"
      },
      "500": {
        "$type": "color",
        "$value": "#758D94"
      },
      "600": {
        "$type": "color",
        "$value": "#566A70"
      },
      "800": {
        "$type": "color",
        "$value": "#2E4A55"
      },
      "950": {
        "$type": "color",
        "$value": "#04171F"
      }
    },
    "success": {
      "400": {
        "$type": "color",
        "$value": "#4FD69A"
      },
      "500": {
        "$type": "color",
        "$value": "#2E9E6B"
      },
      "600": {
        "$type": "color",
        "$value": "#1B7A57"
      },
      "700": {
        "$type": "color",
        "$value": "#155F44"
      }
    },
    "warn": {
      "400": {
        "$type": "color",
        "$value": "#F0B45E"
      },
      "500": {
        "$type": "color",
        "$value": "#DE8A2A"
      },
      "600": {
        "$type": "color",
        "$value": "#A85B10"
      },
      "700": {
        "$type": "color",
        "$value": "#84480C"
      }
    },
    "error": {
      "400": {
        "$type": "color",
        "$value": "#F0847B"
      },
      "500": {
        "$type": "color",
        "$value": "#CF463D"
      },
      "600": {
        "$type": "color",
        "$value": "#A82F27"
      },
      "700": {
        "$type": "color",
        "$value": "#87261F"
      }
    },
    "slate": {
      "100": {
        "$type": "color",
        "$value": "#EDF3F4"
      },
      "300": {
        "$type": "color",
        "$value": "#AEC4C9"
      },
      "400": {
        "$type": "color",
        "$value": "#7E969C"
      },
      "500": {
        "$type": "color",
        "$value": "#4E7687"
      },
      "600": {
        "$type": "color",
        "$value": "#3F6273"
      },
      "800": {
        "$type": "color",
        "$value": "#1C3440"
      },
      "900": {
        "$type": "color",
        "$value": "#020E14"
      }
    },
    "base": {
      "white": {
        "$type": "color",
        "$value": "#FFFFFF"
      },
      "black": {
        "$type": "color",
        "$value": "#000000"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Archivo",
          "Archivo Fallback",
          "Helvetica Neue",
          "Arial Nova",
          "Helvetica",
          "Arial",
          "system-ui",
          "sans-serif"
        ]
      },
      "sans": {
        "$type": "fontFamily",
        "$value": [
          "Inter",
          "Inter Fallback",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif"
        ]
      },
      "mono": {
        "$type": "fontFamily",
        "$value": [
          "JetBrains Mono",
          "JBM Fallback",
          "ui-monospace",
          "SF Mono",
          "SFMono-Regular",
          "Menlo",
          "Consolas",
          "monospace"
        ]
      }
    },
    "weight": {
      "regular": {
        "$type": "fontWeight",
        "$value": 400
      },
      "medium": {
        "$type": "fontWeight",
        "$value": 500
      },
      "semibold": {
        "$type": "fontWeight",
        "$value": 600
      },
      "bold": {
        "$type": "fontWeight",
        "$value": 700
      }
    }
  },
  "fontSize": {
    "caption": {
      "$type": "dimension",
      "$value": "0.8125rem"
    },
    "body": {
      "$type": "dimension",
      "$value": "1rem"
    },
    "body-lg": {
      "$type": "dimension",
      "$value": "1.1875rem"
    },
    "title": {
      "$type": "dimension",
      "$value": "1.4375rem"
    },
    "h3": {
      "$type": "dimension",
      "$value": "1.75rem"
    },
    "h2": {
      "$type": "dimension",
      "$value": "2.0625rem"
    },
    "h1": {
      "$type": "dimension",
      "$value": "2.5rem"
    },
    "display": {
      "$type": "dimension",
      "$value": "3rem"
    },
    "body-dense": {
      "$type": "dimension",
      "$value": "0.875rem"
    },
    "display-xl": {
      "$type": "dimension",
      "$value": "4rem"
    }
  },
  "lineHeight": {
    "caption": {
      "$type": "dimension",
      "$value": "20px"
    },
    "body": {
      "$type": "dimension",
      "$value": "24px"
    },
    "body-lg": {
      "$type": "dimension",
      "$value": "28px"
    },
    "title": {
      "$type": "dimension",
      "$value": "32px"
    },
    "h3": {
      "$type": "dimension",
      "$value": "36px"
    },
    "h2": {
      "$type": "dimension",
      "$value": "40px"
    },
    "h1": {
      "$type": "dimension",
      "$value": "44px"
    },
    "display": {
      "$type": "dimension",
      "$value": "52px"
    },
    "body-dense": {
      "$type": "dimension",
      "$value": "20px"
    },
    "display-xl": {
      "$type": "dimension",
      "$value": "68px"
    }
  },
  "letterSpacing": {
    "caption": {
      "$type": "dimension",
      "$value": "0.0100em"
    },
    "body": {
      "$type": "dimension",
      "$value": "0.0030em"
    },
    "body-lg": {
      "$type": "dimension",
      "$value": "-0.0028em"
    },
    "title": {
      "$type": "dimension",
      "$value": "-0.0092em"
    },
    "h3": {
      "$type": "dimension",
      "$value": "-0.0158em"
    },
    "h2": {
      "$type": "dimension",
      "$value": "-0.0214em"
    },
    "h1": {
      "$type": "dimension",
      "$value": "-0.0279em"
    },
    "display": {
      "$type": "dimension",
      "$value": "-0.0340em"
    },
    "body-dense": {
      "$type": "dimension",
      "$value": "0.0058em"
    },
    "display-xl": {
      "$type": "dimension",
      "$value": "-0.0392em"
    }
  },
  "typography": {
    "caption": {
      "$type": "typography",
      "$description": "Metadata, table captions, helper text, timestamps",
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "{fontSize.caption}",
        "fontWeight": "{font.weight.medium}",
        "lineHeight": "{lineHeight.caption}",
        "letterSpacing": "{letterSpacing.caption}"
      }
    },
    "body": {
      "$type": "typography",
      "$description": "Default UI and reading size. Survey questions, forms",
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "{fontSize.body}",
        "fontWeight": "{font.weight.regular}",
        "lineHeight": "{lineHeight.body}",
        "letterSpacing": "{letterSpacing.body}"
      }
    },
    "body-lg": {
      "$type": "typography",
      "$description": "Intro paragraphs, taker-facing prompts, empty states",
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "{fontSize.body-lg}",
        "fontWeight": "{font.weight.regular}",
        "lineHeight": "{lineHeight.body-lg}",
        "letterSpacing": "{letterSpacing.body-lg}"
      }
    },
    "title": {
      "$type": "typography",
      "$description": "Card titles, table group headers, modal titles",
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "{fontSize.title}",
        "fontWeight": "{font.weight.semibold}",
        "lineHeight": "{lineHeight.title}",
        "letterSpacing": "{letterSpacing.title}"
      }
    },
    "h3": {
      "$type": "typography",
      "$description": "Subsection headings inside dashboards",
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{fontSize.h3}",
        "fontWeight": "{font.weight.semibold}",
        "lineHeight": "{lineHeight.h3}",
        "letterSpacing": "{letterSpacing.h3}"
      }
    },
    "h2": {
      "$type": "typography",
      "$description": "Section headings, panel headers",
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{fontSize.h2}",
        "fontWeight": "{font.weight.semibold}",
        "lineHeight": "{lineHeight.h2}",
        "letterSpacing": "{letterSpacing.h2}"
      }
    },
    "h1": {
      "$type": "typography",
      "$description": "Page titles",
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{fontSize.h1}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": "{lineHeight.h1}",
        "letterSpacing": "{letterSpacing.h1}"
      }
    },
    "display": {
      "$type": "typography",
      "$description": "Marketing hero, payout confirmation moment, the wordmark",
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{fontSize.display}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": "{lineHeight.display}",
        "letterSpacing": "{letterSpacing.display}"
      }
    },
    "body-dense": {
      "$type": "typography",
      "$description": "High-density data tables in the aggregator dashboard. Off-scale by design. OFF-SCALE — use only where documented.",
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "{fontSize.body-dense}",
        "fontWeight": "{font.weight.regular}",
        "lineHeight": "{lineHeight.body-dense}",
        "letterSpacing": "{letterSpacing.body-dense}"
      }
    },
    "display-xl": {
      "$type": "typography",
      "$description": "Marketing hero only. Never inside the product. OFF-SCALE — use only where documented.",
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "{fontSize.display-xl}",
        "fontWeight": "{font.weight.bold}",
        "lineHeight": "{lineHeight.display-xl}",
        "letterSpacing": "{letterSpacing.display-xl}"
      }
    }
  },
  "spacing": {
    "0": {
      "$type": "dimension",
      "$value": "0px"
    },
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "20px"
    },
    "6": {
      "$type": "dimension",
      "$value": "24px"
    },
    "8": {
      "$type": "dimension",
      "$value": "32px"
    },
    "10": {
      "$type": "dimension",
      "$value": "40px"
    },
    "12": {
      "$type": "dimension",
      "$value": "48px"
    },
    "16": {
      "$type": "dimension",
      "$value": "64px"
    },
    "20": {
      "$type": "dimension",
      "$value": "80px"
    },
    "24": {
      "$type": "dimension",
      "$value": "96px"
    },
    "px": {
      "$type": "dimension",
      "$value": "1px"
    },
    "0.5": {
      "$type": "dimension",
      "$value": "2px"
    },
    "1.5": {
      "$type": "dimension",
      "$value": "6px"
    }
  },
  "borderRadius": {
    "none": {
      "$type": "dimension",
      "$value": "0px"
    },
    "xs": {
      "$type": "dimension",
      "$value": "4px"
    },
    "sm": {
      "$type": "dimension",
      "$value": "6px"
    },
    "md": {
      "$type": "dimension",
      "$value": "9px"
    },
    "lg": {
      "$type": "dimension",
      "$value": "12px"
    },
    "xl": {
      "$type": "dimension",
      "$value": "14px"
    },
    "2xl": {
      "$type": "dimension",
      "$value": "18px"
    },
    "3xl": {
      "$type": "dimension",
      "$value": "22px"
    },
    "full": {
      "$type": "dimension",
      "$value": "9999px"
    }
  },
  "borderWidth": {
    "none": {
      "$type": "dimension",
      "$value": "0px"
    },
    "hairline": {
      "$type": "dimension",
      "$value": "1px"
    },
    "thick": {
      "$type": "dimension",
      "$value": "2px"
    },
    "focus": {
      "$type": "dimension",
      "$value": "2px"
    }
  },
  "duration": {
    "instant": {
      "$type": "duration",
      "$value": "0ms"
    },
    "fast": {
      "$type": "duration",
      "$value": "120ms"
    },
    "base": {
      "$type": "duration",
      "$value": "180ms"
    },
    "slow": {
      "$type": "duration",
      "$value": "260ms"
    },
    "deliberate": {
      "$type": "duration",
      "$value": "400ms"
    },
    "drift": {
      "$type": "duration",
      "$value": "60000ms"
    }
  },
  "easing": {
    "standard": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0.2,
        1
      ]
    },
    "entrance": {
      "$type": "cubicBezier",
      "$value": [
        0,
        0,
        0.2,
        1
      ]
    },
    "exit": {
      "$type": "cubicBezier",
      "$value": [
        0.4,
        0,
        1,
        1
      ]
    },
    "emphasised": {
      "$type": "cubicBezier",
      "$value": [
        0.2,
        0,
        0,
        1
      ]
    },
    "linear": {
      "$type": "cubicBezier",
      "$value": [
        0,
        0,
        1,
        1
      ]
    }
  },
  "transition": {
    "base": {
      "$type": "transition",
      "$value": {
        "duration": "{duration.base}",
        "delay": "{duration.instant}",
        "timingFunction": "{easing.standard}"
      }
    },
    "fast": {
      "$type": "transition",
      "$value": {
        "duration": "{duration.fast}",
        "delay": "{duration.instant}",
        "timingFunction": "{easing.standard}"
      }
    },
    "enter": {
      "$type": "transition",
      "$value": {
        "duration": "{duration.slow}",
        "delay": "{duration.instant}",
        "timingFunction": "{easing.entrance}"
      }
    },
    "exit": {
      "$type": "transition",
      "$value": {
        "duration": "{duration.fast}",
        "delay": "{duration.instant}",
        "timingFunction": "{easing.exit}"
      }
    },
    "emphasised": {
      "$type": "transition",
      "$value": {
        "duration": "{duration.deliberate}",
        "delay": "{duration.instant}",
        "timingFunction": "{easing.emphasised}"
      }
    }
  },
  "theme": {
    "light": {
      "$description": "Light theme. The bare :root default.",
      "color": {
        "bg": {
          "canvas": {
            "$type": "color",
            "$value": "{color.neutral.50}"
          },
          "surface": {
            "$type": "color",
            "$value": "{color.base.white}"
          },
          "elevated": {
            "$type": "color",
            "$value": "{color.base.white}"
          },
          "sunken": {
            "$type": "color",
            "$value": "{color.neutral.200}"
          }
        },
        "text": {
          "primary": {
            "$type": "color",
            "$value": "{color.deepwater.950}"
          },
          "secondary": {
            "$type": "color",
            "$value": "{color.neutral.800}"
          },
          "muted": {
            "$type": "color",
            "$value": "{color.neutral.600}"
          },
          "disabled": {
            "$type": "color",
            "$value": "{color.neutral.400}"
          },
          "link": {
            "$type": "color",
            "$value": "{color.deepwater.500}"
          },
          "onBrand": {
            "$type": "color",
            "$value": "{color.base.white}"
          },
          "onAccent": {
            "$type": "color",
            "$value": "{color.deepwater.950}"
          },
          "onInteractive": {
            "$type": "color",
            "$value": "{color.base.white}"
          }
        },
        "border": {
          "subtle": {
            "$type": "color",
            "$value": "{color.neutral.200}"
          },
          "default": {
            "$type": "color",
            "$value": "{color.neutral.500}"
          }
        },
        "action": {
          "interactive": {
            "$type": "color",
            "$value": "{color.deepwater.500}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.deepwater.600}"
          },
          "active": {
            "$type": "color",
            "$value": "{color.deepwater.700}"
          },
          "disabled": {
            "$type": "color",
            "$value": "{color.neutral.200}"
          },
          "focusRing": {
            "$type": "color",
            "$value": "{color.deepwater.500}"
          }
        },
        "feedback": {
          "success": {
            "$type": "color",
            "$value": "{color.success.600}"
          },
          "payout": {
            "$type": "color",
            "$value": "{color.payout.700}"
          },
          "warning": {
            "$type": "color",
            "$value": "{color.warn.600}"
          },
          "error": {
            "$type": "color",
            "$value": "{color.error.600}"
          }
        },
        "fill": {
          "success": {
            "$type": "color",
            "$value": "{color.success.500}"
          },
          "payout": {
            "$type": "color",
            "$value": "{color.payout.500}"
          },
          "payoutEdge": {
            "$type": "color",
            "$value": "{color.payout.600}"
          },
          "error": {
            "$type": "color",
            "$value": "{color.error.500}"
          }
        }
      },
      "shadow": {
        "xs": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "1px",
              "blur": "2px",
              "spread": "0px",
              "color": "rgba(4,23,31,0.06)"
            }
          ]
        },
        "sm": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "1px",
              "blur": "2px",
              "spread": "0px",
              "color": "rgba(4,23,31,0.08)"
            },
            {
              "offsetX": "0px",
              "offsetY": "8px",
              "blur": "24px",
              "spread": "-8px",
              "color": "rgba(4,23,31,0.16)"
            }
          ]
        },
        "md": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "2px",
              "blur": "4px",
              "spread": "-1px",
              "color": "rgba(4,23,31,0.08)"
            },
            {
              "offsetX": "0px",
              "offsetY": "14px",
              "blur": "36px",
              "spread": "-16px",
              "color": "rgba(4,23,31,0.22)"
            }
          ]
        },
        "lg": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "4px",
              "blur": "8px",
              "spread": "-2px",
              "color": "rgba(4,23,31,0.10)"
            },
            {
              "offsetX": "0px",
              "offsetY": "20px",
              "blur": "50px",
              "spread": "-24px",
              "color": "rgba(4,23,31,0.42)"
            }
          ]
        },
        "xl": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "8px",
              "blur": "16px",
              "spread": "-4px",
              "color": "rgba(4,23,31,0.12)"
            },
            {
              "offsetX": "0px",
              "offsetY": "28px",
              "blur": "70px",
              "spread": "-26px",
              "color": "rgba(2,10,16,0.50)"
            }
          ]
        }
      }
    },
    "dark": {
      "$description": "Dark theme. Applied by prefers-color-scheme, [data-theme=\"dark\"], or .dark.",
      "color": {
        "bg": {
          "canvas": {
            "$type": "color",
            "$value": "{color.deepwater.950}"
          },
          "surface": {
            "$type": "color",
            "$value": "{color.deepwater.900}"
          },
          "elevated": {
            "$type": "color",
            "$value": "{color.deepwater.800}"
          },
          "sunken": {
            "$type": "color",
            "$value": "{color.slate.900}"
          }
        },
        "text": {
          "primary": {
            "$type": "color",
            "$value": "{color.slate.100}"
          },
          "secondary": {
            "$type": "color",
            "$value": "{color.slate.300}"
          },
          "muted": {
            "$type": "color",
            "$value": "{color.slate.400}"
          },
          "disabled": {
            "$type": "color",
            "$value": "{color.slate.600}"
          },
          "link": {
            "$type": "color",
            "$value": "{color.stream.300}"
          },
          "onBrand": {
            "$type": "color",
            "$value": "{color.base.white}"
          },
          "onAccent": {
            "$type": "color",
            "$value": "{color.deepwater.950}"
          },
          "onInteractive": {
            "$type": "color",
            "$value": "{color.deepwater.950}"
          }
        },
        "border": {
          "subtle": {
            "$type": "color",
            "$value": "{color.slate.800}"
          },
          "default": {
            "$type": "color",
            "$value": "{color.slate.500}"
          }
        },
        "action": {
          "interactive": {
            "$type": "color",
            "$value": "{color.stream.500}"
          },
          "hover": {
            "$type": "color",
            "$value": "{color.stream.400}"
          },
          "active": {
            "$type": "color",
            "$value": "{color.stream.600}"
          },
          "disabled": {
            "$type": "color",
            "$value": "{color.slate.800}"
          },
          "focusRing": {
            "$type": "color",
            "$value": "{color.stream.300}"
          }
        },
        "feedback": {
          "success": {
            "$type": "color",
            "$value": "{color.success.400}"
          },
          "payout": {
            "$type": "color",
            "$value": "{color.payout.500}"
          },
          "warning": {
            "$type": "color",
            "$value": "{color.warn.400}"
          },
          "error": {
            "$type": "color",
            "$value": "{color.error.400}"
          }
        },
        "fill": {
          "success": {
            "$type": "color",
            "$value": "{color.success.500}"
          },
          "payout": {
            "$type": "color",
            "$value": "{color.payout.500}"
          },
          "payoutEdge": {
            "$type": "color",
            "$value": "{color.payout.500}"
          },
          "error": {
            "$type": "color",
            "$value": "{color.error.500}"
          }
        }
      },
      "shadow": {
        "xs": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "1px",
              "blur": "2px",
              "spread": "0px",
              "color": "rgba(0,0,0,0.40)"
            }
          ]
        },
        "sm": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "1px",
              "blur": "2px",
              "spread": "0px",
              "color": "rgba(0,0,0,0.50)"
            },
            {
              "offsetX": "0px",
              "offsetY": "10px",
              "blur": "30px",
              "spread": "-10px",
              "color": "rgba(0,0,0,0.70)"
            }
          ]
        },
        "md": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "2px",
              "blur": "4px",
              "spread": "-1px",
              "color": "rgba(0,0,0,0.50)"
            },
            {
              "offsetX": "0px",
              "offsetY": "16px",
              "blur": "40px",
              "spread": "-18px",
              "color": "rgba(0,0,0,0.75)"
            }
          ]
        },
        "lg": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "4px",
              "blur": "8px",
              "spread": "-2px",
              "color": "rgba(0,0,0,0.55)"
            },
            {
              "offsetX": "0px",
              "offsetY": "20px",
              "blur": "48px",
              "spread": "-26px",
              "color": "rgba(0,0,0,0.78)"
            }
          ]
        },
        "xl": {
          "$type": "shadow",
          "$value": [
            {
              "offsetX": "0px",
              "offsetY": "8px",
              "blur": "16px",
              "spread": "-4px",
              "color": "rgba(0,0,0,0.60)"
            },
            {
              "offsetX": "0px",
              "offsetY": "28px",
              "blur": "70px",
              "spread": "-26px",
              "color": "rgba(0,0,0,0.85)"
            }
          ]
        }
      }
    }
  }
}