@amsterdam/design-system-tokens 0.1.8 → 0.3.0

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 27 Nov 2023 11:07:10 GMT
+ * Generated on Fri, 22 Dec 2023 12:50:01 GMT
  */
 
 export const amsterdamColorPrimaryBlack = "#000000";
@@ -28,34 +28,49 @@ export const amsterdamProportion2xWide = "32 / 9";
 export const amsterdamTypographyFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamTypographyFontWeightNormal = 400;
 export const amsterdamTypographyFontWeightBold = 800;
-export const amsterdamTypographyTextLevel0NarrowFontSize = "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)";
-export const amsterdamTypographyTextLevel0WideFontSize = "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)";
-export const amsterdamTypographyTextLevel0LineHeight = "1.1";
-export const amsterdamTypographyTextLevel1NarrowFontSize = "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)";
-export const amsterdamTypographyTextLevel1WideFontSize = "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)";
-export const amsterdamTypographyTextLevel1LineHeight = "1.2";
-export const amsterdamTypographyTextLevel2NarrowFontSize = "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)";
-export const amsterdamTypographyTextLevel2WideFontSize = "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)";
-export const amsterdamTypographyTextLevel2LineHeight = "1.3";
-export const amsterdamTypographyTextLevel3NarrowFontSize = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
-export const amsterdamTypographyTextLevel3WideFontSize = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
-export const amsterdamTypographyTextLevel3LineHeight = "1.4";
-export const amsterdamTypographyTextLevel4NarrowFontSize = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
-export const amsterdamTypographyTextLevel4WideFontSize = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
-export const amsterdamTypographyTextLevel4LineHeight = "1.4";
-export const amsterdamTypographyTextLevel5NarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
-export const amsterdamTypographyTextLevel5WideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
-export const amsterdamTypographyTextLevel5LineHeight = "1.5";
-export const amsterdamTypographyTextLevel6NarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamTypographyTextLevel6WideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
-export const amsterdamTypographyTextLevel6LineHeight = "1.6";
-export const amsterdamTypographyTextLevel7NarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamTypographyTextLevel7WideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
-export const amsterdamTypographyTextLevel7LineHeight = "1.6";
+export const amsterdamTypographySpaciousTextLevel0FontSize = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
+export const amsterdamTypographySpaciousTextLevel0LineHeight = "1.15";
+export const amsterdamTypographySpaciousTextLevel1FontSize = "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)";
+export const amsterdamTypographySpaciousTextLevel1LineHeight = "1.2";
+export const amsterdamTypographySpaciousTextLevel2FontSize = "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)";
+export const amsterdamTypographySpaciousTextLevel2LineHeight = "1.25";
+export const amsterdamTypographySpaciousTextLevel3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
+export const amsterdamTypographySpaciousTextLevel3LineHeight = "1.3";
+export const amsterdamTypographySpaciousTextLevel4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamTypographySpaciousTextLevel4LineHeight = "1.5";
+export const amsterdamTypographySpaciousTextLevel5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamTypographySpaciousTextLevel5LineHeight = "1.6";
+export const amsterdamTypographySpaciousTextLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamTypographySpaciousTextLevel6LineHeight = "1.6";
+export const amsterdamTypographyCompactTextLevel0FontSize = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
+export const amsterdamTypographyCompactTextLevel0LineHeight = "1.15";
+export const amsterdamTypographyCompactTextLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
+export const amsterdamTypographyCompactTextLevel1LineHeight = "1.2";
+export const amsterdamTypographyCompactTextLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
+export const amsterdamTypographyCompactTextLevel2LineHeight = "1.25";
+export const amsterdamTypographyCompactTextLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
+export const amsterdamTypographyCompactTextLevel3LineHeight = "1.3";
+export const amsterdamTypographyCompactTextLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamTypographyCompactTextLevel4LineHeight = "1.5";
+export const amsterdamTypographyCompactTextLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamTypographyCompactTextLevel5LineHeight = "1.6";
+export const amsterdamTypographyCompactTextLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamTypographyCompactTextLevel6LineHeight = "1.6";
 export const amsterdamBorderWidthSm = "1px";
 export const amsterdamBorderWidthMd = "2px";
 export const amsterdamBorderWidthLg = "3px";
 export const amsterdamFocusOutlineOffset = "2px";
+export const amsterdamLinkAppearanceColor = "#004699";
+export const amsterdamLinkAppearanceTextDecorationThickness = "0.125rem";
+export const amsterdamLinkAppearanceTextUnderlineOffset = "0.375rem";
+export const amsterdamLinkAppearanceHoverColor = "#102E62";
+export const amsterdamLinkAppearanceOnBackgroundDarkColor = "#ffffff";
+export const amsterdamLinkAppearanceOnBackgroundLightColor = "#000000";
+export const amsterdamLinkAppearanceRegularTextDecorationLine = "underline";
+export const amsterdamLinkAppearanceRegularHoverTextDecorationThickness = "0.1875rem";
+export const amsterdamLinkAppearanceRegularHoverTextUnderlineOffset = "0.3125rem";
+export const amsterdamLinkAppearanceSubtleTextDecorationLine = "none";
+export const amsterdamLinkAppearanceSubtleHoverTextDecorationLine = "underline";
 export const amsterdamSpacingInsetSm = "0.5rem";
 export const amsterdamSpacingInsetMd = "1rem";
 export const amsterdamSpacingInsetLg = "1.5rem";
@@ -64,10 +79,11 @@ export const amsterdamAccordionButtonColor = "#004699";
 export const amsterdamAccordionButtonFocusOutlineOffset = "2px";
 export const amsterdamAccordionButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamAccordionButtonFontWeight = 800;
-export const amsterdamAccordionButtonLineHeight = "1.5";
-export const amsterdamAccordionButtonNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
-export const amsterdamAccordionButtonWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
 export const amsterdamAccordionButtonHoverBoxShadow = "inset 0 0 0 2px #767676";
+export const amsterdamAccordionButtonSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamAccordionButtonSpaciousLineHeight = "1.6";
+export const amsterdamAccordionButtonCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamAccordionButtonCompactLineHeight = "1.6";
 export const amsterdamAlertBackgroundColor = "#FFE600";
 export const amsterdamAlertBorder = "4px solid #FFE600";
 export const amsterdamAlertGap = "1rem";
@@ -78,9 +94,10 @@ export const amsterdamAlertPaddingInlineEnd = "1.5rem";
 export const amsterdamAlertTitleColor = "#000000";
 export const amsterdamAlertTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamAlertTitleFontWeight = 800;
-export const amsterdamAlertTitleLineHeight = "1.5";
-export const amsterdamAlertTitleNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
-export const amsterdamAlertTitleWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
+export const amsterdamAlertTitleSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamAlertTitleSpaciousLineHeight = "1.6";
+export const amsterdamAlertTitleCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamAlertTitleCompactLineHeight = "1.6";
 export const amsterdamAlertErrorBackgroundColor = "#ffffff";
 export const amsterdamAlertErrorBorderColor = "#EC0000";
 export const amsterdamAlertSuccessBackgroundColor = "#ffffff";
@@ -98,29 +115,39 @@ export const amsterdamBlockquoteColor = "#000000";
 export const amsterdamBlockquoteFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamBlockquoteFontWeight = 800;
 export const amsterdamBlockquoteInverseColor = "#ffffff";
-export const amsterdamBlockquoteLineHeight = "1.4";
-export const amsterdamBlockquoteNarrowFontSize = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
-export const amsterdamBlockquoteWideFontSize = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
-export const amsterdamBreadcrumbColor = "#004699";
+export const amsterdamBlockquoteSpaciousFontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
+export const amsterdamBlockquoteSpaciousLineHeight = "1.3";
+export const amsterdamBlockquoteCompactFontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
+export const amsterdamBlockquoteCompactLineHeight = "1.3";
 export const amsterdamBreadcrumbFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamBreadcrumbFontWeight = 400;
-export const amsterdamBreadcrumbLineHeight = "1.6";
-export const amsterdamBreadcrumbNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamBreadcrumbWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
+export const amsterdamBreadcrumbSeparatorBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")";
+export const amsterdamBreadcrumbItemLinkColor = "#004699";
 export const amsterdamBreadcrumbItemLinkOutlineOffset = "2px";
+export const amsterdamBreadcrumbItemLinkTextDecorationLine = "none";
+export const amsterdamBreadcrumbItemLinkTextDecorationThickness = "0.125rem";
+export const amsterdamBreadcrumbItemLinkTextUnderlineOffset = "0.375rem";
 export const amsterdamBreadcrumbItemLinkHoverColor = "#102E62";
-export const amsterdamBreadcrumbItemLinkHoverBoxShadow = "inset 0 -2px 0 0 #102E62";
-export const amsterdamBreadcrumbItemLinkFocusColor = "#102E62";
-export const amsterdamBreadcrumbItemLinkFocusTextDecoration = "underline";
-export const amsterdamButtonNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamButtonWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
+export const amsterdamBreadcrumbItemLinkHoverTextDecorationLine = "underline";
+export const amsterdamBreadcrumbSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamBreadcrumbSpaciousLineHeight = "1.6";
+export const amsterdamBreadcrumbCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamBreadcrumbCompactLineHeight = "1.6";
+export const amsterdamButtonSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamButtonSpaciousLineHeight = "1.6";
+export const amsterdamButtonCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamButtonCompactLineHeight = "1.6";
 export const amsterdamButtonSecondaryBoxShadow = "inset 0 0 0 2px #004699";
 export const amsterdamButtonSecondaryHoverBoxShadow = "inset 0 0 0 3px #102E62";
 export const amsterdamButtonSecondaryDisabledBoxShadow = "inset 0 0 0 2px #B4B4B4";
 export const amsterdamButtonSecondaryFocusBoxShadow = "inset 0 0 0 2px #004699";
-export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #767676";
+export const amsterdamButtonTertiaryHoverBoxShadow = "inset 0 0 0 2px #102E62";
 export const amsterdamCardLinkColor = "#004699";
+export const amsterdamCardLinkTextDecorationLine = "none";
+export const amsterdamCardLinkTextDecorationThickness = "0.125rem";
+export const amsterdamCardLinkTextUnderlineOffset = "0.375rem";
 export const amsterdamCardLinkHoverColor = "#102E62";
+export const amsterdamCardLinkHoverTextDecorationLine = "underline";
 export const amsterdamCardOutlineOffset = "2px";
 export const amsterdamCheckboxColor = "#000000";
 export const amsterdamCheckboxCheckmarkBorderColor = "#004699";
@@ -140,26 +167,25 @@ export const amsterdamCheckboxCheckmarkInvalidIndeterminateBackgroundColor = "#E
 export const amsterdamCheckboxCheckmarkInvalidIndeterminateHoverBackgroundColor = "#EC0000";
 export const amsterdamCheckboxCheckmarkIndeterminateBackgroundColor = "#004699";
 export const amsterdamCheckboxCheckmarkIndeterminateHoverBackgroundColor = "#102E62";
-export const amsterdamCheckboxCheckmarkNarrowSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamCheckboxCheckmarkWideSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
-export const amsterdamCheckboxCheckmarkMultiplier = "1.6";
 export const amsterdamCheckboxDisabledColor = "#767676";
 export const amsterdamCheckboxFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamCheckboxFontWeight = 400;
 export const amsterdamCheckboxHoverColor = "#102E62";
 export const amsterdamCheckboxOutlineOffset = "2px";
-export const amsterdamCheckboxLineHeight = "1.6";
-export const amsterdamCheckboxNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamCheckboxWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
+export const amsterdamCheckboxSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamCheckboxSpaciousLineHeight = "1.6";
+export const amsterdamCheckboxCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamCheckboxCompactLineHeight = "1.6";
 export const amsterdamDialogBackgroundColor = "#ffffff";
 export const amsterdamDialogBorder = "0";
 export const amsterdamDialogMaxInlineSize = "min(87.69vw, 45rem)";
 export const amsterdamDialogTitleColor = "#000000";
 export const amsterdamDialogTitleFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamDialogTitleFontWeight = 800;
-export const amsterdamDialogTitleLineHeight = "1.5";
-export const amsterdamDialogTitleNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
-export const amsterdamDialogTitleWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
+export const amsterdamDialogTitleSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamDialogTitleSpaciousLineHeight = "1.6";
+export const amsterdamDialogTitleCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamDialogTitleCompactLineHeight = "1.6";
 export const amsterdamDialogBackdropBackground = "#0006";
 export const amsterdamDialogCloseBackgroundColor = "transparent";
 export const amsterdamDialogCloseFill = "#000000";
@@ -175,83 +201,94 @@ export const amsterdamDialogFooterPaddingBlock = "1.5rem 0";
 export const amsterdamFormLabelColor = "#000000";
 export const amsterdamFormLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamFormLabelFontWeight = 800;
-export const amsterdamFormLabelLineHeight = "1.6";
-export const amsterdamFormLabelNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamFormLabelWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
+export const amsterdamFormLabelSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamFormLabelSpaciousLineHeight = "1.5";
+export const amsterdamFormLabelCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamFormLabelCompactLineHeight = "1.5";
 export const amsterdamGridColumnCount = "4";
-export const amsterdamGridDensityLowGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
-export const amsterdamGridDensityLowPaddingInline = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"; // Equals 1.5 times the gap.
-export const amsterdamGridDensityHighGap = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
-export const amsterdamGridDensityHighPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Equals the gap.
+export const amsterdamGridSpaciousGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)"; // Grows from 16px at 320px wide to 56px at 1600px wide.
+export const amsterdamGridSpaciousPaddingInline = "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)"; // Equals 1.5 times the gap.
+export const amsterdamGridCompactGap = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Grows from 16px at 1088px wide to 40px at 2624px wide.
+export const amsterdamGridCompactPaddingInline = "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)"; // Equals the gap.
 export const amsterdamGridMediumColumnCount = "8";
 export const amsterdamGridWideColumnCount = "12";
-export const amsterdamHeading1LineHeight = "1.2";
-export const amsterdamHeading1NarrowFontSize = "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)";
-export const amsterdamHeading1WideFontSize = "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)";
-export const amsterdamHeading2LineHeight = "1.3";
-export const amsterdamHeading2NarrowFontSize = "clamp(1.75rem, calc(1.75rem + (0.5 * (100vw - 20rem)) / 33.3125), 2.25rem)";
-export const amsterdamHeading2WideFontSize = "clamp(2.25rem, calc(2.25rem + (0.25 * (100vw - 53.375rem)) / 36.625), 2.5rem)";
-export const amsterdamHeading3LineHeight = "1.4";
-export const amsterdamHeading3NarrowFontSize = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
-export const amsterdamHeading3WideFontSize = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
-export const amsterdamHeading4LineHeight = "1.4";
-export const amsterdamHeading4NarrowFontSize = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
-export const amsterdamHeading4WideFontSize = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
+export const amsterdamHeaderColumnGap = "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)";
 export const amsterdamHeadingColor = "#000000";
 export const amsterdamHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamHeadingFontWeight = 800;
 export const amsterdamHeadingInverseColor = "#ffffff";
-export const amsterdamHighlightBlueBackgroundColor = "#004699";
-export const amsterdamHighlightDarkGreenBackgroundColor = "#00A03C";
-export const amsterdamHighlightGreenBackgroundColor = "#BED200";
-export const amsterdamHighlightLightBlueBackgroundColor = "#009DEC";
-export const amsterdamHighlightMagentaBackgroundColor = "#E50082";
-export const amsterdamHighlightOrangeBackgroundColor = "#FF9100";
-export const amsterdamHighlightPurpleBackgroundColor = "#A00078";
-export const amsterdamHighlightYellowBackgroundColor = "#FFE600";
-export const amsterdamIconSize3IconSizeNarrow = "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)";
-export const amsterdamIconSize3IconSizeWide = "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)";
-export const amsterdamIconSize3ContainerMultiplier = "1.4";
-export const amsterdamIconSize4IconSizeNarrow = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
-export const amsterdamIconSize4IconSizeWide = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
-export const amsterdamIconSize4ContainerMultiplier = "1.4";
-export const amsterdamIconSize5IconSizeNarrow = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
-export const amsterdamIconSize5IconSizeWide = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
-export const amsterdamIconSize5ContainerMultiplier = "1.5";
-export const amsterdamIconSize6IconSizeNarrow = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamIconSize6IconSizeWide = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
-export const amsterdamIconSize6ContainerMultiplier = "1.6";
-export const amsterdamIconSize7IconSizeNarrow = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamIconSize7IconSizeWide = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
-export const amsterdamIconSize7ContainerMultiplier = "1.6";
+export const amsterdamHeadingSpaciousLevel1LineHeight = "1.2";
+export const amsterdamHeadingSpaciousLevel1FontSize = "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)";
+export const amsterdamHeadingSpaciousLevel2LineHeight = "1.25";
+export const amsterdamHeadingSpaciousLevel2FontSize = "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)";
+export const amsterdamHeadingSpaciousLevel3LineHeight = "1.3";
+export const amsterdamHeadingSpaciousLevel3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
+export const amsterdamHeadingSpaciousLevel4LineHeight = "1.5";
+export const amsterdamHeadingSpaciousLevel4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamHeadingSpaciousLevel5LineHeight = "1.6";
+export const amsterdamHeadingSpaciousLevel5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamHeadingSpaciousLevel6LineHeight = "1.6";
+export const amsterdamHeadingSpaciousLevel6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamHeadingCompactLevel1LineHeight = "1.2";
+export const amsterdamHeadingCompactLevel1FontSize = "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)";
+export const amsterdamHeadingCompactLevel2LineHeight = "1.25";
+export const amsterdamHeadingCompactLevel2FontSize = "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)";
+export const amsterdamHeadingCompactLevel3LineHeight = "1.3";
+export const amsterdamHeadingCompactLevel3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
+export const amsterdamHeadingCompactLevel4LineHeight = "1.5";
+export const amsterdamHeadingCompactLevel4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamHeadingCompactLevel5LineHeight = "1.6";
+export const amsterdamHeadingCompactLevel5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamHeadingCompactLevel6LineHeight = "1.6";
+export const amsterdamHeadingCompactLevel6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamIconSpaciousSize3FontSize = "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)";
+export const amsterdamIconSpaciousSize3LineHeight = "1.3";
+export const amsterdamIconSpaciousSize4FontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamIconSpaciousSize4LineHeight = "1.5";
+export const amsterdamIconSpaciousSize5FontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamIconSpaciousSize5LineHeight = "1.6";
+export const amsterdamIconSpaciousSize6FontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamIconSpaciousSize6LineHeight = "1.6";
+export const amsterdamIconCompactSize3FontSize = "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)";
+export const amsterdamIconCompactSize3LineHeight = "1.3";
+export const amsterdamIconCompactSize4FontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamIconCompactSize4LineHeight = "1.5";
+export const amsterdamIconCompactSize5FontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamIconCompactSize5LineHeight = "1.6";
+export const amsterdamIconCompactSize6FontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamIconCompactSize6LineHeight = "1.6";
 export const amsterdamLinkColor = "#004699";
-export const amsterdamLinkOutlineOffset = "2px";
 export const amsterdamLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamLinkFontWeight = 400;
+export const amsterdamLinkOutlineOffset = "2px";
 export const amsterdamLinkHoverColor = "#102E62";
-export const amsterdamLinkInlineHoverTextDecoration = "underline";
-export const amsterdamLinkInlineHoverTextUnderlineOffset = "3px";
+export const amsterdamLinkInlineTextDecorationLine = "underline";
+export const amsterdamLinkInlineTextDecorationThickness = "0.125rem";
+export const amsterdamLinkInlineTextUnderlineOffset = "0.375rem";
 export const amsterdamLinkInlineFontFamily = "inherit";
 export const amsterdamLinkInlineFontSize = "inherit";
 export const amsterdamLinkInlineLineHeight = "inherit";
-export const amsterdamLinkInlineTextDecoration = "none";
-export const amsterdamLinkInlineTextDecorationThickness = "2px";
+export const amsterdamLinkInlineHoverTextDecorationThickness = "0.1875rem";
+export const amsterdamLinkInlineHoverTextUnderlineOffset = "0.3125rem";
 export const amsterdamLinkInlineVisitedColor = "#A00078";
 export const amsterdamLinkInListGap = "0.5em";
-export const amsterdamLinkInListHoverTextDecoration = "underline";
-export const amsterdamLinkInListHoverTextDecorationThickness = "2px";
-export const amsterdamLinkInListHoverTextUnderlineOffset = "7px";
-export const amsterdamLinkInListTextDecoration = "none";
-export const amsterdamLinkInListLineHeight = "1.6";
-export const amsterdamLinkInListNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamLinkInListWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
-export const amsterdamLinkStandaloneTextUnderlineOffset = "8px";
-export const amsterdamLinkStandaloneTextDecorationThickness = "2px";
-export const amsterdamLinkStandaloneHoverTextDecorationThickness = "3px";
-export const amsterdamLinkStandaloneHoverTextUnderlineOffset = "7px";
-export const amsterdamLinkStandaloneLineHeight = "1.6";
-export const amsterdamLinkStandaloneNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamLinkStandaloneWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
+export const amsterdamLinkInListTextDecorationLine = "none";
+export const amsterdamLinkInListTextDecorationThickness = "0.125rem";
+export const amsterdamLinkInListTextUnderlineOffset = "0.375rem";
+export const amsterdamLinkInListHoverTextDecorationLine = "underline";
+export const amsterdamLinkInListSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamLinkInListSpaciousLineHeight = "1.6";
+export const amsterdamLinkInListCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamLinkInListCompactLineHeight = "1.6";
+export const amsterdamLinkStandaloneTextDecorationLine = "underline";
+export const amsterdamLinkStandaloneTextDecorationThickness = "0.125rem";
+export const amsterdamLinkStandaloneTextUnderlineOffset = "0.375rem";
+export const amsterdamLinkStandaloneHoverTextDecorationThickness = "0.1875rem";
+export const amsterdamLinkStandaloneHoverTextUnderlineOffset = "0.3125rem";
+export const amsterdamLinkStandaloneSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamLinkStandaloneSpaciousLineHeight = "1.6";
+export const amsterdamLinkStandaloneCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamLinkStandaloneCompactLineHeight = "1.6";
 export const amsterdamLinkOnBackgroundDarkColor = "#ffffff";
 export const amsterdamLinkOnBackgroundDarkHoverColor = "#ffffff";
 export const amsterdamLinkOnBackgroundDarkVisitedColor = "#ffffff";
@@ -262,14 +299,16 @@ export const amsterdamLogoHeight = "2.5rem";
 export const amsterdamLogoEmblemColor = "#EC0000";
 export const amsterdamLogoTitleColor = "#EC0000";
 export const amsterdamLogoSubsiteColor = "#000000";
+export const amsterdamMarkBackgroundColor = "var(--amsterdam-color-yellow)";
 export const amsterdamOrderedListColor = "#000000";
 export const amsterdamOrderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamOrderedListFontWeight = 400;
 export const amsterdamOrderedListGap = "0.75rem";
-export const amsterdamOrderedListLineHeight = "1.6";
 export const amsterdamOrderedListListStyleType = "decimal";
-export const amsterdamOrderedListNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamOrderedListWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
+export const amsterdamOrderedListSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamOrderedListSpaciousLineHeight = "1.6";
+export const amsterdamOrderedListCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamOrderedListCompactLineHeight = "1.6";
 export const amsterdamOrderedListItemMarginInlineStart = "2.25rem"; // Divide your total indentation width over margin and padding to position the marker.
 export const amsterdamOrderedListItemPaddingInlineStart = "0.25rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
 export const amsterdamOrderedListOrderedListListStyleType = "lower-alpha";
@@ -277,47 +316,97 @@ export const amsterdamOrderedListOrderedListItemMarginInlineStart = "1.5rem"; //
 export const amsterdamOrderedListOrderedListItemPaddingInlineStart = "0.25rem"; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
 export const amsterdamPageHeadingColor = "#000000";
 export const amsterdamPageHeadingFontFamily = "'Amsterdam Sans', Arial, sans-serif";
-export const amsterdamPageHeadingLineHeight = "1.1";
-export const amsterdamPageHeadingNarrowFontSize = "clamp(2rem, calc(2rem + (2 * (100vw - 20rem)) / 33.3125), 4rem)";
-export const amsterdamPageHeadingWideFontSize = "clamp(4rem, calc(4rem + (1 * (100vw - 53.375rem)) / 36.625), 5rem)";
 export const amsterdamPageHeadingFontWeight = 800;
 export const amsterdamPageHeadingInverseColor = "#ffffff";
+export const amsterdamPageHeadingSpaciousFontSize = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
+export const amsterdamPageHeadingSpaciousLineHeight = "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)";
+export const amsterdamPageHeadingCompactFontSize = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
+export const amsterdamPageHeadingCompactLineHeight = "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)";
 export const amsterdamPageMenuColumnGap = "2.5rem";
 export const amsterdamPageMenuRowGap = "0.5rem";
-export const amsterdamPageMenuItemColor = "#000000";
+export const amsterdamPageMenuItemColor = "#004699";
 export const amsterdamPageMenuItemFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamPageMenuItemFontWeight = 400;
 export const amsterdamPageMenuItemGap = "0.5rem";
-export const amsterdamPageMenuItemLineHeight = "1.6";
-export const amsterdamPageMenuItemTextDecoration = "none";
-export const amsterdamPageMenuItemNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamPageMenuItemWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
-export const amsterdamPageMenuItemHoverColor = "#000000";
-export const amsterdamPageMenuItemHoverTextDecoration = "underline";
+export const amsterdamPageMenuItemOutlineOffset = "2px";
+export const amsterdamPageMenuItemTextDecorationLine = "none";
+export const amsterdamPageMenuItemTextDecorationThickness = "0.125rem";
+export const amsterdamPageMenuItemTextUnderlineOffset = "0.375rem";
+export const amsterdamPageMenuItemSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamPageMenuItemSpaciousLineHeight = "1.6";
+export const amsterdamPageMenuItemCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamPageMenuItemCompactLineHeight = "1.6";
+export const amsterdamPageMenuItemHoverColor = "#102E62";
+export const amsterdamPageMenuItemHoverTextDecorationLine = "underline";
 export const amsterdamPaginationColor = "#004699";
 export const amsterdamPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamPaginationFontWeight = 400;
-export const amsterdamPaginationLineHeight = "1.6";
-export const amsterdamPaginationNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamPaginationWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
+export const amsterdamPaginationSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamPaginationSpaciousLineHeight = "1.6";
+export const amsterdamPaginationCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamPaginationCompactLineHeight = "1.6";
+export const amsterdamPaginationButtonOutlineOffset = "2px";
+export const amsterdamPaginationButtonTextDecorationLine = "none";
+export const amsterdamPaginationButtonTextDecorationThickness = "0.125rem";
+export const amsterdamPaginationButtonTextUnderlineOffset = "0.375rem";
 export const amsterdamPaginationButtonCurrentFontWeight = 800;
 export const amsterdamPaginationButtonHoverColor = "#102E62";
-export const amsterdamPaginationButtonOutlineOffset = "2px";
+export const amsterdamPaginationButtonHoverTextDecorationLine = "underline";
 export const amsterdamParagraphColor = "#000000";
 export const amsterdamParagraphFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamParagraphFontWeight = 400;
 export const amsterdamParagraphInverseColor = "#ffffff";
-export const amsterdamParagraphLineHeight = "1.6";
-export const amsterdamParagraphNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamParagraphWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
-export const amsterdamParagraphSmallLineHeight = "1.6";
-export const amsterdamParagraphSmallNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamParagraphSmallWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
-export const amsterdamParagraphLargeLineHeight = "1.5";
-export const amsterdamParagraphLargeNarrowFontSize = "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)";
-export const amsterdamParagraphLargeWideFontSize = "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)";
+export const amsterdamParagraphSpaciousSmallFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamParagraphSpaciousSmallLineHeight = "1.6";
+export const amsterdamParagraphSpaciousMediumFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamParagraphSpaciousMediumLineHeight = "1.6";
+export const amsterdamParagraphSpaciousLargeFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamParagraphSpaciousLargeLineHeight = "1.5";
+export const amsterdamParagraphCompactSmallFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamParagraphCompactSmallLineHeight = "1.6";
+export const amsterdamParagraphCompactMediumFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamParagraphCompactMediumLineHeight = "1.6";
+export const amsterdamParagraphCompactLargeFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamParagraphCompactLargeLineHeight = "1.5";
 export const amsterdamScreenWideMaxWidth = "100rem";
 export const amsterdamScreenXWideMaxWidth = "132rem";
+export const amsterdamSearchFieldButtonBackgroundColor = "#004699";
+export const amsterdamSearchFieldButtonColor = "#ffffff";
+export const amsterdamSearchFieldButtonOutlineOffset = "2px";
+export const amsterdamSearchFieldButtonHoverBackgroundColor = "#102E62";
+export const amsterdamSearchFieldInputBoxShadow = "inset 0 0 0 1px #000000";
+export const amsterdamSearchFieldInputColor = "#000000";
+export const amsterdamSearchFieldInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamSearchFieldInputFontWeight = 400;
+export const amsterdamSearchFieldInputOutlineOffset = "2px";
+export const amsterdamSearchFieldInputCancelButtonBackgroundImage = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>\")";
+export const amsterdamSearchFieldInputCancelButtonColor = "#004699";
+export const amsterdamSearchFieldInputCancelButtonHeight = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSearchFieldInputCancelButtonWidth = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSearchFieldInputHoverBoxShadow = "inset 0 0 0 2px #000000";
+export const amsterdamSearchFieldInputPlaceholderColor = "#767676";
+export const amsterdamSearchFieldInputCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamSearchFieldInputCompactLineHeight = "1.6";
+export const amsterdamSearchFieldInputSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSearchFieldInputSpaciousLineHeight = "1.6";
+export const amsterdamSkipLinkBackgroundColor = "#004699";
+export const amsterdamSkipLinkColor = "#ffffff";
+export const amsterdamSkipLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamSkipLinkFontWeight = 400;
+export const amsterdamSkipLinkFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamSkipLinkLineHeight = "1.6";
+export const amsterdamSkipLinkOutlineOffset = "2px";
+export const amsterdamSkipLinkCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamSkipLinkCompactLineHeight = "1.6";
+export const amsterdamSkipLinkHoverBackgroundColor = "#102E62";
+export const amsterdamSpotlightBlueBackgroundColor = "#004699";
+export const amsterdamSpotlightDarkGreenBackgroundColor = "#00A03C";
+export const amsterdamSpotlightGreenBackgroundColor = "#BED200";
+export const amsterdamSpotlightLightBlueBackgroundColor = "#009DEC";
+export const amsterdamSpotlightMagentaBackgroundColor = "#E50082";
+export const amsterdamSpotlightOrangeBackgroundColor = "#FF9100";
+export const amsterdamSpotlightPurpleBackgroundColor = "#A00078";
+export const amsterdamSpotlightYellowBackgroundColor = "#FFE600";
 export const amsterdamSwitchFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamSwitchBackgroundColor = "#767676";
 export const amsterdamSwitchWidth = "3.5rem";
@@ -328,28 +417,51 @@ export const amsterdamSwitchThumbHoverColor = "#102E62";
 export const amsterdamSwitchCheckedBackgroundColor = "#004699";
 export const amsterdamSwitchOutlineOffset = "2px";
 export const amsterdamSwitchDisabledBackgroundColor = "#B4B4B4";
+export const amsterdamTextInputBoxShadow = "inset 0 0 0 1px #000000";
+export const amsterdamTextInputColor = "#000000";
+export const amsterdamTextInputFontFamily = "'Amsterdam Sans', Arial, sans-serif";
+export const amsterdamTextInputFontWeight = 400;
+export const amsterdamTextInputOutlineOffset = "2px";
+export const amsterdamTextInputDisabledBackgroundColor = "#ffffff";
+export const amsterdamTextInputDisabledBoxShadow = "inset 0 0 0 1px #B4B4B4";
+export const amsterdamTextInputDisabledColor = "#B4B4B4";
+export const amsterdamTextInputHoverBoxShadow = "inset 0 0 0 2px #000000";
+export const amsterdamTextInputInvalidBoxShadow = "inset 0 0 0 1px #EC0000";
+export const amsterdamTextInputInvalidHoverBoxShadow = "inset 0 0 0 2px #EC0000";
+export const amsterdamTextInputPlaceholderColor = "#767676";
+export const amsterdamTextInputCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamTextInputCompactLineHeight = "1.6";
+export const amsterdamTextInputSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamTextInputSpaciousLineHeight = "1.6";
 export const amsterdamTopTaskLinkDescriptionColor = "#000000";
 export const amsterdamTopTaskLinkDescriptionFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamTopTaskLinkDescriptionFontWeight = 400;
-export const amsterdamTopTaskLinkDescriptionLineHeight = "1.6";
-export const amsterdamTopTaskLinkDescriptionNarrowFontSize = "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)";
-export const amsterdamTopTaskLinkDescriptionWideFontSize = "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)";
+export const amsterdamTopTaskLinkDescriptionSpaciousFontSize = "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)";
+export const amsterdamTopTaskLinkDescriptionSpaciousLineHeight = "1.6";
+export const amsterdamTopTaskLinkDescriptionCompactFontSize = "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)";
+export const amsterdamTopTaskLinkDescriptionCompactLineHeight = "1.6";
 export const amsterdamTopTaskLinkLabelColor = "#004699";
 export const amsterdamTopTaskLinkLabelFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamTopTaskLinkLabelFontWeight = 800;
+export const amsterdamTopTaskLinkLabelTextDecorationLine = "none";
+export const amsterdamTopTaskLinkLabelTextDecorationThickness = "0.125rem";
+export const amsterdamTopTaskLinkLabelTextUnderlineOffset = "0.375rem";
 export const amsterdamTopTaskLinkLabelHoverColor = "#102E62";
-export const amsterdamTopTaskLinkLabelLineHeight = "1.4";
-export const amsterdamTopTaskLinkLabelNarrowFontSize = "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)";
-export const amsterdamTopTaskLinkLabelWideFontSize = "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)";
+export const amsterdamTopTaskLinkLabelHoverTextDecorationLine = "underline";
+export const amsterdamTopTaskLinkLabelSpaciousFontSize = "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)";
+export const amsterdamTopTaskLinkLabelSpaciousLineHeight = "1.5";
+export const amsterdamTopTaskLinkLabelCompactFontSize = "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)";
+export const amsterdamTopTaskLinkLabelCompactLineHeight = "1.5";
 export const amsterdamTopTaskLinkOutlineOffset = "2px";
 export const amsterdamUnorderedListColor = "#000000";
 export const amsterdamUnorderedListFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsterdamUnorderedListFontWeight = 400;
 export const amsterdamUnorderedListGap = "0.75rem";
-export const amsterdamUnorderedListLineHeight = "1.6";
 export const amsterdamUnorderedListListStyleType = "'\\2022'";
-export const amsterdamUnorderedListNarrowFontSize = "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)";
-export const amsterdamUnorderedListWideFontSize = "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)";
+export const amsterdamUnorderedListSpaciousFontSize = "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)";
+export const amsterdamUnorderedListSpaciousLineHeight = "1.6";
+export const amsterdamUnorderedListCompactFontSize = "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)";
+export const amsterdamUnorderedListCompactLineHeight = "1.6";
 export const amsterdamUnorderedListItemMarginInlineStart = "1.625rem"; // Divide your total indentation width over margin and padding to position the marker.
 export const amsterdamUnorderedListItemPaddingInlineStart = "0.875rem"; // The total level 1 indentation for Amsterdam is 40 pixels, or 2.5rem.
 export const amsterdamUnorderedListUnorderedListListStyleType = "'\\2013'";
@@ -365,7 +477,6 @@ export const utrechtFocusOutlineOffset = "2px";
 export const utrechtButtonBackgroundColor = "#004699";
 export const utrechtButtonColor = "#ffffff";
 export const utrechtButtonFontFamily = "'Amsterdam Sans', Arial, sans-serif";
-export const utrechtButtonLineHeight = "1.6";
 export const utrechtButtonPaddingInlineStart = "1rem";
 export const utrechtButtonPaddingInlineEnd = "1rem";
 export const utrechtButtonPaddingBlockStart = "0.5rem";