{
  "properties": [
    {
      "name": "colorBackgroundAccentPrimary",
      "value": "rgb(240, 247, 250)",
      "title": "Primary Accent Backgound",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundAccentPrimaryTurva",
      "value": "rgb(253, 247, 242)",
      "title": "Primary Accent Backgound for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundAccentSecondary",
      "value": "rgb(228, 241, 247)",
      "title": "Secondary Accent Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundAccentSecondaryTurva",
      "value": "rgb(251, 235, 225)",
      "title": "Secondary Accent Background for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundAccentTertiary",
      "value": "rgb(0, 119, 179)",
      "title": "Tertiary Accent Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundAccentTertiaryTurva",
      "value": "rgb(230, 23, 64)",
      "title": "Tertiary Accent Background for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundPrimary",
      "value": "rgb(255, 255, 255)",
      "title": "Primary Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundPrimaryTurva",
      "value": "rgb(255, 255, 255)",
      "title": "Primary Background for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundSecondary",
      "value": "rgb(245, 248, 250)",
      "title": "Secondary Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundSecondaryTurva",
      "value": "rgb(245, 246, 247)",
      "title": "Secondary Background for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundTertiary",
      "value": "rgb(8, 42, 77)",
      "title": "Tertiary Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundTertiaryTurva",
      "value": "rgb(23, 42, 59)",
      "title": "Tertiary Background for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBrandBlue",
      "value": "rgb(0, 161, 212)",
      "title": "Brand Blue",
      "description": "Non-accessible brand blue that is used in LocalTapiola logo and print materials.",
      "theme": "lahitapiola",
      "order": 8,
      "status": "deprecated",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBrandGrayTurva",
      "value": "rgb(178, 180, 179)",
      "title": "Brand Gray",
      "description": "Non-accessible brand gray that is used in Turva logo and print materials.",
      "theme": "turva",
      "order": 8,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryFamily",
      "value": "rgb(11, 114, 136)",
      "title": "Category Family",
      "description": "Family category color that is accessible with white. Should be only used within the family product category and icons (or similar) representing it.",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryFamilyTurva",
      "value": "rgb(199, 12, 112)",
      "title": "Category Family",
      "description": "Family category color that is accessible with white. Should be only used within the family product category and icons (or similar) representing it.",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryFinance",
      "value": "rgb(122, 1, 196)",
      "title": "Category Finance",
      "description": "Finance category color that is accessible with white. Should be only used within the finance product category and icons (or similar) representing it.",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryHome",
      "value": "rgb(211, 36, 131)",
      "title": "Category Home",
      "description": "Home category color that is accessible with white. Should be only used within the home product category and icons (or similar) representing it.",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryHomeTurva",
      "value": "rgb(161, 10, 78)",
      "title": "Category Home",
      "description": "Home category color that is accessible with white. Should be only used within the home product category and icons (or similar) representing it.",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryPet",
      "value": "rgb(168, 1, 78)",
      "title": "Category Pet",
      "description": "Pet category color that is accessible with white. Should be only used within the pet product category and icons (or similar) representing it.",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryTravel",
      "value": "rgb(213, 66, 3)",
      "title": "Category Travel",
      "description": "Travel category color that is accessible with white. Should be only used within the travel product category and icons (or similar) representing it.",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryTravelTurva",
      "value": "rgb(9, 129, 148)",
      "title": "Category Travel",
      "description": "Travel category color that is accessible with white. Should be only used within the travel product category and icons (or similar) representing it.",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryUnionTurva",
      "value": "rgb(169, 69, 124)",
      "title": "Category Union",
      "description": "Union category color that is accessible with white. Should be only used within the union product category and icons (or similar) representing it.",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryVehicle",
      "value": "rgb(54, 74, 129)",
      "title": "Category Vehicle",
      "description": "Vehicle category color that is accessible with white. Should be only used within the vehicle/mobility product category and icons (or similar) representing it.",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorCategoryVehicleTurva",
      "value": "rgb(23, 28, 58)",
      "title": "Category Vehicle",
      "description": "Vehicle category color that is accessible with white. Should be only used within the vehicle/mobility product category and icons (or similar) representing it.",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger",
      "value": "rgb(214, 28, 82)",
      "title": "Status Danger",
      "description": "Danger red that is accessible with white. Only used in special cases like form validation and messaging.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 9,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger00",
      "value": "rgb(255, 240, 243)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger100",
      "value": "rgb(255, 211, 219)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger1000",
      "value": "rgb(89, 0, 45)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger200",
      "value": "rgb(255, 173, 190)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger300",
      "value": "rgb(252, 136, 162)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger400",
      "value": "rgb(243, 98, 134)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger50",
      "value": "rgb(255, 225, 231)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger500",
      "value": "rgb(231, 62, 107)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger600",
      "value": "rgb(214, 28, 82)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger700",
      "value": "rgb(185, 16, 74)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger800",
      "value": "rgb(153, 9, 66)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDanger900",
      "value": "rgb(120, 4, 56)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDangerTurva",
      "value": "rgb(214, 28, 82)",
      "title": "Status Danger",
      "description": "Danger red that is accessible with white. Only used in special cases like form validation and messaging.",
      "theme": "turva",
      "status": "ready",
      "order": 9,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorData01",
      "value": "rgb(122, 1, 196)",
      "title": "Data 01",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 1,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData02",
      "value": "rgb(0, 155, 204)",
      "title": "Data 02",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 2,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData03",
      "value": "rgb(27, 171, 75)",
      "title": "Data 03",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 3,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData04",
      "value": "rgb(255, 86, 34)",
      "title": "Data 04",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 4,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData05",
      "value": "rgb(245, 76, 154)",
      "title": "Data 05",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 5,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData06",
      "value": "rgb(194, 21, 101)",
      "title": "Data 06",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 6,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData07",
      "value": "rgb(192, 101, 247)",
      "title": "Data 07",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 7,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData08",
      "value": "rgb(0, 105, 191)",
      "title": "Data 08",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 8,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData09",
      "value": "rgb(19, 120, 53)",
      "title": "Data 09",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 9,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData10",
      "value": "rgb(179, 60, 24)",
      "title": "Data 10",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 10,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData11",
      "value": "rgb(13, 163, 166)",
      "title": "Data 11",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 11,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData12",
      "value": "rgb(11, 114, 136)",
      "title": "Data 12",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 12,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData13",
      "value": "rgb(179, 137, 24)",
      "title": "Data 13",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 13,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData14",
      "value": "rgb(128, 98, 17)",
      "title": "Data 14",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 14,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorData15",
      "value": "rgb(0, 41, 77)",
      "title": "Data 15",
      "description": "Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose.",
      "status": "ready",
      "order": 15,
      "type": "color",
      "category": "data-visualization"
    },
    {
      "name": "colorGray",
      "value": "rgb(181, 198, 208)",
      "title": "Gray",
      "description": "Gray that is accessible with secondary blue. For consistency, we use this common grayscale palette throughout the interface.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 14,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayDark",
      "value": "rgb(127, 150, 165)",
      "title": "Gray Dark",
      "description": "Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 13,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayDarkTurva",
      "value": "rgb(143, 147, 158)",
      "title": "Gray Dark",
      "description": "Dark gray that is accessible with white. Most commonly used to indicate inactive interface state. This color should also be used for borders that need to pass WCAG Level AA non-text contrast requirements.",
      "theme": "turva",
      "status": "ready",
      "order": 13,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayDarker",
      "value": "rgb(98, 121, 138)",
      "title": "Gray Darker",
      "description": "Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 12,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayDarkerTurva",
      "value": "rgb(113, 118, 132)",
      "title": "Gray Darker",
      "description": "Dark gray that is accessible with white. Most commonly used as selected tab button background color.",
      "theme": "turva",
      "status": "ready",
      "order": 12,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayLight",
      "value": "rgb(212, 223, 229)",
      "title": "Gray Light",
      "description": "Light gray that is accessible with secondary blue. For consistency, we use this common grayscale palette throughout the interface.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 15,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayLightTurva",
      "value": "rgb(222, 224, 228)",
      "title": "Gray Light",
      "description": "Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.",
      "theme": "turva",
      "status": "ready",
      "order": 13,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayLighter",
      "value": "rgb(245, 248, 250)",
      "title": "Gray Lighter",
      "description": "Light gray that is accessible with secondary blue. For consistency, we use this common grayscale palette throughout the interface.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 16,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayLighterTurva",
      "value": "rgb(245, 247, 250)",
      "title": "Gray Lighter",
      "description": "Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.",
      "theme": "turva",
      "status": "ready",
      "order": 15,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayLightest",
      "value": "rgb(255, 255, 255)",
      "title": "Gray Lightest",
      "description": "White is used as the primary page background color and primary container background color.",
      "status": "ready",
      "theme": "lahitapiola",
      "order": 17,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayLightestTurva",
      "value": "rgb(255, 255, 255)",
      "title": "Gray Lightest",
      "description": "White is used as the primary page background color and primary container background color.",
      "status": "ready",
      "theme": "turva",
      "order": 16,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorGrayTurva",
      "value": "rgb(199, 202, 207)",
      "title": "Gray",
      "description": "Gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.",
      "theme": "turva",
      "status": "ready",
      "order": 14,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue00",
      "value": "rgb(240, 247, 250)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue100",
      "value": "rgb(217, 236, 245)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue1000",
      "value": "rgb(8, 42, 77)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue200",
      "value": "rgb(198, 225, 238)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue300",
      "value": "rgb(172, 210, 229)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue400",
      "value": "rgb(131, 188, 217)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue50",
      "value": "rgb(228, 241, 247)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue500",
      "value": "rgb(50, 153, 204)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue600",
      "value": "rgb(0, 119, 179)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue700",
      "value": "rgb(0, 97, 155)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue800",
      "value": "rgb(0, 75, 129)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtBlue900",
      "value": "rgb(3, 56, 102)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray00",
      "value": "rgb(245, 248, 250)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray100",
      "value": "rgb(212, 223, 229)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray1000",
      "value": "rgb(17, 28, 38)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray200",
      "value": "rgb(181, 198, 208)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray300",
      "value": "rgb(153, 174, 186)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray400",
      "value": "rgb(127, 150, 165)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray50",
      "value": "rgb(228, 236, 239)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray500",
      "value": "rgb(98, 121, 138)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray600",
      "value": "rgb(81, 105, 123)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray700",
      "value": "rgb(62, 84, 102)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray800",
      "value": "rgb(45, 64, 81)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorLtGray900",
      "value": "rgb(30, 45, 59)",
      "theme": "lahitapiola",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimary",
      "value": "rgb(0, 119, 179)",
      "title": "Primary Blue",
      "description": "Primary digital blue that is accessible with white. Used as primary button background color, selected state background color, and as link text color.",
      "theme": "lahitapiola",
      "order": 3,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryDark",
      "value": "rgb(0, 75, 129)",
      "title": "Primary Blue Dark",
      "description": "Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.",
      "theme": "lahitapiola",
      "order": 1,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryDarkTurva",
      "value": "rgb(126, 2, 35)",
      "title": "Primary Red Dark",
      "description": "Dark version of primary red that is accessible with white. Most commonly used to indicate hover and active states of an item with primary red background.",
      "theme": "turva",
      "order": 1,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryDarker",
      "value": "rgb(0, 97, 155)",
      "title": "Primary Blue Darker",
      "description": "Primary digital blue that is accessible with white. Used as link text color.",
      "theme": "lahitapiola",
      "order": 2,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryDarkerTurva",
      "value": "rgb(164, 4, 40)",
      "title": "Primary Red Darker",
      "description": "Primary digital red that is accessible with white. Used as link text color.",
      "theme": "turva",
      "order": 2,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryLight",
      "value": "rgb(198, 225, 238)",
      "title": "Primary Blue Light",
      "description": "Light blue that is 20% tint of the primary blue. Accessible when secondary blue is used as the text color. Used for date hovers and in-between date ranges.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 4,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryLightTurva",
      "value": "rgb(255, 185, 190)",
      "title": "Primary Red Light",
      "description": "Light red that is 20% tint of the primary red. Accessible when secondary black is used as the text color.",
      "theme": "turva",
      "status": "deprecated",
      "order": 4,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryLighter",
      "value": "rgb(228, 241, 247)",
      "title": "Primary Blue Lighter",
      "description": "Light blue that is 10% tint of the primary blue. Accessible when secondary blue is used as the text color. Used for the dark end of background gradients.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 5,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryLighterTurva",
      "value": "rgb(255, 227, 228)",
      "title": "Primary Red Lighter",
      "description": "Light red that is 10% tint of the primary red. Accessible when secondary black is used as the text color.",
      "theme": "turva",
      "status": "deprecated",
      "order": 5,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryLightest",
      "value": "rgb(240, 247, 250)",
      "title": "Primary Blue Lightest",
      "description": "Light blue that is 5% tint of the primary blue. Accessible when secondary blue is used as the text color. Commonly used to indicate a hover state of item with white background.",
      "theme": "lahitapiola",
      "order": 6,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryLightestTurva",
      "value": "rgb(255, 241, 241)",
      "title": "Primary Red Lightest",
      "description": "Light red that is 5% tint of the primary red. Accessible when secondary black is used as the text color. Commonly used to indicate a hover state of item with white background.",
      "theme": "turva",
      "order": 6,
      "status": "deprecated",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorPrimaryTurva",
      "value": "rgb(198, 12, 48)",
      "title": "Primary Red",
      "description": "Primary digital red that is accessible with white. Used as primary button background color, selected state background color, and as link text color.",
      "theme": "turva",
      "order": 3,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSecondary",
      "value": "rgb(8, 42, 77)",
      "title": "Secondary Blue",
      "description": "Secondary blue that is accessible with light, lighter and lightest primary blue. Used as the body text color.",
      "theme": "lahitapiola",
      "order": 7,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSecondaryTurva",
      "value": "rgb(23, 28, 58)",
      "title": "Secondary Black",
      "description": "Secondary black that is accessible with light, lighter and lightest primary red. Used as the body text color.",
      "theme": "turva",
      "order": 7,
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess",
      "value": "rgb(48, 131, 105)",
      "title": "Status Success",
      "description": "Success green that is accessible with white. Only used in special cases like form validation and messaging.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 11,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess00",
      "value": "rgb(244, 250, 247)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess100",
      "value": "rgb(218, 246, 233)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess1000",
      "value": "rgb(4, 38, 33)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess200",
      "value": "rgb(191, 239, 218)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess300",
      "value": "rgb(163, 229, 202)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess400",
      "value": "rgb(134, 215, 185)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess50",
      "value": "rgb(231, 248, 239)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess500",
      "value": "rgb(105, 196, 166)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess600",
      "value": "rgb(76, 164, 138)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess700",
      "value": "rgb(48, 131, 105)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess800",
      "value": "rgb(29, 106, 88)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccess900",
      "value": "rgb(13, 71, 59)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorSuccessTurva",
      "value": "rgb(48, 131, 105)",
      "title": "Status Success",
      "description": "Success green that is accessible with white. Only used in special cases like form validation and messaging.",
      "theme": "turva",
      "status": "ready",
      "order": 11,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray00",
      "value": "rgb(245, 246, 247)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray100",
      "value": "rgb(212, 221, 226)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray1000",
      "value": "rgb(6, 23, 38)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray200",
      "value": "rgb(178, 194, 205)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray300",
      "value": "rgb(148, 169, 185)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray400",
      "value": "rgb(120, 145, 164)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray50",
      "value": "rgb(228, 233, 237)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray500",
      "value": "rgb(95, 122, 143)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray600",
      "value": "rgb(72, 100, 122)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray700",
      "value": "rgb(53, 79, 101)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray800",
      "value": "rgb(37, 60, 80)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Gray900",
      "value": "rgb(23, 42, 59)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red00",
      "value": "rgb(255, 242, 242)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red100",
      "value": "rgb(255, 229, 230)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red1000",
      "value": "rgb(51, 0, 10)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red200",
      "value": "rgb(255, 201, 204)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red300",
      "value": "rgb(249, 164, 172)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red400",
      "value": "rgb(243, 119, 133)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red50",
      "value": "rgb(255, 236, 236)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red500",
      "value": "rgb(236, 69, 96)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red600",
      "value": "rgb(230, 23, 64)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red700",
      "value": "rgb(185, 3, 41)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red800",
      "value": "rgb(140, 0, 30)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurva2Red900",
      "value": "rgb(96, 0, 20)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray00",
      "value": "rgb(245, 247, 250)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray100",
      "value": "rgb(222, 224, 228)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray1000",
      "value": "rgb(8, 13, 38)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray200",
      "value": "rgb(199, 202, 207)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray300",
      "value": "rgb(175, 178, 186)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray400",
      "value": "rgb(143, 147, 158)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray50",
      "value": "rgb(234, 235, 239)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray500",
      "value": "rgb(113, 118, 132)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray600",
      "value": "rgb(98, 104, 122)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray700",
      "value": "rgb(71, 78, 101)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray800",
      "value": "rgb(45, 52, 79)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray900",
      "value": "rgb(23, 28, 58)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude00",
      "value": "rgb(253, 247, 242)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude100",
      "value": "rgb(251, 225, 209)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude1000",
      "value": "rgb(38, 21, 15)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude200",
      "value": "rgb(241, 202, 178)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude300",
      "value": "rgb(216, 174, 150)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude400",
      "value": "rgb(190, 147, 124)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude50",
      "value": "rgb(251, 235, 225)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude500",
      "value": "rgb(165, 122, 101)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude600",
      "value": "rgb(140, 98, 79)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude700",
      "value": "rgb(114, 76, 60)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude800",
      "value": "rgb(89, 56, 43)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaNude900",
      "value": "rgb(64, 38, 28)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed00",
      "value": "rgb(255, 241, 241)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed100",
      "value": "rgb(255, 213, 215)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed1000",
      "value": "rgb(51, 5, 20)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed200",
      "value": "rgb(255, 185, 190)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed300",
      "value": "rgb(252, 148, 158)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed400",
      "value": "rgb(240, 102, 119)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed50",
      "value": "rgb(255, 227, 228)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed500",
      "value": "rgb(221, 49, 77)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed600",
      "value": "rgb(198, 12, 48)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed700",
      "value": "rgb(164, 4, 40)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed800",
      "value": "rgb(126, 2, 35)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed900",
      "value": "rgb(87, 4, 29)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning",
      "value": "rgb(247, 178, 40)",
      "title": "Status Warning",
      "description": "Warning orange (non-accessible) is only used in special cases like form validation and messaging.",
      "theme": "lahitapiola",
      "status": "ready",
      "order": 10,
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning00",
      "value": "rgb(255, 251, 242)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning100",
      "value": "rgb(255, 244, 198)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning1000",
      "value": "rgb(38, 26, 4)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning200",
      "value": "rgb(255, 232, 160)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning300",
      "value": "rgb(255, 217, 120)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning400",
      "value": "rgb(255, 199, 79)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning50",
      "value": "rgb(255, 247, 221)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning500",
      "value": "rgb(247, 178, 40)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning600",
      "value": "rgb(196, 138, 23)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning700",
      "value": "rgb(156, 110, 22)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning800",
      "value": "rgb(126, 87, 16)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarning900",
      "value": "rgb(81, 55, 9)",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorWarningTurva",
      "value": "rgb(247, 178, 40)",
      "title": "Status Warning",
      "description": "Warning orange (non-accessible) is only used in special cases like form validation and messaging.",
      "theme": "turva",
      "status": "ready",
      "order": 10,
      "type": "color",
      "category": "color"
    },
    {
      "name": "fontFamilyHeading",
      "value": "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
      "title": "Font Family: Heading",
      "description": "Heading font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for headings only.",
      "theme": "lahitapiola",
      "status": "ready",
      "meta": {
        "postscriptName": "LahiTapiola Sans"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "fontFamilyHeadingTurva",
      "value": "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
      "title": "Font Family: Heading",
      "description": "Heading font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for headings only.",
      "theme": "turva",
      "status": "ready",
      "meta": {
        "postscriptName": "Asap"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "fontFamilyText",
      "value": "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
      "title": "Font Family: Text",
      "description": "Text font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for body text and form controls.",
      "theme": "lahitapiola",
      "status": "ready",
      "meta": {
        "postscriptName": "LahiTapiola Sans"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "fontFamilyTextTurva",
      "value": "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
      "title": "Font Family: Text",
      "description": "Text font family uses a font stack that gracefully degrades to default system fonts on different platforms. Should be used for body text and form controls.",
      "theme": "turva",
      "status": "ready",
      "meta": {
        "postscriptName": "Asap"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "fontSizeLarge",
      "value": "1.25rem",
      "title": "Font Size: Large",
      "description": "Large font size is used for small sub-headings.",
      "status": "ready",
      "order": 4,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontSizeMedium",
      "value": "1rem",
      "title": "Font Size: Medium",
      "description": "Medium font size is used for the body text.",
      "status": "ready",
      "order": 3,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontSizeSmall",
      "value": "0.875rem",
      "title": "Font Size: Small",
      "description": "Small font size should be used sparingly for annotations, descriptions, and similar content.",
      "status": "ready",
      "order": 2,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontSizeXLarge",
      "value": "1.5rem",
      "title": "Font Size: X-Large",
      "description": "X-large font size is used for large sub-headings.",
      "status": "ready",
      "order": 5,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontSizeXSmall",
      "value": "0.75rem",
      "title": "Font Size: X-Small",
      "description": "X-Small font size that is only used in native iOS and Android applications.",
      "status": "ready",
      "order": 1,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontSizeXxLarge",
      "value": "2.25rem",
      "title": "Font Size: XX-Large",
      "description": "XX-large font size is used for the main heading on tablet size.",
      "status": "ready",
      "order": 6,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontSizeXxxLarge",
      "value": "3rem",
      "title": "Font Size: XXX-Large",
      "description": "XXX-large font size is used for the main heading on desktop.",
      "status": "ready",
      "order": 7,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontSizeXxxxLarge",
      "value": "4.5rem",
      "title": "Font Size: XXXX-Large",
      "description": "XXXX-large font size is for marketing purposes and banners.",
      "status": "ready",
      "order": 8,
      "type": "number",
      "category": "font-size"
    },
    {
      "name": "fontWeightBold",
      "value": "700",
      "title": "Font Weight: Bold",
      "description": "Bold font weight is used for headings only together with “Heading” font family.",
      "theme": "turva",
      "status": "ready",
      "meta": {
        "postscriptWeight": "Bold"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "fontWeightExtraBold",
      "value": "800",
      "title": "Font Weight: Extra Bold",
      "description": "Extra bold font weight is used for headings only together with “Heading” font family.",
      "theme": "lahitapiola",
      "status": "ready",
      "meta": {
        "postscriptWeight": "Extra Bold"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "fontWeightNormal",
      "value": "400",
      "title": "Font Weight: Normal",
      "description": "Normal font weight is used for body text and form inputs together with “Text” font family.",
      "status": "ready",
      "meta": {
        "postscriptWeight": "Normal"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "fontWeightSemiBold",
      "value": "600",
      "title": "Font Weight: Semi Bold",
      "description": "Semi bold font weight is used for buttons and sub headings together with “Text” font family.",
      "status": "ready",
      "meta": {
        "postscriptWeight": "Semi Bold"
      },
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "letterSpacingHeading",
      "value": "-0.01rem",
      "title": "Letter Spacing: Heading",
      "description": "Gives tiny amount of negative letter spacing for the page main heading.",
      "status": "ready",
      "type": "font",
      "category": "fonts"
    },
    {
      "name": "lineHeightMedium",
      "value": "1.5",
      "title": "Line Height: Medium",
      "description": "Medium line-height is used for the main body text. Basically everything else except the headings and sidebar (and a few other exceptions).",
      "status": "ready",
      "type": "number",
      "category": "line-height"
    },
    {
      "name": "lineHeightSmall",
      "value": "1.25",
      "title": "Line Height: Small",
      "description": "Small line-height is used for all application headings and text in sidebar.",
      "status": "ready",
      "type": "number",
      "category": "line-height"
    },
    {
      "name": "lineHeightXSmall",
      "value": "1.1",
      "title": "Line Height: X-Small",
      "description": "X-small line-height is used when we don’t want the line-height to create any additional white space above or below text.",
      "status": "ready",
      "type": "number",
      "category": "line-height"
    },
    {
      "name": "mediaQueryLarge",
      "value": "'(min-width: 62em)'",
      "title": "Media Query: Large",
      "description": "Large media query is used to target landscape tablets from 992px and up.",
      "status": "ready",
      "order": 6,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQueryMedium",
      "value": "'(min-width: 48em)'",
      "title": "Media Query: Medium",
      "description": "Medium media query is used to target portrait tablets from 768px and up.",
      "status": "ready",
      "order": 5,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQuerySmall",
      "value": "'(min-width: 36em)'",
      "title": "Media Query: Small",
      "description": "Small media query is used to target devices from 576px and up. When working mobile first, this is your first breakpoint when the viewport width grows.",
      "status": "ready",
      "order": 4,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQueryXLarge",
      "value": "'(min-width: 64.0625em)'",
      "title": "Media Query: X-Large",
      "description": "X-Large media query is used to target desktop devices from 1025px and up.",
      "status": "ready",
      "order": 7,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQueryXSmall",
      "value": "'(max-width: 35.9375em)'",
      "title": "Media Query: X-Small",
      "description": "X-Small media query is used to target smaller devices between 0-575px. Remember that in most cases the X-Small media query is rarely needed when building websites mobile first.",
      "status": "ready",
      "order": 3,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQueryXxLarge",
      "value": "'(min-width: 76.25em)'",
      "title": "Media Query: XX-Large",
      "description": "XX-Large media query is used to target large desktop devices from 1220px and up.",
      "status": "ready",
      "order": 8,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQueryXxSmall",
      "value": "'(max-width: 22.5em)'",
      "title": "Media Query: XX-Small",
      "description": "XX-Small media query is used to target the smallest devices between 0-360px. Remember that in most cases the XX-Small media query is rarely needed when building websites mobile first.",
      "status": "ready",
      "order": 2,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQueryXxxLarge",
      "value": "'(min-width: 106.25em)'",
      "title": "Media Query: XXX-Large",
      "description": "XXX-Large media query is used to target very large desktop devices from 1700px and up.",
      "status": "ready",
      "order": 9,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "mediaQueryXxxSmall",
      "value": "'(max-width: 20.5em)'",
      "title": "Media Query: XXX-Small",
      "description": "XX-Small media query is used to target devices below 360px. Remember that in most cases the XXX-Small media query is rarely needed when building websites mobile first.",
      "status": "ready",
      "order": 1,
      "type": "...",
      "category": "media-query"
    },
    {
      "name": "opacity30",
      "value": "0.30",
      "title": "Opacity: 30%",
      "description": "Gives 30% opacity to an element.",
      "status": "ready",
      "type": "number",
      "category": "opacity"
    },
    {
      "name": "opacity50",
      "value": "0.50",
      "title": "Opacity: 50%",
      "description": "Gives 50% opacity to an element.",
      "status": "ready",
      "type": "number",
      "category": "opacity"
    },
    {
      "name": "opacity75",
      "value": "0.75",
      "title": "Opacity: 75%",
      "description": "Gives 75% opacity to an element.",
      "status": "ready",
      "type": "number",
      "category": "opacity"
    },
    {
      "name": "opacity85",
      "value": "0.85",
      "title": "Opacity: 85%",
      "description": "Gives 85% opacity to an element.",
      "status": "ready",
      "type": "number",
      "category": "opacity"
    },
    {
      "name": "radiusCircle",
      "value": "50%",
      "title": "Border Radius: Circle",
      "description": "Circle border-radius is used as icon background shape and as avatar shape.",
      "category": "border-radius",
      "status": "ready",
      "order": 6,
      "type": "number"
    },
    {
      "name": "radiusDefault",
      "value": "4px",
      "title": "Border Radius: Default",
      "description": "Default border-radius is used in interface containers, form inputs, textareas, and similar. If you’re unsure which radius to use, pick the default.",
      "category": "border-radius",
      "status": "ready",
      "order": 1,
      "type": "number"
    },
    {
      "name": "radiusIntermediate",
      "value": "12px",
      "title": "Border Radius: Intermediate",
      "description": "Intermediate border-radius is in some interactive UI elements and when medium is not enough and large is too much.",
      "category": "border-radius",
      "status": "review",
      "order": 3,
      "type": "number"
    },
    {
      "name": "radiusLarge",
      "value": "16px",
      "title": "Border Radius: Large",
      "description": "Large border-radius is used in marketing container, banners and big images.",
      "category": "border-radius",
      "status": "review",
      "order": 4,
      "type": "number"
    },
    {
      "name": "radiusMedium",
      "value": "8px",
      "title": "Border Radius: Medium",
      "description": "Medium border-radius is used in cards, small containers (e.g. menu component) and small images.",
      "category": "border-radius",
      "status": "review",
      "order": 2,
      "type": "number"
    },
    {
      "name": "radiusPill",
      "value": "20rem",
      "title": "Border Radius: Pill",
      "description": "Pill border-radius is the default radius for buttons, tags, tabs, and similar.",
      "category": "border-radius",
      "status": "ready",
      "order": 5,
      "type": "number"
    },
    {
      "name": "radiusSharp",
      "value": "0",
      "title": "Border Radius: Sharp",
      "description": "Sharp border-radius resets the corners to be sharp with no rounding.",
      "category": "border-radius",
      "status": "ready",
      "order": 0,
      "type": "number"
    },
    {
      "name": "shadowCard",
      "value": "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)",
      "title": "Shadow: Card",
      "description": "Card shadow is a variant of default shadow that is used when information needs to be contained within a card.",
      "category": "box-shadow",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "..."
    },
    {
      "name": "shadowCardTurva",
      "value": "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)",
      "title": "Shadow: Card",
      "description": "Card shadow is a variant of default shadow that is used when information needs to be contained within a card.",
      "category": "box-shadow",
      "theme": "turva",
      "status": "ready",
      "type": "..."
    },
    {
      "name": "shadowDefault",
      "value": "0 2px 6px 0 rgba(0, 41, 77, 0.07)",
      "title": "Shadow: Default",
      "description": "Default shadow style.",
      "category": "box-shadow",
      "status": "ready",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowDefaultTurva",
      "value": "0 2px 6px 0 rgba(117, 117, 117, 0.13)",
      "title": "Shadow: Default",
      "description": "Default shadow is used when information needs to be contained within a component.",
      "category": "box-shadow",
      "status": "ready",
      "theme": "turva",
      "type": "..."
    },
    {
      "name": "shadowError",
      "value": "0 0 0 1px #de2362",
      "title": "Shadow: Error",
      "description": "Error state shadow, uses $color-danger.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowErrorTurva",
      "value": "0 0 0 1px #e55039",
      "title": "Shadow: Error Turva",
      "description": "Error state shadow for Turva theme, using $color-danger-turva.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "turva",
      "type": "..."
    },
    {
      "name": "shadowFocus",
      "value": "0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3",
      "title": "Shadow: Focus",
      "description": "Applied for focus state shadow styling, utilizes $color-primary.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowFocusInput",
      "value": "0 0 0 1px #0077b3",
      "title": "Shadow: Focus Input",
      "description": "Input element focus shadow styling, incorporates $color-primary.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowFocusInputTurva",
      "value": "0 0 0 1px #171c3a",
      "title": "Shadow: Focus Input Turva",
      "description": "Focus state shadow for input elements in Turva theme, using $color-secondary-turva.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "turva",
      "type": "..."
    },
    {
      "name": "shadowFocusTurva",
      "value": "0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a",
      "title": "Shadow: Focus Turva",
      "description": "Focus state shadow for Turva theme, using $color-secondary-turva.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "turva",
      "type": "..."
    },
    {
      "name": "shadowHover",
      "value": "0 2px 10px 0 rgba(0, 41, 77, 0.1)",
      "title": "Shadow: Hover",
      "description": "Hover shadow is used when primary component is clickable and is hovered over/active on mobile.",
      "category": "box-shadow",
      "status": "ready",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowHoverInput",
      "value": "0 0 0 1px #909599",
      "title": "Shadow: Hover Input",
      "description": "Input hover state shadow, uses $color-gray-dark.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowHoverInputTurva",
      "value": "0 0 0 1px #747475",
      "title": "Shadow: Hover Input Turva",
      "description": "Hover state shadow for input elements in Turva theme, using $color-gray-dark-turva.",
      "category": "box-shadow",
      "status": "deprecated",
      "theme": "turva",
      "type": "..."
    },
    {
      "name": "shadowHoverTurva",
      "value": "0 2px 10px 0 rgba(117, 117, 117, 0.15)",
      "title": "Shadow: Hover",
      "description": "Hover shadow is used when primary component is clickable and is hovered over/active on mobile.",
      "category": "box-shadow",
      "status": "ready",
      "theme": "turva",
      "type": "..."
    },
    {
      "name": "shadowModal",
      "value": "0 2px 20px 0 rgba(0, 0, 0, 0.2)",
      "title": "Shadow: Modal",
      "description": "Modal shadow is used for popovers and modal windows on a dark blue overlay.",
      "category": "box-shadow",
      "status": "ready",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowTooltip",
      "value": "0 2px 10px 0 rgba(0, 41, 77, 0.07)",
      "title": "Shadow: Tooltip",
      "description": "Tooltip shadow is used by popover tooltips.",
      "category": "box-shadow",
      "status": "ready",
      "theme": "lahitapiola",
      "type": "..."
    },
    {
      "name": "shadowTooltipTurva",
      "value": "0 2px 10px 0 rgba(117, 117, 117, 0.13)",
      "title": "Shadow: Tooltip",
      "description": "Tooltip shadow is used by popover tooltips.",
      "category": "box-shadow",
      "status": "ready",
      "theme": "turva",
      "type": "..."
    },
    {
      "name": "sizeButtonBorder",
      "value": "1px",
      "title": "Size: Button Border",
      "description": "Button border size is used to set a consistent borders for buttons.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeButtonMinWidth",
      "value": "8rem",
      "title": "Size: Button Min Width",
      "description": "Button min width size is used to set the minimum width for button elements.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeButtonTinyBorder",
      "value": "1px",
      "title": "Size: Button Tiny Border",
      "description": "Button tiny border size is used to set a consistent borders for action buttons - that contain only icons.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeFormBorder",
      "value": "1px",
      "title": "Size: Form Border",
      "description": "Form border size is used to set a consistent borders for form elements.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeHeader",
      "value": "4rem",
      "title": "Size: Header",
      "description": "Header size (64px) is used for the header height on mobile, tablet and desktop viewports.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconLarge",
      "value": "30px",
      "title": "Size: Icon Large",
      "description": "Large icon size is used for insurance categories in mobile, small product levels, and card icons.",
      "status": "ready",
      "order": 5,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconMedium",
      "value": "24px",
      "title": "Size: Icon Medium",
      "description": "Medium icon size is the standard icon size. Used for example in primary selections.",
      "status": "ready",
      "order": 4,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconSmall",
      "value": "20px",
      "title": "Size: Icon Small",
      "description": "Small icon size is used with text links, buttons, inside forms, and in global navigation.",
      "status": "ready",
      "order": 3,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconXLarge",
      "value": "36px",
      "title": "Size: Icon X-Large",
      "description": "X-large icon size is used as product level icons.",
      "status": "ready",
      "order": 6,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconXSmall",
      "value": "16px",
      "title": "Size: Icon X-Small",
      "description": "X-small icon size is used when the space is limited.",
      "status": "ready",
      "order": 2,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconXxLarge",
      "value": "48px",
      "title": "Size: Icon XX-Large",
      "description": "XX-large icon size is used in components as a visual element.",
      "status": "ready",
      "order": 7,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconXxSmall",
      "value": "10px",
      "title": "Size: Icon XX-Small",
      "description": "XX-small icon size is used when the space is limited.",
      "status": "ready",
      "order": 1,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconXxxLarge",
      "value": "72px",
      "title": "Size: Icon XXX-Large",
      "description": "XXX-large icon size is used for insurance categories in desktop and to visualise feedback overlays.",
      "status": "ready",
      "order": 8,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeIconXxxSmall",
      "value": "7px",
      "title": "Size: Icon XXX-Small",
      "description": "XXX-small icon size is used when the space is limited.",
      "status": "ready",
      "order": 0,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeLayoutMaxWidth",
      "value": "1110px",
      "title": "Size: Layout Max-Width",
      "description": "This size is used as the max-width for all layouts on the Web.",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeMediumBorder",
      "value": "2px",
      "title": "Size: Medium Border",
      "description": "Medium border size is used to set a consistent borders for components needing thicker border than buttons or form elements.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeNavigation",
      "value": "3rem",
      "title": "Size: Navigation",
      "description": "Navigation size (48px) is used for the navigation height on desktop viewports.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeStepMedium",
      "value": "40px",
      "title": "Size: Step Medium",
      "description": "Medium step size is used for stepper circles that have icon inside them (desktop viewports).",
      "status": "review",
      "order": -1,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeStepSmall",
      "value": "30px",
      "title": "Size: Step Small",
      "description": "Small step size is used for stepper circles that have icon inside them (mobile viewports).",
      "status": "review",
      "order": -2,
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "sizeTappableSquare",
      "value": "48px",
      "title": "Size: Tappable Square",
      "description": "A minimum recommended touch target size is 48 device independent pixels on a website with a properly set mobile viewport.",
      "status": "ready",
      "type": "number",
      "category": "sizes"
    },
    {
      "name": "spaceLarge",
      "value": "20px",
      "title": "Space: Large",
      "description": "Large space is most commonly used as an empty space between two components.",
      "status": "ready",
      "order": 5,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceMedium",
      "value": "16px",
      "title": "Space: Medium",
      "description": "Medium is the default space.",
      "status": "ready",
      "order": 4,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceSmall",
      "value": "12px",
      "title": "Space: Small",
      "description": "Small space is used when the space is limited and for example in popover datepicker.",
      "status": "ready",
      "order": 3,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXLarge",
      "value": "28px",
      "title": "Space: X-Large",
      "description": "X-large space is used as an empty space between two elements.",
      "status": "ready",
      "order": 6,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXSmall",
      "value": "8px",
      "title": "Space: X-Small",
      "description": "X-small space is used when the space is limited.",
      "status": "ready",
      "order": 2,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXxLarge",
      "value": "36px",
      "title": "Space: XX-Large",
      "description": "XX-large space is used as horizontal padding in buttons and as an empty space between two elements.",
      "status": "ready",
      "order": 7,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXxSmall",
      "value": "4px",
      "title": "Space: XX-Small",
      "description": "XX-small space is used when the space is limited.",
      "status": "ready",
      "order": 1,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXxxLarge",
      "value": "48px",
      "title": "Space: XXX-Large",
      "description": "XXX-large space is used as an empty space between two elements.",
      "status": "ready",
      "order": 8,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXxxSmall",
      "value": "2px",
      "title": "Space: XXX-Small",
      "description": "XXX-small space is used when the space is limited.",
      "status": "ready",
      "order": 0,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXxxxLarge",
      "value": "72px",
      "title": "Space: XXXX-Large",
      "description": "XXXX-large space is used as an empty space between two elements.",
      "status": "ready",
      "order": 9,
      "type": "number",
      "category": "space"
    },
    {
      "name": "spaceXxxxxLarge",
      "value": "94px",
      "title": "Space: XXXXX-Large",
      "description": "XXXXX-large space is used as spacer on modals.",
      "status": "ready",
      "order": 10,
      "type": "number",
      "category": "space"
    },
    {
      "name": "transitionQuickly",
      "value": "300ms ease",
      "title": "Transition: Quickly",
      "description": "Use this design token for a quick transition. Most often used for button, link and form input hover effects.",
      "status": "ready",
      "type": "...",
      "category": "transition"
    },
    {
      "name": "transitionSlowly",
      "value": "600ms ease",
      "title": "Transition: Slowly",
      "description": "Use this design token for a slow transition. Used for example in mobile navigation.",
      "status": "ready",
      "type": "...",
      "category": "transition"
    },
    {
      "name": "zIndexDeep",
      "value": "-999999",
      "title": "Z-Index: Deep",
      "description": "Deep z-index is used to stack something behind everything else.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexDefault",
      "value": "1",
      "title": "Z-Index: Default",
      "description": "The default z-index for components and elements inside components.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexDropdown",
      "value": "600",
      "title": "Z-Index: Dropdown",
      "description": "Default z-index for dropdowns which makes sure the dropdown stacks above toasts and sticky elements.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexHeader",
      "value": "400",
      "title": "Z-Index: Header",
      "description": "Default z-index for header.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexMask",
      "value": "200",
      "title": "Z-Index: Mask",
      "description": "Default z-index for masking interface elements.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexMaskButtons",
      "value": "250",
      "title": "Z-Index: Mask Buttons",
      "description": "Default z-index for buttons that should overlap masking interface elements.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexMasked",
      "value": "100",
      "title": "Z-Index: Masked",
      "description": "Default z-index for masked interface elements.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexModal",
      "value": "900",
      "title": "Z-Index: Modal",
      "description": "Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexOverlay",
      "value": "700",
      "title": "Z-Index: Overlay",
      "description": "Default z-index for modal and popup overlays.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexPopup",
      "value": "950",
      "title": "Z-Index: Popup",
      "description": "Default z-index for popups that stacks on top of all other elements.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexSpinner",
      "value": "800",
      "title": "Z-Index: Spinner",
      "description": "Default z-index for spinners, stacking on top of overlay.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexSticky",
      "value": "300",
      "title": "Z-Index: Sticky",
      "description": "Default z-index for sticky interface elements.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    },
    {
      "name": "zIndexToast",
      "value": "500",
      "title": "Z-Index: Toast",
      "description": "Default z-index for toast messages.",
      "status": "ready",
      "type": "number",
      "category": "z-index"
    }
  ]
}