@rijkshuisstijl-community/design-tokens 1.1.0 → 1.2.0

package/figma/figma.tokens.json

@@ -849,15 +849,13 @@
             "type": "color",
             "description": "Gebruik voor content die extra context biedt, maar niet essentieel is om de interface te begrijpen."
           },
-          "onEmphasis": {
-            "parent": "mode/light",
-            "value": "{rhc.color.wit}",
-            "type": "color",
-            "description": "Tekst en iconen die op een sterke achtergrond staan. Zoals het label in de primaire button of links in de footer."
-          },
           "link": {
             "value": "{rhc.color.donkerblauw.500}",
             "type": "color"
+          },
+          "onEmphasis": {
+            "value": "{rhc.color.wit}",
+            "type": "color"
           }
         },
         "border": {
@@ -949,6 +947,12 @@
             "type": "color"
           }
         },
+        "accent-2": {
+          "500": {
+            "value": "{rhc.color.roze.500}",
+            "type": "color"
+          }
+        },
         "primary": {
           "50": {
             "value": "{rhc.color.lintblauw.50}",
@@ -2104,15 +2108,15 @@
     "utrecht": {
       "button": {
         "background-color": {
-          "value": "transparent",
+          "value": "{rhc.color.cool-grey.900}",
           "type": "color"
         },
         "border-color": {
-          "value": "{rhc.color.cool-grey.700}",
+          "value": "{rhc.color.none}",
           "type": "color"
         },
         "color": {
-          "value": "{rhc.color.cool-grey.700}",
+          "value": "{rhc.color.wit}",
           "type": "color"
         },
         "border-radius": {
@@ -2167,7 +2171,7 @@
         },
         "disabled": {
           "background-color": {
-            "value": "{rhc.color.cool-grey.50}",
+            "value": "{rhc.color.cool-grey.200}",
             "type": "color"
           },
           "border-color": {
@@ -2175,13 +2179,13 @@
             "type": "color"
           },
           "color": {
-            "value": "{rhc.color.cool-grey.500}",
+            "value": "{rhc.color.cool-grey.400}",
             "type": "color"
           }
         },
         "focus": {
           "background-color": {
-            "value": "{rhc.color.donkergeel.200}",
+            "value": "{rhc.color.cool-grey.600}",
             "type": "color"
           },
           "border-color": {
@@ -2189,35 +2193,35 @@
             "type": "color"
           },
           "color": {
-            "value": "{rhc.color.cool-grey.800}",
+            "value": "{rhc.color.wit}",
             "type": "color"
           }
         },
         "hover": {
           "background-color": {
-            "value": "{rhc.color.cool-grey.50}",
+            "value": "{rhc.color.cool-grey.600}",
             "type": "color"
           },
           "border-color": {
-            "value": "{rhc.color.cool-grey.800}",
+            "value": "{rhc.color.none}",
             "type": "color"
           },
           "color": {
-            "value": "{rhc.color.cool-grey.800}",
+            "value": "{rhc.color.wit}",
             "type": "color"
           }
         },
         "active": {
           "background-color": {
-            "value": "{rhc.color.cool-grey.300}",
+            "value": "{rhc.color.cool-grey.800}",
             "type": "color"
           },
           "border-color": {
-            "value": "{rhc.color.cool-grey.900}",
+            "value": "{rhc.color.none}",
             "type": "color"
           },
           "color": {
-            "value": "{rhc.color.cool-grey.900}",
+            "value": "{rhc.color.wit}",
             "type": "color"
           }
         },
@@ -2244,7 +2248,7 @@
               "type": "color"
             },
             "color": {
-              "value": "{rhc.color.wit}",
+              "value": "{rhc.color.foreground.onEmphasis}",
               "type": "color"
             }
           },
@@ -2257,7 +2261,7 @@
             "type": "color"
           },
           "color": {
-            "value": "{rhc.color.wit}",
+            "value": "{rhc.color.foreground.onEmphasis}",
             "type": "color"
           },
           "disabled": {
@@ -2266,7 +2270,7 @@
               "type": "color"
             },
             "border-color": {
-              "value": "{rhc.color.primary.200}",
+              "value": "{rhc.color.none}",
               "type": "color"
             },
             "color": {
@@ -2276,7 +2280,7 @@
           },
           "focus": {
             "background-color": {
-              "value": "{rhc.color.primary.500}",
+              "value": "{rhc.color.primary.hover}",
               "type": "color"
             },
             "border-color": {
@@ -2284,7 +2288,7 @@
               "type": "color"
             },
             "color": {
-              "value": "{rhc.color.wit}",
+              "value": "{rhc.color.foreground.onEmphasis}",
               "type": "color"
             }
           },
@@ -2311,7 +2315,7 @@
               "type": "color"
             },
             "color": {
-              "value": "{rhc.color.wit}",
+              "value": "{rhc.color.foreground.onEmphasis}",
               "type": "color"
             }
           },
@@ -2322,20 +2326,43 @@
           "line-height": {
             "value": "1.875rem",
             "type": "lineHeights"
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.foreground.onEmphasis}",
+              "type": "color"
+            }
           }
         },
         "secondary-action": {
           "hover": {
             "background-color": {
-              "value": "{rhc.color.primary.100}",
+              "value": "{rhc.color.primary.50}",
               "type": "color"
             },
             "border-color": {
-              "value": "{rhc.color.none}",
+              "value": "{rhc.color.primary.hover}",
               "type": "color"
             },
             "color": {
-              "value": "{rhc.color.primary.500}",
+              "value": "{rhc.color.primary.hover}",
               "type": "color"
             }
           },
@@ -2357,7 +2384,7 @@
               "type": "color"
             },
             "border-color": {
-              "value": "{rhc.color.primary.300}",
+              "value": "{rhc.color.primary.200}",
               "type": "color"
             },
             "color": {
@@ -2367,7 +2394,7 @@
           },
           "focus": {
             "background-color": {
-              "value": "{rhc.color.primary.100}",
+              "value": "{rhc.color.primary.50}",
               "type": "color"
             },
             "border-color": {
@@ -2375,7 +2402,7 @@
               "type": "color"
             },
             "color": {
-              "value": "{rhc.color.primary.500}",
+              "value": "{rhc.color.primary.hover}",
               "type": "color"
             }
           },
@@ -2390,10 +2417,19 @@
             },
             "border-color": {
               "value": "{rhc.color.primary.500}",
-              "type": "color"
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
             },
             "color": {
-              "value": "{rhc.color.primary.500}",
+              "value": "{rhc.color.primary.hover}",
               "type": "color"
             }
           },
@@ -2404,6 +2440,38 @@
           "line-height": {
             "value": "1.875rem",
             "type": "lineHeights"
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.primary.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
           }
         },
         "subtle": {
@@ -2417,7 +2485,7 @@
           },
           "hover": {
             "background-color": {
-              "value": "{rhc.color.none}",
+              "value": "{rhc.color.primary.50}",
               "type": "color"
             },
             "border-color": {
@@ -2465,13 +2533,13 @@
               "type": "color"
             },
             "color": {
-              "value": "{rhc.color.primary.500}",
+              "value": "{rhc.color.primary.hover}",
               "type": "color"
             }
           },
           "active": {
             "background-color": {
-              "value": "{rhc.color.none}",
+              "value": "{rhc.color.primary.200}",
               "type": "color"
             },
             "border-color": {
@@ -2495,6 +2563,43 @@
           "line-height": {
             "value": "1.875rem",
             "type": "lineHeights"
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.primary.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "pressed": {
+          "background-color": {
+            "value": "{rhc.color.cool-grey.800}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.wit}",
+            "type": "color"
           }
         }
       }
@@ -3162,24 +3267,6 @@
       }
     }
   },
-  "components/dot-badge": {
-    "rhc": {
-      "dot-badge": {
-        "border-radius": {
-          "value": "{rhc.border-radius.circle}",
-          "type": "border-radius"
-        },
-        "color": {
-          "value": "{rhc.color.rood.500}",
-          "type": "color"
-        },
-        "size": {
-          "value": "{rhc.size.quarter-lint}",
-          "type": "size"
-        }
-      }
-    }
-  },
   "components/drawer": {
     "todo": {
       "drawer": {
@@ -3318,6 +3405,24 @@
       }
     }
   },
+  "components/dot-badge": {
+    "rhc": {
+      "dot-badge": {
+        "border-radius": {
+          "value": "{rhc.border-radius.circle}",
+          "type": "border-radius"
+        },
+        "color": {
+          "value": "{rhc.color.rood.500}",
+          "type": "color"
+        },
+        "size": {
+          "value": "{rhc.size.quarter-lint}",
+          "type": "size"
+        }
+      }
+    }
+  },
   "components/fieldset": {
     "utrecht": {
       "form-fieldset": {
@@ -4267,6 +4372,24 @@
       }
     }
   },
+  "components/icon": {
+    "utrecht": {
+      "icon": {
+        "color": {
+          "value": "inherit",
+          "type": "color"
+        },
+        "size": {
+          "value": "{rhc.size.icon.functional}",
+          "type": "sizing"
+        },
+        "inset-block-start": {
+          "value": "{rhc.space.0}",
+          "type": "spacing"
+        }
+      }
+    }
+  },
   "components/icon-only-button": {
     "rhc": {
       "icon-only-button": {
@@ -5480,104 +5603,104 @@
       }
     }
   },
-  "components/paragraph/nl": {
-    "nl": {
+  "components/paragraph/utrecht": {
+    "utrecht": {
       "paragraph": {
         "color": {
-          "value": "{rhc.color.foreground.default}",
+          "value": "{nl.paragraph.color}",
           "type": "color"
         },
         "font-family": {
-          "value": "{rhc.font-family.primary}",
+          "value": "{nl.paragraph.font-family}",
           "type": "fontFamilies"
         },
         "font-size": {
-          "value": "{rhc.font-size.paragraph.default}",
+          "value": "{nl.paragraph.font-size}",
           "type": "fontSizes"
         },
         "font-weight": {
-          "value": "{rhc.font-weight.regular}",
+          "value": "{nl.paragraph.font-weight}",
           "type": "fontWeights"
         },
         "line-height": {
-          "value": "{rhc.line-height.paragraph}",
+          "value": "{nl.paragraph.line-height}",
           "type": "lineHeights"
         },
         "margin-block-end": {
-          "value": "{rhc.space.0}",
+          "value": "{nl.paragraph.margin-block-end}",
           "type": "spacing"
         },
         "margin-block-start": {
-          "value": "{rhc.space.0}",
+          "value": "{nl.paragraph.margin-block-start}",
           "type": "spacing"
         },
         "lead": {
           "color": {
-            "value": "{rhc.color.foreground.default}",
+            "value": "{nl.paragraph.lead.color}",
             "type": "color"
           },
           "font-size": {
-            "value": "{rhc.font-size.paragraph.intro}",
+            "value": "{nl.paragraph.lead.font-size}",
             "type": "fontSizes"
           },
           "font-weight": {
-            "value": "{rhc.font-weight.regular}",
+            "value": "{nl.paragraph.lead.font-weight}",
             "type": "fontWeights"
           },
           "line-height": {
-            "value": "{rhc.line-height.paragraph}",
+            "value": "{nl.paragraph.lead.line-height}",
             "type": "lineHeights"
           }
         }
       }
     }
   },
-  "components/paragraph/utrecht": {
-    "utrecht": {
+  "components/paragraph/nl": {
+    "nl": {
       "paragraph": {
         "color": {
-          "value": "{nl.paragraph.color}",
+          "value": "{rhc.color.foreground.default}",
           "type": "color"
         },
         "font-family": {
-          "value": "{nl.paragraph.font-family}",
+          "value": "{rhc.font-family.primary}",
           "type": "fontFamilies"
         },
         "font-size": {
-          "value": "{nl.paragraph.font-size}",
+          "value": "{rhc.font-size.paragraph.default}",
           "type": "fontSizes"
         },
         "font-weight": {
-          "value": "{nl.paragraph.font-weight}",
+          "value": "{rhc.font-weight.regular}",
           "type": "fontWeights"
         },
         "line-height": {
-          "value": "{nl.paragraph.line-height}",
+          "value": "{rhc.line-height.paragraph}",
           "type": "lineHeights"
         },
         "margin-block-end": {
-          "value": "{nl.paragraph.margin-block-end}",
+          "value": "{rhc.space.0}",
           "type": "spacing"
         },
         "margin-block-start": {
-          "value": "{nl.paragraph.margin-block-start}",
+          "value": "{rhc.space.0}",
           "type": "spacing"
         },
         "lead": {
           "color": {
-            "value": "{nl.paragraph.lead.color}",
+            "value": "{rhc.color.foreground.default}",
             "type": "color"
           },
           "font-size": {
-            "value": "{nl.paragraph.lead.font-size}",
+            "value": "{rhc.font-size.paragraph.intro}",
             "type": "fontSizes"
           },
           "font-weight": {
-            "value": "{nl.paragraph.lead.font-weight}",
+            "value": "{rhc.font-weight.regular}",
             "type": "fontWeights"
           },
           "line-height": {
-            "value": "{nl.paragraph.lead.line-height}",
+            "value": "{rhc.line-height.paragraph}",
             "type": "lineHeights"
           }
         }
@@ -6109,249 +6232,249 @@
       }
     }
   },
-  "components/skip-link/nl": {
-    "nl": {
+  "components/skip-link/utrecht": {
+    "utrecht": {
       "skip-link": {
         "font-weight": {
-          "value": "{rhc.font-weight.bold}",
+          "value": "{nl.skip-link.font-weight}",
           "type": "fontWeights"
         },
         "font-family": {
-          "value": "{rhc.font-family.primary}",
+          "value": "{nl.skip-link.font-family}",
           "type": "fontFamilies"
         },
         "font-size": {
-          "value": "{rhc.font-size.paragraph.default}",
+          "value": "{nl.skip-link.font-size}",
           "type": "fontSizes"
         },
         "line-height": {
-          "value": "{rhc.line-height.paragraph}",
+          "value": "{nl.skip-link.line-height}",
           "type": "lineHeights"
         },
         "min-block-size": {
-          "value": "{rhc.size.target}",
+          "value": "{nl.skip-link.min-block-size}",
           "type": "sizing"
         },
         "min-inline-size": {
-          "value": "{rhc.size.target}",
+          "value": "{nl.skip-link.min-inline-size}",
           "type": "sizing"
         },
         "padding-block-end": {
-          "value": "{rhc.space.150}",
+          "value": "{nl.skip-link.padding-block-end}",
           "type": "spacing"
         },
         "padding-block-start": {
-          "value": "{rhc.space.150}",
+          "value": "{nl.skip-link.padding-block-start}",
           "type": "spacing"
         },
         "padding-inline-end": {
-          "value": "{rhc.space.200}",
+          "value": "{nl.skip-link.padding-inline-end}",
           "type": "spacing"
         },
         "padding-inline-start": {
-          "value": "{rhc.space.200}",
+          "value": "{nl.skip-link.padding-inline-start}",
           "type": "spacing"
         },
         "focus": {
           "background-color": {
-            "value": "{rhc.color.canvas}",
+            "value": "{nl.skip-link.focus.background-color}",
             "type": "color"
           },
           "border-color": {
-            "value": "{rhc.color.lintblauw.500}",
+            "value": "{nl.skip-link.focus.border-color}",
             "type": "color"
           },
           "border-style": {
-            "value": "solid",
+            "value": "{nl.skip-link.focus.border-style}",
             "type": "borderStyle"
           },
           "border-width": {
-            "value": "{rhc.border-width.m}",
+            "value": "{nl.skip-link.focus.border-width}",
             "type": "borderWidth"
           },
           "color": {
-            "value": "{rhc.color.foreground.default}",
+            "value": "{nl.skip-link.focus.color}",
             "type": "color"
           },
           "text-decoration": {
-            "value": "None",
+            "value": "{nl.skip-link.focus.text-decoration}",
             "type": "textDecoration"
           }
         },
         "focus-visible": {
           "outline-color": {
-            "value": "{rhc.color.zwart}",
+            "value": "{nl.skip-link.focus-visible.outline-color}",
             "type": "color"
           }
         },
         "background-color": {
-          "value": "{rhc.color.lintblauw.500}",
+          "value": "{nl.skip-link.background-color}",
           "type": "color"
         },
         "border-color": {
-          "value": "transparent",
+          "value": "{nl.skip-link.border-color}",
           "type": "color"
         },
         "color": {
-          "value": "{rhc.color.wit}",
+          "value": "{nl.skip-link.color}",
           "type": "color"
         },
         "border-width": {
-          "value": "{rhc.border-width.m}",
+          "value": "{nl.skip-link.border-width}",
           "type": "borderWidth"
         },
         "box-block-end-shadow": {
           "offset-x": {
-            "value": "0",
+            "value": "{nl.skip-link.box-block-end-shadow.offset-x}",
             "type": "other"
           },
           "offset-y": {
-            "value": "16px",
+            "value": "{nl.skip-link.box-block-end-shadow.offset-y}",
             "type": "other"
           },
           "blur-radius": {
-            "value": "48px",
+            "value": "{nl.skip-link.box-block-end-shadow.blur-radius}",
             "type": "other"
           },
           "spread-radius": {
-            "value": "0",
+            "value": "{nl.skip-link.box-block-end-shadow.spread-radius}",
             "type": "other"
           },
           "color": {
-            "value": "#0000001a",
+            "value": "{nl.skip-link.box-block-end-shadow.color}",
             "type": "color"
           }
         },
         "text-decoration": {
-          "value": "underline",
+          "value": "{nl.skip-link.text-decoration}",
           "type": "textDecoration"
         },
         "text-underline-offset": {
-          "value": "{utrecht.link.text-underline-offset}",
+          "value": "{nl.skip-link.text-underline-offset}",
           "type": "other"
         }
       }
     }
   },
-  "components/skip-link/utrecht": {
-    "utrecht": {
+  "components/skip-link/nl": {
+    "nl": {
       "skip-link": {
         "font-weight": {
-          "value": "{nl.skip-link.font-weight}",
+          "value": "{rhc.font-weight.bold}",
           "type": "fontWeights"
         },
         "font-family": {
-          "value": "{nl.skip-link.font-family}",
+          "value": "{rhc.font-family.primary}",
           "type": "fontFamilies"
         },
         "font-size": {
-          "value": "{nl.skip-link.font-size}",
+          "value": "{rhc.font-size.paragraph.default}",
           "type": "fontSizes"
         },
         "line-height": {
-          "value": "{nl.skip-link.line-height}",
+          "value": "{rhc.line-height.paragraph}",
           "type": "lineHeights"
         },
         "min-block-size": {
-          "value": "{nl.skip-link.min-block-size}",
+          "value": "{rhc.size.target}",
           "type": "sizing"
         },
         "min-inline-size": {
-          "value": "{nl.skip-link.min-inline-size}",
+          "value": "{rhc.size.target}",
           "type": "sizing"
         },
         "padding-block-end": {
-          "value": "{nl.skip-link.padding-block-end}",
+          "value": "{rhc.space.150}",
           "type": "spacing"
         },
         "padding-block-start": {
-          "value": "{nl.skip-link.padding-block-start}",
+          "value": "{rhc.space.150}",
           "type": "spacing"
         },
         "padding-inline-end": {
-          "value": "{nl.skip-link.padding-inline-end}",
+          "value": "{rhc.space.200}",
           "type": "spacing"
         },
         "padding-inline-start": {
-          "value": "{nl.skip-link.padding-inline-start}",
+          "value": "{rhc.space.200}",
           "type": "spacing"
         },
         "focus": {
           "background-color": {
-            "value": "{nl.skip-link.focus.background-color}",
+            "value": "{rhc.color.canvas}",
             "type": "color"
           },
           "border-color": {
-            "value": "{nl.skip-link.focus.border-color}",
+            "value": "{rhc.color.lintblauw.500}",
             "type": "color"
           },
           "border-style": {
-            "value": "{nl.skip-link.focus.border-style}",
+            "value": "solid",
             "type": "borderStyle"
           },
           "border-width": {
-            "value": "{nl.skip-link.focus.border-width}",
+            "value": "{rhc.border-width.m}",
             "type": "borderWidth"
           },
           "color": {
-            "value": "{nl.skip-link.focus.color}",
+            "value": "{rhc.color.foreground.default}",
             "type": "color"
           },
           "text-decoration": {
-            "value": "{nl.skip-link.focus.text-decoration}",
+            "value": "None",
             "type": "textDecoration"
           }
         },
         "focus-visible": {
           "outline-color": {
-            "value": "{nl.skip-link.focus-visible.outline-color}",
+            "value": "{rhc.color.zwart}",
             "type": "color"
           }
         },
         "background-color": {
-          "value": "{nl.skip-link.background-color}",
+          "value": "{rhc.color.lintblauw.500}",
           "type": "color"
         },
         "border-color": {
-          "value": "{nl.skip-link.border-color}",
+          "value": "transparent",
           "type": "color"
         },
         "color": {
-          "value": "{nl.skip-link.color}",
+          "value": "{rhc.color.wit}",
           "type": "color"
         },
         "border-width": {
-          "value": "{nl.skip-link.border-width}",
+          "value": "{rhc.border-width.m}",
           "type": "borderWidth"
         },
         "box-block-end-shadow": {
           "offset-x": {
-            "value": "{nl.skip-link.box-block-end-shadow.offset-x}",
+            "value": "0",
             "type": "other"
           },
           "offset-y": {
-            "value": "{nl.skip-link.box-block-end-shadow.offset-y}",
+            "value": "16px",
             "type": "other"
           },
           "blur-radius": {
-            "value": "{nl.skip-link.box-block-end-shadow.blur-radius}",
+            "value": "48px",
             "type": "other"
           },
           "spread-radius": {
-            "value": "{nl.skip-link.box-block-end-shadow.spread-radius}",
+            "value": "0",
             "type": "other"
           },
           "color": {
-            "value": "{nl.skip-link.box-block-end-shadow.color}",
+            "value": "#0000001a",
             "type": "color"
           }
         },
         "text-decoration": {
-          "value": "{nl.skip-link.text-decoration}",
+          "value": "underline",
           "type": "textDecoration"
         },
         "text-underline-offset": {
-          "value": "{nl.skip-link.text-underline-offset}",
+          "value": "{utrecht.link.text-underline-offset}",
           "type": "other"
         }
       }
@@ -6463,6 +6586,56 @@
       }
     }
   },
+  "components/sub-nav-bar": {
+    "rhc": {
+      "sub-nav-bar": {
+        "background-color": {
+          "value": "#f2f4f6",
+          "type": "color"
+        },
+        "column-gap": {
+          "value": "{rhc.space.100}",
+          "type": "spacing"
+        },
+        "column-width": {
+          "value": "375px",
+          "type": "sizing"
+        },
+        "padding-block-end": {
+          "value": "{rhc.space.400}",
+          "type": "spacing"
+        },
+        "padding-block-start": {
+          "value": "{rhc.space.400}",
+          "type": "spacing"
+        },
+        "inline-size": {
+          "value": "100%",
+          "type": "sizing"
+        },
+        "content": {
+          "padding-inline-end": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "padding-inline-start": {
+            "value": "{rhc.space.200}",
+            "type": "spacing"
+          },
+          "max-inline-size": {
+            "value": "1280px",
+            "type": "sizing"
+          },
+          "list": {
+            "row-gap": {
+              "value": "{rhc.space.100}",
+              "type": "spacing"
+            }
+          }
+        }
+      }
+    }
+  },
   "components/summary-list": {
     "todo": {
       "summary-list": {
@@ -7379,69 +7552,1066 @@
       }
     }
   },
-  "components/icon": {
-    "utrecht": {
-      "icon": {
-        "color": {
-          "value": "inherit",
-          "type": "color"
-        },
-        "size": {
-          "value": "{rhc.size.icon.functional}",
-          "type": "sizing"
-        },
-        "inset-block-start": {
-          "value": "{rhc.space.0}",
-          "type": "spacing"
+  "overwrites/primaire kleur/groen": {
+    "rhc": {
+      "color": {
+        "primary": {
+          "50": {
+            "value": "{rhc.color.groen.50}",
+            "type": "color"
+          },
+          "100": {
+            "value": "{rhc.color.groen.100}",
+            "type": "color"
+          },
+          "200": {
+            "value": "{rhc.color.groen.200}",
+            "type": "color"
+          },
+          "300": {
+            "value": "{rhc.color.groen.300}",
+            "type": "color"
+          },
+          "400": {
+            "value": "{rhc.color.groen.400}",
+            "type": "color"
+          },
+          "500": {
+            "value": "{rhc.color.groen.500}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{rhc.color.primary.500}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "darken",
+                  "value": "0.3",
+                  "space": "lch"
+                }
+              }
+            }
+          }
         }
       }
     }
   },
-  "components/sub-nav-bar": {
+  "overwrites/primaire kleur/mintgroen": {
     "rhc": {
-      "sub-nav-bar": {
-        "background-color": {
-          "value": "#f2f4f6",
-          "type": "color"
-        },
-        "column-gap": {
-          "value": "{rhc.space.100}",
-          "type": "spacing"
-        },
-        "column-width": {
-          "value": "375px",
-          "type": "sizing"
-        },
-        "padding-block-end": {
-          "value": "{rhc.space.400}",
-          "type": "spacing"
-        },
-        "padding-block-start": {
-          "value": "{rhc.space.400}",
-          "type": "spacing"
-        },
-        "inline-size": {
-          "value": "100%",
-          "type": "sizing"
+      "color": {
+        "primary": {
+          "50": {
+            "value": "{rhc.color.mintgroen.50}",
+            "type": "color"
+          },
+          "100": {
+            "value": "{rhc.color.mintgroen.100}",
+            "type": "color"
+          },
+          "200": {
+            "value": "{rhc.color.mintgroen.200}",
+            "type": "color"
+          },
+          "300": {
+            "value": "{rhc.color.mintgroen.300}",
+            "type": "color"
+          },
+          "400": {
+            "value": "{rhc.color.mintgroen.400}",
+            "type": "color"
+          },
+          "500": {
+            "value": "{rhc.color.mintgroen.500}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{rhc.color.primary.500}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "darken",
+                  "value": "0.3",
+                  "space": "lch"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/oranje": {
+    "rhc": {
+      "color": {
+        "primary": {
+          "50": {
+            "value": "{rhc.color.oranje.50}",
+            "type": "color"
+          },
+          "100": {
+            "value": "{rhc.color.oranje.100}",
+            "type": "color"
+          },
+          "200": {
+            "value": "{rhc.color.oranje.200}",
+            "type": "color"
+          },
+          "300": {
+            "value": "{rhc.color.oranje.300}",
+            "type": "color"
+          },
+          "400": {
+            "value": "{rhc.color.oranje.400}",
+            "type": "color"
+          },
+          "500": {
+            "value": "{rhc.color.oranje.500}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{rhc.color.primary.500}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "darken",
+                  "value": "0.3",
+                  "space": "lch"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/paars": {
+    "rhc": {
+      "color": {
+        "primary": {
+          "50": {
+            "value": "{rhc.color.paars.50}",
+            "type": "color"
+          },
+          "100": {
+            "value": "{rhc.color.paars.100}",
+            "type": "color"
+          },
+          "200": {
+            "value": "{rhc.color.paars.200}",
+            "type": "color"
+          },
+          "300": {
+            "value": "{rhc.color.paars.300}",
+            "type": "color"
+          },
+          "400": {
+            "value": "{rhc.color.paars.400}",
+            "type": "color"
+          },
+          "500": {
+            "value": "{rhc.color.paars.500}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{rhc.color.primary.500}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "darken",
+                  "value": "0.3",
+                  "space": "lch"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/roze": {
+    "rhc": {
+      "color": {
+        "primary": {
+          "50": {
+            "value": "{rhc.color.roze.50}",
+            "type": "color"
+          },
+          "100": {
+            "value": "{rhc.color.roze.100}",
+            "type": "color"
+          },
+          "200": {
+            "value": "{rhc.color.roze.200}",
+            "type": "color"
+          },
+          "300": {
+            "value": "{rhc.color.roze.300}",
+            "type": "color"
+          },
+          "400": {
+            "value": "{rhc.color.roze.400}",
+            "type": "color"
+          },
+          "500": {
+            "value": "{rhc.color.roze.500}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{rhc.color.primary.500}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "darken",
+                  "value": "0.3",
+                  "space": "lch"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/violet": {
+    "rhc": {
+      "color": {
+        "primary": {
+          "50": {
+            "value": "{rhc.color.violet.50}",
+            "type": "color"
+          },
+          "100": {
+            "value": "{rhc.color.violet.100}",
+            "type": "color"
+          },
+          "200": {
+            "value": "{rhc.color.violet.200}",
+            "type": "color"
+          },
+          "300": {
+            "value": "{rhc.color.violet.300}",
+            "type": "color"
+          },
+          "400": {
+            "value": "{rhc.color.violet.400}",
+            "type": "color"
+          },
+          "500": {
+            "value": "{rhc.color.violet.500}",
+            "type": "color"
+          },
+          "hover": {
+            "value": "{rhc.color.primary.500}",
+            "type": "color",
+            "$extensions": {
+              "studio.tokens": {
+                "modify": {
+                  "type": "darken",
+                  "value": "0.3",
+                  "space": "lch"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/contrast fix/foreground op lichte kleur": {
+    "rhc": {
+      "color": {
+        "foreground": {
+          "onEmphasis": {
+            "value": "{rhc.color.zwart}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/contrast fix/non primary button labels coolgrey": {
+    "utrecht": {
+      "button": {
+        "secondary-action": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.primary.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "background-color": {
+            "value": "{rhc.color.none}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{rhc.color.cool-grey.700}",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.cool-grey.700}",
+            "type": "color"
+          },
+          "disabled": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.cool-grey.400}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.400}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.primary.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background-color": {
+              "value": "{rhc.color.primary.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.primary.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          }
+        },
+        "subtle": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.primary.50}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "background-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.cool-grey.700}",
+            "type": "color"
+          },
+          "disabled": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.400}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.primary.50}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background-color": {
+              "value": "{rhc.color.primary.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.primary.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.900}",
+              "type": "color"
+            }
+          }
+        },
+        "primary-action": {
+          "disabled": {
+            "color": {
+              "value": "{rhc.color.cool-grey.400}",
+              "type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/contrast fix/alle buttons lintblauw": {
+    "utrecht": {
+      "button": {
+        "primary-action": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.3",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.foreground.onEmphasis}",
+              "type": "color"
+            }
+          },
+          "background-color": {
+            "value": "{rhc.color.lintblauw.500}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.foreground.onEmphasis}",
+            "type": "color"
+          },
+          "disabled": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.400}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.foreground.onEmphasis}",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background-color": {
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "srgb"
+                  }
+                }
+              },
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.foreground.onEmphasis}",
+              "type": "color"
+            }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.foreground.onEmphasis}",
+              "type": "color"
+            }
+          }
+        },
+        "secondary-action": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.50}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.3",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.3",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          },
+          "background-color": {
+            "value": "{rhc.color.none}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{rhc.color.lintblauw.500}",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.lintblauw.500}",
+            "type": "color"
+          },
+          "disabled": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.lintblauw.200}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.300}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.50}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.3",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          },
+          "active": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.3",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "subtle": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.50}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.3",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          },
+          "background-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.lintblauw.500}",
+            "type": "color"
+          },
+          "disabled": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.100}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.50}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.3",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          },
+          "active": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "srgb"
+                  }
+                }
+              },
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color"
+            }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.lintblauw.100}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.lintblauw.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/contrast fix/button label groter": {
+    "utrecht": {
+      "button": {
+        "font-size": {
+          "value": "20px",
+          "type": "fontSizes"
+        }
+      }
+    }
+  },
+  "overwrites/primaire kleur/contrast fix/non primary buttons coolgrey": {
+    "utrecht": {
+      "button": {
+        "secondary-action": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "background-color": {
+            "value": "{rhc.color.none}",
+            "type": "color"
+          },
+          "border-color": {
+            "value": "{rhc.color.cool-grey.700}",
+            "type": "color"
+          },
+          "color": {
+            "value": "{rhc.color.cool-grey.700}",
+            "type": "color"
+          },
+          "disabled": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.cool-grey.400}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.400}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.300}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.300}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          }
         },
-        "content": {
-          "padding-inline-end": {
-            "value": "{rhc.space.200}",
-            "type": "spacing"
+        "subtle": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
           },
-          "padding-inline-start": {
-            "value": "{rhc.space.200}",
-            "type": "spacing"
+          "background-color": {
+            "value": "transparent",
+            "type": "color"
           },
-          "max-inline-size": {
-            "value": "1280px",
-            "type": "sizing"
+          "border-color": {
+            "value": "transparent",
+            "type": "color"
           },
-          "list": {
-            "row-gap": {
-              "value": "{rhc.space.100}",
-              "type": "spacing"
+          "color": {
+            "value": "{rhc.color.cool-grey.700}",
+            "type": "color"
+          },
+          "disabled": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.400}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.800}",
+              "type": "color"
+            }
+          },
+          "active": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.300}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.900}",
+              "type": "color"
             }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.300}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.cool-grey.900}",
+              "type": "color"
+            }
+          }
+        }
+      }
+    }
+  },
+  "overwrites/accent/donkergeel": {
+    "rhc": {
+      "color": {
+        "accent": {
+          "500": {
+            "value": "{rhc.color.donkergeel.500}",
+            "type": "color"
+          }
+        }
+      }
+    }
+  },
+  "overwrites/accent/donkergroen": {
+    "rhc": {
+      "color": {
+        "accent": {
+          "500": {
+            "value": "{rhc.color.donkergroen.500}",
+            "type": "color"
           }
         }
       }
@@ -7619,6 +8789,40 @@
       }
     }
   },
+  "overwrites/heading-color/primairy": {
+    "nl": {
+      "heading-level-1": {
+        "color": {
+          "value": "{rhc.color.primary.500}",
+          "type": "color"
+        }
+      },
+      "heading-level-2": {
+        "color": {
+          "value": "{rhc.color.primary.500}",
+          "type": "color"
+        }
+      },
+      "heading-level-3": {
+        "color": {
+          "value": "{rhc.color.primary.500}",
+          "type": "color"
+        }
+      },
+      "heading-level-4": {
+        "color": {
+          "value": "{rhc.color.primary.500}",
+          "type": "color"
+        }
+      },
+      "heading-level-5": {
+        "color": {
+          "value": "{rhc.color.primary.500}",
+          "type": "color"
+        }
+      }
+    }
+  },
   "overwrites/oude rijkshuisstijl/border": {
     "rhc": {
       "border-radius": {
@@ -7637,88 +8841,195 @@
       }
     }
   },
-  "overwrites/primaire kleur/mintgroen": {
+  "overwrites/responsive/mobile": {
     "rhc": {
-      "color": {
-        "primary": {
-          "50": {
-            "value": "{rhc.color.mintgroen.50}",
-            "type": "color"
-          },
-          "100": {
-            "value": "{rhc.color.mintgroen.100}",
-            "type": "color"
+      "font-size": {
+        "heading": {
+          "level-1": {
+            "value": "{rhc.font-size.xl.mobile}",
+            "type": "fontSizes"
           },
-          "200": {
-            "value": "{rhc.color.mintgroen.200}",
-            "type": "color"
+          "level-2": {
+            "value": "{rhc.font-size.lg.mobile}",
+            "type": "fontSizes"
           },
-          "300": {
-            "value": "{rhc.color.mintgroen.300}",
-            "type": "color"
+          "level-3": {
+            "value": "{rhc.font-size.md.mobile}",
+            "type": "fontSizes"
           },
-          "400": {
-            "value": "{rhc.color.mintgroen.400}",
-            "type": "color"
+          "level-4": {
+            "value": "{rhc.font-size.sm.mobile}",
+            "type": "fontSizes"
           },
-          "500": {
-            "value": "{rhc.color.mintgroen.500}",
-            "type": "color"
+          "level-5": {
+            "value": "{rhc.font-size.xs.mobile}",
+            "type": "fontSizes"
+          }
+        },
+        "paragraph": {
+          "intro": {
+            "value": "{rhc.font-size.sm.mobile}",
+            "type": "fontSizes"
           },
-          "hover": {
-            "value": "{rhc.color.primary.500}",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "darken",
-                  "value": "0.3",
-                  "space": "lch"
-                }
-              }
-            }
+          "default": {
+            "value": "{rhc.font-size.xs.mobile}",
+            "type": "fontSizes"
           }
         }
       }
     }
   },
-  "overwrites/primaire kleur/violet": {
+  "overwrites/responsive/tablet": {
     "rhc": {
-      "color": {
-        "primary": {
-          "50": {
-            "value": "{rhc.color.violet.50}",
-            "type": "color"
+      "font-size": {
+        "heading": {
+          "level-1": {
+            "value": "{rhc.font-size.xl.tablet}",
+            "type": "fontSizes"
           },
-          "100": {
-            "value": "{rhc.color.violet.100}",
-            "type": "color"
+          "level-2": {
+            "value": "{rhc.font-size.lg.tablet}",
+            "type": "fontSizes"
           },
-          "200": {
-            "value": "{rhc.color.violet.200}",
-            "type": "color"
+          "level-3": {
+            "value": "{rhc.font-size.md.tablet}",
+            "type": "fontSizes"
           },
-          "300": {
-            "value": "{rhc.color.violet.300}",
-            "type": "color"
+          "level-4": {
+            "value": "{rhc.font-size.sm.tablet}",
+            "type": "fontSizes"
           },
-          "400": {
-            "value": "{rhc.color.violet.400}",
-            "type": "color"
+          "level-5": {
+            "value": "{rhc.font-size.xs.tablet}",
+            "type": "fontSizes"
+          }
+        },
+        "paragraph": {
+          "intro": {
+            "value": "{rhc.font-size.sm.tablet}",
+            "type": "fontSizes"
           },
-          "500": {
-            "value": "{rhc.color.violet.500}",
-            "type": "color"
+          "default": {
+            "value": "{rhc.font-size.xs.tablet}",
+            "type": "fontSizes"
+          }
+        }
+      }
+    }
+  },
+  "overwrites/afwijkende keuzes/button": {
+    "utrecht": {
+      "button": {
+        "font-weight": {
+          "value": "{rhc.font-weight.regular}",
+          "type": "fontWeights"
+        },
+        "primary-action": {
+          "font-weight": {
+            "value": "{rhc.font-weight.regular}",
+            "type": "fontWeights"
+          }
+        },
+        "secondary-action": {
+          "hover": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.200}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color"
+            }
+          },
+          "font-weight": {
+            "value": "{rhc.font-weight.regular}",
+            "type": "fontWeights"
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.cool-grey.300}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color"
+            }
+          }
+        },
+        "subtle": {
+          "font-weight": {
+            "value": "{rhc.font-weight.regular}",
+            "type": "fontWeights"
           },
           "hover": {
-            "value": "{rhc.color.primary.500}",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "darken",
-                  "value": "0.3",
-                  "space": "lch"
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.primary.hover}",
+              "type": "color"
+            }
+          },
+          "focus": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.primary.hover}",
+              "type": "color"
+            }
+          },
+          "pressed": {
+            "background-color": {
+              "value": "{rhc.color.none}",
+              "type": "color"
+            },
+            "border-color": {
+              "value": "transparent",
+              "type": "color"
+            },
+            "color": {
+              "value": "{rhc.color.primary.500}",
+              "type": "color",
+              "$extensions": {
+                "studio.tokens": {
+                  "modify": {
+                    "type": "darken",
+                    "value": "0.4",
+                    "space": "lch"
+                  }
                 }
               }
             }
@@ -8088,8 +9399,8 @@
         "components/sub-nav-bar": "enabled",
         "overwrites/focus/background": "enabled",
         "overwrites/focus/outline-color": "enabled",
-        "overwrites/primaire kleur/mintgroen": "enabled",
-        "components/pre-heading": "enabled"
+        "components/pre-heading": "enabled",
+        "overwrites/primaire kleur/mintgroen": "enabled"
       },
       "$figmaVariableReferences": {},
       "group": "Rijkshuisstijl"
@@ -8128,8 +9439,8 @@
       "components/code-input",
       "components/counter-badge/nl",
       "components/counter-badge/utrecht",
-      "components/dot-badge",
       "components/drawer",
+      "components/dot-badge",
       "components/fieldset",
       "components/figure",
       "components/file-input",
@@ -8145,6 +9456,7 @@
       "components/heading/nl",
       "components/heading/utrecht",
       "components/hero",
+      "components/icon",
       "components/icon-only-button",
       "components/link/nl",
       "components/link/utrecht",
@@ -8168,6 +9480,7 @@
       "components/skip-link/utrecht",
       "components/skip-link/nl",
       "components/status-badge",
+      "components/sub-nav-bar",
       "components/summary-list",
       "components/table",
       "components/task-list",
@@ -8176,13 +9489,26 @@
       "components/toggletip",
       "components/toolbar-button",
       "components/unordered-list",
-      "components/icon",
-      "components/sub-nav-bar",
+      "overwrites/primaire kleur/groen",
+      "overwrites/primaire kleur/mintgroen",
+      "overwrites/primaire kleur/oranje",
+      "overwrites/primaire kleur/paars",
+      "overwrites/primaire kleur/roze",
+      "overwrites/primaire kleur/violet",
+      "overwrites/primaire kleur/contrast fix/foreground op lichte kleur",
+      "overwrites/primaire kleur/contrast fix/non primary button labels coolgrey",
+      "overwrites/primaire kleur/contrast fix/alle buttons lintblauw",
+      "overwrites/primaire kleur/contrast fix/button label groter",
+      "overwrites/primaire kleur/contrast fix/non primary buttons coolgrey",
+      "overwrites/accent/donkergeel",
+      "overwrites/accent/donkergroen",
       "overwrites/focus/background",
       "overwrites/focus/outline-color",
+      "overwrites/heading-color/primairy",
       "overwrites/oude rijkshuisstijl/border",
-      "overwrites/primaire kleur/mintgroen",
-      "overwrites/primaire kleur/violet"
+      "overwrites/responsive/mobile",
+      "overwrites/responsive/tablet",
+      "overwrites/afwijkende keuzes/button"
     ]
   }
 }