{
	"Global": {
		"Primary": {
			"Theme": {
				"value": "#003d73",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Background": {
				"value": "#fefefe",
				"type": "color",
				"description": "Intended use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
			},
			"Background-secondary": {
				"value": "#eaeaea",
				"type": "color",
				"description": "Intended use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
			},
			"Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Intended use: Foreground color\n\nThe default foreground color, i.e. the text color."
			},
			"Foreground-secondary": {
				"value": "#6e6e6e",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
			},
			"Border": {
				"value": "#9e9e9e",
				"type": "color",
				"description": "Intended use: Border color\n\nThe default border color."
			},
			"Background-input": {
				"value": "#fefefe",
				"type": "color",
				"description": "Intended use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
			},
			"Interactive": {
				"value": "#d4d4d4",
				"type": "color",
				"description": "Intended use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
			},
			"Theme-secondary": {
				"value": "#8ba6bf",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#003d73",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-disabled": {
				"value": "#b5b5b5",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
			},
			"Foreground-branding": {
				"value": "#003d73",
				"type": "color",
				"description": "Intended use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#fefefe",
				"type": "color",
				"description": "Intended use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Intended use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#323b44",
				"type": "color",
				"description": "Intended use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#003d73",
				"type": "color",
				"description": "Intended use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#376791",
				"type": "color",
				"description": "Intended use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Shadow": {
				"value": "rgba(0,",
				"type": "color",
				"description": "Intended use: Drop shadow\n\nColor for box-shadow. Shadows are applied to interactive elements like buttons, selectand radiobuttons and to overlays like modal views and menus."
			},
			"Overlay": {
				"value": "rgba(0,",
				"type": "color",
				"description": "Intended use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Utility": {
			"Utility-attention": {
				"value": "#ffa620",
				"type": "color",
				"description": "Intended use: Background and border color\n\nBackground color for interactive elements calling attention. Border color for elements using utility-attention-background as background color. Use utility-foreground as primary foreground color."
			},
			"Utility-confirm": {
				"value": "#07ac07",
				"type": "color",
				"description": "Intended use: Background and border color\n\nBackground color for interactive elements signaling a confirmation. Border color for elements using utility-confirm-background as background color. Use utility-foreground as primary foreground color."
			},
			"Utility-warning": {
				"value": "#ff2222",
				"type": "color",
				"description": "Intended use: Background and border color\n\nBackground color for interactive elements signaling a warning. Border color for elements using utility-warning-background as background color. Use utility-foreground as primary foreground color."
			},
			"Utility-attention-background": {
				"value": "#ffd28d",
				"type": "color",
				"description": "Intended use: Background color\n\nBackground color for text elements calling attention. Use utility-foreground as primary foreground color."
			},
			"Utility-confirm-background": {
				"value": "#80d580",
				"type": "color",
				"description": "Intended use: Background color\n\nBackground color for text elements calling attention. Use utility-foreground as primary foreground color."
			},
			"Utility-warning-background": {
				"value": "#ff8f8f",
				"type": "color",
				"description": "Intended use: Background color\n\nBackground color for text elements calling attention. Use utility-foreground as primary foreground color."
			},
			"Utility, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Intended use: Foreground color\n\nColor for text on elements with a utility color as background."
			},
			"Utility-confirm, Foreground-secondary": {
				"value": "#355835",
				"type": "color",
				"description": "Intended use: Foreground color\n\nColor for secondary text on elements with utility-attention-background as background."
			},
			"Utility-attention, Foreground-secondary": {
				"value": "#705c3e",
				"type": "color",
				"description": "Intended use: Foreground color\n\nColor for secondary text on elements with utility-confirm-background as background."
			},
			"Utility-warning, Foreground-secondary": {
				"value": "#623737",
				"type": "color",
				"description": "Intended use: Foreground color\n\nColor for secondary text on elements with utility-warning-background as background."
			},
			"Utility-interactive": {
				"value": "#fefefe",
				"type": "color",
				"description": "Intended use: Background color\n\nBackground color for an interactive element, e.g. a button, within an element with a utility color as background. Has the same values as the background in normal themes. Useutility-foreground as foreground color."
			},
			"Utility-interactive, Foreground-secondary": {
				"value": "#6e6e6e",
				"type": "color",
				"description": "Intended use: Foreground color\n\nSecondary forground-color for elements that has utility-interactive as background-color."
			},
			"Utility-interactive, Foreground-disabled": {
				"value": "#b5b5b5",
				"type": "color",
				"description": "Intended use: Foreground color\n\nSecondary forground-color for elements that has utility-interactive as background-color."
			},
			"Utility-focus": {
				"value": "#229bfc",
				"type": "color",
				"description": "Intended use: Color for outline, used for indicating focus on interactive elements."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#00315c",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#95aec5",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#052643",
				"type": "color",
				"description": "Intended use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Background, hover": {
				"value": "#f6f6f6",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with background as background color."
			},
			"Background-secondary, hover": {
				"value": "#e2e2e2",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with background-secondary as background color."
			},
			"Interactive, hover": {
				"value": "#c2c2c2",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with interactive as background color."
			},
			"Foreground, hover": {
				"value": "#5d5d5d",
				"type": "color",
				"description": "Intended use: Hover of foreground color\n\nHover color for elements with foreground as text color."
			},
			"Foreground-theme, hover": {
				"value": "#2b5e8a",
				"type": "color",
				"description": "Intended use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			},
			"Utility-attention, hover": {
				"value": "#e9971d",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with utility-attention as background color."
			},
			"Utility-confirm, hover": {
				"value": "#069b06",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with utility-confirm as background color."
			},
			"Utility-warning, hover": {
				"value": "#e61f1f",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with utility-warning as background color."
			},
			"Utility-confirm-background, hover": {
				"value": "#7acb7a",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with utility-interactive as background color."
			},
			"Utility-warning-background, hover": {
				"value": "#f38888",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with utility-confirm-background as background color."
			},
			"Utility-interactive, hover": {
				"value": "#f3f3f3",
				"type": "color",
				"description": "Intended use: Hover of background color\n\nHover color for elements with utility-warning-background as background color."
			}
		},
		"Fades": {
			"Background": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Background, 0) 0%, $Primary.Background 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Background, 0) 0%, $Primary.Background 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque background color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Background, 0) 0%, $Primary.Background 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Background, 0) 0%, $Primary.Background 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque background color on the left."
				}
			},
			"Background-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Background-secondary, 0) 0%, $Primary.Background-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Background-secondary, 0) 0%, $Primary.Background-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Background-secondary, 0) 0%, $Primary.Background-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Background-secondary, 0) 0%, $Primary.Background-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
				}
			},
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				},
				"Foreground": {
					"value": "linear-gradient(180deg, rgba({Primary.Foreground}, 0) 0%, {Primary.Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#002241",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#11314d",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Foreground color\n\nThe default foreground color, i.e. the text color."
				},
				"Foreground-secondary": {
					"value": "#778a9a",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#4e657b",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#092a48",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#213f5a",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#00325e",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#678cac",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#39546c",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Foreground-branding": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#839bb0",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#678cac",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#678cac",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Shadow": {
					"value": "black",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Drop shadow\n\nColor for box-shadow. Shadows are applied to interactive elements like buttons, selectand radiobuttons and to overlays like modal views and menus."
				},
				"Overlay": {
					"value": "rgba(0,",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#114a7d",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#093964",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#c5ccd3",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#092a48",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#1f3e58",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#2f4b64",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#c5ccd3",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#4e6982",
					"type": "color",
					"description": "Dark theme variant\n\nIntended use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				},
				"Utility-attention, hover": {
					"value": "#ffbf60",
					"type": "color",
					"description": "Intended use: Hover of background color\n\nHover color for elements with utility-attention as background color."
				},
				"Utility-confirm, hover": {
					"value": "#33bb33",
					"type": "color",
					"description": "Intended use: Hover of background color\n\nHover color for elements with utility-confirm as background color."
				},
				"Utility-warning, hover": {
					"value": "#ff5353",
					"type": "color",
					"description": "Intended use: Hover of background color\n\nHover color for elements with utility-warning as background color."
				},
				"Utility-confirm-background, hover": {
					"value": "#94dc94",
					"type": "color",
					"description": "Intended use: Hover of background color\n\nHover color for elements with utility-interactive as background color."
				},
				"Utility-warning-background, hover": {
					"value": "#ff9d9d",
					"type": "color",
					"description": "Intended use: Hover of background color\n\nHover color for elements with utility-confirm-background as background color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				},
				"Foregrounds": {
					"Foreground-branding": {
						"value": "linear-gradient(180deg, rgba({Dark.Additional foregrounds.Foreground-branding}, 0) 0%, {Dark.Additional foregrounds.Foreground-branding} 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
					},
					"Foreground": {
						"value": "linear-gradient(180deg, rgba({Dark.Primary.Foreground}, 0) 0%, {Dark.Primary.Foreground} 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque foreground color at the bottom."
					}
				}
			}
		},
		"fontSizes": {
			"Small": {
				"value": "13",
				"type": "fontSizes"
			},
			"Default": {
				"value": "16",
				"type": "fontSizes"
			},
			"Large": {
				"value": "19",
				"type": "fontSizes"
			},
			"Larger": {
				"value": "23",
				"type": "fontSizes"
			},
			"Largest": {
				"value": "28",
				"type": "fontSizes"
			}
		},
		"lineHieghts": {
			"Singleline": {
				"Small": {
					"value": "19",
					"type": "lineHeights"
				},
				"Default": {
					"value": "22",
					"type": "lineHeights"
				},
				"Large": {
					"value": "26",
					"type": "lineHeights"
				},
				"Larger": {
					"value": "30",
					"type": "lineHeights"
				},
				"Largest": {
					"value": "35",
					"type": "lineHeights"
				}
			},
			"Multiline": {
				"Small": {
					"value": "26",
					"type": "lineHeights"
				},
				"Default": {
					"value": "29",
					"type": "lineHeights"
				},
				"Large": {
					"value": "32",
					"type": "lineHeights"
				},
				"Larger": {
					"value": "37",
					"type": "lineHeights"
				},
				"Largest": {
					"value": "42",
					"type": "lineHeights"
				}
			}
		},
		"spacingSizes": {
			"Minus5": {
				"value": "5",
				"description": "This is the smallest size",
				"type": "other"
			},
			"Minus4": {
				"value": "7",
				"type": "other"
			},
			"Minus3": {
				"value": "10",
				"type": "other"
			},
			"Minus2": {
				"value": "14",
				"type": "other"
			},
			"Minus1": {
				"value": "20",
				"type": "other"
			},
			"Zero": {
				"value": "28",
				"description": "Same size as the h1 hieght",
				"type": "other"
			},
			"Plus1": {
				"value": "39",
				"type": "other"
			},
			"Plus2": {
				"value": "55",
				"description": "This is the largest size",
				"type": "other"
			},
			"Side": {
				"value": "20",
				"description": "The spacing used for vertical page margins",
				"type": "other"
			}
		},
		"sizes": {
			"Minus5": {
				"value": "$spacingSizes.Minus5",
				"description": "This is the smallest size",
				"type": "sizing"
			},
			"Minus4": {
				"value": "$spacingSizes.Minus4",
				"type": "sizing"
			},
			"Minus3": {
				"value": "$spacingSizes.Minus3",
				"type": "sizing"
			},
			"Minus2": {
				"value": "$spacingSizes.Minus2",
				"type": "sizing"
			},
			"Minus1": {
				"value": "$spacingSizes.Minus1",
				"type": "sizing"
			},
			"Zero": {
				"value": "$spacingSizes.Zero",
				"description": "Same size as the h1 hieght",
				"type": "sizing"
			},
			"Plus1": {
				"value": "$spacingSizes.Plus1",
				"type": "sizing"
			},
			"Plus2": {
				"value": "$spacingSizes.Plus2",
				"description": "This is the largest size",
				"type": "sizing"
			}
		},
		"lineHeightSizing": {
			"singleline": {
				"Small": {
					"value": "$lineHieghts.Singleline.Small",
					"type": "sizing"
				},
				"Default": {
					"value": "$lineHieghts.Singleline.Default",
					"type": "sizing"
				},
				"Large": {
					"value": "$lineHieghts.Singleline.Large",
					"type": "sizing"
				},
				"Larger": {
					"value": "$lineHieghts.Singleline.Larger",
					"type": "sizing"
				},
				"Largest": {
					"value": "$lineHieghts.Singleline.Largest",
					"type": "sizing"
				}
			},
			"multiline": {
				"Small": {
					"value": "$lineHieghts.Multiline.Small",
					"type": "sizing"
				},
				"Default": {
					"value": "$lineHieghts.Multiline.Default",
					"type": "sizing"
				},
				"Large": {
					"value": "$lineHieghts.Multiline.Large",
					"type": "sizing"
				},
				"Larger": {
					"value": "$lineHieghts.Multiline.Larger",
					"type": "sizing"
				},
				"Largest": {
					"value": "$lineHieghts.Multiline.Largest",
					"type": "sizing"
				}
			}
		},
		"borderWidthSizing": {
			"Default": {
				"value": "$borderWidths.Default",
				"type": "sizing"
			},
			"Slim": {
				"value": "$borderWidths.Slim",
				"type": "sizing"
			},
			"Utility": {
				"value": "$borderWidths.Utility",
				"type": "sizing"
			},
			"NavItem": {
				"value": "$borderWidths.NavItem",
				"type": "sizing"
			}
		},
		"otherSizes": {
			"0": {
				"value": "0",
				"type": "sizing"
			},
			"SquareCircleCenter": {
				"value": "6",
				"type": "sizing"
			}
		},
		"squareSizes": {
			"Minus5AndSinglelineDefault": {
				"value": "$spacingSizes.Minus5 * 2 + $lineHieghts.Singleline.Default",
				"type": "sizing"
			},
			"Minus4AndSinglelineDefault": {
				"value": "$spacingSizes.Minus4 * 2 + $lineHieghts.Singleline.Default",
				"type": "sizing"
			},
			"Minus3AndSinglelineDefault": {
				"value": "$spacingSizes.Minus3 * 2 + $lineHieghts.Singleline.Default",
				"type": "sizing"
			},
			"Minus3AndSinglelineLarger": {
				"value": "$spacingSizes.Minus3 * 2 + $lineHieghts.Singleline.Larger",
				"type": "sizing"
			},
			"Minus2AndSinglelineLarger": {
				"value": "$spacingSizes.Minus2 * 2 + $lineHieghts.Singleline.Larger",
				"type": "sizing"
			}
		},
		"spacings": {
			"Minus5": {
				"value": "$spacingSizes.Minus5",
				"description": "This is the smallest whitespace",
				"type": "spacing"
			},
			"Minus4": {
				"value": "$spacingSizes.Minus4",
				"type": "spacing"
			},
			"Minus3": {
				"value": "$spacingSizes.Minus3",
				"type": "spacing"
			},
			"Minus2": {
				"value": "$spacingSizes.Minus2",
				"type": "spacing"
			},
			"Minus1": {
				"value": "$spacingSizes.Minus1",
				"description": "Whitespace one step smaller than the page side margins, used for \"boxes\".",
				"type": "spacing"
			},
			"Zero": {
				"value": "$spacingSizes.Zero",
				"description": "Same whitespace as the h1 hieght, used for page side margins.",
				"type": "spacing"
			},
			"Plus1": {
				"value": "$spacingSizes.Plus1",
				"type": "spacing"
			},
			"Plus2": {
				"value": "$spacingSizes.Plus2",
				"description": "This is the largest whitespace",
				"type": "spacing"
			},
			"Side": {
				"value": "$spacingSizes.Side",
				"description": "The whitespace used for vertical page margins",
				"type": "spacing"
			}
		},
		"otherSpacings": {
			"0": {
				"value": "0",
				"type": "spacing"
			},
			"BorderDefaultWidth": {
				"value": "$borderWidths.Default",
				"type": "spacing"
			},
			"BorderSlimWidth": {
				"value": "$borderWidths.Slim",
				"type": "spacing"
			}
		},
		"spuareCircleSpacings": {
			"Minus5AndSinglelineDefault": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus5 + $lineHieghts.Singleline.Default / 2",
				"type": "spacing"
			},
			"Minus5AndSinglelineSmall": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus5 + $lineHieghts.Singleline.Small / 2",
				"type": "spacing"
			},
			"Minus4AndSinglelineDefault": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus4 + $lineHieghts.Singleline.Default / 2",
				"type": "spacing"
			},
			"Minus3AndSinglelineSmall": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus3 + $lineHieghts.Singleline.Small / 2",
				"type": "spacing"
			},
			"Minus3AndSinglelineDefault": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus3 + $lineHieghts.Singleline.Default / 2",
				"type": "spacing"
			},
			"Minus3AndSinglelineLarge": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus3 + $lineHieghts.Singleline.Large / 2",
				"type": "spacing"
			},
			"Minus3AndSinglelineLarger": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus3 + $lineHieghts.Singleline.Larger / 2",
				"type": "spacing"
			},
			"Minus3AndSinglelineLargest": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus3 + $lineHieghts.Singleline.Largest / 2",
				"type": "spacing"
			},
			"Minus2AndSinglelineDefault": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus2 + $lineHieghts.Singleline.Default / 2",
				"type": "spacing"
			},
			"SinglelineSmall": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $lineHieghts.Singleline.Small / 2",
				"type": "spacing"
			},
			"SinglelineDefault": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $lineHieghts.Singleline.Default / 2",
				"type": "spacing"
			},
			"SinglelineLarge": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $lineHieghts.Singleline.Large / 2",
				"type": "spacing"
			},
			"SinglelineLarger": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $lineHieghts.Singleline.Larger / 2",
				"type": "spacing"
			},
			"MultilineDefault": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $lineHieghts.Multiline.Default / 2",
				"type": "spacing"
			},
			"FontsizeLarger": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $fontSizes.Larger / 2",
				"type": "spacing"
			},
			"Minus2": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Minus2 / 2",
				"type": "spacing"
			},
			"Zero": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Zero / 2",
				"type": "spacing"
			},
			"Plus1": {
				"value": "$otherSizes.SquareCircleCenter / -2 + $spacingSizes.Plus1 / 2",
				"type": "spacing"
			}
		},
		"spacingsPlusBorderWidth": {
			"defaultBorderWidth": {
				"Minus5": {
					"value": "$spacingSizes.Minus5 + $borderWidths.Default",
					"type": "spacing"
				},
				"Minus4": {
					"value": "$spacingSizes.Minus4 + $borderWidths.Default",
					"type": "spacing"
				},
				"Minus3": {
					"value": "$spacingSizes.Minus3 + $borderWidths.Default",
					"type": "spacing"
				},
				"Minus2": {
					"value": "$spacingSizes.Minus2 + $borderWidths.Default",
					"type": "spacing"
				},
				"Minus1": {
					"value": "$spacingSizes.Minus1 + $borderWidths.Default",
					"type": "spacing"
				},
				"Zero": {
					"value": "$spacingSizes.Zero + $borderWidths.Default",
					"type": "spacing"
				},
				"Plus1": {
					"value": "$spacingSizes.Plus1 + $borderWidths.Default",
					"type": "spacing"
				},
				"Plus2": {
					"value": "$spacingSizes.Plus2 + $borderWidths.Default",
					"type": "spacing"
				}
			},
			"slimBorderWidth": {
				"Minus5": {
					"value": "$spacingSizes.Minus5 + $borderWidths.Slim",
					"type": "spacing"
				},
				"Minus4": {
					"value": "$spacingSizes.Minus4 + $borderWidths.Slim",
					"type": "spacing"
				},
				"Minus3": {
					"value": "$spacingSizes.Minus3 + $borderWidths.Slim",
					"type": "spacing"
				},
				"Minus2": {
					"value": "$spacingSizes.Minus2 + $borderWidths.Slim",
					"type": "spacing"
				},
				"Minus1": {
					"value": "$spacingSizes.Minus1 + $borderWidths.Slim",
					"type": "spacing"
				},
				"Zero": {
					"value": "$spacingSizes.Zero + $borderWidths.Slim",
					"type": "spacing"
				},
				"Plus1": {
					"value": "$spacingSizes.Plus1 + $borderWidths.Slim",
					"type": "spacing"
				},
				"Plus2": {
					"value": "$spacingSizes.Plus2 + $borderWidths.Slim",
					"type": "spacing"
				}
			},
			"utilityBorderWidth": {
				"Minus5": {
					"value": "$spacingSizes.Minus5 + $borderWidths.Utility",
					"type": "spacing"
				},
				"Minus4": {
					"value": "$spacingSizes.Minus4 + $borderWidths.Utility",
					"type": "spacing"
				},
				"Minus3": {
					"value": "$spacingSizes.Minus3 + $borderWidths.Utility",
					"type": "spacing"
				},
				"Minus2": {
					"value": "$spacingSizes.Minus2 + $borderWidths.Utility",
					"type": "spacing"
				},
				"Minus1": {
					"value": "$spacingSizes.Minus1 + $borderWidths.Utility",
					"type": "spacing"
				},
				"Zero": {
					"value": "$spacingSizes.Zero + $borderWidths.Utility",
					"type": "spacing"
				},
				"Plus1": {
					"value": "$spacingSizes.Plus1 + $borderWidths.Utility",
					"type": "spacing"
				},
				"Plus2": {
					"value": "$spacingSizes.Plus2 + $borderWidths.Utility",
					"type": "spacing"
				}
			},
			"navItemBorderWidth": {
				"Minus5": {
					"value": "$spacingSizes.Minus5 + $borderWidths.NavItem",
					"type": "spacing"
				},
				"Minus4": {
					"value": "$spacingSizes.Minus4 + $borderWidths.NavItem",
					"type": "spacing"
				},
				"Minus3": {
					"value": "$spacingSizes.Minus3 + $borderWidths.NavItem",
					"type": "spacing"
				},
				"Minus2": {
					"value": "$spacingSizes.Minus2 + $borderWidths.NavItem",
					"type": "spacing"
				},
				"Minus1": {
					"value": "$spacingSizes.Minus1 + $borderWidths.NavItem",
					"type": "spacing"
				},
				"Zero": {
					"value": "$spacingSizes.Zero + $borderWidths.NavItem",
					"type": "spacing"
				},
				"Plus1": {
					"value": "$spacingSizes.Plus1 + $borderWidths.NavItem",
					"type": "spacing"
				},
				"Plus2": {
					"value": "$spacingSizes.Plus2 + $borderWidths.NavItem",
					"type": "spacing"
				}
			}
		},
		"SubtractSpacings": {
			"Minus5From": {
				"Minus4": {
					"value": "$spacingSizes.Minus4 - $spacingSizes.Minus5",
					"type": "spacing"
				},
				"Minus4AndSlimBorderWidth": {
					"value": "$spacingsPlusBorderWidth.slimBorderWidth.Minus4 - $spacingSizes.Minus5",
					"type": "spacing"
				},
				"Minus3": {
					"value": "$spacingSizes.Minus3 - $spacingSizes.Minus5",
					"type": "spacing"
				},
				"Minus3AndSlimBorderWidth": {
					"value": "$spacingsPlusBorderWidth.slimBorderWidth.Minus3 - $spacingSizes.Minus5",
					"type": "spacing"
				},
				"Minus2": {
					"value": "$spacingSizes.Minus2 - $spacingSizes.Minus5",
					"type": "spacing"
				},
				"Minus2AndSlimBorderWidth": {
					"value": "$spacingsPlusBorderWidth.slimBorderWidth.Minus2 - $spacingSizes.Minus5",
					"type": "spacing"
				}
			},
			"Minus3From": {
				"Minus1": {
					"value": "$spacingSizes.Minus1 - $spacingSizes.Minus3",
					"type": "spacing"
				}
			},
			"Minus4From": {
				"Minus3": {
					"value": "$spacingSizes.Minus3 - $spacingSizes.Minus4",
					"type": "spacing"
				}
			},
			"Minus1From": {
				"Zero": {
					"value": "$spacingSizes.Zero - $spacingSizes.Minus1",
					"type": "spacing"
				}
			}
		},
		"shadowSizes": {
			"Front": {
				"X": {
					"value": "0",
					"type": "other"
				},
				"Y": {
					"value": "3.2",
					"type": "other"
				},
				"blur": {
					"value": "9.6",
					"type": "other"
				},
				"spread": {
					"value": "0",
					"type": "other"
				}
			},
			"Center": {
				"X": {
					"value": "0",
					"type": "other"
				},
				"Y": {
					"value": "1.6",
					"type": "other"
				},
				"blur": {
					"value": "4.8",
					"type": "other"
				},
				"spread": {
					"value": "0",
					"type": "other"
				}
			},
			"Back": {
				"X": {
					"value": "0",
					"type": "other"
				},
				"Y": {
					"value": "0.8",
					"type": "other"
				},
				"blur": {
					"value": "3.2",
					"type": "other"
				},
				"spread": {
					"value": "0",
					"type": "other"
				}
			}
		},
		"Shadows": {
			"Front": {
				"value": {
					"color": "$Supplemental.Shadow",
					"type": "dropShadow",
					"x": "$shadowSizes.Front.X",
					"y": "$shadowSizes.Front.Y",
					"blur": "$shadowSizes.Front.blur",
					"spread": "$shadowSizes.Front.spread"
				},
				"type": "boxShadow",
				"description": "Shadow for primary interactive elements, e.g. a button."
			},
			"Center": {
				"value": {
					"color": "$Supplemental.Shadow",
					"type": "dropShadow",
					"x": "$shadowSizes.Center.X",
					"y": "$shadowSizes.Center.Y",
					"blur": "$shadowSizes.Center.blur",
					"spread": "$shadowSizes.Center.spread"
				},
				"type": "boxShadow",
				"description": "Shadow for secondary interactive elements, e.g. a select or radiobutton."
			},
			"Back": {
				"value": {
					"color": "$Supplemental.Shadow",
					"type": "dropShadow",
					"x": "$shadowSizes.Back.X",
					"y": "$shadowSizes.Back.Y",
					"blur": "$shadowSizes.Back.blur",
					"spread": "$shadowSizes.Back.spread"
				},
				"type": "boxShadow",
				"description": "Shadow for interactive elements in active state, e.g. a pressed button or select."
			},
			"Dark": {
				"Front": {
					"value": {
						"color": "$Dark.Supplemental.Shadow",
						"type": "dropShadow",
						"x": "$shadowSizes.Front.X",
						"y": "$shadowSizes.Front.Y",
						"blur": "$shadowSizes.Front.blur",
						"spread": "$shadowSizes.Front.spread"
					},
					"type": "boxShadow",
					"description": "Shadow for primary interactive elements, e.g. a button."
				},
				"Center": {
					"value": {
						"color": "$Dark.Supplemental.Shadow",
						"type": "dropShadow",
						"x": "$shadowSizes.Center.X",
						"y": "$shadowSizes.Center.Y",
						"blur": "$shadowSizes.Center.blur",
						"spread": "$shadowSizes.Center.spread"
					},
					"type": "boxShadow",
					"description": "Shadow for secondary interactive elements, e.g. a select or radiobutton."
				},
				"Back": {
					"value": {
						"color": "$Dark.Supplemental.Shadow",
						"type": "dropShadow",
						"x": "$shadowSizes.Back.X",
						"y": "$shadowSizes.Back.Y",
						"blur": "$shadowSizes.Back.blur",
						"spread": "$shadowSizes.Back.spread"
					},
					"type": "boxShadow",
					"description": "Shadow for interactive elements in active state, e.g. a pressed button or select."
				}
			}
		},
		"blurSizes": {
			"Default": {
				"value": "3.2",
				"type": "other",
				"description": "You need to enter this manually, as Figma Tokens does not yet support Layer Blur-styles."
			}
		},
		"fontFamilies": {
			"au-passata": {
				"value": "AU Passata",
				"type": "fontFamilies"
			},
			"au-passata-light": {
				"value": "AU Passata Light",
				"type": "fontFamilies"
			},
			"au-peto": {
				"value": "AU Peto",
				"type": "fontFamilies"
			},
			"font-awesome-pro": {
				"value": "Font Awesome 6 Pro",
				"type": "fontFamilies"
			},
			"font-awesome-brands": {
				"value": "Font Awesome 6 Brands",
				"type": "fontFamilies"
			}
		},
		"fontWeights": {
			"Bold": {
				"value": "Negreta",
				"type": "fontWeights"
			},
			"Regular": {
				"value": "Normal",
				"type": "fontWeights"
			},
			"Light": {
				"value": "Normal",
				"type": "fontWeights"
			},
			"FontAwesome": {
				"Light": {
					"value": "Light",
					"type": "fontWeights"
				},
				"Regular": {
					"value": "Regular",
					"type": "fontWeights"
				},
				"Solid": {
					"value": "Solid",
					"type": "fontWeights"
				}
			},
			"Peto": {
				"Regular": {
					"value": "Regular",
					"type": "fontWeights"
				}
			}
		},
		"textCases": {
			"None": {
				"value": "none",
				"type": "textCase"
			},
			"Uppercase": {
				"value": "uppercase",
				"type": "textCase"
			}
		},
		"letterSpacings": {
			"Default": {
				"value": "0%",
				"type": "letterSpacing"
			}
		},
		"paragraphSpacings": {
			"Default": {
				"value": "$spacingSizes.Minus1",
				"type": "paragraphSpacing"
			},
			"Dense": {
				"value": "$spacingSizes.Minus5",
				"type": "paragraphSpacing"
			},
			"None": {
				"value": "0",
				"type": "paragraphSpacing"
			}
		},
		"textDecorations": {
			"None": {
				"value": "none",
				"type": "textDecoration"
			}
		},
		"lineWidthSizes": {
			"Default": {
				"value": "35",
				"type": "other"
			}
		},
		"lineWidths": {
			"Small": {
				"value": "$fontSizes.Small * $lineWidthSizes.Default",
				"type": "sizing"
			},
			"Default": {
				"value": "$fontSizes.Default * $lineWidthSizes.Default",
				"type": "sizing"
			},
			"Large": {
				"value": "$fontSizes.Large * $lineWidthSizes.Default",
				"type": "sizing"
			},
			"Larger": {
				"value": "$fontSizes.Larger * $lineWidthSizes.Default",
				"type": "sizing"
			},
			"Largest": {
				"value": "$fontSizes.Largest * $lineWidthSizes.Default",
				"type": "sizing"
			}
		},
		"Default": {
			"Regular, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Singleline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Regular, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Multiline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Bold, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Singleline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Bold, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Multiline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Light, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Singleline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Light, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Multiline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Regular, single line, dense": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Singleline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Dense",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Regular, multiple lines, dense": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Multiline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Dense",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			}
		},
		"Small": {
			"Regular, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Singleline.Small",
					"fontSize": "$fontSizes.Small",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Regular, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Multiline.Small",
					"fontSize": "$fontSizes.Small",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Bold, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Singleline.Small",
					"fontSize": "$fontSizes.Small",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Bold, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Multiline.Small",
					"fontSize": "$fontSizes.Small",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Bold uppercase, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Singleline.Small",
					"fontSize": "$fontSizes.Small",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.Uppercase"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			}
		},
		"Large": {
			"Regular, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Singleline.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Regular, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Multiline.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Bold, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Singleline.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Bold, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Multiline.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Light, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Singleline.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Light, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Multiline.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			}
		},
		"Larger": {
			"Regular, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Singleline.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Regular, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Multiline.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Bold, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Singleline.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Bold, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Multiline.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Light, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Singleline.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Light, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Multiline.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			}
		},
		"Largest": {
			"Regular, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Singleline.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Regular, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Regular",
					"lineHeight": "$lineHieghts.Multiline.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Bold, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Singleline.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Bold, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata",
					"fontWeight": "$fontWeights.Bold",
					"lineHeight": "$lineHieghts.Multiline.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			},
			"Light, single line": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Singleline.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for labels and headings"
			},
			"Light, multiple lines": {
				"value": {
					"fontFamily": "$fontFamilies.au-passata-light",
					"fontWeight": "$fontWeights.Light",
					"lineHeight": "$lineHieghts.Multiline.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.Default",
					"textDecoration": "$textDecorations.None",
					"textCase": "$textCases.None"
				},
				"type": "typography",
				"description": "Use this lineheight for paragraphs"
			}
		},
		"Peto": {
			"Default": {
				"value": {
					"fontFamily": "$fontFamilies.au-peto",
					"fontWeight": "$fontWeights.Peto.Regular",
					"lineHeight": "$fontSizes.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography"
			},
			"Small": {
				"value": {
					"fontFamily": "$fontFamilies.au-peto",
					"fontWeight": "$fontWeights.Peto.Regular",
					"lineHeight": "$fontSizes.Small",
					"fontSize": "$fontSizes.Small",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography"
			},
			"Large": {
				"value": {
					"fontFamily": "$fontFamilies.au-peto",
					"fontWeight": "$fontWeights.Peto.Regular",
					"lineHeight": "$fontSizes.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography"
			},
			"Larger": {
				"value": {
					"fontFamily": "$fontFamilies.au-peto",
					"fontWeight": "$fontWeights.Peto.Regular",
					"lineHeight": "$fontSizes.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography"
			},
			"Largest": {
				"value": {
					"fontFamily": "$fontFamilies.au-peto",
					"fontWeight": "$fontWeights.Peto.Regular",
					"lineHeight": "$fontSizes.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography"
			}
		},
		"FontAwesome": {
			"Default": {
				"value": {
					"fontFamily": "$fontFamilies.font-awesome-pro",
					"fontWeight": "$fontWeights.FontAwesome.Light",
					"lineHeight": "$lineHieghts.Singleline.Default",
					"fontSize": "$fontSizes.Default",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography",
				"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
			},
			"Small": {
				"value": {
					"fontFamily": "$fontFamilies.font-awesome-pro",
					"fontWeight": "$fontWeights.FontAwesome.Light",
					"lineHeight": "$lineHieghts.Singleline.Small",
					"fontSize": "$fontSizes.Small",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography",
				"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
			},
			"Large": {
				"value": {
					"fontFamily": "$fontFamilies.font-awesome-pro",
					"fontWeight": "$fontWeights.FontAwesome.Light",
					"lineHeight": "$lineHieghts.Singleline.Large",
					"fontSize": "$fontSizes.Large",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography",
				"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
			},
			"Larger": {
				"value": {
					"fontFamily": "$fontFamilies.font-awesome-pro",
					"fontWeight": "$fontWeights.FontAwesome.Light",
					"lineHeight": "$lineHieghts.Singleline.Larger",
					"fontSize": "$fontSizes.Larger",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography",
				"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
			},
			"Largest": {
				"value": {
					"fontFamily": "$fontFamilies.font-awesome-pro",
					"fontWeight": "$fontWeights.FontAwesome.Light",
					"lineHeight": "$lineHieghts.Singleline.Largest",
					"fontSize": "$fontSizes.Largest",
					"letterSpacing": "$letterSpacings.Default",
					"paragraphSpacing": "$paragraphSpacings.None",
					"textCase": "$textCases.None",
					"textDecoration": "$textDecorations.None"
				},
				"type": "typography",
				"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
			},
			"Solid": {
				"Default": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Solid",
						"lineHeight": "$lineHieghts.Singleline.Default",
						"fontSize": "$fontSizes.Default",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
				},
				"Small": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Solid",
						"lineHeight": "$lineHieghts.Singleline.Small",
						"fontSize": "$fontSizes.Small",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
				},
				"Large": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Solid",
						"lineHeight": "$lineHieghts.Singleline.Large",
						"fontSize": "$fontSizes.Large",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
				},
				"Larger": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Solid",
						"lineHeight": "$lineHieghts.Singleline.Larger",
						"fontSize": "$fontSizes.Larger",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
				},
				"Largest": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Solid",
						"lineHeight": "$lineHieghts.Singleline.Largest",
						"fontSize": "$fontSizes.Largest",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
				}
			},
			"Brands": {
				"Default": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-brands",
						"fontWeight": "$fontWeights.FontAwesome.Regular",
						"lineHeight": "$lineHieghts.Singleline.Default",
						"fontSize": "$fontSizes.Default",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this text style when you need an icon from Font Awesome Brands. Like twitter and linkedin."
				},
				"Small": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-brands",
						"fontWeight": "$fontWeights.FontAwesome.Regular",
						"lineHeight": "$lineHieghts.Singleline.Small",
						"fontSize": "$fontSizes.Small",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this text style when you need an icon from Font Awesome Brands. Like twitter and linkedin."
				},
				"Large": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-brands",
						"fontWeight": "$fontWeights.FontAwesome.Regular",
						"lineHeight": "$lineHieghts.Singleline.Large",
						"fontSize": "$fontSizes.Large",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this text style when you need an icon from Font Awesome Brands. Like twitter and linkedin."
				},
				"Larger": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-brands",
						"fontWeight": "$fontWeights.FontAwesome.Regular",
						"lineHeight": "$lineHieghts.Singleline.Larger",
						"fontSize": "$fontSizes.Larger",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this text style when you need an icon from Font Awesome Brands. Like twitter and linkedin."
				},
				"Largest": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-brands",
						"fontWeight": "$fontWeights.FontAwesome.Regular",
						"lineHeight": "$lineHieghts.Singleline.Largest",
						"fontSize": "$fontSizes.Largest",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "Use this text style when you need an icon from Font Awesome Brands. Like twitter and linkedin."
				}
			},
			"NoLineSpacing": {
				"Default": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Light",
						"lineHeight": "$fontSizes.Default",
						"fontSize": "$fontSizes.Default",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
				},
				"Small": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Light",
						"lineHeight": "$fontSizes.Small",
						"fontSize": "$fontSizes.Small",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
				},
				"Large": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Light",
						"lineHeight": "$fontSizes.Large",
						"fontSize": "$fontSizes.Large",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
				},
				"Larger": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Light",
						"lineHeight": "$fontSizes.Larger",
						"fontSize": "$fontSizes.Larger",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
				},
				"Largest": {
					"value": {
						"fontFamily": "$fontFamilies.font-awesome-pro",
						"fontWeight": "$fontWeights.FontAwesome.Light",
						"lineHeight": "$fontSizes.Largest",
						"fontSize": "$fontSizes.Largest",
						"letterSpacing": "$letterSpacings.Default",
						"paragraphSpacing": "$paragraphSpacings.None",
						"textCase": "$textCases.None",
						"textDecoration": "$textDecorations.None"
					},
					"type": "typography",
					"description": "This is the default icon weight, use this except when the icon is an interactive element that is active. Then use the solid weight icon."
				},
				"Solid": {
					"Default": {
						"value": {
							"fontFamily": "$fontFamilies.font-awesome-pro",
							"fontWeight": "$fontWeights.FontAwesome.Solid",
							"lineHeight": "$fontSizes.Default",
							"fontSize": "$fontSizes.Default",
							"letterSpacing": "$letterSpacings.Default",
							"paragraphSpacing": "$paragraphSpacings.None",
							"textCase": "$textCases.None",
							"textDecoration": "$textDecorations.None"
						},
						"type": "typography",
						"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
					},
					"Small": {
						"value": {
							"fontFamily": "$fontFamilies.font-awesome-pro",
							"fontWeight": "$fontWeights.FontAwesome.Solid",
							"lineHeight": "$fontSizes.Small",
							"fontSize": "$fontSizes.Small",
							"letterSpacing": "$letterSpacings.Default",
							"paragraphSpacing": "$paragraphSpacings.None",
							"textCase": "$textCases.None",
							"textDecoration": "$textDecorations.None"
						},
						"type": "typography",
						"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
					},
					"Large": {
						"value": {
							"fontFamily": "$fontFamilies.font-awesome-pro",
							"fontWeight": "$fontWeights.FontAwesome.Solid",
							"lineHeight": "$fontSizes.Large",
							"fontSize": "$fontSizes.Large",
							"letterSpacing": "$letterSpacings.Default",
							"paragraphSpacing": "$paragraphSpacings.None",
							"textCase": "$textCases.None",
							"textDecoration": "$textDecorations.None"
						},
						"type": "typography",
						"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
					},
					"Larger": {
						"value": {
							"fontFamily": "$fontFamilies.font-awesome-pro",
							"fontWeight": "$fontWeights.FontAwesome.Solid",
							"lineHeight": "$fontSizes.Larger",
							"fontSize": "$fontSizes.Larger",
							"letterSpacing": "$letterSpacings.Default",
							"paragraphSpacing": "$paragraphSpacings.None",
							"textCase": "$textCases.None",
							"textDecoration": "$textDecorations.None"
						},
						"type": "typography",
						"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
					},
					"Largest": {
						"value": {
							"fontFamily": "$fontFamilies.font-awesome-pro",
							"fontWeight": "$fontWeights.FontAwesome.Solid",
							"lineHeight": "$fontSizes.Largest",
							"fontSize": "$fontSizes.Largest",
							"letterSpacing": "$letterSpacings.Default",
							"paragraphSpacing": "$paragraphSpacings.None",
							"textCase": "$textCases.None",
							"textDecoration": "$textDecorations.None"
						},
						"type": "typography",
						"description": "Use this icon weight ONLY when the icon is an interactive element, that is active."
					}
				}
			}
		},
		"borderWidths": {
			"Default": {
				"value": "2",
				"description": "The default border width",
				"type": "borderWidth"
			},
			"Slim": {
				"value": "1",
				"description": "A slim border used between rows in table bodies",
				"type": "borderWidth"
			},
			"Utility": {
				"value": "6",
				"description": "Border width for elements width a utility colors as background.\n\nUse on only one side of the element.",
				"type": "borderWidth"
			},
			"Button": {
				"value": "$borderWidths.Utility / 2",
				"description": "Border width for elements width a utility colors as background.\n\nUse on only one side of the element.",
				"type": "borderWidth"
			},
			"NavItem": {
				"value": "4",
				"description": "Border width for active element in navigation.\n\nUse on only one side of the element.",
				"type": "borderWidth"
			},
			"Outline": {
				"value": "2",
				"description": "Border width for outline one elements that have focus.",
				"type": "borderWidth"
			}
		},
		"otherBorderWidths": {
			"0": {
				"value": "0",
				"type": "borderWidth"
			},
			"HalfPlus1": {
				"value": "$spacingSizes.Plus1 / 2",
				"type": "borderWidth"
			},
			"HalfMultilineDefault": {
				"value": "$lineHieghts.Multiline.Default / 2",
				"type": "borderWidth"
			},
			"Minus1": {
				"value": "$spacingSizes.Minus1",
				"type": "borderWidth"
			},
			"Zero": {
				"value": "$spacingSizes.Zero",
				"type": "borderWidth"
			},
			"Side": {
				"value": "$spacingSizes.Side",
				"type": "borderWidth"
			}
		},
		"Borders": {
			"Default color": {
				"Top": {
					"value": {
						"x": "0",
						"y": "$borderWidths.Default",
						"blur": "0",
						"spread": "0",
						"color": "$Primary.Border",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Right": {
					"value": {
						"x": "$borderWidths.Default * -1",
						"y": "0",
						"blur": "0",
						"spread": "0",
						"color": "$Primary.Border",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Bottom": {
					"value": {
						"x": "0",
						"y": "$borderWidths.Default * -1",
						"blur": "0",
						"spread": "0",
						"color": "$Primary.Border",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Left": {
					"value": {
						"x": "$borderWidths.Default",
						"y": "0",
						"blur": "0",
						"spread": "0",
						"color": "$Primary.Border",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Dark": {
					"Top": {
						"value": {
							"x": "0",
							"y": "$borderWidths.Default",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Primary.Border",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					},
					"Right": {
						"value": {
							"x": "$borderWidths.Default * -1",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Primary.Border",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					},
					"Bottom": {
						"value": {
							"x": "0",
							"y": "$borderWidths.Default * -1",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Primary.Border",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					},
					"Left": {
						"value": {
							"x": "$borderWidths.Default",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Primary.Border",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					}
				}
			},
			"Theme color": {
				"Top": {
					"value": {
						"x": "0",
						"y": "$borderWidths.Default",
						"blur": "0",
						"spread": "0",
						"color": "$Supplemental.Border-theme",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Right": {
					"value": {
						"x": "$borderWidths.Default * -1",
						"y": "0",
						"blur": "0",
						"spread": "0",
						"color": "$Supplemental.Border-theme",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Bottom": {
					"value": {
						"x": "0",
						"y": "$borderWidths.Default * -1",
						"blur": "0",
						"spread": "0",
						"color": "$Supplemental.Border-theme",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Left": {
					"value": {
						"x": "$borderWidths.Default",
						"y": "0",
						"blur": "0",
						"spread": "0",
						"color": "$Supplemental.Border-theme",
						"type": "innerShadow"
					},
					"type": "boxShadow"
				},
				"Dark": {
					"Top": {
						"value": {
							"x": "0",
							"y": "$borderWidths.Default",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Supplemental.Border-theme",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					},
					"Right": {
						"value": {
							"x": "$borderWidths.Default * -1",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Supplemental.Border-theme",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					},
					"Bottom": {
						"value": {
							"x": "0",
							"y": "$borderWidths.Default * -1",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Supplemental.Border-theme",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					},
					"Left": {
						"value": {
							"x": "$borderWidths.Default",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Dark.Supplemental.Border-theme",
							"type": "innerShadow"
						},
						"type": "boxShadow"
					}
				}
			},
			"Nav item": {
				"Hover": {
					"Right": {
						"value": {
							"x": "$borderWidths.NavItem * -1",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Primary.Border",
							"type": "innerShadow"
						},
						"type": "boxShadow",
						"description": "NOTE: You need to add a fill to a text element to use this"
					},
					"Bottom": {
						"value": {
							"x": "0",
							"y": "$borderWidths.NavItem * -1",
							"blur": "0",
							"spread": "0",
							"color": "$Primary.Border",
							"type": "innerShadow"
						},
						"type": "boxShadow",
						"description": "NOTE: You need to add a fill to a text element to use this"
					},
					"Left": {
						"value": {
							"x": "$borderWidths.NavItem",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Primary.Border",
							"type": "innerShadow"
						},
						"type": "boxShadow",
						"description": "NOTE: You need to add a fill to a text element to use this"
					}
				},
				"Active": {
					"Right": {
						"value": {
							"x": "$borderWidths.NavItem * -1",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Supplemental.Border-theme",
							"type": "innerShadow"
						},
						"type": "boxShadow",
						"description": "NOTE: You need to add a fill to a text element to use this"
					},
					"Bottom": {
						"value": {
							"x": "0",
							"y": "$borderWidths.NavItem * -1",
							"blur": "0",
							"spread": "0",
							"color": "$Supplemental.Border-theme",
							"type": "innerShadow"
						},
						"type": "boxShadow",
						"description": "NOTE: You need to add a fill to a text element to use this"
					},
					"Left": {
						"value": {
							"x": "$borderWidths.NavItem",
							"y": "0",
							"blur": "0",
							"spread": "0",
							"color": "$Supplemental.Border-theme",
							"type": "innerShadow"
						},
						"type": "boxShadow",
						"description": "NOTE: You need to add a fill to a text element to use this"
					}
				},
				"Dark": {
					"Hover": {
						"Right": {
							"value": {
								"x": "$borderWidths.NavItem * -1",
								"y": "0",
								"blur": "0",
								"spread": "0",
								"color": "$Dark.Primary.Border",
								"type": "innerShadow"
							},
							"type": "boxShadow",
							"description": "NOTE: You need to add a fill to a text element to use this"
						},
						"Bottom": {
							"value": {
								"x": "0",
								"y": "$borderWidths.NavItem * -1",
								"blur": "0",
								"spread": "0",
								"color": "$Dark.Primary.Border",
								"type": "innerShadow"
							},
							"type": "boxShadow",
							"description": "NOTE: You need to add a fill to a text element to use this"
						},
						"Left": {
							"value": {
								"x": "$borderWidths.NavItem",
								"y": "0",
								"blur": "0",
								"spread": "0",
								"color": "$Dark.Primary.Border",
								"type": "innerShadow"
							},
							"type": "boxShadow",
							"description": "NOTE: You need to add a fill to a text element to use this"
						}
					},
					"Active": {
						"Right": {
							"value": {
								"x": "$borderWidths.NavItem * -1",
								"y": "0",
								"blur": "0",
								"spread": "0",
								"color": "$Dark.Supplemental.Border-theme",
								"type": "innerShadow"
							},
							"type": "boxShadow",
							"description": "NOTE: You need to add a fill to a text element to use this"
						},
						"Bottom": {
							"value": {
								"x": "0",
								"y": "$borderWidths.NavItem * -1",
								"blur": "0",
								"spread": "0",
								"color": "$Dark.Supplemental.Border-theme",
								"type": "innerShadow"
							},
							"type": "boxShadow",
							"description": "NOTE: You need to add a fill to a text element to use this"
						},
						"Left": {
							"value": {
								"x": "$borderWidths.NavItem",
								"y": "0",
								"blur": "0",
								"spread": "0",
								"color": "$Dark.Supplemental.Border-theme",
								"type": "innerShadow"
							},
							"type": "boxShadow",
							"description": "NOTE: You need to add a fill to a text element to use this"
						}
					}
				}
			}
		}
	},
	"Cyan": {
		"Primary": {
			"Theme": {
				"value": "#37a0cb",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#7cc1dd",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#2b7ea0",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#2b7ea0",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#324d58",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#37a0cb",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#3496bf",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(20,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#3291b7",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#8dc9e2",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#215c75",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#65a1ba",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#143a4a",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#224655",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#8ea1a8",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#607a84",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#1c4150",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#325461",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#2a7a9a",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#49a9d0",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#4b6874",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#eaf2f5",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#49a9d0",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#49a9d0",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(20,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#56afd3",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#34819f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#c4cdd1",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#1c4150",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#305260",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#40606c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#c4cdd1",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#3882a1",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Turquoise": {
		"Primary": {
			"Theme": {
				"value": "#00aba4",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#61cbc7",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#00847f",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#00847f",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#275251",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#00aba4",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#009d97",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(0,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#009b95",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#78d3cf",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#03615e",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#4aa8a4",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#003e3c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#0f4a48",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#87a5a4",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#557e7d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#094543",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#225856",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#00817b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#12b1aa",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#3d6d6b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#e6f2f2",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#12b1aa",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#12b1aa",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(0,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#2fbbb5",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#0f8883",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#bfcece",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#094543",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#1e5654",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#316462",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#bfcece",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#0e8984",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Green": {
		"Primary": {
			"Theme": {
				"value": "#8bad3f",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#b4ca82",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#667e2e",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#667e2e",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#4a5336",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#8bad3f",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#7a9737",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(37,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#7f9d39",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#c0d295",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#4b5c24",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#8ea064",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#252e11",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#323b1f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#8e9383",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#676e59",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#2c3518",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#40482e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#596f28",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#8bad3f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#555c46",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#e4e8dc",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#8bad3f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#8bad3f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(37,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#a0bc61",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#617632",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#caccc6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#2c3518",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#3e472c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#4c543b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#caccc6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#6b8631",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Yellow": {
		"Primary": {
			"Theme": {
				"value": "#fabb00",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#fcd974",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#967000",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#967000",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#6f6033",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#fabb00",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#b28500",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(89,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#e4ab00",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#fde59e",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#6d5203",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#b29745",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#594200",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#644e10",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#bbb296",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#95875c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#5f4909",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#705c23",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#a77c00",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#fabb00",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#847341",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#0a0a0a",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#f6f2e6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#fabb00",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#fabb00",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(89,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#fcd35b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#ad8410",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#d2cbba",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#5f4909",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#6f5b21",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#7b6934",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#d2cbba",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#c59300",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Orange": {
		"Primary": {
			"Theme": {
				"value": "#ee7f00",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#f4af61",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#b46000",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#b46000",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#644728",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#ee7f00",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#d77200",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(85,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#d87300",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#f6bb78",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#834703",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#c98d47",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#552d00",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#603a10",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#af9c87",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#8d7354",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#5b3408",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#6b4921",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#af5e00",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#ef8409",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#7e5f3d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#f7efe6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#ef8409",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#ef8409",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(85,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#f1972f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#b4670e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#d4cabf",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#5b3408",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#6a471f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#755630",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#d4cabf",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#b96607",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Red": {
		"Primary": {
			"Theme": {
				"value": "#e2001a",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#f0828f",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#e2001a",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#e2001a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#fefefe",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#562e33",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#e2001a",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#e2001a",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(106,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#ca0017",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#f28f9a",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#a60316",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#ee6776",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#6a000c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#781722",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#bc8c91",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#a15e65",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#720d18",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#832c36",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#b40015",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#ef707e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#944850",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#eec4c8",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#ef707e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#ef707e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(106,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#e8384c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#bb1629",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#ddc6c9",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#720d18",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#832a34",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#8d3c45",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#ddc6c9",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#b85661",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Magenta": {
		"Primary": {
			"Theme": {
				"value": "#e2007a",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#f07cbb",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#e2007a",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#e2007a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#fefefe",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#562c43",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#e2007a",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#e2007a",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(103,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#cb006d",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#f28ac2",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#a7035c",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#ee68b0",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#670038",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#741649",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#ba8ca5",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#9f5d81",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#6e0d42",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#802b59",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#b30061",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#ee6bb2",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#91476f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#eec8dd",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#ee6bb2",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#ee6bb2",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(103,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#e83796",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#b9166e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#dcc5d2",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#6e0d42",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#7f2957",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#8a3b65",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#dcc5d2",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#b75289",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Purple": {
		"Primary": {
			"Theme": {
				"value": "#655a9f",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#a59ec7",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#655a9f",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#655a9f",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#fefefe",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#3b3847",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#655a9f",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#655a9f",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(47,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#594f8c",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#ada7cc",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#463f6d",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#867eb4",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#2f2a4b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#3b3756",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#9693a4",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#6f6c82",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#353151",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#494561",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#50477e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#9790be",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#5d5a73",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#c1bdd1",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#9790be",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#9790be",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(47,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#7268a7",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#564e83",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#cccad3",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#353151",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#474361",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#55516b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#cccad3",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#746e92",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Blue": {
		"Primary": {
			"Theme": {
				"value": "#003d73",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#8ba6bf",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#003d73",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#003d73",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#fefefe",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#323b44",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#003d73",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#376791",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(0,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#00315c",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#95aec5",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#052643",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#2b5e8a",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#002241",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#11314d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#778a9a",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#4e657b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#092a48",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#213f5a",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#00325e",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#678cac",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#39546c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#839bb0",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#678cac",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#678cac",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(0,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#114a7d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#093964",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#c5ccd3",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#092a48",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#1f3e58",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#2f4b64",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#c5ccd3",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#4e6982",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Mit Studie": {
		"Primary": {
			"Theme": {
				"value": "#45be55",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#8ed797",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#31863c",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#31863c",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#3c5a40",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#45be55",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#3aa048",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(20,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#3fac4d",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#a2dea9",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#26622e",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#6aa771",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#143719",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#224326",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#8a9c8d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#5d7661",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#1c3e20",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#325136",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#2d7b37",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#45be55",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#49654d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#e7f0e8",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#45be55",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#45be55",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(20,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#6ccc78",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#378241",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#c5cdc6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#1c3e20",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#304f33",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#405d43",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#c5cdc6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#369342",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Omnibus": {
		"Primary": {
			"Theme": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#a3a3a3",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#fefefe",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#3a3a3a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#010101",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(4,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#010101",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#acacac",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#353535",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#040404",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#1c1c1c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#767676",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#535353",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#131313",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#2d2d2d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#080808",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#767676",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#424242",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#787878",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#767676",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#767676",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(4,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#1f1f1f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#161616",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#cbcbcb",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#131313",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#2b2b2b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#3a3a3a",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#cbcbcb",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#565656",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Brightspace": {
		"Primary": {
			"Theme": {
				"value": "#006fbf",
				"type": "color",
				"description": "Intended use: Background color\n\nThe brand color. Used for e.g. the background color of a primary button. Use theme-foreground as foreground color."
			},
			"Theme-secondary": {
				"value": "#68a9d9",
				"type": "color",
				"description": "Intended use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
			}
		},
		"Additional foregrounds": {
			"Foreground-theme": {
				"value": "#006fbf",
				"type": "color",
				"description": "Intended use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
			},
			"Foreground-branding": {
				"value": "#006fbf",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nBranding color for the site-logo, the university logo and seal. The same as foreground in dark themes and the same as foreground-theme in normal themes."
			},
			"Theme, Foreground": {
				"value": "#fefefe",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme as background color. Will be light or dark for best contrast ratio."
			},
			"Theme-secondary, Foreground": {
				"value": "#0a0a0a",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
			},
			"Theme-secondary, Foreground-secondary": {
				"value": "#253c4e",
				"type": "color",
				"description": "Inteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
			}
		},
		"Supplemental": {
			"Border-theme": {
				"value": "#006fbf",
				"type": "color",
				"description": "Inteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
			},
			"Border-text-link": {
				"value": "#006fbf",
				"type": "color",
				"description": "Inteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
			},
			"Overlay": {
				"value": "rgba(0,",
				"type": "color",
				"description": "Inteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
			}
		},
		"Hovers": {
			"Theme, hover": {
				"value": "#0062a9",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme as background color."
			},
			"Theme-secondary, hover": {
				"value": "#76b1dc",
				"type": "color",
				"description": "Inteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
			},
			"Foreground-branding, hover": {
				"value": "#035088",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
			},
			"Foreground-theme, hover": {
				"value": "#4395d0",
				"type": "color",
				"description": "Inteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
			}
		},
		"Fades": {
			"Theme": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme, 0) 0%, $Primary.Theme 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque theme color on the left."
				}
			},
			"Theme-secondary": {
				"Top": {
					"value": "linear-gradient(0deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
				},
				"Right": {
					"value": "linear-gradient(90deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
				},
				"Bottom": {
					"value": "linear-gradient(180deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
				},
				"Left": {
					"value": "linear-gradient(270deg, rgba($Primary.Theme-secondary, 0) 0%, $Primary.Theme-secondary 100%)",
					"type": "color",
					"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
				}
			},
			"Foregrounds": {
				"Foreground-branding": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Foreground-branding}, 0) 0%, {Additional foregrounds.Foreground-branding} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground branding color at the bottom."
				},
				"Theme, Foreground": {
					"value": "linear-gradient(180deg, rgba({Additional foregrounds.Theme, Foreground}, 0) 0%, {Additional foregrounds.Theme, Foreground} 100%)",
					"type": "color",
					"description": "Fades from transparent at the top into a fully opaque foreground color for theme at the bottom."
				}
			}
		},
		"Dark": {
			"Primary": {
				"Background": {
					"value": "#003257",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nThe background of the themed element. On the body-element this will be the page's background color. Use foreground as foreground color."
				},
				"Background-secondary": {
					"value": "#103f61",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA secondary background color that differs slightly frombackground. Used for e.g. framing elements in a box. Use foreground as foreground color. background is also used as background color for visually disabled, interactive element."
				},
				"Foreground-secondary": {
					"value": "#829aad",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for secondary text. Has slightly lower contrast to background than foreground."
				},
				"Border": {
					"value": "#52748d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nThe default border color."
				},
				"Background-input": {
					"value": "#08395d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for input elements that take keyboard input, like text-fields and textareas. In normal themes this is the same as background, in dark themes it is slighty ligther. Use foreground as foreground color, when the field is enabled, foreground-disabled when the field is visually disabled."
				},
				"Interactive": {
					"value": "#214d6d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nBackground color for interactive elements, that are controlled by clickevents, like select, radiobuttons and checkboxes. It is also used as background color for secondary buttons. Use foreground as foreground color, when the element is enabled, foreground-disabled when the element is visually disabled."
				},
				"Theme-secondary": {
					"value": "#005797",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Background color\n\nA lighter version of the brand color. E.g. used for background layer in Peto based artwork."
				}
			},
			"Additional foregrounds": {
				"Foreground-theme": {
					"value": "#529ed4",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA foreground color for text to be branded with the brand color. If theme has sufficient contrast ratio to background, foreground-theme is the same as theme. Otherwise it is slighty darker or lighter to comply with accessibility guidelines."
				},
				"Foreground-disabled": {
					"value": "#3c627f",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nA text color for visually disabled elements like input and buttons."
				},
				"Theme-secondary, Foreground": {
					"value": "#fefefe",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for text on elements with theme-secondary as background color."
				},
				"Theme-secondary, Foreground-secondary": {
					"value": "#b2cde0",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Foreground color\n\nColor for secondary text on elements with theme-secondary as background color."
				}
			},
			"Supplemental": {
				"Border-theme": {
					"value": "#529ed4",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Border color\n\nA branded border color. Used for e.g. active elements in navigation."
				},
				"Border-text-link": {
					"value": "#529ed4",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Underling of links\n\nColor for underlining links in text. An adjusted version of theme for securing sufficient contrast to background."
				},
				"Overlay": {
					"value": "rgba(0,",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Blur behind modal views\n\nBranded semi-transparent color used for overlays behind modal views. Has no defined foreground color, as color is not intended for use as text background."
				}
			},
			"Hovers": {
				"Theme, hover": {
					"value": "#1a7ec5",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme as background color."
				},
				"Theme-secondary, hover": {
					"value": "#0b5e9c",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with theme-secondary as background color."
				},
				"Foreground-branding, hover": {
					"value": "#c2cdd6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for interactive elements with foreground-branding as text color, e.g. the site logo."
				},
				"Background, hover": {
					"value": "#08395d",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background as background color."
				},
				"Background-secondary, hover": {
					"value": "#204c6b",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with background-secondary as background color."
				},
				"Interactive, hover": {
					"value": "#305977",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of background color\n\nHover color for elements with interactive as background color."
				},
				"Foreground, hover": {
					"value": "#c2cdd6",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground as text color."
				},
				"Foreground-theme, hover": {
					"value": "#3f79a3",
					"type": "color",
					"description": "Dark theme variant\n\nInteded use: Hover of foreground color\n\nHover color for elements with foreground-theme as text color."
				}
			},
			"Fades": {
				"Background": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background, 0) 0%, $Dark.Primary.Background 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque background color on the left."
					}
				},
				"Background-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary background color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary background color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary background color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Background-secondary, 0) 0%, $Dark.Primary.Background-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary background color on the left."
					}
				},
				"Theme-secondary": {
					"Top": {
						"value": "linear-gradient(0deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the bottom into a fully opaque secondary theme color at the top."
					},
					"Right": {
						"value": "linear-gradient(90deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the left to a fully opaque secondary theme color on the right."
					},
					"Bottom": {
						"value": "linear-gradient(180deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent at the top into a fully opaque secondary theme color at the bottom."
					},
					"Left": {
						"value": "linear-gradient(270deg, rgba($Dark.Primary.Theme-secondary, 0) 0%, $Dark.Primary.Theme-secondary 100%)",
						"type": "color",
						"description": "Fades from transparent on the right into a fully opaque secondary theme color on the left."
					}
				}
			}
		}
	},
	"Medium screen": {
		"fontSizes": {
			"Small": {
				"value": "13",
				"type": "fontSizes"
			},
			"Default": {
				"value": "17",
				"type": "fontSizes"
			},
			"Large": {
				"value": "21",
				"type": "fontSizes"
			},
			"Larger": {
				"value": "27",
				"type": "fontSizes"
			},
			"Largest": {
				"value": "34",
				"type": "fontSizes"
			}
		},
		"lineHieghts": {
			"Singleline": {
				"Small": {
					"value": "20",
					"type": "lineHeights"
				},
				"Default": {
					"value": "24",
					"type": "lineHeights"
				},
				"Large": {
					"value": "28",
					"type": "lineHeights"
				},
				"Larger": {
					"value": "34",
					"type": "lineHeights"
				},
				"Largest": {
					"value": "42",
					"type": "lineHeights"
				}
			},
			"Multiline": {
				"Small": {
					"value": "26",
					"type": "lineHeights"
				},
				"Default": {
					"value": "30",
					"type": "lineHeights"
				},
				"Large": {
					"value": "35",
					"type": "lineHeights"
				},
				"Larger": {
					"value": "41",
					"type": "lineHeights"
				},
				"Largest": {
					"value": "49",
					"type": "lineHeights"
				}
			}
		},
		"spacingSizes": {
			"Minus5": {
				"value": "5",
				"description": "This is the smallest size",
				"type": "other"
			},
			"Minus4": {
				"value": "7",
				"type": "other"
			},
			"Minus3": {
				"value": "10",
				"type": "other"
			},
			"Minus2": {
				"value": "15",
				"type": "other"
			},
			"Minus1": {
				"value": "23",
				"type": "other"
			},
			"Zero": {
				"value": "34",
				"description": "Same size as the h1 hieght",
				"type": "other"
			},
			"Plus1": {
				"value": "51",
				"type": "other"
			},
			"Plus2": {
				"value": "77",
				"description": "This is the largest size",
				"type": "other"
			},
			"Side": {
				"value": "34",
				"description": "The size used for page vertical margins",
				"type": "other"
			}
		}
	},
	"Wide screen": {
		"fontSizes": {
			"Small": {
				"value": "13",
				"type": "fontSizes"
			},
			"Default": {
				"value": "18",
				"type": "fontSizes"
			},
			"Large": {
				"value": "24",
				"type": "fontSizes"
			},
			"Larger": {
				"value": "33",
				"type": "fontSizes"
			},
			"Largest": {
				"value": "45",
				"type": "fontSizes"
			}
		},
		"lineHieghts": {
			"Singleline": {
				"Small": {
					"value": "19",
					"type": "lineHeights"
				},
				"Default": {
					"value": "25",
					"type": "lineHeights"
				},
				"Large": {
					"value": "32",
					"type": "lineHeights"
				},
				"Larger": {
					"value": "41",
					"type": "lineHeights"
				},
				"Largest": {
					"value": "55",
					"type": "lineHeights"
				}
			},
			"Multiline": {
				"Small": {
					"value": "26",
					"type": "lineHeights"
				},
				"Default": {
					"value": "31",
					"type": "lineHeights"
				},
				"Large": {
					"value": "38",
					"type": "lineHeights"
				},
				"Larger": {
					"value": "48",
					"type": "lineHeights"
				},
				"Largest": {
					"value": "61",
					"type": "lineHeights"
				}
			}
		},
		"spacingSizes": {
			"Minus5": {
				"value": "5",
				"description": "This is the smallest size",
				"type": "other"
			},
			"Minus4": {
				"value": "7",
				"type": "other"
			},
			"Minus3": {
				"value": "11",
				"type": "other"
			},
			"Minus2": {
				"value": "18",
				"type": "other"
			},
			"Minus1": {
				"value": "28",
				"type": "other"
			},
			"Zero": {
				"value": "45",
				"description": "Same size as the h1 hieght",
				"type": "other"
			},
			"Plus1": {
				"value": "72",
				"type": "other"
			},
			"Plus2": {
				"value": "116",
				"description": "This is the largest size",
				"type": "other"
			},
			"Side": {
				"value": "45",
				"description": "The size used for page vertical margins",
				"type": "other"
			}
		}
	}
}