diff --git a/app/components/Avatar.js b/app/components/Avatar.js
index 2abbefe..fbb366a 100644
--- a/app/components/Avatar.js
+++ b/app/components/Avatar.js
@@ -6,10 +6,10 @@ export default function Avatar({
   ...props
 }) {
   const sizeStyles = {
-    small: "w-[16px] h-[16px]",
+    small: "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)]",
     medium: "w-[18px] h-[18px]",
-    large: "w-[24px] h-[24px]",
-    xlarge: "w-[32px] h-[32px]",
+    large: "w-[var(--spacing-scale-024)] h-[var(--spacing-scale-024)]",
+    xlarge: "w-[var(--spacing-scale-032)] h-[var(--spacing-scale-032)]",
   };
 
   const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;
diff --git a/app/components/AvatarContainer.js b/app/components/AvatarContainer.js
index 55ecfff..128775d 100644
--- a/app/components/AvatarContainer.js
+++ b/app/components/AvatarContainer.js
@@ -5,9 +5,9 @@ export default function AvatarContainer({
   ...props
 }) {
   const sizeStyles = {
-    small: "flex -space-x-2",
+    small: "flex -space-x-[var(--spacing-scale-008)]",
     medium: "flex -space-x-[9px]",
-    large: "flex -space-x-[10px]",
+    large: "flex -space-x-[var(--spacing-scale-010)]",
     xlarge: "flex -space-x-[13px]",
   };
 
diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js
index 1a1f7c3..6e1e18a 100644
--- a/app/components/HeaderTab.js
+++ b/app/components/HeaderTab.js
@@ -10,7 +10,7 @@ export default function HeaderTab({
 
   return (
     <div
-      className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${stretchClasses} ${className}`}
+      className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-scale-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${stretchClasses} ${className}`}
       {...props}
     >
       {children}
diff --git a/app/components/HeroBanner.js b/app/components/HeroBanner.js
index 419f16c..e68f3c7 100644
--- a/app/components/HeroBanner.js
+++ b/app/components/HeroBanner.js
@@ -8,7 +8,7 @@ const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
     <section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
       <div className="flex flex-col gap-[var(--spacing-scale-010)]">
         {/* Frame container for content */}
-        <div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
+        <div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[var(--radius-measures-radius-medium)] rounded-br-[var(--radius-measures-radius-medium)] rounded-bl-[var(--radius-measures-radius-medium)] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
           {/* DECORATIONS (behind content) */}
           <HeroDecor
             className="pointer-events-none absolute z-0
diff --git a/app/components/NavigationItem.js b/app/components/NavigationItem.js
index 5c148dc..68075a5 100644
--- a/app/components/NavigationItem.js
+++ b/app/components/NavigationItem.js
@@ -16,7 +16,7 @@ export default function NavigationItem({
   // Size styles
   const sizeStyles = {
     default:
-      "px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
+      "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)]",
     xsmall:
       "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
   };
diff --git a/app/components/NumberedCards.js b/app/components/NumberedCards.js
index ac196d7..e7a09fc 100644
--- a/app/components/NumberedCards.js
+++ b/app/components/NumberedCards.js
@@ -26,7 +26,7 @@ const NumberedCards = ({ title, subtitle, cards }) => {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
       />
       <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
-        <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
+        <div className="max-w-[var(--spacing-scale-1200)] mx-auto">
           <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
             {/* Section Header */}
             <div>
diff --git a/app/components/RuleStack.js b/app/components/RuleStack.js
index a6d67d6..42d3ce9 100644
--- a/app/components/RuleStack.js
+++ b/app/components/RuleStack.js
@@ -26,7 +26,7 @@ const RuleStack = ({ children, className = "" }) => {
               height={40}
             />
           }
-          backgroundColor="bg-[var(--color-community-kiwi-200)]"
+          backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
         />
         <RuleCard
           title="Consensus"
@@ -39,7 +39,7 @@ const RuleStack = ({ children, className = "" }) => {
               height={40}
             />
           }
-          backgroundColor="bg-[var(--color-community-red-200)]"
+          backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
         />
         <RuleCard
           title="Elected Board"
@@ -52,7 +52,7 @@ const RuleStack = ({ children, className = "" }) => {
               height={40}
             />
           }
-          backgroundColor="bg-[var(--color-surface-default-brand-accent)]"
+          backgroundColor="bg-[var(--color-surface-default-brand-red)]"
         />
         <RuleCard
           title="Petition"
@@ -65,7 +65,7 @@ const RuleStack = ({ children, className = "" }) => {
               height={40}
             />
           }
-          backgroundColor="bg-[var(--color-community-blue-300)]"
+          backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
         />
       </div>
     </div>
diff --git a/app/components/SectionHeader.js b/app/components/SectionHeader.js
index 0009f7d..f32d2ee 100644
--- a/app/components/SectionHeader.js
+++ b/app/components/SectionHeader.js
@@ -4,12 +4,12 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => {
   return (
     <div className="flex flex-col gap-1 w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]">
       {/* Title Container - Left side (lg breakpoint) */}
-      <div className="lg:w-[369px] lg:h-[120px] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center">
+      <div className="lg:w-[369px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center">
         <h2
           className={
             variant === "small"
-              ? "font-bricolage-grotesque font-bold text-[28px] leading-[36px] text-[var(--color-content-default-primary)]"
-              : "font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-24 xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-24 text-[var(--color-content-default-primary)]"
+              ? "font-bricolage-grotesque font-bold text-medium-heading text-[var(--color-content-default-primary)]"
+              : "font-bricolage-grotesque font-bold text-medium-heading sm:text-large-heading lg:text-large-heading lg:w-[369px] lg:pr-[var(--spacing-scale-024)] xl:text-xx-large-heading xl:w-[452px] xl:pr-[var(--spacing-scale-024)] text-[var(--color-content-default-primary)]"
           }
         >
           <span className="block lg:hidden">{title}</span>
@@ -18,12 +18,12 @@ const SectionHeader = ({ title, subtitle, titleLg, variant = "default" }) => {
       </div>
 
       {/* Subtitle Container */}
-      <div className="lg:w-[928px] lg:h-[120px] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end">
+      <div className="lg:w-[928px] lg:h-[var(--spacing-scale-120)] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end">
         <p
           className={
             variant === "small"
-              ? "font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-default-tertiary)]"
-              : "font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]"
+              ? "font-inter font-normal text-small-paragraph text-[var(--color-content-default-tertiary)]"
+              : "font-inter font-normal text-large-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]"
           }
         >
           {subtitle}
diff --git a/app/components/SectionNumber.js b/app/components/SectionNumber.js
index 14d5f4d..cee6814 100644
--- a/app/components/SectionNumber.js
+++ b/app/components/SectionNumber.js
@@ -15,14 +15,14 @@ const SectionNumber = ({ number }) => {
   };
 
   return (
-    <div className="relative size-[40px] overflow-visible -rotate-[15deg]">
+    <div className="relative size-[var(--spacing-scale-040)] overflow-visible -rotate-[15deg]">
       <img
         src={getImageSrc(number)}
         alt={`Section ${number}`}
         className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none"
       />
       <div className="absolute inset-0 flex items-center justify-center">
-        <span className="text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]">
+        <span className="text-small-label font-bold text-[var(--color-content-inverse-primary)]">
           {number}
         </span>
       </div>
diff --git a/app/tailwind.css b/app/tailwind.css
index 6cb9b11..2942914 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -1,8 +1,3 @@
-/**
- * This file was generated by Supernova.io and should not be changed manually.
- * To modify the format or content of this file, please contact your design system team. 
- */
-
 @import "tailwindcss";
 
 /* Make sure Tailwind scans stories and .storybook files */
@@ -18,7 +13,7 @@
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1440px;
 
-  /* Reset default Tailwind configuration */
+  /* Reset Tailwind color defaults to avoid collisions */
   --color-*: initial;
 
   /* Dimension */
@@ -44,8 +39,10 @@
   --spacing-scale-076: 76px;
   --spacing-scale-096: 96px;
   --spacing-scale-120: 120px;
+  --spacing-scale-160: 160px;
   --spacing-scale-260: 260px;
   --spacing-scale-290: 290px;
+
   --spacing-measures-sizing-008: var(--spacing-scale-008);
   --spacing-measures-sizing-010: var(--spacing-scale-010);
   --spacing-measures-sizing-012: var(--spacing-scale-012);
@@ -60,11 +57,14 @@
   --spacing-measures-sizing-064: var(--spacing-scale-064);
   --spacing-measures-sizing-076: var(--spacing-scale-076);
   --spacing-measures-sizing-096: var(--spacing-scale-096);
-  --spacing-measures-spacing-000: var(--spacing-scale-000);
   --spacing-measures-sizing-120: var(--spacing-scale-120);
+
+  /* Spacing aliases */
+  --spacing-measures-spacing-000: var(--spacing-scale-000);
   --spacing-measures-spacing-001: var(--spacing-scale-001);
   --spacing-measures-spacing-002: var(--spacing-scale-002);
   --spacing-measures-spacing-004: var(--spacing-scale-004);
+  --spacing-measures-spacing-006: var(--spacing-scale-006);
   --spacing-measures-spacing-008: var(--spacing-scale-008);
   --spacing-measures-spacing-010: var(--spacing-scale-010);
   --spacing-measures-spacing-012: var(--spacing-scale-012);
@@ -80,196 +80,982 @@
   --spacing-measures-spacing-076: var(--spacing-scale-076);
   --spacing-measures-spacing-096: var(--spacing-scale-096);
   --spacing-measures-spacing-120: var(--spacing-scale-120);
+  --spacing-measures-spacing-160: var(--spacing-scale-160);
+  --spacing-measures-spacing-260: var(--spacing-scale-260);
 
-  /* BorderRadius */
+  /* Border radius */
   --radius-measures-radius-none: var(--spacing-scale-000);
-  --radius-measures-radius-small: var(--spacing-scale-002);
-  --radius-measures-radius-medium: var(--spacing-scale-004);
-  --radius-measures-radius-large: var(--spacing-scale-008);
-  --radius-measures-radius-xlarge: var(--spacing-scale-012);
-  --radius-measures-radius-full: var(--spacing-scale-120);
+  --radius-measures-radius-xsmall: var(--spacing-scale-006);
+  --radius-measures-radius-small: var(--spacing-scale-012);
+  --radius-measures-radius-medium: var(--spacing-scale-016);
+  --radius-measures-radius-large: var(--spacing-scale-024);
+  --radius-measures-radius-xlarge: var(--spacing-scale-032);
+  --radius-measures-radius-full: 9999px;
 
-  /* BorderWidth */
-  --border-measures-stroke-large: var(--spacing-scale-003);
-  --border-measures-stroke-medium: var(--spacing-scale-002);
+  /* Border widths */
   --border-measures-stroke-small: var(--spacing-scale-001);
+  --border-measures-stroke-medium: var(--spacing-scale-002);
+  --border-measures-stroke-large: var(--spacing-scale-003);
 
-  /* Color */
-  --color-community-yellow-100: oklch(98.48% 0.055 105.21);
-  --color-community-yellow-200: oklch(94.76% 0.083 103.43);
-  --color-community-yellow-300: oklch(90.22% 0.095 102.92);
-  --color-community-yellow-400: oklch(84.34% 0.097 101.09);
-  --color-community-yellow-500: oklch(76.71% 0.094 100.01);
-  --color-community-yellow-600: oklch(66.85% 0.083 99.46);
-  --color-community-yellow-700: oklch(55.29% 0.069 98.1);
-  --color-community-yellow-800: oklch(42.89% 0.054 98.59);
-  --color-community-yellow-900: oklch(30.32% 0.036 99.23);
-  --color-community-teal-050: oklch(95.63% 0.022 13.86);
-  --color-community-orange-050: oklch(98.55% 0.017 201.66);
-  --color-community-mauve-050: oklch(98.1% 0.009 100.14);
-  --color-community-orange-100: oklch(95.43% 0.06 198.83);
-  --color-community-orange-200: oklch(83.58% 0.121 198.44);
-  --color-community-orange-300: oklch(69.29% 0.124 217.83);
-  --color-community-orange-400: oklch(50.04% 0.102 233.41);
-  --color-community-orange-500: oklch(39.59% 0.091 242.29);
-  --color-community-orange-600: oklch(31.94% 0.096 255.01);
-  --color-community-orange-700: oklch(20.28% 0.053 252.69);
-  --color-community-blue-050: oklch(39.46% 0.149 259.87);
-  --color-community-kiwi-050: oklch(97.77% 0.031 127.13);
-  --color-community-pink-050: oklch(95.93% 0.032 321.01);
-  --color-community-pink-100: oklch(90.78% 0.072 319.41);
-  --color-community-pink-200: oklch(85.82% 0.091 318.38);
-  --color-community-pink-300: oklch(81.18% 0.096 318.17);
-  --color-community-pink-400: oklch(75.77% 0.097 317.51);
-  --color-community-pink-500: oklch(68.84% 0.092 316.79);
-  --color-community-pink-600: oklch(60.22% 0.08 316.45);
-  --color-community-pink-700: oklch(50.08% 0.065 315.63);
-  --color-community-pink-800: oklch(38.98% 0.049 315.23);
-  --color-community-pink-900: oklch(27.83% 0.03 314.26);
-  --color-community-red-050: oklch(96.51% 0.014 22.47);
-  --color-yellow-opacity-000: oklch(30.32% 0.036 99.23 / 0%);
-  --color-yellow-opacity-001: oklch(30.32% 0.036 99.23 / 1%);
-  --color-yellow-opacity-050: oklch(30.32% 0.036 99.23 / 5%);
-  --color-yellow-opacity-100: oklch(30.32% 0.036 99.23 / 10%);
-  --color-yellow-opacity-200: oklch(42.89% 0.054 98.59 / 20%);
-  --color-yellow-opacity-300: oklch(55.29% 0.069 98.1 / 30%);
-  --color-yellow-opacity-400: oklch(66.85% 0.083 99.46 / 40%);
-  --color-yellow-opacity-500: oklch(76.71% 0.094 100.01 / 50%);
-  --color-yellow-opacity-600: oklch(84.34% 0.097 101.09 / 60%);
-  --color-yellow-opacity-700: oklch(90.22% 0.095 102.92 / 70%);
-  --color-yellow-opacity-800: oklch(94.76% 0.083 103.43 / 80%);
-  --color-yellow-opacity-900: oklch(98.48% 0.055 105.21 / 90%);
-  --color-opacity-000: oklch(97.31% 0 263.28 / 0%);
-  --color-opacity-001: oklch(97.31% 0 263.28 / 1%);
-  --color-opacity-050: oklch(97.31% 0 263.28 / 50%);
-  --color-opacity-100: oklch(94.91% 0 263.28 / 50%);
-  --color-opacity-200: oklch(91.28% 0 263.28 / 50%);
-  --color-opacity-300: oklch(84.21% 0 263.28 / 50%);
-  --color-opacity-400: oklch(75.4% 0 263.28 / 50%);
-  --color-opacity-500: oklch(56.24% 0 263.28 / 50%);
-  --color-opacity-600: oklch(44.59% 0 263.28 / 50%);
-  --color-opacity-700: oklch(32.11% 0 263.28 / 50%);
-  --color-opacity-800: oklch(23.93% 0 263.28 / 50%);
-  --color-opacity-900: oklch(19.13% 0 263.28 / 50%);
-  --color-gray-000: oklch(100% 0 263.28);
-  --color-gray-050: oklch(97.31% 0 263.28);
-  --color-gray-100: oklch(92.19% 0 263.28);
-  --color-gray-200: oklch(86.38% 0 263.28);
-  --color-gray-300: oklch(76.99% 0 263.28);
-  --color-gray-400: oklch(65% 0 263.28);
-  --color-gray-500: oklch(51.03% 0 263.28);
-  --color-gray-600: oklch(39.42% 0 263.28);
-  --color-gray-700: oklch(29.72% 0 263.28);
-  --color-gray-800: oklch(23.93% 0 263.28);
-  --color-gray-900: oklch(19.13% 0 263.28);
-  --color-gray-1000: oklch(0% 0 0);
-  --color-community-blue-100: oklch(94.43% 0.038 211.19);
-  --color-community-blue-200: oklch(91.44% 0.048 211.24);
-  --color-community-blue-300: oklch(87.85% 0.052 210.11);
-  --color-community-blue-400: oklch(82.74% 0.054 206.72);
-  --color-community-blue-500: oklch(75.92% 0.052 204.06);
-  --color-community-blue-600: oklch(66.92% 0.047 201.57);
-  --color-community-blue-700: oklch(55.72% 0.04 200.59);
-  --color-community-blue-800: oklch(43.34% 0.03 199.27);
-  --color-community-blue-900: oklch(30.78% 0.02 196.24);
-  --color-community-red-100: oklch(86.1% 0.051 359.55);
-  --color-community-red-200: oklch(82% 0.065 0.21);
-  --color-community-red-300: oklch(77.79% 0.072 359.58);
-  --color-community-red-400: oklch(73.06% 0.073 359.79);
-  --color-community-red-500: oklch(66.82% 0.07 359.71);
-  --color-community-red-600: oklch(58.65% 0.062 357.88);
-  --color-community-red-700: oklch(49.14% 0.05 359.07);
-  --color-community-red-800: oklch(38.48% 0.039 356.54);
-  --color-community-red-900: oklch(28.01% 0.024 356.91);
-  --color-community-orange-800: oklch(40.58% 0.027 46.54);
-  --color-community-orange-900: oklch(29.05% 0.017 48.05);
-  --color-community-mauve-100: oklch(88.23% 0.059 282.99);
-  --color-community-mauve-200: oklch(82.9% 0.074 281.26);
-  --color-community-mauve-300: oklch(78.02% 0.08 281.18);
-  --color-community-mauve-400: oklch(72.83% 0.08 280.17);
-  --color-community-mauve-500: oklch(66.39% 0.075 278.85);
-  --color-community-mauve-600: oklch(58.34% 0.063 277.78);
-  --color-community-mauve-700: oklch(48.68% 0.052 277.4);
-  --color-community-mauve-800: oklch(38.09% 0.038 276.43);
-  --color-community-mauve-900: oklch(27.24% 0.024 277.83);
-  --color-green0: oklch(98.15% 0.028 155.49);
-  --color-community-teal-100: oklch(96.1% 0.059 157.85);
-  --color-community-teal-200: oklch(92.78% 0.075 157.69);
-  --color-community-teal-300: oklch(88.65% 0.079 158.06);
-  --color-community-teal-400: oklch(83.47% 0.079 158.61);
-  --color-community-teal-500: oklch(76.31% 0.074 159.02);
-  --color-community-teal-600: oklch(66.77% 0.064 159.89);
-  --color-community-teal-700: oklch(55.57% 0.052 160.52);
-  --color-community-teal-800: oklch(43.12% 0.039 160.72);
-  --color-community-teal-900: oklch(30.48% 0.025 161.27);
-  --color-community-kiwi-100: oklch(92.3% 0.055 122.16);
-  --color-community-kiwi-200: oklch(89.94% 0.07 122.82);
-  --color-community-kiwi-300: oklch(86.7% 0.077 122.51);
-  --color-community-kiwi-400: oklch(81.99% 0.078 123.36);
-  --color-community-kiwi-500: oklch(75.31% 0.074 122.9);
-  --color-community-kiwi-600: oklch(66.25% 0.066 123.19);
-  --color-community-kiwi-700: oklch(55.28% 0.055 123.2);
-  --color-community-kiwi-800: oklch(43.14% 0.041 122.55);
-  --color-community-kiwi-900: oklch(31.14% 0.027 122.95);
-  --color-content-default-utility-positive: oklch(55.09% 0.151 143.2);
-  --color-content-default-utility-negative: oklch(58.87% 0.184 29.83);
-  --color-content-default-utility-info: oklch(55.14% 0.217 260.1);
-  --color-content-inverse-utility-positive: oklch(70.5% 0.146 138.3);
-  --color-content-inverse-utility-warning: oklch(79.77% 0.155 89.66);
-  --color-content-inverse-utility-negative: oklch(69.63% 0.149 28.39);
-  --color-content-inverse-utility-info: oklch(61.97% 0.194 258.88);
-  --color-surface-default-utility-info: oklch(55.14% 0.217 260.1);
-  --color-surface-default-utility-negative: oklch(58.87% 0.184 29.83);
-  --color-surface-default-utility-warning: oklch(57.3% 0.12 74.7);
-  --color-surface-default-utility-positive: oklch(55.09% 0.151 143.2);
-  --color-surface-default-brand-accent: oklch(79.17% 0.121 16.33);
-  --color-surface-inverse-utility-info: oklch(61.97% 0.194 258.88);
-  --color-surface-inverse-utility-negative: oklch(69.63% 0.149 28.39);
-  --color-surface-inverse-utility-warning: oklch(79.77% 0.155 89.66);
-  --color-surface-inverse-utility-positive: oklch(70.5% 0.146 138.3);
-  --border-color-default-utility-info: oklch(61.97% 0.194 258.88);
-  --border-color-default-utility-negative: oklch(69.63% 0.149 28.39);
-  --border-color-default-utility-warning: oklch(79.77% 0.155 89.66);
-  --border-color-default-utility-positive: oklch(70.5% 0.146 138.3);
-  --border-color-inverse-brandaccent: oklch(62.78% 0.234 25.05);
-  --color-content-default-utility-warning: var(--color-community-yellow-500);
+  /* Compatibility aliases */
+  --measures-radius-none: var(--radius-measures-radius-none);
+  --measures-radius-xsmall: var(--radius-measures-radius-xsmall);
+  --measures-radius-small: var(--radius-measures-radius-small);
+  --measures-radius-medium: var(--radius-measures-radius-medium);
+  --measures-radius-large: var(--radius-measures-radius-large);
+  --measures-radius-xlarge: var(--radius-measures-radius-xlarge);
+  --measures-radius-full: var(--radius-measures-radius-full);
+  --measures-stroke-small: var(--border-measures-stroke-small);
+  --measures-stroke-medium: var(--border-measures-stroke-medium);
+  --measures-stroke-large: var(--border-measures-stroke-large);
+  --measures-sizing-008: var(--spacing-measures-sizing-008);
+  --measures-sizing-010: var(--spacing-measures-sizing-010);
+  --measures-sizing-012: var(--spacing-measures-sizing-012);
+  --measures-sizing-016: var(--spacing-measures-sizing-016);
+  --measures-sizing-020: var(--spacing-measures-sizing-020);
+  --measures-sizing-024: var(--spacing-measures-sizing-024);
+  --measures-sizing-032: var(--spacing-measures-sizing-032);
+  --measures-sizing-040: var(--spacing-measures-sizing-040);
+  --measures-sizing-048: var(--spacing-measures-sizing-048);
+  --measures-sizing-056: var(--spacing-measures-sizing-056);
+  --measures-sizing-060: var(--spacing-measures-sizing-060);
+  --measures-sizing-064: var(--spacing-measures-sizing-064);
+  --measures-sizing-076: var(--spacing-measures-sizing-076);
+  --measures-sizing-096: var(--spacing-measures-sizing-096);
+  --measures-sizing-120: var(--spacing-measures-sizing-120);
+  --measures-spacing-000: var(--spacing-measures-spacing-000);
+  --measures-spacing-001: var(--spacing-measures-spacing-001);
+  --measures-spacing-002: var(--spacing-measures-spacing-002);
+  --measures-spacing-004: var(--spacing-measures-spacing-004);
+  --measures-spacing-006: var(--spacing-measures-spacing-006);
+  --measures-spacing-008: var(--spacing-measures-spacing-008);
+  --measures-spacing-010: var(--spacing-measures-spacing-010);
+  --measures-spacing-012: var(--spacing-measures-spacing-012);
+  --measures-spacing-016: var(--spacing-measures-spacing-016);
+  --measures-spacing-020: var(--spacing-measures-spacing-020);
+  --measures-spacing-024: var(--spacing-measures-spacing-024);
+  --measures-spacing-032: var(--spacing-measures-spacing-032);
+  --measures-spacing-040: var(--spacing-measures-spacing-040);
+  --measures-spacing-048: var(--spacing-measures-spacing-048);
+  --measures-spacing-056: var(--spacing-measures-spacing-056);
+  --measures-spacing-060: var(--spacing-measures-spacing-060);
+  --measures-spacing-064: var(--spacing-measures-spacing-064);
+  --measures-spacing-076: var(--spacing-measures-spacing-076);
+  --measures-spacing-096: var(--spacing-measures-spacing-096);
+  --measures-spacing-120: var(--spacing-measures-spacing-120);
+  --measures-spacing-160: var(--spacing-measures-spacing-160);
+  --measures-spacing-260: var(--spacing-measures-spacing-260);
+
+  /* Grays & alpha */
+  --color-gray-000: #ffffff;
+  --color-gray-050: #f6f6f6;
+  --color-gray-100: #e5e5e5;
+  --color-gray-200: #d2d2d2;
+  --color-gray-300: #b4b4b4;
+  --color-gray-400: #8f8f8f;
+  --color-gray-500: #666666;
+  --color-gray-600: #464646;
+  --color-gray-700: #2d2d2d;
+  --color-gray-800: #1f1f1f;
+  --color-gray-900: #141414;
+  --color-gray-1000: #000000;
+
+  --color-opacity-000: #00000000;
+  --color-opacity-001: #00000003;
+  --color-opacity-050: #0000000d;
+  --color-opacity-100: #0000001a;
+  --color-opacity-200: #00000033;
+  --color-opacity-300: #0000004d;
+  --color-opacity-400: #00000066;
+  --color-opacity-500: #00000080;
+  --color-opacity-600: #00000099;
+  --color-opacity-700: #000000b2;
+  --color-opacity-800: #000000cc;
+  --color-opacity-900: #000000e5;
+
+  /* Kiwi */
+  --color-kiwi-kiwi0: #ebfff2;
+  --color-kiwi-kiwi50: #c9fedf;
+  --color-kiwi-kiwi100: #a8fdcd;
+  --color-kiwi-kiwi150: #8cf9bd;
+  --color-kiwi-kiwi200: #6ff6ae;
+  --color-kiwi-kiwi300: #45ea97;
+  --color-kiwi-kiwi400: #29d984;
+  --color-kiwi-kiwi500: #16c472;
+  --color-kiwi-kiwi600: #0ba960;
+  --color-kiwi-kiwi700: #058c4e;
+  --color-kiwi-kiwi800: #016c3c;
+  --color-kiwi-kiwi900: #004d2b;
+  --color-kiwi-kiwi1000: #00331c;
+
+  /* Lavender */
+  --color-lavender-lavender0: #f0ebff;
+  --color-lavender-lavender50: #e8defe;
+  --color-lavender-lavender100: #e0d1fd;
+  --color-lavender-lavender150: #d7c3f9;
+  --color-lavender-lavender200: #ceb5f6;
+  --color-lavender-lavender300: #bb97ea;
+  --color-lavender-lavender400: #a578d9;
+  --color-lavender-lavender500: #8d5ac4;
+  --color-lavender-lavender600: #743ea9;
+  --color-lavender-lavender700: #5a278c;
+  --color-lavender-lavender800: #41146c;
+  --color-lavender-lavender900: #2b074d;
+  --color-lavender-lavender1000: #1a0033;
+
+  /* Lime */
+  --color-lime-lime0: #fbffeb;
+  --color-lime-lime50: #f2fec9;
+  --color-lime-lime100: #e7fda8;
+  --color-lime-lime150: #daf98c;
+  --color-lime-lime200: #ccf66f;
+  --color-lime-lime300: #b1ea45;
+  --color-lime-lime400: #98d929;
+  --color-lime-lime500: #80c416;
+  --color-lime-lime600: #6aa90b;
+  --color-lime-lime700: #548c05;
+  --color-lime-lime800: #406c01;
+  --color-lime-lime900: #2d4d00;
+  --color-lime-lime1000: #1e3300;
+
+  /* Magenta */
+  --color-magenta-magenta0: #ffebf0;
+  --color-magenta-magenta50: #fedee7;
+  --color-magenta-magenta100: #fdd1dd;
+  --color-magenta-magenta150: #f9c3d2;
+  --color-magenta-magenta200: #f6b5c7;
+  --color-magenta-magenta300: #ea97ad;
+  --color-magenta-magenta400: #d97892;
+  --color-magenta-magenta500: #c45a76;
+  --color-magenta-magenta600: #a93e5b;
+  --color-magenta-magenta700: #8c2742;
+  --color-magenta-magenta800: #6c142b;
+  --color-magenta-magenta900: #4d071a;
+  --color-magenta-magenta1000: #33000e;
+
+  /* Red */
+  --color-red-red0: #ffebf1;
+  --color-red-red50: #fec9d6;
+  --color-red-red100: #fda8b7;
+  --color-red-red150: #f98c98;
+  --color-red-red200: #f66f78;
+  --color-red-red300: #ea4845;
+  --color-red-red400: #d93529;
+  --color-red-red500: #c42916;
+  --color-red-red600: #a9200b;
+  --color-red-red700: #8c1905;
+  --color-red-red800: #6c1301;
+  --color-red-red900: #4d0d00;
+  --color-red-red1000: #330800;
+
+  /* Royal Blue */
+  --color-royal-blue-royal-blue0: #ebecff;
+  --color-royal-blue-royal-blue50: #c9cdfe;
+  --color-royal-blue-royal-blue100: #a8adfd;
+  --color-royal-blue-royal-blue150: #8c91f9;
+  --color-royal-blue-royal-blue200: #6f74f6;
+  --color-royal-blue-royal-blue300: #4548ea;
+  --color-royal-blue-royal-blue400: #2b29d9;
+  --color-royal-blue-royal-blue500: #1c16c4;
+  --color-royal-blue-royal-blue600: #140ba9;
+  --color-royal-blue-royal-blue700: #0f058c;
+  --color-royal-blue-royal-blue800: #0c016c;
+  --color-royal-blue-royal-blue900: #0a004d;
+  --color-royal-blue-royal-blue1000: #080033;
+
+  /* Rust */
+  --color-rust-rust0: #ffedeb;
+  --color-rust-rust50: #fed8d4;
+  --color-rust-rust100: #fdc4bd;
+  --color-rust-rust150: #f9b0a6;
+  --color-rust-rust200: #f69c8f;
+  --color-rust-rust300: #ea7a65;
+  --color-rust-rust400: #d96043;
+  --color-rust-rust500: #c44e29;
+  --color-rust-rust600: #a94417;
+  --color-rust-rust700: #8c3d0b;
+  --color-rust-rust800: #6c3604;
+  --color-rust-rust900: #4d2c01;
+  --color-rust-rust1000: #332100;
+
+  /* Teal */
+  --color-teal-teal0: #ebfffc;
+  --color-teal-teal50: #c9fef9;
+  --color-teal-teal100: #a8fdf8;
+  --color-teal-teal150: #8cf9f8;
+  --color-teal-teal200: #6ff2f6;
+  --color-teal-teal300: #45dcea;
+  --color-teal-teal400: #29c3d9;
+  --color-teal-teal500: #16a9c4;
+  --color-teal-teal600: #0b8ea9;
+  --color-teal-teal700: #05728c;
+  --color-teal-teal800: #01576c;
+  --color-teal-teal900: #003e4d;
+  --color-teal-teal1000: #002933;
+
+  /* Yellow */
+  --color-yellow-yellow0: #fffeeb;
+  --color-yellow-yellow50: #fefcc9;
+  --color-yellow-yellow100: #fdfaa8;
+  --color-yellow-yellow150: #f9f58c;
+  --color-yellow-yellow200: #f6f06f;
+  --color-yellow-yellow300: #eae345;
+  --color-yellow-yellow400: #d9d129;
+  --color-yellow-yellow500: #c4bb16;
+  --color-yellow-yellow600: #a9a20b;
+  --color-yellow-yellow700: #8c8505;
+  --color-yellow-yellow800: #6c6701;
+  --color-yellow-yellow900: #4d4a00;
+  --color-yellow-yellow1000: #333000;
+
+  /* Border */
+  --color-border-default-brand-accent: var(--color-yellow-yellow300);
+  --color-border-default-brand-primary: var(--color-yellow-yellow100);
+  --color-border-default-brand-secondary: var(--color-rust-rust100);
+  --color-border-default-primary: var(--color-gray-900);
+  --color-border-default-secondary: var(--color-gray-800);
+  --color-border-default-tertiary: var(--color-gray-600);
+  --color-border-default-utility-info: var(--color-royal-blue-royal-blue300);
+  --color-border-default-utility-negative: var(--color-red-red300);
+  --color-border-default-utility-positive: var(--color-kiwi-kiwi300);
+  --color-border-default-utility-warning: var(--color-yellow-yellow300);
+
+  --color-border-inverse-brand-accent: var(--color-yellow-yellow50);
+  --color-border-inverse-brand-primary: var(--color-yellow-yellow800);
+  --color-border-inverse-brand-secondary: var(--color-rust-rust800);
+  --color-border-inverse-primary: var(--color-gray-000);
+  --color-border-inverse-secondary: var(--color-opacity-200);
+  --color-border-inverse-tertiary: var(--color-opacity-300);
+  --color-border-inverse-utility-info: var(--color-royal-blue-royal-blue300);
+  --color-border-inverse-utility-negative: var(--color-red-red300);
+  --color-border-inverse-utility-positive: var(--color-kiwi-kiwi400);
+  --color-border-inverse-utility-warning: var(--color-yellow-yellow400);
+
+  /* Content */
+  --color-content-brand-darker-accent-2: var(--color-yellow-yellow200);
+  --color-content-brand-kiwi: var(--color-kiwi-kiwi600);
+  --color-content-brand-lavender: var(--color-lavender-lavender500);
+  --color-content-brand-lighter-accent-2: var(--color-yellow-yellow100);
+  --color-content-brand-lime: var(--color-lime-lime500);
+  --color-content-brand-primary: var(--color-yellow-yellow50);
+  --color-content-brand-red: var(--color-red-red400);
+  --color-content-brand-royal: var(--color-royal-blue-royal-blue400);
+  --color-content-brand-rust: var(--color-rust-rust400);
+  --color-content-brand-teal: var(--color-teal-teal500);
+
+  --color-content-default-brand-accent: var(--color-opacity-700);
+  --color-content-default-brand-primary: var(--color-yellow-yellow100);
+  --color-content-default-brand-secondary: var(--color-rust-rust400);
   --color-content-default-primary: var(--color-gray-000);
   --color-content-default-secondary: var(--color-gray-200);
   --color-content-default-tertiary: var(--color-gray-300);
-  --color-content-default-brand-primary: var(--color-community-yellow-100);
-  --color-content-default-brand-secondary: var(--color-community-orange-400);
-  --color-content-default-brand-accent: var(--color-yellow-opacity-700);
+  --color-content-default-utility-info: var(--color-royal-blue-royal-blue500);
+  --color-content-default-utility-negative: var(--color-red-red400);
+  --color-content-default-utility-positive: var(--color-lime-lime400);
+  --color-content-default-utility-warning: var(--color-yellow-yellow500);
+
+  --color-content-inverse-brand-accent: var(--color-yellow-yellow700);
+  --color-content-inverse-brand-primary: var(--color-yellow-yellow900);
+  --color-content-inverse-brand-secondary: var(--color-rust-rust800);
   --color-content-inverse-primary: var(--color-gray-1000);
   --color-content-inverse-secondary: var(--color-gray-800);
   --color-content-inverse-tertiary: var(--color-gray-700);
-  --color-content-inverse-brand-primary: var(--color-community-yellow-900);
-  --color-content-inverse-brand-secondary: var(--color-community-orange-300);
-  --color-content-inverse-brand-accent: var(--color-yellow-opacity-400);
-  --color-surface-default-brand-primary: var(--color-community-yellow-100);
-  --color-surface-default-brand-secondary: var(--color-community-yellow-900);
+  --color-content-inverse-utility-info: var(--color-royal-blue-royal-blue300);
+  --color-content-inverse-utility-negative: var(--color-red-red300);
+  --color-content-inverse-utility-positive: var(--color-kiwi-kiwi300);
+  --color-content-inverse-utility-warning: var(--color-yellow-yellow300);
+
+  /* Surface */
+  --color-surface-default-brand-red: var(--color-red-red100);
+  --color-surface-default-brand-darker-accent: var(--color-yellow-yellow200);
+  --color-surface-default-brand-kiwi: var(--color-kiwi-kiwi200);
+  --color-surface-default-brand-lavender: var(--color-lavender-lavender200);
+  --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
+  --color-surface-default-brand-lime: var(--color-lime-lime100);
+  --color-surface-default-brand-primary: var(--color-yellow-yellow50);
+  --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
+  --color-surface-default-brand-rust: var(--color-rust-rust100);
+  --color-surface-default-brand-teal: var(--color-teal-teal50);
+
   --color-surface-default-primary: var(--color-gray-1000);
   --color-surface-default-secondary: var(--color-gray-900);
-  --color-surface-inverse-primary: var(--color-gray-000);
+  --color-surface-default-semi-opaque: var(--color-opacity-050);
   --color-surface-default-tertiary: var(--color-gray-800);
+  --color-surface-default-transparent: var(--color-opacity-000);
+
+  --color-surface-default-utility-info: var(--color-royal-blue-royal-blue400);
+  --color-surface-default-utility-negative: var(--color-red-red400);
+  --color-surface-default-utility-positive: var(--color-kiwi-kiwi500);
+  --color-surface-default-utility-warning: var(--color-yellow-yellow500);
+
+  --color-surface-inverse-brand-accent: var(--color-yellow-yellow100);
+  --color-surface-inverse-brand-primary: var(--color-yellow-yellow100);
+  --color-surface-inverse-brand-secondary: var(--color-rust-rust300);
+  --color-surface-inverse-primary: var(--color-gray-000);
   --color-surface-inverse-secondary: var(--color-gray-100);
   --color-surface-inverse-tertiary: var(--color-gray-200);
-  --color-surface-inverse-brand-primary: var(--color-community-yellow-100);
-  --color-surface-inverse-brand-secondary: var(--color-community-orange-300);
-  --color-surface-inverse-brand-accent: var(--color-yellow-opacity-100);
-  --border-color-default-primary: var(--color-gray-900);
-  --border-color-inverse-utility-info: var(--color-community-blue-300);
-  --border-color-inverse-primary: var(--color-gray-000);
-  --border-color-default-secondary: var(--color-gray-800);
-  --border-color-inverse-secondary: var(--color-opacity-200);
-  --border-color-inverse-tertiary: var(--color-opacity-300);
-  --border-color-default-tertiary: var(--color-gray-600);
-  --border-color-inverse-utility-negative: var(--color-community-red-300);
-  --border-color-default-brandprimary: var(--color-community-yellow-100);
-  --border-color-inverse-utility-warning: var(--color-community-yellow-400);
-  --border-color-inverse-utility-positive: var(--color-community-kiwi-400);
-  --border-color-default-brandsecondary: var(--color-community-orange-400);
-  --border-color-default-brandaccent: var(--color-yellow-opacity-300);
-  --border-color-inverse-brandprimary: var(--color-community-yellow-800);
-  --border-color-inverse-brandsecondary: var(--color-community-orange-300);
-  --color-surface-default-transparent: var(--color-opacity-000);
+  --color-surface-inverse-utility-info: var(--color-royal-blue-royal-blue300);
+  --color-surface-inverse-utility-negative: var(--color-red-red300);
+  --color-surface-inverse-utility-positive: var(--color-kiwi-kiwi300);
+  --color-surface-inverse-utility-warning: var(--color-yellow-yellow300);
+
+  /* Color */
+  --color-config-europe-morning-magenta: oklch(66.27% 0.264 321.73);
+  /* white */
+  --bg-color-light-primary: oklch(100% 0 263.28);
+
+  /* Shadow */
+  --shadow-focus-default: 0px 0px 10px 1px oklch(98.01% 0.065 105.71);
+  --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%);
+  --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%);
+  --shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28);
+  --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%);
+  /* Use this shadow most of the time */
+  --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%);
+  --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);
+
+  /* Typography */
+  --text-xx-large-display: 96px;
+  --text-xx-large-display--line-height: 110%;
+  --text-xx-large-display--letter-spacing: 0px;
+  --text-xx-large-display--font-weight: 400;
+
+  --text-xx-large-heading: 40px;
+  --text-xx-large-heading--line-height: 52px;
+  --text-xx-large-heading--letter-spacing: 0px;
+  --text-xx-large-heading--font-weight: 700;
+
+  --text-x-large-heading: 36px;
+  --text-x-large-heading--line-height: 44px;
+  --text-x-large-heading--letter-spacing: 0px;
+  --text-x-large-heading--font-weight: 800;
+
+  --text-large-heading: 32px;
+  --text-large-heading--line-height: 40px;
+  --text-large-heading--letter-spacing: 0px;
+  --text-large-heading--font-weight: 700;
+
+  --text-medium-heading: 28px;
+  --text-medium-heading--line-height: 36px;
+  --text-medium-heading--letter-spacing: 0px;
+  --text-medium-heading--font-weight: 700;
+
+  --text-small-heading: 24px;
+  --text-small-heading--line-height: 32px;
+  --text-small-heading--letter-spacing: 0px;
+  --text-small-heading--font-weight: 700;
+
+  --text-x-small-heading: 20px;
+  --text-x-small-heading--line-height: 28px;
+  --text-x-small-heading--letter-spacing: 0px;
+  --text-x-small-heading--font-weight: 700;
+
+  --text-large-label: 18px;
+  --text-large-label--line-height: 24px;
+  --text-large-label--letter-spacing: 0px;
+  --text-large-label--font-weight: 500;
+
+  --text-medium-label: 16px;
+  --text-medium-label--line-height: 20px;
+  --text-medium-label--letter-spacing: 0px;
+  --text-medium-label--font-weight: 500;
+
+  --text-small-label: 14px;
+  --text-small-label--line-height: 16px;
+  --text-small-label--letter-spacing: 0px;
+  --text-small-label--font-weight: 500;
+
+  /* Regular 400 */
+  --text-large-paragraph: 18px;
+  --text-large-paragraph--line-height: 130%;
+  --text-large-paragraph--letter-spacing: 0px;
+  --text-large-paragraph--font-weight: 400;
+
+  --text-medium-paragraph: 16px;
+  --text-medium-paragraph--line-height: 24px;
+  --text-medium-paragraph--letter-spacing: 0px;
+  --text-medium-paragraph--font-weight: 400;
+
+  --text-small-paragraph: 14px;
+  --text-small-paragraph--line-height: 20px;
+  --text-small-paragraph--letter-spacing: 0px;
+  --text-small-paragraph--font-weight: 400;
+
+  --text-x-small-paragraph: 12px;
+  --text-x-small-paragraph--line-height: 16px;
+  --text-x-small-paragraph--letter-spacing: 0px;
+  --text-x-small-paragraph--font-weight: 400;
+
+  --text-xx-small-label: 10px;
+  --text-xx-small-label--line-height: 12px;
+  --text-xx-small-label--letter-spacing: 0px;
+  --text-xx-small-label--font-weight: 500;
+
+  --text-xx-small-paragraph: 10px;
+  --text-xx-small-paragraph--line-height: 14px;
+  --text-xx-small-paragraph--letter-spacing: 0px;
+  --text-xx-small-paragraph--font-weight: 400;
+
+  --text-xx-small-italic: 10px;
+  --text-xx-small-italic--line-height: 14px;
+  --text-xx-small-italic--letter-spacing: 0px;
+  --text-xx-small-italic--font-weight: 400;
+
+  --text-x-large-label: 24px;
+  --text-x-large-label--line-height: 28px;
+  --text-x-large-label--letter-spacing: 0px;
+  --text-x-large-label--font-weight: 400;
+
+  --text-x-large-paragraph: 24px;
+  --text-x-large-paragraph--line-height: 32px;
+  --text-x-large-paragraph--letter-spacing: 0px;
+  --text-x-large-paragraph--font-weight: 400;
+
+  --text-xx-large-paragraph: 32px;
+  --text-xx-large-paragraph--line-height: 40px;
+  --text-xx-large-paragraph--letter-spacing: 0px;
+  --text-xx-large-paragraph--font-weight: 400;
+
+  --text-xx-large-label: 32px;
+  --text-xx-large-label--line-height: 36px;
+  --text-xx-large-label--letter-spacing: 0px;
+  --text-xx-large-label--font-weight: 400;
+
+  --text-x-small-underline: 12px;
+  --text-x-small-underline--line-height: 14px;
+  --text-x-small-underline--letter-spacing: 0px;
+  --text-x-small-underline--font-weight: 400;
+
+  --text-small-underline: 14px;
+  --text-small-underline--line-height: 16px;
+  --text-small-underline--letter-spacing: 0px;
+  --text-small-underline--font-weight: 400;
+
+  --text-medium-underline: 16px;
+  --text-medium-underline--line-height: 20px;
+  --text-medium-underline--letter-spacing: 0px;
+  --text-medium-underline--font-weight: 400;
+
+  --text-large-underline: 18px;
+  --text-large-underline--line-height: 24px;
+  --text-large-underline--letter-spacing: 0px;
+  --text-large-underline--font-weight: 400;
+
+  --text-x-large-underline: 24px;
+  --text-x-large-underline--line-height: 28px;
+  --text-x-large-underline--letter-spacing: 0px;
+  --text-x-large-underline--font-weight: 400;
+
+  --text-x-small-label: 12px;
+  --text-x-small-label--line-height: 14px;
+  --text-x-small-label--letter-spacing: 0px;
+  --text-x-small-label--font-weight: 500;
+
+  --text-x-small-label-caps: 10px;
+  --text-x-small-label-caps--line-height: 12px;
+  --text-x-small-label-caps--letter-spacing: 0px;
+  --text-x-small-label-caps--font-weight: 500;
+
+  --text-xx-small-heading: 16px;
+  --text-xx-small-heading--line-height: 22px;
+  --text-xx-small-heading--letter-spacing: 0px;
+  --text-xx-small-heading--font-weight: 700;
+
+  --text-x-small-display: 24px;
+  --text-x-small-display--line-height: 24px;
+  --text-x-small-display--letter-spacing: 0px;
+  --text-x-small-display--font-weight: 400;
+
+  --text-x-large-uppercase: 24px;
+  --text-x-large-uppercase--line-height: 120%;
+  --text-x-large-uppercase--letter-spacing: 0.48px;
+  --text-x-large-uppercase--font-weight: 400;
+
+  --text-xx-large-uppercase: 32px;
+  --text-xx-large-uppercase--line-height: 120%;
+  --text-xx-large-uppercase--letter-spacing: 0.64px;
+  --text-xx-large-uppercase--font-weight: 400;
+
+  --text-x-large-display: 64px;
+  --text-x-large-display--line-height: 110%;
+  --text-x-large-display--letter-spacing: 0px;
+  --text-x-large-display--font-weight: 400;
+
+  --text-large-display: 52px;
+  --text-large-display--line-height: 110%;
+  --text-large-display--letter-spacing: 0px;
+  --text-large-display--font-weight: 400;
+
+  --text-medium-display: 44px;
+  --text-medium-display--line-height: 110%;
+  --text-medium-display--letter-spacing: 0px;
+  --text-medium-display--font-weight: 400;
+
+  --text-xx-small-display: 18px;
+  --text-xx-small-display--line-height: 120%;
+  --text-xx-small-display--letter-spacing: 0px;
+  --text-xx-small-display--font-weight: 400;
+
+  --text-x-small-uppercase: 12px;
+  --text-x-small-uppercase--line-height: 120%;
+  --text-x-small-uppercase--letter-spacing: 0.24px;
+  --text-x-small-uppercase--font-weight: 400;
+
+  --text-large-uppercase: 18px;
+  --text-large-uppercase--line-height: 120%;
+  --text-large-uppercase--letter-spacing: 0.36px;
+  --text-large-uppercase--font-weight: 400;
+
+  --text-small-display: 36px;
+  --text-small-display--line-height: 110%;
+  --text-small-display--letter-spacing: 0px;
+  --text-small-display--font-weight: 400;
+}
+
+@layer utilities {
+  .text-x-small-heading {
+    font-size: var(--text-x-small-heading);
+    line-height: var(--text-x-small-heading--line-height);
+    font-weight: var(--text-x-small-heading--font-weight);
+    letter-spacing: var(--text-x-small-heading--letter-spacing);
+  }
+  .text-x-small-paragraph {
+    font-size: var(--text-x-small-paragraph);
+    line-height: var(--text-x-small-paragraph--line-height);
+    font-weight: var(--text-x-small-paragraph--font-weight);
+    letter-spacing: var(--text-x-small-paragraph--letter-spacing);
+  }
+}
+
+@layer components {
+  .xx-large-display {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-xx-large-display);
+    font-weight: var(--text-xx-large-display--font-weight);
+    line-height: var(--text-xx-large-display--line-height);
+    letter-spacing: var(--text-xx-large-display--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-large-heading {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-xx-large-heading);
+    font-weight: var(--text-xx-large-heading--font-weight);
+    line-height: var(--text-xx-large-heading--line-height);
+    letter-spacing: var(--text-xx-large-heading--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-large-heading {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-x-large-heading);
+    font-weight: var(--text-x-large-heading--font-weight);
+    line-height: var(--text-x-large-heading--line-height);
+    letter-spacing: var(--text-x-large-heading--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .large-heading {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-large-heading);
+    font-weight: var(--text-large-heading--font-weight);
+    line-height: var(--text-large-heading--line-height);
+    letter-spacing: var(--text-large-heading--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .medium-heading {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-medium-heading);
+    font-weight: var(--text-medium-heading--font-weight);
+    line-height: var(--text-medium-heading--line-height);
+    letter-spacing: var(--text-medium-heading--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .small-heading {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-small-heading);
+    font-weight: var(--text-small-heading--font-weight);
+    line-height: var(--text-small-heading--line-height);
+    letter-spacing: var(--text-small-heading--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-small-heading {
+    font-family: var(--font-space-grotesk);
+    font-size: var(--text-x-small-heading);
+    font-weight: var(--text-x-small-heading--font-weight);
+    line-height: var(--text-x-small-heading--line-height);
+    letter-spacing: var(--text-x-small-heading--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .large-label {
+    font-family: var(--font-inter);
+    font-size: var(--text-large-label);
+    font-weight: var(--text-large-label--font-weight);
+    line-height: var(--text-large-label--line-height);
+    letter-spacing: var(--text-large-label--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .medium-label {
+    font-family: var(--font-inter);
+    font-size: var(--text-medium-label);
+    font-weight: var(--text-medium-label--font-weight);
+    line-height: var(--text-medium-label--line-height);
+    letter-spacing: var(--text-medium-label--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .small-label {
+    font-family: var(--font-inter);
+    font-size: var(--text-small-label);
+    font-weight: var(--text-small-label--font-weight);
+    line-height: var(--text-small-label--line-height);
+    letter-spacing: var(--text-small-label--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  /* Regular 400 */
+  .large-paragraph {
+    font-family: var(--font-inter);
+    font-size: var(--text-large-paragraph);
+    font-weight: var(--text-large-paragraph--font-weight);
+    line-height: var(--text-large-paragraph--line-height);
+    letter-spacing: var(--text-large-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .medium-paragraph {
+    font-family: var(--font-inter);
+    font-size: var(--text-medium-paragraph);
+    font-weight: var(--text-medium-paragraph--font-weight);
+    line-height: var(--text-medium-paragraph--line-height);
+    letter-spacing: var(--text-medium-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .small-paragraph {
+    font-family: var(--font-inter);
+    font-size: var(--text-small-paragraph);
+    font-weight: var(--text-small-paragraph--font-weight);
+    line-height: var(--text-small-paragraph--line-height);
+    letter-spacing: var(--text-small-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-small-paragraph {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-small-paragraph);
+    font-weight: var(--text-x-small-paragraph--font-weight);
+    line-height: var(--text-x-small-paragraph--line-height);
+    letter-spacing: var(--text-x-small-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-small-label {
+    font-family: var(--font-inter);
+    font-size: var(--text-xx-small-label);
+    font-weight: var(--text-xx-small-label--font-weight);
+    line-height: var(--text-xx-small-label--line-height);
+    letter-spacing: var(--text-xx-small-label--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-small-paragraph {
+    font-family: var(--font-inter);
+    font-size: var(--text-xx-small-paragraph);
+    font-weight: var(--text-xx-small-paragraph--font-weight);
+    line-height: var(--text-xx-small-paragraph--line-height);
+    letter-spacing: var(--text-xx-small-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-small-italic {
+    font-family: var(--font-inter);
+    font-size: var(--text-xx-small-italic);
+    font-weight: var(--text-xx-small-italic--font-weight);
+    line-height: var(--text-xx-small-italic--line-height);
+    letter-spacing: var(--text-xx-small-italic--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-large-label {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-large-label);
+    font-weight: var(--text-x-large-label--font-weight);
+    line-height: var(--text-x-large-label--line-height);
+    letter-spacing: var(--text-x-large-label--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-large-paragraph {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-large-paragraph);
+    font-weight: var(--text-x-large-paragraph--font-weight);
+    line-height: var(--text-x-large-paragraph--line-height);
+    letter-spacing: var(--text-x-large-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-large-paragraph {
+    font-family: var(--font-inter);
+    font-size: var(--text-xx-large-paragraph);
+    font-weight: var(--text-xx-large-paragraph--font-weight);
+    line-height: var(--text-xx-large-paragraph--line-height);
+    letter-spacing: var(--text-xx-large-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-large-label {
+    font-family: var(--font-inter);
+    font-size: var(--text-xx-large-label);
+    font-weight: var(--text-xx-large-label--font-weight);
+    line-height: var(--text-xx-large-label--line-height);
+    letter-spacing: var(--text-xx-large-label--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-small-underline {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-small-underline);
+    font-weight: var(--text-x-small-underline--font-weight);
+    line-height: var(--text-x-small-underline--line-height);
+    letter-spacing: var(--text-x-small-underline--letter-spacing);
+    text-decoration: underline;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .small-underline {
+    font-family: var(--font-inter);
+    font-size: var(--text-small-underline);
+    font-weight: var(--text-small-underline--font-weight);
+    line-height: var(--text-small-underline--line-height);
+    letter-spacing: var(--text-small-underline--letter-spacing);
+    text-decoration: underline;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .medium-underline {
+    font-family: var(--font-inter);
+    font-size: var(--text-medium-underline);
+    font-weight: var(--text-medium-underline--font-weight);
+    line-height: var(--text-medium-underline--line-height);
+    letter-spacing: var(--text-medium-underline--letter-spacing);
+    text-decoration: underline;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .large-underline {
+    font-family: var(--font-inter);
+    font-size: var(--text-large-underline);
+    font-weight: var(--text-large-underline--font-weight);
+    line-height: var(--text-large-underline--line-height);
+    letter-spacing: var(--text-large-underline--letter-spacing);
+    text-decoration: underline;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-large-underline {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-large-underline);
+    font-weight: var(--text-x-large-underline--font-weight);
+    line-height: var(--text-x-large-underline--line-height);
+    letter-spacing: var(--text-x-large-underline--letter-spacing);
+    text-decoration: underline;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-small-label {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-small-label);
+    font-weight: var(--text-x-small-label--font-weight);
+    line-height: var(--text-x-small-label--line-height);
+    letter-spacing: var(--text-x-small-label--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-small-label-caps {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-small-label-caps);
+    font-weight: var(--text-x-small-label-caps--font-weight);
+    line-height: var(--text-x-small-label-caps--line-height);
+    letter-spacing: var(--text-x-small-label-caps--letter-spacing);
+    text-decoration: none;
+    text-transform: uppercase;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-small-heading {
+    font-family: var(--font-inter);
+    font-size: var(--text-xx-small-heading);
+    font-weight: var(--text-xx-small-heading--font-weight);
+    line-height: var(--text-xx-small-heading--line-height);
+    letter-spacing: var(--text-xx-small-heading--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-small-display {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-x-small-display);
+    font-weight: var(--text-x-small-display--font-weight);
+    line-height: var(--text-x-small-display--line-height);
+    letter-spacing: var(--text-x-small-display--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-large-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-large-uppercase);
+    font-weight: var(--text-x-large-uppercase--font-weight);
+    line-height: var(--text-x-large-uppercase--line-height);
+    letter-spacing: var(--text-x-large-uppercase--letter-spacing);
+    text-decoration: none;
+    text-transform: uppercase;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-large-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-xx-large-uppercase);
+    font-weight: var(--text-xx-large-uppercase--font-weight);
+    line-height: var(--text-xx-large-uppercase--line-height);
+    letter-spacing: var(--text-xx-large-uppercase--letter-spacing);
+    text-decoration: none;
+    text-transform: uppercase;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-large-display {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-x-large-display);
+    font-weight: var(--text-x-large-display--font-weight);
+    line-height: var(--text-x-large-display--line-height);
+    letter-spacing: var(--text-x-large-display--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .large-display {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-large-display);
+    font-weight: var(--text-large-display--font-weight);
+    line-height: var(--text-large-display--line-height);
+    letter-spacing: var(--text-large-display--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .medium-display {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-medium-display);
+    font-weight: var(--text-medium-display--font-weight);
+    line-height: var(--text-medium-display--line-height);
+    letter-spacing: var(--text-medium-display--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .xx-small-display {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-xx-small-display);
+    font-weight: var(--text-xx-small-display--font-weight);
+    line-height: var(--text-xx-small-display--line-height);
+    letter-spacing: var(--text-xx-small-display--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .x-small-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-x-small-uppercase);
+    font-weight: var(--text-x-small-uppercase--font-weight);
+    line-height: var(--text-x-small-uppercase--line-height);
+    letter-spacing: var(--text-x-small-uppercase--letter-spacing);
+    text-decoration: none;
+    text-transform: uppercase;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .large-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-large-uppercase);
+    font-weight: var(--text-large-uppercase--font-weight);
+    line-height: var(--text-large-uppercase--line-height);
+    letter-spacing: var(--text-large-uppercase--letter-spacing);
+    text-decoration: none;
+    text-transform: uppercase;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .small-display {
+    font-family: var(--font-bricolage-grotesque);
+    font-size: var(--text-small-display);
+    font-weight: var(--text-small-display--font-weight);
+    line-height: var(--text-small-display--line-height);
+    letter-spacing: var(--text-small-display--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
 }