@x-plat/design-system 0.5.66 → 0.6.1

package/dist/layout/index.css

@@ -1,306 +1,39 @@
 /* src/styles/style.css */
 :root {
-  --primitive-base-white: #FFFFFF;
-  --primitive-base-black: #000000;
-  --primitive-base-transparent: transparent;
-  --primitive-base-black-alpha-5: rgba(0, 0, 0, 0.05);
-  --primitive-base-black-alpha-10: rgba(0, 0, 0, 0.10);
-  --primitive-base-black-alpha-25: rgba(0, 0, 0, 0.25);
-  --primitive-base-black-alpha-50: rgba(0, 0, 0, 0.50);
-  --primitive-base-black-alpha-75: rgba(0, 0, 0, 0.75);
-  --primitive-base-white-alpha-5: rgba(255, 255, 255, 0.05);
-  --primitive-base-white-alpha-10: rgba(255, 255, 255, 0.10);
-  --primitive-base-white-alpha-25: rgba(255, 255, 255, 0.25);
-  --primitive-base-white-alpha-50: rgba(255, 255, 255, 0.50);
-  --primitive-base-white-alpha-75: rgba(255, 255, 255, 0.75);
-  --primitive-red-50: #FFF0F0;
-  --primitive-red-100: #FFDDDE;
-  --primitive-red-200: #FFC1C2;
-  --primitive-red-300: #FF9698;
-  --primitive-red-400: #FF5A5D;
-  --primitive-red-500: #FF272B;
-  --primitive-red-600: #F80409;
-  --primitive-red-700: #D40105;
-  --primitive-red-800: #AE0609;
-  --primitive-red-900: #900C0F;
-  --primitive-pink-50: #FFF4FE;
-  --primitive-pink-100: #FFE7FD;
-  --primitive-pink-200: #FFCFFA;
-  --primitive-pink-300: #FEA9F1;
-  --primitive-pink-400: #FD75E7;
-  --primitive-pink-500: #F553DA;
-  --primitive-pink-600: #D821B6;
-  --primitive-pink-700: #B31892;
-  --primitive-pink-800: #921676;
-  --primitive-pink-900: #781761;
-  --primitive-purple-50: #FBF6FE;
-  --primitive-purple-100: #F5EAFD;
-  --primitive-purple-200: #EDD8FC;
-  --primitive-purple-300: #E0BAF8;
-  --primitive-purple-400: #CD8DF3;
-  --primitive-purple-500: #B961EB;
-  --primitive-purple-600: #A541DC;
-  --primitive-purple-700: #9230C5;
-  --primitive-purple-800: #782B9E;
-  --primitive-purple-900: #62247F;
-  --primitive-deep-purple-50: #EDE7F6;
-  --primitive-deep-purple-100: #D1C4E9;
-  --primitive-deep-purple-200: #B39DDB;
-  --primitive-deep-purple-300: #9575CD;
-  --primitive-deep-purple-400: #7E57C2;
-  --primitive-deep-purple-500: #673AB7;
-  --primitive-deep-purple-600: #5E35B1;
-  --primitive-deep-purple-700: #4621A0;
-  --primitive-deep-purple-800: #290D7E;
-  --primitive-deep-purple-900: #1A0B5C;
-  --primitive-indigo-50: #E8EAF6;
-  --primitive-indigo-100: #C5CAE9;
-  --primitive-indigo-200: #9FA8DA;
-  --primitive-indigo-300: #7986CB;
-  --primitive-indigo-400: #5C6BC0;
-  --primitive-indigo-500: #3F51B5;
-  --primitive-indigo-600: #3949AB;
-  --primitive-indigo-700: #303F9F;
-  --primitive-indigo-800: #283593;
-  --primitive-indigo-900: #1A237E;
-  --primitive-blue-50: #F1F4FD;
-  --primitive-blue-100: #DFE7FA;
-  --primitive-blue-200: #C5D4F8;
-  --primitive-blue-300: #9EB8F2;
-  --primitive-blue-400: #7093EA;
-  --primitive-blue-500: #4D6DE3;
-  --primitive-blue-600: #3950D7;
-  --primitive-blue-700: #303EC5;
-  --primitive-blue-800: #2D35A0;
-  --primitive-blue-900: #29317F;
-  --primitive-light-blue-50: #EDF8FF;
-  --primitive-light-blue-100: #D7EDFF;
-  --primitive-light-blue-200: #B9E1FF;
-  --primitive-light-blue-300: #88D0FF;
-  --primitive-light-blue-400: #50B5FF;
-  --primitive-light-blue-500: #2893FF;
-  --primitive-light-blue-600: #1677FF;
-  --primitive-light-blue-700: #0A5CEB;
-  --primitive-light-blue-800: #0F4ABE;
-  --primitive-light-blue-900: #134295;
-  --primitive-cyan-50: #E0F7FA;
-  --primitive-cyan-100: #B2EBF2;
-  --primitive-cyan-200: #80DEEA;
-  --primitive-cyan-300: #4DD0E1;
-  --primitive-cyan-400: #26C6DA;
-  --primitive-cyan-500: #00BCD4;
-  --primitive-cyan-600: #00ACC1;
-  --primitive-cyan-700: #0097A7;
-  --primitive-cyan-800: #00838F;
-  --primitive-cyan-900: #006064;
-  --primitive-teal-50: #E0F2F1;
-  --primitive-teal-100: #B2DFDB;
-  --primitive-teal-200: #80CBC4;
-  --primitive-teal-300: #4DB6AC;
-  --primitive-teal-400: #26A69A;
-  --primitive-teal-500: #009688;
-  --primitive-teal-600: #00897B;
-  --primitive-teal-700: #00796B;
-  --primitive-teal-800: #00695C;
-  --primitive-teal-900: #004D40;
-  --primitive-green-50: #E5F6EA;
-  --primitive-green-100: #C1E7CC;
-  --primitive-green-200: #98D8AC;
-  --primitive-green-300: #6CCA8B;
-  --primitive-green-400: #47BE72;
-  --primitive-green-500: #10B259;
-  --primitive-green-600: #00A34F;
-  --primitive-green-700: #009143;
-  --primitive-green-800: #007F38;
-  --primitive-green-900: #006024;
-  --primitive-light-green-50: #F1F8E9;
-  --primitive-light-green-100: #DCEDC8;
-  --primitive-light-green-200: #C5E1A5;
-  --primitive-light-green-300: #AED581;
-  --primitive-light-green-400: #9CCC65;
-  --primitive-light-green-500: #8BC34A;
-  --primitive-light-green-600: #7CB342;
-  --primitive-light-green-700: #689F38;
-  --primitive-light-green-800: #558B2F;
-  --primitive-light-green-900: #33691E;
-  --primitive-lime-50: #F9FBE7;
-  --primitive-lime-100: #F0F4C3;
-  --primitive-lime-200: #E6EE9C;
-  --primitive-lime-300: #DCE775;
-  --primitive-lime-400: #D4E157;
-  --primitive-lime-500: #CDDC39;
-  --primitive-lime-600: #C0CA33;
-  --primitive-lime-700: #AFB42B;
-  --primitive-lime-800: #9E9D24;
-  --primitive-lime-900: #827717;
-  --primitive-yellow-50: #FFFDE7;
-  --primitive-yellow-100: #FFF9C4;
-  --primitive-yellow-200: #FFF6A9;
-  --primitive-yellow-300: #FFF280;
-  --primitive-yellow-400: #FFEE54;
-  --primitive-yellow-500: #FFE60C;
-  --primitive-yellow-600: #FDD835;
-  --primitive-yellow-700: #FBC02D;
-  --primitive-yellow-800: #F9A825;
-  --primitive-yellow-900: #F57F17;
-  --primitive-amber-50: #FFF8E1;
-  --primitive-amber-100: #FFECB3;
-  --primitive-amber-200: #FFE082;
-  --primitive-amber-300: #FFD54F;
-  --primitive-amber-400: #FFCA28;
-  --primitive-amber-500: #FFC107;
-  --primitive-amber-600: #FFB300;
-  --primitive-amber-700: #FFA000;
-  --primitive-amber-800: #FF8F00;
-  --primitive-amber-900: #FF6F00;
-  --primitive-orange-50: #FFF2DE;
-  --primitive-orange-100: #FFE0B2;
-  --primitive-orange-200: #FFCC80;
-  --primitive-orange-300: #FFB74D;
-  --primitive-orange-400: #FFA726;
-  --primitive-orange-500: #FF9800;
-  --primitive-orange-600: #FB8C00;
-  --primitive-orange-700: #F57C00;
-  --primitive-orange-800: #EF6C00;
-  --primitive-orange-900: #E65100;
-  --primitive-deep-orange-50: #FBE9E7;
-  --primitive-deep-orange-100: #FFCCBC;
-  --primitive-deep-orange-200: #FFAB91;
-  --primitive-deep-orange-300: #FF8A65;
-  --primitive-deep-orange-400: #FF7043;
-  --primitive-deep-orange-500: #FF5722;
-  --primitive-deep-orange-600: #F4511E;
-  --primitive-deep-orange-700: #E64A19;
-  --primitive-deep-orange-800: #D84315;
-  --primitive-deep-orange-900: #BF360C;
-  --primitive-brown-50: #F1EDEC;
-  --primitive-brown-100: #D7CCC8;
-  --primitive-brown-200: #BCAAA4;
-  --primitive-brown-300: #A1887F;
-  --primitive-brown-400: #8D6E63;
-  --primitive-brown-500: #795548;
-  --primitive-brown-600: #6D4C41;
-  --primitive-brown-700: #5D4037;
-  --primitive-brown-800: #4E342E;
-  --primitive-brown-900: #3E2723;
-  --primitive-neutral-50: #FAFAFA;
-  --primitive-neutral-100: #F5F5F5;
-  --primitive-neutral-200: #E5E5E5;
-  --primitive-neutral-300: #D4D4D4;
-  --primitive-neutral-400: #A1A1A1;
-  --primitive-neutral-500: #737373;
-  --primitive-neutral-600: #525252;
-  --primitive-neutral-700: #404040;
-  --primitive-neutral-800: #2F2F2F;
-  --primitive-neutral-900: #212121;
-  --primitive-blue-gray-50: #ECEFF1;
-  --primitive-blue-gray-100: #CFD8DC;
-  --primitive-blue-gray-200: #B0BEC5;
-  --primitive-blue-gray-300: #90A4AE;
-  --primitive-blue-gray-400: #78909C;
-  --primitive-blue-gray-500: #607D8B;
-  --primitive-blue-gray-600: #546E7A;
-  --primitive-blue-gray-700: #455A64;
-  --primitive-blue-gray-800: #37474F;
-  --primitive-blue-gray-900: #263238;
-}
-:root {
-  --spacing-size-0: 0;
-  --spacing-size-1: 4px;
-  --spacing-size-2: 8px;
-  --spacing-size-3: 12px;
-  --spacing-size-4: 16px;
-  --spacing-size-5: 20px;
-  --spacing-size-6: 24px;
-  --spacing-size-7: 28px;
-  --spacing-size-8: 32px;
-  --spacing-size-9: 36px;
-  --spacing-size-10: 40px;
-  --spacing-size-11: 48px;
-  --spacing-size-12: 64px;
-  --spacing-size-13: 80px;
-  --spacing-size-14: 96px;
-  --spacing-size-15: 120px;
-  --spacing-size-16: 160px;
-  --spacing-stroke-0: 0;
-  --spacing-stroke-1: 0.5px;
-  --spacing-stroke-2: 1px;
-  --spacing-stroke-3: 2px;
-  --spacing-stroke-4: 4px;
-  --spacing-stroke-5: 8px;
-  --spacing-stroke-6: 12px;
-}
-:root {
-  --spacing-brand-space-1: var(--spacing-size-1);
-  --spacing-brand-space-2: var(--spacing-size-2);
-  --spacing-brand-space-3: var(--spacing-size-3);
-  --spacing-brand-space-4: var(--spacing-size-4);
-  --spacing-brand-space-5: var(--spacing-size-5);
-  --spacing-brand-space-6: var(--spacing-size-6);
-  --spacing-brand-space-7: var(--spacing-size-7);
-  --spacing-brand-space-8: var(--spacing-size-8);
-  --spacing-brand-space-9: var(--spacing-size-9);
-  --spacing-brand-space-10: var(--spacing-size-10);
-  --spacing-brand-space-11: var(--spacing-size-11);
-  --spacing-brand-space-12: var(--spacing-size-12);
-  --spacing-brand-space-13: var(--spacing-size-13);
-  --spacing-brand-space-14: var(--spacing-size-14);
-  --spacing-brand-space-15: var(--spacing-size-15);
-  --spacing-brand-space-16: var(--spacing-size-16);
-  --spacing-brand-space-none: var(--spacing-size-0);
-  --spacing-brand-control-height-xs: var(--spacing-size-6);
-  --spacing-brand-control-height-sm: var(--spacing-size-8);
-  --spacing-brand-control-height-md: var(--spacing-size-10);
-  --spacing-brand-control-height-lg: var(--spacing-size-11);
-  --spacing-brand-radius-none: var(--spacing-size-0);
-  --spacing-brand-radius-sm: var(--spacing-size-1);
-  --spacing-brand-radius-md: var(--spacing-size-2);
-  --spacing-brand-radius-lg: var(--spacing-size-3);
-  --spacing-brand-radius-xl: var(--spacing-size-4);
-  --spacing-brand-radius-full: 9999px;
-  --spacing-brand-stroke-none: var(--spacing-stroke-0);
-  --spacing-brand-stroke-xs: var(--spacing-stroke-1);
-  --spacing-brand-stroke-sm: var(--spacing-stroke-2);
-  --spacing-brand-stroke-md: var(--spacing-stroke-3);
-  --spacing-brand-stroke-lg: var(--spacing-stroke-4);
-  --spacing-brand-stroke-xl: var(--spacing-stroke-5);
-  --spacing-brand-stroke-2xl: var(--spacing-stroke-6);
-}
-:root {
-  --spacing-space-1: var(--spacing-brand-space-1);
-  --spacing-space-2: var(--spacing-brand-space-2);
-  --spacing-space-3: var(--spacing-brand-space-3);
-  --spacing-space-4: var(--spacing-brand-space-4);
-  --spacing-space-5: var(--spacing-brand-space-5);
-  --spacing-space-6: var(--spacing-brand-space-6);
-  --spacing-space-7: var(--spacing-brand-space-7);
-  --spacing-space-8: var(--spacing-brand-space-8);
-  --spacing-space-9: var(--spacing-brand-space-9);
-  --spacing-space-10: var(--spacing-brand-space-10);
-  --spacing-space-11: var(--spacing-brand-space-11);
-  --spacing-space-12: var(--spacing-brand-space-12);
-  --spacing-space-13: var(--spacing-brand-space-13);
-  --spacing-space-14: var(--spacing-brand-space-14);
-  --spacing-space-15: var(--spacing-brand-space-15);
-  --spacing-space-16: var(--spacing-brand-space-16);
-  --spacing-space-none: var(--spacing-brand-space-none);
-  --spacing-control-height-xs: var(--spacing-brand-control-height-xs);
-  --spacing-control-height-sm: var(--spacing-brand-control-height-sm);
-  --spacing-control-height-md: var(--spacing-brand-control-height-md);
-  --spacing-control-height-lg: var(--spacing-brand-control-height-lg);
-  --spacing-radius-none: var(--spacing-brand-radius-none);
-  --spacing-radius-sm: var(--spacing-brand-radius-sm);
-  --spacing-radius-md: var(--spacing-brand-radius-md);
-  --spacing-radius-lg: var(--spacing-brand-radius-lg);
-  --spacing-radius-xl: var(--spacing-brand-radius-xl);
-  --spacing-radius-full: var(--spacing-brand-radius-full);
-  --spacing-stroke-none: var(--spacing-brand-stroke-none);
-  --spacing-stroke-xs: var(--spacing-brand-stroke-xs);
-  --spacing-stroke-sm: var(--spacing-brand-stroke-sm);
-  --spacing-stroke-md: var(--spacing-brand-stroke-md);
-  --spacing-stroke-lg: var(--spacing-brand-stroke-lg);
-  --spacing-stroke-xl: var(--spacing-brand-stroke-xl);
-  --spacing-stroke-2xl: var(--spacing-brand-stroke-2xl);
+  --spacing-space-1: 4px;
+  --spacing-space-2: 8px;
+  --spacing-space-3: 12px;
+  --spacing-space-4: 16px;
+  --spacing-space-5: 20px;
+  --spacing-space-6: 24px;
+  --spacing-space-7: 28px;
+  --spacing-space-8: 32px;
+  --spacing-space-9: 36px;
+  --spacing-space-10: 40px;
+  --spacing-space-11: 48px;
+  --spacing-space-12: 64px;
+  --spacing-space-13: 80px;
+  --spacing-space-14: 96px;
+  --spacing-space-15: 120px;
+  --spacing-space-16: 160px;
+  --spacing-space-none: 0;
+  --spacing-control-height-xs: 24px;
+  --spacing-control-height-sm: 32px;
+  --spacing-control-height-md: 40px;
+  --spacing-control-height-lg: 48px;
+  --spacing-radius-none: 0;
+  --spacing-radius-sm: 4px;
+  --spacing-radius-md: 8px;
+  --spacing-radius-lg: 12px;
+  --spacing-radius-xl: 16px;
+  --spacing-radius-full: 9999px;
+  --spacing-stroke-none: 0;
+  --spacing-stroke-xs: 0.5px;
+  --spacing-stroke-sm: 1px;
+  --spacing-stroke-md: 2px;
+  --spacing-stroke-lg: 4px;
+  --spacing-stroke-xl: 8px;
+  --spacing-stroke-2xl: 12px;
 }
 :root {
   --effects-opacity-0: 0;
@@ -338,140 +71,144 @@
   --semantic-shadow-overlay: var(--effects-brand-shadow-overlay);
 }
 :root {
-  --brand-primary-50: var(--primitive-blue-50);
-  --brand-primary-100: var(--primitive-blue-100);
-  --brand-primary-200: var(--primitive-blue-200);
-  --brand-primary-300: var(--primitive-blue-300);
-  --brand-primary-400: var(--primitive-blue-400);
-  --brand-primary-500: var(--primitive-blue-500);
-  --brand-primary-600: var(--primitive-blue-600);
-  --brand-primary-700: var(--primitive-blue-700);
-  --brand-primary-800: var(--primitive-blue-800);
-  --brand-primary-900: var(--primitive-blue-900);
-  --brand-secondary-50: var(--primitive-light-blue-50);
-  --brand-secondary-100: var(--primitive-light-blue-100);
-  --brand-secondary-200: var(--primitive-light-blue-200);
-  --brand-secondary-300: var(--primitive-light-blue-300);
-  --brand-secondary-400: var(--primitive-light-blue-400);
-  --brand-secondary-500: var(--primitive-light-blue-500);
-  --brand-secondary-600: var(--primitive-light-blue-600);
-  --brand-secondary-700: var(--primitive-light-blue-700);
-  --brand-secondary-800: var(--primitive-light-blue-800);
-  --brand-secondary-900: var(--primitive-light-blue-900);
-  --brand-neutral-50: var(--primitive-neutral-50);
-  --brand-neutral-100: var(--primitive-neutral-100);
-  --brand-neutral-200: var(--primitive-neutral-200);
-  --brand-neutral-300: var(--primitive-neutral-300);
-  --brand-neutral-400: var(--primitive-neutral-400);
-  --brand-neutral-500: var(--primitive-neutral-500);
-  --brand-neutral-600: var(--primitive-neutral-600);
-  --brand-neutral-700: var(--primitive-neutral-700);
-  --brand-neutral-800: var(--primitive-neutral-800);
-  --brand-neutral-900: var(--primitive-neutral-900);
-  --brand-base-white: var(--primitive-base-white);
-  --brand-base-black-alpha-10: var(--primitive-base-black-alpha-10);
-  --brand-base-black-alpha-25: var(--primitive-base-black-alpha-25);
-  --brand-categorical-1-100: var(--primitive-red-100);
-  --brand-categorical-1-200: var(--primitive-red-200);
-  --brand-categorical-1-300: var(--primitive-red-300);
-  --brand-categorical-1-400: var(--primitive-red-400);
-  --brand-categorical-1-500: var(--primitive-red-500);
-  --brand-categorical-1-600: var(--primitive-red-600);
-  --brand-categorical-2-100: var(--primitive-green-100);
-  --brand-categorical-2-200: var(--primitive-green-200);
-  --brand-categorical-2-300: var(--primitive-green-300);
-  --brand-categorical-2-400: var(--primitive-green-400);
-  --brand-categorical-2-500: var(--primitive-green-500);
-  --brand-categorical-2-600: var(--primitive-green-600);
-  --brand-categorical-3-100: var(--primitive-blue-100);
-  --brand-categorical-3-200: var(--primitive-blue-200);
-  --brand-categorical-3-300: var(--primitive-blue-300);
-  --brand-categorical-3-400: var(--primitive-blue-400);
-  --brand-categorical-3-500: var(--primitive-blue-500);
-  --brand-categorical-3-600: var(--primitive-blue-600);
-  --brand-categorical-4-100: var(--primitive-purple-100);
-  --brand-categorical-4-200: var(--primitive-purple-200);
-  --brand-categorical-4-300: var(--primitive-purple-300);
-  --brand-categorical-4-400: var(--primitive-purple-400);
-  --brand-categorical-4-500: var(--primitive-purple-500);
-  --brand-categorical-4-600: var(--primitive-purple-600);
-  --brand-categorical-5-100: var(--primitive-orange-100);
-  --brand-categorical-5-200: var(--primitive-orange-200);
-  --brand-categorical-5-300: var(--primitive-orange-300);
-  --brand-categorical-5-400: var(--primitive-orange-400);
-  --brand-categorical-5-500: var(--primitive-orange-500);
-  --brand-categorical-5-600: var(--primitive-orange-600);
-  --brand-categorical-6-100: var(--primitive-teal-100);
-  --brand-categorical-6-200: var(--primitive-teal-200);
-  --brand-categorical-6-300: var(--primitive-teal-300);
-  --brand-categorical-6-400: var(--primitive-teal-400);
-  --brand-categorical-6-500: var(--primitive-teal-500);
-  --brand-categorical-6-600: var(--primitive-teal-600);
-  --brand-categorical-7-100: var(--primitive-yellow-100);
-  --brand-categorical-7-200: var(--primitive-yellow-200);
-  --brand-categorical-7-300: var(--primitive-yellow-300);
-  --brand-categorical-7-400: var(--primitive-yellow-400);
-  --brand-categorical-7-500: var(--primitive-yellow-500);
-  --brand-categorical-7-600: var(--primitive-yellow-600);
-  --brand-categorical-8-100: var(--primitive-pink-100);
-  --brand-categorical-8-200: var(--primitive-pink-200);
-  --brand-categorical-8-300: var(--primitive-pink-300);
-  --brand-categorical-8-400: var(--primitive-pink-400);
-  --brand-categorical-8-500: var(--primitive-pink-500);
-  --brand-categorical-8-600: var(--primitive-pink-600);
+  --brand-primary-50: #F1F4FD;
+  --brand-primary-100: #DFE7FA;
+  --brand-primary-200: #C5D4F8;
+  --brand-primary-300: #9EB8F2;
+  --brand-primary-400: #7093EA;
+  --brand-primary-500: #4D6DE3;
+  --brand-primary-600: #3950D7;
+  --brand-primary-700: #303EC5;
+  --brand-primary-800: #2D35A0;
+  --brand-primary-900: #29317F;
+  --brand-secondary-50: #EDF8FF;
+  --brand-secondary-100: #D7EDFF;
+  --brand-secondary-200: #B9E1FF;
+  --brand-secondary-300: #88D0FF;
+  --brand-secondary-400: #50B5FF;
+  --brand-secondary-500: #2893FF;
+  --brand-secondary-600: #1677FF;
+  --brand-secondary-700: #0A5CEB;
+  --brand-secondary-800: #0F4ABE;
+  --brand-secondary-900: #134295;
+  --brand-neutral-50: #FAFAFA;
+  --brand-neutral-100: #F5F5F5;
+  --brand-neutral-200: #E5E5E5;
+  --brand-neutral-300: #D4D4D4;
+  --brand-neutral-400: #A1A1A1;
+  --brand-neutral-500: #737373;
+  --brand-neutral-600: #525252;
+  --brand-neutral-700: #404040;
+  --brand-neutral-800: #2F2F2F;
+  --brand-neutral-900: #212121;
+  --brand-base-white: #FFFFFF;
+  --brand-base-overlay-5: rgba(0, 0, 0, 0.05);
+  --brand-base-overlay-10: rgba(0, 0, 0, 0.10);
+  --brand-base-overlay-25: rgba(0, 0, 0, 0.25);
+  --brand-base-overlay-50: rgba(0, 0, 0, 0.50);
+  --brand-base-overlay-75: rgba(0, 0, 0, 0.75);
+  --brand-base-overlay-85: rgba(0, 0, 0, 0.85);
+  --brand-categorical-1-100: #FFDDDE;
+  --brand-categorical-1-200: #FFC1C2;
+  --brand-categorical-1-300: #FF9698;
+  --brand-categorical-1-400: #FF5A5D;
+  --brand-categorical-1-500: #FF272B;
+  --brand-categorical-1-600: #F80409;
+  --brand-categorical-2-100: #C1E7CC;
+  --brand-categorical-2-200: #98D8AC;
+  --brand-categorical-2-300: #6CCA8B;
+  --brand-categorical-2-400: #47BE72;
+  --brand-categorical-2-500: #10B259;
+  --brand-categorical-2-600: #00A34F;
+  --brand-categorical-3-100: #DFE7FA;
+  --brand-categorical-3-200: #C5D4F8;
+  --brand-categorical-3-300: #9EB8F2;
+  --brand-categorical-3-400: #7093EA;
+  --brand-categorical-3-500: #4D6DE3;
+  --brand-categorical-3-600: #3950D7;
+  --brand-categorical-4-100: #F5EAFD;
+  --brand-categorical-4-200: #EDD8FC;
+  --brand-categorical-4-300: #E0BAF8;
+  --brand-categorical-4-400: #CD8DF3;
+  --brand-categorical-4-500: #B961EB;
+  --brand-categorical-4-600: #A541DC;
+  --brand-categorical-5-100: #FFE0B2;
+  --brand-categorical-5-200: #FFCC80;
+  --brand-categorical-5-300: #FFB74D;
+  --brand-categorical-5-400: #FFA726;
+  --brand-categorical-5-500: #FF9800;
+  --brand-categorical-5-600: #FB8C00;
+  --brand-categorical-6-100: #B2DFDB;
+  --brand-categorical-6-200: #80CBC4;
+  --brand-categorical-6-300: #4DB6AC;
+  --brand-categorical-6-400: #26A69A;
+  --brand-categorical-6-500: #009688;
+  --brand-categorical-6-600: #00897B;
+  --brand-categorical-7-100: #FFF9C4;
+  --brand-categorical-7-200: #FFF6A9;
+  --brand-categorical-7-300: #FFF280;
+  --brand-categorical-7-400: #FFEE54;
+  --brand-categorical-7-500: #FFE60C;
+  --brand-categorical-7-600: #FDD835;
+  --brand-categorical-8-100: #FFE7FD;
+  --brand-categorical-8-200: #FFCFFA;
+  --brand-categorical-8-300: #FEA9F1;
+  --brand-categorical-8-400: #FD75E7;
+  --brand-categorical-8-500: #F553DA;
+  --brand-categorical-8-600: #D821B6;
 }
 :root {
-  --system-success-50: var(--primitive-green-50);
-  --system-success-100: var(--primitive-green-100);
-  --system-success-200: var(--primitive-green-200);
-  --system-success-300: var(--primitive-green-300);
-  --system-success-400: var(--primitive-green-400);
-  --system-success-500: var(--primitive-green-500);
-  --system-success-600: var(--primitive-green-600);
-  --system-success-700: var(--primitive-green-700);
-  --system-success-800: var(--primitive-green-800);
-  --system-success-900: var(--primitive-green-900);
-  --system-error-50: var(--primitive-red-50);
-  --system-error-100: var(--primitive-red-100);
-  --system-error-200: var(--primitive-red-200);
-  --system-error-300: var(--primitive-red-300);
-  --system-error-400: var(--primitive-red-400);
-  --system-error-500: var(--primitive-red-500);
-  --system-error-600: var(--primitive-red-600);
-  --system-error-700: var(--primitive-red-700);
-  --system-error-800: var(--primitive-red-800);
-  --system-error-900: var(--primitive-red-900);
-  --system-warning-50: var(--primitive-yellow-50);
-  --system-warning-100: var(--primitive-yellow-100);
-  --system-warning-200: var(--primitive-yellow-200);
-  --system-warning-300: var(--primitive-yellow-300);
-  --system-warning-400: var(--primitive-yellow-400);
-  --system-warning-500: var(--primitive-yellow-500);
-  --system-warning-600: var(--primitive-yellow-600);
-  --system-warning-700: var(--primitive-yellow-700);
-  --system-warning-800: var(--primitive-yellow-800);
-  --system-warning-900: var(--primitive-yellow-900);
-  --system-info-50: var(--primitive-blue-50);
-  --system-info-100: var(--primitive-blue-100);
-  --system-info-200: var(--primitive-blue-200);
-  --system-info-300: var(--primitive-blue-300);
-  --system-info-400: var(--primitive-blue-400);
-  --system-info-500: var(--primitive-blue-500);
-  --system-info-600: var(--primitive-blue-600);
-  --system-info-700: var(--primitive-blue-700);
-  --system-info-800: var(--primitive-blue-800);
-  --system-info-900: var(--primitive-blue-900);
-  --system-link-400: var(--primitive-deep-purple-400);
-  --system-link-500: var(--primitive-deep-purple-500);
-  --system-link-600: var(--primitive-deep-purple-600);
-  --system-link-700: var(--primitive-deep-purple-700);
+  --system-success-50: #E5F6EA;
+  --system-success-100: #C1E7CC;
+  --system-success-200: #98D8AC;
+  --system-success-300: #6CCA8B;
+  --system-success-400: #47BE72;
+  --system-success-500: #10B259;
+  --system-success-600: #00A34F;
+  --system-success-700: #009143;
+  --system-success-800: #007F38;
+  --system-success-900: #006024;
+  --system-error-50: #FFF0F0;
+  --system-error-100: #FFDDDE;
+  --system-error-200: #FFC1C2;
+  --system-error-300: #FF9698;
+  --system-error-400: #FF5A5D;
+  --system-error-500: #FF272B;
+  --system-error-600: #F80409;
+  --system-error-700: #D40105;
+  --system-error-800: #AE0609;
+  --system-error-900: #900C0F;
+  --system-warning-50: #FFFDE7;
+  --system-warning-100: #FFF9C4;
+  --system-warning-200: #FFF6A9;
+  --system-warning-300: #FFF280;
+  --system-warning-400: #FFEE54;
+  --system-warning-500: #FFE60C;
+  --system-warning-600: #FDD835;
+  --system-warning-700: #FBC02D;
+  --system-warning-800: #F9A825;
+  --system-warning-900: #F57F17;
+  --system-info-50: #F1F4FD;
+  --system-info-100: #DFE7FA;
+  --system-info-200: #C5D4F8;
+  --system-info-300: #9EB8F2;
+  --system-info-400: #7093EA;
+  --system-info-500: #4D6DE3;
+  --system-info-600: #3950D7;
+  --system-info-700: #303EC5;
+  --system-info-800: #2D35A0;
+  --system-info-900: #29317F;
+  --system-link-400: #7E57C2;
+  --system-link-500: #673AB7;
+  --system-link-600: #5E35B1;
+  --system-link-700: #4621A0;
 }
 :root {
-  --semantic-text-strong: var(--brand-neutral-900);
-  --semantic-text-subtle: var(--brand-neutral-700);
-  --semantic-text-muted: var(--brand-neutral-500);
-  --semantic-text-brand: var(--brand-primary-700);
-  --semantic-text-brand-secondary: var(--brand-secondary-700);
+  --semantic-text-primary: var(--brand-neutral-900);
+  --semantic-text-secondary: var(--brand-neutral-700);
+  --semantic-text-tertiary: var(--brand-neutral-400);
+  --semantic-text-brand-primary: var(--brand-primary-600);
+  --semantic-text-brand-secondary: var(--brand-secondary-600);
   --semantic-text-disabled: var(--brand-neutral-400);
   --semantic-text-inverse: var(--brand-base-white);
   --semantic-text-success: var(--system-success-700);
@@ -479,12 +216,12 @@
   --semantic-text-warning: var(--system-warning-700);
   --semantic-text-info: var(--system-info-700);
   --semantic-text-link: var(--system-link-700);
-  --semantic-text-sunday: var(--system-error-500);
-  --semantic-text-saturday: var(--system-info-500);
-  --semantic-surface-neutral-default: var(--brand-base-white);
-  --semantic-surface-neutral-subtle: var(--brand-neutral-50);
-  --semantic-surface-neutral-strong: var(--brand-neutral-300);
-  --semantic-surface-neutral-overlay: var(--brand-base-black-alpha-25);
+  --semantic-text-accent-red: var(--system-error-500);
+  --semantic-text-accent-blue: var(--system-info-500);
+  --semantic-surface-neutral-primary: var(--brand-base-white);
+  --semantic-surface-neutral-secondary: var(--brand-neutral-50);
+  --semantic-surface-neutral-tertiary: var(--brand-neutral-300);
+  --semantic-surface-neutral-inverse: var(--brand-neutral-900);
   --semantic-surface-neutral-disabled: var(--brand-neutral-200);
   --semantic-surface-brand-subtle: var(--brand-primary-50);
   --semantic-surface-brand-default: var(--brand-primary-600);
@@ -504,18 +241,18 @@
   --semantic-surface-info-subtle: var(--system-info-50);
   --semantic-surface-info-default: var(--system-info-600);
   --semantic-surface-info-strong: var(--system-info-700);
-  --semantic-border-default: var(--brand-neutral-200);
-  --semantic-border-subtle: var(--brand-neutral-100);
-  --semantic-border-strong: var(--brand-neutral-400);
+  --semantic-border-primary: var(--brand-neutral-200);
+  --semantic-border-secondary: var(--brand-neutral-100);
+  --semantic-border-tertiary: var(--brand-neutral-400);
   --semantic-border-disabled: var(--brand-neutral-300);
-  --semantic-border-brand: var(--brand-primary-600);
+  --semantic-border-brand-primary: var(--brand-primary-400);
   --semantic-border-brand-secondary: var(--brand-secondary-600);
   --semantic-border-success: var(--system-success-300);
   --semantic-border-error: var(--system-error-300);
   --semantic-border-warning: var(--system-warning-300);
   --semantic-border-info: var(--system-info-300);
-  --semantic-icon-strong: var(--brand-neutral-700);
-  --semantic-icon-subtle: var(--brand-neutral-500);
+  --semantic-icon-primary: var(--brand-neutral-700);
+  --semantic-icon-secondary: var(--brand-neutral-500);
   --semantic-icon-inverse: var(--brand-base-white);
   --semantic-icon-brand: var(--brand-primary-600);
   --semantic-icon-brand-secondary: var(--brand-secondary-600);
@@ -524,14 +261,11 @@
   --semantic-icon-warning: var(--system-warning-600);
   --semantic-icon-info: var(--system-info-600);
   --semantic-icon-disabled: var(--brand-neutral-300);
-  --semantic-emphasis-brand: var(--brand-primary-800);
-  --semantic-emphasis-brand-secondary: var(--brand-secondary-800);
-  --semantic-emphasis-success: var(--system-success-800);
-  --semantic-emphasis-error: var(--system-error-800);
-  --semantic-emphasis-warning: var(--system-warning-800);
-  --semantic-emphasis-info: var(--system-info-800);
-  --semantic-interaction-overlay-10: var(--brand-base-black-alpha-10);
-  --semantic-interaction-overlay-25: var(--brand-base-black-alpha-25);
+  --semantic-interaction-overlay-5: var(--brand-base-overlay-5);
+  --semantic-interaction-overlay-10: var(--brand-base-overlay-10);
+  --semantic-interaction-overlay-25: var(--brand-base-overlay-25);
+  --semantic-interaction-overlay-50: var(--brand-base-overlay-50);
+  --semantic-interaction-overlay-75: var(--brand-base-overlay-75);
   --semantic-interaction-focus-ring: var(--brand-primary-700);
 }
 :root {
@@ -569,16 +303,12 @@
   --semantic-categorical-8-text: var(--brand-categorical-8-600);
 }
 :root {
-  --typo-font-family-sans:
+  --typo-font-family-default:
     Pretendard,
     -apple-system,
     sans-serif;
-  --typo-font-family-serif:
-    Noto Serif KR,
-    Georgia,
-    serif;
-  --typo-font-family-suit:
-    SUIT,
+  --typo-font-family-brand:
+    Pretendard,
     -apple-system,
     sans-serif;
   --typo-weight-regular: 400;
@@ -591,96 +321,27 @@
   --typo-size-title-2: 24px;
   --typo-size-heading-1: 20px;
   --typo-size-heading-2: 18px;
-  --typo-size-compact-body-1: 17px;
-  --typo-size-compact-body-2: 15px;
-  --typo-size-compact-label-1: 14px;
-  --typo-size-compact-label-2: 12px;
-  --typo-size-compact-caption-1: 11px;
-  --typo-size-compact-caption-2: 11px;
-  --typo-size-default-body-1: 18px;
-  --typo-size-default-body-2: 17px;
-  --typo-size-default-label-1: 16px;
-  --typo-size-default-label-2: 14px;
-  --typo-size-default-caption-1: 13px;
-  --typo-size-default-caption-2: 12px;
-  --typo-size-airy-body-1: 20px;
-  --typo-size-airy-body-2: 19px;
-  --typo-size-airy-label-1: 18px;
-  --typo-size-airy-label-2: 16px;
-  --typo-size-airy-caption-1: 14px;
-  --typo-size-airy-caption-2: 13px;
+  --typo-size-body-1: 18px;
+  --typo-size-body-2: 17px;
+  --typo-size-label-1: 16px;
+  --typo-size-label-2: 14px;
+  --typo-size-caption-1: 13px;
+  --typo-size-caption-2: 12px;
   --typo-lh-display-1: 62px;
   --typo-lh-display-2: 48px;
   --typo-lh-title-1: 38px;
   --typo-lh-title-2: 34px;
-  --typo-lh-compact-heading-1: 26px;
-  --typo-lh-compact-heading-2: 24px;
-  --typo-lh-compact-body-1: 24px;
-  --typo-lh-compact-body-2: 22px;
-  --typo-lh-compact-label-1: 20px;
-  --typo-lh-compact-label-2: 18px;
-  --typo-lh-compact-caption-1: 16px;
-  --typo-lh-compact-caption-2: 16px;
-  --typo-lh-default-heading-1: 30px;
-  --typo-lh-default-heading-2: 28px;
-  --typo-lh-default-body-1: 26px;
-  --typo-lh-default-body-2: 24px;
-  --typo-lh-default-label-1: 24px;
-  --typo-lh-default-label-2: 22px;
-  --typo-lh-default-caption-1: 18px;
-  --typo-lh-default-caption-2: 18px;
-  --typo-lh-airy-heading-1: 34px;
-  --typo-lh-airy-heading-2: 32px;
-  --typo-lh-airy-body-1: 30px;
-  --typo-lh-airy-body-2: 28px;
-  --typo-lh-airy-label-1: 28px;
-  --typo-lh-airy-label-2: 26px;
-  --typo-lh-airy-caption-1: 22px;
-  --typo-lh-airy-caption-2: 20px;
+  --typo-lh-heading-1: 30px;
+  --typo-lh-heading-2: 28px;
+  --typo-lh-body-1: 26px;
+  --typo-lh-body-2: 24px;
+  --typo-lh-label-1: 24px;
+  --typo-lh-label-2: 22px;
+  --typo-lh-caption-1: 18px;
+  --typo-lh-caption-2: 18px;
   --typo-ls-tight: -0.02em;
   --typo-ls-normal: 0;
   --typo-ls-wide: 0.02em;
-  --typo-brand-font-family-font: var(--typo-font-family-sans);
-  --typo-brand-size-display-1: var(--typo-size-display-1);
-  --typo-brand-size-display-2: var(--typo-size-display-2);
-  --typo-brand-size-title-1: var(--typo-size-title-1);
-  --typo-brand-size-title-2: var(--typo-size-title-2);
-  --typo-brand-size-heading-1: var(--typo-size-heading-1);
-  --typo-brand-size-heading-2: var(--typo-size-heading-2);
-  --typo-brand-size-body-1: var(--typo-size-default-body-1);
-  --typo-brand-size-body-2: var(--typo-size-default-body-2);
-  --typo-brand-size-label-1: var(--typo-size-default-label-1);
-  --typo-brand-size-label-2: var(--typo-size-default-label-2);
-  --typo-brand-size-caption-1: var(--typo-size-default-caption-1);
-  --typo-brand-size-caption-2: var(--typo-size-default-caption-2);
-  --typo-brand-line-height-display-1: var(--typo-lh-display-1);
-  --typo-brand-line-height-display-2: var(--typo-lh-display-2);
-  --typo-brand-line-height-title-1: var(--typo-lh-title-1);
-  --typo-brand-line-height-title-2: var(--typo-lh-title-2);
-  --typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
-  --typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
-  --typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
-  --typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
-  --typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
-  --typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
-  --typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
-  --typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
-  --typo-brand-weight-regular: var(--typo-weight-regular);
-  --typo-brand-weight-medium: var(--typo-weight-medium);
-  --typo-brand-weight-semibold: var(--typo-weight-semibold);
-  --typo-brand-weight-bold: var(--typo-weight-bold);
-  --typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
-  --typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
-  --typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
-  --typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
-  --typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
-  --typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
-  --typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
 }
 @media (min-width: 768px) and (max-width: 1024px) {
   :root {
@@ -690,52 +351,24 @@
     --typo-size-title-2: 22px;
     --typo-size-heading-1: 19px;
     --typo-size-heading-2: 17px;
-    --typo-size-compact-body-1: 16px;
-    --typo-size-compact-body-2: 15px;
-    --typo-size-compact-label-1: 14px;
-    --typo-size-compact-label-2: 12px;
-    --typo-size-compact-caption-1: 11px;
-    --typo-size-compact-caption-2: 11px;
-    --typo-size-default-body-1: 17px;
-    --typo-size-default-body-2: 16px;
-    --typo-size-default-label-1: 16px;
-    --typo-size-default-label-2: 14px;
-    --typo-size-default-caption-1: 13px;
-    --typo-size-default-caption-2: 12px;
-    --typo-size-airy-body-1: 19px;
-    --typo-size-airy-body-2: 17px;
-    --typo-size-airy-label-1: 17px;
-    --typo-size-airy-label-2: 15px;
-    --typo-size-airy-caption-1: 14px;
-    --typo-size-airy-caption-2: 13px;
+    --typo-size-body-1: 17px;
+    --typo-size-body-2: 16px;
+    --typo-size-label-1: 15px;
+    --typo-size-label-2: 14px;
+    --typo-size-caption-1: 13px;
+    --typo-size-caption-2: 12px;
     --typo-lh-display-1: 52px;
     --typo-lh-display-2: 42px;
     --typo-lh-title-1: 36px;
     --typo-lh-title-2: 32px;
-    --typo-lh-compact-heading-1: 24px;
-    --typo-lh-compact-heading-2: 22px;
-    --typo-lh-compact-body-1: 24px;
-    --typo-lh-compact-body-2: 22px;
-    --typo-lh-compact-label-1: 20px;
-    --typo-lh-compact-label-2: 18px;
-    --typo-lh-compact-caption-1: 16px;
-    --typo-lh-compact-caption-2: 16px;
-    --typo-lh-default-heading-1: 28px;
-    --typo-lh-default-heading-2: 26px;
-    --typo-lh-default-body-1: 26px;
-    --typo-lh-default-body-2: 24px;
-    --typo-lh-default-label-1: 24px;
-    --typo-lh-default-label-2: 22px;
-    --typo-lh-default-caption-1: 18px;
-    --typo-lh-default-caption-2: 18px;
-    --typo-lh-airy-heading-1: 32px;
-    --typo-lh-airy-heading-2: 28px;
-    --typo-lh-airy-body-1: 30px;
-    --typo-lh-airy-body-2: 28px;
-    --typo-lh-airy-label-1: 28px;
-    --typo-lh-airy-label-2: 26px;
-    --typo-lh-airy-caption-1: 22px;
-    --typo-lh-airy-caption-2: 20px;
+    --typo-lh-heading-1: 28px;
+    --typo-lh-heading-2: 26px;
+    --typo-lh-body-1: 26px;
+    --typo-lh-body-2: 24px;
+    --typo-lh-label-1: 24px;
+    --typo-lh-label-2: 22px;
+    --typo-lh-caption-1: 18px;
+    --typo-lh-caption-2: 18px;
     --typo-ls-tight: -0.02em;
     --typo-ls-normal: 0;
     --typo-ls-wide: 0.02em;
@@ -749,173 +382,145 @@
     --typo-size-title-2: 20px;
     --typo-size-heading-1: 18px;
     --typo-size-heading-2: 17px;
-    --typo-size-compact-body-1: 16px;
-    --typo-size-compact-body-2: 13px;
-    --typo-size-compact-label-1: 14px;
-    --typo-size-compact-label-2: 12px;
-    --typo-size-compact-caption-1: 11px;
-    --typo-size-compact-caption-2: 11px;
-    --typo-size-default-body-1: 17px;
-    --typo-size-default-body-2: 14px;
-    --typo-size-default-label-1: 16px;
-    --typo-size-default-label-2: 14px;
-    --typo-size-default-caption-1: 13px;
-    --typo-size-default-caption-2: 12px;
-    --typo-size-airy-body-1: 19px;
-    --typo-size-airy-body-2: 16px;
-    --typo-size-airy-label-1: 16px;
-    --typo-size-airy-label-2: 14px;
-    --typo-size-airy-caption-1: 14px;
-    --typo-size-airy-caption-2: 13px;
+    --typo-size-body-1: 17px;
+    --typo-size-body-2: 16px;
+    --typo-size-label-1: 15px;
+    --typo-size-label-2: 14px;
+    --typo-size-caption-1: 13px;
+    --typo-size-caption-2: 12px;
     --typo-lh-display-1: 42px;
     --typo-lh-display-2: 38px;
     --typo-lh-title-1: 34px;
     --typo-lh-title-2: 30px;
-    --typo-lh-compact-heading-1: 24px;
-    --typo-lh-compact-heading-2: 22px;
-    --typo-lh-compact-body-1: 24px;
-    --typo-lh-compact-body-2: 22px;
-    --typo-lh-compact-label-1: 20px;
-    --typo-lh-compact-label-2: 18px;
-    --typo-lh-compact-caption-1: 16px;
-    --typo-lh-compact-caption-2: 16px;
-    --typo-lh-default-heading-1: 28px;
-    --typo-lh-default-heading-2: 26px;
-    --typo-lh-default-body-1: 26px;
-    --typo-lh-default-body-2: 24px;
-    --typo-lh-default-label-1: 24px;
-    --typo-lh-default-label-2: 22px;
-    --typo-lh-default-caption-1: 18px;
-    --typo-lh-default-caption-2: 18px;
-    --typo-lh-airy-heading-1: 32px;
-    --typo-lh-airy-heading-2: 28px;
-    --typo-lh-airy-body-1: 30px;
-    --typo-lh-airy-body-2: 28px;
-    --typo-lh-airy-label-1: 28px;
-    --typo-lh-airy-label-2: 26px;
-    --typo-lh-airy-caption-1: 22px;
-    --typo-lh-airy-caption-2: 20px;
+    --typo-lh-heading-1: 28px;
+    --typo-lh-heading-2: 26px;
+    --typo-lh-body-1: 26px;
+    --typo-lh-body-2: 24px;
+    --typo-lh-label-1: 24px;
+    --typo-lh-label-2: 22px;
+    --typo-lh-caption-1: 18px;
+    --typo-lh-caption-2: 18px;
     --typo-ls-tight: -0.01em;
     --typo-ls-normal: 0;
     --typo-ls-wide: 0.02em;
   }
 }
 :root {
-  --semantic-typo-display-1-b-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-1-b-size: var(--typo-brand-size-display-1);
-  --semantic-typo-display-1-b-lh: var(--typo-brand-line-height-display-1);
-  --semantic-typo-display-1-b-weight: var(--typo-brand-weight-bold);
-  --semantic-typo-display-1-b-ls: var(--typo-brand-letter-spacing-display-1);
-  --semantic-typo-display-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-1-sb-size: var(--typo-brand-size-display-1);
-  --semantic-typo-display-1-sb-lh: var(--typo-brand-line-height-display-1);
-  --semantic-typo-display-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-display-1-sb-ls: var(--typo-brand-letter-spacing-display-1);
-  --semantic-typo-display-2-b-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-2-b-size: var(--typo-brand-size-display-2);
-  --semantic-typo-display-2-b-lh: var(--typo-brand-line-height-display-2);
-  --semantic-typo-display-2-b-weight: var(--typo-brand-weight-bold);
-  --semantic-typo-display-2-b-ls: var(--typo-brand-letter-spacing-display-2);
-  --semantic-typo-display-2-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-display-2-sb-size: var(--typo-brand-size-display-2);
-  --semantic-typo-display-2-sb-lh: var(--typo-brand-line-height-display-2);
-  --semantic-typo-display-2-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-display-2-sb-ls: var(--typo-brand-letter-spacing-display-2);
-  --semantic-typo-title-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-1-sb-size: var(--typo-brand-size-title-1);
-  --semantic-typo-title-1-sb-lh: var(--typo-brand-line-height-title-1);
-  --semantic-typo-title-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-title-1-sb-ls: var(--typo-brand-letter-spacing-title-1);
-  --semantic-typo-title-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-1-m-size: var(--typo-brand-size-title-1);
-  --semantic-typo-title-1-m-lh: var(--typo-brand-line-height-title-1);
-  --semantic-typo-title-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-title-1-m-ls: var(--typo-brand-letter-spacing-title-1);
-  --semantic-typo-title-2-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-2-sb-size: var(--typo-brand-size-title-2);
-  --semantic-typo-title-2-sb-lh: var(--typo-brand-line-height-title-2);
-  --semantic-typo-title-2-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-title-2-sb-ls: var(--typo-brand-letter-spacing-title-2);
-  --semantic-typo-title-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-title-2-m-size: var(--typo-brand-size-title-2);
-  --semantic-typo-title-2-m-lh: var(--typo-brand-line-height-title-2);
-  --semantic-typo-title-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-title-2-m-ls: var(--typo-brand-letter-spacing-title-2);
-  --semantic-typo-heading-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-heading-1-sb-size: var(--typo-brand-size-heading-1);
-  --semantic-typo-heading-1-sb-lh: var(--typo-brand-line-height-heading-1);
-  --semantic-typo-heading-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-heading-1-sb-ls: var(--typo-brand-letter-spacing-heading-1);
-  --semantic-typo-heading-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-heading-1-m-size: var(--typo-brand-size-heading-1);
-  --semantic-typo-heading-1-m-lh: var(--typo-brand-line-height-heading-1);
-  --semantic-typo-heading-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-heading-1-m-ls: var(--typo-brand-letter-spacing-heading-1);
-  --semantic-typo-heading-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-heading-2-m-size: var(--typo-brand-size-heading-2);
-  --semantic-typo-heading-2-m-lh: var(--typo-brand-line-height-heading-2);
-  --semantic-typo-heading-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-heading-2-m-ls: var(--typo-brand-letter-spacing-heading-2);
-  --semantic-typo-body-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-1-sb-size: var(--typo-brand-size-body-1);
-  --semantic-typo-body-1-sb-lh: var(--typo-brand-line-height-body-1);
-  --semantic-typo-body-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-body-1-sb-ls: var(--typo-brand-letter-spacing-body-1);
-  --semantic-typo-body-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-1-m-size: var(--typo-brand-size-body-1);
-  --semantic-typo-body-1-m-lh: var(--typo-brand-line-height-body-1);
-  --semantic-typo-body-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-body-1-m-ls: var(--typo-brand-letter-spacing-body-1);
-  --semantic-typo-body-1-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-1-r-size: var(--typo-brand-size-body-1);
-  --semantic-typo-body-1-r-lh: var(--typo-brand-line-height-body-1);
-  --semantic-typo-body-1-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-body-1-r-ls: var(--typo-brand-letter-spacing-body-1);
-  --semantic-typo-body-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-2-m-size: var(--typo-brand-size-body-2);
-  --semantic-typo-body-2-m-lh: var(--typo-brand-line-height-body-2);
-  --semantic-typo-body-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-body-2-m-ls: var(--typo-brand-letter-spacing-body-2);
-  --semantic-typo-body-2-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-body-2-r-size: var(--typo-brand-size-body-2);
-  --semantic-typo-body-2-r-lh: var(--typo-brand-line-height-body-2);
-  --semantic-typo-body-2-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-body-2-r-ls: var(--typo-brand-letter-spacing-body-2);
-  --semantic-typo-label-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-1-sb-size: var(--typo-brand-size-label-1);
-  --semantic-typo-label-1-sb-lh: var(--typo-brand-line-height-label-1);
-  --semantic-typo-label-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-label-1-sb-ls: var(--typo-brand-letter-spacing-label-1);
-  --semantic-typo-label-1-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-1-m-size: var(--typo-brand-size-label-1);
-  --semantic-typo-label-1-m-lh: var(--typo-brand-line-height-label-1);
-  --semantic-typo-label-1-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-label-1-m-ls: var(--typo-brand-letter-spacing-label-1);
-  --semantic-typo-label-2-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-2-sb-size: var(--typo-brand-size-label-2);
-  --semantic-typo-label-2-sb-lh: var(--typo-brand-line-height-label-2);
-  --semantic-typo-label-2-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-label-2-sb-ls: var(--typo-brand-letter-spacing-label-2);
-  --semantic-typo-label-2-m-font: var(--typo-brand-font-family-font);
-  --semantic-typo-label-2-m-size: var(--typo-brand-size-label-2);
-  --semantic-typo-label-2-m-lh: var(--typo-brand-line-height-label-2);
-  --semantic-typo-label-2-m-weight: var(--typo-brand-weight-medium);
-  --semantic-typo-label-2-m-ls: var(--typo-brand-letter-spacing-label-2);
-  --semantic-typo-caption-1-sb-font: var(--typo-brand-font-family-font);
-  --semantic-typo-caption-1-sb-size: var(--typo-brand-size-caption-1);
-  --semantic-typo-caption-1-sb-lh: var(--typo-brand-line-height-caption-1);
-  --semantic-typo-caption-1-sb-weight: var(--typo-brand-weight-semibold);
-  --semantic-typo-caption-1-sb-ls: var(--typo-brand-letter-spacing-caption-1);
-  --semantic-typo-caption-1-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-caption-1-r-size: var(--typo-brand-size-caption-1);
-  --semantic-typo-caption-1-r-lh: var(--typo-brand-line-height-caption-1);
-  --semantic-typo-caption-1-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-caption-1-r-ls: var(--typo-brand-letter-spacing-caption-1);
-  --semantic-typo-caption-2-r-font: var(--typo-brand-font-family-font);
-  --semantic-typo-caption-2-r-size: var(--typo-brand-size-caption-2);
-  --semantic-typo-caption-2-r-lh: var(--typo-brand-line-height-caption-2);
-  --semantic-typo-caption-2-r-weight: var(--typo-brand-weight-regular);
-  --semantic-typo-caption-2-r-ls: var(--typo-brand-letter-spacing-caption-2);
+  --semantic-typo-display-1-b-font: var(--typo-font-family-brand);
+  --semantic-typo-display-1-b-size: var(--typo-size-display-1);
+  --semantic-typo-display-1-b-lh: var(--typo-lh-display-1);
+  --semantic-typo-display-1-b-weight: var(--typo-weight-bold);
+  --semantic-typo-display-1-b-ls: var(--typo-ls-tight);
+  --semantic-typo-display-1-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-display-1-sb-size: var(--typo-size-display-1);
+  --semantic-typo-display-1-sb-lh: var(--typo-lh-display-1);
+  --semantic-typo-display-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-display-1-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-display-2-b-font: var(--typo-font-family-brand);
+  --semantic-typo-display-2-b-size: var(--typo-size-display-2);
+  --semantic-typo-display-2-b-lh: var(--typo-lh-display-2);
+  --semantic-typo-display-2-b-weight: var(--typo-weight-bold);
+  --semantic-typo-display-2-b-ls: var(--typo-ls-tight);
+  --semantic-typo-display-2-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-display-2-sb-size: var(--typo-size-display-2);
+  --semantic-typo-display-2-sb-lh: var(--typo-lh-display-2);
+  --semantic-typo-display-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-display-2-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-title-1-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-title-1-sb-size: var(--typo-size-title-1);
+  --semantic-typo-title-1-sb-lh: var(--typo-lh-title-1);
+  --semantic-typo-title-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-title-1-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-title-1-m-font: var(--typo-font-family-brand);
+  --semantic-typo-title-1-m-size: var(--typo-size-title-1);
+  --semantic-typo-title-1-m-lh: var(--typo-lh-title-1);
+  --semantic-typo-title-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-title-1-m-ls: var(--typo-ls-tight);
+  --semantic-typo-title-2-sb-font: var(--typo-font-family-brand);
+  --semantic-typo-title-2-sb-size: var(--typo-size-title-2);
+  --semantic-typo-title-2-sb-lh: var(--typo-lh-title-2);
+  --semantic-typo-title-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-title-2-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-title-2-m-font: var(--typo-font-family-brand);
+  --semantic-typo-title-2-m-size: var(--typo-size-title-2);
+  --semantic-typo-title-2-m-lh: var(--typo-lh-title-2);
+  --semantic-typo-title-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-title-2-m-ls: var(--typo-ls-tight);
+  --semantic-typo-heading-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-heading-1-sb-size: var(--typo-size-heading-1);
+  --semantic-typo-heading-1-sb-lh: var(--typo-lh-heading-1);
+  --semantic-typo-heading-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-heading-1-sb-ls: var(--typo-ls-tight);
+  --semantic-typo-heading-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-heading-1-m-size: var(--typo-size-heading-1);
+  --semantic-typo-heading-1-m-lh: var(--typo-lh-heading-1);
+  --semantic-typo-heading-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-heading-1-m-ls: var(--typo-ls-tight);
+  --semantic-typo-heading-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-heading-2-m-size: var(--typo-size-heading-2);
+  --semantic-typo-heading-2-m-lh: var(--typo-lh-heading-2);
+  --semantic-typo-heading-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-heading-2-m-ls: var(--typo-ls-tight);
+  --semantic-typo-body-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-body-1-sb-size: var(--typo-size-body-1);
+  --semantic-typo-body-1-sb-lh: var(--typo-lh-body-1);
+  --semantic-typo-body-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-body-1-sb-ls: var(--typo-ls-normal);
+  --semantic-typo-body-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-body-1-m-size: var(--typo-size-body-1);
+  --semantic-typo-body-1-m-lh: var(--typo-lh-body-1);
+  --semantic-typo-body-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-body-1-m-ls: var(--typo-ls-normal);
+  --semantic-typo-body-1-r-font: var(--typo-font-family-default);
+  --semantic-typo-body-1-r-size: var(--typo-size-body-1);
+  --semantic-typo-body-1-r-lh: var(--typo-lh-body-1);
+  --semantic-typo-body-1-r-weight: var(--typo-weight-regular);
+  --semantic-typo-body-1-r-ls: var(--typo-ls-normal);
+  --semantic-typo-body-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-body-2-m-size: var(--typo-size-body-2);
+  --semantic-typo-body-2-m-lh: var(--typo-lh-body-2);
+  --semantic-typo-body-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-body-2-m-ls: var(--typo-ls-normal);
+  --semantic-typo-body-2-r-font: var(--typo-font-family-default);
+  --semantic-typo-body-2-r-size: var(--typo-size-body-2);
+  --semantic-typo-body-2-r-lh: var(--typo-lh-body-2);
+  --semantic-typo-body-2-r-weight: var(--typo-weight-regular);
+  --semantic-typo-body-2-r-ls: var(--typo-ls-normal);
+  --semantic-typo-label-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-label-1-sb-size: var(--typo-size-label-1);
+  --semantic-typo-label-1-sb-lh: var(--typo-lh-label-1);
+  --semantic-typo-label-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-label-1-sb-ls: var(--typo-ls-normal);
+  --semantic-typo-label-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-label-1-m-size: var(--typo-size-label-1);
+  --semantic-typo-label-1-m-lh: var(--typo-lh-label-1);
+  --semantic-typo-label-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-label-1-m-ls: var(--typo-ls-normal);
+  --semantic-typo-label-2-sb-font: var(--typo-font-family-default);
+  --semantic-typo-label-2-sb-size: var(--typo-size-label-2);
+  --semantic-typo-label-2-sb-lh: var(--typo-lh-label-2);
+  --semantic-typo-label-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-label-2-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-label-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-label-2-m-size: var(--typo-size-label-2);
+  --semantic-typo-label-2-m-lh: var(--typo-lh-label-2);
+  --semantic-typo-label-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-label-2-m-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-1-sb-font: var(--typo-font-family-default);
+  --semantic-typo-caption-1-sb-size: var(--typo-size-caption-1);
+  --semantic-typo-caption-1-sb-lh: var(--typo-lh-caption-1);
+  --semantic-typo-caption-1-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-caption-1-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-1-r-font: var(--typo-font-family-default);
+  --semantic-typo-caption-1-r-size: var(--typo-size-caption-1);
+  --semantic-typo-caption-1-r-lh: var(--typo-lh-caption-1);
+  --semantic-typo-caption-1-r-weight: var(--typo-weight-regular);
+  --semantic-typo-caption-1-r-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-2-r-font: var(--typo-font-family-default);
+  --semantic-typo-caption-2-r-size: var(--typo-size-caption-2);
+  --semantic-typo-caption-2-r-lh: var(--typo-lh-caption-2);
+  --semantic-typo-caption-2-r-weight: var(--typo-weight-regular);
+  --semantic-typo-caption-2-r-ls: var(--typo-ls-wide);
 }
 .typo-display-1-b {
   font-family: var(--semantic-typo-display-1-b-font);
@@ -1078,17 +683,17 @@
   font-weight: var(--semantic-typo-caption-2-r-weight);
   letter-spacing: var(--semantic-typo-caption-2-r-ls);
 }
-.semantic-text-strong {
-  --ds-color: var(--semantic-text-strong);
+.semantic-text-primary {
+  --ds-color: var(--semantic-text-primary);
 }
-.semantic-text-subtle {
-  --ds-color: var(--semantic-text-subtle);
+.semantic-text-secondary {
+  --ds-color: var(--semantic-text-secondary);
 }
-.semantic-text-muted {
-  --ds-color: var(--semantic-text-muted);
+.semantic-text-tertiary {
+  --ds-color: var(--semantic-text-tertiary);
 }
-.semantic-text-brand {
-  --ds-color: var(--semantic-text-brand);
+.semantic-text-brand-primary {
+  --ds-color: var(--semantic-text-brand-primary);
 }
 .semantic-text-brand-secondary {
   --ds-color: var(--semantic-text-brand-secondary);
@@ -1114,23 +719,23 @@
 .semantic-text-link {
   --ds-color: var(--semantic-text-link);
 }
-.semantic-text-sunday {
-  --ds-color: var(--semantic-text-sunday);
+.semantic-text-accent-red {
+  --ds-color: var(--semantic-text-accent-red);
 }
-.semantic-text-saturday {
-  --ds-color: var(--semantic-text-saturday);
+.semantic-text-accent-blue {
+  --ds-color: var(--semantic-text-accent-blue);
 }
-.semantic-surface-neutral-default {
-  --ds-color: var(--semantic-surface-neutral-default);
+.semantic-surface-neutral-primary {
+  --ds-color: var(--semantic-surface-neutral-primary);
 }
-.semantic-surface-neutral-subtle {
-  --ds-color: var(--semantic-surface-neutral-subtle);
+.semantic-surface-neutral-secondary {
+  --ds-color: var(--semantic-surface-neutral-secondary);
 }
-.semantic-surface-neutral-strong {
-  --ds-color: var(--semantic-surface-neutral-strong);
+.semantic-surface-neutral-tertiary {
+  --ds-color: var(--semantic-surface-neutral-tertiary);
 }
-.semantic-surface-neutral-overlay {
-  --ds-color: var(--semantic-surface-neutral-overlay);
+.semantic-surface-neutral-inverse {
+  --ds-color: var(--semantic-surface-neutral-inverse);
 }
 .semantic-surface-neutral-disabled {
   --ds-color: var(--semantic-surface-neutral-disabled);
@@ -1189,20 +794,20 @@
 .semantic-surface-info-strong {
   --ds-color: var(--semantic-surface-info-strong);
 }
-.semantic-border-default {
-  --ds-color: var(--semantic-border-default);
+.semantic-border-primary {
+  --ds-color: var(--semantic-border-primary);
 }
-.semantic-border-subtle {
-  --ds-color: var(--semantic-border-subtle);
+.semantic-border-secondary {
+  --ds-color: var(--semantic-border-secondary);
 }
-.semantic-border-strong {
-  --ds-color: var(--semantic-border-strong);
+.semantic-border-tertiary {
+  --ds-color: var(--semantic-border-tertiary);
 }
 .semantic-border-disabled {
   --ds-color: var(--semantic-border-disabled);
 }
-.semantic-border-brand {
-  --ds-color: var(--semantic-border-brand);
+.semantic-border-brand-primary {
+  --ds-color: var(--semantic-border-brand-primary);
 }
 .semantic-border-brand-secondary {
   --ds-color: var(--semantic-border-brand-secondary);
@@ -1219,11 +824,11 @@
 .semantic-border-info {
   --ds-color: var(--semantic-border-info);
 }
-.semantic-icon-strong {
-  --ds-color: var(--semantic-icon-strong);
+.semantic-icon-primary {
+  --ds-color: var(--semantic-icon-primary);
 }
-.semantic-icon-subtle {
-  --ds-color: var(--semantic-icon-subtle);
+.semantic-icon-secondary {
+  --ds-color: var(--semantic-icon-secondary);
 }
 .semantic-icon-inverse {
   --ds-color: var(--semantic-icon-inverse);
@@ -1249,23 +854,8 @@
 .semantic-icon-disabled {
   --ds-color: var(--semantic-icon-disabled);
 }
-.semantic-emphasis-brand {
-  --ds-color: var(--semantic-emphasis-brand);
-}
-.semantic-emphasis-brand-secondary {
-  --ds-color: var(--semantic-emphasis-brand-secondary);
-}
-.semantic-emphasis-success {
-  --ds-color: var(--semantic-emphasis-success);
-}
-.semantic-emphasis-error {
-  --ds-color: var(--semantic-emphasis-error);
-}
-.semantic-emphasis-warning {
-  --ds-color: var(--semantic-emphasis-warning);
-}
-.semantic-emphasis-info {
-  --ds-color: var(--semantic-emphasis-info);
+.semantic-interaction-overlay-5 {
+  --ds-color: var(--semantic-interaction-overlay-5);
 }
 .semantic-interaction-overlay-10 {
   --ds-color: var(--semantic-interaction-overlay-10);
@@ -1273,6 +863,12 @@
 .semantic-interaction-overlay-25 {
   --ds-color: var(--semantic-interaction-overlay-25);
 }
+.semantic-interaction-overlay-50 {
+  --ds-color: var(--semantic-interaction-overlay-50);
+}
+.semantic-interaction-overlay-75 {
+  --ds-color: var(--semantic-interaction-overlay-75);
+}
 .semantic-interaction-focus-ring {
   --ds-color: var(--semantic-interaction-focus-ring);
 }
@@ -1369,11 +965,23 @@
 .brand-base-white {
   --ds-color: var(--brand-base-white);
 }
-.brand-base-black-alpha-10 {
-  --ds-color: var(--brand-base-black-alpha-10);
+.brand-base-overlay-5 {
+  --ds-color: var(--brand-base-overlay-5);
+}
+.brand-base-overlay-10 {
+  --ds-color: var(--brand-base-overlay-10);
+}
+.brand-base-overlay-25 {
+  --ds-color: var(--brand-base-overlay-25);
+}
+.brand-base-overlay-50 {
+  --ds-color: var(--brand-base-overlay-50);
+}
+.brand-base-overlay-75 {
+  --ds-color: var(--brand-base-overlay-75);
 }
-.brand-base-black-alpha-25 {
-  --ds-color: var(--brand-base-black-alpha-25);
+.brand-base-overlay-85 {
+  --ds-color: var(--brand-base-overlay-85);
 }
 .brand-categorical-1-100 {
   --ds-color: var(--brand-categorical-1-100);
@@ -1724,8 +1332,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  border-bottom: 1px solid var(--xplat-neutral-200);
-  background-color: var(--xplat-white);
+  border-bottom: 1px solid var(--semantic-border-primary);
+  background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
   box-sizing: border-box;
   gap: 12px;
@@ -1746,7 +1354,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-layout > .lib-xplat-layout-content-wrapper {
   display: flex;