{
  "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": "colorBackgroundAccentQuaternary",
      "value": "rgb(0, 119, 179)",
      "title": "Quaternary Accent Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundAccentQuaternaryTurva",
      "value": "rgb(230, 23, 64)",
      "title": "Quaternary Accent Background 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(217, 236, 245)",
      "title": "Tertiary Accent Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundAccentTertiaryTurva",
      "value": "rgb(251, 225, 209)",
      "title": "Tertiary Accent Background for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundDisabledPrimary",
      "value": "rgb(245, 248, 250)",
      "title": "Primary Disabled Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundDisabledPrimaryTurva",
      "value": "rgb(245, 246, 247)",
      "title": "Primary Disabled Background for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundDisabledSecondary",
      "value": "rgb(228, 236, 239)",
      "title": "Secondary Disabled Background",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBackgroundDisabledSecondaryTurva",
      "value": "rgb(228, 233, 237)",
      "title": "Secondary Disabled 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": "colorBorderAccentPrimary",
      "value": "rgb(0, 119, 179)",
      "title": "Primary Accent Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderAccentPrimaryTurva",
      "value": "rgb(230, 23, 64)",
      "title": "Primary Accent Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderAccentQuaternary",
      "value": "rgb(217, 236, 245)",
      "title": "Quaternary Accent Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderAccentQuaternaryTurva",
      "value": "rgb(251, 225, 209)",
      "title": "Quaternary Accent Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderAccentSecondary",
      "value": "rgb(131, 188, 217)",
      "title": "Secondary Accent Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderAccentSecondaryTurva",
      "value": "rgb(243, 119, 133)",
      "title": "Secondary Accent Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderAccentTertiary",
      "value": "rgb(198, 225, 238)",
      "title": "Tertiary Accent Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderAccentTertiaryTurva",
      "value": "rgb(241, 202, 178)",
      "title": "Tertiary Accent Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderDisabledPrimary",
      "value": "rgb(212, 223, 229)",
      "title": "Primary Disabled Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderDisabledPrimaryTurva",
      "value": "rgb(212, 221, 226)",
      "title": "Primary Disabled Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderDisabledSecondary",
      "value": "rgb(181, 198, 208)",
      "title": "Secondary Disabled Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderDisabledSecondaryTurva",
      "value": "rgb(178, 194, 205)",
      "title": "Secondary Disabled Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderInversePrimary",
      "value": "rgb(127, 150, 165)",
      "title": "Primary Inverse Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderInversePrimaryTurva",
      "value": "rgb(120, 145, 164)",
      "title": "Primary Inverse Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderInverseSecondary",
      "value": "rgb(81, 105, 123)",
      "title": "Secondary Inverse Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderInverseSecondaryTurva",
      "value": "rgb(72, 100, 122)",
      "title": "Secondary Inverse Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderInverseTertiary",
      "value": "rgb(62, 84, 102)",
      "title": "Tertiary Inverse Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderInverseTertiaryTurva",
      "value": "rgb(53, 79, 101)",
      "title": "Tertiary Inverse Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderPrimary",
      "value": "rgb(127, 150, 165)",
      "title": "Primary Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderPrimaryTurva",
      "value": "rgb(120, 145, 164)",
      "title": "Primary Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderSecondary",
      "value": "rgb(181, 198, 208)",
      "title": "Secondary Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderSecondaryTurva",
      "value": "rgb(178, 194, 205)",
      "title": "Secondary Border for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderTertiary",
      "value": "rgb(212, 223, 229)",
      "title": "Tertiary Border",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorBorderTertiaryTurva",
      "value": "rgb(212, 221, 226)",
      "title": "Tertiary Border 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": "colorDomainFamily",
      "value": "rgb(11, 114, 136)",
      "title": "Domain Family",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainFamilyTurva",
      "value": "rgb(199, 12, 112)",
      "title": "Domain Family for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainFinance",
      "value": "rgb(122, 1, 196)",
      "title": "Domain Finance",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainFinanceTurva",
      "value": "rgb(122, 1, 196)",
      "title": "Domain Finance for Turva theme",
      "description": "No Turva-specific category color exists; falls back to the LahiTapiola category color.",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainHome",
      "value": "rgb(211, 36, 131)",
      "title": "Domain Home",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainHomeTurva",
      "value": "rgb(161, 10, 78)",
      "title": "Domain Home for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainPet",
      "value": "rgb(168, 1, 78)",
      "title": "Domain Pet",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainPetTurva",
      "value": "rgb(168, 1, 78)",
      "title": "Domain Pet for Turva theme",
      "description": "No Turva-specific category color exists; falls back to the LahiTapiola category color.",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainTravel",
      "value": "rgb(213, 66, 3)",
      "title": "Domain Travel",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainTravelTurva",
      "value": "rgb(9, 129, 148)",
      "title": "Domain Travel for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainVehicle",
      "value": "rgb(54, 74, 129)",
      "title": "Domain Vehicle",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorDomainVehicleTurva",
      "value": "rgb(23, 28, 58)",
      "title": "Domain Vehicle for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundAccentPrimary",
      "value": "rgb(0, 119, 179)",
      "title": "Primary Accent Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundAccentPrimaryTurva",
      "value": "rgb(230, 23, 64)",
      "title": "Primary Accent Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundAccentSecondary",
      "value": "rgb(0, 97, 155)",
      "title": "Secondary Accent Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundAccentSecondaryTurva",
      "value": "rgb(185, 3, 41)",
      "title": "Secondary Accent Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundAccentTertiary",
      "value": "rgb(0, 75, 129)",
      "title": "Tertiary Accent Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundAccentTertiaryTurva",
      "value": "rgb(140, 0, 30)",
      "title": "Tertiary Accent Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundDisabledPrimary",
      "value": "rgb(127, 150, 165)",
      "title": "Primary Disabled Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundDisabledPrimaryTurva",
      "value": "rgb(120, 145, 164)",
      "title": "Primary Disabled Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundDisabledSecondary",
      "value": "rgb(98, 121, 138)",
      "title": "Secondary Disabled Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundDisabledSecondaryTurva",
      "value": "rgb(95, 122, 143)",
      "title": "Secondary Disabled Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseAccentPrimary",
      "value": "rgb(131, 188, 217)",
      "title": "Primary Inverse Accent Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseAccentPrimaryTurva",
      "value": "rgb(243, 119, 133)",
      "title": "Primary Inverse Accent Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseAccentSecondary",
      "value": "rgb(172, 210, 229)",
      "title": "Secondary Inverse Accent Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseAccentSecondaryTurva",
      "value": "rgb(249, 164, 172)",
      "title": "Secondary Inverse Accent Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseAccentTertiary",
      "value": "rgb(198, 225, 238)",
      "title": "Tertiary Inverse Accent Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseAccentTertiaryTurva",
      "value": "rgb(255, 201, 204)",
      "title": "Tertiary Inverse Accent Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInversePrimary",
      "value": "rgb(255, 255, 255)",
      "title": "Primary Inverse Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInversePrimaryTurva",
      "value": "rgb(255, 255, 255)",
      "title": "Primary Inverse Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseSecondary",
      "value": "rgb(181, 198, 208)",
      "title": "Secondary Inverse Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseSecondaryTurva",
      "value": "rgb(178, 194, 205)",
      "title": "Secondary Inverse Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseTertiary",
      "value": "rgb(127, 150, 165)",
      "title": "Tertiary Inverse Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundInverseTertiaryTurva",
      "value": "rgb(120, 145, 164)",
      "title": "Tertiary Inverse Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundPrimary",
      "value": "rgb(8, 42, 77)",
      "title": "Primary Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundPrimaryTurva",
      "value": "rgb(23, 42, 59)",
      "title": "Primary Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundSecondary",
      "value": "rgb(62, 84, 102)",
      "title": "Secondary Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundSecondaryTurva",
      "value": "rgb(53, 79, 101)",
      "title": "Secondary Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundTertiary",
      "value": "rgb(98, 121, 138)",
      "title": "Tertiary Foreground",
      "description": "",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorForegroundTertiaryTurva",
      "value": "rgb(95, 122, 143)",
      "title": "Tertiary Foreground for Turva theme",
      "description": "",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "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(120, 145, 164)",
      "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(95, 122, 143)",
      "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(212, 221, 226)",
      "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, 246, 247)",
      "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(178, 194, 205)",
      "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": "colorInteractiveAlternative",
      "value": "rgb(0, 119, 179)",
      "title": "Alternative interactive color",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorInteractiveAlternativeLight",
      "value": "rgb(240, 247, 250)",
      "title": "Alternative light interactive color",
      "theme": "lahitapiola",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorInteractiveAlternativeLightTurva",
      "value": "rgb(245, 246, 247)",
      "title": "Alternative light interactive color for Turva theme",
      "theme": "turva",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorInteractiveAlternativeTurva",
      "value": "rgb(23, 42, 59)",
      "title": "Alternative interactive color for Turva theme",
      "theme": "turva",
      "status": "ready",
      "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": "colorPartnerBrandSGroup",
      "value": "rgb(0, 170, 70)",
      "title": "S-Group brand green",
      "description": "Use as icon color for 'messaging-s-bonus', or when using white icon, as background",
      "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(140, 0, 30)",
      "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(185, 3, 41)",
      "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(241, 202, 178)",
      "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(251, 235, 225)",
      "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(253, 247, 242)",
      "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(230, 23, 64)",
      "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, 42, 59)",
      "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": "colorStatusBackgroundDangerPrimary",
      "value": "rgb(255, 240, 243)",
      "title": "Status Danger Background Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundDangerQuaternary",
      "value": "rgb(185, 16, 74)",
      "title": "Status Danger Background Quaternary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundDangerSecondary",
      "value": "rgb(255, 211, 219)",
      "title": "Status Danger Background Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundDangerTertiary",
      "value": "rgb(214, 28, 82)",
      "title": "Status Danger Background Tertiary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundInfoPrimary",
      "value": "rgb(240, 247, 250)",
      "title": "Status Info Background Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundInfoQuaternary",
      "value": "rgb(0, 97, 155)",
      "title": "Status Info Background Quaternary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundInfoSecondary",
      "value": "rgb(217, 236, 245)",
      "title": "Status Info Background Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundInfoTertiary",
      "value": "rgb(0, 119, 179)",
      "title": "Status Info Background Tertiary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundSuccessPrimary",
      "value": "rgb(231, 248, 239)",
      "title": "Status Success Background Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundSuccessQuaternary",
      "value": "rgb(29, 106, 88)",
      "title": "Status Success Background Quaternary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundSuccessSecondary",
      "value": "rgb(191, 239, 218)",
      "title": "Status Success Background Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundSuccessTertiary",
      "value": "rgb(76, 164, 138)",
      "title": "Status Success Background Tertiary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundWarningPrimary",
      "value": "rgb(255, 247, 221)",
      "title": "Status Warning Background Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundWarningQuaternary",
      "value": "rgb(247, 178, 40)",
      "title": "Status Warning Background Quaternary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundWarningSecondary",
      "value": "rgb(255, 232, 160)",
      "title": "Status Warning Background Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBackgroundWarningTertiary",
      "value": "rgb(255, 199, 79)",
      "title": "Status Warning Background Tertiary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderDangerPrimary",
      "value": "rgb(255, 173, 190)",
      "title": "Status Danger Border Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderDangerSecondary",
      "value": "rgb(214, 28, 82)",
      "title": "Status Danger Border Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderInfoPrimary",
      "value": "rgb(172, 210, 229)",
      "title": "Status Info Border Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderInfoSecondary",
      "value": "rgb(0, 119, 179)",
      "title": "Status Info Border Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderSuccessPrimary",
      "value": "rgb(163, 229, 202)",
      "title": "Status Success Border Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderSuccessSecondary",
      "value": "rgb(76, 164, 138)",
      "title": "Status Success Border Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderWarningPrimary",
      "value": "rgb(255, 217, 120)",
      "title": "Status Warning Border Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusBorderWarningSecondary",
      "value": "rgb(196, 138, 23)",
      "title": "Status Warning Border Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundDangerPrimary",
      "value": "rgb(153, 9, 66)",
      "title": "Status Danger Foreground Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundDangerSecondary",
      "value": "rgb(120, 4, 56)",
      "title": "Status Danger Foreground Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundInfoPrimary",
      "value": "rgb(0, 75, 129)",
      "title": "Status Info Foreground Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundInfoSecondary",
      "value": "rgb(3, 56, 102)",
      "title": "Status Info Foreground Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundInverseDanger",
      "value": "rgb(255, 240, 243)",
      "title": "Status Danger Foreground Inverse",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundInverseInfo",
      "value": "rgb(240, 247, 250)",
      "title": "Status Info Foreground Inverse",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundInverseSuccess",
      "value": "rgb(244, 250, 247)",
      "title": "Status Success Foreground Inverse",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundInverseWarning",
      "value": "rgb(38, 26, 4)",
      "title": "Status Warning Foreground Inverse",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundSuccessPrimary",
      "value": "rgb(29, 106, 88)",
      "title": "Status Success Foreground Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundSuccessSecondary",
      "value": "rgb(13, 71, 59)",
      "title": "Status Success Foreground Secondary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundWarningPrimary",
      "value": "rgb(126, 87, 16)",
      "title": "Status Warning Foreground Primary",
      "status": "ready",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorStatusForegroundWarningSecondary",
      "value": "rgb(81, 55, 9)",
      "title": "Status Warning Foreground Secondary",
      "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": "colorTurvaGray00",
      "value": "rgb(245, 246, 247)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray100",
      "value": "rgb(212, 221, 226)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray1000",
      "value": "rgb(6, 23, 38)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray200",
      "value": "rgb(178, 194, 205)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray300",
      "value": "rgb(148, 169, 185)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray400",
      "value": "rgb(120, 145, 164)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray50",
      "value": "rgb(228, 233, 237)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray500",
      "value": "rgb(95, 122, 143)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray600",
      "value": "rgb(72, 100, 122)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray700",
      "value": "rgb(53, 79, 101)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray800",
      "value": "rgb(37, 60, 80)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaGray900",
      "value": "rgb(23, 42, 59)",
      "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, 242, 242)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed100",
      "value": "rgb(255, 229, 230)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed1000",
      "value": "rgb(51, 0, 10)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed200",
      "value": "rgb(255, 201, 204)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed300",
      "value": "rgb(249, 164, 172)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed400",
      "value": "rgb(243, 119, 133)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed50",
      "value": "rgb(255, 236, 236)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed500",
      "value": "rgb(236, 69, 96)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed600",
      "value": "rgb(230, 23, 64)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed700",
      "value": "rgb(185, 3, 41)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed800",
      "value": "rgb(140, 0, 30)",
      "theme": "turva",
      "status": "internal",
      "type": "color",
      "category": "color"
    },
    {
      "name": "colorTurvaRed900",
      "value": "rgb(96, 0, 20)",
      "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"
    }
  ]
}