@amsterdam/design-system-tokens 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.1.0...design-system-tokens-v2.2.0) (2025-11-21)
+
+
+### Features
+
+* **Label, Field Set:** Add a lighter variant to Label and Legend to clarify form hierarchy in nested Field Sets ([#2291](https://github.com/Amsterdam/design-system/issues/2291)) ([3bcc039](https://github.com/Amsterdam/design-system/commit/3bcc03901cbe1b37183d774b26367a914e3bda79))
+* **Page Header:** Allow adding an icon to a menu item ([#2285](https://github.com/Amsterdam/design-system/issues/2285)) ([15a830b](https://github.com/Amsterdam/design-system/commit/15a830b6068bb98c405da0013e90ac6697b20f5b))
+* **Page:** Add support for a layout with a Menu ([#2263](https://github.com/Amsterdam/design-system/issues/2263)) ([51a289f](https://github.com/Amsterdam/design-system/commit/51a289fe3012981fff1bfc223a0689b9be3760a7))
+
 ## [2.1.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v2.0.0...design-system-tokens-v2.1.0) (2025-10-31)
 
 

package/dist/index.css

@@ -132,6 +132,7 @@
   --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --ams-page-footer-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 90rem;
+  --ams-page-with-menu-max-inline-size: 120rem;
   --ams-search-field-input-cancel-button-background-image: 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>");
   --ams-select-background-image: 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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -421,6 +422,7 @@
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
   --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-field-set-legend-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-field-gap: var(--ams-space-s);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
   --ams-field-invalid-padding-inline-start: var(--ams-space-m);
@@ -471,6 +473,7 @@
   --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-heading-inverse-color: var(--ams-color-text-inverse);
   --ams-hint-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-hint-in-fieldset-color: var(--ams-color-text-secondary);
   --ams-icon-button-color: var(--ams-color-interactive);
   --ams-icon-button-cursor: var(--ams-cursor-interactive);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
@@ -515,6 +518,7 @@
   --ams-label-font-weight: var(--ams-typography-heading-font-weight);
   --ams-label-line-height: var(--ams-typography-heading-3-line-height);
   --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-label-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-link-list-gap: var(--ams-space-s);
   --ams-link-list-link-font-family: var(--ams-typography-font-family);
   --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
@@ -599,6 +603,7 @@
   --ams-page-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
   --ams-page-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
   --ams-page-header-menu-item-padding-block: var(--ams-space-xs);
+  --ams-page-header-menu-link-gap: var(--ams-space-xs);
   --ams-page-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-page-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
@@ -880,6 +885,7 @@
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-3-font-size);
   --ams-page-header-menu-item-color: var(--ams-links-color);
   --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
+  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Skip Link and Grid line up */
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
   --ams-password-input-background-color: var(--ams-inputs-background-color);

package/dist/index.d.ts

@@ -731,6 +731,9 @@ declare const tokens: {
         "line-height": DesignToken;
         "margin-block-end": DesignToken;
         "text-wrap": DesignToken;
+        "in-fieldset": {
+          "font-weight": DesignToken;
+        };
       };
     };
     field: {
@@ -867,6 +870,9 @@ declare const tokens: {
     };
     hint: {
       "font-weight": DesignToken;
+      "in-fieldset": {
+        color: DesignToken;
+      };
     };
     "icon-button": {
       color: DesignToken;
@@ -981,6 +987,9 @@ declare const tokens: {
       "font-weight": DesignToken;
       "line-height": DesignToken;
       "text-wrap": DesignToken;
+      "in-fieldset": {
+        "font-weight": DesignToken;
+      };
     };
     "link-list": {
       gap: DesignToken;
@@ -1219,6 +1228,7 @@ declare const tokens: {
           };
         };
         link: {
+          gap: DesignToken;
           "text-decoration-line": DesignToken;
           "text-decoration-thickness": DesignToken;
           "text-underline-offset": DesignToken;
@@ -1246,6 +1256,12 @@ declare const tokens: {
     page: {
       "background-color": DesignToken;
       "max-inline-size": DesignToken;
+      "with-menu": {
+        "max-inline-size": DesignToken;
+        "area-skip-link": {
+          "margin-inline-end": DesignToken;
+        };
+      };
     };
     pagination: {
       "font-family": DesignToken;

package/dist/index.json

@@ -714,7 +714,10 @@
         "font-weight": "800",
         "line-height": "1.3",
         "margin-block-end": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
-        "text-wrap": "balance"
+        "text-wrap": "balance",
+        "in-fieldset": {
+          "font-weight": "400"
+        }
       }
     },
     "field": {
@@ -850,7 +853,10 @@
       }
     },
     "hint": {
-      "font-weight": "400"
+      "font-weight": "400",
+      "in-fieldset": {
+        "color": "#767676"
+      }
     },
     "icon-button": {
       "color": "#004699",
@@ -964,7 +970,10 @@
       "font-size": "clamp(1.3125rem, 1.2411rem + 0.3571vw, 1.5625rem)",
       "font-weight": "800",
       "line-height": "1.3",
-      "text-wrap": "balance"
+      "text-wrap": "balance",
+      "in-fieldset": {
+        "font-weight": "400"
+      }
     },
     "link-list": {
       "gap": "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)",
@@ -1203,6 +1212,7 @@
           }
         },
         "link": {
+          "gap": "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)",
           "text-decoration-line": "none",
           "text-decoration-thickness": "0.125rem",
           "text-underline-offset": "0.15625rem",
@@ -1229,7 +1239,13 @@
     },
     "page": {
       "background-color": "#ffffff",
-      "max-inline-size": "90rem"
+      "max-inline-size": "90rem",
+      "with-menu": {
+        "max-inline-size": "120rem",
+        "area-skip-link": {
+          "margin-inline-end": "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"
+        }
+      }
     },
     "pagination": {
       "font-family": "'Amsterdam Sans', Arial, sans-serif",

package/dist/index.mjs

@@ -480,6 +480,7 @@ export const amsFieldSetLegendLineHeight = "1.3";
 export const amsFieldSetLegendMarginBlockEnd =
   "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsFieldSetLegendTextWrap = "balance";
+export const amsFieldSetLegendInFieldsetFontWeight = "400";
 export const amsFieldGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsFieldInvalidBorderInlineStart = "0.1875rem solid #ec0000";
 export const amsFieldInvalidPaddingInlineStart =
@@ -577,6 +578,7 @@ export const amsHeadingFontWeight = "800";
 export const amsHeadingTextWrap = "balance";
 export const amsHeadingInverseColor = "#ffffff";
 export const amsHintFontWeight = "400";
+export const amsHintInFieldsetColor = "#767676";
 export const amsIconButtonColor = "#004699";
 export const amsIconButtonCursor = "pointer";
 export const amsIconButtonOutlineOffset = "0.25rem";
@@ -643,6 +645,7 @@ export const amsLabelFontSize =
 export const amsLabelFontWeight = "800";
 export const amsLabelLineHeight = "1.3";
 export const amsLabelTextWrap = "balance";
+export const amsLabelInFieldsetFontWeight = "400";
 export const amsLinkListGap = "clamp(0.5rem, 0.4286rem + 0.3571vw, 0.75rem)";
 export const amsLinkListLinkColor = "#004699";
 export const amsLinkListLinkFontFamily = "'Amsterdam Sans', Arial, sans-serif";
@@ -803,6 +806,8 @@ export const amsPageHeaderMenuItemOutlineOffset = "0.25rem";
 export const amsPageHeaderMenuItemPaddingBlock =
   "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuItemHoverColor = "#003677";
+export const amsPageHeaderMenuLinkGap =
+  "clamp(0.25rem, 0.2143rem + 0.1786vw, 0.375rem)";
 export const amsPageHeaderMenuLinkTextDecorationLine = "none";
 export const amsPageHeaderMenuLinkTextDecorationThickness = "0.125rem";
 export const amsPageHeaderMenuLinkTextUnderlineOffset = "0.15625rem";
@@ -821,6 +826,9 @@ export const amsPageHeadingTextWrap = "balance";
 export const amsPageHeadingInverseColor = "#ffffff";
 export const amsPageBackgroundColor = "#ffffff";
 export const amsPageMaxInlineSize = "90rem";
+export const amsPageWithMenuMaxInlineSize = "120rem";
+export const amsPageWithMenuAreaSkipLinkMarginInlineEnd =
+  "clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem)"; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
 export const amsPaginationFontFamily = "'Amsterdam Sans', Arial, sans-serif";
 export const amsPaginationFontSize =
   "clamp(1.125rem, 1.0893rem + 0.1786vw, 1.25rem)";

package/dist/index.scss

@@ -130,6 +130,7 @@ $ams-ordered-list-ordered-list-item-margin-inline-start: 1.5rem; // Indent less
 $ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; // The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem.
 $ams-page-footer-spotlight-background-color: #004699;
 $ams-page-max-inline-size: 90rem;
+$ams-page-with-menu-max-inline-size: 120rem;
 $ams-search-field-input-cancel-button-background-image: 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>");
 $ams-select-background-image: 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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
 $ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -419,6 +420,7 @@ $ams-field-set-legend-font-weight: $ams-typography-heading-font-weight;
 $ams-field-set-legend-line-height: $ams-typography-heading-3-line-height;
 $ams-field-set-legend-margin-block-end: $ams-space-s;
 $ams-field-set-legend-text-wrap: $ams-typography-heading-text-wrap;
+$ams-field-set-legend-in-fieldset-font-weight: $ams-typography-body-text-font-weight;
 $ams-field-gap: $ams-space-s;
 $ams-field-invalid-border-inline-start: $ams-border-width-l solid $ams-color-feedback-error;
 $ams-field-invalid-padding-inline-start: $ams-space-m;
@@ -469,6 +471,7 @@ $ams-heading-font-weight: $ams-typography-heading-font-weight;
 $ams-heading-text-wrap: $ams-typography-heading-text-wrap;
 $ams-heading-inverse-color: $ams-color-text-inverse;
 $ams-hint-font-weight: $ams-typography-body-text-font-weight;
+$ams-hint-in-fieldset-color: $ams-color-text-secondary;
 $ams-icon-button-color: $ams-color-interactive;
 $ams-icon-button-cursor: $ams-cursor-interactive;
 $ams-icon-button-outline-offset: $ams-focus-outline-offset;
@@ -513,6 +516,7 @@ $ams-label-font-family: $ams-typography-font-family;
 $ams-label-font-weight: $ams-typography-heading-font-weight;
 $ams-label-line-height: $ams-typography-heading-3-line-height;
 $ams-label-text-wrap: $ams-typography-heading-text-wrap;
+$ams-label-in-fieldset-font-weight: $ams-typography-body-text-font-weight;
 $ams-link-list-gap: $ams-space-s;
 $ams-link-list-link-font-family: $ams-typography-font-family;
 $ams-link-list-link-font-size: $ams-typography-body-text-font-size;
@@ -597,6 +601,7 @@ $ams-page-header-menu-item-font-weight: $ams-typography-body-text-font-weight;
 $ams-page-header-menu-item-line-height: $ams-typography-body-text-line-height;
 $ams-page-header-menu-item-outline-offset: $ams-focus-outline-offset;
 $ams-page-header-menu-item-padding-block: $ams-space-xs;
+$ams-page-header-menu-link-gap: $ams-space-xs;
 $ams-page-header-menu-link-text-decoration-line: $ams-links-subtle-text-decoration-line;
 $ams-page-header-menu-link-text-decoration-thickness: $ams-links-text-decoration-thickness;
 $ams-page-header-menu-link-text-underline-offset: $ams-links-text-underline-offset;
@@ -878,6 +883,7 @@ $ams-page-header-wide-padding-inline: $ams-grid-wide-padding-inline;
 $ams-page-header-brand-name-font-size: $ams-typography-heading-3-font-size;
 $ams-page-header-menu-item-color: $ams-links-color;
 $ams-page-header-menu-item-hover-color: $ams-links-hover-color;
+$ams-page-with-menu-area-skip-link-margin-inline-end: $ams-grid-padding-inline; // Must be the Grid inline padding, to make sure Skip Link and Grid line up
 $ams-pagination-link-color: $ams-links-color;
 $ams-pagination-link-hover-color: $ams-links-hover-color;
 $ams-password-input-background-color: $ams-inputs-background-color;

package/dist/index.theme.css

@@ -132,6 +132,7 @@
   --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --ams-page-footer-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 90rem;
+  --ams-page-with-menu-max-inline-size: 120rem;
   --ams-search-field-input-cancel-button-background-image: 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>");
   --ams-select-background-image: 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='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -421,6 +422,7 @@
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
   --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-field-set-legend-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-field-gap: var(--ams-space-s);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
   --ams-field-invalid-padding-inline-start: var(--ams-space-m);
@@ -471,6 +473,7 @@
   --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-heading-inverse-color: var(--ams-color-text-inverse);
   --ams-hint-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-hint-in-fieldset-color: var(--ams-color-text-secondary);
   --ams-icon-button-color: var(--ams-color-interactive);
   --ams-icon-button-cursor: var(--ams-cursor-interactive);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
@@ -515,6 +518,7 @@
   --ams-label-font-weight: var(--ams-typography-heading-font-weight);
   --ams-label-line-height: var(--ams-typography-heading-3-line-height);
   --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-label-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-link-list-gap: var(--ams-space-s);
   --ams-link-list-link-font-family: var(--ams-typography-font-family);
   --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
@@ -599,6 +603,7 @@
   --ams-page-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
   --ams-page-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
   --ams-page-header-menu-item-padding-block: var(--ams-space-xs);
+  --ams-page-header-menu-link-gap: var(--ams-space-xs);
   --ams-page-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-page-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
@@ -880,6 +885,7 @@
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-3-font-size);
   --ams-page-header-menu-item-color: var(--ams-links-color);
   --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
+  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Skip Link and Grid line up */
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
   --ams-password-input-background-color: var(--ams-inputs-background-color);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam",

package/src/components/ams/field-set.tokens.json

@@ -12,7 +12,10 @@
         "font-weight": { "value": "{ams.typography.heading.font-weight}" },
         "line-height": { "value": "{ams.typography.heading.3.line-height}" },
         "margin-block-end": { "value": "{ams.space.s}" },
-        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
+        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
+        "in-fieldset": {
+          "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+        }
       }
     }
   }

package/src/components/ams/hint.tokens.json

@@ -1,7 +1,10 @@
 {
   "ams": {
     "hint": {
-      "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "in-fieldset": {
+        "color": { "value": "{ams.color.text.secondary}" }
+      }
     }
   }
 }

package/src/components/ams/label.tokens.json

@@ -6,7 +6,10 @@
       "font-size": { "value": "{ams.typography.heading.3.font-size}" },
       "font-weight": { "value": "{ams.typography.heading.font-weight}" },
       "line-height": { "value": "{ams.typography.heading.3.line-height}" },
-      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
+      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
+      "in-fieldset": {
+        "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+      }
     }
   }
 }

package/src/components/ams/page-header.tokens.json

@@ -51,6 +51,7 @@
           }
         },
         "link": {
+          "gap": { "value": "{ams.space.xs}" },
           "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
           "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
           "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },

package/src/components/ams/page.tokens.json

@@ -2,7 +2,16 @@
   "ams": {
     "page": {
       "background-color": { "value": "{ams.color.background}" },
-      "max-inline-size": { "value": "90rem" }
+      "max-inline-size": { "value": "90rem" },
+      "with-menu": {
+        "max-inline-size": { "value": "120rem" },
+        "area-skip-link": {
+          "margin-inline-end": {
+            "value": "{ams.grid.padding-inline}",
+            "comment": "Must be the Grid inline padding, to make sure Skip Link and Grid line up"
+          }
+        }
+      }
     }
   }
 }