@amsterdam/design-system-tokens 0.1.5 → 0.1.7

package/dist/index.json

@@ -3,7 +3,7 @@
   "amsterdamColorPrimaryWhite": "#ffffff",
   "amsterdamColorPrimaryBlue": "#004699",
   "amsterdamColorPrimaryRed": "#EC0000",
-  "amsterdamColorDarkBlue": "#00387A",
+  "amsterdamColorDarkBlue": "#102E62",
   "amsterdamColorOrange": "#FF9100",
   "amsterdamColorYellow": "#FFE600",
   "amsterdamColorGreen": "#BED200",
@@ -15,6 +15,12 @@
   "amsterdamColorNeutralGrey2": "#B4B4B4",
   "amsterdamColorNeutralGrey3": "#767676",
   "amsterdamColorNeutralGrey4": "#323232",
+  "amsterdamProportionXTall": "9 / 16",
+  "amsterdamProportionTall": "4 / 5",
+  "amsterdamProportionSquare": "1 / 1",
+  "amsterdamProportionWide": "5 / 4",
+  "amsterdamProportionXWide": "16 / 9",
+  "amsterdamProportion2xWide": "32 / 9",
   "amsterdamTypographyFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamTypographyFontWeightNormal": 400,
   "amsterdamTypographyFontWeightBold": 800,
@@ -58,6 +64,32 @@
   "amsterdamAccordionButtonNarrowFontSize": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
   "amsterdamAccordionButtonWideFontSize": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)",
   "amsterdamAccordionButtonHoverBoxShadow": "inset 0 0 0 2px #767676",
+  "amsterdamAlertBackgroundColor": "#FFE600",
+  "amsterdamAlertBorder": "4px solid #FFE600",
+  "amsterdamAlertGap": "1rem",
+  "amsterdamAlertPaddingBlockStart": "1rem",
+  "amsterdamAlertPaddingBlockEnd": "1rem",
+  "amsterdamAlertPaddingInlineStart": "1.5rem",
+  "amsterdamAlertPaddingInlineEnd": "1.5rem",
+  "amsterdamAlertTitleColor": "#000000",
+  "amsterdamAlertTitleFontFamily": "'Amsterdam Sans', Arial, sans-serif",
+  "amsterdamAlertTitleFontWeight": 800,
+  "amsterdamAlertTitleLineHeight": "1.5",
+  "amsterdamAlertTitleNarrowFontSize": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
+  "amsterdamAlertTitleWideFontSize": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)",
+  "amsterdamAlertErrorBackgroundColor": "#ffffff",
+  "amsterdamAlertErrorBorderColor": "#EC0000",
+  "amsterdamAlertSuccessBackgroundColor": "#ffffff",
+  "amsterdamAlertSuccessBorderColor": "#00A03C",
+  "amsterdamAlertCloseBackgroundColor": "transparent",
+  "amsterdamAlertCloseFill": "#000000",
+  "amsterdamAlertCloseHoverFill": "#004699",
+  "amsterdamAspectRatioXTall": "9 / 16",
+  "amsterdamAspectRatioTall": "4 / 5",
+  "amsterdamAspectRatioSquare": "1 / 1",
+  "amsterdamAspectRatioWide": "5 / 4",
+  "amsterdamAspectRatioXWide": "16 / 9",
+  "amsterdamAspectRatio2xWide": "32 / 9",
   "amsterdamBlockquoteColor": "#000000",
   "amsterdamBlockquoteFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamBlockquoteFontWeight": 800,
@@ -67,33 +99,35 @@
   "amsterdamBlockquoteWideFontSize": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)",
   "amsterdamBreadcrumbColor": "#004699",
   "amsterdamBreadcrumbFontFamily": "'Amsterdam Sans', Arial, sans-serif",
+  "amsterdamBreadcrumbFontWeight": 400,
   "amsterdamBreadcrumbLineHeight": "1.6",
   "amsterdamBreadcrumbNarrowFontSize": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
   "amsterdamBreadcrumbWideFontSize": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)",
   "amsterdamBreadcrumbItemLinkOutlineOffset": "2px",
-  "amsterdamBreadcrumbItemLinkHoverColor": "#00387A",
-  "amsterdamBreadcrumbItemLinkHoverBoxShadow": "inset 0 -2px 0 0 #00387A",
-  "amsterdamBreadcrumbItemLinkFocusColor": "#00387A",
+  "amsterdamBreadcrumbItemLinkHoverColor": "#102E62",
+  "amsterdamBreadcrumbItemLinkHoverBoxShadow": "inset 0 -2px 0 0 #102E62",
+  "amsterdamBreadcrumbItemLinkFocusColor": "#102E62",
   "amsterdamBreadcrumbItemLinkFocusTextDecoration": "underline",
   "amsterdamButtonNarrowFontSize": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
   "amsterdamButtonWideFontSize": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)",
   "amsterdamButtonSecondaryBoxShadow": "inset 0 0 0 2px #004699",
-  "amsterdamButtonSecondaryHoverBoxShadow": "inset 0 0 0 3px #00387A",
+  "amsterdamButtonSecondaryHoverBoxShadow": "inset 0 0 0 3px #102E62",
   "amsterdamButtonSecondaryDisabledBoxShadow": "inset 0 0 0 2px #B4B4B4",
-  "amsterdamButtonSecondaryFocusBoxShadow": "inset 0 0 0 3px #00387A",
-  "amsterdamButtonSecondaryFocusColor": "#00387A",
+  "amsterdamButtonSecondaryFocusBoxShadow": "inset 0 0 0 2px #004699",
   "amsterdamButtonTertiaryHoverBoxShadow": "inset 0 0 0 2px #767676",
-  "amsterdamButtonTertiaryFocusBoxShadow": "inset 0 0 0 2px #767676",
+  "amsterdamCardLinkColor": "#004699",
+  "amsterdamCardLinkHoverColor": "#102E62",
+  "amsterdamCardOutlineOffset": "2px",
   "amsterdamCheckboxColor": "#000000",
   "amsterdamCheckboxCheckmarkBorderColor": "#004699",
   "amsterdamCheckboxCheckmarkCheckedBackgroundColor": "#004699",
-  "amsterdamCheckboxCheckmarkCheckedHoverBackgroundColor": "#00387A",
+  "amsterdamCheckboxCheckmarkCheckedHoverBackgroundColor": "#102E62",
   "amsterdamCheckboxCheckmarkDisabledBorderColor": "#767676",
   "amsterdamCheckboxCheckmarkDisabledCheckedBackgroundColor": "#767676",
   "amsterdamCheckboxCheckmarkDisabledCheckedHoverBackgroundColor": "#767676",
   "amsterdamCheckboxCheckmarkDisabledIndeterminateBackgroundColor": "#767676",
   "amsterdamCheckboxCheckmarkDisabledIndeterminateHoverBackgroundColor": "#767676",
-  "amsterdamCheckboxCheckmarkHoverBorderColor": "#00387A",
+  "amsterdamCheckboxCheckmarkHoverBorderColor": "#102E62",
   "amsterdamCheckboxCheckmarkInvalidBorderColor": "#EC0000",
   "amsterdamCheckboxCheckmarkInvalidCheckedBackgroundColor": "#EC0000",
   "amsterdamCheckboxCheckmarkInvalidCheckedHoverBackgroundColor": "#EC0000",
@@ -101,14 +135,14 @@
   "amsterdamCheckboxCheckmarkInvalidIndeterminateBackgroundColor": "#EC0000",
   "amsterdamCheckboxCheckmarkInvalidIndeterminateHoverBackgroundColor": "#EC0000",
   "amsterdamCheckboxCheckmarkIndeterminateBackgroundColor": "#004699",
-  "amsterdamCheckboxCheckmarkIndeterminateHoverBackgroundColor": "#00387A",
+  "amsterdamCheckboxCheckmarkIndeterminateHoverBackgroundColor": "#102E62",
   "amsterdamCheckboxCheckmarkNarrowSize": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
   "amsterdamCheckboxCheckmarkWideSize": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)",
   "amsterdamCheckboxCheckmarkMultiplier": "1.6",
   "amsterdamCheckboxDisabledColor": "#767676",
   "amsterdamCheckboxFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamCheckboxFontWeight": 400,
-  "amsterdamCheckboxHoverColor": "#00387A",
+  "amsterdamCheckboxHoverColor": "#102E62",
   "amsterdamCheckboxOutlineOffset": "2px",
   "amsterdamCheckboxLineHeight": "1.6",
   "amsterdamCheckboxNarrowFontSize": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
@@ -120,6 +154,13 @@
   "amsterdamFormLabelLineHeight": "1.6",
   "amsterdamFormLabelNarrowFontSize": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
   "amsterdamFormLabelWideFontSize": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)",
+  "amsterdamGridColumnCount": "4",
+  "amsterdamGridDensityLowGap": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
+  "amsterdamGridDensityLowPaddingInline": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)",
+  "amsterdamGridDensityHighGap": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+  "amsterdamGridDensityHighPaddingInline": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+  "amsterdamGridMediumColumnCount": "8",
+  "amsterdamGridWideColumnCount": "12",
   "amsterdamHeading1LineHeight": "1.2",
   "amsterdamHeading1NarrowFontSize": "clamp(2rem, calc(2rem + (1 * (100vw - 20rem)) / 33.3125), 3rem)",
   "amsterdamHeading1WideFontSize": "clamp(3rem, calc(3rem + (0.5 * (100vw - 53.375rem)) / 36.625), 3.5rem)",
@@ -136,6 +177,14 @@
   "amsterdamHeadingFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamHeadingFontWeight": 800,
   "amsterdamHeadingInverseColor": "#ffffff",
+  "amsterdamHighlightBlueBackgroundColor": "#004699",
+  "amsterdamHighlightDarkGreenBackgroundColor": "#00A03C",
+  "amsterdamHighlightGreenBackgroundColor": "#BED200",
+  "amsterdamHighlightLightBlueBackgroundColor": "#009DEC",
+  "amsterdamHighlightMagentaBackgroundColor": "#E50082",
+  "amsterdamHighlightOrangeBackgroundColor": "#FF9100",
+  "amsterdamHighlightPurpleBackgroundColor": "#A00078",
+  "amsterdamHighlightYellowBackgroundColor": "#FFE600",
   "amsterdamIconSize3IconSizeNarrow": "clamp(1.5rem, calc(1.5rem + (0.3125 * (100vw - 20rem)) / 33.3125), 1.8125rem)",
   "amsterdamIconSize3IconSizeWide": "clamp(1.8125rem, calc(1.8125rem + (0.1875 * (100vw - 53.375rem)) / 36.625), 2rem)",
   "amsterdamIconSize3ContainerMultiplier": "1.4",
@@ -155,26 +204,27 @@
   "amsterdamLinkOutlineOffset": "2px",
   "amsterdamLinkFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamLinkFontWeight": 400,
-  "amsterdamLinkFocusColor": "#00387A",
-  "amsterdamLinkInlineFocusTextDecoration": "underline",
-  "amsterdamLinkInlineFocusTextUnderlineOffset": "3px",
+  "amsterdamLinkHoverColor": "#102E62",
+  "amsterdamLinkInlineHoverTextDecoration": "underline",
+  "amsterdamLinkInlineHoverTextUnderlineOffset": "3px",
   "amsterdamLinkInlineFontFamily": "inherit",
   "amsterdamLinkInlineFontSize": "inherit",
   "amsterdamLinkInlineLineHeight": "inherit",
   "amsterdamLinkInlineTextDecoration": "none",
+  "amsterdamLinkInlineTextDecorationThickness": "2px",
   "amsterdamLinkInlineVisitedColor": "#A00078",
   "amsterdamLinkInListGap": "0.5em",
-  "amsterdamLinkInListFocusTextDecoration": "underline",
-  "amsterdamLinkInListFocusTextDecorationThickness": "2px",
-  "amsterdamLinkInListFocusTextUnderlineOffset": "7px",
+  "amsterdamLinkInListHoverTextDecoration": "underline",
+  "amsterdamLinkInListHoverTextDecorationThickness": "2px",
+  "amsterdamLinkInListHoverTextUnderlineOffset": "7px",
   "amsterdamLinkInListTextDecoration": "none",
   "amsterdamLinkInListLineHeight": "1.6",
   "amsterdamLinkInListNarrowFontSize": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)",
   "amsterdamLinkInListWideFontSize": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)",
   "amsterdamLinkStandaloneTextUnderlineOffset": "8px",
   "amsterdamLinkStandaloneTextDecorationThickness": "2px",
-  "amsterdamLinkStandaloneFocusTextDecorationThickness": "3px",
-  "amsterdamLinkStandaloneFocusTextUnderlineOffset": "7px",
+  "amsterdamLinkStandaloneHoverTextDecorationThickness": "3px",
+  "amsterdamLinkStandaloneHoverTextUnderlineOffset": "7px",
   "amsterdamLinkStandaloneLineHeight": "1.6",
   "amsterdamLinkStandaloneNarrowFontSize": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
   "amsterdamLinkStandaloneWideFontSize": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)",
@@ -197,10 +247,6 @@
   "amsterdamOrderedListOrderedListListStyleType": "lower-alpha",
   "amsterdamOrderedListOrderedListItemMarginInlineStart": "1.5rem",
   "amsterdamOrderedListOrderedListItemPaddingInlineStart": "0.25rem",
-  "amsterdamPageGridColumnCountNarrow": "4",
-  "amsterdamPageGridColumnCountWide": "12",
-  "amsterdamPageGridColumnGap": "clamp(0.5rem, calc(0.5rem + 0.0142857143 * (100vw - 20rem)), 1.5rem)",
-  "amsterdamPageGridMaxWidth": "1440px",
   "amsterdamPageHeadingColor": "#000000",
   "amsterdamPageHeadingFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamPageHeadingLineHeight": "1.1",
@@ -220,6 +266,15 @@
   "amsterdamPageMenuItemWideFontSize": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)",
   "amsterdamPageMenuItemHoverColor": "#000000",
   "amsterdamPageMenuItemHoverTextDecoration": "underline",
+  "amsterdamPaginationColor": "#004699",
+  "amsterdamPaginationFontFamily": "'Amsterdam Sans', Arial, sans-serif",
+  "amsterdamPaginationFontWeight": 400,
+  "amsterdamPaginationLineHeight": "1.6",
+  "amsterdamPaginationNarrowFontSize": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)",
+  "amsterdamPaginationWideFontSize": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)",
+  "amsterdamPaginationButtonCurrentFontWeight": 800,
+  "amsterdamPaginationButtonHoverColor": "#102E62",
+  "amsterdamPaginationButtonOutlineOffset": "2px",
   "amsterdamParagraphColor": "#000000",
   "amsterdamParagraphFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamParagraphFontWeight": 400,
@@ -233,6 +288,18 @@
   "amsterdamParagraphLargeLineHeight": "1.5",
   "amsterdamParagraphLargeNarrowFontSize": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)",
   "amsterdamParagraphLargeWideFontSize": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)",
+  "amsterdamScreenWideMaxWidth": "100rem",
+  "amsterdamScreenXWideMaxWidth": "132rem",
+  "amsterdamSwitchFontFamily": "'Amsterdam Sans', Arial, sans-serif",
+  "amsterdamSwitchBackgroundColor": "#767676",
+  "amsterdamSwitchWidth": "3.5rem",
+  "amsterdamSwitchThumbBackgroundColor": "#ffffff",
+  "amsterdamSwitchThumbWidth": "1.75rem",
+  "amsterdamSwitchThumbHeight": "1.75rem",
+  "amsterdamSwitchThumbHoverColor": "#102E62",
+  "amsterdamSwitchCheckedBackgroundColor": "#004699",
+  "amsterdamSwitchOutlineOffset": "2px",
+  "amsterdamSwitchDisabledBackgroundColor": "#B4B4B4",
   "amsterdamTopTaskLinkDescriptionColor": "#000000",
   "amsterdamTopTaskLinkDescriptionFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamTopTaskLinkDescriptionFontWeight": 400,
@@ -242,7 +309,7 @@
   "amsterdamTopTaskLinkLabelColor": "#004699",
   "amsterdamTopTaskLinkLabelFontFamily": "'Amsterdam Sans', Arial, sans-serif",
   "amsterdamTopTaskLinkLabelFontWeight": 800,
-  "amsterdamTopTaskLinkLabelHoverColor": "#00387A",
+  "amsterdamTopTaskLinkLabelHoverColor": "#102E62",
   "amsterdamTopTaskLinkLabelLineHeight": "1.4",
   "amsterdamTopTaskLinkLabelNarrowFontSize": "clamp(1.25rem, calc(1.25rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.4375rem)",
   "amsterdamTopTaskLinkLabelWideFontSize": "clamp(1.4375rem, calc(1.4375rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.5625rem)",
@@ -280,17 +347,16 @@
   "utrechtButtonPrimaryActionBackgroundColor": "#004699",
   "utrechtButtonPrimaryActionColor": "#ffffff",
   "utrechtButtonPrimaryActionDisabledBackgroundColor": "#B4B4B4",
-  "utrechtButtonPrimaryActionHoverBackgroundColor": "#00387A",
-  "utrechtButtonPrimaryActionFocusBackgroundColor": "#00387A",
+  "utrechtButtonPrimaryActionHoverBackgroundColor": "#102E62",
   "utrechtButtonSecondaryActionBackgroundColor": "#ffffff",
   "utrechtButtonSecondaryActionColor": "#004699",
-  "utrechtButtonSecondaryActionHoverColor": "#00387A",
+  "utrechtButtonSecondaryActionHoverColor": "#102E62",
   "utrechtButtonSecondaryActionDisabledBackgroundColor": "#ffffff",
   "utrechtButtonSecondaryActionDisabledColor": "#B4B4B4",
   "utrechtButtonSubtleBackgroundColor": "transparent",
   "utrechtButtonSubtleColor": "#004699",
-  "utrechtButtonSubtleHoverColor": "#00387A",
-  "utrechtButtonSubtleFocusColor": "#00387A",
+  "utrechtButtonSubtleHoverColor": "#102E62",
+  "utrechtButtonSubtleFocusColor": "#102E62",
   "utrechtButtonSubtleDisabledBackgroundColor": "transparent",
   "utrechtButtonSubtleDisabledColor": "#B4B4B4"
 }

package/dist/index.tokens.json

@@ -5,7 +5,7 @@
       "primary-white": "#ffffff",
       "primary-blue": "#004699",
       "primary-red": "#EC0000",
-      "dark-blue": "#00387A",
+      "dark-blue": "#102E62",
       "orange": "#FF9100",
       "yellow": "#FFE600",
       "green": "#BED200",
@@ -18,6 +18,14 @@
       "neutral-grey3": "#767676",
       "neutral-grey4": "#323232"
     },
+    "proportion": {
+      "x-tall": "9 / 16",
+      "tall": "4 / 5",
+      "square": "1 / 1",
+      "wide": "5 / 4",
+      "x-wide": "16 / 9",
+      "2x-wide": "32 / 9"
+    },
     "typography": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": {
@@ -135,6 +143,50 @@
         }
       }
     },
+    "alert": {
+      "background-color": "#FFE600",
+      "border": "4px solid #FFE600",
+      "gap": "1rem",
+      "padding-block-start": "1rem",
+      "padding-block-end": "1rem",
+      "padding-inline-start": "1.5rem",
+      "padding-inline-end": "1.5rem",
+      "title": {
+        "color": "#000000",
+        "font-family": "'Amsterdam Sans', Arial, sans-serif",
+        "font-weight": 800,
+        "line-height": "1.5",
+        "narrow": {
+          "font-size": "clamp(1.375rem, calc(1.375rem + (0.25 * (100vw - 20rem)) / 33.3125), 1.625rem)"
+        },
+        "wide": {
+          "font-size": "clamp(1.625rem, calc(1.625rem + (0.125 * (100vw - 53.375rem)) / 36.625), 1.75rem)"
+        }
+      },
+      "error": {
+        "background-color": "#ffffff",
+        "border-color": "#EC0000"
+      },
+      "success": {
+        "background-color": "#ffffff",
+        "border-color": "#00A03C"
+      },
+      "close": {
+        "background-color": "transparent",
+        "fill": "#000000",
+        "hover": {
+          "fill": "#004699"
+        }
+      }
+    },
+    "aspect-ratio": {
+      "x-tall": "9 / 16",
+      "tall": "4 / 5",
+      "square": "1 / 1",
+      "wide": "5 / 4",
+      "x-wide": "16 / 9",
+      "2x-wide": "32 / 9"
+    },
     "blockquote": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -151,6 +203,7 @@
     "breadcrumb": {
       "color": "#004699",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-weight": 400,
       "line-height": "1.6",
       "narrow": {
         "font-size": "clamp(1rem, calc(1rem + (0.0625 * (100vw - 20rem)) / 33.3125), 1.0625rem)"
@@ -161,11 +214,11 @@
       "item-link": {
         "outline-offset": "2px",
         "hover": {
-          "color": "#00387A",
-          "box-shadow": "inset 0 -2px 0 0 #00387A"
+          "color": "#102E62",
+          "box-shadow": "inset 0 -2px 0 0 #102E62"
         },
         "focus": {
-          "color": "#00387A",
+          "color": "#102E62",
           "text-decoration": "underline"
         }
       }
@@ -180,25 +233,30 @@
       "secondary": {
         "box-shadow": "inset 0 0 0 2px #004699",
         "hover": {
-          "box-shadow": "inset 0 0 0 3px #00387A"
+          "box-shadow": "inset 0 0 0 3px #102E62"
         },
         "disabled": {
           "box-shadow": "inset 0 0 0 2px #B4B4B4"
         },
         "focus": {
-          "box-shadow": "inset 0 0 0 3px #00387A",
-          "color": "#00387A"
+          "box-shadow": "inset 0 0 0 2px #004699"
         }
       },
       "tertiary": {
         "hover": {
           "box-shadow": "inset 0 0 0 2px #767676"
-        },
-        "focus": {
-          "box-shadow": "inset 0 0 0 2px #767676"
         }
       }
     },
+    "card": {
+      "link": {
+        "color": "#004699",
+        "hover": {
+          "color": "#102E62"
+        }
+      },
+      "outline-offset": "2px"
+    },
     "checkbox": {
       "color": "#000000",
       "checkmark": {
@@ -206,7 +264,7 @@
         "checked": {
           "background-color": "#004699",
           "hover": {
-            "background-color": "#00387A"
+            "background-color": "#102E62"
           }
         },
         "disabled": {
@@ -225,7 +283,7 @@
           }
         },
         "hover": {
-          "border-color": "#00387A"
+          "border-color": "#102E62"
         },
         "invalid": {
           "border-color": "#EC0000",
@@ -248,7 +306,7 @@
         "indeterminate": {
           "background-color": "#004699",
           "hover": {
-            "background-color": "#00387A"
+            "background-color": "#102E62"
           }
         },
         "narrow": {
@@ -265,7 +323,7 @@
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
       "hover": {
-        "color": "#00387A"
+        "color": "#102E62"
       },
       "outline-offset": "2px",
       "line-height": "1.6",
@@ -293,6 +351,23 @@
         "font-size": "clamp(1.0625rem, calc(1.0625rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.125rem)"
       }
     },
+    "grid": {
+      "column-count": "4",
+      "density-low": {
+        "gap": "clamp(1rem, 3.125vw + 0.375rem, 3.5rem)",
+        "padding-inline": "clamp(1.5rem, 4.6875vw + 0.5625rem, 5.25rem)"
+      },
+      "density-high": {
+        "gap": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)",
+        "padding-inline": "clamp(1rem, 1.5625vw - 0.0625rem, 2.5rem)"
+      },
+      "medium": {
+        "column-count": "8"
+      },
+      "wide": {
+        "column-count": "12"
+      }
+    },
     "heading": {
       "1": {
         "line-height": "1.2",
@@ -335,6 +410,32 @@
       "font-weight": 800,
       "inverse-color": "#ffffff"
     },
+    "highlight": {
+      "blue": {
+        "background-color": "#004699"
+      },
+      "dark-green": {
+        "background-color": "#00A03C"
+      },
+      "green": {
+        "background-color": "#BED200"
+      },
+      "light-blue": {
+        "background-color": "#009DEC"
+      },
+      "magenta": {
+        "background-color": "#E50082"
+      },
+      "orange": {
+        "background-color": "#FF9100"
+      },
+      "purple": {
+        "background-color": "#A00078"
+      },
+      "yellow": {
+        "background-color": "#FFE600"
+      }
+    },
     "icon": {
       "size-3": {
         "icon-size": {
@@ -377,11 +478,11 @@
       "outline-offset": "2px",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
       "font-weight": 400,
-      "focus": {
-        "color": "#00387A"
+      "hover": {
+        "color": "#102E62"
       },
       "inline": {
-        "focus": {
+        "hover": {
           "text-decoration": "underline",
           "text-underline-offset": "3px"
         },
@@ -389,13 +490,14 @@
         "font-size": "inherit",
         "line-height": "inherit",
         "text-decoration": "none",
+        "text-decoration-thickness": "2px",
         "visited": {
           "color": "#A00078"
         }
       },
       "in-list": {
         "gap": "0.5em",
-        "focus": {
+        "hover": {
           "text-decoration": "underline",
           "text-decoration-thickness": "2px",
           "text-underline-offset": "7px"
@@ -412,7 +514,7 @@
       "standalone": {
         "text-underline-offset": "8px",
         "text-decoration-thickness": "2px",
-        "focus": {
+        "hover": {
           "text-decoration-thickness": "3px",
           "text-underline-offset": "7px"
         },
@@ -468,14 +570,6 @@
         }
       }
     },
-    "page-grid": {
-      "column-count": {
-        "narrow": "4",
-        "wide": "12"
-      },
-      "column-gap": "clamp(0.5rem, calc(0.5rem + 0.0142857143 * (100vw - 20rem)), 1.5rem)",
-      "max-width": "1440px"
-    },
     "page-heading": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -511,6 +605,27 @@
         }
       }
     },
+    "pagination": {
+      "color": "#004699",
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "font-weight": 400,
+      "line-height": "1.6",
+      "narrow": {
+        "font-size": "clamp(1.125rem, calc(1.125rem + (0.1875 * (100vw - 20rem)) / 33.3125), 1.3125rem)"
+      },
+      "wide": {
+        "font-size": "clamp(1.3125rem, calc(1.3125rem + (0.0625 * (100vw - 53.375rem)) / 36.625), 1.375rem)"
+      },
+      "button": {
+        "current": {
+          "font-weight": 800
+        },
+        "hover": {
+          "color": "#102E62"
+        },
+        "outline-offset": "2px"
+      }
+    },
     "paragraph": {
       "color": "#000000",
       "font-family": "'Amsterdam Sans', Arial, sans-serif",
@@ -542,6 +657,34 @@
         }
       }
     },
+    "screen": {
+      "wide": {
+        "max-width": "100rem"
+      },
+      "x-wide": {
+        "max-width": "132rem"
+      }
+    },
+    "switch": {
+      "font-family": "'Amsterdam Sans', Arial, sans-serif",
+      "background-color": "#767676",
+      "width": "3.5rem",
+      "thumb": {
+        "background-color": "#ffffff",
+        "width": "1.75rem",
+        "height": "1.75rem",
+        "hover": {
+          "color": "#102E62"
+        }
+      },
+      "checked": {
+        "background-color": "#004699"
+      },
+      "outline-offset": "2px",
+      "disabled": {
+        "background-color": "#B4B4B4"
+      }
+    },
     "top-task-link": {
       "description": {
         "color": "#000000",
@@ -560,7 +703,7 @@
         "font-family": "'Amsterdam Sans', Arial, sans-serif",
         "font-weight": 800,
         "hover": {
-          "color": "#00387A"
+          "color": "#102E62"
         },
         "line-height": "1.4",
         "narrow": {
@@ -664,12 +807,12 @@
           "border-color": {}
         },
         "hover": {
-          "background-color": "#00387A",
+          "background-color": "#102E62",
           "border-color": {},
           "color": {}
         },
         "focus": {
-          "background-color": "#00387A",
+          "background-color": {},
           "border-color": {},
           "border-width": {}
         },
@@ -732,7 +875,7 @@
         "border-width": {},
         "hover": {
           "background-color": {},
-          "color": "#00387A",
+          "color": "#102E62",
           "border-color": {}
         },
         "disabled": {
@@ -800,12 +943,12 @@
         "font-weight": {},
         "hover": {
           "background-color": {},
-          "color": "#00387A",
+          "color": "#102E62",
           "border-color": {}
         },
         "focus": {
           "background-color": {},
-          "color": "#00387A",
+          "color": "#102E62",
           "border-color": {}
         },
         "disabled": {