@x-plat/design-system 0.4.5 → 0.5.0

package/dist/index.css

@@ -2,388 +2,1093 @@
 
 /* src/styles/style.css */
 :root {
-  --xplat-red-50: #FFF0F0;
-  --xplat-red-100: #FFDDDE;
-  --xplat-red-200: #FFC1C2;
-  --xplat-red-300: #FF9698;
-  --xplat-red-400: #FF5A5D;
-  --xplat-red-500: #FF272B;
-  --xplat-red-600: #F80409;
-  --xplat-red-700: #D40105;
-  --xplat-red-800: #AE0609;
-  --xplat-red-900: #900C0F;
-  --xplat-green-50: #E5F6EA;
-  --xplat-green-100: #C1E7CC;
-  --xplat-green-200: #98D8AC;
-  --xplat-green-300: #6CCA8B;
-  --xplat-green-400: #47BE72;
-  --xplat-green-500: #10B259;
-  --xplat-green-600: #00A34F;
-  --xplat-green-700: #009143;
-  --xplat-green-800: #007F38;
-  --xplat-green-900: #006024;
-  --xplat-orange-50: #FFF8EC;
-  --xplat-orange-100: #FFF0D3;
-  --xplat-orange-200: #FFDDA5;
-  --xplat-orange-300: #FFC46D;
-  --xplat-orange-400: #FF9F32;
-  --xplat-orange-500: #FF820A;
-  --xplat-orange-600: #FF6900;
-  --xplat-orange-700: #CC4B02;
-  --xplat-orange-800: #A13A0B;
-  --xplat-orange-900: #82320C;
-  --xplat-yellow-50: #FFFDE7;
-  --xplat-yellow-100: #FFFAC1;
-  --xplat-yellow-200: #FFF186;
-  --xplat-yellow-300: #FFE041;
-  --xplat-yellow-400: #FFCC0D;
-  --xplat-yellow-500: #F0B100;
-  --xplat-yellow-600: #D18800;
-  --xplat-yellow-700: #A66002;
-  --xplat-yellow-800: #894B0A;
-  --xplat-yellow-900: #743D0F;
-  --xplat-blue-50: #F1F4FD;
-  --xplat-blue-100: #DFE7FA;
-  --xplat-blue-200: #C5D4F8;
-  --xplat-blue-300: #9EB8F2;
-  --xplat-blue-400: #7093EA;
-  --xplat-blue-500: #4D6DE3;
-  --xplat-blue-600: #3950D7;
-  --xplat-blue-700: #303EC5;
-  --xplat-blue-800: #2D35A0;
-  --xplat-blue-900: #29317F;
-  --xplat-lightblue-50: #EEFAFF;
-  --xplat-lightblue-100: #D9F4FF;
-  --xplat-lightblue-200: #BBEDFF;
-  --xplat-lightblue-300: #8DE3FF;
-  --xplat-lightblue-400: #57D0FF;
-  --xplat-lightblue-500: #30B6FF;
-  --xplat-lightblue-600: #1999F7;
-  --xplat-lightblue-700: #1280E3;
-  --xplat-lightblue-800: #1566B8;
-  --xplat-lightblue-900: #175791;
-  --xplat-purple-50: #FBF6FE;
-  --xplat-purple-100: #F5EAFD;
-  --xplat-purple-200: #EDD8FC;
-  --xplat-purple-300: #E0BAF8;
-  --xplat-purple-400: #CD8DF3;
-  --xplat-purple-500: #B961EB;
-  --xplat-purple-600: #A541DC;
-  --xplat-purple-700: #9230C5;
-  --xplat-purple-800: #782B9E;
-  --xplat-purple-900: #62247F;
-  --xplat-pink-50: #FFF4FE;
-  --xplat-pink-100: #FFE7FD;
-  --xplat-pink-200: #FFCFFA;
-  --xplat-pink-300: #FEA9F1;
-  --xplat-pink-400: #FD75E7;
-  --xplat-pink-500: #F553DA;
-  --xplat-pink-600: #D821B6;
-  --xplat-pink-700: #B31892;
-  --xplat-pink-800: #921676;
-  --xplat-pink-900: #781761;
-  --xplat-neutral-50: #FAFAFA;
-  --xplat-neutral-100: #F5F5F5;
-  --xplat-neutral-200: #E5E5E5;
-  --xplat-neutral-300: #D4D4D4;
-  --xplat-neutral-400: #A1A1A1;
-  --xplat-neutral-500: #737373;
-  --xplat-neutral-600: #525252;
-  --xplat-neutral-700: #404040;
-  --xplat-neutral-800: #262626;
-  --xplat-neutral-900: #171717;
-  --xplat-black: #000000;
-  --xplat-white: #FFFFFF;
-  --test-default: #ffffff;
-}
-.xplat-red-50 {
-  --ds-color: var(--xplat-red-50);
-}
-.xplat-red-100 {
-  --ds-color: var(--xplat-red-100);
-}
-.xplat-red-200 {
-  --ds-color: var(--xplat-red-200);
-}
-.xplat-red-300 {
-  --ds-color: var(--xplat-red-300);
-}
-.xplat-red-400 {
-  --ds-color: var(--xplat-red-400);
-}
-.xplat-red-500 {
-  --ds-color: var(--xplat-red-500);
-}
-.xplat-red-600 {
-  --ds-color: var(--xplat-red-600);
-}
-.xplat-red-700 {
-  --ds-color: var(--xplat-red-700);
-}
-.xplat-red-800 {
-  --ds-color: var(--xplat-red-800);
-}
-.xplat-red-900 {
-  --ds-color: var(--xplat-red-900);
-}
-.xplat-green-50 {
-  --ds-color: var(--xplat-green-50);
-}
-.xplat-green-100 {
-  --ds-color: var(--xplat-green-100);
-}
-.xplat-green-200 {
-  --ds-color: var(--xplat-green-200);
-}
-.xplat-green-300 {
-  --ds-color: var(--xplat-green-300);
-}
-.xplat-green-400 {
-  --ds-color: var(--xplat-green-400);
-}
-.xplat-green-500 {
-  --ds-color: var(--xplat-green-500);
+  --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;
 }
-.xplat-green-600 {
-  --ds-color: var(--xplat-green-600);
+: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);
+}
+: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);
+}
+: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-purple-400);
+  --system-link-500: var(--primitive-purple-500);
+  --system-link-600: var(--primitive-purple-600);
+  --system-link-700: var(--primitive-purple-700);
+}
+: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-disabled: var(--brand-neutral-400);
+  --semantic-text-inverse: var(--brand-base-white);
+  --semantic-text-success: var(--system-success-700);
+  --semantic-text-error: var(--system-error-700);
+  --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-surface-neutral-disabled: var(--brand-neutral-200);
+  --semantic-surface-brand-subtle: var(--brand-primary-50);
+  --semantic-surface-brand-default: var(--brand-primary-600);
+  --semantic-surface-brand-strong: var(--brand-primary-700);
+  --semantic-surface-success-subtle: var(--system-success-50);
+  --semantic-surface-success-default: var(--system-success-400);
+  --semantic-surface-success-strong: var(--system-success-700);
+  --semantic-surface-error-subtle: var(--system-error-50);
+  --semantic-surface-error-default: var(--system-error-600);
+  --semantic-surface-error-strong: var(--system-error-700);
+  --semantic-surface-warning-subtle: var(--system-warning-50);
+  --semantic-surface-warning-default: var(--system-warning-600);
+  --semantic-surface-warning-strong: var(--system-warning-700);
+  --semantic-surface-info-subtle: var(--system-info-50);
+  --semantic-surface-info-default: var(--system-info-400);
+  --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-disabled: var(--brand-neutral-300);
+  --semantic-border-brand: var(--brand-primary-600);
+  --semantic-border-success: var(--system-success-300);
+  --semantic-border-error: var(--system-error-300);
+  --semantic-border-warning: var(--system-warning-500);
+  --semantic-border-info: var(--system-info-300);
+  --semantic-icon-strong: var(--brand-neutral-700);
+  --semantic-icon-subtle: var(--brand-neutral-500);
+  --semantic-icon-inverse: var(--brand-base-white);
+  --semantic-icon-brand: var(--brand-primary-600);
+  --semantic-icon-success: var(--system-success-400);
+  --semantic-icon-error: var(--system-error-600);
+  --semantic-icon-warning: var(--system-warning-600);
+  --semantic-icon-info: var(--system-info-400);
+  --semantic-icon-disabled: var(--brand-neutral-300);
+  --semantic-emphasis-brand: var(--brand-primary-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-focus-ring: var(--brand-primary-700);
+}
+:root {
+  --semantic-categorical-1-bg: var(--brand-categorical-1-100);
+  --semantic-categorical-1-area: var(--brand-categorical-1-200);
+  --semantic-categorical-1-fill: var(--brand-categorical-1-400);
+  --semantic-categorical-1-text: var(--brand-categorical-1-600);
+  --semantic-categorical-2-bg: var(--brand-categorical-2-100);
+  --semantic-categorical-2-area: var(--brand-categorical-2-200);
+  --semantic-categorical-2-fill: var(--brand-categorical-2-400);
+  --semantic-categorical-2-text: var(--brand-categorical-2-600);
+  --semantic-categorical-3-bg: var(--brand-categorical-3-100);
+  --semantic-categorical-3-area: var(--brand-categorical-3-200);
+  --semantic-categorical-3-fill: var(--brand-categorical-3-400);
+  --semantic-categorical-3-text: var(--brand-categorical-3-600);
+  --semantic-categorical-4-bg: var(--brand-categorical-4-100);
+  --semantic-categorical-4-area: var(--brand-categorical-4-200);
+  --semantic-categorical-4-fill: var(--brand-categorical-4-400);
+  --semantic-categorical-4-text: var(--brand-categorical-4-600);
+  --semantic-categorical-5-bg: var(--brand-categorical-5-100);
+  --semantic-categorical-5-area: var(--brand-categorical-5-200);
+  --semantic-categorical-5-fill: var(--brand-categorical-5-400);
+  --semantic-categorical-5-text: var(--brand-categorical-5-600);
+  --semantic-categorical-6-bg: var(--brand-categorical-6-100);
+  --semantic-categorical-6-area: var(--brand-categorical-6-200);
+  --semantic-categorical-6-fill: var(--brand-categorical-6-400);
+  --semantic-categorical-6-text: var(--brand-categorical-6-600);
+  --semantic-categorical-7-bg: var(--brand-categorical-7-100);
+  --semantic-categorical-7-area: var(--brand-categorical-7-200);
+  --semantic-categorical-7-fill: var(--brand-categorical-7-400);
+  --semantic-categorical-7-text: var(--brand-categorical-7-600);
+  --semantic-categorical-8-bg: var(--brand-categorical-8-100);
+  --semantic-categorical-8-area: var(--brand-categorical-8-200);
+  --semantic-categorical-8-fill: var(--brand-categorical-8-400);
+  --semantic-categorical-8-text: var(--brand-categorical-8-600);
+}
+.semantic-text-strong {
+  --ds-color: var(--semantic-text-strong);
+}
+.semantic-text-subtle {
+  --ds-color: var(--semantic-text-subtle);
+}
+.semantic-text-muted {
+  --ds-color: var(--semantic-text-muted);
+}
+.semantic-text-brand {
+  --ds-color: var(--semantic-text-brand);
+}
+.semantic-text-disabled {
+  --ds-color: var(--semantic-text-disabled);
+}
+.semantic-text-inverse {
+  --ds-color: var(--semantic-text-inverse);
+}
+.semantic-text-success {
+  --ds-color: var(--semantic-text-success);
+}
+.semantic-text-error {
+  --ds-color: var(--semantic-text-error);
+}
+.semantic-text-warning {
+  --ds-color: var(--semantic-text-warning);
+}
+.semantic-text-info {
+  --ds-color: var(--semantic-text-info);
+}
+.semantic-text-link {
+  --ds-color: var(--semantic-text-link);
+}
+.semantic-text-sunday {
+  --ds-color: var(--semantic-text-sunday);
+}
+.semantic-text-saturday {
+  --ds-color: var(--semantic-text-saturday);
+}
+.semantic-surface-neutral-default {
+  --ds-color: var(--semantic-surface-neutral-default);
+}
+.semantic-surface-neutral-subtle {
+  --ds-color: var(--semantic-surface-neutral-subtle);
+}
+.semantic-surface-neutral-strong {
+  --ds-color: var(--semantic-surface-neutral-strong);
+}
+.semantic-surface-neutral-overlay {
+  --ds-color: var(--semantic-surface-neutral-overlay);
+}
+.semantic-surface-neutral-disabled {
+  --ds-color: var(--semantic-surface-neutral-disabled);
+}
+.semantic-surface-brand-subtle {
+  --ds-color: var(--semantic-surface-brand-subtle);
+}
+.semantic-surface-brand-default {
+  --ds-color: var(--semantic-surface-brand-default);
+}
+.semantic-surface-brand-strong {
+  --ds-color: var(--semantic-surface-brand-strong);
+}
+.semantic-surface-success-subtle {
+  --ds-color: var(--semantic-surface-success-subtle);
+}
+.semantic-surface-success-default {
+  --ds-color: var(--semantic-surface-success-default);
+}
+.semantic-surface-success-strong {
+  --ds-color: var(--semantic-surface-success-strong);
+}
+.semantic-surface-error-subtle {
+  --ds-color: var(--semantic-surface-error-subtle);
+}
+.semantic-surface-error-default {
+  --ds-color: var(--semantic-surface-error-default);
+}
+.semantic-surface-error-strong {
+  --ds-color: var(--semantic-surface-error-strong);
+}
+.semantic-surface-warning-subtle {
+  --ds-color: var(--semantic-surface-warning-subtle);
+}
+.semantic-surface-warning-default {
+  --ds-color: var(--semantic-surface-warning-default);
+}
+.semantic-surface-warning-strong {
+  --ds-color: var(--semantic-surface-warning-strong);
+}
+.semantic-surface-info-subtle {
+  --ds-color: var(--semantic-surface-info-subtle);
+}
+.semantic-surface-info-default {
+  --ds-color: var(--semantic-surface-info-default);
+}
+.semantic-surface-info-strong {
+  --ds-color: var(--semantic-surface-info-strong);
+}
+.semantic-border-default {
+  --ds-color: var(--semantic-border-default);
+}
+.semantic-border-subtle {
+  --ds-color: var(--semantic-border-subtle);
+}
+.semantic-border-strong {
+  --ds-color: var(--semantic-border-strong);
+}
+.semantic-border-disabled {
+  --ds-color: var(--semantic-border-disabled);
+}
+.semantic-border-brand {
+  --ds-color: var(--semantic-border-brand);
+}
+.semantic-border-success {
+  --ds-color: var(--semantic-border-success);
+}
+.semantic-border-error {
+  --ds-color: var(--semantic-border-error);
+}
+.semantic-border-warning {
+  --ds-color: var(--semantic-border-warning);
+}
+.semantic-border-info {
+  --ds-color: var(--semantic-border-info);
+}
+.semantic-icon-strong {
+  --ds-color: var(--semantic-icon-strong);
+}
+.semantic-icon-subtle {
+  --ds-color: var(--semantic-icon-subtle);
+}
+.semantic-icon-inverse {
+  --ds-color: var(--semantic-icon-inverse);
+}
+.semantic-icon-brand {
+  --ds-color: var(--semantic-icon-brand);
+}
+.semantic-icon-success {
+  --ds-color: var(--semantic-icon-success);
+}
+.semantic-icon-error {
+  --ds-color: var(--semantic-icon-error);
+}
+.semantic-icon-warning {
+  --ds-color: var(--semantic-icon-warning);
+}
+.semantic-icon-info {
+  --ds-color: var(--semantic-icon-info);
+}
+.semantic-icon-disabled {
+  --ds-color: var(--semantic-icon-disabled);
 }
-.xplat-green-700 {
-  --ds-color: var(--xplat-green-700);
+.semantic-emphasis-brand {
+  --ds-color: var(--semantic-emphasis-brand);
 }
-.xplat-green-800 {
-  --ds-color: var(--xplat-green-800);
+.semantic-emphasis-success {
+  --ds-color: var(--semantic-emphasis-success);
 }
-.xplat-green-900 {
-  --ds-color: var(--xplat-green-900);
+.semantic-emphasis-error {
+  --ds-color: var(--semantic-emphasis-error);
 }
-.xplat-orange-50 {
-  --ds-color: var(--xplat-orange-50);
+.semantic-emphasis-warning {
+  --ds-color: var(--semantic-emphasis-warning);
 }
-.xplat-orange-100 {
-  --ds-color: var(--xplat-orange-100);
+.semantic-emphasis-info {
+  --ds-color: var(--semantic-emphasis-info);
 }
-.xplat-orange-200 {
-  --ds-color: var(--xplat-orange-200);
+.semantic-interaction-overlay-10 {
+  --ds-color: var(--semantic-interaction-overlay-10);
 }
-.xplat-orange-300 {
-  --ds-color: var(--xplat-orange-300);
+.semantic-interaction-overlay-25 {
+  --ds-color: var(--semantic-interaction-overlay-25);
 }
-.xplat-orange-400 {
-  --ds-color: var(--xplat-orange-400);
+.semantic-interaction-focus-ring {
+  --ds-color: var(--semantic-interaction-focus-ring);
 }
-.xplat-orange-500 {
-  --ds-color: var(--xplat-orange-500);
+.brand-primary-50 {
+  --ds-color: var(--brand-primary-50);
 }
-.xplat-orange-600 {
-  --ds-color: var(--xplat-orange-600);
+.brand-primary-100 {
+  --ds-color: var(--brand-primary-100);
 }
-.xplat-orange-700 {
-  --ds-color: var(--xplat-orange-700);
+.brand-primary-200 {
+  --ds-color: var(--brand-primary-200);
 }
-.xplat-orange-800 {
-  --ds-color: var(--xplat-orange-800);
+.brand-primary-300 {
+  --ds-color: var(--brand-primary-300);
 }
-.xplat-orange-900 {
-  --ds-color: var(--xplat-orange-900);
+.brand-primary-400 {
+  --ds-color: var(--brand-primary-400);
 }
-.xplat-yellow-50 {
-  --ds-color: var(--xplat-yellow-50);
+.brand-primary-500 {
+  --ds-color: var(--brand-primary-500);
 }
-.xplat-yellow-100 {
-  --ds-color: var(--xplat-yellow-100);
+.brand-primary-600 {
+  --ds-color: var(--brand-primary-600);
 }
-.xplat-yellow-200 {
-  --ds-color: var(--xplat-yellow-200);
+.brand-primary-700 {
+  --ds-color: var(--brand-primary-700);
 }
-.xplat-yellow-300 {
-  --ds-color: var(--xplat-yellow-300);
+.brand-primary-800 {
+  --ds-color: var(--brand-primary-800);
 }
-.xplat-yellow-400 {
-  --ds-color: var(--xplat-yellow-400);
+.brand-primary-900 {
+  --ds-color: var(--brand-primary-900);
 }
-.xplat-yellow-500 {
-  --ds-color: var(--xplat-yellow-500);
+.brand-secondary-50 {
+  --ds-color: var(--brand-secondary-50);
 }
-.xplat-yellow-600 {
-  --ds-color: var(--xplat-yellow-600);
+.brand-secondary-100 {
+  --ds-color: var(--brand-secondary-100);
 }
-.xplat-yellow-700 {
-  --ds-color: var(--xplat-yellow-700);
+.brand-secondary-200 {
+  --ds-color: var(--brand-secondary-200);
 }
-.xplat-yellow-800 {
-  --ds-color: var(--xplat-yellow-800);
+.brand-secondary-300 {
+  --ds-color: var(--brand-secondary-300);
 }
-.xplat-yellow-900 {
-  --ds-color: var(--xplat-yellow-900);
+.brand-secondary-400 {
+  --ds-color: var(--brand-secondary-400);
 }
-.xplat-blue-50 {
-  --ds-color: var(--xplat-blue-50);
+.brand-secondary-500 {
+  --ds-color: var(--brand-secondary-500);
 }
-.xplat-blue-100 {
-  --ds-color: var(--xplat-blue-100);
+.brand-secondary-600 {
+  --ds-color: var(--brand-secondary-600);
 }
-.xplat-blue-200 {
-  --ds-color: var(--xplat-blue-200);
+.brand-secondary-700 {
+  --ds-color: var(--brand-secondary-700);
 }
-.xplat-blue-300 {
-  --ds-color: var(--xplat-blue-300);
+.brand-secondary-800 {
+  --ds-color: var(--brand-secondary-800);
 }
-.xplat-blue-400 {
-  --ds-color: var(--xplat-blue-400);
+.brand-secondary-900 {
+  --ds-color: var(--brand-secondary-900);
 }
-.xplat-blue-500 {
-  --ds-color: var(--xplat-blue-500);
+.brand-neutral-50 {
+  --ds-color: var(--brand-neutral-50);
 }
-.xplat-blue-600 {
-  --ds-color: var(--xplat-blue-600);
+.brand-neutral-100 {
+  --ds-color: var(--brand-neutral-100);
 }
-.xplat-blue-700 {
-  --ds-color: var(--xplat-blue-700);
+.brand-neutral-200 {
+  --ds-color: var(--brand-neutral-200);
 }
-.xplat-blue-800 {
-  --ds-color: var(--xplat-blue-800);
+.brand-neutral-300 {
+  --ds-color: var(--brand-neutral-300);
 }
-.xplat-blue-900 {
-  --ds-color: var(--xplat-blue-900);
+.brand-neutral-400 {
+  --ds-color: var(--brand-neutral-400);
 }
-.xplat-lightblue-50 {
-  --ds-color: var(--xplat-lightblue-50);
+.brand-neutral-500 {
+  --ds-color: var(--brand-neutral-500);
 }
-.xplat-lightblue-100 {
-  --ds-color: var(--xplat-lightblue-100);
+.brand-neutral-600 {
+  --ds-color: var(--brand-neutral-600);
 }
-.xplat-lightblue-200 {
-  --ds-color: var(--xplat-lightblue-200);
+.brand-neutral-700 {
+  --ds-color: var(--brand-neutral-700);
 }
-.xplat-lightblue-300 {
-  --ds-color: var(--xplat-lightblue-300);
+.brand-neutral-800 {
+  --ds-color: var(--brand-neutral-800);
 }
-.xplat-lightblue-400 {
-  --ds-color: var(--xplat-lightblue-400);
+.brand-neutral-900 {
+  --ds-color: var(--brand-neutral-900);
 }
-.xplat-lightblue-500 {
-  --ds-color: var(--xplat-lightblue-500);
+.brand-base-white {
+  --ds-color: var(--brand-base-white);
 }
-.xplat-lightblue-600 {
-  --ds-color: var(--xplat-lightblue-600);
+.brand-base-black-alpha-10 {
+  --ds-color: var(--brand-base-black-alpha-10);
 }
-.xplat-lightblue-700 {
-  --ds-color: var(--xplat-lightblue-700);
+.brand-base-black-alpha-25 {
+  --ds-color: var(--brand-base-black-alpha-25);
 }
-.xplat-lightblue-800 {
-  --ds-color: var(--xplat-lightblue-800);
+.brand-categorical-1-100 {
+  --ds-color: var(--brand-categorical-1-100);
 }
-.xplat-lightblue-900 {
-  --ds-color: var(--xplat-lightblue-900);
+.brand-categorical-1-200 {
+  --ds-color: var(--brand-categorical-1-200);
 }
-.xplat-purple-50 {
-  --ds-color: var(--xplat-purple-50);
+.brand-categorical-1-300 {
+  --ds-color: var(--brand-categorical-1-300);
 }
-.xplat-purple-100 {
-  --ds-color: var(--xplat-purple-100);
+.brand-categorical-1-400 {
+  --ds-color: var(--brand-categorical-1-400);
 }
-.xplat-purple-200 {
-  --ds-color: var(--xplat-purple-200);
+.brand-categorical-1-500 {
+  --ds-color: var(--brand-categorical-1-500);
 }
-.xplat-purple-300 {
-  --ds-color: var(--xplat-purple-300);
+.brand-categorical-1-600 {
+  --ds-color: var(--brand-categorical-1-600);
 }
-.xplat-purple-400 {
-  --ds-color: var(--xplat-purple-400);
+.brand-categorical-2-100 {
+  --ds-color: var(--brand-categorical-2-100);
 }
-.xplat-purple-500 {
-  --ds-color: var(--xplat-purple-500);
+.brand-categorical-2-200 {
+  --ds-color: var(--brand-categorical-2-200);
 }
-.xplat-purple-600 {
-  --ds-color: var(--xplat-purple-600);
+.brand-categorical-2-300 {
+  --ds-color: var(--brand-categorical-2-300);
 }
-.xplat-purple-700 {
-  --ds-color: var(--xplat-purple-700);
+.brand-categorical-2-400 {
+  --ds-color: var(--brand-categorical-2-400);
 }
-.xplat-purple-800 {
-  --ds-color: var(--xplat-purple-800);
+.brand-categorical-2-500 {
+  --ds-color: var(--brand-categorical-2-500);
 }
-.xplat-purple-900 {
-  --ds-color: var(--xplat-purple-900);
+.brand-categorical-2-600 {
+  --ds-color: var(--brand-categorical-2-600);
 }
-.xplat-pink-50 {
-  --ds-color: var(--xplat-pink-50);
+.brand-categorical-3-100 {
+  --ds-color: var(--brand-categorical-3-100);
 }
-.xplat-pink-100 {
-  --ds-color: var(--xplat-pink-100);
+.brand-categorical-3-200 {
+  --ds-color: var(--brand-categorical-3-200);
 }
-.xplat-pink-200 {
-  --ds-color: var(--xplat-pink-200);
+.brand-categorical-3-300 {
+  --ds-color: var(--brand-categorical-3-300);
 }
-.xplat-pink-300 {
-  --ds-color: var(--xplat-pink-300);
+.brand-categorical-3-400 {
+  --ds-color: var(--brand-categorical-3-400);
 }
-.xplat-pink-400 {
-  --ds-color: var(--xplat-pink-400);
+.brand-categorical-3-500 {
+  --ds-color: var(--brand-categorical-3-500);
 }
-.xplat-pink-500 {
-  --ds-color: var(--xplat-pink-500);
+.brand-categorical-3-600 {
+  --ds-color: var(--brand-categorical-3-600);
 }
-.xplat-pink-600 {
-  --ds-color: var(--xplat-pink-600);
+.brand-categorical-4-100 {
+  --ds-color: var(--brand-categorical-4-100);
 }
-.xplat-pink-700 {
-  --ds-color: var(--xplat-pink-700);
+.brand-categorical-4-200 {
+  --ds-color: var(--brand-categorical-4-200);
 }
-.xplat-pink-800 {
-  --ds-color: var(--xplat-pink-800);
+.brand-categorical-4-300 {
+  --ds-color: var(--brand-categorical-4-300);
 }
-.xplat-pink-900 {
-  --ds-color: var(--xplat-pink-900);
+.brand-categorical-4-400 {
+  --ds-color: var(--brand-categorical-4-400);
 }
-.xplat-neutral-50 {
-  --ds-color: var(--xplat-neutral-50);
+.brand-categorical-4-500 {
+  --ds-color: var(--brand-categorical-4-500);
 }
-.xplat-neutral-100 {
-  --ds-color: var(--xplat-neutral-100);
+.brand-categorical-4-600 {
+  --ds-color: var(--brand-categorical-4-600);
 }
-.xplat-neutral-200 {
-  --ds-color: var(--xplat-neutral-200);
+.brand-categorical-5-100 {
+  --ds-color: var(--brand-categorical-5-100);
 }
-.xplat-neutral-300 {
-  --ds-color: var(--xplat-neutral-300);
+.brand-categorical-5-200 {
+  --ds-color: var(--brand-categorical-5-200);
 }
-.xplat-neutral-400 {
-  --ds-color: var(--xplat-neutral-400);
+.brand-categorical-5-300 {
+  --ds-color: var(--brand-categorical-5-300);
 }
-.xplat-neutral-500 {
-  --ds-color: var(--xplat-neutral-500);
+.brand-categorical-5-400 {
+  --ds-color: var(--brand-categorical-5-400);
 }
-.xplat-neutral-600 {
-  --ds-color: var(--xplat-neutral-600);
+.brand-categorical-5-500 {
+  --ds-color: var(--brand-categorical-5-500);
 }
-.xplat-neutral-700 {
-  --ds-color: var(--xplat-neutral-700);
+.brand-categorical-5-600 {
+  --ds-color: var(--brand-categorical-5-600);
 }
-.xplat-neutral-800 {
-  --ds-color: var(--xplat-neutral-800);
+.brand-categorical-6-100 {
+  --ds-color: var(--brand-categorical-6-100);
 }
-.xplat-neutral-900 {
-  --ds-color: var(--xplat-neutral-900);
+.brand-categorical-6-200 {
+  --ds-color: var(--brand-categorical-6-200);
 }
-.xplat-black {
-  --ds-color: var(--xplat-black);
+.brand-categorical-6-300 {
+  --ds-color: var(--brand-categorical-6-300);
 }
-.xplat-white {
-  --ds-color: var(--xplat-white);
+.brand-categorical-6-400 {
+  --ds-color: var(--brand-categorical-6-400);
 }
-.test-default {
-  --ds-color: var(--test-default);
+.brand-categorical-6-500 {
+  --ds-color: var(--brand-categorical-6-500);
+}
+.brand-categorical-6-600 {
+  --ds-color: var(--brand-categorical-6-600);
+}
+.brand-categorical-7-100 {
+  --ds-color: var(--brand-categorical-7-100);
+}
+.brand-categorical-7-200 {
+  --ds-color: var(--brand-categorical-7-200);
+}
+.brand-categorical-7-300 {
+  --ds-color: var(--brand-categorical-7-300);
+}
+.brand-categorical-7-400 {
+  --ds-color: var(--brand-categorical-7-400);
+}
+.brand-categorical-7-500 {
+  --ds-color: var(--brand-categorical-7-500);
+}
+.brand-categorical-7-600 {
+  --ds-color: var(--brand-categorical-7-600);
+}
+.brand-categorical-8-100 {
+  --ds-color: var(--brand-categorical-8-100);
+}
+.brand-categorical-8-200 {
+  --ds-color: var(--brand-categorical-8-200);
+}
+.brand-categorical-8-300 {
+  --ds-color: var(--brand-categorical-8-300);
+}
+.brand-categorical-8-400 {
+  --ds-color: var(--brand-categorical-8-400);
+}
+.brand-categorical-8-500 {
+  --ds-color: var(--brand-categorical-8-500);
+}
+.brand-categorical-8-600 {
+  --ds-color: var(--brand-categorical-8-600);
+}
+.system-success-50 {
+  --ds-color: var(--system-success-50);
+}
+.system-success-100 {
+  --ds-color: var(--system-success-100);
+}
+.system-success-200 {
+  --ds-color: var(--system-success-200);
+}
+.system-success-300 {
+  --ds-color: var(--system-success-300);
+}
+.system-success-400 {
+  --ds-color: var(--system-success-400);
+}
+.system-success-500 {
+  --ds-color: var(--system-success-500);
+}
+.system-success-600 {
+  --ds-color: var(--system-success-600);
+}
+.system-success-700 {
+  --ds-color: var(--system-success-700);
+}
+.system-success-800 {
+  --ds-color: var(--system-success-800);
+}
+.system-success-900 {
+  --ds-color: var(--system-success-900);
+}
+.system-error-50 {
+  --ds-color: var(--system-error-50);
+}
+.system-error-100 {
+  --ds-color: var(--system-error-100);
+}
+.system-error-200 {
+  --ds-color: var(--system-error-200);
+}
+.system-error-300 {
+  --ds-color: var(--system-error-300);
+}
+.system-error-400 {
+  --ds-color: var(--system-error-400);
+}
+.system-error-500 {
+  --ds-color: var(--system-error-500);
+}
+.system-error-600 {
+  --ds-color: var(--system-error-600);
+}
+.system-error-700 {
+  --ds-color: var(--system-error-700);
+}
+.system-error-800 {
+  --ds-color: var(--system-error-800);
+}
+.system-error-900 {
+  --ds-color: var(--system-error-900);
+}
+.system-warning-50 {
+  --ds-color: var(--system-warning-50);
+}
+.system-warning-100 {
+  --ds-color: var(--system-warning-100);
+}
+.system-warning-200 {
+  --ds-color: var(--system-warning-200);
+}
+.system-warning-300 {
+  --ds-color: var(--system-warning-300);
+}
+.system-warning-400 {
+  --ds-color: var(--system-warning-400);
+}
+.system-warning-500 {
+  --ds-color: var(--system-warning-500);
+}
+.system-warning-600 {
+  --ds-color: var(--system-warning-600);
+}
+.system-warning-700 {
+  --ds-color: var(--system-warning-700);
+}
+.system-warning-800 {
+  --ds-color: var(--system-warning-800);
+}
+.system-warning-900 {
+  --ds-color: var(--system-warning-900);
+}
+.system-info-50 {
+  --ds-color: var(--system-info-50);
+}
+.system-info-100 {
+  --ds-color: var(--system-info-100);
+}
+.system-info-200 {
+  --ds-color: var(--system-info-200);
+}
+.system-info-300 {
+  --ds-color: var(--system-info-300);
+}
+.system-info-400 {
+  --ds-color: var(--system-info-400);
+}
+.system-info-500 {
+  --ds-color: var(--system-info-500);
+}
+.system-info-600 {
+  --ds-color: var(--system-info-600);
+}
+.system-info-700 {
+  --ds-color: var(--system-info-700);
+}
+.system-info-800 {
+  --ds-color: var(--system-info-800);
+}
+.system-info-900 {
+  --ds-color: var(--system-info-900);
+}
+.system-link-400 {
+  --ds-color: var(--system-link-400);
+}
+.system-link-500 {
+  --ds-color: var(--system-link-500);
+}
+.system-link-600 {
+  --ds-color: var(--system-link-600);
+}
+.system-link-700 {
+  --ds-color: var(--system-link-700);
 }
 
 /* src/components/Accordion/accordion.scss */
 .lib-xplat-accordion {
-  border: 1px solid var(--xplat-neutral-200);
-  border-radius: 0.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   overflow: hidden;
 }
 .lib-xplat-accordion .accordion-item {
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-accordion .accordion-item:last-child {
   border-bottom: none;
@@ -393,28 +1098,28 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.875rem 1rem;
+  padding: 14px var(--spacing-space-4);
   background: none;
   border: none;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   text-align: left;
   transition: background-color 0.2s;
 }
 .lib-xplat-accordion .accordion-header:hover {
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-accordion .accordion-header .chevron {
-  width: 20px;
-  height: 20px;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.25s ease;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-accordion .accordion-body {
   overflow: hidden;
@@ -422,9 +1127,9 @@
   transition: max-height 0.25s ease;
 }
 .lib-xplat-accordion .accordion-content {
-  padding: 0 1rem 0.875rem;
+  padding: 0 var(--spacing-space-4) 14px;
   font-size: 14px;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   line-height: 1.6;
 }
 .lib-xplat-accordion .accordion-item.open .chevron {
@@ -436,8 +1141,8 @@
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  border-radius: var(--spacing-radius-md);
   font-size: 14px;
   line-height: 1.5;
   border: 1px solid;
@@ -451,7 +1156,7 @@
   cursor: pointer;
   font-size: 18px;
   line-height: 1;
-  margin-left: 0.5rem;
+  margin-left: var(--spacing-space-2);
   padding: 0;
   opacity: 0.6;
   transition: opacity 0.2s;
@@ -460,36 +1165,36 @@
   opacity: 1;
 }
 .lib-xplat-alert.info {
-  background-color: var(--xplat-lightblue-50);
-  border-color: var(--xplat-lightblue-200);
-  color: var(--xplat-lightblue-700);
+  background-color: var(--semantic-surface-info-subtle);
+  border-color: var(--semantic-border-info);
+  color: var(--semantic-text-info);
 }
 .lib-xplat-alert.info .close-btn {
-  color: var(--xplat-lightblue-700);
+  color: var(--semantic-text-info);
 }
 .lib-xplat-alert.success {
-  background-color: var(--xplat-green-50);
-  border-color: var(--xplat-green-200);
-  color: var(--xplat-green-700);
+  background-color: var(--semantic-surface-success-subtle);
+  border-color: var(--semantic-border-success);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-alert.success .close-btn {
-  color: var(--xplat-green-700);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-alert.warning {
-  background-color: var(--xplat-yellow-50);
-  border-color: var(--xplat-yellow-200);
-  color: var(--xplat-yellow-700);
+  background-color: var(--semantic-surface-warning-subtle);
+  border-color: var(--semantic-border-warning);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-alert.warning .close-btn {
-  color: var(--xplat-yellow-700);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-alert.error {
-  background-color: var(--xplat-red-50);
-  border-color: var(--xplat-red-200);
-  color: var(--xplat-red-700);
+  background-color: var(--semantic-surface-error-subtle);
+  border-color: var(--semantic-border-error);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-alert.error .close-btn {
-  color: var(--xplat-red-700);
+  color: var(--semantic-text-error);
 }
 
 /* src/components/Avatar/avatar.scss */
@@ -503,18 +1208,18 @@
   user-select: none;
 }
 .lib-xplat-avatar.sm {
-  width: 32px;
-  height: 32px;
-  font-size: 12px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
+  font-size: 11px;
 }
 .lib-xplat-avatar.md {
-  width: 40px;
-  height: 40px;
+  width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 14px;
 }
 .lib-xplat-avatar.lg {
-  width: 56px;
-  height: 56px;
+  width: var(--spacing-control-height-lg);
+  height: var(--spacing-control-height-lg);
   font-size: 18px;
 }
 .lib-xplat-avatar img {
@@ -528,16 +1233,46 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--xplat-white);
   font-weight: 600;
+  background-color: var(--semantic-surface-neutral-subtle);
+  color: var(--semantic-text-muted);
+}
+.lib-xplat-avatar .fallback.cat-1 {
+  background-color: var(--semantic-categorical-1-bg);
+  color: var(--semantic-categorical-1-text);
+}
+.lib-xplat-avatar .fallback.cat-2 {
+  background-color: var(--semantic-categorical-2-bg);
+  color: var(--semantic-categorical-2-text);
+}
+.lib-xplat-avatar .fallback.cat-3 {
+  background-color: var(--semantic-categorical-3-bg);
+  color: var(--semantic-categorical-3-text);
+}
+.lib-xplat-avatar .fallback.cat-4 {
+  background-color: var(--semantic-categorical-4-bg);
+  color: var(--semantic-categorical-4-text);
+}
+.lib-xplat-avatar .fallback.cat-5 {
+  background-color: var(--semantic-categorical-5-bg);
+  color: var(--semantic-categorical-5-text);
+}
+.lib-xplat-avatar .fallback.cat-6 {
+  background-color: var(--semantic-categorical-6-bg);
+  color: var(--semantic-categorical-6-text);
+}
+.lib-xplat-avatar .fallback.cat-7 {
+  background-color: var(--semantic-categorical-7-bg);
+  color: var(--semantic-categorical-7-text);
+}
+.lib-xplat-avatar .fallback.cat-8 {
+  background-color: var(--semantic-categorical-8-bg);
+  color: var(--semantic-categorical-8-text);
 }
 .lib-xplat-avatar .fallback svg {
   width: 60%;
   height: 60%;
 }
-.lib-xplat-avatar .fallback {
-  background-color: var(--ds-color);
-}
 
 /* src/components/Badge/badge.scss */
 .lib-xplat-badge {
@@ -545,24 +1280,24 @@
   display: inline-flex;
 }
 .lib-xplat-badge.sm .badge-indicator {
-  min-width: 14px;
-  height: 14px;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
   font-size: 9px;
-  padding: 0 3px;
+  padding: 0 var(--spacing-space-1);
 }
 .lib-xplat-badge.sm .badge-indicator.dot {
-  min-width: 6px;
-  height: 6px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-badge.lg .badge-indicator {
-  min-width: 22px;
-  height: 22px;
+  min-width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
   font-size: 13px;
-  padding: 0 6px;
+  padding: 0 var(--spacing-space-2);
 }
 .lib-xplat-badge.lg .badge-indicator.dot {
-  min-width: 10px;
-  height: 10px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-badge .badge-indicator {
   position: absolute;
@@ -572,23 +1307,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 10rem;
-  color: var(--xplat-white);
+  border-radius: var(--spacing-radius-full);
+  color: var(--semantic-text-inverse);
   font-size: 11px;
   font-weight: 600;
   line-height: 1;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 5px;
+  min-width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
+  padding: 0 var(--spacing-space-1);
   box-sizing: border-box;
 }
 .lib-xplat-badge .badge-indicator.dot {
-  min-width: 8px;
-  height: 8px;
+  min-width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
   padding: 0;
 }
-.lib-xplat-badge .badge-indicator {
-  background-color: var(--ds-color);
+.lib-xplat-badge .badge-indicator.error {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-badge .badge-indicator.success {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-badge .badge-indicator.warning {
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-strong);
+}
+.lib-xplat-badge .badge-indicator.info {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-badge .badge-indicator.brand {
+  background-color: var(--semantic-surface-brand-default);
 }
 
 /* src/components/Breadcrumb/breadcrumb.scss */
@@ -598,17 +1346,17 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  gap: 4px;
+  gap: var(--spacing-space-1);
   flex-wrap: wrap;
 }
 .lib-xplat-breadcrumb li {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-space-1);
   font-size: 14px;
 }
 .lib-xplat-breadcrumb .link {
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   text-decoration: none;
   background: none;
   border: none;
@@ -618,59 +1366,103 @@
   transition: color 0.2s;
 }
 .lib-xplat-breadcrumb .link:hover {
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-breadcrumb .current {
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   font-weight: 500;
 }
 .lib-xplat-breadcrumb .separator {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
   user-select: none;
 }
 
 /* src/components/Button/button.scss */
 .lib-xplat-button {
-  border-radius: 0.5rem;
+  border-radius: var(--spacing-radius-md);
   font-weight: 500;
   cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-button.sm {
-  padding: 0.25rem 0.75rem;
-  font-size: 0.875rem;
+  height: var(--spacing-control-height-sm);
+  padding: 0 var(--spacing-space-3);
+  font-size: 14px;
 }
 .lib-xplat-button.md {
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
+  height: var(--spacing-control-height-md);
+  padding: 0 var(--spacing-space-4);
+  font-size: 16px;
 }
 .lib-xplat-button.lg {
-  padding: 0.75rem 1.5rem;
-  font-size: 1.125rem;
-}
-.lib-xplat-button {
-  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  height: var(--spacing-control-height-lg);
+  padding: 0 var(--spacing-space-6);
+  font-size: 18px;
 }
 .lib-xplat-button:disabled {
   cursor: not-allowed;
-  background-color: var(--xplat-neutral-400) !important;
-  border-color: var(--xplat-neutral-400) !important;
-  color: var(--xplat-white) !important;
+  background-color: var(--semantic-surface-neutral-disabled) !important;
+  border-color: var(--semantic-surface-neutral-disabled) !important;
+  color: var(--semantic-text-disabled) !important;
 }
 .lib-xplat-button.primary {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-button.primary:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+.lib-xplat-button.primary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-button.primary:active:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-button.primary:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
 }
 .lib-xplat-button.secondary {
-  background-color: var(--xplat-white);
-  border: 1px solid;
-  color: var(--ds-color);
-  border-color: var(--ds-color);
+  color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-neutral-default);
+  border-color: var(--semantic-border-default);
+}
+.lib-xplat-button.secondary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-button.secondary:active:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-strong);
+}
+.lib-xplat-button.secondary:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.danger {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-button.danger:hover:not(:disabled) {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-button.danger:active:not(:disabled) {
+  background-color: var(--semantic-surface-error-strong);
 }
-.lib-xplat-button.secondary:hover {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+.lib-xplat-button.danger:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-button.ghost {
+  color: var(--semantic-text-subtle);
+  background-color: transparent;
+  border-color: transparent;
+}
+.lib-xplat-button.ghost:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-button.ghost:active:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-button.ghost:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
 }
 
 /* src/components/Calendar/calendar.scss */
@@ -683,76 +1475,75 @@
 .lib-xplat-calendar .calendar-header {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: var(--spacing-space-2);
+  margin-bottom: var(--spacing-space-4);
 }
 .lib-xplat-calendar .calendar-title {
-  font-size: clamp(0.875rem, 3cqi, 1.25rem);
+  font-size: clamp(14px, 3cqi, 20px);
   font-weight: 600;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   min-width: 120px;
   text-align: center;
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  border-radius: var(--spacing-radius-md);
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-title:hover {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-calendar .calendar-nav {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: var(--spacing-space-7);
+  height: var(--spacing-space-7);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
   cursor: pointer;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-nav:hover {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-calendar .calendar-nav svg {
-  width: 16px;
-  height: 16px;
+  font-size: 16px;
 }
 .lib-xplat-calendar .calendar-today-btn {
   margin-left: auto;
-  padding: 0.25rem 0.75rem;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0.375rem;
+  padding: var(--spacing-space-1) var(--spacing-space-3);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   background: none;
-  font-size: clamp(0.75rem, 2cqi, 0.875rem);
-  color: var(--xplat-neutral-600);
+  font-size: clamp(12px, 2cqi, 14px);
+  color: var(--semantic-text-subtle);
   cursor: pointer;
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-today-btn:hover {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-calendar .calendar-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--spacing-space-1);
 }
 .lib-xplat-calendar .calendar-weekday {
   text-align: center;
-  font-size: clamp(0.6875rem, 2cqi, 0.875rem);
+  font-size: clamp(11px, 2cqi, 14px);
   font-weight: 500;
-  padding: 0.375rem 0;
-  color: var(--xplat-neutral-500);
+  padding: var(--spacing-space-2) 0;
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-calendar .calendar-weekday.sunday {
-  color: var(--xplat-red-500);
+  color: var(--semantic-text-sunday);
 }
 .lib-xplat-calendar .calendar-weekday.saturday {
-  color: var(--xplat-blue-500);
+  color: var(--semantic-text-saturday);
 }
 .lib-xplat-calendar .calendar-grid {
   display: grid;
@@ -765,97 +1556,97 @@
   justify-content: center;
   aspect-ratio: 1/0.85;
   cursor: pointer;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-day:hover:not(.disabled):not(.outside):not(.selected) {
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-calendar .calendar-day.outside {
   cursor: default;
 }
 .lib-xplat-calendar .calendar-day.outside .calendar-day-number {
-  color: var(--xplat-neutral-300);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-calendar .calendar-day.outside.sunday .calendar-day-number {
-  color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
 }
 .lib-xplat-calendar .calendar-day.outside.saturday .calendar-day-number {
-  color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
 }
 .lib-xplat-calendar .calendar-day.disabled {
   cursor: not-allowed;
 }
 .lib-xplat-calendar .calendar-day.disabled .calendar-day-number {
-  color: var(--xplat-neutral-300);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-calendar .calendar-day.today .calendar-day-number {
   font-weight: 700;
-  color: var(--xplat-blue-600);
+  color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-calendar .calendar-day.selected {
-  box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--xplat-neutral-500));
+  box-shadow: inset 0 0 0 1.5px var(--calendar-selected-color, var(--semantic-text-muted));
 }
 .lib-xplat-calendar .calendar-day.selected .calendar-day-number {
   font-weight: 700;
 }
 .lib-xplat-calendar .calendar-day.selected:hover {
-  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--xplat-neutral-500)) 10%, transparent);
+  background-color: color-mix(in srgb, var(--calendar-selected-color, var(--semantic-text-muted)) 10%, transparent);
 }
 .lib-xplat-calendar .calendar-day.sunday:not(.outside) .calendar-day-number {
-  color: var(--xplat-red-500);
+  color: var(--semantic-text-sunday);
 }
 .lib-xplat-calendar .calendar-day.saturday:not(.outside) .calendar-day-number {
-  color: var(--xplat-blue-500);
+  color: var(--semantic-text-saturday);
 }
 .lib-xplat-calendar .calendar-day-number {
-  font-size: clamp(0.75rem, 2.5cqi, 1rem);
+  font-size: clamp(12px, 2.5cqi, 16px);
   line-height: 1;
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-calendar .calendar-day-events {
   display: flex;
   gap: 2px;
-  margin-top: 4px;
+  margin-top: var(--spacing-space-1);
   align-items: center;
 }
 .lib-xplat-calendar .calendar-event-dot {
-  width: 5px;
-  height: 5px;
+  width: var(--spacing-space-1);
+  height: var(--spacing-space-1);
   border-radius: 50%;
   flex-shrink: 0;
   cursor: pointer;
 }
 .lib-xplat-calendar .calendar-event-more {
   font-size: 9px;
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-muted);
   line-height: 1;
 }
 .lib-xplat-calendar .calendar-picker-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 0.5rem;
-  padding: 0.5rem 0;
+  gap: var(--spacing-space-2);
+  padding: var(--spacing-space-2) 0;
 }
 .lib-xplat-calendar .calendar-picker-cell {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.5rem;
+  padding: var(--spacing-space-2);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
-  font-size: clamp(0.75rem, 2.5cqi, 0.9375rem);
-  color: var(--xplat-neutral-700);
+  font-size: clamp(12px, 2.5cqi, 15px);
+  color: var(--semantic-text-subtle);
   cursor: pointer;
   transition: background-color 0.15s;
 }
 .lib-xplat-calendar .calendar-picker-cell:hover {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-calendar .calendar-picker-cell.active {
-  background-color: var(--xplat-neutral-900);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-strong);
+  color: var(--semantic-text-inverse);
   font-weight: 600;
 }
 
@@ -866,15 +1657,15 @@
   flex: 1;
   min-width: 0;
   height: fit-content;
-  border-radius: 1rem;
-  border: 1px solid var(--xplat-neutral-400);
-  background-color: var(--xplat-white);
+  border-radius: var(--spacing-radius-xl);
+  border: 1px solid var(--semantic-border-strong);
+  background-color: var(--semantic-surface-neutral-default);
   overflow: hidden;
 }
 .lib-xplat-card > .title {
   font-weight: 600;
-  background-color: var(--xplat-neutral-100);
-  padding: 0.25rem 0.75rem;
+  background-color: var(--semantic-surface-neutral-disabled);
+  padding: var(--spacing-space-1) var(--spacing-space-3);
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -883,7 +1674,7 @@
 .lib-xplat-card > .content {
   display: flex;
   flex-direction: column;
-  padding: 1rem;
+  padding: var(--spacing-space-4);
 }
 
 /* src/components/CardTab/cardTab.scss */
@@ -899,81 +1690,138 @@
 .lib-xplat-card-tab .card-tab-trigger {
   position: relative;
   cursor: pointer;
-  border: 1px solid var(--xplat-neutral-300);
+  border: 1px solid var(--semantic-border-default);
   border-bottom: none;
-  border-radius: 0.5rem 0.5rem 0 0;
-  background-color: var(--xplat-neutral-100);
-  color: var(--xplat-neutral-500);
+  border-radius: var(--spacing-radius-md) var(--spacing-radius-md) 0 0;
+  background-color: var(--semantic-surface-neutral-disabled);
+  color: var(--semantic-text-muted);
   font-weight: 500;
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-card-tab .card-tab-trigger:hover:not(.active) {
-  background-color: var(--xplat-neutral-200);
-  color: var(--xplat-neutral-700);
+  background-color: var(--semantic-surface-neutral-subtle);
+  color: var(--semantic-text-subtle);
 }
 .lib-xplat-card-tab .card-tab-trigger.active {
-  background-color: var(--xplat-white);
-  color: var(--xplat-neutral-900);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
   font-weight: 600;
   z-index: 1;
   margin-bottom: -1px;
   padding-bottom: calc(var(--tab-py) + 1px);
 }
 .lib-xplat-card-tab .card-tab-body {
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0 0.5rem 0.5rem 0.5rem;
-  background-color: var(--xplat-white);
-  padding: 1.25rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: 0 var(--spacing-radius-md) var(--spacing-radius-md) var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
+  padding: var(--spacing-space-5);
 }
 .lib-xplat-card-tab .card-tab-panel {
   display: grid;
   grid-template-columns: repeat(var(--card-tab-columns, 3), 1fr);
-  gap: 1rem;
+  gap: var(--spacing-space-4);
 }
 .lib-xplat-card-tab.sm .card-tab-trigger {
-  --tab-py: 0.25rem;
-  padding: 0.25rem 0.75rem;
-  font-size: 0.8125rem;
+  --tab-py: var(--spacing-space-1);
+  padding: var(--spacing-space-1) var(--spacing-space-3);
+  font-size: 13px;
 }
 .lib-xplat-card-tab.sm .card-tab-body {
-  padding: 1rem;
+  padding: var(--spacing-space-4);
 }
 .lib-xplat-card-tab.sm .card-tab-panel {
-  gap: 0.75rem;
+  gap: var(--spacing-space-3);
 }
 .lib-xplat-card-tab.md .card-tab-trigger {
-  --tab-py: 0.375rem;
-  padding: 0.375rem 1rem;
-  font-size: 0.875rem;
+  --tab-py: 6px;
+  padding: 6px var(--spacing-space-4);
+  font-size: 14px;
 }
 .lib-xplat-card-tab.md .card-tab-body {
-  padding: 1.25rem;
+  padding: var(--spacing-space-5);
 }
 .lib-xplat-card-tab.md .card-tab-panel {
-  gap: 1rem;
+  gap: var(--spacing-space-4);
 }
 .lib-xplat-card-tab.lg .card-tab-trigger {
-  --tab-py: 0.5rem;
-  padding: 0.5rem 1.25rem;
-  font-size: 1rem;
+  --tab-py: var(--spacing-space-2);
+  padding: var(--spacing-space-2) var(--spacing-space-5);
+  font-size: 16px;
 }
 .lib-xplat-card-tab.lg .card-tab-body {
-  padding: 1.5rem;
+  padding: var(--spacing-space-6);
 }
 .lib-xplat-card-tab.lg .card-tab-panel {
-  gap: 1.25rem;
+  gap: var(--spacing-space-5);
 }
 
 /* src/components/Chart/chart.scss */
 .lib-xplat-chart {
   width: 100%;
+  position: relative;
+}
+.lib-xplat-chart .chart-svg {
+  width: 100%;
+  height: auto;
+}
+.lib-xplat-chart .chart-grid {
+  stroke: var(--semantic-border-subtle);
+  stroke-width: 1;
+}
+.lib-xplat-chart .chart-axis-label {
+  font-size: 10px;
+  fill: var(--semantic-text-muted);
+}
+.lib-xplat-chart .chart-pie-label {
+  font-size: 12px;
+  font-weight: 600;
+  fill: var(--semantic-text-inverse);
+  pointer-events: none;
+}
+.lib-xplat-chart .chart-pie {
+  max-width: 300px;
+  margin: 0 auto;
+}
+.lib-xplat-chart .chart-point {
+  cursor: pointer;
+  transition: r 0.15s;
+}
+.lib-xplat-chart .chart-point:hover {
+  r: 6;
+}
+.lib-xplat-chart .chart-bar {
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.lib-xplat-chart .chart-bar:hover {
+  opacity: 0.8;
+}
+.lib-xplat-chart .chart-slice {
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.lib-xplat-chart .chart-slice:hover {
+  opacity: 0.85;
+}
+.lib-xplat-chart .chart-tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%);
+  padding: var(--spacing-space-2) var(--spacing-space-2);
+  background-color: var(--semantic-surface-neutral-strong);
+  color: var(--semantic-text-inverse);
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: var(--spacing-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
 }
 
 /* src/components/CheckBox/checkbox.scss */
 .lib-xplat-checkbox {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
   cursor: pointer;
   user-select: none;
   width: fit-content;
@@ -983,43 +1831,30 @@
   pointer-events: none;
 }
 .lib-xplat-checkbox.sm > .checkbox {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-checkbox.md > .checkbox {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
 }
 .lib-xplat-checkbox.lg > .checkbox {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-checkbox.sm > .label {
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 .lib-xplat-checkbox.lg > .label {
-  font-size: 1.125rem;
+  font-size: 18px;
 }
 .lib-xplat-checkbox > .checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
-.lib-xplat-checkbox > .checkbox.unchecked {
-  border: 1px solid var(--xplat-neutral-400);
-}
-.lib-xplat-checkbox:hover .lib-xplat-checkbox > .checkbox.unchecked {
-  border-color: var(--xplat-neutral-600);
-  background-color: var(--xplat-neutral-100);
-}
-.lib-xplat-checkbox > .checkbox.checked {
-  background-color: var(--ds-color);
-}
-.lib-xplat-checkbox > .checkbox.checked:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-}
 .lib-xplat-checkbox > .checkbox .check-icon {
   display: flex;
   align-items: center;
@@ -1032,98 +1867,157 @@
   opacity: 1;
   transform: scale(1);
 }
+.lib-xplat-checkbox > .checkbox.unchecked {
+  border: 1px solid var(--semantic-border-strong);
+}
+.lib-xplat-checkbox:hover > .checkbox.unchecked {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-checkbox.brand > .checkbox.checked {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-checkbox.success > .checkbox.checked {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-checkbox.error > .checkbox.checked {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-checkbox.warning > .checkbox.checked {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-checkbox.info > .checkbox.checked {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-checkbox:hover.brand > .checkbox.checked {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-checkbox:hover.success > .checkbox.checked {
+  background-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-checkbox:hover.error > .checkbox.checked {
+  background-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-checkbox:hover.warning > .checkbox.checked {
+  background-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-checkbox:hover.info > .checkbox.checked {
+  background-color: var(--semantic-surface-info-strong);
+}
 .lib-xplat-checkbox > .checkbox.disabled {
   cursor: not-allowed;
-  background-color: var(--xplat-neutral-400) !important;
-  border-color: var(--xplat-neutral-400) !important;
+  background-color: var(--semantic-surface-neutral-disabled) !important;
+  border-color: var(--semantic-surface-neutral-disabled) !important;
 }
 .lib-xplat-checkbox > .label {
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   font-weight: 400;
   line-height: 1em;
-  padding-top: 0.05rem;
+  padding-top: 1px;
 }
 
 /* src/components/Chip/chip.scss */
 .lib-xplat-chip {
-  border-radius: 10rem;
+  border-radius: var(--spacing-radius-full);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-chip.sm {
-  padding: 0.0625rem 0.5rem;
+  padding: 1px var(--spacing-space-2);
   font-size: 12px;
 }
 .lib-xplat-chip.md {
-  padding: 0.125rem 0.75rem;
+  padding: 2px var(--spacing-space-3);
   font-size: 14px;
 }
 .lib-xplat-chip.lg {
-  padding: 0.25rem 1rem;
+  padding: var(--spacing-space-1) var(--spacing-space-4);
   font-size: 16px;
 }
-.lib-xplat-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-  transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
 .lib-xplat-chip.primary {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
-}
-.lib-xplat-chip.primary:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-chip.secondary {
-  background-color: var(--xplat-white);
-  border: 1px solid;
-  color: var(--ds-color);
-  border-color: var(--ds-color);
+  color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-neutral-default);
+  border: 1px solid var(--semantic-border-default);
+}
+.lib-xplat-chip.neutral {
+  color: var(--semantic-text-subtle);
+  background-color: var(--semantic-surface-neutral-subtle);
+  border: 1px solid var(--semantic-border-default);
 }
-.lib-xplat-chip.secondary:hover {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+.lib-xplat-chip.success {
+  color: var(--semantic-text-success);
+  background-color: var(--semantic-surface-success-subtle);
+}
+.lib-xplat-chip.error {
+  color: var(--semantic-text-error);
+  background-color: var(--semantic-surface-error-subtle);
+}
+.lib-xplat-chip.warning {
+  color: var(--semantic-text-warning);
+  background-color: var(--semantic-surface-warning-subtle);
+}
+.lib-xplat-chip.info {
+  color: var(--semantic-text-info);
+  background-color: var(--semantic-surface-info-subtle);
 }
 
 /* src/components/Input/input.scss */
 .lib-xplat-input-wrap {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input {
   display: flex;
   align-items: center;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   overflow: hidden;
-  background-color: var(--xplat-white);
-  padding-right: 0.5rem;
+  background-color: var(--semantic-surface-neutral-default);
+  padding-right: var(--spacing-space-2);
   width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-input-wrap .lib-xplat-input:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-input-wrap .lib-xplat-input:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
 }
 .lib-xplat-input-wrap .lib-xplat-input.sm {
-  height: 2rem;
-  font-size: 0.875rem;
+  height: var(--spacing-control-height-sm);
+  font-size: 14px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.md {
-  height: 2.5rem;
-  font-size: 1rem;
+  height: var(--spacing-control-height-md);
+  font-size: 16px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.lg {
-  height: 3rem;
-  font-size: 1.125rem;
+  height: var(--spacing-control-height-lg);
+  font-size: 18px;
 }
 .lib-xplat-input-wrap .lib-xplat-input.disabled {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
 }
 .lib-xplat-input-wrap .lib-xplat-input > input {
   border: none;
   outline: none;
   flex: 1;
-  padding-left: 1rem;
-  padding-right: 0.5rem;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-2);
   width: 100%;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
 }
 .lib-xplat-input-wrap .lib-xplat-input > input :disabled {
   cursor: not-allowed;
@@ -1133,8 +2027,8 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: var(--xplat-neutral-400);
-  padding-right: 0.5rem;
+  color: var(--semantic-icon-subtle);
+  padding-right: var(--spacing-space-2);
 }
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper {
   font: 500;
@@ -1144,36 +2038,35 @@
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap {
   display: flex;
-  gap: 0.5rem;
-  margin-left: 0.25rem;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
   display: flex;
-  gap: 0.25rem;
-  font-size: 0.75rem;
+  gap: var(--spacing-space-1);
+  font-size: 12px;
   align-items: center;
   user-select: none;
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
-  color: var(--xplat-green-600);
+  color: var(--semantic-text-success);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.warning {
-  color: var(--xplat-yellow-600);
+  color: var(--semantic-text-warning);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.error {
-  color: var(--xplat-red-600);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
-  font-size: 1rem;
+  font-size: 16px;
 }
 
 /* src/components/DatePicker/datepicker.scss */
 .lib-xplat-datepicker {
   user-select: none;
-  container-type: inline-size;
   min-width: 200px;
   width: 100%;
 }
@@ -1181,89 +2074,88 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
+  gap: var(--spacing-space-2);
+  margin-bottom: var(--spacing-space-3);
 }
 .lib-xplat-datepicker .datepicker-title {
   background: none;
   border: none;
   cursor: pointer;
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.375rem;
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  border-radius: var(--spacing-radius-md);
   transition: background-color 0.15s;
-  font-size: clamp(0.8125rem, 3cqi, 1.125rem);
+  font-size: clamp(13px, 3cqi, 18px);
   font-weight: 600;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
   min-width: 110px;
   text-align: center;
 }
 .lib-xplat-datepicker .datepicker-title:hover {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-datepicker .datepicker-picker-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 0.25rem;
-  padding: 0.25rem 0;
+  gap: var(--spacing-space-1);
+  padding: var(--spacing-space-1) 0;
 }
 .lib-xplat-datepicker .datepicker-picker-cell {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.375rem;
+  padding: var(--spacing-space-2);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
-  font-size: clamp(0.6875rem, 2cqi, 0.8125rem);
-  color: var(--xplat-neutral-700);
+  font-size: clamp(11px, 2cqi, 13px);
+  color: var(--semantic-text-subtle);
   cursor: pointer;
   transition: background-color 0.15s;
 }
 .lib-xplat-datepicker .datepicker-picker-cell:hover {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-datepicker .datepicker-picker-cell.active {
-  background-color: var(--datepicker-active-color, var(--xplat-blue-500));
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-brand-default);
+  color: var(--semantic-text-inverse);
   font-weight: 600;
 }
 .lib-xplat-datepicker .datepicker-nav {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: var(--spacing-space-7);
+  height: var(--spacing-space-7);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
   cursor: pointer;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   transition: background-color 0.15s;
 }
 .lib-xplat-datepicker .datepicker-nav:hover {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-datepicker .datepicker-nav svg {
-  width: 16px;
-  height: 16px;
+  font-size: 16px;
 }
 .lib-xplat-datepicker .datepicker-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--spacing-space-1);
 }
 .lib-xplat-datepicker .datepicker-weekday {
   text-align: center;
-  font-size: clamp(0.6875rem, 2cqi, 0.875rem);
+  font-size: clamp(11px, 2cqi, 14px);
   font-weight: 500;
-  padding: 0.25rem 0;
-  color: var(--xplat-neutral-400);
+  padding: var(--spacing-space-1) 0;
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-datepicker .datepicker-weekday.sunday {
-  color: var(--xplat-red-500);
+  color: var(--semantic-text-sunday);
 }
 .lib-xplat-datepicker .datepicker-weekday.saturday {
-  color: var(--xplat-blue-500);
+  color: var(--semantic-text-saturday);
 }
 .lib-xplat-datepicker .datepicker-grid {
   display: grid;
@@ -1276,63 +2168,63 @@
   justify-content: center;
   max-height: 100%;
   aspect-ratio: 1;
-  font-size: clamp(0.75rem, 2.5cqi, 1rem);
+  font-size: clamp(12px, 2.5cqi, 16px);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
   cursor: pointer;
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
   transition: background-color 0.15s, color 0.15s;
 }
 .lib-xplat-datepicker .datepicker-day:hover:not(:disabled):not(.outside):not(.selected) {
-  background-color: color-mix(in srgb, var(--datepicker-active-color, var(--xplat-blue-500)) 15%, transparent);
+  background-color: color-mix(in srgb, var(--semantic-surface-brand-default) 15%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.outside {
-  color: var(--xplat-neutral-300);
+  color: var(--semantic-text-disabled);
   cursor: default;
 }
 .lib-xplat-datepicker .datepicker-day.outside.sunday {
-  color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.outside.saturday {
-  color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.disabled {
-  color: var(--xplat-neutral-300);
+  color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }
 .lib-xplat-datepicker .datepicker-day.today {
   font-weight: 700;
-  box-shadow: inset 0 0 0 1px var(--datepicker-active-color, var(--xplat-blue-500));
+  box-shadow: inset 0 0 0 1px var(--semantic-surface-brand-default);
 }
 .lib-xplat-datepicker .datepicker-day.selected {
-  background-color: var(--datepicker-active-color, var(--xplat-blue-500));
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-brand-default);
+  color: var(--semantic-text-inverse);
   font-weight: 600;
 }
 .lib-xplat-datepicker .datepicker-day.selected:hover {
-  background-color: color-mix(in srgb, var(--datepicker-active-color, var(--xplat-blue-500)), black 15%);
+  background-color: color-mix(in srgb, var(--semantic-surface-brand-default), black 15%);
 }
 .lib-xplat-datepicker .datepicker-day.highlighted {
-  background-color: color-mix(in srgb, var(--datepicker-active-color, var(--xplat-blue-500)) 20%, transparent);
+  background-color: color-mix(in srgb, var(--semantic-surface-brand-default) 20%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.in-range {
-  background-color: color-mix(in srgb, var(--datepicker-active-color, var(--xplat-blue-500)) 12%, transparent);
+  background-color: color-mix(in srgb, var(--semantic-surface-brand-default) 12%, transparent);
   border-radius: 0;
 }
 .lib-xplat-datepicker .datepicker-day.sunday:not(.selected):not(.outside):not(.disabled) {
-  color: var(--xplat-red-500);
+  color: var(--semantic-text-sunday);
 }
 .lib-xplat-datepicker .datepicker-day.saturday:not(.selected):not(.outside):not(.disabled) {
-  color: var(--xplat-blue-500);
+  color: var(--semantic-text-saturday);
 }
 .lib-xplat-datepicker .datepicker-day.outside.sunday,
 .lib-xplat-datepicker .datepicker-day.disabled.sunday {
-  color: color-mix(in srgb, var(--xplat-red-500) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-sunday) 35%, transparent);
 }
 .lib-xplat-datepicker .datepicker-day.outside.saturday,
 .lib-xplat-datepicker .datepicker-day.disabled.saturday {
-  color: color-mix(in srgb, var(--xplat-blue-500) 35%, transparent);
+  color: color-mix(in srgb, var(--semantic-text-saturday) 35%, transparent);
 }
 .lib-xplat-datepicker.range {
   display: flex;
@@ -1340,29 +2232,29 @@
 }
 .lib-xplat-datepicker .datepicker-range-tabs {
   display: none;
-  margin-bottom: 0.75rem;
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  margin-bottom: var(--spacing-space-3);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-datepicker .datepicker-range-tab {
   flex: 1;
-  padding: 0.5rem;
+  padding: var(--spacing-space-2);
   border: none;
   background: none;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-muted);
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: color 0.15s, border-color 0.15s;
 }
 .lib-xplat-datepicker .datepicker-range-tab.active {
-  color: var(--datepicker-active-color, var(--xplat-blue-500));
-  border-bottom-color: var(--datepicker-active-color, var(--xplat-blue-500));
+  color: var(--semantic-surface-brand-default);
+  border-bottom-color: var(--semantic-surface-brand-default);
   font-weight: 600;
 }
 .lib-xplat-datepicker .datepicker-range-panels {
   display: flex;
-  gap: 1.5rem;
+  gap: var(--spacing-space-6);
 }
 .lib-xplat-datepicker .datepicker-range-mobile {
   display: none;
@@ -1374,10 +2266,10 @@
 .lib-xplat-datepicker .datepicker-range-label {
   display: block;
   text-align: center;
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 500;
-  color: var(--xplat-neutral-500);
-  margin-bottom: 0.5rem;
+  color: var(--semantic-text-muted);
+  margin-bottom: var(--spacing-space-2);
 }
 @media (max-width: 600px) {
   .lib-xplat-datepicker .datepicker-range-tabs {
@@ -1401,25 +2293,24 @@
   top: 100%;
   left: 0;
   z-index: 10;
-  margin-top: 4px;
-  padding: 1rem;
-  background-color: var(--xplat-white);
-  border: 1px solid var(--xplat-neutral-200);
-  border-radius: 0.5rem;
+  margin-top: var(--spacing-space-1);
+  padding: var(--spacing-space-4);
+  background-color: var(--semantic-surface-neutral-default);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 .lib-xplat-popup-datepicker-card {
-  padding: 1.5rem;
-  background-color: var(--xplat-white);
-  border-radius: 0.75rem;
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: var(--spacing-radius-lg);
 }
 .lib-xplat-popup-datepicker-card .popup-datepicker-content {
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-space-4);
 }
 .lib-xplat-popup-datepicker-card .popup-datepicker-footer {
   display: flex;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
 }
 
 /* src/components/Modal/modal.scss */
@@ -1427,11 +2318,12 @@
   z-index: 11;
 }
 .lib-xplat-modal.modal-box {
-  border-radius: 12px;
+  border-radius: var(--spacing-radius-lg);
   background-color: #fff;
-  padding: 24px;
-  max-width: calc(100vw - 2rem);
-  max-height: calc(100vh - 2rem);
+  padding: var(--spacing-space-6);
+  min-width: min-content;
+  max-width: calc(100vw - 32px);
+  max-height: calc(100vh - 32px);
   overflow: visible;
   transform: scale(0.9);
   opacity: 0;
@@ -1470,12 +2362,12 @@
 .lib-xplat-divider.horizontal {
   width: 100%;
   height: 1px;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-border-default);
 }
 .lib-xplat-divider.vertical {
   width: 1px;
   align-self: stretch;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-border-default);
 }
 
 /* src/components/Drawer/drawer.scss */
@@ -1496,7 +2388,7 @@
   position: fixed;
   top: 0;
   height: 100%;
-  background: var(--xplat-white);
+  background: var(--semantic-surface-neutral-default);
   box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
   display: flex;
   flex-direction: column;
@@ -1522,13 +2414,13 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  padding: var(--spacing-space-4) var(--spacing-space-5);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-drawer .drawer-title {
   font-size: 16px;
   font-weight: 600;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-drawer .close-btn {
   background: none;
@@ -1536,16 +2428,16 @@
   cursor: pointer;
   font-size: 22px;
   line-height: 1;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-icon-strong);
   padding: 0;
   transition: color 0.2s;
 }
 .lib-xplat-drawer .close-btn:hover {
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-drawer .drawer-body {
   flex: 1;
-  padding: 1.25rem;
+  padding: var(--spacing-space-5);
   overflow-y: auto;
 }
 
@@ -1561,11 +2453,11 @@
   position: absolute;
   z-index: 100;
   min-width: 160px;
-  background: var(--xplat-white);
-  border: 1px solid var(--xplat-neutral-200);
-  border-radius: 0.5rem;
+  background: var(--semantic-surface-neutral-default);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-  padding: 4px 0;
+  padding: var(--spacing-space-1) 0;
   opacity: 0;
   transform: translateY(-4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
@@ -1581,26 +2473,26 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 0.5rem 0.875rem;
+  padding: var(--spacing-space-2) 14px;
   border: none;
   background: none;
   font-size: 14px;
-  color: var(--xplat-neutral-800);
+  color: var(--semantic-text-strong);
   cursor: pointer;
   text-align: left;
   transition: background-color 0.15s;
 }
 .lib-xplat-dropdown .dropdown-item:hover:not(:disabled) {
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-dropdown .dropdown-item.danger {
-  color: var(--xplat-red-600);
+  color: var(--semantic-text-error);
 }
 .lib-xplat-dropdown .dropdown-item.danger:hover:not(:disabled) {
-  background-color: var(--xplat-red-50);
+  background-color: var(--semantic-surface-error-subtle);
 }
 .lib-xplat-dropdown .dropdown-item:disabled {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }
 
@@ -1610,31 +2502,30 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 3rem 1.5rem;
+  padding: var(--spacing-space-11) var(--spacing-space-6);
   text-align: center;
 }
 .lib-xplat-empty-state .empty-icon {
-  color: var(--xplat-neutral-300);
-  margin-bottom: 1rem;
+  color: var(--semantic-icon-disabled);
+  margin-bottom: var(--spacing-space-4);
 }
 .lib-xplat-empty-state .empty-icon svg {
-  width: 48px;
-  height: 48px;
+  font-size: 48px;
 }
 .lib-xplat-empty-state .empty-title {
   font-size: 15px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   margin: 0;
 }
 .lib-xplat-empty-state .empty-description {
   font-size: 13px;
-  color: var(--xplat-neutral-400);
-  margin: 0.375rem 0 0;
+  color: var(--semantic-text-muted);
+  margin: var(--spacing-space-2) 0 0;
   max-width: 320px;
 }
 .lib-xplat-empty-state .empty-action {
-  margin-top: 1.25rem;
+  margin-top: var(--spacing-space-5);
 }
 
 /* src/components/FileUpload/fileupload.scss */
@@ -1643,196 +2534,40 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 2rem 1.5rem;
-  border: 2px dashed var(--xplat-neutral-300);
-  border-radius: 0.5rem;
+  padding: var(--spacing-space-8) var(--spacing-space-6);
+  border: 2px dashed var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
   cursor: pointer;
   transition: border-color 0.2s, background-color 0.2s;
 }
 .lib-xplat-file-upload:hover {
-  border-color: var(--xplat-blue-400);
-  background-color: var(--xplat-blue-50);
+  border-color: var(--semantic-surface-brand-strong);
+  background-color: var(--semantic-surface-brand-subtle);
 }
 .lib-xplat-file-upload.drag-over {
-  border-color: var(--xplat-blue-500);
-  background-color: var(--xplat-blue-50);
+  border-color: var(--semantic-surface-brand-default);
+  background-color: var(--semantic-surface-brand-subtle);
 }
 .lib-xplat-file-upload input[type=file] {
   display: none;
 }
 .lib-xplat-file-upload .upload-icon {
-  color: var(--xplat-neutral-400);
-  margin-bottom: 0.75rem;
+  color: var(--semantic-icon-subtle);
+  margin-bottom: var(--spacing-space-3);
 }
 .lib-xplat-file-upload .upload-icon svg {
-  width: 32px;
-  height: 32px;
+  font-size: 32px;
 }
 .lib-xplat-file-upload .upload-label {
   font-size: 14px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   margin: 0;
 }
 .lib-xplat-file-upload .upload-description {
   font-size: 12px;
-  color: var(--xplat-neutral-400);
-  margin: 0.25rem 0 0;
-}
-
-/* src/components/Select/select.scss */
-.lib-xplat-select {
-  position: relative;
-}
-.lib-xplat-select.is-open {
-  z-index: 1;
-}
-.lib-xplat-select.sm .select-trigger {
-  min-height: 32px;
-  padding: 4px 10px;
-  font-size: 0.75rem;
-}
-.lib-xplat-select.md .select-trigger {
-  min-height: 40px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-}
-.lib-xplat-select.lg .select-trigger {
-  min-height: 48px;
-  padding: 10px 14px;
-  font-size: 1rem;
-}
-.lib-xplat-select.sm .select-content .select-item {
-  padding: 6px 10px;
-  font-size: 0.75rem;
-}
-.lib-xplat-select.lg .select-content .select-item {
-  padding: 10px 14px;
-  font-size: 1rem;
-}
-.lib-xplat-select .select-trigger {
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 8px;
-  background-color: #fff;
-  color: var(--xplat-neutral-900);
-}
-.lib-xplat-select .select-trigger:focus-visible {
-  outline: 2px solid var(--xplat-blue-500);
-  outline-offset: 2px;
-}
-.lib-xplat-select .select-trigger.disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-  background-color: var(--xplat-neutral-100);
-  border-color: var(--xplat-neutral-300);
-  color: var(--xplat-neutral-400);
-}
-.lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
-  color: var(--xplat-neutral-400);
-}
-.lib-xplat-select .select-trigger.disabled .select-trigger-icon {
-  color: var(--xplat-neutral-400);
-}
-.lib-xplat-select .select-trigger.error:not(.disabled) {
-  border-color: var(--xplat-red-500);
-}
-.lib-xplat-select .select-trigger.error:not(.disabled):focus-visible {
-  outline-color: var(--xplat-red-500);
-}
-.lib-xplat-select .select-trigger .select-trigger-value {
-  flex: 1;
-  min-width: 0;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.lib-xplat-select .select-trigger .select-trigger-value.placeholder {
-  color: var(--xplat-neutral-400);
-}
-.lib-xplat-select .select-trigger .select-trigger-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--xplat-neutral-500);
-  transition: transform 0.2s ease;
-}
-.lib-xplat-select .select-trigger .select-trigger-icon.open {
-  transform: rotate(180deg);
-}
-.lib-xplat-select .select-trigger .select-trigger-icon svg {
-  width: 20px;
-  height: 20px;
-}
-.lib-xplat-select .select-content {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  padding: 4px 0;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  cursor: default;
-  max-height: 220px;
-  overflow-y: auto;
-  opacity: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-.lib-xplat-select .select-content.bottom {
-  top: 100%;
-  margin-top: 4px;
-  margin-bottom: 0;
-  transform: translateY(-8px);
-}
-.lib-xplat-select .select-content.bottom.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-.lib-xplat-select .select-content.bottom.exit {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-.lib-xplat-select .select-content {
-}
-.lib-xplat-select .select-content.top {
-  bottom: 100%;
-  margin-bottom: 4px;
-  margin-top: 0;
-  transform: translateY(8px);
-}
-.lib-xplat-select .select-content.top.visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-.lib-xplat-select .select-content.top.exit {
-  opacity: 0;
-  transform: translateY(8px);
-}
-.lib-xplat-select .select-item {
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-  outline: none;
-}
-.lib-xplat-select .select-item:hover:not(.disabled) {
-  background-color: var(--xplat-neutral-100);
-}
-.lib-xplat-select .select-item:focus-visible:not(.disabled) {
-  background-color: var(--xplat-neutral-100);
-}
-.lib-xplat-select .select-item.disabled {
-  cursor: not-allowed;
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-muted);
+  margin: var(--spacing-space-1) 0 0;
 }
 
 /* src/components/HtmlTypeWriter/htmlTypeWriter.scss */
@@ -1854,9 +2589,9 @@
   font-size: 20px;
 }
 .lib-xplat-htmlTypewriter hr {
-  color: var(--xplat-neutral-200);
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  color: var(--semantic-border-default);
+  margin-top: var(--spacing-space-4);
+  margin-bottom: var(--spacing-space-4);
 }
 
 /* src/components/ImageSelector/imageselector.scss */
@@ -1867,19 +2602,19 @@
   height: 100%;
   flex-direction: column;
   position: relative;
-  background-color: var(--xplat-white);
-  border-radius: 0.25rem;
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: var(--spacing-radius-sm);
   overflow: hidden;
-  padding: 0.75rem;
+  padding: var(--spacing-space-3);
 }
 .lib-xplat-imageselector > input {
   display: none;
 }
 .lib-xplat-imageselector.none-value {
-  border: 1px dashed var(--xplat-neutral-500);
+  border: 1px dashed var(--semantic-border-strong);
 }
 .lib-xplat-imageselector:hover {
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-imageselector:hover > .action-bar {
   opacity: 1;
@@ -1908,18 +2643,18 @@
   cursor: pointer;
 }
 .lib-xplat-imageselector > .content .skeleton > .icon-wrapper {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-icon-subtle);
 }
 .lib-xplat-imageselector > .content .skeleton > .label {
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
-  color: var(--xplat-neutral-400);
+  margin-top: var(--spacing-space-1);
+  font-size: 14px;
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .icon-wrapper {
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-icon-strong);
 }
 .lib-xplat-imageselector > .content .skeleton:hover > .label {
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-subtle);
 }
 .lib-xplat-imageselector > .action-bar {
   position: absolute;
@@ -1929,15 +2664,15 @@
   display: flex;
   gap: 0.5em;
   font-size: 24px;
-  background-color: var(--xplat-neutral-900);
-  padding: 0.25rem 0.75rem;
+  background-color: var(--semantic-surface-neutral-strong);
+  padding: var(--spacing-space-1) var(--spacing-space-3);
   align-items: center;
   opacity: 0;
   pointer-events: none;
-  border-radius: 4px;
+  border-radius: var(--spacing-radius-sm);
 }
 .lib-xplat-imageselector > .action-bar > .icon-wrapper {
-  color: var(--xplat-white);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-imageselector .icon-wrapper {
   display: flex;
@@ -1950,76 +2685,87 @@
 .lib-xplat-pagination {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--spacing-space-1);
 }
 .lib-xplat-pagination.sm .dots {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-control-height-xs);
+  height: var(--spacing-control-height-xs);
   font-size: 12px;
 }
 .lib-xplat-pagination.sm .page-btn {
-  min-width: 24px;
-  height: 24px;
+  min-width: var(--spacing-control-height-xs);
+  height: var(--spacing-control-height-xs);
   font-size: 12px;
 }
 .lib-xplat-pagination.sm .page-btn svg {
-  width: 14px;
-  height: 14px;
+  font-size: 14px;
 }
 .lib-xplat-pagination.lg .dots {
-  width: 40px;
-  height: 40px;
+  width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-pagination.lg .page-btn {
-  min-width: 40px;
-  height: 40px;
+  min-width: var(--spacing-control-height-md);
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-pagination.lg .page-btn svg {
-  width: 20px;
-  height: 20px;
+  font-size: 20px;
 }
 .lib-xplat-pagination .dots {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
   font-size: 14px;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   user-select: none;
 }
 .lib-xplat-pagination .page-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 32px;
-  height: 32px;
-  padding: 0 6px;
+  min-width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
+  padding: 0 var(--spacing-space-2);
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--spacing-radius-md);
   background: none;
   font-size: 14px;
   cursor: pointer;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-pagination .page-btn:hover:not(:disabled):not(.active) {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-pagination .page-btn:disabled {
   cursor: not-allowed;
   opacity: 0.4;
 }
 .lib-xplat-pagination .page-btn.active {
-  color: var(--xplat-white);
+  color: var(--semantic-text-inverse);
   font-weight: 600;
-  background-color: var(--ds-color);
+}
+.lib-xplat-pagination.brand .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-pagination.success .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-pagination.error .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-pagination.warning .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-pagination.info .lib-xplat-pagination .page-btn.active {
+  background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-pagination .page-btn svg {
-  width: 16px;
-  height: 16px;
+  font-size: 16px;
 }
 
 /* src/components/PopOver/popOver.scss */
@@ -2035,7 +2781,7 @@
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
   background: white;
-  border-radius: 0.5rem;
+  border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 10;
   opacity: 0;
@@ -2043,11 +2789,11 @@
 }
 .lib-xplat-pop-over > .content-wrap.top {
   transform-origin: bottom;
-  margin-bottom: 0.5rem;
+  margin-bottom: var(--spacing-space-2);
 }
 .lib-xplat-pop-over > .content-wrap.bottom {
   transform-origin: top;
-  margin-top: 0.5rem;
+  margin-top: var(--spacing-space-2);
 }
 .lib-xplat-pop-over > .content-wrap.visible {
   opacity: 1;
@@ -2058,34 +2804,48 @@
 .lib-xplat-progress {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--spacing-space-2);
   width: 100%;
 }
 .lib-xplat-progress .track {
   flex: 1;
-  background-color: var(--xplat-neutral-200);
-  border-radius: 10rem;
+  background-color: var(--semantic-surface-neutral-disabled);
+  border-radius: var(--spacing-radius-full);
   overflow: hidden;
 }
 .lib-xplat-progress.sm .track {
-  height: 4px;
+  height: var(--spacing-space-1);
 }
 .lib-xplat-progress.md .track {
-  height: 8px;
+  height: var(--spacing-space-2);
 }
 .lib-xplat-progress.lg .track {
-  height: 12px;
+  height: var(--spacing-space-3);
 }
 .lib-xplat-progress .bar {
   height: 100%;
-  border-radius: 10rem;
+  border-radius: var(--spacing-radius-full);
   transition: width 0.3s ease;
-  background-color: var(--ds-color);
+}
+.lib-xplat-progress.brand .bar {
+  background-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-progress.success .bar {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-progress.error .bar {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-progress.warning .bar {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-progress.info .bar {
+  background-color: var(--semantic-surface-info-default);
 }
 .lib-xplat-progress .label {
   font-size: 12px;
   font-weight: 500;
-  color: var(--xplat-neutral-600);
+  color: var(--semantic-text-subtle);
   min-width: 36px;
   text-align: right;
 }
@@ -2094,7 +2854,7 @@
 .lib-xplat-radio {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
   user-select: none;
   cursor: pointer;
 }
@@ -2102,76 +2862,269 @@
   display: none;
 }
 .lib-xplat-radio.sm > .circle {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
   border-width: 1.5px;
 }
 .lib-xplat-radio.sm > .circle > .inner-circle {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
 }
 .lib-xplat-radio.sm > span {
-  font-size: 0.875rem;
+  font-size: 14px;
 }
 .lib-xplat-radio.md > .circle {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--spacing-space-5);
+  height: var(--spacing-space-5);
 }
 .lib-xplat-radio.lg > .circle {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-radio.lg > .circle > .inner-circle {
-  width: 1rem;
-  height: 1rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-radio.lg > span {
-  font-size: 1.125rem;
+  font-size: 18px;
 }
 .lib-xplat-radio > .circle {
-  border: 2px solid var(--xplat-neutral-400);
+  border: 2px solid var(--semantic-border-strong);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
   transition: border-color 0.12s ease-out, background-color 0.12s ease-out;
 }
-.lib-xplat-radio:hover .lib-xplat-radio > .circle:not(.checked) {
-  border-color: var(--xplat-neutral-600);
-  background-color: var(--xplat-neutral-100);
+.lib-xplat-radio > .circle > .inner-circle {
+  width: var(--spacing-space-3);
+  height: var(--spacing-space-3);
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: 50%;
 }
-.lib-xplat-radio > .circle.checked {
-  background-color: var(--ds-color);
-  border-color: var(--ds-color);
+.lib-xplat-radio:hover > .circle:not(.checked) {
+  border-color: var(--semantic-icon-strong);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
-.lib-xplat-radio > .circle.checked:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-  border-color: color-mix(in srgb, var(--ds-color), black 15%);
+.lib-xplat-radio.brand > .circle.checked {
+  background-color: var(--semantic-surface-brand-default);
+  border-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-radio > .circle > .inner-circle {
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: white;
-  border-radius: 50%;
+.lib-xplat-radio.success > .circle.checked {
+  background-color: var(--semantic-surface-success-default);
+  border-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-radio.error > .circle.checked {
+  background-color: var(--semantic-surface-error-default);
+  border-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-radio.warning > .circle.checked {
+  background-color: var(--semantic-surface-warning-default);
+  border-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-radio.info > .circle.checked {
+  background-color: var(--semantic-surface-info-default);
+  border-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-radio:hover.brand > .circle.checked {
+  background-color: var(--semantic-surface-brand-strong);
+  border-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-radio:hover.success > .circle.checked {
+  background-color: var(--semantic-surface-success-strong);
+  border-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-radio:hover.error > .circle.checked {
+  background-color: var(--semantic-surface-error-strong);
+  border-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-radio:hover.warning > .circle.checked {
+  background-color: var(--semantic-surface-warning-strong);
+  border-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-radio:hover.info > .circle.checked {
+  background-color: var(--semantic-surface-info-strong);
+  border-color: var(--semantic-surface-info-strong);
+}
+
+/* src/components/Select/select.scss */
+.lib-xplat-select {
+  position: relative;
+}
+.lib-xplat-select.is-open {
+  z-index: 1;
+}
+.lib-xplat-select.sm .select-trigger {
+  min-height: var(--spacing-control-height-sm);
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  font-size: 12px;
+}
+.lib-xplat-select.md .select-trigger {
+  min-height: var(--spacing-control-height-md);
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
+}
+.lib-xplat-select.lg .select-trigger {
+  min-height: var(--spacing-control-height-lg);
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-size: 16px;
+}
+.lib-xplat-select.sm .select-content .select-item {
+  padding: var(--spacing-space-2) var(--spacing-space-2);
+  font-size: 12px;
+}
+.lib-xplat-select.lg .select-content .select-item {
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  font-size: 16px;
+}
+.lib-xplat-select .select-trigger {
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-space-2);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
+  transition: border-color 0.15s;
+}
+.lib-xplat-select .select-trigger:hover:not(.disabled) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-select .select-trigger:active:not(.disabled) {
+  border-color: var(--semantic-interaction-focus-ring);
+}
+.lib-xplat-select .select-trigger:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-select .select-trigger.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: var(--semantic-surface-neutral-disabled);
+  border-color: var(--semantic-border-default);
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-select .select-trigger.disabled .select-trigger-value.placeholder {
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-select .select-trigger.disabled .select-trigger-icon {
+  color: var(--semantic-icon-disabled);
+}
+.lib-xplat-select .select-trigger.error:not(.disabled) {
+  border-color: var(--semantic-border-error);
+}
+.lib-xplat-select .select-trigger.error:not(.disabled):focus-visible {
+  outline-color: var(--semantic-border-error);
+}
+.lib-xplat-select .select-trigger .select-trigger-value {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lib-xplat-select .select-trigger .select-trigger-value.placeholder {
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-select .select-trigger .select-trigger-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--semantic-icon-subtle);
+  transition: transform 0.2s ease;
+}
+.lib-xplat-select .select-trigger .select-trigger-icon.open {
+  transform: rotate(180deg);
+}
+.lib-xplat-select .select-trigger .select-trigger-icon svg {
+  font-size: 20px;
+}
+.lib-xplat-select .select-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: var(--spacing-space-1) 0;
+  border-radius: var(--spacing-radius-md);
+  background-color: var(--semantic-surface-neutral-default);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  cursor: default;
+  max-height: 220px;
+  overflow-y: auto;
+  opacity: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+.lib-xplat-select .select-content.bottom {
+  top: 100%;
+  margin-top: var(--spacing-space-1);
+  margin-bottom: 0;
+  transform: translateY(-8px);
+}
+.lib-xplat-select .select-content.bottom.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.lib-xplat-select .select-content.bottom.exit {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+.lib-xplat-select .select-content {
+}
+.lib-xplat-select .select-content.top {
+  bottom: 100%;
+  margin-bottom: var(--spacing-space-1);
+  margin-top: 0;
+  transform: translateY(8px);
+}
+.lib-xplat-select .select-content.top.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+.lib-xplat-select .select-content.top.exit {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.lib-xplat-select .select-item {
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  outline: none;
+}
+.lib-xplat-select .select-item:hover:not(.disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-select .select-item:focus-visible:not(.disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-select .select-item.disabled {
+  cursor: not-allowed;
+  color: var(--semantic-text-disabled);
 }
 
 /* src/components/Skeleton/skeleton.scss */
 .lib-xplat-skeleton {
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
   animation: lib-xplat-skeleton-pulse 1.5s ease-in-out infinite;
 }
 .lib-xplat-skeleton.text {
   width: 100%;
   height: 1em;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
 }
 .lib-xplat-skeleton.circular {
   border-radius: 50%;
 }
 .lib-xplat-skeleton.rectangular {
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
 }
 @keyframes lib-xplat-skeleton-pulse {
   0% {
@@ -2192,16 +3145,16 @@
   justify-content: center;
 }
 .lib-xplat-spinner.sm {
-  width: 16px;
-  height: 16px;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-spinner.md {
-  width: 24px;
-  height: 24px;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-spinner.lg {
-  width: 36px;
-  height: 36px;
+  width: var(--spacing-space-9);
+  height: var(--spacing-space-9);
 }
 .lib-xplat-spinner svg {
   width: 100%;
@@ -2209,12 +3162,26 @@
   animation: lib-xplat-spin 0.8s linear infinite;
 }
 .lib-xplat-spinner .track {
-  stroke: var(--xplat-neutral-200);
+  stroke: var(--semantic-border-default);
 }
 .lib-xplat-spinner .indicator {
   stroke-dasharray: 42;
   stroke-dashoffset: 28;
-  stroke: var(--ds-color);
+}
+.lib-xplat-spinner.brand .indicator {
+  stroke: var(--semantic-surface-brand-default);
+}
+.lib-xplat-spinner.success .indicator {
+  stroke: var(--semantic-surface-success-default);
+}
+.lib-xplat-spinner.error .indicator {
+  stroke: var(--semantic-surface-error-default);
+}
+.lib-xplat-spinner.warning .indicator {
+  stroke: var(--semantic-surface-warning-default);
+}
+.lib-xplat-spinner.info .indicator {
+  stroke: var(--semantic-surface-info-default);
 }
 @keyframes lib-xplat-spin {
   from {
@@ -2246,8 +3213,8 @@
   position: relative;
 }
 .lib-xplat-steps .step-circle {
-  width: 32px;
-  height: 32px;
+  width: var(--spacing-control-height-sm);
+  height: var(--spacing-control-height-sm);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -2259,8 +3226,7 @@
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-steps .step-circle svg {
-  width: 16px;
-  height: 16px;
+  font-size: 16px;
 }
 .lib-xplat-steps .step-line {
   flex: 1;
@@ -2271,45 +3237,101 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 8px;
+  margin-top: var(--spacing-space-2);
   text-align: center;
 }
 .lib-xplat-steps .step-title {
   font-size: 13px;
   font-weight: 500;
-  color: var(--xplat-neutral-900);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-steps .step-description {
   font-size: 12px;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
   margin-top: 2px;
 }
-.lib-xplat-steps .step-item.completed .step-circle {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+.lib-xplat-steps.brand .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps .step-item.completed .step-line {
-  background-color: var(--ds-color);
+.lib-xplat-steps.brand .step-item.completed .step-line {
+  background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps .step-item.active .step-circle {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+.lib-xplat-steps.brand .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
-.lib-xplat-steps .step-item.active .step-line {
-  background-color: var(--xplat-neutral-200);
+.lib-xplat-steps.brand .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.success .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-steps.success .step-item.completed .step-line {
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-steps.success .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-steps.success .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.error .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-steps.error .step-item.completed .step-line {
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-steps.error .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-error-default);
+}
+.lib-xplat-steps.error .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.warning .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-steps.warning .step-item.completed .step-line {
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-steps.warning .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-steps.warning .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
+}
+.lib-xplat-steps.info .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-steps.info .step-item.completed .step-line {
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-steps.info .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-steps.info .step-item.active .step-line {
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-steps .step-item.pending .step-circle {
-  background-color: var(--xplat-neutral-200);
-  color: var(--xplat-neutral-500);
+  background-color: var(--semantic-surface-neutral-disabled);
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-steps .step-item.pending .step-line {
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
 }
 .lib-xplat-steps .step-item.pending .step-title {
-  color: var(--xplat-neutral-400);
+  color: var(--semantic-text-disabled);
 }
 .lib-xplat-steps .step-item.pending .step-description {
-  color: var(--xplat-neutral-300);
+  color: var(--semantic-text-disabled);
 }
 
 /* src/components/Swiper/swiper.scss */
@@ -2338,7 +3360,7 @@
   overflow: hidden;
 }
 .lib-xplat-swiper__progress {
-  margin-top: 1rem;
+  margin-top: var(--spacing-space-4);
   display: flex;
   justify-content: center;
 }
@@ -2347,7 +3369,7 @@
   width: 100%;
   max-width: 580px;
   height: 2px;
-  background-color: var(--xplat-neutral-200);
+  background-color: var(--semantic-surface-neutral-disabled);
   border-radius: 1px;
 }
 .lib-xplat-swiper__progress-fill {
@@ -2355,7 +3377,7 @@
   top: 0;
   left: 0;
   height: 100%;
-  background-color: var(--xplat-neutral-500);
+  background-color: var(--semantic-text-muted);
   border-radius: 1px;
   transition-property: width;
   transition-timing-function: ease;
@@ -2363,68 +3385,68 @@
 .lib-xplat-swiper__dots {
   display: flex;
   justify-content: center;
-  gap: 6px;
-  margin-top: 1rem;
+  gap: var(--spacing-space-2);
+  margin-top: var(--spacing-space-4);
 }
 .lib-xplat-swiper__dot {
-  width: 8px;
-  height: 8px;
+  width: var(--spacing-space-2);
+  height: var(--spacing-space-2);
   border-radius: 50%;
   border: none;
   padding: 0;
   cursor: pointer;
-  background-color: var(--xplat-neutral-300);
+  background-color: var(--semantic-border-default);
   transition: background-color 0.2s;
 }
 .lib-xplat-swiper__dot.active {
-  background-color: var(--xplat-neutral-700);
+  background-color: var(--semantic-text-subtle);
 }
 .lib-xplat-swiper__dot:hover:not(.active) {
-  background-color: var(--xplat-neutral-400);
+  background-color: var(--semantic-text-disabled);
 }
 
 /* src/components/Switch/switch.scss */
 .lib-xplat-switch {
   position: relative;
-  border-radius: 9999px;
+  border-radius: var(--spacing-radius-full);
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
   border: 1px solid transparent;
-  background-color: var(--xplat-neutral-300);
-  border-color: var(--xplat-neutral-300);
+  background-color: var(--semantic-border-default);
+  border-color: var(--semantic-border-default);
 }
 .lib-xplat-switch.sm {
-  width: 2rem;
-  height: 1.125rem;
+  width: var(--spacing-space-8);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-switch.sm > .knob {
-  width: 0.875rem;
-  height: 0.875rem;
+  width: var(--spacing-space-4);
+  height: var(--spacing-space-4);
 }
 .lib-xplat-switch.sm > .knob.checked {
-  transform: translateY(-50%) translateX(0.875rem);
+  transform: translateY(-50%) translateX(14px);
 }
 .lib-xplat-switch.md {
-  width: 3rem;
-  height: 1.625rem;
+  width: var(--spacing-space-11);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-switch.md > .knob {
-  width: 1.375rem;
-  height: 1.375rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-switch.md > .knob.checked {
-  transform: translateY(-50%) translateX(1.375rem);
+  transform: translateY(-50%) translateX(22px);
 }
 .lib-xplat-switch.lg {
-  width: 3.5rem;
-  height: 1.875rem;
+  width: var(--spacing-space-11);
+  height: var(--spacing-space-8);
 }
 .lib-xplat-switch.lg > .knob {
-  width: 1.625rem;
-  height: 1.625rem;
+  width: var(--spacing-space-6);
+  height: var(--spacing-space-6);
 }
 .lib-xplat-switch.lg > .knob.checked {
-  transform: translateY(-50%) translateX(1.625rem);
+  transform: translateY(-50%) translateX(26px);
 }
 .lib-xplat-switch.disabled {
   opacity: 0.5;
@@ -2435,20 +3457,52 @@
   pointer-events: none;
   cursor: wait;
 }
-.lib-xplat-switch.checked {
-  background-color: var(--ds-color);
-  border-color: var(--ds-color);
+.lib-xplat-switch.brand.checked {
+  background-color: var(--semantic-surface-brand-default);
+  border-color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-switch.brand.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-brand-strong);
+  border-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-switch.success.checked {
+  background-color: var(--semantic-surface-success-default);
+  border-color: var(--semantic-surface-success-default);
+}
+.lib-xplat-switch.success.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-success-strong);
+  border-color: var(--semantic-surface-success-strong);
+}
+.lib-xplat-switch.error.checked {
+  background-color: var(--semantic-surface-error-default);
+  border-color: var(--semantic-surface-error-default);
 }
-.lib-xplat-switch.checked:hover:not(.disabled):not(.animating) {
-  background-color: color-mix(in srgb, var(--ds-color), black 15%);
-  border-color: color-mix(in srgb, var(--ds-color), black 15%);
+.lib-xplat-switch.error.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-error-strong);
+  border-color: var(--semantic-surface-error-strong);
+}
+.lib-xplat-switch.warning.checked {
+  background-color: var(--semantic-surface-warning-default);
+  border-color: var(--semantic-surface-warning-default);
+}
+.lib-xplat-switch.warning.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-warning-strong);
+  border-color: var(--semantic-surface-warning-strong);
+}
+.lib-xplat-switch.info.checked {
+  background-color: var(--semantic-surface-info-default);
+  border-color: var(--semantic-surface-info-default);
+}
+.lib-xplat-switch.info.checked:hover:not(.disabled):not(.animating) {
+  background-color: var(--semantic-surface-info-strong);
+  border-color: var(--semantic-surface-info-strong);
 }
 .lib-xplat-switch > .knob {
   position: absolute;
   top: 50%;
   left: 0;
-  background-color: var(--xplat-white);
-  border-radius: 9999px;
+  background-color: var(--semantic-surface-neutral-default);
+  border-radius: var(--spacing-radius-full);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translateY(-50%);
   transition: transform 0.25s;
@@ -2463,45 +3517,45 @@
   align-items: center;
 }
 .lib-xplat-tab.sm {
-  height: 2rem;
+  height: var(--spacing-control-height-sm);
   font-size: 14px;
 }
 .lib-xplat-tab.md {
-  height: 2.5rem;
+  height: var(--spacing-control-height-md);
   font-size: 16px;
 }
 .lib-xplat-tab.lg {
-  height: 3rem;
+  height: var(--spacing-control-height-lg);
   font-size: 18px;
 }
 .lib-xplat-tab.type-default {
-  background-color: var(--xplat-neutral-500);
-  border-radius: 0.5rem;
+  background-color: var(--semantic-surface-neutral-strong);
+  border-radius: var(--spacing-radius-md);
 }
 .lib-xplat-tab.type-default > .tab-item {
-  padding: 0.25rem 1.5rem;
+  padding: var(--spacing-space-1) var(--spacing-space-6);
   height: 100%;
   display: flex;
   align-items: center;
   cursor: pointer;
-  border-right: 1px solid var(--xplat-neutral-400);
-  color: var(--xplat-white);
+  border-right: 1px solid var(--semantic-border-strong);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-tab.type-default > .tab-item:last-child {
   border-right: none;
 }
 .lib-xplat-tab.type-default > .tab-item.active {
-  background-color: var(--xplat-blue-500);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-tab.type-toggle {
-  border-bottom: 1px solid var(--xplat-neutral-200);
-  gap: 1.5rem;
+  border-bottom: 1px solid var(--semantic-border-default);
+  gap: var(--spacing-space-6);
 }
 .lib-xplat-tab.type-toggle > .tab-item {
   position: relative;
   display: flex;
   align-items: center;
-  padding: 0 0.75rem;
+  padding: 0 var(--spacing-space-3);
   font-size: 16px;
   font-weight: 500;
   height: 100%;
@@ -2509,10 +3563,10 @@
   border: none;
   cursor: pointer;
   transition: color 0.2s;
-  color: var(--xplat-neutral-500);
+  color: var(--semantic-text-muted);
 }
 .lib-xplat-tab.type-toggle > .tab-item.active {
-  color: var(--xplat-blue-600);
+  color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-tab.type-toggle > .tab-toggle-underline {
   position: absolute;
@@ -2520,7 +3574,7 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background-color: var(--xplat-blue-600);
+  background-color: var(--semantic-surface-brand-default);
   transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
   will-change: left, width;
 }
@@ -2541,54 +3595,54 @@
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.table-bottom-border,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.table-bottom-border {
-  border-bottom: 1px solid var(--xplat-neutral-200);
+  border-bottom: 1px solid var(--semantic-border-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary {
-  background-color: var(--ds-color);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > th {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary > th.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary > th.cell-hover:hover {
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+  background-color: var(--semantic-surface-brand-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.primary.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.primary.hover:hover > th {
-  color: var(--xplat-white);
-  background-color: color-mix(in srgb, var(--ds-color), black 12%);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-brand-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary {
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th {
-  background-color: var(--xplat-white);
-  color: var(--ds-color);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary > th.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > td.cell-hover:hover,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary > th.cell-hover:hover {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.secondary.hover:hover > th,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.secondary.hover:hover > th {
-  background-color: color-mix(in srgb, var(--ds-color) 12%, white);
+  background-color: var(--semantic-surface-neutral-subtle);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr.clickable,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr.clickable {
@@ -2599,7 +3653,7 @@
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td,
 .lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th {
   min-width: 80px;
-  padding: 0.5rem;
+  padding: var(--spacing-space-2);
   vertical-align: middle;
   transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
@@ -2652,8 +3706,8 @@
   content: "";
   position: absolute;
   top: 0;
-  right: -10px;
-  width: 10px;
+  right: calc(var(--spacing-space-2) * -1);
+  width: var(--spacing-space-2);
   height: 100%;
   background:
     linear-gradient(
@@ -2667,29 +3721,73 @@
 .lib-xplat-tag {
   display: inline-flex;
   align-items: center;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   line-height: 1.5;
   border: 1px solid;
 }
 .lib-xplat-tag.sm {
-  gap: 3px;
-  padding: 0.0625rem 0.375rem;
+  gap: var(--spacing-space-1);
+  padding: 1px var(--spacing-space-2);
   font-size: 11px;
 }
 .lib-xplat-tag.md {
-  gap: 4px;
-  padding: 0.125rem 0.5rem;
+  gap: var(--spacing-space-1);
+  padding: 2px var(--spacing-space-2);
   font-size: 12px;
 }
 .lib-xplat-tag.lg {
-  gap: 5px;
-  padding: 0.25rem 0.625rem;
+  gap: var(--spacing-space-1);
+  padding: var(--spacing-space-1) var(--spacing-space-2);
   font-size: 14px;
 }
-.lib-xplat-tag {
-  color: var(--ds-color);
-  border-color: var(--ds-color);
-  background-color: color-mix(in srgb, var(--ds-color) 8%, white);
+.lib-xplat-tag.neutral {
+  color: var(--semantic-text-muted);
+  border-color: var(--semantic-border-default);
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-tag.categorical.cat-1 {
+  color: var(--semantic-categorical-1-text);
+  background-color: var(--semantic-categorical-1-bg);
+  border-color: var(--semantic-categorical-1-area);
+}
+.lib-xplat-tag.categorical.cat-2 {
+  color: var(--semantic-categorical-2-text);
+  background-color: var(--semantic-categorical-2-bg);
+  border-color: var(--semantic-categorical-2-area);
+}
+.lib-xplat-tag.categorical.cat-3 {
+  color: var(--semantic-categorical-3-text);
+  background-color: var(--semantic-categorical-3-bg);
+  border-color: var(--semantic-categorical-3-area);
+}
+.lib-xplat-tag.categorical.cat-4 {
+  color: var(--semantic-categorical-4-text);
+  background-color: var(--semantic-categorical-4-bg);
+  border-color: var(--semantic-categorical-4-area);
+}
+.lib-xplat-tag.categorical.cat-5 {
+  color: var(--semantic-categorical-5-text);
+  background-color: var(--semantic-categorical-5-bg);
+  border-color: var(--semantic-categorical-5-area);
+}
+.lib-xplat-tag.categorical.cat-6 {
+  color: var(--semantic-categorical-6-text);
+  background-color: var(--semantic-categorical-6-bg);
+  border-color: var(--semantic-categorical-6-area);
+}
+.lib-xplat-tag.categorical.cat-7 {
+  color: var(--semantic-categorical-7-text);
+  background-color: var(--semantic-categorical-7-bg);
+  border-color: var(--semantic-categorical-7-area);
+}
+.lib-xplat-tag.categorical.cat-8 {
+  color: var(--semantic-categorical-8-text);
+  background-color: var(--semantic-categorical-8-bg);
+  border-color: var(--semantic-categorical-8-area);
+}
+.lib-xplat-tag.disabled {
+  opacity: 0.5;
+  pointer-events: none;
 }
 .lib-xplat-tag .tag-label {
   white-space: nowrap;
@@ -2710,46 +3808,54 @@
   opacity: 1;
 }
 .lib-xplat-tag.sm .tag-close svg {
-  width: 10px;
-  height: 10px;
+  font-size: 10px;
 }
 .lib-xplat-tag.md .tag-close svg {
-  width: 12px;
-  height: 12px;
+  font-size: 12px;
 }
 .lib-xplat-tag.lg .tag-close svg {
-  width: 14px;
-  height: 14px;
+  font-size: 14px;
 }
 
 /* src/components/TextArea/textArea.scss */
 .lib-xplat-textarea-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--spacing-space-2);
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea {
   display: flex;
   align-items: center;
-  border: 1px solid var(--xplat-neutral-300);
-  border-radius: 0.5rem;
-  min-height: 2.5rem;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  min-height: var(--spacing-control-height-md);
   overflow: hidden;
-  background-color: var(--xplat-white);
+  background-color: var(--semantic-surface-neutral-default);
   width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
-  background-color: var(--xplat-neutral-100);
+  background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
   border: none;
   outline: none;
   flex: 1;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-4);
   width: 100%;
-  color: var(--xplat-neutral-700);
+  color: var(--semantic-text-subtle);
   resize: none;
   height: 1.5em;
 }
@@ -2767,41 +3873,41 @@
   pointer-events: none;
 }
 .lib-xplat-toast-container.top {
-  top: 16px;
+  top: var(--spacing-space-4);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 .lib-xplat-toast-container.bottom {
-  bottom: 16px;
+  bottom: var(--spacing-space-4);
   left: 50%;
   transform: translateX(-50%);
   align-items: center;
 }
 .lib-xplat-toast-container.top-left {
-  top: 16px;
-  left: 16px;
+  top: var(--spacing-space-4);
+  left: var(--spacing-space-4);
   align-items: flex-start;
 }
 .lib-xplat-toast-container.top-right {
-  top: 16px;
-  right: 16px;
+  top: var(--spacing-space-4);
+  right: var(--spacing-space-4);
   align-items: flex-end;
 }
 .lib-xplat-toast-container.bottom-left {
-  bottom: 16px;
-  left: 16px;
+  bottom: var(--spacing-space-4);
+  left: var(--spacing-space-4);
   align-items: flex-start;
 }
 .lib-xplat-toast-container.bottom-right {
-  bottom: 16px;
-  right: 16px;
+  bottom: var(--spacing-space-4);
+  right: var(--spacing-space-4);
   align-items: flex-end;
 }
 .lib-xplat-toast-wrapper {
   overflow: hidden;
   transition: max-height 0.3s ease, margin-bottom 0.3s ease;
-  margin-bottom: 8px;
+  margin-bottom: var(--spacing-space-2);
 }
 .lib-xplat-toast-wrapper.exit {
   margin-bottom: 0;
@@ -2809,9 +3915,9 @@
 .lib-xplat-toast {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+  gap: var(--spacing-space-2);
+  padding: var(--spacing-space-3) var(--spacing-space-4);
+  border-radius: var(--spacing-radius-md);
   font-size: 14px;
   line-height: 1.5;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
@@ -2843,20 +3949,20 @@
   opacity: 1;
 }
 .lib-xplat-toast.info {
-  background-color: var(--xplat-lightblue-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-info-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.success {
-  background-color: var(--xplat-green-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-success-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.warning {
-  background-color: var(--xplat-yellow-500);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-warning-default);
+  color: var(--semantic-text-inverse);
 }
 .lib-xplat-toast.error {
-  background-color: var(--xplat-red-600);
-  color: var(--xplat-white);
+  background-color: var(--semantic-surface-error-default);
+  color: var(--semantic-text-inverse);
 }
 @keyframes lib-xplat-toast-enter {
   from {
@@ -2884,20 +3990,20 @@
   left: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   white-space: nowrap;
-  border-radius: 0.25rem;
-  padding: 6px 10px;
+  border-radius: var(--spacing-radius-sm);
+  padding: var(--spacing-space-2) var(--spacing-space-2);
   opacity: 0;
   pointer-events: none;
   bottom: 100%;
   transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .lib-xplat-tooltip > .tooltip-wrapper.primary {
-  color: var(--xplat-white);
-  background-color: var(--ds-color);
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-neutral-strong);
 }
 .lib-xplat-tooltip > .tooltip-wrapper.secondary {
-  background-color: var(--xplat-white);
-  color: var(--ds-color);
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-text-strong);
 }
 .lib-xplat-tooltip.tooltip-bottom > .tooltip-wrapper {
   top: 100%;
@@ -2920,9 +4026,9 @@
 .lib-xplat-video {
   position: relative;
   width: 100%;
-  border-radius: 0.25rem;
+  border-radius: var(--spacing-radius-sm);
   overflow: hidden;
-  background-color: var(--xplat-neutral-900);
+  background-color: var(--semantic-surface-neutral-strong);
 }
 .lib-xplat-video > video {
   display: block;
@@ -2948,7 +4054,7 @@
   background: transparent;
   cursor: pointer;
   padding: 0;
-  color: var(--xplat-white);
+  color: var(--semantic-icon-inverse);
   transition: opacity 0.2s ease, background-color 0.2s ease;
 }
 .lib-xplat-video.custom-overlay > .play-overlay::before {
@@ -2964,7 +4070,7 @@
   opacity: 1;
 }
 .lib-xplat-video.custom-overlay > .play-overlay:focus-visible {
-  outline: 2px solid var(--xplat-blue-500);
+  outline: 2px solid var(--semantic-interaction-focus-ring);
   outline-offset: 2px;
 }
 .lib-xplat-video.custom-overlay > .play-overlay > .play-icon {
@@ -2973,7 +4079,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 4rem;
+  font-size: 64px;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
 }
 .lib-xplat-video.custom-overlay > .play-overlay.is-playing {