@rijkshuisstijl-community/design-tokens 1.0.1 → 1.1.0

package/dist/uitvoerend-violet/index.json

@@ -134,6 +134,34 @@
   "utrechtTableContainerBoxInlineStartShadowSpread": 0,
   "utrechtTableContainerBoxInlineStartShadowColor": "#0000001a",
   "utrechtTableFontSize": "1.25rem",
+  "utrechtSkipLinkFontWeight": 700,
+  "utrechtSkipLinkFontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtSkipLinkFontSize": "1.25rem",
+  "utrechtSkipLinkLineHeight": "150%",
+  "utrechtSkipLinkMinBlockSize": "48px",
+  "utrechtSkipLinkMinInlineSize": "48px",
+  "utrechtSkipLinkPaddingBlockEnd": "0.75rem",
+  "utrechtSkipLinkPaddingBlockStart": "0.75rem",
+  "utrechtSkipLinkPaddingInlineEnd": "1rem",
+  "utrechtSkipLinkPaddingInlineStart": "1rem",
+  "utrechtSkipLinkFocusBackgroundColor": "#fff",
+  "utrechtSkipLinkFocusBorderColor": "#154273",
+  "utrechtSkipLinkFocusBorderStyle": "solid",
+  "utrechtSkipLinkFocusBorderWidth": "2px",
+  "utrechtSkipLinkFocusColor": "#0F172A",
+  "utrechtSkipLinkFocusTextDecoration": "None",
+  "utrechtSkipLinkFocusVisibleOutlineColor": "#000",
+  "utrechtSkipLinkBackgroundColor": "#154273",
+  "utrechtSkipLinkBorderColor": "transparent",
+  "utrechtSkipLinkColor": "#fff",
+  "utrechtSkipLinkBorderWidth": "2px",
+  "utrechtSkipLinkBoxBlockEndShadowOffsetX": 0,
+  "utrechtSkipLinkBoxBlockEndShadowOffsetY": "16px",
+  "utrechtSkipLinkBoxBlockEndShadowBlurRadius": "48px",
+  "utrechtSkipLinkBoxBlockEndShadowSpreadRadius": 0,
+  "utrechtSkipLinkBoxBlockEndShadowColor": "#0000001a",
+  "utrechtSkipLinkTextDecoration": "underline",
+  "utrechtSkipLinkTextUnderlineOffset": "0.125rem",
   "utrechtSeparatorColor": "#CBD5E1",
   "utrechtSeparatorBlockSize": "2px",
   "utrechtSeparatorMarginBlockEnd": "0.75rem",
@@ -210,6 +238,17 @@
   "utrechtRadioButtonHoverBorderWidth": "1px",
   "utrechtRadioButtonBorderRadius": "999px",
   "utrechtRadioButtonBorderWidth": "1px",
+  "utrechtParagraphColor": "#0F172A",
+  "utrechtParagraphFontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtParagraphFontSize": "1.25rem",
+  "utrechtParagraphFontWeight": 400,
+  "utrechtParagraphLineHeight": "150%",
+  "utrechtParagraphMarginBlockEnd": 0,
+  "utrechtParagraphMarginBlockStart": 0,
+  "utrechtParagraphLeadColor": "#0F172A",
+  "utrechtParagraphLeadFontSize": "1.5rem",
+  "utrechtParagraphLeadFontWeight": 400,
+  "utrechtParagraphLeadLineHeight": "150%",
   "utrechtOrderedListPaddingInlineStart": "1.5rem",
   "utrechtOrderedListMarginBlockEnd": "0.25rem",
   "utrechtOrderedListMarginBlockStart": "0.25rem",
@@ -251,6 +290,41 @@
   "utrechtLinkFontWeight": 400,
   "utrechtLinkFontSize": "1.25rem",
   "utrechtLinkLineHeight": "150%",
+  "utrechtHeading1Color": "#154273",
+  "utrechtHeading1FontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtHeading1FontWeight": 700,
+  "utrechtHeading1LineHeight": "125%",
+  "utrechtHeading1FontSize": "3.125rem",
+  "utrechtHeading1MarginBlockEnd": 0,
+  "utrechtHeading1MarginBlockStart": 0,
+  "utrechtHeading2Color": "#154273",
+  "utrechtHeading2FontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtHeading2FontWeight": 700,
+  "utrechtHeading2LineHeight": "125%",
+  "utrechtHeading2FontSize": "2.5rem",
+  "utrechtHeading2MarginBlockEnd": 0,
+  "utrechtHeading2MarginBlockStart": 0,
+  "utrechtHeading3Color": "#154273",
+  "utrechtHeading3FontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtHeading3FontWeight": 700,
+  "utrechtHeading3LineHeight": "125%",
+  "utrechtHeading3FontSize": "1.875rem",
+  "utrechtHeading3MarginBlockEnd": 0,
+  "utrechtHeading3MarginBlockStart": 0,
+  "utrechtHeading4Color": "#154273",
+  "utrechtHeading4FontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtHeading4FontWeight": 700,
+  "utrechtHeading4LineHeight": "125%",
+  "utrechtHeading4FontSize": "1.5rem",
+  "utrechtHeading4MarginBlockEnd": 0,
+  "utrechtHeading4MarginBlockStart": 0,
+  "utrechtHeading5Color": "#154273",
+  "utrechtHeading5FontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtHeading5FontWeight": 700,
+  "utrechtHeading5LineHeight": "125%",
+  "utrechtHeading5FontSize": "1.25rem",
+  "utrechtHeading5MarginBlockEnd": 0,
+  "utrechtHeading5MarginBlockStart": 0,
   "utrechtFormLabelColor": "#0F172A",
   "utrechtFormLabelFontSize": "1.25rem",
   "utrechtFormLabelFontWeight": 700,
@@ -310,6 +384,19 @@
   "utrechtFormFieldsetInvalidBorderInlineStartColor": "#d52b1e",
   "utrechtFormFieldsetInvalidPaddingInlineStart": 0,
   "utrechtFormFieldsetInvalidBorderInlineStartWidth": "0px",
+  "utrechtNumberBadgeFontSize": "1.25rem",
+  "utrechtNumberBadgeLineHeight": "150%",
+  "utrechtNumberBadgeMinBlockSize": "24px",
+  "utrechtNumberBadgeMinInlineSize": "24px",
+  "utrechtNumberBadgeFontWeight": 700,
+  "utrechtNumberBadgeBorderWidth": "0px",
+  "utrechtNumberBadgeBorderRadius": "999px",
+  "utrechtNumberBadgeFontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "utrechtNumberBadgeBackgroundColor": "#154273",
+  "utrechtNumberBadgeBorderColor": "transparent",
+  "utrechtNumberBadgeColor": "#fff",
+  "utrechtNumberBadgePaddingInline": "0.5rem",
+  "utrechtNumberBadgePaddingBlock": "0.5rem",
   "utrechtCheckboxBorderRadius": "2.5px",
   "utrechtCheckboxSize": "24px",
   "utrechtCheckboxIconSize": "24px",
@@ -974,14 +1061,14 @@
   "rhcCardAsLinkColor": "#0F172A",
   "rhcCardAsLinkColumnGap": "1rem",
   "rhcCardAsLinkInlineSize": "328px",
-  "rhcCardAsLinkIconColor": "#0F172A",
+  "rhcCardAsLinkIconColor": "#154273",
   "rhcCardAsLinkIconSize": "24px",
   "rhcCardAsLinkLinkColor": "#01689b",
   "rhcCardAsLinkLinkTextDecoration": "underline",
   "rhcCardAsLinkLinkActiveTextDecoration": "none",
   "rhcCardAsLinkLinkHoverTextDecoration": "none",
   "rhcCardAsLinkLinkFocusTextDecoration": "none",
-  "rhcCardAsLinkMetadataColor": "#0F172A",
+  "rhcCardAsLinkMetadataColor": "#334155",
   "rhcCardAsLinkPaddingBlockEnd": "1rem",
   "rhcCardAsLinkPaddingBlockStart": "1rem",
   "rhcCardAsLinkPaddingInlineEnd": "1rem",
@@ -997,6 +1084,7 @@
   "rhcCardAsLinkFullBleedBorderColor": "transparent",
   "rhcCardAsLinkFullBleedColor": "#fff",
   "rhcCardAsLinkFullBleedOpacity": 0.5,
+  "rhcCardAsLinkHeadingColor": "#154273",
   "rhcCardAsLinkHeadingPaddingBlockStart": "0.5rem",
   "rhcCardAsLinkHeadingFontSize": "1.5rem",
   "rhcCardAsLinkHeadingFontWeight": 700,
@@ -1145,6 +1233,28 @@
   "nlParagraphLeadFontSize": "1.5rem",
   "nlParagraphLeadFontWeight": 400,
   "nlParagraphLeadLineHeight": "150%",
+  "nlLinkColor": "#01689b",
+  "nlLinkTextDecorationColor": "#01689b",
+  "nlLinkActiveColor": "#42145f",
+  "nlLinkActiveTextDecoration": "None",
+  "nlLinkFocusBackgroundColor": "transparent",
+  "nlLinkFocusColor": "#01689b",
+  "nlLinkFocusTextDecoration": "None",
+  "nlLinkFocusTextDecorationThickness": "auto",
+  "nlLinkHoverColor": "#01496c",
+  "nlLinkHoverTextDecoration": "None",
+  "nlLinkHoverTextDecorationThickness": "auto",
+  "nlLinkVisitedColor": "#42145f",
+  "nlLinkTextDecoration": "underline",
+  "nlLinkIconInsetBlockStart": "0.25rem",
+  "nlLinkIconSize": "24px",
+  "nlLinkColumnGap": "0.25rem",
+  "nlLinkTextDecorationThickness": "auto",
+  "nlLinkTextUnderlineOffset": "0.125rem",
+  "nlLinkFontFamily": "Fira Sans, Arial, Verdana, sans-serif",
+  "nlLinkFontWeight": 400,
+  "nlLinkFontSize": "1.25rem",
+  "nlLinkLineHeight": "150%",
   "nlHeadingLevel1Color": "#154273",
   "nlHeadingLevel1FontFamily": "Fira Sans, Arial, Verdana, sans-serif",
   "nlHeadingLevel1FontWeight": 700,

package/dist/uitvoerend-violet/index.tokens.json

@@ -197,6 +197,42 @@
       },
       "font-size": "1.25rem"
     },
+    "skip-link": {
+      "font-weight": 700,
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-size": "1.25rem",
+      "line-height": "150%",
+      "min-block-size": "48px",
+      "min-inline-size": "48px",
+      "padding-block-end": "0.75rem",
+      "padding-block-start": "0.75rem",
+      "padding-inline-end": "1rem",
+      "padding-inline-start": "1rem",
+      "focus": {
+        "background-color": "#fff",
+        "border-color": "#154273",
+        "border-style": "solid",
+        "border-width": "2px",
+        "color": "#0F172A",
+        "text-decoration": "None"
+      },
+      "focus-visible": {
+        "outline-color": "#000"
+      },
+      "background-color": "#154273",
+      "border-color": "transparent",
+      "color": "#fff",
+      "border-width": "2px",
+      "box-block-end-shadow": {
+        "offset-x": 0,
+        "offset-y": "16px",
+        "blur-radius": "48px",
+        "spread-radius": 0,
+        "color": "#0000001a"
+      },
+      "text-decoration": "underline",
+      "text-underline-offset": "0.125rem"
+    },
     "separator": {
       "color": "#CBD5E1",
       "block-size": "2px",
@@ -311,6 +347,21 @@
       "border-radius": "999px",
       "border-width": "1px"
     },
+    "paragraph": {
+      "color": "#0F172A",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-size": "1.25rem",
+      "font-weight": 400,
+      "line-height": "150%",
+      "margin-block-end": 0,
+      "margin-block-start": 0,
+      "lead": {
+        "color": "#0F172A",
+        "font-size": "1.5rem",
+        "font-weight": 400,
+        "line-height": "150%"
+      }
+    },
     "ordered-list": {
       "padding-inline-start": "1.5rem",
       "margin-block-end": "0.25rem",
@@ -374,6 +425,51 @@
       "font-size": "1.25rem",
       "line-height": "150%"
     },
+    "heading-1": {
+      "color": "#154273",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-weight": 700,
+      "line-height": "125%",
+      "font-size": "3.125rem",
+      "margin-block-end": 0,
+      "margin-block-start": 0
+    },
+    "heading-2": {
+      "color": "#154273",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-weight": 700,
+      "line-height": "125%",
+      "font-size": "2.5rem",
+      "margin-block-end": 0,
+      "margin-block-start": 0
+    },
+    "heading-3": {
+      "color": "#154273",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-weight": 700,
+      "line-height": "125%",
+      "font-size": "1.875rem",
+      "margin-block-end": 0,
+      "margin-block-start": 0
+    },
+    "heading-4": {
+      "color": "#154273",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-weight": 700,
+      "line-height": "125%",
+      "font-size": "1.5rem",
+      "margin-block-end": 0,
+      "margin-block-start": 0
+    },
+    "heading-5": {
+      "color": "#154273",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-weight": 700,
+      "line-height": "125%",
+      "font-size": "1.25rem",
+      "margin-block-end": 0,
+      "margin-block-start": 0
+    },
     "form-label": {
       "color": "#0F172A",
       "font-size": "1.25rem",
@@ -471,6 +567,21 @@
         "border-inline-start-width": "0px"
       }
     },
+    "number-badge": {
+      "font-size": "1.25rem",
+      "line-height": "150%",
+      "min-block-size": "24px",
+      "min-inline-size": "24px",
+      "font-weight": 700,
+      "border-width": "0px",
+      "border-radius": "999px",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "background-color": "#154273",
+      "border-color": "transparent",
+      "color": "#fff",
+      "padding-inline": "0.5rem",
+      "padding-block": "0.5rem"
+    },
     "checkbox": {
       "border-radius": "2.5px",
       "size": "24px",
@@ -1521,7 +1632,7 @@
       "column-gap": "1rem",
       "inline-size": "328px",
       "icon": {
-        "color": "#0F172A",
+        "color": "#154273",
         "size": "24px"
       },
       "link": {
@@ -1538,7 +1649,7 @@
         }
       },
       "metadata": {
-        "color": "#0F172A"
+        "color": "#334155"
       },
       "padding-block-end": "1rem",
       "padding-block-start": "1rem",
@@ -1564,6 +1675,7 @@
         "opacity": 0.5
       },
       "heading": {
+        "color": "#154273",
         "padding-block-start": "0.5rem",
         "font-size": "1.5rem",
         "font-weight": 700
@@ -1788,6 +1900,40 @@
         "line-height": "150%"
       }
     },
+    "link": {
+      "color": "#01689b",
+      "text-decoration-color": "#01689b",
+      "active": {
+        "color": "#42145f",
+        "text-decoration": "None"
+      },
+      "focus": {
+        "background-color": "transparent",
+        "color": "#01689b",
+        "text-decoration": "None",
+        "text-decoration-thickness": "auto"
+      },
+      "hover": {
+        "color": "#01496c",
+        "text-decoration": "None",
+        "text-decoration-thickness": "auto"
+      },
+      "visited": {
+        "color": "#42145f"
+      },
+      "text-decoration": "underline",
+      "icon": {
+        "inset-block-start": "0.25rem",
+        "size": "24px"
+      },
+      "column-gap": "0.25rem",
+      "text-decoration-thickness": "auto",
+      "text-underline-offset": "0.125rem",
+      "font-family": "Fira Sans, Arial, Verdana, sans-serif",
+      "font-weight": 400,
+      "font-size": "1.25rem",
+      "line-height": "150%"
+    },
     "heading-level-1": {
       "color": "#154273",
       "font-family": "Fira Sans, Arial, Verdana, sans-serif",

package/dist/uitvoerend-violet/root.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun, 09 Mar 2025 17:51:30 GMT
+ * Generated on Wed, 19 Mar 2025 14:52:03 GMT
  */
 
 :root {
@@ -52,6 +52,28 @@
   --nl-heading-level-1-font-weight: 700;
   --nl-heading-level-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
   --nl-heading-level-1-color: #154273;
+  --nl-link-line-height: 150%;
+  --nl-link-font-size: 1.25rem;
+  --nl-link-font-weight: 400;
+  --nl-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --nl-link-text-underline-offset: 0.125rem;
+  --nl-link-text-decoration-thickness: auto;
+  --nl-link-column-gap: 0.25rem;
+  --nl-link-icon-size: 24px;
+  --nl-link-icon-inset-block-start: 0.25rem;
+  --nl-link-text-decoration: underline;
+  --nl-link-visited-color: #42145f;
+  --nl-link-hover-text-decoration-thickness: auto;
+  --nl-link-hover-text-decoration: None;
+  --nl-link-hover-color: #01496c;
+  --nl-link-focus-text-decoration-thickness: auto;
+  --nl-link-focus-text-decoration: None;
+  --nl-link-focus-color: #01689b;
+  --nl-link-focus-background-color: transparent;
+  --nl-link-active-text-decoration: None;
+  --nl-link-active-color: #42145f;
+  --nl-link-text-decoration-color: #01689b;
+  --nl-link-color: #01689b;
   --nl-paragraph-lead-line-height: 150%;
   --nl-paragraph-lead-font-weight: 400;
   --nl-paragraph-lead-font-size: 1.5rem;
@@ -200,6 +222,7 @@
   --rhc-card-as-link-heading-font-weight: 700;
   --rhc-card-as-link-heading-font-size: 1.5rem;
   --rhc-card-as-link-heading-padding-block-start: 0.5rem;
+  --rhc-card-as-link-heading-color: #154273;
   --rhc-card-as-link-full-bleed-opacity: 0.5;
   --rhc-card-as-link-full-bleed-color: #fff;
   --rhc-card-as-link-full-bleed-border-color: transparent;
@@ -215,14 +238,14 @@
   --rhc-card-as-link-padding-inline-end: 1rem;
   --rhc-card-as-link-padding-block-start: 1rem;
   --rhc-card-as-link-padding-block-end: 1rem;
-  --rhc-card-as-link-metadata-color: #0F172A;
+  --rhc-card-as-link-metadata-color: #334155;
   --rhc-card-as-link-link-focus-text-decoration: none;
   --rhc-card-as-link-link-hover-text-decoration: none;
   --rhc-card-as-link-link-active-text-decoration: none;
   --rhc-card-as-link-link-text-decoration: underline;
   --rhc-card-as-link-link-color: #01689b;
   --rhc-card-as-link-icon-size: 24px;
-  --rhc-card-as-link-icon-color: #0F172A;
+  --rhc-card-as-link-icon-color: #154273;
   --rhc-card-as-link-inline-size: 328px;
   --rhc-card-as-link-column-gap: 1rem;
   --rhc-card-as-link-color: #0F172A;
@@ -887,6 +910,19 @@
   --utrecht-checkbox-icon-size: 24px;
   --utrecht-checkbox-size: 24px;
   --utrecht-checkbox-border-radius: 2.5px;
+  --utrecht-number-badge-padding-block: 0.5rem;
+  --utrecht-number-badge-padding-inline: 0.5rem;
+  --utrecht-number-badge-color: #fff;
+  --utrecht-number-badge-border-color: transparent;
+  --utrecht-number-badge-background-color: #154273;
+  --utrecht-number-badge-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-number-badge-border-radius: 999px;
+  --utrecht-number-badge-border-width: 0px;
+  --utrecht-number-badge-font-weight: 700;
+  --utrecht-number-badge-min-inline-size: 24px;
+  --utrecht-number-badge-min-block-size: 24px;
+  --utrecht-number-badge-line-height: 150%;
+  --utrecht-number-badge-font-size: 1.25rem;
   --utrecht-form-fieldset-invalid-border-inline-start-width: 0px;
   --utrecht-form-fieldset-invalid-padding-inline-start: 0;
   --utrecht-form-fieldset-invalid-border-inline-start-color: #d52b1e;
@@ -946,6 +982,41 @@
   --utrecht-form-label-font-weight: 700;
   --utrecht-form-label-font-size: 1.25rem;
   --utrecht-form-label-color: #0F172A;
+  --utrecht-heading-5-margin-block-start: 0;
+  --utrecht-heading-5-margin-block-end: 0;
+  --utrecht-heading-5-font-size: 1.25rem;
+  --utrecht-heading-5-line-height: 125%;
+  --utrecht-heading-5-font-weight: 700;
+  --utrecht-heading-5-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-heading-5-color: #154273;
+  --utrecht-heading-4-margin-block-start: 0;
+  --utrecht-heading-4-margin-block-end: 0;
+  --utrecht-heading-4-font-size: 1.5rem;
+  --utrecht-heading-4-line-height: 125%;
+  --utrecht-heading-4-font-weight: 700;
+  --utrecht-heading-4-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-heading-4-color: #154273;
+  --utrecht-heading-3-margin-block-start: 0;
+  --utrecht-heading-3-margin-block-end: 0;
+  --utrecht-heading-3-font-size: 1.875rem;
+  --utrecht-heading-3-line-height: 125%;
+  --utrecht-heading-3-font-weight: 700;
+  --utrecht-heading-3-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-heading-3-color: #154273;
+  --utrecht-heading-2-margin-block-start: 0;
+  --utrecht-heading-2-margin-block-end: 0;
+  --utrecht-heading-2-font-size: 2.5rem;
+  --utrecht-heading-2-line-height: 125%;
+  --utrecht-heading-2-font-weight: 700;
+  --utrecht-heading-2-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-heading-2-color: #154273;
+  --utrecht-heading-1-margin-block-start: 0;
+  --utrecht-heading-1-margin-block-end: 0;
+  --utrecht-heading-1-font-size: 3.125rem;
+  --utrecht-heading-1-line-height: 125%;
+  --utrecht-heading-1-font-weight: 700;
+  --utrecht-heading-1-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-heading-1-color: #154273;
   --utrecht-link-line-height: 150%;
   --utrecht-link-font-size: 1.25rem;
   --utrecht-link-font-weight: 400;
@@ -987,6 +1058,17 @@
   --utrecht-ordered-list-margin-block-start: 0.25rem;
   --utrecht-ordered-list-margin-block-end: 0.25rem;
   --utrecht-ordered-list-padding-inline-start: 1.5rem;
+  --utrecht-paragraph-lead-line-height: 150%;
+  --utrecht-paragraph-lead-font-weight: 400;
+  --utrecht-paragraph-lead-font-size: 1.5rem;
+  --utrecht-paragraph-lead-color: #0F172A;
+  --utrecht-paragraph-margin-block-start: 0;
+  --utrecht-paragraph-margin-block-end: 0;
+  --utrecht-paragraph-line-height: 150%;
+  --utrecht-paragraph-font-weight: 400;
+  --utrecht-paragraph-font-size: 1.25rem;
+  --utrecht-paragraph-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-paragraph-color: #0F172A;
   --utrecht-radio-button-border-width: 1px;
   --utrecht-radio-button-border-radius: 999px;
   --utrecht-radio-button-hover-border-width: 1px;
@@ -1063,6 +1145,34 @@
   --utrecht-separator-margin-block-end: 0.75rem;
   --utrecht-separator-block-size: 2px;
   --utrecht-separator-color: #CBD5E1;
+  --utrecht-skip-link-text-underline-offset: 0.125rem;
+  --utrecht-skip-link-text-decoration: underline;
+  --utrecht-skip-link-box-block-end-shadow-color: #0000001a;
+  --utrecht-skip-link-box-block-end-shadow-spread-radius: 0;
+  --utrecht-skip-link-box-block-end-shadow-blur-radius: 48px;
+  --utrecht-skip-link-box-block-end-shadow-offset-y: 16px;
+  --utrecht-skip-link-box-block-end-shadow-offset-x: 0;
+  --utrecht-skip-link-border-width: 2px;
+  --utrecht-skip-link-color: #fff;
+  --utrecht-skip-link-border-color: transparent;
+  --utrecht-skip-link-background-color: #154273;
+  --utrecht-skip-link-focus-visible-outline-color: #000;
+  --utrecht-skip-link-focus-text-decoration: None;
+  --utrecht-skip-link-focus-color: #0F172A;
+  --utrecht-skip-link-focus-border-width: 2px;
+  --utrecht-skip-link-focus-border-style: solid;
+  --utrecht-skip-link-focus-border-color: #154273;
+  --utrecht-skip-link-focus-background-color: #fff;
+  --utrecht-skip-link-padding-inline-start: 1rem;
+  --utrecht-skip-link-padding-inline-end: 1rem;
+  --utrecht-skip-link-padding-block-start: 0.75rem;
+  --utrecht-skip-link-padding-block-end: 0.75rem;
+  --utrecht-skip-link-min-inline-size: 48px;
+  --utrecht-skip-link-min-block-size: 48px;
+  --utrecht-skip-link-line-height: 150%;
+  --utrecht-skip-link-font-size: 1.25rem;
+  --utrecht-skip-link-font-family: Fira Sans, Arial, Verdana, sans-serif;
+  --utrecht-skip-link-font-weight: 700;
   --utrecht-table-font-size: 1.25rem;
   --utrecht-table-container-box-inline-start-shadow-color: #0000001a;
   --utrecht-table-container-box-inline-start-shadow-spread: 0;