{ "aliases": {}, "props": { "color_lt_blue_00": { "name": "color_lt_blue_00", "value": "rgb(240, 247, 250)", "theme": "lahitapiola", "status": "internal", "originalValue": "#f0f7fa", "type": "color", "category": "color" }, "color_lt_blue_50": { "name": "color_lt_blue_50", "value": "rgb(228, 241, 247)", "theme": "lahitapiola", "status": "internal", "originalValue": "#e4f1f7", "type": "color", "category": "color" }, "color_lt_blue_100": { "name": "color_lt_blue_100", "value": "rgb(217, 236, 245)", "theme": "lahitapiola", "status": "internal", "originalValue": "#d9ecf5", "type": "color", "category": "color" }, "color_lt_blue_200": { "name": "color_lt_blue_200", "value": "rgb(198, 225, 238)", "theme": "lahitapiola", "status": "internal", "originalValue": "#c6e1ee", "type": "color", "category": "color" }, "color_lt_blue_300": { "name": "color_lt_blue_300", "value": "rgb(172, 210, 229)", "theme": "lahitapiola", "status": "internal", "originalValue": "#acd2e5", "type": "color", "category": "color" }, "color_lt_blue_400": { "name": "color_lt_blue_400", "value": "rgb(131, 188, 217)", "theme": "lahitapiola", "status": "internal", "originalValue": "#83bcd9", "type": "color", "category": "color" }, "color_lt_blue_500": { "name": "color_lt_blue_500", "value": "rgb(50, 153, 204)", "theme": "lahitapiola", "status": "internal", "originalValue": "#3299cc", "type": "color", "category": "color" }, "color_lt_blue_600": { "name": "color_lt_blue_600", "value": "rgb(0, 119, 179)", "theme": "lahitapiola", "status": "internal", "originalValue": "#0077b3", "type": "color", "category": "color" }, "color_lt_blue_700": { "name": "color_lt_blue_700", "value": "rgb(0, 97, 155)", "theme": "lahitapiola", "status": "internal", "originalValue": "#00619b", "type": "color", "category": "color" }, "color_lt_blue_800": { "name": "color_lt_blue_800", "value": "rgb(0, 75, 129)", "theme": "lahitapiola", "status": "internal", "originalValue": "#004b81", "type": "color", "category": "color" }, "color_lt_blue_900": { "name": "color_lt_blue_900", "value": "rgb(3, 56, 102)", "theme": "lahitapiola", "status": "internal", "originalValue": "#033866", "type": "color", "category": "color" }, "color_lt_blue_1000": { "name": "color_lt_blue_1000", "value": "rgb(8, 42, 77)", "theme": "lahitapiola", "status": "internal", "originalValue": "#082a4d", "type": "color", "category": "color" }, "color_lt_gray_00": { "name": "color_lt_gray_00", "value": "rgb(245, 248, 250)", "theme": "lahitapiola", "status": "internal", "originalValue": "#f5f8fa", "type": "color", "category": "color" }, "color_lt_gray_50": { "name": "color_lt_gray_50", "value": "rgb(228, 236, 239)", "theme": "lahitapiola", "status": "internal", "originalValue": "#e4ecef", "type": "color", "category": "color" }, "color_lt_gray_100": { "name": "color_lt_gray_100", "value": "rgb(212, 223, 229)", "theme": "lahitapiola", "status": "internal", "originalValue": "#d4dfe5", "type": "color", "category": "color" }, "color_lt_gray_200": { "name": "color_lt_gray_200", "value": "rgb(181, 198, 208)", "theme": "lahitapiola", "status": "internal", "originalValue": "#b5c6D0", "type": "color", "category": "color" }, "color_lt_gray_300": { "name": "color_lt_gray_300", "value": "rgb(153, 174, 186)", "theme": "lahitapiola", "status": "internal", "originalValue": "#99aeba", "type": "color", "category": "color" }, "color_lt_gray_400": { "name": "color_lt_gray_400", "value": "rgb(127, 150, 165)", "theme": "lahitapiola", "status": "internal", "originalValue": "#7f96a5", "type": "color", "category": "color" }, "color_lt_gray_500": { "name": "color_lt_gray_500", "value": "rgb(98, 121, 138)", "theme": "lahitapiola", "status": "internal", "originalValue": "#62798a", "type": "color", "category": "color" }, "color_lt_gray_600": { "name": "color_lt_gray_600", "value": "rgb(81, 105, 123)", "theme": "lahitapiola", "status": "internal", "originalValue": "#51697b", "type": "color", "category": "color" }, "color_lt_gray_700": { "name": "color_lt_gray_700", "value": "rgb(62, 84, 102)", "theme": "lahitapiola", "status": "internal", "originalValue": "#3e5466", "type": "color", "category": "color" }, "color_lt_gray_800": { "name": "color_lt_gray_800", "value": "rgb(45, 64, 81)", "theme": "lahitapiola", "status": "internal", "originalValue": "#2d4051", "type": "color", "category": "color" }, "color_lt_gray_900": { "name": "color_lt_gray_900", "value": "rgb(30, 45, 59)", "theme": "lahitapiola", "status": "internal", "originalValue": "#1e2d3b", "type": "color", "category": "color" }, "color_lt_gray_1000": { "name": "color_lt_gray_1000", "value": "rgb(17, 28, 38)", "theme": "lahitapiola", "status": "internal", "originalValue": "#111c26", "type": "color", "category": "color" }, "color_success_00": { "name": "color_success_00", "value": "rgb(244, 250, 247)", "status": "internal", "originalValue": "#f4faf7", "type": "color", "category": "color" }, "color_success_50": { "name": "color_success_50", "value": "rgb(231, 248, 239)", "status": "internal", "originalValue": "#e7f8ef", "type": "color", "category": "color" }, "color_success_100": { "name": "color_success_100", "value": "rgb(218, 246, 233)", "status": "internal", "originalValue": "#daf6e9", "type": "color", "category": "color" }, "color_success_200": { "name": "color_success_200", "value": "rgb(191, 239, 218)", "status": "internal", "originalValue": "#bfefda", "type": "color", "category": "color" }, "color_success_300": { "name": "color_success_300", "value": "rgb(163, 229, 202)", "status": "internal", "originalValue": "#a3e5ca", "type": "color", "category": "color" }, "color_success_400": { "name": "color_success_400", "value": "rgb(134, 215, 185)", "status": "internal", "originalValue": "#86d7b9", "type": "color", "category": "color" }, "color_success_500": { "name": "color_success_500", "value": "rgb(105, 196, 166)", "status": "internal", "originalValue": "#69c4a6", "type": "color", "category": "color" }, "color_success_600": { "name": "color_success_600", "value": "rgb(76, 164, 138)", "status": "internal", "originalValue": "#4ca48a", "type": "color", "category": "color" }, "color_success_700": { "name": "color_success_700", "value": "rgb(48, 131, 105)", "status": "internal", "originalValue": "#308369", "type": "color", "category": "color" }, "color_success_800": { "name": "color_success_800", "value": "rgb(29, 106, 88)", "status": "internal", "originalValue": "#1d6a58", "type": "color", "category": "color" }, "color_success_900": { "name": "color_success_900", "value": "rgb(13, 71, 59)", "status": "internal", "originalValue": "#0d473b", "type": "color", "category": "color" }, "color_success_1000": { "name": "color_success_1000", "value": "rgb(4, 38, 33)", "status": "internal", "originalValue": "#042621", "type": "color", "category": "color" }, "color_warning_00": { "name": "color_warning_00", "value": "rgb(255, 251, 242)", "status": "internal", "originalValue": "#fffbf2", "type": "color", "category": "color" }, "color_warning_50": { "name": "color_warning_50", "value": "rgb(255, 247, 221)", "status": "internal", "originalValue": "#fff7dd", "type": "color", "category": "color" }, "color_warning_100": { "name": "color_warning_100", "value": "rgb(255, 244, 198)", "status": "internal", "originalValue": "#fff4c6", "type": "color", "category": "color" }, "color_warning_200": { "name": "color_warning_200", "value": "rgb(255, 232, 160)", "status": "internal", "originalValue": "#ffe8a0", "type": "color", "category": "color" }, "color_warning_300": { "name": "color_warning_300", "value": "rgb(255, 217, 120)", "status": "internal", "originalValue": "#ffd978", "type": "color", "category": "color" }, "color_warning_400": { "name": "color_warning_400", "value": "rgb(255, 199, 79)", "status": "internal", "originalValue": "#ffc74f", "type": "color", "category": "color" }, "color_warning_500": { "name": "color_warning_500", "value": "rgb(247, 178, 40)", "status": "internal", "originalValue": "#f7b228", "type": "color", "category": "color" }, "color_warning_600": { "name": "color_warning_600", "value": "rgb(196, 138, 23)", "status": "internal", "originalValue": "#c48a17", "type": "color", "category": "color" }, "color_warning_700": { "name": "color_warning_700", "value": "rgb(156, 110, 22)", "status": "internal", "originalValue": "#9c6e16", "type": "color", "category": "color" }, "color_warning_800": { "name": "color_warning_800", "value": "rgb(126, 87, 16)", "status": "internal", "originalValue": "#7e5710", "type": "color", "category": "color" }, "color_warning_900": { "name": "color_warning_900", "value": "rgb(81, 55, 9)", "status": "internal", "originalValue": "#513709", "type": "color", "category": "color" }, "color_warning_1000": { "name": "color_warning_1000", "value": "rgb(38, 26, 4)", "status": "internal", "originalValue": "#261a04", "type": "color", "category": "color" }, "color_danger_00": { "name": "color_danger_00", "value": "rgb(255, 240, 243)", "status": "internal", "originalValue": "#fff0f3", "type": "color", "category": "color" }, "color_danger_50": { "name": "color_danger_50", "value": "rgb(255, 225, 231)", "status": "internal", "originalValue": "#ffe1e7", "type": "color", "category": "color" }, "color_danger_100": { "name": "color_danger_100", "value": "rgb(255, 211, 219)", "status": "internal", "originalValue": "#ffd3db", "type": "color", "category": "color" }, "color_danger_200": { "name": "color_danger_200", "value": "rgb(255, 173, 190)", "status": "internal", "originalValue": "#ffadbe", "type": "color", "category": "color" }, "color_danger_300": { "name": "color_danger_300", "value": "rgb(252, 136, 162)", "status": "internal", "originalValue": "#fc88a2", "type": "color", "category": "color" }, "color_danger_400": { "name": "color_danger_400", "value": "rgb(243, 98, 134)", "status": "internal", "originalValue": "#f36286", "type": "color", "category": "color" }, "color_danger_500": { "name": "color_danger_500", "value": "rgb(231, 62, 107)", "status": "internal", "originalValue": "#e73e6b", "type": "color", "category": "color" }, "color_danger_600": { "name": "color_danger_600", "value": "rgb(214, 28, 82)", "status": "internal", "originalValue": "#d61c52", "type": "color", "category": "color" }, "color_danger_700": { "name": "color_danger_700", "value": "rgb(185, 16, 74)", "status": "internal", "originalValue": "#b9104a", "type": "color", "category": "color" }, "color_danger_800": { "name": "color_danger_800", "value": "rgb(153, 9, 66)", "status": "internal", "originalValue": "#990942", "type": "color", "category": "color" }, "color_danger_900": { "name": "color_danger_900", "value": "rgb(120, 4, 56)", "status": "internal", "originalValue": "#780438", "type": "color", "category": "color" }, "color_danger_1000": { "name": "color_danger_1000", "value": "rgb(89, 0, 45)", "status": "internal", "originalValue": "#59002d", "type": "color", "category": "color" }, "color_primary_dark": { "name": "color_primary_dark", "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", "originalValue": "#004b81", "type": "color", "category": "color" }, "color_primary_darker": { "name": "color_primary_darker", "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", "originalValue": "#00619b", "type": "color", "category": "color" }, "color_primary": { "name": "color_primary", "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", "originalValue": "#0077b3", "type": "color", "category": "color" }, "color_primary_light": { "name": "color_primary_light", "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, "originalValue": "#c6e1ee", "type": "color", "category": "color" }, "color_primary_lighter": { "name": "color_primary_lighter", "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, "originalValue": "#e4f1f7", "type": "color", "category": "color" }, "color_primary_lightest": { "name": "color_primary_lightest", "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", "originalValue": "#f0f7fa", "type": "color", "category": "color" }, "color_secondary": { "name": "color_secondary", "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", "originalValue": "#082a4d", "type": "color", "category": "color" }, "color_brand_blue": { "name": "color_brand_blue", "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", "originalValue": "#00a1d4", "type": "color", "category": "color" }, "color_danger": { "name": "color_danger", "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, "originalValue": "#d61c52", "type": "color", "category": "color" }, "color_warning": { "name": "color_warning", "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, "originalValue": "#f7b228", "type": "color", "category": "color" }, "color_success": { "name": "color_success", "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, "originalValue": "#308369", "type": "color", "category": "color" }, "color_gray_darker": { "name": "color_gray_darker", "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, "originalValue": "#62798a", "type": "color", "category": "color" }, "color_gray_dark": { "name": "color_gray_dark", "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, "originalValue": "#7f96a5", "type": "color", "category": "color" }, "color_gray": { "name": "color_gray", "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, "originalValue": "#b5c6D0", "type": "color", "category": "color" }, "color_gray_light": { "name": "color_gray_light", "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, "originalValue": "#d4dfe5", "type": "color", "category": "color" }, "color_gray_lighter": { "name": "color_gray_lighter", "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, "originalValue": "#f5f8fa", "type": "color", "category": "color" }, "color_gray_lightest": { "name": "color_gray_lightest", "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, "originalValue": "#ffffff", "type": "color", "category": "color" }, "color_category_home": { "name": "color_category_home", "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", "originalValue": "#d32483", "type": "color", "category": "color" }, "color_category_travel": { "name": "color_category_travel", "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", "originalValue": "#d54203", "type": "color", "category": "color" }, "color_category_family": { "name": "color_category_family", "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", "originalValue": "#0b7288", "type": "color", "category": "color" }, "color_category_finance": { "name": "color_category_finance", "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", "originalValue": "#7a01c4", "type": "color", "category": "color" }, "color_category_vehicle": { "name": "color_category_vehicle", "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", "originalValue": "#364a81", "type": "color", "category": "color" }, "color_category_pet": { "name": "color_category_pet", "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", "originalValue": "#a8014e", "type": "color", "category": "color" }, "color_turva_red_00": { "name": "color_turva_red_00", "value": "rgb(255, 241, 241)", "theme": "turva", "status": "internal", "originalValue": "#fff1f1", "type": "color", "category": "color" }, "color_turva_red_50": { "name": "color_turva_red_50", "value": "rgb(255, 227, 228)", "theme": "turva", "status": "internal", "originalValue": "#ffe3e4", "type": "color", "category": "color" }, "color_turva_red_100": { "name": "color_turva_red_100", "value": "rgb(255, 213, 215)", "theme": "turva", "status": "internal", "originalValue": "#ffd5d7", "type": "color", "category": "color" }, "color_turva_red_200": { "name": "color_turva_red_200", "value": "rgb(255, 185, 190)", "theme": "turva", "status": "internal", "originalValue": "#ffb9be", "type": "color", "category": "color" }, "color_turva_red_300": { "name": "color_turva_red_300", "value": "rgb(252, 148, 158)", "theme": "turva", "status": "internal", "originalValue": "#fc949e", "type": "color", "category": "color" }, "color_turva_red_400": { "name": "color_turva_red_400", "value": "rgb(240, 102, 119)", "theme": "turva", "status": "internal", "originalValue": "#f06677", "type": "color", "category": "color" }, "color_turva_red_500": { "name": "color_turva_red_500", "value": "rgb(221, 49, 77)", "theme": "turva", "status": "internal", "originalValue": "#dd314d", "type": "color", "category": "color" }, "color_turva_red_600": { "name": "color_turva_red_600", "value": "rgb(198, 12, 48)", "theme": "turva", "status": "internal", "originalValue": "#c60c30", "type": "color", "category": "color" }, "color_turva_red_700": { "name": "color_turva_red_700", "value": "rgb(164, 4, 40)", "theme": "turva", "status": "internal", "originalValue": "#a40428", "type": "color", "category": "color" }, "color_turva_red_800": { "name": "color_turva_red_800", "value": "rgb(126, 2, 35)", "theme": "turva", "status": "internal", "originalValue": "#7e0223", "type": "color", "category": "color" }, "color_turva_red_900": { "name": "color_turva_red_900", "value": "rgb(87, 4, 29)", "theme": "turva", "status": "internal", "originalValue": "#57041d", "type": "color", "category": "color" }, "color_turva_red_1000": { "name": "color_turva_red_1000", "value": "rgb(51, 5, 20)", "theme": "turva", "status": "internal", "originalValue": "#330514", "type": "color", "category": "color" }, "color_turva_gray_00": { "name": "color_turva_gray_00", "value": "rgb(245, 247, 250)", "theme": "turva", "status": "internal", "originalValue": "#f5f7fa", "type": "color", "category": "color" }, "color_turva_gray_50": { "name": "color_turva_gray_50", "value": "rgb(234, 235, 239)", "theme": "turva", "status": "internal", "originalValue": "#eaebef", "type": "color", "category": "color" }, "color_turva_gray_100": { "name": "color_turva_gray_100", "value": "rgb(222, 224, 228)", "theme": "turva", "status": "internal", "originalValue": "#dee0e4", "type": "color", "category": "color" }, "color_turva_gray_200": { "name": "color_turva_gray_200", "value": "rgb(199, 202, 207)", "theme": "turva", "status": "internal", "originalValue": "#c7cacf", "type": "color", "category": "color" }, "color_turva_gray_300": { "name": "color_turva_gray_300", "value": "rgb(175, 178, 186)", "theme": "turva", "status": "internal", "originalValue": "#afb2ba", "type": "color", "category": "color" }, "color_turva_gray_400": { "name": "color_turva_gray_400", "value": "rgb(143, 147, 158)", "theme": "turva", "status": "internal", "originalValue": "#8f939e", "type": "color", "category": "color" }, "color_turva_gray_500": { "name": "color_turva_gray_500", "value": "rgb(113, 118, 132)", "theme": "turva", "status": "internal", "originalValue": "#717684", "type": "color", "category": "color" }, "color_turva_gray_600": { "name": "color_turva_gray_600", "value": "rgb(98, 104, 122)", "theme": "turva", "status": "internal", "originalValue": "#62687a", "type": "color", "category": "color" }, "color_turva_gray_700": { "name": "color_turva_gray_700", "value": "rgb(71, 78, 101)", "theme": "turva", "status": "internal", "originalValue": "#474e65", "type": "color", "category": "color" }, "color_turva_gray_800": { "name": "color_turva_gray_800", "value": "rgb(45, 52, 79)", "theme": "turva", "status": "internal", "originalValue": "#2d344f", "type": "color", "category": "color" }, "color_turva_gray_900": { "name": "color_turva_gray_900", "value": "rgb(23, 28, 58)", "theme": "turva", "status": "internal", "originalValue": "#171c3a", "type": "color", "category": "color" }, "color_turva_gray_1000": { "name": "color_turva_gray_1000", "value": "rgb(8, 13, 38)", "theme": "turva", "status": "internal", "originalValue": "#080d26", "type": "color", "category": "color" }, "color_turva2_red_00": { "name": "color_turva2_red_00", "value": "rgb(255, 242, 242)", "theme": "turva", "status": "internal", "originalValue": "#fff2f2", "type": "color", "category": "color" }, "color_turva2_red_50": { "name": "color_turva2_red_50", "value": "rgb(255, 236, 236)", "theme": "turva", "status": "internal", "originalValue": "#ffecec", "type": "color", "category": "color" }, "color_turva2_red_100": { "name": "color_turva2_red_100", "value": "rgb(255, 229, 230)", "theme": "turva", "status": "internal", "originalValue": "#ffe5e6", "type": "color", "category": "color" }, "color_turva2_red_200": { "name": "color_turva2_red_200", "value": "rgb(255, 201, 204)", "theme": "turva", "status": "internal", "originalValue": "#ffc9cc", "type": "color", "category": "color" }, "color_turva2_red_300": { "name": "color_turva2_red_300", "value": "rgb(249, 164, 172)", "theme": "turva", "status": "internal", "originalValue": "#f9a4ac", "type": "color", "category": "color" }, "color_turva2_red_400": { "name": "color_turva2_red_400", "value": "rgb(243, 119, 133)", "theme": "turva", "status": "internal", "originalValue": "#f37785", "type": "color", "category": "color" }, "color_turva2_red_500": { "name": "color_turva2_red_500", "value": "rgb(236, 69, 96)", "theme": "turva", "status": "internal", "originalValue": "#ec4560", "type": "color", "category": "color" }, "color_turva2_red_600": { "name": "color_turva2_red_600", "value": "rgb(230, 23, 64)", "theme": "turva", "status": "internal", "originalValue": "#e61740", "type": "color", "category": "color" }, "color_turva2_red_700": { "name": "color_turva2_red_700", "value": "rgb(185, 3, 41)", "theme": "turva", "status": "internal", "originalValue": "#b90329", "type": "color", "category": "color" }, "color_turva2_red_800": { "name": "color_turva2_red_800", "value": "rgb(140, 0, 30)", "theme": "turva", "status": "internal", "originalValue": "#8c001e", "type": "color", "category": "color" }, "color_turva2_red_900": { "name": "color_turva2_red_900", "value": "rgb(96, 0, 20)", "theme": "turva", "status": "internal", "originalValue": "#600014", "type": "color", "category": "color" }, "color_turva2_red_1000": { "name": "color_turva2_red_1000", "value": "rgb(51, 0, 10)", "theme": "turva", "status": "internal", "originalValue": "#33000a", "type": "color", "category": "color" }, "color_turva2_gray_00": { "name": "color_turva2_gray_00", "value": "rgb(245, 246, 247)", "theme": "turva", "status": "internal", "originalValue": "#f5f6f7", "type": "color", "category": "color" }, "color_turva2_gray_50": { "name": "color_turva2_gray_50", "value": "rgb(228, 233, 237)", "theme": "turva", "status": "internal", "originalValue": "#e4e9ed", "type": "color", "category": "color" }, "color_turva2_gray_100": { "name": "color_turva2_gray_100", "value": "rgb(212, 221, 226)", "theme": "turva", "status": "internal", "originalValue": "#d4dde2", "type": "color", "category": "color" }, "color_turva2_gray_200": { "name": "color_turva2_gray_200", "value": "rgb(178, 194, 205)", "theme": "turva", "status": "internal", "originalValue": "#b2c2cd", "type": "color", "category": "color" }, "color_turva2_gray_300": { "name": "color_turva2_gray_300", "value": "rgb(148, 169, 185)", "theme": "turva", "status": "internal", "originalValue": "#94a9b9", "type": "color", "category": "color" }, "color_turva2_gray_400": { "name": "color_turva2_gray_400", "value": "rgb(120, 145, 164)", "theme": "turva", "status": "internal", "originalValue": "#7891a4", "type": "color", "category": "color" }, "color_turva2_gray_500": { "name": "color_turva2_gray_500", "value": "rgb(95, 122, 143)", "theme": "turva", "status": "internal", "originalValue": "#5f7a8f", "type": "color", "category": "color" }, "color_turva2_gray_600": { "name": "color_turva2_gray_600", "value": "rgb(72, 100, 122)", "theme": "turva", "status": "internal", "originalValue": "#48647a", "type": "color", "category": "color" }, "color_turva2_gray_700": { "name": "color_turva2_gray_700", "value": "rgb(53, 79, 101)", "theme": "turva", "status": "internal", "originalValue": "#354f65", "type": "color", "category": "color" }, "color_turva2_gray_800": { "name": "color_turva2_gray_800", "value": "rgb(37, 60, 80)", "theme": "turva", "status": "internal", "originalValue": "#253c50", "type": "color", "category": "color" }, "color_turva2_gray_900": { "name": "color_turva2_gray_900", "value": "rgb(23, 42, 59)", "theme": "turva", "status": "internal", "originalValue": "#172a3b", "type": "color", "category": "color" }, "color_turva2_gray_1000": { "name": "color_turva2_gray_1000", "value": "rgb(6, 23, 38)", "theme": "turva", "status": "internal", "originalValue": "#061726", "type": "color", "category": "color" }, "color_turva_nude_00": { "name": "color_turva_nude_00", "value": "rgb(253, 247, 242)", "theme": "turva", "status": "internal", "originalValue": "#fdf7f2", "type": "color", "category": "color" }, "color_turva_nude_50": { "name": "color_turva_nude_50", "value": "rgb(251, 235, 225)", "theme": "turva", "status": "internal", "originalValue": "#fbebe1", "type": "color", "category": "color" }, "color_turva_nude_100": { "name": "color_turva_nude_100", "value": "rgb(251, 225, 209)", "theme": "turva", "status": "internal", "originalValue": "#fbe1d1", "type": "color", "category": "color" }, "color_turva_nude_200": { "name": "color_turva_nude_200", "value": "rgb(241, 202, 178)", "theme": "turva", "status": "internal", "originalValue": "#f1cab2", "type": "color", "category": "color" }, "color_turva_nude_300": { "name": "color_turva_nude_300", "value": "rgb(216, 174, 150)", "theme": "turva", "status": "internal", "originalValue": "#d8ae96", "type": "color", "category": "color" }, "color_turva_nude_400": { "name": "color_turva_nude_400", "value": "rgb(190, 147, 124)", "theme": "turva", "status": "internal", "originalValue": "#be937c", "type": "color", "category": "color" }, "color_turva_nude_500": { "name": "color_turva_nude_500", "value": "rgb(165, 122, 101)", "theme": "turva", "status": "internal", "originalValue": "#a57a65", "type": "color", "category": "color" }, "color_turva_nude_600": { "name": "color_turva_nude_600", "value": "rgb(140, 98, 79)", "theme": "turva", "status": "internal", "originalValue": "#8c624f", "type": "color", "category": "color" }, "color_turva_nude_700": { "name": "color_turva_nude_700", "value": "rgb(114, 76, 60)", "theme": "turva", "status": "internal", "originalValue": "#724c3c", "type": "color", "category": "color" }, "color_turva_nude_800": { "name": "color_turva_nude_800", "value": "rgb(89, 56, 43)", "theme": "turva", "status": "internal", "originalValue": "#59382b", "type": "color", "category": "color" }, "color_turva_nude_900": { "name": "color_turva_nude_900", "value": "rgb(64, 38, 28)", "theme": "turva", "status": "internal", "originalValue": "#40261c", "type": "color", "category": "color" }, "color_turva_nude_1000": { "name": "color_turva_nude_1000", "value": "rgb(38, 21, 15)", "theme": "turva", "status": "internal", "originalValue": "#26150f", "type": "color", "category": "color" }, "color_primary_dark_turva": { "name": "color_primary_dark_turva", "value": "rgb(126, 2, 35)", "title": "Primary Red Dark", "description": "Dark version of primary red that is accessible with white. Most commonly used to indicate hover and active states of an item with primary red background.", "theme": "turva", "order": 1, "status": "ready", "originalValue": "#7e0223", "type": "color", "category": "color" }, "color_primary_darker_turva": { "name": "color_primary_darker_turva", "value": "rgb(164, 4, 40)", "title": "Primary Red Darker", "description": "Primary digital red that is accessible with white. Used as link text color.", "theme": "turva", "order": 2, "status": "ready", "originalValue": "#a40428", "type": "color", "category": "color" }, "color_primary_turva": { "name": "color_primary_turva", "value": "rgb(198, 12, 48)", "title": "Primary Red", "description": "Primary digital red that is accessible with white. Used as primary button background color, selected state background color, and as link text color.", "theme": "turva", "order": 3, "status": "ready", "originalValue": "#c60c30", "type": "color", "category": "color" }, "color_primary_light_turva": { "name": "color_primary_light_turva", "value": "rgb(255, 185, 190)", "title": "Primary Red Light", "description": "Light red that is 20% tint of the primary red. Accessible when secondary black is used as the text color.", "theme": "turva", "status": "deprecated", "order": 4, "originalValue": "#ffb9be", "type": "color", "category": "color" }, "color_primary_lighter_turva": { "name": "color_primary_lighter_turva", "value": "rgb(255, 227, 228)", "title": "Primary Red Lighter", "description": "Light red that is 10% tint of the primary red. Accessible when secondary black is used as the text color.", "theme": "turva", "status": "deprecated", "order": 5, "originalValue": "#ffe3e4", "type": "color", "category": "color" }, "color_primary_lightest_turva": { "name": "color_primary_lightest_turva", "value": "rgb(255, 241, 241)", "title": "Primary Red Lightest", "description": "Light red that is 5% tint of the primary red. Accessible when secondary black is used as the text color. Commonly used to indicate a hover state of item with white background.", "theme": "turva", "order": 6, "status": "deprecated", "originalValue": "#fff1f1", "type": "color", "category": "color" }, "color_secondary_turva": { "name": "color_secondary_turva", "value": "rgb(23, 28, 58)", "title": "Secondary Black", "description": "Secondary black that is accessible with light, lighter and lightest primary red. Used as the body text color.", "theme": "turva", "order": 7, "status": "ready", "originalValue": "#171c3a", "type": "color", "category": "color" }, "color_brand_gray_turva": { "name": "color_brand_gray_turva", "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", "originalValue": "#b2b4b3", "type": "color", "category": "color" }, "color_danger_turva": { "name": "color_danger_turva", "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, "originalValue": "#d61c52", "type": "color", "category": "color" }, "color_warning_turva": { "name": "color_warning_turva", "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, "originalValue": "#f7b228", "type": "color", "category": "color" }, "color_success_turva": { "name": "color_success_turva", "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, "originalValue": "#308369", "type": "color", "category": "color" }, "color_gray_darker_turva": { "name": "color_gray_darker_turva", "value": "rgb(113, 118, 132)", "title": "Gray Darker", "description": "Dark gray that is accessible with white. Most commonly used as selected tab button background color.", "theme": "turva", "status": "ready", "order": 12, "originalValue": "#717684", "type": "color", "category": "color" }, "color_gray_dark_turva": { "name": "color_gray_dark_turva", "value": "rgb(143, 147, 158)", "title": "Gray Dark", "description": "Dark gray that is accessible with white. Most commonly used to indicate inactive interface state. This color should also be used for borders that need to pass WCAG Level AA non-text contrast requirements.", "theme": "turva", "status": "ready", "order": 13, "originalValue": "#8f939e", "type": "color", "category": "color" }, "color_gray_turva": { "name": "color_gray_turva", "value": "rgb(199, 202, 207)", "title": "Gray", "description": "Gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.", "theme": "turva", "status": "ready", "order": 14, "originalValue": "#c7cacf", "type": "color", "category": "color" }, "color_gray_light_turva": { "name": "color_gray_light_turva", "value": "rgb(222, 224, 228)", "title": "Gray Light", "description": "Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.", "theme": "turva", "status": "ready", "order": 13, "originalValue": "#dee0e4", "type": "color", "category": "color" }, "color_gray_lighter_turva": { "name": "color_gray_lighter_turva", "value": "rgb(245, 247, 250)", "title": "Gray Lighter", "description": "Light gray that is accessible with secondary black. For consistency, we use this common grayscale palette throughout the interface.", "theme": "turva", "status": "ready", "order": 15, "originalValue": "#f5f7fa", "type": "color", "category": "color" }, "color_gray_lightest_turva": { "name": "color_gray_lightest_turva", "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, "originalValue": "#ffffff", "type": "color", "category": "color" }, "color_category_home_turva": { "name": "color_category_home_turva", "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", "originalValue": "#a10a4e", "type": "color", "category": "color" }, "color_category_travel_turva": { "name": "color_category_travel_turva", "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", "originalValue": "#098194", "type": "color", "category": "color" }, "color_category_family_turva": { "name": "color_category_family_turva", "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", "originalValue": "#c70c70", "type": "color", "category": "color" }, "color_category_vehicle_turva": { "name": "color_category_vehicle_turva", "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", "originalValue": "#171c3a", "type": "color", "category": "color" }, "color_category_union_turva": { "name": "color_category_union_turva", "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", "originalValue": "#a9457c", "type": "color", "category": "color" }, "color_background_primary": { "name": "color_background_primary", "value": "rgb(255, 255, 255)", "title": "Primary Background", "description": "", "theme": "lahitapiola", "status": "ready", "originalValue": "#ffffff", "type": "color", "category": "color" }, "color_background_secondary": { "name": "color_background_secondary", "value": "rgb(245, 248, 250)", "title": "Secondary Background", "description": "", "theme": "lahitapiola", "status": "ready", "originalValue": "#f5f8fa", "type": "color", "category": "color" }, "color_background_tertiary": { "name": "color_background_tertiary", "value": "rgb(8, 42, 77)", "title": "Tertiary Background", "description": "", "theme": "lahitapiola", "status": "ready", "originalValue": "#082a4d", "type": "color", "category": "color" }, "color_background_accent_primary": { "name": "color_background_accent_primary", "value": "rgb(240, 247, 250)", "title": "Primary Accent Backgound", "description": "", "theme": "lahitapiola", "status": "ready", "originalValue": "#f0f7fa", "type": "color", "category": "color" }, "color_background_accent_secondary": { "name": "color_background_accent_secondary", "value": "rgb(228, 241, 247)", "title": "Secondary Accent Background", "description": "", "theme": "lahitapiola", "status": "ready", "originalValue": "#e4f1f7", "type": "color", "category": "color" }, "color_background_accent_tertiary": { "name": "color_background_accent_tertiary", "value": "rgb(0, 119, 179)", "title": "Tertiary Accent Background", "description": "", "theme": "lahitapiola", "status": "ready", "originalValue": "#0077b3", "type": "color", "category": "color" }, "color_background_primary_turva": { "name": "color_background_primary_turva", "value": "rgb(255, 255, 255)", "title": "Primary Background for Turva theme", "description": "", "theme": "turva", "status": "ready", "originalValue": "#ffffff", "type": "color", "category": "color" }, "color_background_secondary_turva": { "name": "color_background_secondary_turva", "value": "rgb(245, 246, 247)", "title": "Secondary Background for Turva theme", "description": "", "theme": "turva", "status": "ready", "originalValue": "#f5f6f7", "type": "color", "category": "color" }, "color_background_tertiary_turva": { "name": "color_background_tertiary_turva", "value": "rgb(23, 42, 59)", "title": "Tertiary Background for Turva theme", "description": "", "theme": "turva", "status": "ready", "originalValue": "#172a3b", "type": "color", "category": "color" }, "color_background_accent_primary_turva": { "name": "color_background_accent_primary_turva", "value": "rgb(253, 247, 242)", "title": "Primary Accent Backgound for Turva theme", "description": "", "theme": "turva", "status": "ready", "originalValue": "#fdf7f2", "type": "color", "category": "color" }, "color_background_accent_secondary_turva": { "name": "color_background_accent_secondary_turva", "value": "rgb(251, 235, 225)", "title": "Secondary Accent Background for Turva theme", "description": "", "theme": "turva", "status": "ready", "originalValue": "#fbebe1", "type": "color", "category": "color" }, "color_background_accent_tertiary_turva": { "name": "color_background_accent_tertiary_turva", "value": "rgb(230, 23, 64)", "title": "Tertiary Accent Background for Turva theme", "description": "", "theme": "turva", "status": "ready", "originalValue": "#e61740", "type": "color", "category": "color" }, "color_data_01": { "name": "color_data_01", "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, "originalValue": "#7a01c4", "type": "color", "category": "data-visualization" }, "color_data_02": { "name": "color_data_02", "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, "originalValue": "#009bcc", "type": "color", "category": "data-visualization" }, "color_data_03": { "name": "color_data_03", "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, "originalValue": "#1bab4b", "type": "color", "category": "data-visualization" }, "color_data_04": { "name": "color_data_04", "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, "originalValue": "#ff5622", "type": "color", "category": "data-visualization" }, "color_data_05": { "name": "color_data_05", "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, "originalValue": "#f54c9a", "type": "color", "category": "data-visualization" }, "color_data_06": { "name": "color_data_06", "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, "originalValue": "#c21565", "type": "color", "category": "data-visualization" }, "color_data_07": { "name": "color_data_07", "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, "originalValue": "#c065f7", "type": "color", "category": "data-visualization" }, "color_data_08": { "name": "color_data_08", "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, "originalValue": "#0069bf", "type": "color", "category": "data-visualization" }, "color_data_09": { "name": "color_data_09", "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, "originalValue": "#137835", "type": "color", "category": "data-visualization" }, "color_data_10": { "name": "color_data_10", "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, "originalValue": "#b33c18", "type": "color", "category": "data-visualization" }, "color_data_11": { "name": "color_data_11", "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, "originalValue": "#0da3A6", "type": "color", "category": "data-visualization" }, "color_data_12": { "name": "color_data_12", "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, "originalValue": "#0b7288", "type": "color", "category": "data-visualization" }, "color_data_13": { "name": "color_data_13", "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, "originalValue": "#b38918", "type": "color", "category": "data-visualization" }, "color_data_14": { "name": "color_data_14", "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, "originalValue": "#806211", "type": "color", "category": "data-visualization" }, "color_data_15": { "name": "color_data_15", "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, "originalValue": "#00294d", "type": "color", "category": "data-visualization" }, "font_family_text": { "name": "font_family_text", "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", "subcategory": "family", "meta": { "postscriptName": "LahiTapiola Sans" }, "originalValue": "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "type": "font", "category": "fonts" }, "font_family_heading": { "name": "font_family_heading", "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", "subcategory": "family", "meta": { "postscriptName": "LahiTapiola Sans" }, "originalValue": "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "type": "font", "category": "fonts" }, "font_family_text_turva": { "name": "font_family_text_turva", "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", "subcategory": "family", "meta": { "postscriptName": "Asap" }, "originalValue": "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "type": "font", "category": "fonts" }, "font_family_heading_turva": { "name": "font_family_heading_turva", "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", "subcategory": "family", "meta": { "postscriptName": "Asap" }, "originalValue": "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "type": "font", "category": "fonts" }, "font_weight_normal": { "name": "font_weight_normal", "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", "subcategory": "weight", "meta": { "postscriptWeight": "Normal" }, "originalValue": "400", "type": "font", "category": "fonts" }, "font_weight_semi_bold": { "name": "font_weight_semi_bold", "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", "subcategory": "weight", "meta": { "postscriptWeight": "Semi Bold" }, "originalValue": "600", "type": "font", "category": "fonts" }, "font_weight_bold": { "name": "font_weight_bold", "value": "700", "title": "Font Weight: Bold", "description": "Bold font weight is used for headings only together with “Heading” font family.", "theme": "turva", "status": "ready", "subcategory": "weight", "meta": { "postscriptWeight": "Bold" }, "originalValue": "700", "type": "font", "category": "fonts" }, "font_weight_extra_bold": { "name": "font_weight_extra_bold", "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", "subcategory": "weight", "meta": { "postscriptWeight": "Extra Bold" }, "originalValue": "800", "type": "font", "category": "fonts" }, "letter_spacing_heading": { "name": "letter_spacing_heading", "value": "-0.01rem", "title": "Letter Spacing: Heading", "description": "Gives tiny amount of negative letter spacing for the page main heading.", "status": "ready", "subcategory": "letter-spacing", "originalValue": "-0.01rem", "type": "font", "category": "fonts" }, "font_size_xxxx_large": { "name": "font_size_xxxx_large", "value": "4.5rem", "title": "Font Size: XXXX-Large", "description": "XXXX-large font size is for marketing purposes and banners.", "status": "ready", "order": 8, "originalValue": "4.5rem", "type": "number", "category": "font-size" }, "font_size_xxx_large": { "name": "font_size_xxx_large", "value": "3rem", "title": "Font Size: XXX-Large", "description": "XXX-large font size is used for the main heading on desktop.", "status": "ready", "order": 7, "originalValue": "3rem", "type": "number", "category": "font-size" }, "font_size_xx_large": { "name": "font_size_xx_large", "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, "originalValue": "2.25rem", "type": "number", "category": "font-size" }, "font_size_x_large": { "name": "font_size_x_large", "value": "1.5rem", "title": "Font Size: X-Large", "description": "X-large font size is used for large sub-headings.", "status": "ready", "order": 5, "originalValue": "1.5rem", "type": "number", "category": "font-size" }, "font_size_large": { "name": "font_size_large", "value": "1.25rem", "title": "Font Size: Large", "description": "Large font size is used for small sub-headings.", "status": "ready", "order": 4, "originalValue": "1.25rem", "type": "number", "category": "font-size" }, "font_size_medium": { "name": "font_size_medium", "value": "1rem", "title": "Font Size: Medium", "description": "Medium font size is used for the body text.", "status": "ready", "order": 3, "originalValue": "1rem", "type": "number", "category": "font-size" }, "font_size_small": { "name": "font_size_small", "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, "originalValue": "0.875rem", "type": "number", "category": "font-size" }, "font_size_x_small": { "name": "font_size_x_small", "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, "originalValue": "0.75rem", "type": "number", "category": "font-size" }, "radius_sharp": { "name": "radius_sharp", "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, "originalValue": "0", "type": "number" }, "radius_default": { "name": "radius_default", "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, "originalValue": "4px", "type": "number" }, "radius_medium": { "name": "radius_medium", "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, "originalValue": "8px", "type": "number" }, "radius_intermediate": { "name": "radius_intermediate", "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, "originalValue": "12px", "type": "number" }, "radius_large": { "name": "radius_large", "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, "originalValue": "16px", "type": "number" }, "radius_circle": { "name": "radius_circle", "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, "originalValue": "50%", "type": "number" }, "radius_pill": { "name": "radius_pill", "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, "originalValue": "20rem", "type": "number" }, "shadow_default": { "name": "shadow_default", "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", "originalValue": "0 2px 6px 0 rgba(0, 41, 77, 0.07)", "type": "..." }, "shadow_hover": { "name": "shadow_hover", "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", "originalValue": "0 2px 10px 0 rgba(0, 41, 77, 0.1)", "type": "..." }, "shadow_hover_input": { "name": "shadow_hover_input", "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", "originalValue": "0 0 0 1px #909599", "type": "..." }, "shadow_modal": { "name": "shadow_modal", "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", "originalValue": "0 2px 20px 0 rgba(0, 0, 0, 0.2)", "type": "..." }, "shadow_tooltip": { "name": "shadow_tooltip", "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", "originalValue": "0 2px 10px 0 rgba(0, 41, 77, 0.07)", "type": "..." }, "shadow_card": { "name": "shadow_card", "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", "originalValue": "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)", "type": "..." }, "shadow_focus": { "name": "shadow_focus", "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", "originalValue": "0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3", "type": "..." }, "shadow_focus_input": { "name": "shadow_focus_input", "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", "originalValue": "0 0 0 1px #0077b3", "type": "..." }, "shadow_error": { "name": "shadow_error", "value": "0 0 0 1px #de2362", "title": "Shadow: Error", "description": "Error state shadow, uses $color-danger.", "category": "box-shadow", "status": "deprecated", "theme": "lahitapiola", "originalValue": "0 0 0 1px #de2362", "type": "..." }, "shadow_default_turva": { "name": "shadow_default_turva", "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", "originalValue": "0 2px 6px 0 rgba(117, 117, 117, 0.13)", "type": "..." }, "shadow_hover_turva": { "name": "shadow_hover_turva", "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", "originalValue": "0 2px 10px 0 rgba(117, 117, 117, 0.15)", "type": "..." }, "shadow_hover_input_turva": { "name": "shadow_hover_input_turva", "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", "originalValue": "0 0 0 1px #747475", "type": "..." }, "shadow_tooltip_turva": { "name": "shadow_tooltip_turva", "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", "originalValue": "0 2px 10px 0 rgba(117, 117, 117, 0.13)", "type": "..." }, "shadow_card_turva": { "name": "shadow_card_turva", "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", "originalValue": "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)", "type": "..." }, "shadow_focus_turva": { "name": "shadow_focus_turva", "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", "originalValue": "0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a", "type": "..." }, "shadow_focus_input_turva": { "name": "shadow_focus_input_turva", "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", "originalValue": "0 0 0 1px #171c3a", "type": "..." }, "shadow_error_turva": { "name": "shadow_error_turva", "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", "originalValue": "0 0 0 1px #e55039", "type": "..." }, "space_xxxxx_large": { "name": "space_xxxxx_large", "value": "94px", "title": "Space: XXXXX-Large", "description": "XXXXX-large space is used as spacer on modals.", "status": "ready", "order": 10, "originalValue": "94px", "type": "number", "category": "space" }, "space_xxxx_large": { "name": "space_xxxx_large", "value": "72px", "title": "Space: XXXX-Large", "description": "XXXX-large space is used as an empty space between two elements.", "status": "ready", "order": 9, "originalValue": "72px", "type": "number", "category": "space" }, "space_xxx_large": { "name": "space_xxx_large", "value": "48px", "title": "Space: XXX-Large", "description": "XXX-large space is used as an empty space between two elements.", "status": "ready", "order": 8, "originalValue": "48px", "type": "number", "category": "space" }, "space_xx_large": { "name": "space_xx_large", "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, "originalValue": "36px", "type": "number", "category": "space" }, "space_x_large": { "name": "space_x_large", "value": "28px", "title": "Space: X-Large", "description": "X-large space is used as an empty space between two elements.", "status": "ready", "order": 6, "originalValue": "28px", "type": "number", "category": "space" }, "space_large": { "name": "space_large", "value": "20px", "title": "Space: Large", "description": "Large space is most commonly used as an empty space between two components.", "status": "ready", "order": 5, "originalValue": "20px", "type": "number", "category": "space" }, "space_medium": { "name": "space_medium", "value": "16px", "title": "Space: Medium", "description": "Medium is the default space.", "status": "ready", "order": 4, "originalValue": "16px", "type": "number", "category": "space" }, "space_small": { "name": "space_small", "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, "originalValue": "12px", "type": "number", "category": "space" }, "space_x_small": { "name": "space_x_small", "value": "8px", "title": "Space: X-Small", "description": "X-small space is used when the space is limited.", "status": "ready", "order": 2, "originalValue": "8px", "type": "number", "category": "space" }, "space_xx_small": { "name": "space_xx_small", "value": "4px", "title": "Space: XX-Small", "description": "XX-small space is used when the space is limited.", "status": "ready", "order": 1, "originalValue": "4px", "type": "number", "category": "space" }, "space_xxx_small": { "name": "space_xxx_small", "value": "2px", "title": "Space: XXX-Small", "description": "XXX-small space is used when the space is limited.", "status": "ready", "order": 0, "originalValue": "2px", "type": "number", "category": "space" }, "size_tappable_square": { "name": "size_tappable_square", "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", "originalValue": "48px", "type": "number", "category": "sizes" }, "size_layout_max_width": { "name": "size_layout_max_width", "value": "1110px", "title": "Size: Layout Max-Width", "description": "This size is used as the max-width for all layouts on the Web.", "originalValue": "1110px", "type": "number", "category": "sizes" }, "size_step_small": { "name": "size_step_small", "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, "originalValue": "30px", "type": "number", "category": "sizes" }, "size_step_medium": { "name": "size_step_medium", "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, "originalValue": "40px", "type": "number", "category": "sizes" }, "size_header": { "name": "size_header", "value": "4rem", "title": "Size: Header", "description": "Header size (64px) is used for the header height on mobile, tablet and desktop viewports.", "status": "ready", "originalValue": "4rem", "type": "number", "category": "sizes" }, "size_navigation": { "name": "size_navigation", "value": "3rem", "title": "Size: Navigation", "description": "Navigation size (48px) is used for the navigation height on desktop viewports.", "status": "ready", "originalValue": "3rem", "type": "number", "category": "sizes" }, "size_button_min_width": { "name": "size_button_min_width", "value": "8rem", "title": "Size: Button Min Width", "description": "Button min width size is used to set the minimum width for button elements.", "status": "ready", "originalValue": "8rem", "type": "number", "category": "sizes" }, "size_form_border": { "name": "size_form_border", "value": "1px", "title": "Size: Form Border", "description": "Form border size is used to set a consistent borders for form elements.", "status": "ready", "type": "number", "originalValue": "1px", "category": "sizes" }, "size_button_border": { "name": "size_button_border", "value": "1px", "title": "Size: Button Border", "description": "Button border size is used to set a consistent borders for buttons.", "status": "ready", "type": "number", "originalValue": "1px", "category": "sizes" }, "size_button_tiny_border": { "name": "size_button_tiny_border", "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", "originalValue": "1px", "category": "sizes" }, "size_medium_border": { "name": "size_medium_border", "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", "originalValue": "2px", "category": "sizes" }, "size_icon_x_small": { "name": "size_icon_x_small", "value": "16px", "title": "Size: Icon X-Small", "description": "X-small icon size is used when the space is limited.", "status": "ready", "order": 2, "originalValue": "16px", "type": "number", "category": "sizes" }, "size_icon_xx_small": { "name": "size_icon_xx_small", "value": "10px", "title": "Size: Icon XX-Small", "description": "XX-small icon size is used when the space is limited.", "status": "ready", "order": 1, "originalValue": "10px", "type": "number", "category": "sizes" }, "size_icon_xxx_small": { "name": "size_icon_xxx_small", "value": "7px", "title": "Size: Icon XXX-Small", "description": "XXX-small icon size is used when the space is limited.", "status": "ready", "order": 0, "originalValue": "7px", "type": "number", "category": "sizes" }, "size_icon_small": { "name": "size_icon_small", "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, "originalValue": "20px", "type": "number", "category": "sizes" }, "size_icon_medium": { "name": "size_icon_medium", "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, "originalValue": "24px", "type": "number", "category": "sizes" }, "size_icon_large": { "name": "size_icon_large", "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, "originalValue": "30px", "type": "number", "category": "sizes" }, "size_icon_x_large": { "name": "size_icon_x_large", "value": "36px", "title": "Size: Icon X-Large", "description": "X-large icon size is used as product level icons.", "status": "ready", "order": 6, "originalValue": "36px", "type": "number", "category": "sizes" }, "size_icon_xx_large": { "name": "size_icon_xx_large", "value": "48px", "title": "Size: Icon XX-Large", "description": "XX-large icon size is used in components as a visual element.", "status": "ready", "order": 7, "originalValue": "48px", "type": "number", "category": "sizes" }, "size_icon_xxx_large": { "name": "size_icon_xxx_large", "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, "originalValue": "72px", "type": "number", "category": "sizes" }, "opacity_85": { "name": "opacity_85", "value": "0.85", "title": "Opacity: 85%", "description": "Gives 85% opacity to an element.", "status": "ready", "originalValue": "0.85", "type": "number", "category": "opacity" }, "opacity_75": { "name": "opacity_75", "value": "0.75", "title": "Opacity: 75%", "description": "Gives 75% opacity to an element.", "status": "ready", "originalValue": "0.75", "type": "number", "category": "opacity" }, "opacity_50": { "name": "opacity_50", "value": "0.50", "title": "Opacity: 50%", "description": "Gives 50% opacity to an element.", "status": "ready", "originalValue": "0.50", "type": "number", "category": "opacity" }, "opacity_30": { "name": "opacity_30", "value": "0.30", "title": "Opacity: 30%", "description": "Gives 30% opacity to an element.", "status": "ready", "originalValue": "0.30", "type": "number", "category": "opacity" }, "z_index_default": { "name": "z_index_default", "value": "1", "title": "Z-Index: Default", "description": "The default z-index for components and elements inside components.", "status": "ready", "originalValue": "1", "type": "number", "category": "z-index" }, "z_index_popup": { "name": "z_index_popup", "value": "950", "title": "Z-Index: Popup", "description": "Default z-index for popups that stacks on top of all other elements.", "status": "ready", "originalValue": "950", "type": "number", "category": "z-index" }, "z_index_modal": { "name": "z_index_modal", "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", "originalValue": "900", "type": "number", "category": "z-index" }, "z_index_spinner": { "name": "z_index_spinner", "value": "800", "title": "Z-Index: Spinner", "description": "Default z-index for spinners, stacking on top of overlay.", "status": "ready", "originalValue": "800", "type": "number", "category": "z-index" }, "z_index_overlay": { "name": "z_index_overlay", "value": "700", "title": "Z-Index: Overlay", "description": "Default z-index for modal and popup overlays.", "status": "ready", "originalValue": "700", "type": "number", "category": "z-index" }, "z_index_dropdown": { "name": "z_index_dropdown", "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", "originalValue": "600", "type": "number", "category": "z-index" }, "z_index_toast": { "name": "z_index_toast", "value": "500", "title": "Z-Index: Toast", "description": "Default z-index for toast messages.", "status": "ready", "originalValue": "500", "type": "number", "category": "z-index" }, "z_index_header": { "name": "z_index_header", "value": "400", "title": "Z-Index: Header", "description": "Default z-index for header.", "status": "ready", "originalValue": "400", "type": "number", "category": "z-index" }, "z_index_sticky": { "name": "z_index_sticky", "value": "300", "title": "Z-Index: Sticky", "description": "Default z-index for sticky interface elements.", "status": "ready", "originalValue": "300", "type": "number", "category": "z-index" }, "z_index_mask_buttons": { "name": "z_index_mask_buttons", "value": "250", "title": "Z-Index: Mask Buttons", "description": "Default z-index for buttons that should overlap masking interface elements.", "status": "ready", "originalValue": "250", "type": "number", "category": "z-index" }, "z_index_mask": { "name": "z_index_mask", "value": "200", "title": "Z-Index: Mask", "description": "Default z-index for masking interface elements.", "status": "ready", "originalValue": "200", "type": "number", "category": "z-index" }, "z_index_masked": { "name": "z_index_masked", "value": "100", "title": "Z-Index: Masked", "description": "Default z-index for masked interface elements.", "status": "ready", "originalValue": "100", "type": "number", "category": "z-index" }, "z_index_deep": { "name": "z_index_deep", "value": "-999999", "title": "Z-Index: Deep", "description": "Deep z-index is used to stack something behind everything else.", "status": "ready", "originalValue": "-999999", "type": "number", "category": "z-index" }, "line_height_medium": { "name": "line_height_medium", "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", "subcategory": "line-height", "originalValue": "1.5", "type": "number", "category": "line-height" }, "line_height_small": { "name": "line_height_small", "value": "1.25", "title": "Line Height: Small", "description": "Small line-height is used for all application headings and text in sidebar.", "status": "ready", "subcategory": "line-height", "originalValue": "1.25", "type": "number", "category": "line-height" }, "line_height_x_small": { "name": "line_height_x_small", "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", "subcategory": "line-height", "originalValue": "1.1", "type": "number", "category": "line-height" }, "transition_quickly": { "name": "transition_quickly", "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", "originalValue": "300ms ease", "type": "...", "category": "transition" }, "transition_slowly": { "name": "transition_slowly", "value": "600ms ease", "title": "Transition: Slowly", "description": "Use this design token for a slow transition. Used for example in mobile navigation.", "status": "ready", "originalValue": "600ms ease", "type": "...", "category": "transition" }, "media_query_xxx_small": { "name": "media_query_xxx_small", "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, "originalValue": "'(max-width: 20.5em)'", "type": "...", "category": "media-query" }, "media_query_xx_small": { "name": "media_query_xx_small", "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, "originalValue": "'(max-width: 22.5em)'", "type": "...", "category": "media-query" }, "media_query_x_small": { "name": "media_query_x_small", "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, "originalValue": "'(max-width: 35.9375em)'", "type": "...", "category": "media-query" }, "media_query_small": { "name": "media_query_small", "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, "originalValue": "'(min-width: 36em)'", "type": "...", "category": "media-query" }, "media_query_medium": { "name": "media_query_medium", "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, "originalValue": "'(min-width: 48em)'", "type": "...", "category": "media-query" }, "media_query_large": { "name": "media_query_large", "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, "originalValue": "'(min-width: 62em)'", "type": "...", "category": "media-query" }, "media_query_x_large": { "name": "media_query_x_large", "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, "originalValue": "'(min-width: 64.0625em)'", "type": "...", "category": "media-query" }, "media_query_xx_large": { "name": "media_query_xx_large", "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, "originalValue": "'(min-width: 76.25em)'", "type": "...", "category": "media-query" }, "media_query_xxx_large": { "name": "media_query_xxx_large", "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, "originalValue": "'(min-width: 106.25em)'", "type": "...", "category": "media-query" } } }