diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx
index 9d343228..c4aea05b 100644
--- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx
+++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx
@@ -94,7 +94,7 @@ export const Content = ({ data }: { data: IProps }) => {
 
   const breadcrumbs = [
     {
-      label: 'Assam',
+      label: <Icon source={Icons.home} />,
       href: '/',
     },
     {
@@ -118,7 +118,7 @@ export const Content = ({ data }: { data: IProps }) => {
         backUrl={`/${data.district}/${data.department}`}
       />
 
-      <div className="mt-4">
+      <div className="mt-4 px-2 md:container py-1 lg:py-2">
         <div className="flex gap-4 flex-wrap justify-start md:flex-nowrap">
           <div className="flex">
             <Image
diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/page.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/page.tsx
index 49da989e..8b56297a 100644
--- a/examples/district/app/[locale]/[district]/[department]/[scheme]/page.tsx
+++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/page.tsx
@@ -36,9 +36,5 @@ export default async function Home({
     chartData: getSchemeObject(chartData[params.district]).indicators,
   };
 
-  return (
-    <div className="px-2 md:container py-1 lg:py-2">
-      <Content data={meta} />
-    </div>
-  );
+  return <Content data={meta} />;
 }
diff --git a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx
index a0346713..4aea24ba 100644
--- a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx
+++ b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx
@@ -42,7 +42,7 @@ export function Content({ data }: { data: IProps }) {
 
   const breadcrumbs = [
     {
-      label: 'Assam',
+      label: <Icon source={Icons.home} />,
       href: '/',
     },
     {
@@ -58,65 +58,67 @@ export function Content({ data }: { data: IProps }) {
     <>
       <BreadCrumb backUrl={`/${data.district}`} crumbs={breadcrumbs} />
 
-      <Text variant="heading3xl" as="h1" color="subdued" className="mt-7">
-        {departmentData.deptTitle}
-      </Text>
+      <div div className="container py-1 lg:py-2">
+        <Text variant="heading3xl" as="h1" color="subdued" className="mt-7">
+          {departmentData.deptTitle}
+        </Text>
 
-      <div className="mt-6 bg-surfaceDefault rounded-05 shadow-elementCard">
-        <Collapsible defaultOpen>
-          <CollapsibleTrigger className={styles.CollapseTrigger}>
-            <Text variant="headingLg" as="h3">
-              {departmentData.collapsible.title}
+        <div className="mt-6 bg-surfaceDefault rounded-05 shadow-elementCard">
+          <Collapsible defaultOpen>
+            <CollapsibleTrigger className={styles.CollapseTrigger}>
+              <Text variant="headingLg" as="h3">
+                {departmentData.collapsible.title}
+              </Text>
+              <Icon source={Icons.down} />
+            </CollapsibleTrigger>
+
+            <CollapsibleContent className="pb-4 px-6">
+              <Separator />
+              <div className="mt-4 flex flex-col gap-3">
+                {departmentData.collapsible.content.map((item) => (
+                  <Text key={item}>{item}</Text>
+                ))}
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+
+        {departmentData.highlights && (
+          <div className="mt-6">
+            <Text variant="headingSmSpaced" color="subdued" as="h2">
+              {departmentData.highlights.title}
             </Text>
-            <Icon source={Icons.down} />
-          </CollapsibleTrigger>
 
-          <CollapsibleContent className="pb-4 px-6">
-            <Separator />
-            <div className="mt-4 flex flex-col gap-3">
-              {departmentData.collapsible.content.map((item) => (
-                <Text key={item}>{item}</Text>
+            <div className="mt-3 flex gap-4 flex-wrap">
+              {departmentData.highlights.cards.map((card, index) => (
+                <ContentCard
+                  key={card.label + index}
+                  value={card.value}
+                  label={card.label}
+                  color={card.color}
+                />
               ))}
             </div>
-          </CollapsibleContent>
-        </Collapsible>
-      </div>
-
-      {departmentData.highlights && (
-        <div className="mt-6">
-          <Text variant="headingSmSpaced" color="subdued" as="h2">
-            {departmentData.highlights.title}
-          </Text>
+          </div>
+        )}
 
-          <div className="mt-3 flex gap-4 flex-wrap">
-            {departmentData.highlights.cards.map((card, index) => (
-              <ContentCard
-                key={card.label + index}
-                value={card.value}
-                label={card.label}
-                color={card.color}
+        <div className="mt-8">
+          <div className="flex gap-5 items-center justify-between flex-wrap">
+            <Text variant="headingLg" as="h3">
+              {departmentData.listTitle}
+            </Text>
+            <Search />
+          </div>
+          <Separator className="mt-3 mb-4" />
+          <div className="grid gap-4 lg:grid-cols-2">
+            {departmentData.list.map((item) => (
+              <SchemeCard
+                data={{ ...item, departmentHref: data.department }}
+                key={item.label}
               />
             ))}
           </div>
         </div>
-      )}
-
-      <div className="mt-8">
-        <div className="flex gap-5 items-center justify-between flex-wrap">
-          <Text variant="headingLg" as="h3">
-            {departmentData.listTitle}
-          </Text>
-          <Search />
-        </div>
-        <Separator className="mt-3 mb-4" />
-        <div className="grid gap-4 lg:grid-cols-2">
-          {departmentData.list.map((item) => (
-            <SchemeCard
-              data={{ ...item, departmentHref: data.department }}
-              key={item.label}
-            />
-          ))}
-        </div>
       </div>
     </>
   );
diff --git a/examples/district/app/[locale]/[district]/[department]/page.tsx b/examples/district/app/[locale]/[district]/[department]/page.tsx
index 8d340245..746ff543 100644
--- a/examples/district/app/[locale]/[district]/[department]/page.tsx
+++ b/examples/district/app/[locale]/[district]/[department]/page.tsx
@@ -22,9 +22,5 @@ export default async function Home({
     departmentData: districtObj['depts'][params.department],
   };
 
-  return (
-    <div className="container py-1 lg:py-2">
-      <Content data={meta} />
-    </div>
-  );
+  return <Content data={meta} />;
 }
diff --git a/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx b/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx
index f69f4f32..1766d315 100644
--- a/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx
+++ b/examples/district/app/[locale]/[district]/components/dashboard-layout.tsx
@@ -25,7 +25,7 @@ export function DashboardLayout({
     >
       <IconButton
         className={cn(
-          'hidden md:block absolute left-[220px] top-4 p-2 z-2 rounded-full shadow-insetBasic bg-lightmodePureWhite hover:bg-lightmodeIndigoSolid3',
+          'hidden md:block absolute left-[220px] top-4 p-2 z-2 rounded-full shadow-insetBasic bg-basePureWhite hover:bg-baseIndigoSolid3',
           styles.CollapseBtn,
           isCollapsed && styles.Collapsed
         )}
@@ -40,9 +40,9 @@ export function DashboardLayout({
         items={dashboardConfig.sidebarNav}
       />
 
-      <div className="md:hidden basis-2 z-1">
+      {/* <div className="md:hidden basis-2 z-1">
         <MobileDashboardNav items={dashboardConfig.sidebarNav} />
-      </div>
+      </div> */}
       <main className={cn(styles.Main, `grow`)}>{children}</main>
     </div>
   );
diff --git a/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx b/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx
index 113af31d..e6d0adb1 100644
--- a/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx
+++ b/examples/district/app/[locale]/[district]/components/dashboard-sidebar.tsx
@@ -25,7 +25,7 @@ export function DashboardSidebar({ items, isCollapsed }: DashboardNavProps) {
   return (
     <aside
       className={cn(
-        'pt-4 bg-backgroundDefault shadow-insetBasic',
+        'pt-4 bg-backgroundSolidDefault shadow-insetBasic',
         'hidden z-1 basis-[240px] shrink-0 md:block overflow-hidden',
         isCollapsed && 'basis-[24px]',
         styles.Collapse
@@ -34,7 +34,7 @@ export function DashboardSidebar({ items, isCollapsed }: DashboardNavProps) {
       <nav className={cn('flex flex-col gap-2 relative')}>
         <Text
           className={cn(
-            'py-2 px-4 z-max text-lightmodeGraySlateSolid11',
+            'py-2 px-4 z-max text-baseGraySlateSolid11',
             isCollapsed && 'hidden'
           )}
           variant="headingSmSpaced"
@@ -85,10 +85,10 @@ const SidebarLink = ({
         />
         <div
           className={cn(
-            'flex items-center w-full mx-2 rounded-1 hover:bg-lightmodeIndigoAlpha3',
+            'flex items-center w-full mx-2 rounded-1 hover:bg-baseIndigoAlpha3',
             styles.Item,
             isActive(department, href, district) &&
-              'bg-lightmodeIndigoAlpha4 text-lightmodeVioletAlpha11 hover:bg-lightmodeIndigoAlpha4'
+              'bg-baseIndigoAlpha4 text-baseVioletAlpha11 hover:bg-baseIndigoAlpha4'
           )}
         >
           <div
diff --git a/examples/district/app/[locale]/[district]/components/district-layout.tsx b/examples/district/app/[locale]/[district]/components/district-layout.tsx
index 551a0dad..40b41b9a 100644
--- a/examples/district/app/[locale]/[district]/components/district-layout.tsx
+++ b/examples/district/app/[locale]/[district]/components/district-layout.tsx
@@ -38,7 +38,7 @@ export interface IProps {
 export function Content({ data }: { data: IProps }) {
   const breadcrumbs = [
     {
-      label: 'Assam',
+      label: <Icon source={Icons.home} />,
       href: '/',
     },
     {
@@ -50,84 +50,85 @@ export function Content({ data }: { data: IProps }) {
   return (
     <>
       <BreadCrumb backUrl="/" crumbs={breadcrumbs} />
+      <div className="container py-1 lg:py-2">
+        <Text variant="heading3xl" as="h1" color="subdued" className="mt-7">
+          {data.title} District
+        </Text>
 
-      <Text variant="heading3xl" as="h1" color="subdued" className="mt-7">
-        {data.title} District
-      </Text>
+        <div className="mt-6 bg-surfaceDefault rounded-05 shadow-elementCard">
+          <Collapsible defaultOpen>
+            <CollapsibleTrigger className={styles.CollapseTrigger}>
+              <Text variant="headingMd" as="h2">
+                {data.collapsible.title}
+              </Text>
+              <Icon source={Icons.down} />
+            </CollapsibleTrigger>
 
-      <div className="mt-6 bg-surfaceDefault rounded-05 shadow-elementCard">
-        <Collapsible defaultOpen>
-          <CollapsibleTrigger className={styles.CollapseTrigger}>
-            <Text variant="headingMd" as="h2">
-              {data.collapsible.title}
-            </Text>
-            <Icon source={Icons.down} />
-          </CollapsibleTrigger>
-
-          <CollapsibleContent className="pb-4 px-6">
-            <Separator />
-            <div className="mt-4 grid lg:grid-cols-2 gap-7">
-              <div className="flex flex-col gap-4">
-                <Text variant="headingSm" as="h3" color="subdued">
-                  Key Highlights
-                </Text>
-
-                <div className="grid gap-4 sm:grid-cols-2">
-                  {data.collapsible.content.cards.map((card, index) => (
-                    <ContentCard
-                      key={card.label + index}
-                      value={card.value}
-                      label={card.label}
-                      color={card.color}
-                    />
-                  ))}
-                </div>
-              </div>
-              <div className="flex flex-col gap-4">
-                <div className="flex items-center gap-2 justify-between">
+            <CollapsibleContent className="pb-4 px-6">
+              <Separator />
+              <div className="mt-4 grid lg:grid-cols-2 gap-7">
+                <div className="flex flex-col gap-4">
                   <Text variant="headingSm" as="h3" color="subdued">
-                    About {data.title}
+                    Key Highlights
                   </Text>
-                  {data.link && (
-                    <Text
-                      variant="bodyMd"
-                      className="underline text-textInteractive"
-                    >
-                      <Link href={data.link} target="_blank">
-                        <span className="flex items-center gap-2">
-                          Go to District Website
-                          <Icon source={Icons.externalLink} />
-                        </span>
-                      </Link>
-                    </Text>
-                  )}
+
+                  <div className="grid gap-4 sm:grid-cols-2">
+                    {data.collapsible.content.cards.map((card, index) => (
+                      <ContentCard
+                        key={card.label + index}
+                        value={card.value}
+                        label={card.label}
+                        color={card.color}
+                      />
+                    ))}
+                  </div>
                 </div>
-                <div className="flex flex-col gap-3">
-                  {data.collapsible.content.description.map((item) => (
-                    <Text variant="bodyLg" as="p" key={item}>
-                      {item}
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-center gap-2 justify-between">
+                    <Text variant="headingSm" as="h3" color="subdued">
+                      About {data.title}
                     </Text>
-                  ))}
+                    {data.link && (
+                      <Text
+                        variant="bodyMd"
+                        className="underline text-textInteractive"
+                      >
+                        <Link href={data.link} target="_blank">
+                          <span className="flex items-center gap-2">
+                            Go to District Website
+                            <Icon source={Icons.externalLink} />
+                          </span>
+                        </Link>
+                      </Text>
+                    )}
+                  </div>
+                  <div className="flex flex-col gap-3">
+                    {data.collapsible.content.description.map((item) => (
+                      <Text variant="bodyLg" as="p" key={item}>
+                        {item}
+                      </Text>
+                    ))}
+                  </div>
                 </div>
               </div>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
-      </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
 
-      <div className="mt-12 flex flex-col gap-4">
-        <div className="flex gap-5 items-center justify-between flex-wrap">
-          <Text variant="headingLg" as="h2">
-            {data.listTitle}
-          </Text>
-          <Search />
+        <div className="mt-12 flex flex-col gap-4">
+          <div className="flex gap-5 items-center justify-between flex-wrap">
+            <Text variant="headingLg" as="h2">
+              {data.listTitle}
+            </Text>
+            <Search />
+          </div>
+          <Separator />
+        </div>
+        <div className="mt-6 grid gap-4 lg:grid-cols-2">
+          {data.list.map((item) => (
+            <DepartmentCard data={item} district={data.href} key={item.label} />
+          ))}
         </div>
-        <Separator />
-      </div>
-      <div className="mt-6 grid gap-4 lg:grid-cols-2">
-        {data.list.map((item) => (
-          <DepartmentCard data={item} district={data.href} key={item.label} />
-        ))}
       </div>
     </>
   );
diff --git a/examples/district/app/[locale]/[district]/components/index.tsx b/examples/district/app/[locale]/[district]/components/index.tsx
index 7c73ac59..4ce1ce93 100644
--- a/examples/district/app/[locale]/[district]/components/index.tsx
+++ b/examples/district/app/[locale]/[district]/components/index.tsx
@@ -31,18 +31,28 @@ export const BreadCrumb = ({
   backUrl,
 }: {
   crumbs: {
-    label: string;
+    label: any;
     href: string;
   }[];
   backUrl: string;
 }) => {
   return (
-    <div className="flex items-start gap-2 md:gap-4">
-      <Link href={backUrl} className="mt-2">
+    <div className="md:container flex items-center gap-2 md:gap-4 bg-backgroundSolidDefault md:bg-transparent">
+      <Link href={backUrl} className="mt-5 hidden md:block">
         <Text visuallyHidden>Go to State Page</Text>
         <Icon source={Icons.leftFilled} size={24} color="default" />
       </Link>
-      <Breadcrumbs crumbs={crumbs} />
+      <div className="hidden md:block mt-4">
+        <Breadcrumbs crumbs={crumbs} />
+      </div>
+
+      <div className="md:hidden px-5">
+        <Breadcrumbs
+          crumbs={crumbs}
+          itemsAfterCollapse={1}
+          itemsBeforeCollapse={2}
+        />
+      </div>
     </div>
   );
 };
diff --git a/examples/district/app/[locale]/[district]/layout.tsx b/examples/district/app/[locale]/[district]/layout.tsx
index 85096a43..6a66959b 100644
--- a/examples/district/app/[locale]/[district]/layout.tsx
+++ b/examples/district/app/[locale]/[district]/layout.tsx
@@ -1,5 +1,6 @@
 import { DashboardLayout } from './components/dashboard-layout';
 import { MainNav } from '@/components/main-nav';
+import { MobileNav } from '@/components/mobile-nav';
 import { mainConfig } from '@/config/site';
 
 export default async function LocaleLayout({
@@ -9,7 +10,10 @@ export default async function LocaleLayout({
 }) {
   return (
     <>
-      <MainNav data={mainConfig} />
+      <div className="hidden md:block">
+        <MainNav data={mainConfig} />
+      </div>
+
       <DashboardLayout dashboardConfig={mainConfig}>{children}</DashboardLayout>
     </>
   );
diff --git a/examples/district/app/[locale]/[district]/page.tsx b/examples/district/app/[locale]/[district]/page.tsx
index e6e523fc..25c6c2c9 100644
--- a/examples/district/app/[locale]/[district]/page.tsx
+++ b/examples/district/app/[locale]/[district]/page.tsx
@@ -15,9 +15,5 @@ export default async function Home({
     return notFound();
   }
 
-  return (
-    <div className="container py-1 lg:py-2">
-      <Content data={districtData} />
-    </div>
-  );
+  return <Content data={districtData} />;
 }
diff --git a/examples/district/app/[locale]/components/district-selector.tsx b/examples/district/app/[locale]/components/district-selector.tsx
index a9032a1c..9ad823cd 100644
--- a/examples/district/app/[locale]/components/district-selector.tsx
+++ b/examples/district/app/[locale]/components/district-selector.tsx
@@ -86,7 +86,7 @@ export const DistrictSelector = () => {
         )}
         <div
           ref={districtNameRef}
-          className="py-2 px-4 bg-backgroundDefault absolute top-8 right-8 border-1 border-solid border-borderDefault rounded-1 z-max h-[40px]"
+          className="py-2 px-4 bg-surfaceDefault absolute top-8 right-8 border-1 border-solid border-borderDefault rounded-1 z-max h-[40px]"
         >
           District
         </div>
@@ -137,7 +137,6 @@ export const DistrictSelector = () => {
                 <Text variant="headingSm" fontWeight="medium" color="subdued">
                   {category.name}
                 </Text>
-                {/* <div className="w-4 h-4 rounded-full bg-lightmodeVioletSolid8 opacity-30" /> */}
               </div>
               <Separator className="mt-2 mb-3" />
               <div className="flex flex-col gap-3">
diff --git a/examples/district/app/[locale]/components/header.tsx b/examples/district/app/[locale]/components/header.tsx
index f39e8310..af3523de 100644
--- a/examples/district/app/[locale]/components/header.tsx
+++ b/examples/district/app/[locale]/components/header.tsx
@@ -1,9 +1,8 @@
 import Image from 'next/image';
-import { Text } from 'opub-ui';
 
 export const Header = () => {
   return (
-    <div className="py-12 w-full bg-backgroundDark flex items-center justify-center gap-10">
+    <div className="py-12 w-full bg-backgroundSolidDark flex items-center justify-center gap-10">
       <div className=" text-textOnBG">
         <Image
           src="/logo/logo.svg"
diff --git a/examples/district/app/[locale]/layout.tsx b/examples/district/app/[locale]/layout.tsx
index 13572d95..1be89d7a 100644
--- a/examples/district/app/[locale]/layout.tsx
+++ b/examples/district/app/[locale]/layout.tsx
@@ -1,3 +1,4 @@
+import { MobileNav } from '@/components/mobile-nav';
 import locales from '../../config/locales';
 import Provider from '@/components/provider';
 import { siteConfig } from '@/config/site';
@@ -90,7 +91,14 @@ export default async function LocaleLayout({
     <html lang={locale}>
       <body className={fontSans.className}>
         <NextIntlClientProvider locale={locale} messages={messages}>
-          <Provider>{children}</Provider>
+          <Provider>
+            <>
+              <div className="md:hidden">
+                <MobileNav />
+              </div>
+              {children}
+            </>
+          </Provider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/examples/district/app/[locale]/page.tsx b/examples/district/app/[locale]/page.tsx
index 1a3cd0a9..7d8881d9 100644
--- a/examples/district/app/[locale]/page.tsx
+++ b/examples/district/app/[locale]/page.tsx
@@ -7,8 +7,10 @@ import {
 
 export default function Home() {
   return (
-    <main className="bg-backgroundDefault pb-10">
-      <Header />
+    <main className="bg-backgroundSolidDefault pb-10">
+      <div className="hidden md:block">
+        <Header />
+      </div>
       <div className="container">
         <KeyHighlights />
         <DistrictSelector />
diff --git a/examples/district/components/icons.tsx b/examples/district/components/icons.tsx
index 554ad8c7..b9a0afa3 100644
--- a/examples/district/components/icons.tsx
+++ b/examples/district/components/icons.tsx
@@ -30,7 +30,10 @@ import {
   IconUserCog,
   IconExternalLink,
   IconChevronsLeft,
+  IconMenu,
+  IconX,
   TablerIconsProps,
+  IconChevronsRight,
 } from '@tabler/icons-react';
 
 export const Icons: {
@@ -48,6 +51,7 @@ export const Icons: {
   right: IconChevronRight,
   left: IconChevronLeft,
   doubleLeft: IconChevronsLeft,
+  doubleRight: IconChevronsRight,
   leftFilled: IconSquareRoundedChevronLeftFilled,
   search: IconSearch,
   notification: IconBellFilled,
@@ -68,6 +72,8 @@ export const Icons: {
   download: IconDownload,
   diamond: IconDiamondsFilled,
   externalLink: IconExternalLink,
+  menu: IconMenu,
+  cross: IconX,
 };
 
 export default Icons;
diff --git a/examples/district/components/main-nav.tsx b/examples/district/components/main-nav.tsx
index 4660cc8c..138f6b38 100644
--- a/examples/district/components/main-nav.tsx
+++ b/examples/district/components/main-nav.tsx
@@ -11,13 +11,13 @@ export function MainNav({ data }: { data: MainConfig }) {
   const { district } = useParams();
 
   return (
-    <header className="relative bg-backgroundDark text-lightmodeIndigoSolid2 py-3 px-10 shadow-top-bar sm:py-3 z-2 ">
+    <header className="relative bg-backgroundSolidDark text-baseIndigoSolid2 py-3 px-10 shadow-top-bar sm:py-3 z-2 ">
       <div className="flex gap-1 items-center justify-between flex-wrap sm:justify-between">
         <Link href={data.homeUrl}>
           <div className="flex items-center gap-4">
             <Image src="/logo/logo-min.svg" alt="" width={24} height={24} />
             <Text variant="headingSmSpaced" as="span" color="inherit">
-              ASSAM DISTRICT DASHBOARD
+              D4D ASSAM: DISTRICT DASHBOARD
             </Text>
           </div>
         </Link>
diff --git a/examples/district/components/mobile-nav.tsx b/examples/district/components/mobile-nav.tsx
new file mode 100644
index 00000000..4db61000
--- /dev/null
+++ b/examples/district/components/mobile-nav.tsx
@@ -0,0 +1,188 @@
+'use client';
+import { Text, IconButton, Icon } from 'opub-ui';
+import Icons from './icons';
+import React from 'react';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { cn } from '@/lib/utils';
+import Link from 'next/link';
+import { mainConfig } from '@/config/site';
+import { useParams, usePathname } from 'next/navigation';
+
+const districts = [
+  {
+    title: 'Morigaon',
+    href: 'morigaon',
+  },
+  {
+    title: 'Nagaon',
+    href: 'nagaon',
+  },
+];
+
+export const MobileNav = () => {
+  const [open, setOpen] = React.useState(false);
+
+  const path = usePathname();
+
+  React.useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'auto';
+    }
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, [open]);
+
+  return (
+    <header>
+      <div className="px-5 py-3 bg-backgroundSolidDark text-textOnBGDefault flex items-center justify-between">
+        <Link href="/" className="flex items-center gap-2">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="none"
+          >
+            <g
+              stroke="#fff"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+              clip-path="url(#a)"
+            >
+              <path d="M8 4 4 6v5l4 2 4-2V6L8 4ZM12 11l4 2 4-2V6l-4-2-4 2M8 13v5l4 2 4-2v-5" />
+            </g>
+            <defs>
+              <clipPath id="a">
+                <path fill="#fff" d="M0 0h24v24H0z" />
+              </clipPath>
+            </defs>
+          </svg>
+          <Text variant="headingSmSpaced" color="inherit">
+            D4D ASSAM
+          </Text>
+        </Link>
+
+        <IconButton
+          icon={open ? Icons.cross : Icons.menu}
+          onClick={() => setOpen((e) => !e)}
+          className="text-textOnBGDefault"
+        >
+          Menu
+        </IconButton>
+      </div>
+      {open && (
+        <div className="h-screen overflow-y-auto bg-backgroundSolidDark text-textOnBGDefault border-t-1 border-solid border-baseGraySlateSolid11">
+          <Link
+            href="/"
+            className={cn(
+              'py-2 pl-1 flex items-center gap-2',
+              path === '/' && 'bg-baseIndigoAlpha12'
+            )}
+            onClick={() => setOpen(false)}
+          >
+            <span
+              className={cn(
+                'rounded-r-1 w-1 h-11',
+                path === '/' && 'bg-baseVioletSolid11'
+              )}
+            />
+            <div className="p-3 pr-5 flex items-center gap-3 ">
+              <Icon source={Icons.home} />
+              <Text variant="headingSmSpaced" color="inherit">
+                Home (District List)
+              </Text>
+            </div>
+          </Link>
+
+          {districts.map((district) => (
+            <NavItem
+              key={district.title}
+              district={district}
+              setNavState={setOpen}
+              path={path}
+            />
+          ))}
+        </div>
+      )}
+    </header>
+  );
+};
+
+const NavItem = ({
+  district,
+  setNavState,
+  path,
+}: {
+  district: {
+    title: string;
+    href: string;
+  };
+  setNavState: React.Dispatch<React.SetStateAction<boolean>>;
+  path: string;
+}) => {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen}>
+      <Collapsible.Trigger asChild>
+        <button
+          className={cn(
+            'py-2 pl-1 flex items-center gap-2 text-textOnBGDefault bg-transparent border-none w-full',
+            open && 'bg-baseIndigoAlpha12'
+          )}
+        >
+          <span
+            className={cn(
+              'rounded-r-1 w-1 h-11',
+              open && 'bg-baseVioletSolid11'
+            )}
+          />
+          <div className="flex items-center justify-between gap-3 w-full p-3 pr-5">
+            <div className="flex items-center gap-3 ">
+              <Icon source={Icons.diamond} />
+              <Text variant="headingSmSpaced" color="inherit">
+                {district.title}
+              </Text>
+            </div>
+            <div className={cn('transform', open && ' rotate-90')}>
+              <Icon source={Icons.doubleRight} />
+            </div>
+          </div>
+        </button>
+      </Collapsible.Trigger>
+
+      <Collapsible.Content>
+        <div
+          className={cn(
+            'flex flex-col gap-2 pt-2 pb-4 pl-5',
+            open && 'bg-baseIndigoAlpha12'
+          )}
+        >
+          {mainConfig.sidebarNav.map((item) => {
+            const link = `/${district.href}${item.href}`;
+
+            return (
+              <Link
+                key={item.title}
+                href={link}
+                className={cn(
+                  'py-3 px-5 rounded-1 text-textOnBGDefault w-full',
+                  path === link && 'bg-backgroundSolidDefault text-textDefault'
+                )}
+                onClick={() => setNavState(false)}
+              >
+                <Text variant="headingSm" color="inherit">
+                  {item.title}
+                </Text>
+              </Link>
+            );
+          })}
+        </div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};
diff --git a/examples/district/components/provider.tsx b/examples/district/components/provider.tsx
index 017dd589..2c75da5f 100644
--- a/examples/district/components/provider.tsx
+++ b/examples/district/components/provider.tsx
@@ -13,14 +13,14 @@ export default function Provider({ children }: { children: React.ReactNode }) {
 
   return (
     <QueryClientProvider client={client}>
-      <>
+      <React.Fragment>
         <RouterEvents />
         <NextTopLoader color="var(--action-primary-success-default)" />
         <Tooltip.Provider>
           {children}
           <Toaster />
         </Tooltip.Provider>
-      </>
+      </React.Fragment>
     </QueryClientProvider>
   );
 }
diff --git a/examples/district/config/figma.tokens.json b/examples/district/config/figma.tokens.json
deleted file mode 100644
index de25304f..00000000
--- a/examples/district/config/figma.tokens.json
+++ /dev/null
@@ -1,1409 +0,0 @@
-{
-  "Default": {
-    "Transparent": {
-      "$type": "color",
-      "$value": "#00000000"
-    },
-    "Background": {
-      "Default": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#edeeefff"
-      },
-      "Selected": {
-        "$type": "color",
-        "$value": "#edeeefff"
-      },
-      "Invert": {
-        "$type": "color",
-        "$value": "#202123ff"
-      }
-    },
-    "Surface": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#fafbfbff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#edeeefff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#fafbfbff"
-      },
-      "SearchField": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      }
-    },
-    "Surface Selected": {
-      "Default": {
-        "$type": "color",
-        "$value": "#f2f7feff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#edf4feff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#e5effdff"
-      }
-    },
-    "Surface Warning": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffd79dff",
-        "$description": "Use for badges"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#fff5eaff",
-        "$description": "Used for banners"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#fff2e2ff"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#ffebd3ff"
-      }
-    },
-    "Surface Critical": {
-      "Default": {
-        "$type": "color",
-        "$value": "#fed3d1ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#fff4f4ff"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#fff0f0ff",
-        "$description": "Used on action lists"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#ffe9e8ff"
-      },
-      "Subdued Depressed": {
-        "$type": "color",
-        "$value": "#febcb9ff"
-      }
-    },
-    "Surface Success": {
-      "Default": {
-        "$type": "color",
-        "$value": "#aee9d1ff",
-        "$description": "S: 40, L: 89.9"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#f1f8f5ff"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#ecf6f1ff"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#e2f1eaff"
-      }
-    },
-    "Surface Highlight": {
-      "Default": {
-        "$type": "color",
-        "$value": "#a4e8f2ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#ebf9fcff"
-      },
-      "Subdued Hovered": {
-        "$type": "color",
-        "$value": "#e4f7faff"
-      },
-      "Subdued Pressed": {
-        "$type": "color",
-        "$value": "#d5f3f8ff"
-      }
-    },
-    "Surface Neutral": {
-      "Default": {
-        "$type": "color",
-        "$value": "#e4e5e7ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#dbdddfff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#c9ccd0ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      }
-    },
-    "Surface Primary": {
-      "Selected": {
-        "$type": "color",
-        "$value": "#f1f8f5ff"
-      },
-      "Selected Hovered": {
-        "$type": "color",
-        "$value": "#b3d0c3ff"
-      },
-      "Selected Pressed": {
-        "$type": "color",
-        "$value": "#a2bcb0ff"
-      }
-    },
-    "Surface Attention": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffea8aff"
-      }
-    },
-    "Interactive": {
-      "Default": {
-        "$type": "color",
-        "$value": "#2c6ecbff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#1f5199ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#103262ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#bdc1ccff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#d82c0dff"
-      },
-      "Critical Hovered": {
-        "$type": "color",
-        "$value": "#cd290cff"
-      },
-      "Critical Disabled": {
-        "$type": "color",
-        "$value": "#fd938dff"
-      },
-      "Critical Pressed": {
-        "$type": "color",
-        "$value": "#670f03ff"
-      }
-    },
-    "Text": {
-      "Default": {
-        "$type": "color",
-        "$value": "#202223ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#6d7175ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#8c9196ff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#d72c0dff"
-      },
-      "Warning": {
-        "$type": "color",
-        "$value": "#916a00ff"
-      },
-      "Success": {
-        "$type": "color",
-        "$value": "#008060ff"
-      },
-      "Highlight": {
-        "$type": "color",
-        "$value": "#347c84ff"
-      }
-    },
-    "Text On": {
-      "Interactive": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Primary": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      }
-    },
-    "Text Primary": {
-      "Default": {
-        "$type": "color",
-        "$value": "#007b5cff"
-      },
-      "hover": {
-        "$type": "color",
-        "$value": "#006c50ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#005c44ff"
-      }
-    },
-    "Icon": {
-      "Default": {
-        "$type": "color",
-        "$value": "#5c5f62ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#8c9196ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#1a1c1dff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#44474aff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#babec3ff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#d72c0dff"
-      },
-      "Warning": {
-        "$type": "color",
-        "$value": "#b98900ff"
-      },
-      "Success": {
-        "$type": "color",
-        "$value": "#007f5fff"
-      },
-      "Highlight": {
-        "$type": "color",
-        "$value": "#00a0acff"
-      },
-      "Interactive": {
-        "$type": "color",
-        "$value": "#2c6ecbff"
-      }
-    },
-    "Icon On": {
-      "Interactive": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Primary": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Critical": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      }
-    },
-    "Border": {
-      "Default": {
-        "$type": "color",
-        "$value": "#8c9196ff",
-        "$description": "3:1 AA Contrast required"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#c9cccfff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#999ea4ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#575959ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#d2d5d8ff"
-      }
-    },
-    "Border Critical": {
-      "Default": {
-        "$type": "color",
-        "$value": "#fd5749ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#e0b3b2ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#ffa7a3ff"
-      }
-    },
-    "Border Warning": {
-      "Default": {
-        "$type": "color",
-        "$value": "#b98900ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#e1b878ff"
-      }
-    },
-    "Border Success": {
-      "Default": {
-        "$type": "color",
-        "$value": "#00a47cff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#95c9b4ff"
-      }
-    },
-    "Border Highlight": {
-      "Default": {
-        "$type": "color",
-        "$value": "#449da7ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#98c6cdff"
-      }
-    },
-    "Border Neutral": {
-      "Subdued": {
-        "$type": "color",
-        "$value": "#babfc3ff"
-      }
-    },
-    "Border Shadow": {
-      "Default": {
-        "$type": "color",
-        "$value": "#aeb4b9ff"
-      },
-      "Subdued": {
-        "$type": "color",
-        "$value": "#aeb4b9ff"
-      }
-    },
-    "Action Primary": {
-      "Default": {
-        "$type": "color",
-        "$value": "#008060ff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#006e52ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#005e46ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#003d2cff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#f1f1f1ff"
-      }
-    },
-    "Action Secondary": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#f6f6f7ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#f1f2f3ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#6d7175ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#ffffffff"
-      }
-    },
-    "Action Critical": {
-      "Default": {
-        "$type": "color",
-        "$value": "#d82c0dff"
-      },
-      "Hovered": {
-        "$type": "color",
-        "$value": "#bc2200ff"
-      },
-      "Pressed": {
-        "$type": "color",
-        "$value": "#a21b00ff"
-      },
-      "Depressed": {
-        "$type": "color",
-        "$value": "#6c0f00ff"
-      },
-      "Disabled": {
-        "$type": "color",
-        "$value": "#f1f1f1ff"
-      }
-    },
-    "Decorative": {
-      "Surface": {
-        "one": {
-          "$type": "color",
-          "$value": "#ffc96bff"
-        },
-        "two": {
-          "$type": "color",
-          "$value": "#ffc4b0ff"
-        },
-        "three": {
-          "$type": "color",
-          "$value": "#92e6b5ff"
-        },
-        "four": {
-          "$type": "color",
-          "$value": "#91e0d6ff"
-        },
-        "five": {
-          "$type": "color",
-          "$value": "#fdc9d0ff"
-        }
-      },
-      "Text": {
-        "one": {
-          "$type": "color",
-          "$value": "#3d2800ff"
-        },
-        "two": {
-          "$type": "color",
-          "$value": "#490b1cff"
-        },
-        "three": {
-          "$type": "color",
-          "$value": "#002f19ff"
-        },
-        "four": {
-          "$type": "color",
-          "$value": "#002d2dff"
-        },
-        "five": {
-          "$type": "color",
-          "$value": "#4f0e1fff"
-        }
-      },
-      "Icon": {
-        "one": {
-          "$type": "color",
-          "$value": "#7e5700ff"
-        },
-        "two": {
-          "$type": "color",
-          "$value": "#af294eff"
-        },
-        "three": {
-          "$type": "color",
-          "$value": "#006d41ff"
-        },
-        "four": {
-          "$type": "color",
-          "$value": "#006a68ff"
-        },
-        "icon-five": {
-          "$type": "color",
-          "$value": "#ae2b4cff"
-        }
-      }
-    },
-    "Backdrop": {
-      "Default": {
-        "$type": "color",
-        "$value": "#00000080"
-      }
-    },
-    "Focused": {
-      "Default": {
-        "$type": "color",
-        "$value": "#458fffff"
-      }
-    },
-    "Overlay": {
-      "Default": {
-        "$type": "color",
-        "$value": "#ffffff80"
-      }
-    },
-    "Divider": {
-      "Default": {
-        "$type": "color",
-        "$value": "#e1e3e5ff"
-      }
-    },
-    "shadow-inset": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#e4e5e7ff",
-        "offsetX": "-1px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": true
-      }
-    },
-    "shadow-inset-button-pressed": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000026",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": true
-      }
-    },
-    "shadow-inset-button": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000033",
-        "offsetX": "0px",
-        "offsetY": "-1px",
-        "blur": "0px",
-        "spread": "0px",
-        "inset": true
-      }
-    },
-    "shadow-button": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#0000000d",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "0px",
-        "spread": "0px"
-      }
-    },
-    "shadow-modal": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000033",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "1px",
-        "spread": "0px"
-      },
-      "$description": "Used for modals"
-    },
-    "shadow-layer": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#202a3614",
-        "offsetX": "0px",
-        "offsetY": "2px",
-        "blur": "16px",
-        "spread": "0px"
-      }
-    },
-    "shadow-popover": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#17181814",
-        "offsetX": "0px",
-        "offsetY": "3px",
-        "blur": "6px",
-        "spread": "-3px"
-      },
-      "$description": "User for Popover and the fixed navigation bar"
-    },
-    "shadow-card": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1718180d",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "5px",
-        "spread": "0px"
-      },
-      "$description": "Used for Card"
-    },
-    "shadow-top-bar": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000026",
-        "offsetX": "0px",
-        "offsetY": "2px",
-        "blur": "2px",
-        "spread": "-1px"
-      }
-    },
-    "shadow-deep": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#062c521a",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "1px"
-      }
-    },
-    "shadow-base": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#3f3f4426",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "3px",
-        "spread": "0px"
-      }
-    },
-    "shadow-faint": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#161d250d",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "0px",
-        "spread": "0px"
-      }
-    },
-    "shadow-transparent": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#00000000",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "0px",
-        "spread": "0px"
-      }
-    },
-    "shadow-xs": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f21243d",
-        "offsetX": "0px",
-        "offsetY": "0px",
-        "blur": "2px",
-        "spread": "0px"
-      }
-    },
-    "shadow-sm": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f21241a",
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "1px",
-        "spread": "0px"
-      }
-    },
-    "shadow-md": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f21241a",
-        "offsetX": "0px",
-        "offsetY": "2px",
-        "blur": "4px",
-        "spread": "0px"
-      }
-    },
-    "shadow-lg": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f212433",
-        "offsetX": "0px",
-        "offsetY": "4px",
-        "blur": "12px",
-        "spread": "0px"
-      }
-    },
-    "shadow-xl": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f212414",
-        "offsetX": "0px",
-        "offsetY": "4px",
-        "blur": "18px",
-        "spread": "-2px"
-      }
-    },
-    "shadow-2xl": {
-      "$type": "shadow",
-      "$value": {
-        "color": "#1f212426",
-        "offsetX": "0px",
-        "offsetY": "32px",
-        "blur": "32px",
-        "spread": "0px"
-      }
-    },
-    "heading4xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "40px",
-        "lineHeight": "48px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for key moments and more learning focused content."
-    },
-    "heading3xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "32px",
-        "lineHeight": "40px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for key moments and more learning focused content."
-    },
-    "heading2xl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "28px",
-        "lineHeight": "32px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for numerals and key information."
-    },
-    "headingXl": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "24px",
-        "lineHeight": "28px",
-        "letterSpacing": "0px"
-      }
-    },
-    "headingLg": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "20px",
-        "lineHeight": "24px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for page, modal titles, numerals and key information."
-    },
-    "headingMd": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "16px",
-        "lineHeight": "24px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for card and section headings. Use to create various levels of hierarchy on the page."
-    },
-    "headingSm": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for card and section headings. Use to create various levels of hierarchy on the page."
-    },
-    "headingXs": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px"
-      },
-      "$description": "Use for subheadings."
-    },
-    "bodyLg": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "16px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use for larger body text within components and short blocks of text."
-    },
-    "bodyLg-medium": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "16px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to add emphasis to large body text. Typically used for buttons."
-    },
-    "bodyLg-underline": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "UNDERLINE",
-        "fontSize": "16px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use for large link text."
-    },
-    "bodyMd": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Default body text. Use within components and blocks of text."
-    },
-    "bodyMd-medium": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to add emphasis to text. Typically used for buttons."
-    },
-    "bodyMd-semibold": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to add strong emphasis to body text."
-    },
-    "bodyMd-underline": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "UNDERLINE",
-        "fontSize": "14px",
-        "lineHeight": "20px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use for link text."
-    },
-    "bodyMd-mono": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "14px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "16px"
-      },
-      "$description": "Use to display an inline code block."
-    },
-    "bodySm": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "REGULAR",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "8px"
-      },
-      "$description": "Use for supporting body text like captions."
-    },
-    "bodySm-medium": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "MEDIUM",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0px",
-        "paragraphSpacing": "8px"
-      },
-      "$description": "Use to add emphasis to small body text."
-    },
-    "bodySm-semibold": {
-      "$type": "typography",
-      "$value": {
-        "fontFamily": "Inter",
-        "fontWeight": "SEMI BOLD",
-        "fontStyle": "NORMAL",
-        "textCase": "ORIGINAL",
-        "textDecoration": "NONE",
-        "fontSize": "12px",
-        "lineHeight": "16px",
-        "letterSpacing": "0em"
-      }
-    },
-    "Font Family": {
-      "primary": {
-        "$type": "fontFamily",
-        "$value": "Inter"
-      },
-      "mono": {
-        "$type": "fontFamily",
-        "$value": "Space Mono"
-      }
-    },
-    "Font Weight": {
-      "Regular": {
-        "$type": "fontWeight",
-        "$value": "400"
-      },
-      "Medium": {
-        "$type": "fontWeight",
-        "$value": "500"
-      },
-      "Bold": {
-        "$type": "fontWeight",
-        "$value": "600"
-      },
-      "Extra Bold": {
-        "$type": "fontWeight",
-        "$value": "700"
-      }
-    },
-    "space-0": {
-      "$type": "dimension",
-      "$value": "0px"
-    },
-    "space-025": {
-      "$type": "dimension",
-      "$value": "1px"
-    },
-    "space-05": {
-      "$type": "dimension",
-      "$value": "2px"
-    },
-    "space-1": {
-      "$type": "dimension",
-      "$value": "4px"
-    },
-    "space-2": {
-      "$type": "dimension",
-      "$value": "8px"
-    },
-    "space-3": {
-      "$type": "dimension",
-      "$value": "12px"
-    },
-    "space-4": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "space-5": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "space-6": {
-      "$type": "dimension",
-      "$value": "24px"
-    },
-    "space-8": {
-      "$type": "dimension",
-      "$value": "32px"
-    },
-    "space-10": {
-      "$type": "dimension",
-      "$value": "40px"
-    },
-    "space-12": {
-      "$type": "dimension",
-      "$value": "48px"
-    },
-    "space-16": {
-      "$type": "dimension",
-      "$value": "64px"
-    },
-    "space-20": {
-      "$type": "dimension",
-      "$value": "80px"
-    },
-    "space-24": {
-      "$type": "dimension",
-      "$value": "96px"
-    },
-    "space-32": {
-      "$type": "dimension",
-      "$value": "128px"
-    },
-    "border-width-1": {
-      "$type": "dimension",
-      "$value": "1px"
-    },
-    "border-width-2": {
-      "$type": "dimension",
-      "$value": "2px"
-    },
-    "border-width-3": {
-      "$type": "dimension",
-      "$value": "3px"
-    },
-    "border-width-4": {
-      "$type": "dimension",
-      "$value": "4px"
-    },
-    "border-width-5": {
-      "$type": "dimension",
-      "$value": "5px"
-    },
-    "border-radius-05": {
-      "$type": "dimension",
-      "$value": "2px"
-    },
-    "border-radius-1": {
-      "$type": "dimension",
-      "$value": "4px"
-    },
-    "border-radius-2": {
-      "$type": "dimension",
-      "$value": "8px"
-    },
-    "border-radius-3": {
-      "$type": "dimension",
-      "$value": "12px"
-    },
-    "border-radius-4": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "border-radius-5": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "border-radius-full": {
-      "$type": "dimension",
-      "$value": "9999px"
-    },
-    "border-radius-half": {
-      "$type": "dimension",
-      "$value": "50%"
-    },
-    "border-radius-base": {
-      "$type": "dimension",
-      "$value": "3px"
-    },
-    "border-radius-large": {
-      "$type": "dimension",
-      "$value": "6px"
-    },
-    "border-base": {
-      "$type": "border",
-      "$value": {
-        "color": "#c9cccfff",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "border-dark": {
-      "$type": "border",
-      "$value": {
-        "color": "#8c9196ff",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "border-divider": {
-      "$type": "border",
-      "$value": {
-        "color": "#e1e3e5ff",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "border-transparent": {
-      "$type": "border",
-      "$value": {
-        "color": "#00000000",
-        "width": "1px",
-        "style": "solid"
-      }
-    },
-    "z": {
-      "1": {
-        "$type": "number",
-        "$value": 100
-      },
-      "2": {
-        "$type": "number",
-        "$value": 400
-      },
-      "3": {
-        "$type": "number",
-        "$value": 513
-      },
-      "4": {
-        "$type": "number",
-        "$value": 514
-      },
-      "5": {
-        "$type": "number",
-        "$value": 515
-      },
-      "6": {
-        "$type": "number",
-        "$value": 516
-      },
-      "7": {
-        "$type": "number",
-        "$value": 517
-      },
-      "8": {
-        "$type": "number",
-        "$value": 518
-      },
-      "9": {
-        "$type": "number",
-        "$value": 519
-      },
-      "10": {
-        "$type": "number",
-        "$value": 520
-      },
-      "max": {
-        "$type": "number",
-        "$value": 99999
-      }
-    },
-    "duration-0": {
-      "$type": "duration",
-      "$value": 0
-    },
-    "duration-100": {
-      "$type": "duration",
-      "$value": 100
-    },
-    "duration-150": {
-      "$type": "duration",
-      "$value": 150
-    },
-    "duration-200": {
-      "$type": "duration",
-      "$value": 200
-    },
-    "duration-250": {
-      "$type": "duration",
-      "$value": 250
-    },
-    "duration-300": {
-      "$type": "duration",
-      "$value": 300
-    },
-    "duration-350": {
-      "$type": "duration",
-      "$value": 350
-    },
-    "duration-400": {
-      "$type": "duration",
-      "$value": 400
-    },
-    "duration-450": {
-      "$type": "duration",
-      "$value": 450
-    },
-    "duration-500": {
-      "$type": "duration",
-      "$value": 500
-    },
-    "duration-5000": {
-      "$type": "duration",
-      "$value": 5000
-    },
-    "ease": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0.25, 0.1, 0.25, 1)"
-    },
-    "linear": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0, 0, 1, 1)"
-    },
-    "ease-in": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0.42, 0, 1, 1)"
-    },
-    "ease-out": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0, 0, 0.58, 1)"
-    },
-    "ease-in-out": {
-      "$type": "cubicBezier",
-      "$value": "cubic-bezier(0.42, 0, 0.58, 1)"
-    },
-    "font-size-75": {
-      "$type": "dimension",
-      "$value": "12px"
-    },
-    "font-size-100": {
-      "$type": "dimension",
-      "$value": "14px"
-    },
-    "font-size-200": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "font-size-300": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "font-size-400": {
-      "$type": "dimension",
-      "$value": "24px"
-    },
-    "font-size-500": {
-      "$type": "dimension",
-      "$value": "28px"
-    },
-    "font-size-600": {
-      "$type": "dimension",
-      "$value": "32px"
-    },
-    "font-size-700": {
-      "$type": "dimension",
-      "$value": "40px"
-    },
-    "font-line-height-1": {
-      "$type": "dimension",
-      "$value": "16px"
-    },
-    "font-line-height-2": {
-      "$type": "dimension",
-      "$value": "20px"
-    },
-    "font-line-height-3": {
-      "$type": "dimension",
-      "$value": "24px"
-    },
-    "font-line-height-4": {
-      "$type": "dimension",
-      "$value": "28px"
-    },
-    "font-line-height-5": {
-      "$type": "dimension",
-      "$value": "32px"
-    },
-    "font-line-height-6": {
-      "$type": "dimension",
-      "$value": "40px"
-    },
-    "font-line-height-7": {
-      "$type": "dimension",
-      "$value": "48px"
-    }
-  }
-}
diff --git a/examples/district/config/tokens/copy.js b/examples/district/config/tokens/copy.js
new file mode 100644
index 00000000..63932b6e
--- /dev/null
+++ b/examples/district/config/tokens/copy.js
@@ -0,0 +1,14 @@
+const fse = require('fs-extra');
+
+const srcDir = `styles/tokens`;
+const opubUI = `../../packages/opub-ui/styles`;
+const opubViz = `../../packages/opub-viz/styles/tokens`;
+
+try {
+  fse.copySync(srcDir, opubUI, { overwrite: true | false });
+  console.log('copied to opub-ui');
+  fse.copySync(srcDir, opubViz, { overwrite: true | false });
+  console.log('copied to opub-viz');
+} catch (err) {
+  console.error(err);
+}
diff --git a/examples/district/config/tokens/generate.mjs b/examples/district/config/tokens/generate.mjs
new file mode 100644
index 00000000..a70ac1cf
--- /dev/null
+++ b/examples/district/config/tokens/generate.mjs
@@ -0,0 +1,4 @@
+import StyleDictionary from 'style-dictionary';
+import config from './sd-config.js';
+
+StyleDictionary.extend(config).buildAllPlatforms();
diff --git a/examples/district/lib/style-dictionary/css-formattor.js b/examples/district/config/tokens/helpers/css-formattor.js
similarity index 96%
rename from examples/district/lib/style-dictionary/css-formattor.js
rename to examples/district/config/tokens/helpers/css-formattor.js
index 7fa09f9b..578b02a0 100644
--- a/examples/district/lib/style-dictionary/css-formattor.js
+++ b/examples/district/config/tokens/helpers/css-formattor.js
@@ -73,9 +73,9 @@ module.exports = function ({ dictionary }) {
           // if it's a fixed value
           const val = variable.value;
           if (variable.type === 'number') {
-            value = `${variable.value}px`;
+            value = `${val}px`;
           } else {
-            value = variable.value;
+            value = val;
           }
         }
       }
diff --git a/examples/district/lib/style-dictionary/effect-convert.js b/examples/district/config/tokens/helpers/effect-convert.js
similarity index 100%
rename from examples/district/lib/style-dictionary/effect-convert.js
rename to examples/district/config/tokens/helpers/effect-convert.js
diff --git a/examples/district/lib/style-dictionary/tailwind-formattor.js b/examples/district/config/tokens/helpers/tailwind-formattor.js
similarity index 100%
rename from examples/district/lib/style-dictionary/tailwind-formattor.js
rename to examples/district/config/tokens/helpers/tailwind-formattor.js
diff --git a/examples/district/config/style-dictionary.js b/examples/district/config/tokens/sd-config.js
similarity index 87%
rename from examples/district/config/style-dictionary.js
rename to examples/district/config/tokens/sd-config.js
index f9c1426f..aed5e277 100644
--- a/examples/district/config/style-dictionary.js
+++ b/examples/district/config/tokens/sd-config.js
@@ -1,6 +1,6 @@
-const cssFormattor = require('../lib/style-dictionary/css-formattor');
-const twFormat = require('../lib/style-dictionary/tailwind-formattor');
-const config = require('../styles/tokens/tokens.json');
+const cssFormattor = require('./helpers/css-formattor');
+const twFormat = require('./helpers/tailwind-formattor');
+const config = require('./tokens.json');
 
 module.exports = {
   format: {
diff --git a/examples/district/styles/tokens/tokens.json b/examples/district/config/tokens/tokens.json
similarity index 85%
rename from examples/district/styles/tokens/tokens.json
rename to examples/district/config/tokens/tokens.json
index b4d4dcf6..6c9fd67c 100644
--- a/examples/district/styles/tokens/tokens.json
+++ b/examples/district/config/tokens/tokens.json
@@ -4,520 +4,520 @@
       "name": "Colors",
       "modes": [
         {
-          "name": "Mode 1",
+          "name": "Light",
           "variables": [
             {
-              "name": "lightmode/indigo/solid/1",
+              "name": "base/indigo/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FDFDFE"
             },
             {
-              "name": "lightmode/indigo/solid/2",
+              "name": "base/indigo/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F8FAFF"
             },
             {
-              "name": "lightmode/indigo/solid/3",
+              "name": "base/indigo/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#F0F4FF"
             },
             {
-              "name": "lightmode/indigo/solid/4",
+              "name": "base/indigo/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#E6EDFE"
             },
             {
-              "name": "lightmode/indigo/solid/5",
+              "name": "base/indigo/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#D9E2FC"
             },
             {
-              "name": "lightmode/indigo/solid/6",
+              "name": "base/indigo/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#C6D4F9"
             },
             {
-              "name": "lightmode/indigo/solid/7",
+              "name": "base/indigo/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#AEC0F5"
             },
             {
-              "name": "lightmode/indigo/solid/8",
+              "name": "base/indigo/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#8DA4EF"
             },
             {
-              "name": "lightmode/indigo/solid/9",
+              "name": "base/indigo/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#3E63DD"
             },
             {
-              "name": "lightmode/indigo/solid/10",
+              "name": "base/indigo/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#3A5CCC"
             },
             {
-              "name": "lightmode/indigo/solid/11",
+              "name": "base/indigo/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#3451B2"
             },
             {
-              "name": "lightmode/indigo/solid/12",
+              "name": "base/indigo/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#101D46"
             },
             {
-              "name": "lightmode/blue/solid/1",
+              "name": "base/blue/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FBFDFF"
             },
             {
-              "name": "lightmode/blue/solid/2",
+              "name": "base/blue/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F5FAFF"
             },
             {
-              "name": "lightmode/blue/solid/3",
+              "name": "base/blue/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#EDF6FF"
             },
             {
-              "name": "lightmode/blue/solid/4",
+              "name": "base/blue/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#E1F0FF"
             },
             {
-              "name": "lightmode/blue/solid/5",
+              "name": "base/blue/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#CEE7FE"
             },
             {
-              "name": "lightmode/blue/solid/6",
+              "name": "base/blue/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#B7D9F8"
             },
             {
-              "name": "lightmode/blue/solid/7",
+              "name": "base/blue/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#96C7F2"
             },
             {
-              "name": "lightmode/blue/solid/8",
+              "name": "base/blue/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#5EB0EF"
             },
             {
-              "name": "lightmode/blue/solid/9",
+              "name": "base/blue/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#0091FF"
             },
             {
-              "name": "lightmode/blue/solid/10",
+              "name": "base/blue/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#0081F1"
             },
             {
-              "name": "lightmode/blue/solid/11",
+              "name": "base/blue/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#006ADC"
             },
             {
-              "name": "lightmode/blue/solid/12",
+              "name": "base/blue/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#00254D"
             },
             {
-              "name": "lightmode/violet/solid/1",
+              "name": "base/violet/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FDFCFE"
             },
             {
-              "name": "lightmode/violet/solid/2",
+              "name": "base/violet/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#FBFAFF"
             },
             {
-              "name": "lightmode/violet/solid/3",
+              "name": "base/violet/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#F5F2FF"
             },
             {
-              "name": "lightmode/violet/solid/4",
+              "name": "base/violet/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#EDE9FE"
             },
             {
-              "name": "lightmode/violet/solid/5",
+              "name": "base/violet/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#E4DEFC"
             },
             {
-              "name": "lightmode/violet/solid/6",
+              "name": "base/violet/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#D7CFF9"
             },
             {
-              "name": "lightmode/violet/solid/7",
+              "name": "base/violet/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#C4B8F3"
             },
             {
-              "name": "lightmode/violet/solid/8",
+              "name": "base/violet/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#AA99EC"
             },
             {
-              "name": "lightmode/violet/solid/9",
+              "name": "base/violet/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#6E56CF"
             },
             {
-              "name": "lightmode/violet/solid/10",
+              "name": "base/violet/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#644FC1"
             },
             {
-              "name": "lightmode/violet/solid/11",
+              "name": "base/violet/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#5746AF"
             },
             {
-              "name": "lightmode/violet/solid/12",
+              "name": "base/violet/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#20134B"
             },
             {
-              "name": "lightmode/gray/slate/solid/1",
+              "name": "base/gray/slate/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FBFCFD"
             },
             {
-              "name": "lightmode/gray/slate/solid/2",
+              "name": "base/gray/slate/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F8F9FA"
             },
             {
-              "name": "lightmode/gray/slate/solid/3",
+              "name": "base/gray/slate/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#F1F3F5"
             },
             {
-              "name": "lightmode/gray/slate/solid/4",
+              "name": "base/gray/slate/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#ECEEF0"
             },
             {
-              "name": "lightmode/gray/slate/solid/5",
+              "name": "base/gray/slate/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#E6E8EB"
             },
             {
-              "name": "lightmode/gray/slate/solid/6",
+              "name": "base/gray/slate/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#DFE3E6"
             },
             {
-              "name": "lightmode/gray/slate/solid/7",
+              "name": "base/gray/slate/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#D7DBDF"
             },
             {
-              "name": "lightmode/gray/slate/solid/8",
+              "name": "base/gray/slate/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#C1C8CD"
             },
             {
-              "name": "lightmode/gray/slate/solid/9",
+              "name": "base/gray/slate/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#889096"
             },
             {
-              "name": "lightmode/gray/slate/solid/10",
+              "name": "base/gray/slate/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#7E868C"
             },
             {
-              "name": "lightmode/gray/slate/solid/11",
+              "name": "base/gray/slate/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#687076"
             },
             {
-              "name": "lightmode/gray/slate/solid/12",
+              "name": "base/gray/slate/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#11181C"
             },
             {
-              "name": "lightmode/red/solid/1",
+              "name": "base/red/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FFFCFC"
             },
             {
-              "name": "lightmode/red/solid/2",
+              "name": "base/red/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#FFF8F8"
             },
             {
-              "name": "lightmode/red/solid/3",
+              "name": "base/red/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#FFEFEF"
             },
             {
-              "name": "lightmode/red/solid/4",
+              "name": "base/red/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#FFE5E5"
             },
             {
-              "name": "lightmode/red/solid/5",
+              "name": "base/red/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#FDD8D8"
             },
             {
-              "name": "lightmode/red/solid/6",
+              "name": "base/red/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#F9C6C6"
             },
             {
-              "name": "lightmode/red/solid/7",
+              "name": "base/red/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#F3AEAF"
             },
             {
-              "name": "lightmode/red/solid/8",
+              "name": "base/red/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#EB9091"
             },
             {
-              "name": "lightmode/red/solid/9",
+              "name": "base/red/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#E5484D"
             },
             {
-              "name": "lightmode/red/solid/10",
+              "name": "base/red/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#DC3D43"
             },
             {
-              "name": "lightmode/red/solid/11",
+              "name": "base/red/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#CD2B31"
             },
             {
-              "name": "lightmode/red/solid/12",
+              "name": "base/red/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#381316"
             },
             {
-              "name": "lightmode/green/solid/1",
+              "name": "base/green/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FBFEFC"
             },
             {
-              "name": "lightmode/green/solid/2",
+              "name": "base/green/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F2FCF5"
             },
             {
-              "name": "lightmode/green/solid/3",
+              "name": "base/green/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#E9F9EE"
             },
             {
-              "name": "lightmode/green/solid/4",
+              "name": "base/green/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#DDF3E4"
             },
             {
-              "name": "lightmode/green/solid/5",
+              "name": "base/green/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#CCEBD7"
             },
             {
-              "name": "lightmode/green/solid/6",
+              "name": "base/green/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#B4DFC4"
             },
             {
-              "name": "lightmode/green/solid/7",
+              "name": "base/green/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#92CEAC"
             },
             {
-              "name": "lightmode/green/solid/8",
+              "name": "base/green/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#5BB98C"
             },
             {
-              "name": "lightmode/green/solid/9",
+              "name": "base/green/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#30A46C"
             },
             {
-              "name": "lightmode/green/solid/10",
+              "name": "base/green/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#299764"
             },
             {
-              "name": "lightmode/green/solid/11",
+              "name": "base/green/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#18794E"
             },
             {
-              "name": "lightmode/green/solid/12",
+              "name": "base/green/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#153226"
             },
             {
-              "name": "lightmode/amber/solid/1",
+              "name": "base/amber/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FEFDFB"
             },
             {
-              "name": "lightmode/amber/solid/2",
+              "name": "base/amber/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#FFF9ED"
             },
             {
-              "name": "lightmode/amber/solid/3",
+              "name": "base/amber/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#FFF4D5"
             },
             {
-              "name": "lightmode/amber/solid/4",
+              "name": "base/amber/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#FFECBC"
             },
             {
-              "name": "lightmode/amber/solid/5",
+              "name": "base/amber/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#FFE3A2"
             },
             {
-              "name": "lightmode/amber/solid/6",
+              "name": "base/amber/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#FFD386"
             },
             {
-              "name": "lightmode/amber/solid/7",
+              "name": "base/amber/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#F3BA63"
             },
             {
-              "name": "lightmode/amber/solid/8",
+              "name": "base/amber/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#EE9D2B"
             },
             {
-              "name": "lightmode/amber/solid/9",
+              "name": "base/amber/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#FFB224"
             },
             {
-              "name": "lightmode/amber/solid/10",
+              "name": "base/amber/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#FFA01C"
             },
             {
-              "name": "lightmode/amber/solid/11",
+              "name": "base/amber/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#AD5700"
             },
             {
-              "name": "lightmode/amber/solid/12",
+              "name": "base/amber/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#4E2009"
             },
             {
-              "name": "lightmode/Pure/White",
+              "name": "base/Pure/White",
               "type": "color",
               "isAlias": false,
               "value": "#FFFFFF"
             },
             {
-              "name": "lightmode/Pure/Black",
+              "name": "base/Pure/Black",
               "type": "color",
               "isAlias": false,
               "value": "#000000"
@@ -528,7 +528,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/12"
+                "name": "base/gray/slate/solid/12"
+              }
+            },
+            {
+              "name": "Text/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
               }
             },
             {
@@ -543,7 +552,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -552,7 +561,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/11"
+                "name": "base/red/solid/11"
               }
             },
             {
@@ -561,7 +570,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/11"
+                "name": "base/amber/solid/11"
               }
             },
             {
@@ -570,7 +579,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/11"
+                "name": "base/green/solid/11"
               }
             },
             {
@@ -579,7 +588,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/11"
+                "name": "base/violet/solid/11"
               }
             },
             {
@@ -588,25 +597,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/11"
+                "name": "base/blue/solid/11"
               }
             },
             {
-              "name": "Text/OnBG/Disabled",
+              "name": "Text/OnBG/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/6"
+                "name": "base/gray/slate/solid/1"
               }
             },
             {
-              "name": "Text/OnBG/Default",
+              "name": "Text/OnBG/Disabled",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/Pure/White"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -615,7 +624,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/8"
+                "name": "base/gray/slate/solid/8"
               }
             },
             {
@@ -624,7 +633,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/7"
+                "name": "base/gray/slate/solid/7"
               }
             },
             {
@@ -633,7 +642,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/6"
+                "name": "base/gray/slate/solid/6"
               }
             },
             {
@@ -642,7 +651,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/8"
+                "name": "base/red/solid/8"
               }
             },
             {
@@ -651,7 +660,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/7"
+                "name": "base/red/solid/7"
               }
             },
             {
@@ -660,7 +669,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/6"
+                "name": "base/red/solid/6"
               }
             },
             {
@@ -669,7 +678,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/8"
+                "name": "base/green/solid/8"
               }
             },
             {
@@ -678,7 +687,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/7"
+                "name": "base/green/solid/7"
               }
             },
             {
@@ -687,7 +696,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/8"
+                "name": "base/amber/solid/8"
               }
             },
             {
@@ -696,7 +705,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/7"
+                "name": "base/amber/solid/7"
               }
             },
             {
@@ -705,7 +714,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/8"
+                "name": "base/violet/solid/8"
               }
             },
             {
@@ -714,7 +723,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/7"
+                "name": "base/violet/solid/7"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/9"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/7"
               }
             },
             {
@@ -723,7 +750,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/8"
+                "name": "base/blue/solid/8"
               }
             },
             {
@@ -732,7 +759,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/7"
+                "name": "base/blue/solid/7"
               }
             },
             {
@@ -741,7 +768,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/11"
+                "name": "base/gray/slate/solid/11"
               }
             },
             {
@@ -750,7 +777,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/10"
+                "name": "base/gray/slate/solid/10"
               }
             },
             {
@@ -759,7 +786,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -768,7 +795,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/10"
+                "name": "base/red/solid/10"
               }
             },
             {
@@ -777,7 +804,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/9"
+                "name": "base/violet/solid/9"
               }
             },
             {
@@ -786,7 +813,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/10"
+                "name": "base/amber/solid/10"
               }
             },
             {
@@ -795,7 +822,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/10"
+                "name": "base/violet/solid/10"
               }
             },
             {
@@ -804,7 +831,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/10"
+                "name": "base/green/solid/10"
               }
             },
             {
@@ -813,7 +840,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/11"
+                "name": "base/violet/solid/11"
               }
             },
             {
@@ -822,7 +849,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/10"
+                "name": "base/violet/solid/10"
               }
             },
             {
@@ -831,7 +858,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/11"
+                "name": "base/indigo/solid/11"
               }
             },
             {
@@ -840,7 +867,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/12"
+                "name": "base/violet/solid/12"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/1"
               }
             },
             {
@@ -849,7 +885,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/4"
               }
             },
             {
@@ -858,7 +903,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/9"
+                "name": "base/red/solid/9"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -867,7 +921,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/9"
+                "name": "base/green/solid/9"
               }
             },
             {
@@ -876,7 +930,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/10"
+                "name": "base/red/solid/10"
               }
             },
             {
@@ -885,7 +939,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/5"
+                "name": "base/red/solid/5"
               }
             },
             {
@@ -894,7 +948,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/4"
+                "name": "base/red/solid/4"
               }
             },
             {
@@ -903,25 +957,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/6"
+                "name": "base/red/solid/6"
               }
             },
             {
-              "name": "Action/Secondary/Critical/Default",
+              "name": "Action/Primary/Interactive/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/3"
+                "name": "base/blue/solid/9"
               }
             },
             {
-              "name": "Action/Primary/Interactive/Default",
+              "name": "Action/Secondary/Critical/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/9"
+                "name": "base/red/solid/3"
               }
             },
             {
@@ -930,7 +984,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/10"
+                "name": "base/blue/solid/10"
               }
             },
             {
@@ -939,7 +993,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/11"
+                "name": "base/blue/solid/11"
               }
             },
             {
@@ -948,16 +1002,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/12"
+                "name": "base/blue/solid/12"
               }
             },
             {
-              "name": "Action/Primary/Success/Hovered",
+              "name": "Action/Primary/Critical/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/10"
+                "name": "base/red/solid/11"
               }
             },
             {
@@ -966,25 +1020,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/3"
+                "name": "base/violet/solid/3"
               }
             },
             {
-              "name": "Action/Primary/Critical/Pressed",
+              "name": "Action/Primary/Success/Hovered",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/11"
+                "name": "base/green/solid/10"
               }
             },
             {
-              "name": "Action/Primary/Critical/Depressed",
+              "name": "Action/Primary/Success/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/12"
+                "name": "base/green/solid/11"
               }
             },
             {
@@ -993,61 +1047,61 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/3"
+                "name": "base/gray/slate/solid/3"
               }
             },
             {
-              "name": "Action/Primary/Success/Pressed",
+              "name": "Action/Primary/Critical/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/11"
+                "name": "base/red/solid/12"
               }
             },
             {
-              "name": "Action/Secondary/Interactive/Depressed",
+              "name": "Action/Secondary/Interactive/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/6"
+                "name": "base/blue/solid/5"
               }
             },
             {
-              "name": "Action/Secondary/Success/Depressed",
+              "name": "Action/Secondary/Success/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/6"
+                "name": "base/green/solid/5"
               }
             },
             {
-              "name": "Action/Secondary/Success/Pressed",
+              "name": "Action/Primary/Success/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/5"
+                "name": "base/green/solid/12"
               }
             },
             {
-              "name": "Action/Primary/Success/Depressed",
+              "name": "Action/Secondary/Interactive/Hovered",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/12"
+                "name": "base/blue/solid/4"
               }
             },
             {
-              "name": "Action/Secondary/Interactive/Hovered",
+              "name": "Action/Secondary/Success/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/4"
+                "name": "base/green/solid/6"
               }
             },
             {
@@ -1056,25 +1110,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/1"
+                "name": "base/gray/slate/solid/1"
               }
             },
             {
-              "name": "Action/Secondary/Interactive/Pressed",
+              "name": "Action/Secondary/Success/Hovered",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/5"
+                "name": "base/green/solid/4"
               }
             },
             {
-              "name": "Action/Secondary/Success/Hovered",
+              "name": "Action/Secondary/Interactive/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/4"
+                "name": "base/blue/solid/6"
               }
             },
             {
@@ -1083,61 +1137,61 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/3"
+                "name": "base/green/solid/3"
               }
             },
             {
-              "name": "Action/Secondary/Interactive/Default",
+              "name": "Action/Secondary/Neutral/Hovered",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/3"
+                "name": "base/gray/slate/solid/2"
               }
             },
             {
-              "name": "Action/Secondary/Neutral/Hovered",
+              "name": "Action/Secondary/Interactive/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/2"
+                "name": "base/blue/solid/3"
               }
             },
             {
-              "name": "Action/Secondary/Neutral/Pressed",
+              "name": "Action/Secondary/Basic/Hovered",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/5"
+                "name": "base/violet/solid/4"
               }
             },
             {
-              "name": "Action/Secondary/Basic/Depressed",
+              "name": "Action/Secondary/Basic/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/6"
+                "name": "base/violet/solid/5"
               }
             },
             {
-              "name": "Action/Secondary/Basic/Hovered",
+              "name": "Action/Secondary/Neutral/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/4"
+                "name": "base/gray/slate/solid/5"
               }
             },
             {
-              "name": "Action/Secondary/Basic/Pressed",
+              "name": "Action/Secondary/Basic/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/5"
+                "name": "base/violet/solid/6"
               }
             },
             {
@@ -1146,7 +1200,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/6"
+                "name": "base/gray/slate/solid/6"
               }
             },
             {
@@ -1155,11 +1209,11 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/alpha/2"
+                "name": "base/violet/alpha/2"
               }
             },
             {
-              "name": "lightmode/indigo/alpha/1",
+              "name": "base/indigo/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#05058203"
@@ -1170,100 +1224,118 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/alpha/2"
+                "name": "base/blue/alpha/2"
               }
             },
-            {
-              "name": "lightmode/indigo/alpha/2",
-              "type": "color",
-              "isAlias": false,
-              "value": "#054CFF08"
-            },
             {
               "name": "Action/Tertiary/Success/Hover",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/alpha/2"
+                "name": "base/green/alpha/2"
               }
             },
+            {
+              "name": "base/indigo/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#054CFF08"
+            },
             {
               "name": "Action/Tertiary/Critical/Hover",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/alpha/2"
+                "name": "base/red/alpha/2"
               }
             },
             {
-              "name": "lightmode/indigo/alpha/3",
+              "name": "base/indigo/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#0144FF0F"
             },
             {
-              "name": "lightmode/indigo/alpha/4",
+              "name": "base/indigo/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#0247F51A"
             },
             {
-              "name": "lightmode/indigo/alpha/5",
+              "name": "base/indigo/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#023CEB26"
             },
             {
-              "name": "lightmode/indigo/alpha/6",
+              "name": "Background/Alpha/Dark",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/12"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#013DE438"
             },
             {
-              "name": "lightmode/indigo/alpha/7",
+              "name": "Background/Alpha/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/4"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#0038E052"
             },
             {
-              "name": "lightmode/indigo/alpha/8",
+              "name": "base/indigo/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#0134DB73"
             },
             {
-              "name": "lightmode/indigo/alpha/9",
+              "name": "base/indigo/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#0031D2C2"
             },
             {
-              "name": "Background/Subdued",
+              "name": "Background/Solid/Subdued",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/2"
+                "name": "base/indigo/solid/2"
               }
             },
             {
-              "name": "Background/Dark",
+              "name": "Background/Solid/Dark",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/12"
+                "name": "base/indigo/solid/12"
               }
             },
             {
-              "name": "Background/Default",
+              "name": "Background/Solid/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/3"
+                "name": "base/indigo/solid/3"
               }
             },
             {
@@ -1272,29 +1344,23 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/Pure/White"
+                "name": "base/Pure/White"
               }
             },
-            {
-              "name": "lightmode/indigo/alpha/10",
-              "type": "color",
-              "isAlias": false,
-              "value": "#002CBDC4"
-            },
             {
               "name": "Surface/Subdued",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/2"
+                "name": "base/gray/slate/solid/2"
               }
             },
             {
-              "name": "lightmode/indigo/alpha/11",
+              "name": "base/indigo/alpha/10",
               "type": "color",
               "isAlias": false,
-              "value": "#00259ECC"
+              "value": "#002CBDC4"
             },
             {
               "name": "Surface/Selected",
@@ -1302,11 +1368,17 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/2"
+                "name": "base/blue/solid/2"
               }
             },
             {
-              "name": "lightmode/indigo/alpha/12",
+              "name": "base/indigo/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00259ECC"
+            },
+            {
+              "name": "base/indigo/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#000E3AF0"
@@ -1317,26 +1389,26 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/2"
+                "name": "base/amber/solid/2"
               }
             },
+            {
+              "name": "base/blue/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0582FF05"
+            },
             {
               "name": "Surface/Critical",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/2"
+                "name": "base/red/solid/2"
               }
             },
             {
-              "name": "lightmode/blue/alpha/1",
-              "type": "color",
-              "isAlias": false,
-              "value": "#0582FF05"
-            },
-            {
-              "name": "lightmode/blue/alpha/2",
+              "name": "base/blue/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#0582FF0A"
@@ -1347,26 +1419,26 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/2"
+                "name": "base/green/solid/2"
               }
             },
+            {
+              "name": "base/blue/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0280FF12"
+            },
             {
               "name": "Surface/Highlight/Subdued",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/2"
+                "name": "base/violet/solid/2"
               }
             },
             {
-              "name": "lightmode/blue/alpha/3",
-              "type": "color",
-              "isAlias": false,
-              "value": "#0280FF12"
-            },
-            {
-              "name": "lightmode/blue/alpha/4",
+              "name": "base/blue/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#0180FF1F"
@@ -1377,23 +1449,29 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/2"
+                "name": "base/blue/solid/2"
               }
             },
+            {
+              "name": "base/blue/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0180EF30"
+            },
             {
               "name": "Surface/Highlight/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/4"
+                "name": "base/violet/solid/4"
               }
             },
             {
-              "name": "lightmode/blue/alpha/5",
+              "name": "base/blue/alpha/6",
               "type": "color",
               "isAlias": false,
-              "value": "#0180EF30"
+              "value": "#0177E647"
             },
             {
               "name": "Surface/Highlight/Hovered",
@@ -1401,407 +1479,401 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/6"
+                "name": "base/violet/solid/6"
               }
             },
             {
-              "name": "lightmode/blue/alpha/6",
-              "type": "color",
-              "isAlias": false,
-              "value": "#0177E647"
-            },
-            {
-              "name": "lightmode/blue/alpha/7",
+              "name": "base/blue/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#0077DF69"
             },
             {
-              "name": "lightmode/blue/alpha/8",
+              "name": "base/blue/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#0082E6A1"
             },
             {
-              "name": "lightmode/blue/alpha/9",
+              "name": "base/blue/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#0091FFFA"
             },
             {
-              "name": "lightmode/blue/alpha/10",
+              "name": "base/blue/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#0080F1FA"
             },
             {
-              "name": "lightmode/blue/alpha/11",
+              "name": "base/blue/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#0066DBFA"
             },
             {
-              "name": "lightmode/blue/alpha/12",
+              "name": "base/blue/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#002149FA"
             },
             {
-              "name": "lightmode/violet/alpha/1",
+              "name": "base/violet/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#5805AB03"
             },
             {
-              "name": "lightmode/violet/alpha/2",
+              "name": "base/violet/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#3705FF05"
             },
             {
-              "name": "lightmode/violet/alpha/3",
+              "name": "base/violet/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#3C00FF0D"
             },
             {
-              "name": "lightmode/violet/alpha/4",
+              "name": "base/violet/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#2E02F417"
             },
             {
-              "name": "lightmode/violet/alpha/5",
+              "name": "base/violet/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#2F01E821"
             },
             {
-              "name": "lightmode/violet/alpha/6",
+              "name": "base/violet/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#2A01DF30"
             },
             {
-              "name": "lightmode/violet/alpha/7",
+              "name": "base/violet/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#2B01D447"
             },
             {
-              "name": "lightmode/violet/alpha/8",
+              "name": "base/violet/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#2A00D066"
             },
             {
-              "name": "lightmode/violet/alpha/9",
+              "name": "base/violet/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#2500B6A8"
             },
             {
-              "name": "lightmode/violet/alpha/10",
+              "name": "base/violet/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#1F00A5B0"
             },
             {
-              "name": "lightmode/violet/alpha/11",
+              "name": "base/violet/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#180091BA"
             },
             {
-              "name": "lightmode/violet/alpha/12",
+              "name": "base/violet/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#0E003DED"
             },
             {
-              "name": "lightmode/gray/slate/alpha/1",
+              "name": "base/gray/slate/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#05448205"
             },
             {
-              "name": "lightmode/gray/slate/alpha/2",
+              "name": "base/gray/slate/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#05294D08"
             },
             {
-              "name": "lightmode/gray/slate/alpha/3",
+              "name": "base/gray/slate/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#0025490D"
             },
             {
-              "name": "lightmode/gray/slate/alpha/4",
+              "name": "base/gray/slate/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#021C3714"
             },
             {
-              "name": "lightmode/gray/slate/alpha/5",
+              "name": "base/gray/slate/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#0217351A"
             },
             {
-              "name": "lightmode/gray/slate/alpha/6",
+              "name": "base/gray/slate/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#01213921"
             },
             {
-              "name": "lightmode/gray/slate/alpha/7",
+              "name": "base/gray/slate/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#001A3329"
             },
             {
-              "name": "lightmode/gray/slate/alpha/8",
+              "name": "base/gray/slate/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#011E323D"
             },
             {
-              "name": "lightmode/gray/slate/alpha/9",
+              "name": "base/gray/slate/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#00111E78"
             },
             {
-              "name": "lightmode/gray/slate/alpha/10",
+              "name": "base/gray/slate/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#00101B82"
             },
             {
-              "name": "lightmode/gray/slate/alpha/11",
+              "name": "base/gray/slate/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#000E1896"
             },
             {
-              "name": "lightmode/gray/slate/alpha/12",
+              "name": "base/gray/slate/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#00080CED"
             },
             {
-              "name": "lightmode/green/alpha/1",
+              "name": "base/green/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#05C04305"
             },
             {
-              "name": "lightmode/green/alpha/2",
+              "name": "base/green/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#00C43B0D"
             },
             {
-              "name": "lightmode/green/alpha/3",
+              "name": "base/green/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#02BA3C17"
             },
             {
-              "name": "lightmode/green/alpha/4",
+              "name": "base/green/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#01A63521"
             },
             {
-              "name": "lightmode/green/alpha/5",
+              "name": "base/green/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#009B3633"
             },
             {
-              "name": "lightmode/green/alpha/6",
+              "name": "base/green/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#0193364A"
             },
             {
-              "name": "lightmode/green/alpha/7",
+              "name": "base/green/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#008C3D6E"
             },
             {
-              "name": "lightmode/green/alpha/8",
+              "name": "base/green/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#00934CA3"
             },
             {
-              "name": "lightmode/green/alpha/9",
+              "name": "base/green/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#008F4ACF"
             },
             {
-              "name": "lightmode/green/alpha/10",
+              "name": "base/green/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#008346D6"
             },
             {
-              "name": "lightmode/green/alpha/11",
+              "name": "base/green/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#006B3BE8"
             },
             {
-              "name": "lightmode/green/alpha/12",
+              "name": "base/green/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#002012EB"
             },
             {
-              "name": "lightmode/amber/alpha/1",
+              "name": "base/amber/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#C0820505"
             },
             {
-              "name": "lightmode/amber/alpha/2",
+              "name": "base/amber/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#FFAB0212"
             },
             {
-              "name": "lightmode/amber/alpha/3",
+              "name": "base/amber/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#FFBB012B"
             },
             {
-              "name": "lightmode/amber/alpha/4",
+              "name": "base/amber/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#FFB70042"
             },
             {
-              "name": "lightmode/amber/alpha/5",
+              "name": "base/amber/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#FFB3005E"
             },
             {
-              "name": "lightmode/amber/alpha/6",
+              "name": "base/amber/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#FFA20178"
             },
             {
-              "name": "lightmode/amber/alpha/7",
+              "name": "base/amber/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#EC8D009C"
             },
             {
-              "name": "lightmode/amber/alpha/8",
+              "name": "base/amber/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#EA8900D4"
             },
             {
-              "name": "lightmode/amber/alpha/9",
+              "name": "base/amber/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#FFA600DB"
             },
             {
-              "name": "lightmode/amber/alpha/10",
+              "name": "base/amber/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#FF9500E3"
             },
             {
-              "name": "lightmode/amber/alpha/11",
+              "name": "base/amber/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#AB5300FA"
             },
             {
-              "name": "lightmode/amber/alpha/12",
+              "name": "base/amber/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#481800F5"
             },
             {
-              "name": "lightmode/red/alpha/1",
+              "name": "base/red/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#FF050503"
             },
             {
-              "name": "lightmode/red/alpha/2",
+              "name": "base/red/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#FF050508"
             },
             {
-              "name": "lightmode/red/alpha/3",
+              "name": "base/red/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#FF01010F"
             },
             {
-              "name": "lightmode/red/alpha/4",
+              "name": "base/red/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#FF00001A"
             },
             {
-              "name": "lightmode/red/alpha/5",
+              "name": "base/red/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#F2000026"
             },
             {
-              "name": "lightmode/red/alpha/6",
+              "name": "base/red/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#E4010138"
             },
             {
-              "name": "lightmode/red/alpha/7",
+              "name": "base/red/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#D9000452"
             },
             {
-              "name": "lightmode/red/alpha/8",
+              "name": "base/red/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#D1000470"
             },
             {
-              "name": "lightmode/red/alpha/9",
+              "name": "base/red/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#DB0007B8"
             },
             {
-              "name": "lightmode/red/alpha/10",
+              "name": "base/red/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#D10007C2"
             },
             {
-              "name": "lightmode/red/alpha/11",
+              "name": "base/red/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#C30007D4"
             },
             {
-              "name": "lightmode/red/alpha/12",
+              "name": "base/red/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#280003ED"
@@ -1848,7 +1920,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -1856,6 +1928,21 @@
               "type": "color",
               "isAlias": false,
               "value": "#FFFFFF03"
+            },
+            {
+              "name": "Transparent",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF00"
+            },
+            {
+              "name": "Border/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
             }
           ]
         }
diff --git a/examples/district/package.json b/examples/district/package.json
index 28c46904..1dc2497d 100644
--- a/examples/district/package.json
+++ b/examples/district/package.json
@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "build:tokens": "style-dictionary build --config ./config/style-dictionary.js",
+    "build:tokens": "node ./config/tokens/generate.mjs",
+    "postbuild:tokens": "node ./config/tokens/copy.js",
     "generate": "graphql-codegen --config ./config/codegen.ts",
     "clean": "rm -rf node_modules yarn.lock"
   },
diff --git a/examples/district/styles/globals.css b/examples/district/styles/globals.css
index 0b04dc42..1df26ce8 100644
--- a/examples/district/styles/globals.css
+++ b/examples/district/styles/globals.css
@@ -1,3 +1,4 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -22,7 +23,7 @@ html {
 }
 
 body {
-  background-color: var(--background-subdued);
+  background-color: var(--background-solid-subdued);
 }
 
 html,
diff --git a/examples/district/styles/tokens/_variables.css b/examples/district/styles/tokens/_variables.css
index 81530bb6..cb627231 100644
--- a/examples/district/styles/tokens/_variables.css
+++ b/examples/district/styles/tokens/_variables.css
@@ -1,267 +1,277 @@
 :root { 
-  --lightmode-indigo-solid-1: #FDFDFE;
-  --lightmode-indigo-solid-2: #F8FAFF;
-  --lightmode-indigo-solid-3: #F0F4FF;
-  --lightmode-indigo-solid-4: #E6EDFE;
-  --lightmode-indigo-solid-5: #D9E2FC;
-  --lightmode-indigo-solid-6: #C6D4F9;
-  --lightmode-indigo-solid-7: #AEC0F5;
-  --lightmode-indigo-solid-8: #8DA4EF;
-  --lightmode-indigo-solid-9: #3E63DD;
-  --lightmode-indigo-solid-10: #3A5CCC;
-  --lightmode-indigo-solid-11: #3451B2;
-  --lightmode-indigo-solid-12: #101D46;
-  --lightmode-blue-solid-1: #FBFDFF;
-  --lightmode-blue-solid-2: #F5FAFF;
-  --lightmode-blue-solid-3: #EDF6FF;
-  --lightmode-blue-solid-4: #E1F0FF;
-  --lightmode-blue-solid-5: #CEE7FE;
-  --lightmode-blue-solid-6: #B7D9F8;
-  --lightmode-blue-solid-7: #96C7F2;
-  --lightmode-blue-solid-8: #5EB0EF;
-  --lightmode-blue-solid-9: #0091FF;
-  --lightmode-blue-solid-10: #0081F1;
-  --lightmode-blue-solid-11: #006ADC;
-  --lightmode-blue-solid-12: #00254D;
-  --lightmode-violet-solid-1: #FDFCFE;
-  --lightmode-violet-solid-2: #FBFAFF;
-  --lightmode-violet-solid-3: #F5F2FF;
-  --lightmode-violet-solid-4: #EDE9FE;
-  --lightmode-violet-solid-5: #E4DEFC;
-  --lightmode-violet-solid-6: #D7CFF9;
-  --lightmode-violet-solid-7: #C4B8F3;
-  --lightmode-violet-solid-8: #AA99EC;
-  --lightmode-violet-solid-9: #6E56CF;
-  --lightmode-violet-solid-10: #644FC1;
-  --lightmode-violet-solid-11: #5746AF;
-  --lightmode-violet-solid-12: #20134B;
-  --lightmode-gray-slate-solid-1: #FBFCFD;
-  --lightmode-gray-slate-solid-2: #F8F9FA;
-  --lightmode-gray-slate-solid-3: #F1F3F5;
-  --lightmode-gray-slate-solid-4: #ECEEF0;
-  --lightmode-gray-slate-solid-5: #E6E8EB;
-  --lightmode-gray-slate-solid-6: #DFE3E6;
-  --lightmode-gray-slate-solid-7: #D7DBDF;
-  --lightmode-gray-slate-solid-8: #C1C8CD;
-  --lightmode-gray-slate-solid-9: #889096;
-  --lightmode-gray-slate-solid-10: #7E868C;
-  --lightmode-gray-slate-solid-11: #687076;
-  --lightmode-gray-slate-solid-12: #11181C;
-  --lightmode-red-solid-1: #FFFCFC;
-  --lightmode-red-solid-2: #FFF8F8;
-  --lightmode-red-solid-3: #FFEFEF;
-  --lightmode-red-solid-4: #FFE5E5;
-  --lightmode-red-solid-5: #FDD8D8;
-  --lightmode-red-solid-6: #F9C6C6;
-  --lightmode-red-solid-7: #F3AEAF;
-  --lightmode-red-solid-8: #EB9091;
-  --lightmode-red-solid-9: #E5484D;
-  --lightmode-red-solid-10: #DC3D43;
-  --lightmode-red-solid-11: #CD2B31;
-  --lightmode-red-solid-12: #381316;
-  --lightmode-green-solid-1: #FBFEFC;
-  --lightmode-green-solid-2: #F2FCF5;
-  --lightmode-green-solid-3: #E9F9EE;
-  --lightmode-green-solid-4: #DDF3E4;
-  --lightmode-green-solid-5: #CCEBD7;
-  --lightmode-green-solid-6: #B4DFC4;
-  --lightmode-green-solid-7: #92CEAC;
-  --lightmode-green-solid-8: #5BB98C;
-  --lightmode-green-solid-9: #30A46C;
-  --lightmode-green-solid-10: #299764;
-  --lightmode-green-solid-11: #18794E;
-  --lightmode-green-solid-12: #153226;
-  --lightmode-amber-solid-1: #FEFDFB;
-  --lightmode-amber-solid-2: #FFF9ED;
-  --lightmode-amber-solid-3: #FFF4D5;
-  --lightmode-amber-solid-4: #FFECBC;
-  --lightmode-amber-solid-5: #FFE3A2;
-  --lightmode-amber-solid-6: #FFD386;
-  --lightmode-amber-solid-7: #F3BA63;
-  --lightmode-amber-solid-8: #EE9D2B;
-  --lightmode-amber-solid-9: #FFB224;
-  --lightmode-amber-solid-10: #FFA01C;
-  --lightmode-amber-solid-11: #AD5700;
-  --lightmode-amber-solid-12: #4E2009;
-  --lightmode-pure-white: #FFFFFF;
-  --lightmode-pure-black: #000000;
-  --text-default: var(--lightmode-gray-slate-solid-12);
+  --base-indigo-solid-1: #FDFDFE;
+  --base-indigo-solid-2: #F8FAFF;
+  --base-indigo-solid-3: #F0F4FF;
+  --base-indigo-solid-4: #E6EDFE;
+  --base-indigo-solid-5: #D9E2FC;
+  --base-indigo-solid-6: #C6D4F9;
+  --base-indigo-solid-7: #AEC0F5;
+  --base-indigo-solid-8: #8DA4EF;
+  --base-indigo-solid-9: #3E63DD;
+  --base-indigo-solid-10: #3A5CCC;
+  --base-indigo-solid-11: #3451B2;
+  --base-indigo-solid-12: #101D46;
+  --base-blue-solid-1: #FBFDFF;
+  --base-blue-solid-2: #F5FAFF;
+  --base-blue-solid-3: #EDF6FF;
+  --base-blue-solid-4: #E1F0FF;
+  --base-blue-solid-5: #CEE7FE;
+  --base-blue-solid-6: #B7D9F8;
+  --base-blue-solid-7: #96C7F2;
+  --base-blue-solid-8: #5EB0EF;
+  --base-blue-solid-9: #0091FF;
+  --base-blue-solid-10: #0081F1;
+  --base-blue-solid-11: #006ADC;
+  --base-blue-solid-12: #00254D;
+  --base-violet-solid-1: #FDFCFE;
+  --base-violet-solid-2: #FBFAFF;
+  --base-violet-solid-3: #F5F2FF;
+  --base-violet-solid-4: #EDE9FE;
+  --base-violet-solid-5: #E4DEFC;
+  --base-violet-solid-6: #D7CFF9;
+  --base-violet-solid-7: #C4B8F3;
+  --base-violet-solid-8: #AA99EC;
+  --base-violet-solid-9: #6E56CF;
+  --base-violet-solid-10: #644FC1;
+  --base-violet-solid-11: #5746AF;
+  --base-violet-solid-12: #20134B;
+  --base-gray-slate-solid-1: #FBFCFD;
+  --base-gray-slate-solid-2: #F8F9FA;
+  --base-gray-slate-solid-3: #F1F3F5;
+  --base-gray-slate-solid-4: #ECEEF0;
+  --base-gray-slate-solid-5: #E6E8EB;
+  --base-gray-slate-solid-6: #DFE3E6;
+  --base-gray-slate-solid-7: #D7DBDF;
+  --base-gray-slate-solid-8: #C1C8CD;
+  --base-gray-slate-solid-9: #889096;
+  --base-gray-slate-solid-10: #7E868C;
+  --base-gray-slate-solid-11: #687076;
+  --base-gray-slate-solid-12: #11181C;
+  --base-red-solid-1: #FFFCFC;
+  --base-red-solid-2: #FFF8F8;
+  --base-red-solid-3: #FFEFEF;
+  --base-red-solid-4: #FFE5E5;
+  --base-red-solid-5: #FDD8D8;
+  --base-red-solid-6: #F9C6C6;
+  --base-red-solid-7: #F3AEAF;
+  --base-red-solid-8: #EB9091;
+  --base-red-solid-9: #E5484D;
+  --base-red-solid-10: #DC3D43;
+  --base-red-solid-11: #CD2B31;
+  --base-red-solid-12: #381316;
+  --base-green-solid-1: #FBFEFC;
+  --base-green-solid-2: #F2FCF5;
+  --base-green-solid-3: #E9F9EE;
+  --base-green-solid-4: #DDF3E4;
+  --base-green-solid-5: #CCEBD7;
+  --base-green-solid-6: #B4DFC4;
+  --base-green-solid-7: #92CEAC;
+  --base-green-solid-8: #5BB98C;
+  --base-green-solid-9: #30A46C;
+  --base-green-solid-10: #299764;
+  --base-green-solid-11: #18794E;
+  --base-green-solid-12: #153226;
+  --base-amber-solid-1: #FEFDFB;
+  --base-amber-solid-2: #FFF9ED;
+  --base-amber-solid-3: #FFF4D5;
+  --base-amber-solid-4: #FFECBC;
+  --base-amber-solid-5: #FFE3A2;
+  --base-amber-solid-6: #FFD386;
+  --base-amber-solid-7: #F3BA63;
+  --base-amber-solid-8: #EE9D2B;
+  --base-amber-solid-9: #FFB224;
+  --base-amber-solid-10: #FFA01C;
+  --base-amber-solid-11: #AD5700;
+  --base-amber-solid-12: #4E2009;
+  --base-pure-white: #FFFFFF;
+  --base-pure-black: #000000;
+  --text-default: var(--base-gray-slate-solid-12);
+  --text-medium: var(--base-gray-slate-solid-11);
   --text-subdued: #3E4346;
-  --text-disabled: var(--lightmode-gray-slate-solid-9);
-  --text-critical: var(--lightmode-red-solid-11);
-  --text-warning: var(--lightmode-amber-solid-11);
-  --text-success: var(--lightmode-green-solid-11);
-  --text-highlight: var(--lightmode-violet-solid-11);
-  --text-interactive: var(--lightmode-blue-solid-11);
-  --text-onbg-disabled: var(--lightmode-gray-slate-solid-6);
-  --text-onbg-default: var(--lightmode-pure-white);
-  --border-default: var(--lightmode-gray-slate-solid-8);
-  --border-subdued: var(--lightmode-gray-slate-solid-7);
-  --border-disabled: var(--lightmode-gray-slate-solid-6);
-  --border-critical-default: var(--lightmode-red-solid-8);
-  --border-critical-disabled: var(--lightmode-red-solid-7);
-  --border-critical-subdued: var(--lightmode-red-solid-6);
-  --border-success-default: var(--lightmode-green-solid-8);
-  --border-success-subdued: var(--lightmode-green-solid-7);
-  --border-warning-default: var(--lightmode-amber-solid-8);
-  --border-warning-subdued: var(--lightmode-amber-solid-7);
-  --border-highlight-default: var(--lightmode-violet-solid-8);
-  --border-highlight-subdued: var(--lightmode-violet-solid-7);
-  --border-interactive-default: var(--lightmode-blue-solid-8);
-  --border-interactive-focused: var(--lightmode-blue-solid-7);
-  --icon-default: var(--lightmode-gray-slate-solid-11);
-  --icon-subdued: var(--lightmode-gray-slate-solid-10);
-  --icon-disabled: var(--lightmode-gray-slate-solid-9);
-  --icon-critical: var(--lightmode-red-solid-10);
-  --action-primary-basic-default: var(--lightmode-violet-solid-9);
-  --icon-warning: var(--lightmode-amber-solid-10);
-  --action-primary-basic-hovered: var(--lightmode-violet-solid-10);
-  --icon-success: var(--lightmode-green-solid-10);
-  --action-primary-basic-pressed: var(--lightmode-violet-solid-11);
-  --icon-highlight: var(--lightmode-violet-solid-10);
-  --icon-interactive: var(--lightmode-indigo-solid-11);
-  --action-primary-basic-depressed: var(--lightmode-violet-solid-12);
-  --action-primary-disabled: var(--lightmode-gray-slate-solid-9);
-  --action-primary-critical-default: var(--lightmode-red-solid-9);
-  --action-primary-success-default: var(--lightmode-green-solid-9);
-  --action-primary-critical-hovered: var(--lightmode-red-solid-10);
-  --action-secondary-critical-pressed: var(--lightmode-red-solid-5);
-  --action-secondary-critical-hovered: var(--lightmode-red-solid-4);
-  --action-secondary-critical-depressed: var(--lightmode-red-solid-6);
-  --action-secondary-critical-default: var(--lightmode-red-solid-3);
-  --action-primary-interactive-default: var(--lightmode-blue-solid-9);
-  --action-primary-interactive-hovered: var(--lightmode-blue-solid-10);
-  --action-primary-interactive-pressed: var(--lightmode-blue-solid-11);
-  --action-primary-interactive-depressed: var(--lightmode-blue-solid-12);
-  --action-primary-success-hovered: var(--lightmode-green-solid-10);
-  --action-secondary-basic-default: var(--lightmode-violet-solid-3);
-  --action-primary-critical-pressed: var(--lightmode-red-solid-11);
-  --action-primary-critical-depressed: var(--lightmode-red-solid-12);
-  --action-secondary-disabled: var(--lightmode-gray-slate-solid-3);
-  --action-primary-success-pressed: var(--lightmode-green-solid-11);
-  --action-secondary-interactive-depressed: var(--lightmode-blue-solid-6);
-  --action-secondary-success-depressed: var(--lightmode-green-solid-6);
-  --action-secondary-success-pressed: var(--lightmode-green-solid-5);
-  --action-primary-success-depressed: var(--lightmode-green-solid-12);
-  --action-secondary-interactive-hovered: var(--lightmode-blue-solid-4);
-  --action-secondary-neutral-default: var(--lightmode-gray-slate-solid-1);
-  --action-secondary-interactive-pressed: var(--lightmode-blue-solid-5);
-  --action-secondary-success-hovered: var(--lightmode-green-solid-4);
-  --action-secondary-success-default: var(--lightmode-green-solid-3);
-  --action-secondary-interactive-default: var(--lightmode-blue-solid-3);
-  --action-secondary-neutral-hovered: var(--lightmode-gray-slate-solid-2);
-  --action-secondary-neutral-pressed: var(--lightmode-gray-slate-solid-5);
-  --action-secondary-basic-depressed: var(--lightmode-violet-solid-6);
-  --action-secondary-basic-hovered: var(--lightmode-violet-solid-4);
-  --action-secondary-basic-pressed: var(--lightmode-violet-solid-5);
-  --action-secondary-neutral-depressed: var(--lightmode-gray-slate-solid-6);
-  --action-tertiary-basic-hover: var(--lightmode-violet-alpha-2);
-  --lightmode-indigo-alpha-1: #05058203;
-  --action-tertiary-interactive-hover: var(--lightmode-blue-alpha-2);
-  --lightmode-indigo-alpha-2: #054CFF08;
-  --action-tertiary-success-hover: var(--lightmode-green-alpha-2);
-  --action-tertiary-critical-hover: var(--lightmode-red-alpha-2);
-  --lightmode-indigo-alpha-3: #0144FF0F;
-  --lightmode-indigo-alpha-4: #0247F51A;
-  --lightmode-indigo-alpha-5: #023CEB26;
-  --lightmode-indigo-alpha-6: #013DE438;
-  --lightmode-indigo-alpha-7: #0038E052;
-  --lightmode-indigo-alpha-8: #0134DB73;
-  --lightmode-indigo-alpha-9: #0031D2C2;
-  --background-subdued: var(--lightmode-indigo-solid-2);
-  --background-dark: var(--lightmode-indigo-solid-12);
-  --background-default: var(--lightmode-indigo-solid-3);
-  --surface-default: var(--lightmode-pure-white);
-  --lightmode-indigo-alpha-10: #002CBDC4;
-  --surface-subdued: var(--lightmode-gray-slate-solid-2);
-  --lightmode-indigo-alpha-11: #00259ECC;
-  --surface-selected: var(--lightmode-blue-solid-2);
-  --lightmode-indigo-alpha-12: #000E3AF0;
-  --surface-warning: var(--lightmode-amber-solid-2);
-  --surface-critical: var(--lightmode-red-solid-2);
-  --lightmode-blue-alpha-1: #0582FF05;
-  --lightmode-blue-alpha-2: #0582FF0A;
-  --surface-success: var(--lightmode-green-solid-2);
-  --surface-highlight-subdued: var(--lightmode-violet-solid-2);
-  --lightmode-blue-alpha-3: #0280FF12;
-  --lightmode-blue-alpha-4: #0180FF1F;
-  --surface-interactive: var(--lightmode-blue-solid-2);
-  --surface-highlight-default: var(--lightmode-violet-solid-4);
-  --lightmode-blue-alpha-5: #0180EF30;
-  --surface-highlight-hovered: var(--lightmode-violet-solid-6);
-  --lightmode-blue-alpha-6: #0177E647;
-  --lightmode-blue-alpha-7: #0077DF69;
-  --lightmode-blue-alpha-8: #0082E6A1;
-  --lightmode-blue-alpha-9: #0091FFFA;
-  --lightmode-blue-alpha-10: #0080F1FA;
-  --lightmode-blue-alpha-11: #0066DBFA;
-  --lightmode-blue-alpha-12: #002149FA;
-  --lightmode-violet-alpha-1: #5805AB03;
-  --lightmode-violet-alpha-2: #3705FF05;
-  --lightmode-violet-alpha-3: #3C00FF0D;
-  --lightmode-violet-alpha-4: #2E02F417;
-  --lightmode-violet-alpha-5: #2F01E821;
-  --lightmode-violet-alpha-6: #2A01DF30;
-  --lightmode-violet-alpha-7: #2B01D447;
-  --lightmode-violet-alpha-8: #2A00D066;
-  --lightmode-violet-alpha-9: #2500B6A8;
-  --lightmode-violet-alpha-10: #1F00A5B0;
-  --lightmode-violet-alpha-11: #180091BA;
-  --lightmode-violet-alpha-12: #0E003DED;
-  --lightmode-gray-slate-alpha-1: #05448205;
-  --lightmode-gray-slate-alpha-2: #05294D08;
-  --lightmode-gray-slate-alpha-3: #0025490D;
-  --lightmode-gray-slate-alpha-4: #021C3714;
-  --lightmode-gray-slate-alpha-5: #0217351A;
-  --lightmode-gray-slate-alpha-6: #01213921;
-  --lightmode-gray-slate-alpha-7: #001A3329;
-  --lightmode-gray-slate-alpha-8: #011E323D;
-  --lightmode-gray-slate-alpha-9: #00111E78;
-  --lightmode-gray-slate-alpha-10: #00101B82;
-  --lightmode-gray-slate-alpha-11: #000E1896;
-  --lightmode-gray-slate-alpha-12: #00080CED;
-  --lightmode-green-alpha-1: #05C04305;
-  --lightmode-green-alpha-2: #00C43B0D;
-  --lightmode-green-alpha-3: #02BA3C17;
-  --lightmode-green-alpha-4: #01A63521;
-  --lightmode-green-alpha-5: #009B3633;
-  --lightmode-green-alpha-6: #0193364A;
-  --lightmode-green-alpha-7: #008C3D6E;
-  --lightmode-green-alpha-8: #00934CA3;
-  --lightmode-green-alpha-9: #008F4ACF;
-  --lightmode-green-alpha-10: #008346D6;
-  --lightmode-green-alpha-11: #006B3BE8;
-  --lightmode-green-alpha-12: #002012EB;
-  --lightmode-amber-alpha-1: #C0820505;
-  --lightmode-amber-alpha-2: #FFAB0212;
-  --lightmode-amber-alpha-3: #FFBB012B;
-  --lightmode-amber-alpha-4: #FFB70042;
-  --lightmode-amber-alpha-5: #FFB3005E;
-  --lightmode-amber-alpha-6: #FFA20178;
-  --lightmode-amber-alpha-7: #EC8D009C;
-  --lightmode-amber-alpha-8: #EA8900D4;
-  --lightmode-amber-alpha-9: #FFA600DB;
-  --lightmode-amber-alpha-10: #FF9500E3;
-  --lightmode-amber-alpha-11: #AB5300FA;
-  --lightmode-amber-alpha-12: #481800F5;
-  --lightmode-red-alpha-1: #FF050503;
-  --lightmode-red-alpha-2: #FF050508;
-  --lightmode-red-alpha-3: #FF01010F;
-  --lightmode-red-alpha-4: #FF00001A;
-  --lightmode-red-alpha-5: #F2000026;
-  --lightmode-red-alpha-6: #E4010138;
-  --lightmode-red-alpha-7: #D9000452;
-  --lightmode-red-alpha-8: #D1000470;
-  --lightmode-red-alpha-9: #DB0007B8;
-  --lightmode-red-alpha-10: #D10007C2;
-  --lightmode-red-alpha-11: #C30007D4;
-  --lightmode-red-alpha-12: #280003ED;
+  --text-disabled: var(--base-gray-slate-solid-9);
+  --text-critical: var(--base-red-solid-11);
+  --text-warning: var(--base-amber-solid-11);
+  --text-success: var(--base-green-solid-11);
+  --text-highlight: var(--base-violet-solid-11);
+  --text-interactive: var(--base-blue-solid-11);
+  --text-onbg-default: var(--base-gray-slate-solid-1);
+  --text-onbg-disabled: var(--base-gray-slate-solid-9);
+  --border-default: var(--base-gray-slate-solid-8);
+  --border-subdued: var(--base-gray-slate-solid-7);
+  --border-disabled: var(--base-gray-slate-solid-6);
+  --border-critical-default: var(--base-red-solid-8);
+  --border-critical-disabled: var(--base-red-solid-7);
+  --border-critical-subdued: var(--base-red-solid-6);
+  --border-success-default: var(--base-green-solid-8);
+  --border-success-subdued: var(--base-green-solid-7);
+  --border-warning-default: var(--base-amber-solid-8);
+  --border-warning-subdued: var(--base-amber-solid-7);
+  --border-highlight-default: var(--base-violet-solid-8);
+  --border-highlight-subdued: var(--base-violet-solid-7);
+  --border-highlight-onbg-subdued: var(--base-violet-solid-9);
+  --border-highlight-onbg-default: var(--base-violet-solid-7);
+  --border-interactive-default: var(--base-blue-solid-8);
+  --border-interactive-focused: var(--base-blue-solid-7);
+  --icon-default: var(--base-gray-slate-solid-11);
+  --icon-subdued: var(--base-gray-slate-solid-10);
+  --icon-disabled: var(--base-gray-slate-solid-9);
+  --icon-critical: var(--base-red-solid-10);
+  --action-primary-basic-default: var(--base-violet-solid-9);
+  --icon-warning: var(--base-amber-solid-10);
+  --action-primary-basic-hovered: var(--base-violet-solid-10);
+  --icon-success: var(--base-green-solid-10);
+  --action-primary-basic-pressed: var(--base-violet-solid-11);
+  --icon-highlight: var(--base-violet-solid-10);
+  --icon-interactive: var(--base-indigo-solid-11);
+  --action-primary-basic-depressed: var(--base-violet-solid-12);
+  --icon-onbg-default: var(--base-gray-slate-solid-1);
+  --action-primary-disabled: var(--base-gray-slate-solid-9);
+  --icon-onbg-subdued: var(--base-gray-slate-solid-4);
+  --action-primary-critical-default: var(--base-red-solid-9);
+  --icon-onbg-disabled: var(--base-gray-slate-solid-9);
+  --action-primary-success-default: var(--base-green-solid-9);
+  --action-primary-critical-hovered: var(--base-red-solid-10);
+  --action-secondary-critical-pressed: var(--base-red-solid-5);
+  --action-secondary-critical-hovered: var(--base-red-solid-4);
+  --action-secondary-critical-depressed: var(--base-red-solid-6);
+  --action-primary-interactive-default: var(--base-blue-solid-9);
+  --action-secondary-critical-default: var(--base-red-solid-3);
+  --action-primary-interactive-hovered: var(--base-blue-solid-10);
+  --action-primary-interactive-pressed: var(--base-blue-solid-11);
+  --action-primary-interactive-depressed: var(--base-blue-solid-12);
+  --action-primary-critical-pressed: var(--base-red-solid-11);
+  --action-secondary-basic-default: var(--base-violet-solid-3);
+  --action-primary-success-hovered: var(--base-green-solid-10);
+  --action-primary-success-pressed: var(--base-green-solid-11);
+  --action-secondary-disabled: var(--base-gray-slate-solid-3);
+  --action-primary-critical-depressed: var(--base-red-solid-12);
+  --action-secondary-interactive-pressed: var(--base-blue-solid-5);
+  --action-secondary-success-pressed: var(--base-green-solid-5);
+  --action-primary-success-depressed: var(--base-green-solid-12);
+  --action-secondary-interactive-hovered: var(--base-blue-solid-4);
+  --action-secondary-success-depressed: var(--base-green-solid-6);
+  --action-secondary-neutral-default: var(--base-gray-slate-solid-1);
+  --action-secondary-success-hovered: var(--base-green-solid-4);
+  --action-secondary-interactive-depressed: var(--base-blue-solid-6);
+  --action-secondary-success-default: var(--base-green-solid-3);
+  --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2);
+  --action-secondary-interactive-default: var(--base-blue-solid-3);
+  --action-secondary-basic-hovered: var(--base-violet-solid-4);
+  --action-secondary-basic-pressed: var(--base-violet-solid-5);
+  --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5);
+  --action-secondary-basic-depressed: var(--base-violet-solid-6);
+  --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6);
+  --action-tertiary-basic-hover: var(--base-violet-alpha-2);
+  --base-indigo-alpha-1: #05058203;
+  --action-tertiary-interactive-hover: var(--base-blue-alpha-2);
+  --action-tertiary-success-hover: var(--base-green-alpha-2);
+  --base-indigo-alpha-2: #054CFF08;
+  --action-tertiary-critical-hover: var(--base-red-alpha-2);
+  --base-indigo-alpha-3: #0144FF0F;
+  --base-indigo-alpha-4: #0247F51A;
+  --base-indigo-alpha-5: #023CEB26;
+  --background-alpha-dark: var(--base-indigo-alpha-12);
+  --base-indigo-alpha-6: #013DE438;
+  --background-alpha-medium: var(--base-indigo-alpha-4);
+  --base-indigo-alpha-7: #0038E052;
+  --base-indigo-alpha-8: #0134DB73;
+  --base-indigo-alpha-9: #0031D2C2;
+  --background-solid-subdued: var(--base-indigo-solid-2);
+  --background-solid-dark: var(--base-indigo-solid-12);
+  --background-solid-default: var(--base-indigo-solid-3);
+  --surface-default: var(--base-pure-white);
+  --surface-subdued: var(--base-gray-slate-solid-2);
+  --base-indigo-alpha-10: #002CBDC4;
+  --surface-selected: var(--base-blue-solid-2);
+  --base-indigo-alpha-11: #00259ECC;
+  --base-indigo-alpha-12: #000E3AF0;
+  --surface-warning: var(--base-amber-solid-2);
+  --base-blue-alpha-1: #0582FF05;
+  --surface-critical: var(--base-red-solid-2);
+  --base-blue-alpha-2: #0582FF0A;
+  --surface-success: var(--base-green-solid-2);
+  --base-blue-alpha-3: #0280FF12;
+  --surface-highlight-subdued: var(--base-violet-solid-2);
+  --base-blue-alpha-4: #0180FF1F;
+  --surface-interactive: var(--base-blue-solid-2);
+  --base-blue-alpha-5: #0180EF30;
+  --surface-highlight-default: var(--base-violet-solid-4);
+  --base-blue-alpha-6: #0177E647;
+  --surface-highlight-hovered: var(--base-violet-solid-6);
+  --base-blue-alpha-7: #0077DF69;
+  --base-blue-alpha-8: #0082E6A1;
+  --base-blue-alpha-9: #0091FFFA;
+  --base-blue-alpha-10: #0080F1FA;
+  --base-blue-alpha-11: #0066DBFA;
+  --base-blue-alpha-12: #002149FA;
+  --base-violet-alpha-1: #5805AB03;
+  --base-violet-alpha-2: #3705FF05;
+  --base-violet-alpha-3: #3C00FF0D;
+  --base-violet-alpha-4: #2E02F417;
+  --base-violet-alpha-5: #2F01E821;
+  --base-violet-alpha-6: #2A01DF30;
+  --base-violet-alpha-7: #2B01D447;
+  --base-violet-alpha-8: #2A00D066;
+  --base-violet-alpha-9: #2500B6A8;
+  --base-violet-alpha-10: #1F00A5B0;
+  --base-violet-alpha-11: #180091BA;
+  --base-violet-alpha-12: #0E003DED;
+  --base-gray-slate-alpha-1: #05448205;
+  --base-gray-slate-alpha-2: #05294D08;
+  --base-gray-slate-alpha-3: #0025490D;
+  --base-gray-slate-alpha-4: #021C3714;
+  --base-gray-slate-alpha-5: #0217351A;
+  --base-gray-slate-alpha-6: #01213921;
+  --base-gray-slate-alpha-7: #001A3329;
+  --base-gray-slate-alpha-8: #011E323D;
+  --base-gray-slate-alpha-9: #00111E78;
+  --base-gray-slate-alpha-10: #00101B82;
+  --base-gray-slate-alpha-11: #000E1896;
+  --base-gray-slate-alpha-12: #00080CED;
+  --base-green-alpha-1: #05C04305;
+  --base-green-alpha-2: #00C43B0D;
+  --base-green-alpha-3: #02BA3C17;
+  --base-green-alpha-4: #01A63521;
+  --base-green-alpha-5: #009B3633;
+  --base-green-alpha-6: #0193364A;
+  --base-green-alpha-7: #008C3D6E;
+  --base-green-alpha-8: #00934CA3;
+  --base-green-alpha-9: #008F4ACF;
+  --base-green-alpha-10: #008346D6;
+  --base-green-alpha-11: #006B3BE8;
+  --base-green-alpha-12: #002012EB;
+  --base-amber-alpha-1: #C0820505;
+  --base-amber-alpha-2: #FFAB0212;
+  --base-amber-alpha-3: #FFBB012B;
+  --base-amber-alpha-4: #FFB70042;
+  --base-amber-alpha-5: #FFB3005E;
+  --base-amber-alpha-6: #FFA20178;
+  --base-amber-alpha-7: #EC8D009C;
+  --base-amber-alpha-8: #EA8900D4;
+  --base-amber-alpha-9: #FFA600DB;
+  --base-amber-alpha-10: #FF9500E3;
+  --base-amber-alpha-11: #AB5300FA;
+  --base-amber-alpha-12: #481800F5;
+  --base-red-alpha-1: #FF050503;
+  --base-red-alpha-2: #FF050508;
+  --base-red-alpha-3: #FF01010F;
+  --base-red-alpha-4: #FF00001A;
+  --base-red-alpha-5: #F2000026;
+  --base-red-alpha-6: #E4010138;
+  --base-red-alpha-7: #D9000452;
+  --base-red-alpha-8: #D1000470;
+  --base-red-alpha-9: #DB0007B8;
+  --base-red-alpha-10: #D10007C2;
+  --base-red-alpha-11: #C30007D4;
+  --base-red-alpha-12: #280003ED;
   --mapareadistrict-default: var(--surface-highlight-default);
   --mapareadistrict-hover: var(--action-secondary-success-hovered);
   --mapareadistrict-selected: var(--action-primary-basic-default);
   --mapareadistrict-disabled: var(--action-primary-disabled);
-  --mapareadistrict-border: var(--lightmode-gray-slate-solid-9);
+  --mapareadistrict-border: var(--base-gray-slate-solid-9);
   --border-focus: #FFFFFF03;
+  --transparent: #FFFFFF00;
+  --border-onbg-subdued: var(--base-gray-slate-solid-11);
 
   --space-0: 0px;
   --space-025: 1px;
diff --git a/examples/district/styles/tokens/_variables_dark.css b/examples/district/styles/tokens/_variables_dark.css
deleted file mode 100644
index 54da2e9f..00000000
--- a/examples/district/styles/tokens/_variables_dark.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-
-  :root {
-    --background: #202123ff;
-    --background-hovered: #474849;
-    --background-pressed: #555a5e;
-    --background-selected: #2d2d33;
-    --background-invert: #f6f6f7ff;
-
-    --text: #b0b0bc;
-    --text-strong: #e7e7f1;
-    --text-subdued: #85858e;
-    /* --interactive: #8bb2ff; */
-    --interactive-hovered: #2c6ecbff;
-
-    --surface: #161619;
-    --surface-hovered: #2d2d33;
-    --surface-pressed: #474849;
-    --surface-selected: #474849;
-
-    --surface-attention: #454500;
-    --surface-information: #02382d;
-    --surface-warning: #4c250f;
-    --surface-subdued: #1e1e23;
-
-    --surface-selected: #202124;
-    --surface-critical-subdued: #201e1e;
-
-    --surface-neutral: #202123;
-    --surface-neutral-hovered: #474849;
-    --surface-neutral-pressed: #555a5e;
-    --surface-neutral-disabled: #555a5e;
-
-    --card-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.12);
-    --card-shadow-hover: 0 4px 7px hsla(0, 0%, 100%, 0.1),
-      inset 0 0 0 1px hsla(0, 0%, 100%, 0.12);
-
-    --backdrop: rgba(0, 0, 0, 0.5);
-
-    --icon: #eeeeee;
-    --icon-subdued: #dddddd;
-    --icon-hovered: #ffffff;
-    --icon-pressed: #dddddd;
-  }
-}
diff --git a/examples/district/styles/tokens/tailwind/color.js b/examples/district/styles/tokens/tailwind/color.js
index 1825a19d..ded0b84d 100644
--- a/examples/district/styles/tokens/tailwind/color.js
+++ b/examples/district/styles/tokens/tailwind/color.js
@@ -1,265 +1,275 @@
 module.exports = { 
-  "lightmodeIndigoSolid1": "#FDFDFE",
-  "lightmodeIndigoSolid2": "#F8FAFF",
-  "lightmodeIndigoSolid3": "#F0F4FF",
-  "lightmodeIndigoSolid4": "#E6EDFE",
-  "lightmodeIndigoSolid5": "#D9E2FC",
-  "lightmodeIndigoSolid6": "#C6D4F9",
-  "lightmodeIndigoSolid7": "#AEC0F5",
-  "lightmodeIndigoSolid8": "#8DA4EF",
-  "lightmodeIndigoSolid9": "#3E63DD",
-  "lightmodeIndigoSolid10": "#3A5CCC",
-  "lightmodeIndigoSolid11": "#3451B2",
-  "lightmodeIndigoSolid12": "#101D46",
-  "lightmodeBlueSolid1": "#FBFDFF",
-  "lightmodeBlueSolid2": "#F5FAFF",
-  "lightmodeBlueSolid3": "#EDF6FF",
-  "lightmodeBlueSolid4": "#E1F0FF",
-  "lightmodeBlueSolid5": "#CEE7FE",
-  "lightmodeBlueSolid6": "#B7D9F8",
-  "lightmodeBlueSolid7": "#96C7F2",
-  "lightmodeBlueSolid8": "#5EB0EF",
-  "lightmodeBlueSolid9": "#0091FF",
-  "lightmodeBlueSolid10": "#0081F1",
-  "lightmodeBlueSolid11": "#006ADC",
-  "lightmodeBlueSolid12": "#00254D",
-  "lightmodeVioletSolid1": "#FDFCFE",
-  "lightmodeVioletSolid2": "#FBFAFF",
-  "lightmodeVioletSolid3": "#F5F2FF",
-  "lightmodeVioletSolid4": "#EDE9FE",
-  "lightmodeVioletSolid5": "#E4DEFC",
-  "lightmodeVioletSolid6": "#D7CFF9",
-  "lightmodeVioletSolid7": "#C4B8F3",
-  "lightmodeVioletSolid8": "#AA99EC",
-  "lightmodeVioletSolid9": "#6E56CF",
-  "lightmodeVioletSolid10": "#644FC1",
-  "lightmodeVioletSolid11": "#5746AF",
-  "lightmodeVioletSolid12": "#20134B",
-  "lightmodeGraySlateSolid1": "#FBFCFD",
-  "lightmodeGraySlateSolid2": "#F8F9FA",
-  "lightmodeGraySlateSolid3": "#F1F3F5",
-  "lightmodeGraySlateSolid4": "#ECEEF0",
-  "lightmodeGraySlateSolid5": "#E6E8EB",
-  "lightmodeGraySlateSolid6": "#DFE3E6",
-  "lightmodeGraySlateSolid7": "#D7DBDF",
-  "lightmodeGraySlateSolid8": "#C1C8CD",
-  "lightmodeGraySlateSolid9": "#889096",
-  "lightmodeGraySlateSolid10": "#7E868C",
-  "lightmodeGraySlateSolid11": "#687076",
-  "lightmodeGraySlateSolid12": "#11181C",
-  "lightmodeRedSolid1": "#FFFCFC",
-  "lightmodeRedSolid2": "#FFF8F8",
-  "lightmodeRedSolid3": "#FFEFEF",
-  "lightmodeRedSolid4": "#FFE5E5",
-  "lightmodeRedSolid5": "#FDD8D8",
-  "lightmodeRedSolid6": "#F9C6C6",
-  "lightmodeRedSolid7": "#F3AEAF",
-  "lightmodeRedSolid8": "#EB9091",
-  "lightmodeRedSolid9": "#E5484D",
-  "lightmodeRedSolid10": "#DC3D43",
-  "lightmodeRedSolid11": "#CD2B31",
-  "lightmodeRedSolid12": "#381316",
-  "lightmodeGreenSolid1": "#FBFEFC",
-  "lightmodeGreenSolid2": "#F2FCF5",
-  "lightmodeGreenSolid3": "#E9F9EE",
-  "lightmodeGreenSolid4": "#DDF3E4",
-  "lightmodeGreenSolid5": "#CCEBD7",
-  "lightmodeGreenSolid6": "#B4DFC4",
-  "lightmodeGreenSolid7": "#92CEAC",
-  "lightmodeGreenSolid8": "#5BB98C",
-  "lightmodeGreenSolid9": "#30A46C",
-  "lightmodeGreenSolid10": "#299764",
-  "lightmodeGreenSolid11": "#18794E",
-  "lightmodeGreenSolid12": "#153226",
-  "lightmodeAmberSolid1": "#FEFDFB",
-  "lightmodeAmberSolid2": "#FFF9ED",
-  "lightmodeAmberSolid3": "#FFF4D5",
-  "lightmodeAmberSolid4": "#FFECBC",
-  "lightmodeAmberSolid5": "#FFE3A2",
-  "lightmodeAmberSolid6": "#FFD386",
-  "lightmodeAmberSolid7": "#F3BA63",
-  "lightmodeAmberSolid8": "#EE9D2B",
-  "lightmodeAmberSolid9": "#FFB224",
-  "lightmodeAmberSolid10": "#FFA01C",
-  "lightmodeAmberSolid11": "#AD5700",
-  "lightmodeAmberSolid12": "#4E2009",
-  "lightmodePureWhite": "#FFFFFF",
-  "lightmodePureBlack": "#000000",
-  "textDefault": "var(--lightmode-gray-slate-solid-12)",
+  "baseIndigoSolid1": "#FDFDFE",
+  "baseIndigoSolid2": "#F8FAFF",
+  "baseIndigoSolid3": "#F0F4FF",
+  "baseIndigoSolid4": "#E6EDFE",
+  "baseIndigoSolid5": "#D9E2FC",
+  "baseIndigoSolid6": "#C6D4F9",
+  "baseIndigoSolid7": "#AEC0F5",
+  "baseIndigoSolid8": "#8DA4EF",
+  "baseIndigoSolid9": "#3E63DD",
+  "baseIndigoSolid10": "#3A5CCC",
+  "baseIndigoSolid11": "#3451B2",
+  "baseIndigoSolid12": "#101D46",
+  "baseBlueSolid1": "#FBFDFF",
+  "baseBlueSolid2": "#F5FAFF",
+  "baseBlueSolid3": "#EDF6FF",
+  "baseBlueSolid4": "#E1F0FF",
+  "baseBlueSolid5": "#CEE7FE",
+  "baseBlueSolid6": "#B7D9F8",
+  "baseBlueSolid7": "#96C7F2",
+  "baseBlueSolid8": "#5EB0EF",
+  "baseBlueSolid9": "#0091FF",
+  "baseBlueSolid10": "#0081F1",
+  "baseBlueSolid11": "#006ADC",
+  "baseBlueSolid12": "#00254D",
+  "baseVioletSolid1": "#FDFCFE",
+  "baseVioletSolid2": "#FBFAFF",
+  "baseVioletSolid3": "#F5F2FF",
+  "baseVioletSolid4": "#EDE9FE",
+  "baseVioletSolid5": "#E4DEFC",
+  "baseVioletSolid6": "#D7CFF9",
+  "baseVioletSolid7": "#C4B8F3",
+  "baseVioletSolid8": "#AA99EC",
+  "baseVioletSolid9": "#6E56CF",
+  "baseVioletSolid10": "#644FC1",
+  "baseVioletSolid11": "#5746AF",
+  "baseVioletSolid12": "#20134B",
+  "baseGraySlateSolid1": "#FBFCFD",
+  "baseGraySlateSolid2": "#F8F9FA",
+  "baseGraySlateSolid3": "#F1F3F5",
+  "baseGraySlateSolid4": "#ECEEF0",
+  "baseGraySlateSolid5": "#E6E8EB",
+  "baseGraySlateSolid6": "#DFE3E6",
+  "baseGraySlateSolid7": "#D7DBDF",
+  "baseGraySlateSolid8": "#C1C8CD",
+  "baseGraySlateSolid9": "#889096",
+  "baseGraySlateSolid10": "#7E868C",
+  "baseGraySlateSolid11": "#687076",
+  "baseGraySlateSolid12": "#11181C",
+  "baseRedSolid1": "#FFFCFC",
+  "baseRedSolid2": "#FFF8F8",
+  "baseRedSolid3": "#FFEFEF",
+  "baseRedSolid4": "#FFE5E5",
+  "baseRedSolid5": "#FDD8D8",
+  "baseRedSolid6": "#F9C6C6",
+  "baseRedSolid7": "#F3AEAF",
+  "baseRedSolid8": "#EB9091",
+  "baseRedSolid9": "#E5484D",
+  "baseRedSolid10": "#DC3D43",
+  "baseRedSolid11": "#CD2B31",
+  "baseRedSolid12": "#381316",
+  "baseGreenSolid1": "#FBFEFC",
+  "baseGreenSolid2": "#F2FCF5",
+  "baseGreenSolid3": "#E9F9EE",
+  "baseGreenSolid4": "#DDF3E4",
+  "baseGreenSolid5": "#CCEBD7",
+  "baseGreenSolid6": "#B4DFC4",
+  "baseGreenSolid7": "#92CEAC",
+  "baseGreenSolid8": "#5BB98C",
+  "baseGreenSolid9": "#30A46C",
+  "baseGreenSolid10": "#299764",
+  "baseGreenSolid11": "#18794E",
+  "baseGreenSolid12": "#153226",
+  "baseAmberSolid1": "#FEFDFB",
+  "baseAmberSolid2": "#FFF9ED",
+  "baseAmberSolid3": "#FFF4D5",
+  "baseAmberSolid4": "#FFECBC",
+  "baseAmberSolid5": "#FFE3A2",
+  "baseAmberSolid6": "#FFD386",
+  "baseAmberSolid7": "#F3BA63",
+  "baseAmberSolid8": "#EE9D2B",
+  "baseAmberSolid9": "#FFB224",
+  "baseAmberSolid10": "#FFA01C",
+  "baseAmberSolid11": "#AD5700",
+  "baseAmberSolid12": "#4E2009",
+  "basePureWhite": "#FFFFFF",
+  "basePureBlack": "#000000",
+  "textDefault": "var(--base-gray-slate-solid-12)",
+  "textMedium": "var(--base-gray-slate-solid-11)",
   "textSubdued": "#3E4346",
-  "textDisabled": "var(--lightmode-gray-slate-solid-9)",
-  "textCritical": "var(--lightmode-red-solid-11)",
-  "textWarning": "var(--lightmode-amber-solid-11)",
-  "textSuccess": "var(--lightmode-green-solid-11)",
-  "textHighlight": "var(--lightmode-violet-solid-11)",
-  "textInteractive": "var(--lightmode-blue-solid-11)",
-  "textOnBGDisabled": "var(--lightmode-gray-slate-solid-6)",
-  "textOnBGDefault": "var(--lightmode-pure-white)",
-  "borderDefault": "var(--lightmode-gray-slate-solid-8)",
-  "borderSubdued": "var(--lightmode-gray-slate-solid-7)",
-  "borderDisabled": "var(--lightmode-gray-slate-solid-6)",
-  "borderCriticalDefault": "var(--lightmode-red-solid-8)",
-  "borderCriticalDisabled": "var(--lightmode-red-solid-7)",
-  "borderCriticalSubdued": "var(--lightmode-red-solid-6)",
-  "borderSuccessDefault": "var(--lightmode-green-solid-8)",
-  "borderSuccessSubdued": "var(--lightmode-green-solid-7)",
-  "borderWarningDefault": "var(--lightmode-amber-solid-8)",
-  "borderWarningSubdued": "var(--lightmode-amber-solid-7)",
-  "borderHighlightDefault": "var(--lightmode-violet-solid-8)",
-  "borderHighlightSubdued": "var(--lightmode-violet-solid-7)",
-  "borderInteractiveDefault": "var(--lightmode-blue-solid-8)",
-  "borderInteractiveFocused": "var(--lightmode-blue-solid-7)",
-  "iconDefault": "var(--lightmode-gray-slate-solid-11)",
-  "iconSubdued": "var(--lightmode-gray-slate-solid-10)",
-  "iconDisabled": "var(--lightmode-gray-slate-solid-9)",
-  "iconCritical": "var(--lightmode-red-solid-10)",
-  "actionPrimaryBasicDefault": "var(--lightmode-violet-solid-9)",
-  "iconWarning": "var(--lightmode-amber-solid-10)",
-  "actionPrimaryBasicHovered": "var(--lightmode-violet-solid-10)",
-  "iconSuccess": "var(--lightmode-green-solid-10)",
-  "actionPrimaryBasicPressed": "var(--lightmode-violet-solid-11)",
-  "iconHighlight": "var(--lightmode-violet-solid-10)",
-  "iconInteractive": "var(--lightmode-indigo-solid-11)",
-  "actionPrimaryBasicDepressed": "var(--lightmode-violet-solid-12)",
-  "actionPrimaryDisabled": "var(--lightmode-gray-slate-solid-9)",
-  "actionPrimaryCriticalDefault": "var(--lightmode-red-solid-9)",
-  "actionPrimarySuccessDefault": "var(--lightmode-green-solid-9)",
-  "actionPrimaryCriticalHovered": "var(--lightmode-red-solid-10)",
-  "actionSecondaryCriticalPressed": "var(--lightmode-red-solid-5)",
-  "actionSecondaryCriticalHovered": "var(--lightmode-red-solid-4)",
-  "actionSecondaryCriticalDepressed": "var(--lightmode-red-solid-6)",
-  "actionSecondaryCriticalDefault": "var(--lightmode-red-solid-3)",
-  "actionPrimaryInteractiveDefault": "var(--lightmode-blue-solid-9)",
-  "actionPrimaryInteractiveHovered": "var(--lightmode-blue-solid-10)",
-  "actionPrimaryInteractivePressed": "var(--lightmode-blue-solid-11)",
-  "actionPrimaryInteractiveDepressed": "var(--lightmode-blue-solid-12)",
-  "actionPrimarySuccessHovered": "var(--lightmode-green-solid-10)",
-  "actionSecondaryBasicDefault": "var(--lightmode-violet-solid-3)",
-  "actionPrimaryCriticalPressed": "var(--lightmode-red-solid-11)",
-  "actionPrimaryCriticalDepressed": "var(--lightmode-red-solid-12)",
-  "actionSecondaryDisabled": "var(--lightmode-gray-slate-solid-3)",
-  "actionPrimarySuccessPressed": "var(--lightmode-green-solid-11)",
-  "actionSecondaryInteractiveDepressed": "var(--lightmode-blue-solid-6)",
-  "actionSecondarySuccessDepressed": "var(--lightmode-green-solid-6)",
-  "actionSecondarySuccessPressed": "var(--lightmode-green-solid-5)",
-  "actionPrimarySuccessDepressed": "var(--lightmode-green-solid-12)",
-  "actionSecondaryInteractiveHovered": "var(--lightmode-blue-solid-4)",
-  "actionSecondaryNeutralDefault": "var(--lightmode-gray-slate-solid-1)",
-  "actionSecondaryInteractivePressed": "var(--lightmode-blue-solid-5)",
-  "actionSecondarySuccessHovered": "var(--lightmode-green-solid-4)",
-  "actionSecondarySuccessDefault": "var(--lightmode-green-solid-3)",
-  "actionSecondaryInteractiveDefault": "var(--lightmode-blue-solid-3)",
-  "actionSecondaryNeutralHovered": "var(--lightmode-gray-slate-solid-2)",
-  "actionSecondaryNeutralPressed": "var(--lightmode-gray-slate-solid-5)",
-  "actionSecondaryBasicDepressed": "var(--lightmode-violet-solid-6)",
-  "actionSecondaryBasicHovered": "var(--lightmode-violet-solid-4)",
-  "actionSecondaryBasicPressed": "var(--lightmode-violet-solid-5)",
-  "actionSecondaryNeutralDepressed": "var(--lightmode-gray-slate-solid-6)",
-  "actionTertiaryBasicHover": "var(--lightmode-violet-alpha-2)",
-  "lightmodeIndigoAlpha1": "#05058203",
-  "actionTertiaryInteractiveHover": "var(--lightmode-blue-alpha-2)",
-  "lightmodeIndigoAlpha2": "#054CFF08",
-  "actionTertiarySuccessHover": "var(--lightmode-green-alpha-2)",
-  "actionTertiaryCriticalHover": "var(--lightmode-red-alpha-2)",
-  "lightmodeIndigoAlpha3": "#0144FF0F",
-  "lightmodeIndigoAlpha4": "#0247F51A",
-  "lightmodeIndigoAlpha5": "#023CEB26",
-  "lightmodeIndigoAlpha6": "#013DE438",
-  "lightmodeIndigoAlpha7": "#0038E052",
-  "lightmodeIndigoAlpha8": "#0134DB73",
-  "lightmodeIndigoAlpha9": "#0031D2C2",
-  "backgroundSubdued": "var(--lightmode-indigo-solid-2)",
-  "backgroundDark": "var(--lightmode-indigo-solid-12)",
-  "backgroundDefault": "var(--lightmode-indigo-solid-3)",
-  "surfaceDefault": "var(--lightmode-pure-white)",
-  "lightmodeIndigoAlpha10": "#002CBDC4",
-  "surfaceSubdued": "var(--lightmode-gray-slate-solid-2)",
-  "lightmodeIndigoAlpha11": "#00259ECC",
-  "surfaceSelected": "var(--lightmode-blue-solid-2)",
-  "lightmodeIndigoAlpha12": "#000E3AF0",
-  "surfaceWarning": "var(--lightmode-amber-solid-2)",
-  "surfaceCritical": "var(--lightmode-red-solid-2)",
-  "lightmodeBlueAlpha1": "#0582FF05",
-  "lightmodeBlueAlpha2": "#0582FF0A",
-  "surfaceSuccess": "var(--lightmode-green-solid-2)",
-  "surfaceHighlightSubdued": "var(--lightmode-violet-solid-2)",
-  "lightmodeBlueAlpha3": "#0280FF12",
-  "lightmodeBlueAlpha4": "#0180FF1F",
-  "surfaceInteractive": "var(--lightmode-blue-solid-2)",
-  "surfaceHighlightDefault": "var(--lightmode-violet-solid-4)",
-  "lightmodeBlueAlpha5": "#0180EF30",
-  "surfaceHighlightHovered": "var(--lightmode-violet-solid-6)",
-  "lightmodeBlueAlpha6": "#0177E647",
-  "lightmodeBlueAlpha7": "#0077DF69",
-  "lightmodeBlueAlpha8": "#0082E6A1",
-  "lightmodeBlueAlpha9": "#0091FFFA",
-  "lightmodeBlueAlpha10": "#0080F1FA",
-  "lightmodeBlueAlpha11": "#0066DBFA",
-  "lightmodeBlueAlpha12": "#002149FA",
-  "lightmodeVioletAlpha1": "#5805AB03",
-  "lightmodeVioletAlpha2": "#3705FF05",
-  "lightmodeVioletAlpha3": "#3C00FF0D",
-  "lightmodeVioletAlpha4": "#2E02F417",
-  "lightmodeVioletAlpha5": "#2F01E821",
-  "lightmodeVioletAlpha6": "#2A01DF30",
-  "lightmodeVioletAlpha7": "#2B01D447",
-  "lightmodeVioletAlpha8": "#2A00D066",
-  "lightmodeVioletAlpha9": "#2500B6A8",
-  "lightmodeVioletAlpha10": "#1F00A5B0",
-  "lightmodeVioletAlpha11": "#180091BA",
-  "lightmodeVioletAlpha12": "#0E003DED",
-  "lightmodeGraySlateAlpha1": "#05448205",
-  "lightmodeGraySlateAlpha2": "#05294D08",
-  "lightmodeGraySlateAlpha3": "#0025490D",
-  "lightmodeGraySlateAlpha4": "#021C3714",
-  "lightmodeGraySlateAlpha5": "#0217351A",
-  "lightmodeGraySlateAlpha6": "#01213921",
-  "lightmodeGraySlateAlpha7": "#001A3329",
-  "lightmodeGraySlateAlpha8": "#011E323D",
-  "lightmodeGraySlateAlpha9": "#00111E78",
-  "lightmodeGraySlateAlpha10": "#00101B82",
-  "lightmodeGraySlateAlpha11": "#000E1896",
-  "lightmodeGraySlateAlpha12": "#00080CED",
-  "lightmodeGreenAlpha1": "#05C04305",
-  "lightmodeGreenAlpha2": "#00C43B0D",
-  "lightmodeGreenAlpha3": "#02BA3C17",
-  "lightmodeGreenAlpha4": "#01A63521",
-  "lightmodeGreenAlpha5": "#009B3633",
-  "lightmodeGreenAlpha6": "#0193364A",
-  "lightmodeGreenAlpha7": "#008C3D6E",
-  "lightmodeGreenAlpha8": "#00934CA3",
-  "lightmodeGreenAlpha9": "#008F4ACF",
-  "lightmodeGreenAlpha10": "#008346D6",
-  "lightmodeGreenAlpha11": "#006B3BE8",
-  "lightmodeGreenAlpha12": "#002012EB",
-  "lightmodeAmberAlpha1": "#C0820505",
-  "lightmodeAmberAlpha2": "#FFAB0212",
-  "lightmodeAmberAlpha3": "#FFBB012B",
-  "lightmodeAmberAlpha4": "#FFB70042",
-  "lightmodeAmberAlpha5": "#FFB3005E",
-  "lightmodeAmberAlpha6": "#FFA20178",
-  "lightmodeAmberAlpha7": "#EC8D009C",
-  "lightmodeAmberAlpha8": "#EA8900D4",
-  "lightmodeAmberAlpha9": "#FFA600DB",
-  "lightmodeAmberAlpha10": "#FF9500E3",
-  "lightmodeAmberAlpha11": "#AB5300FA",
-  "lightmodeAmberAlpha12": "#481800F5",
-  "lightmodeRedAlpha1": "#FF050503",
-  "lightmodeRedAlpha2": "#FF050508",
-  "lightmodeRedAlpha3": "#FF01010F",
-  "lightmodeRedAlpha4": "#FF00001A",
-  "lightmodeRedAlpha5": "#F2000026",
-  "lightmodeRedAlpha6": "#E4010138",
-  "lightmodeRedAlpha7": "#D9000452",
-  "lightmodeRedAlpha8": "#D1000470",
-  "lightmodeRedAlpha9": "#DB0007B8",
-  "lightmodeRedAlpha10": "#D10007C2",
-  "lightmodeRedAlpha11": "#C30007D4",
-  "lightmodeRedAlpha12": "#280003ED",
+  "textDisabled": "var(--base-gray-slate-solid-9)",
+  "textCritical": "var(--base-red-solid-11)",
+  "textWarning": "var(--base-amber-solid-11)",
+  "textSuccess": "var(--base-green-solid-11)",
+  "textHighlight": "var(--base-violet-solid-11)",
+  "textInteractive": "var(--base-blue-solid-11)",
+  "textOnBGDefault": "var(--base-gray-slate-solid-1)",
+  "textOnBGDisabled": "var(--base-gray-slate-solid-9)",
+  "borderDefault": "var(--base-gray-slate-solid-8)",
+  "borderSubdued": "var(--base-gray-slate-solid-7)",
+  "borderDisabled": "var(--base-gray-slate-solid-6)",
+  "borderCriticalDefault": "var(--base-red-solid-8)",
+  "borderCriticalDisabled": "var(--base-red-solid-7)",
+  "borderCriticalSubdued": "var(--base-red-solid-6)",
+  "borderSuccessDefault": "var(--base-green-solid-8)",
+  "borderSuccessSubdued": "var(--base-green-solid-7)",
+  "borderWarningDefault": "var(--base-amber-solid-8)",
+  "borderWarningSubdued": "var(--base-amber-solid-7)",
+  "borderHighlightDefault": "var(--base-violet-solid-8)",
+  "borderHighlightSubdued": "var(--base-violet-solid-7)",
+  "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)",
+  "borderHighlightOnBGDefault": "var(--base-violet-solid-7)",
+  "borderInteractiveDefault": "var(--base-blue-solid-8)",
+  "borderInteractiveFocused": "var(--base-blue-solid-7)",
+  "iconDefault": "var(--base-gray-slate-solid-11)",
+  "iconSubdued": "var(--base-gray-slate-solid-10)",
+  "iconDisabled": "var(--base-gray-slate-solid-9)",
+  "iconCritical": "var(--base-red-solid-10)",
+  "actionPrimaryBasicDefault": "var(--base-violet-solid-9)",
+  "iconWarning": "var(--base-amber-solid-10)",
+  "actionPrimaryBasicHovered": "var(--base-violet-solid-10)",
+  "iconSuccess": "var(--base-green-solid-10)",
+  "actionPrimaryBasicPressed": "var(--base-violet-solid-11)",
+  "iconHighlight": "var(--base-violet-solid-10)",
+  "iconInteractive": "var(--base-indigo-solid-11)",
+  "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)",
+  "iconOnBGDefault": "var(--base-gray-slate-solid-1)",
+  "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)",
+  "iconOnBGSubdued": "var(--base-gray-slate-solid-4)",
+  "actionPrimaryCriticalDefault": "var(--base-red-solid-9)",
+  "iconOnBGDisabled": "var(--base-gray-slate-solid-9)",
+  "actionPrimarySuccessDefault": "var(--base-green-solid-9)",
+  "actionPrimaryCriticalHovered": "var(--base-red-solid-10)",
+  "actionSecondaryCriticalPressed": "var(--base-red-solid-5)",
+  "actionSecondaryCriticalHovered": "var(--base-red-solid-4)",
+  "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)",
+  "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)",
+  "actionSecondaryCriticalDefault": "var(--base-red-solid-3)",
+  "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)",
+  "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)",
+  "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)",
+  "actionPrimaryCriticalPressed": "var(--base-red-solid-11)",
+  "actionSecondaryBasicDefault": "var(--base-violet-solid-3)",
+  "actionPrimarySuccessHovered": "var(--base-green-solid-10)",
+  "actionPrimarySuccessPressed": "var(--base-green-solid-11)",
+  "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)",
+  "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)",
+  "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)",
+  "actionSecondarySuccessPressed": "var(--base-green-solid-5)",
+  "actionPrimarySuccessDepressed": "var(--base-green-solid-12)",
+  "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)",
+  "actionSecondarySuccessDepressed": "var(--base-green-solid-6)",
+  "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)",
+  "actionSecondarySuccessHovered": "var(--base-green-solid-4)",
+  "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)",
+  "actionSecondarySuccessDefault": "var(--base-green-solid-3)",
+  "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)",
+  "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)",
+  "actionSecondaryBasicHovered": "var(--base-violet-solid-4)",
+  "actionSecondaryBasicPressed": "var(--base-violet-solid-5)",
+  "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)",
+  "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)",
+  "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)",
+  "actionTertiaryBasicHover": "var(--base-violet-alpha-2)",
+  "baseIndigoAlpha1": "#05058203",
+  "actionTertiaryInteractiveHover": "var(--base-blue-alpha-2)",
+  "actionTertiarySuccessHover": "var(--base-green-alpha-2)",
+  "baseIndigoAlpha2": "#054CFF08",
+  "actionTertiaryCriticalHover": "var(--base-red-alpha-2)",
+  "baseIndigoAlpha3": "#0144FF0F",
+  "baseIndigoAlpha4": "#0247F51A",
+  "baseIndigoAlpha5": "#023CEB26",
+  "backgroundAlphaDark": "var(--base-indigo-alpha-12)",
+  "baseIndigoAlpha6": "#013DE438",
+  "backgroundAlphaMedium": "var(--base-indigo-alpha-4)",
+  "baseIndigoAlpha7": "#0038E052",
+  "baseIndigoAlpha8": "#0134DB73",
+  "baseIndigoAlpha9": "#0031D2C2",
+  "backgroundSolidSubdued": "var(--base-indigo-solid-2)",
+  "backgroundSolidDark": "var(--base-indigo-solid-12)",
+  "backgroundSolidDefault": "var(--base-indigo-solid-3)",
+  "surfaceDefault": "var(--base-pure-white)",
+  "surfaceSubdued": "var(--base-gray-slate-solid-2)",
+  "baseIndigoAlpha10": "#002CBDC4",
+  "surfaceSelected": "var(--base-blue-solid-2)",
+  "baseIndigoAlpha11": "#00259ECC",
+  "baseIndigoAlpha12": "#000E3AF0",
+  "surfaceWarning": "var(--base-amber-solid-2)",
+  "baseBlueAlpha1": "#0582FF05",
+  "surfaceCritical": "var(--base-red-solid-2)",
+  "baseBlueAlpha2": "#0582FF0A",
+  "surfaceSuccess": "var(--base-green-solid-2)",
+  "baseBlueAlpha3": "#0280FF12",
+  "surfaceHighlightSubdued": "var(--base-violet-solid-2)",
+  "baseBlueAlpha4": "#0180FF1F",
+  "surfaceInteractive": "var(--base-blue-solid-2)",
+  "baseBlueAlpha5": "#0180EF30",
+  "surfaceHighlightDefault": "var(--base-violet-solid-4)",
+  "baseBlueAlpha6": "#0177E647",
+  "surfaceHighlightHovered": "var(--base-violet-solid-6)",
+  "baseBlueAlpha7": "#0077DF69",
+  "baseBlueAlpha8": "#0082E6A1",
+  "baseBlueAlpha9": "#0091FFFA",
+  "baseBlueAlpha10": "#0080F1FA",
+  "baseBlueAlpha11": "#0066DBFA",
+  "baseBlueAlpha12": "#002149FA",
+  "baseVioletAlpha1": "#5805AB03",
+  "baseVioletAlpha2": "#3705FF05",
+  "baseVioletAlpha3": "#3C00FF0D",
+  "baseVioletAlpha4": "#2E02F417",
+  "baseVioletAlpha5": "#2F01E821",
+  "baseVioletAlpha6": "#2A01DF30",
+  "baseVioletAlpha7": "#2B01D447",
+  "baseVioletAlpha8": "#2A00D066",
+  "baseVioletAlpha9": "#2500B6A8",
+  "baseVioletAlpha10": "#1F00A5B0",
+  "baseVioletAlpha11": "#180091BA",
+  "baseVioletAlpha12": "#0E003DED",
+  "baseGraySlateAlpha1": "#05448205",
+  "baseGraySlateAlpha2": "#05294D08",
+  "baseGraySlateAlpha3": "#0025490D",
+  "baseGraySlateAlpha4": "#021C3714",
+  "baseGraySlateAlpha5": "#0217351A",
+  "baseGraySlateAlpha6": "#01213921",
+  "baseGraySlateAlpha7": "#001A3329",
+  "baseGraySlateAlpha8": "#011E323D",
+  "baseGraySlateAlpha9": "#00111E78",
+  "baseGraySlateAlpha10": "#00101B82",
+  "baseGraySlateAlpha11": "#000E1896",
+  "baseGraySlateAlpha12": "#00080CED",
+  "baseGreenAlpha1": "#05C04305",
+  "baseGreenAlpha2": "#00C43B0D",
+  "baseGreenAlpha3": "#02BA3C17",
+  "baseGreenAlpha4": "#01A63521",
+  "baseGreenAlpha5": "#009B3633",
+  "baseGreenAlpha6": "#0193364A",
+  "baseGreenAlpha7": "#008C3D6E",
+  "baseGreenAlpha8": "#00934CA3",
+  "baseGreenAlpha9": "#008F4ACF",
+  "baseGreenAlpha10": "#008346D6",
+  "baseGreenAlpha11": "#006B3BE8",
+  "baseGreenAlpha12": "#002012EB",
+  "baseAmberAlpha1": "#C0820505",
+  "baseAmberAlpha2": "#FFAB0212",
+  "baseAmberAlpha3": "#FFBB012B",
+  "baseAmberAlpha4": "#FFB70042",
+  "baseAmberAlpha5": "#FFB3005E",
+  "baseAmberAlpha6": "#FFA20178",
+  "baseAmberAlpha7": "#EC8D009C",
+  "baseAmberAlpha8": "#EA8900D4",
+  "baseAmberAlpha9": "#FFA600DB",
+  "baseAmberAlpha10": "#FF9500E3",
+  "baseAmberAlpha11": "#AB5300FA",
+  "baseAmberAlpha12": "#481800F5",
+  "baseRedAlpha1": "#FF050503",
+  "baseRedAlpha2": "#FF050508",
+  "baseRedAlpha3": "#FF01010F",
+  "baseRedAlpha4": "#FF00001A",
+  "baseRedAlpha5": "#F2000026",
+  "baseRedAlpha6": "#E4010138",
+  "baseRedAlpha7": "#D9000452",
+  "baseRedAlpha8": "#D1000470",
+  "baseRedAlpha9": "#DB0007B8",
+  "baseRedAlpha10": "#D10007C2",
+  "baseRedAlpha11": "#C30007D4",
+  "baseRedAlpha12": "#280003ED",
   "mapareadistrictDefault": "var(--surface-highlight-default)",
   "mapareadistrictHover": "var(--action-secondary-success-hovered)",
   "mapareadistrictSelected": "var(--action-primary-basic-default)",
   "mapareadistrictDisabled": "var(--action-primary-disabled)",
-  "mapareadistrictBorder": "var(--lightmode-gray-slate-solid-9)",
+  "mapareadistrictBorder": "var(--base-gray-slate-solid-9)",
   "borderFocus": "#FFFFFF03",
+  "transparent": "#FFFFFF00",
+  "borderOnBGSubdued": "var(--base-gray-slate-solid-11)",
 }
diff --git a/examples/district/tailwind.config.js b/examples/district/tailwind.config.js
index 4ba7b059..3f40e170 100644
--- a/examples/district/tailwind.config.js
+++ b/examples/district/tailwind.config.js
@@ -54,7 +54,7 @@ module.exports = {
     },
     container: {
       center: true,
-      padding: '40px',
+      padding: '20px',
     },
   },
   plugins: [],
diff --git a/packages/opub-ui/src/components/Icon/Icon.tsx b/packages/opub-ui/src/components/Icon/Icon.tsx
index 2a2e5552..ae6bb4aa 100644
--- a/packages/opub-ui/src/components/Icon/Icon.tsx
+++ b/packages/opub-ui/src/components/Icon/Icon.tsx
@@ -14,6 +14,7 @@ export function Icon({
   stroke,
   fill,
   className,
+  noEvents,
 }: IconProps) {
   let sourceType: 'function' | 'placeholder' | 'external';
   if (typeof source === 'function' || typeof source === 'object') {
@@ -50,6 +51,7 @@ export function Icon({
         stroke={stroke ? stroke : 2}
         style={{
           '--fill': fill ? `var(--icon-${fill})` : 'none',
+          pointerEvents: noEvents ? 'none' : 'auto',
         }}
       />
     ),
diff --git a/packages/opub-ui/src/components/IconButton/IconButton.tsx b/packages/opub-ui/src/components/IconButton/IconButton.tsx
index 4abe380b..86d22430 100644
--- a/packages/opub-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/opub-ui/src/components/IconButton/IconButton.tsx
@@ -48,7 +48,7 @@ const IconButton = forwardRef((props: IconButtonProps, ref: any) => {
         }}
       >
         <Text visuallyHidden>{children}</Text>
-        <Icon source={icon} size={iconSize} color={color ? color : 'base'} />
+        <Icon source={icon} size={iconSize} color={color ? color : 'inherit'} />
       </button>
     </>
   );
diff --git a/packages/opub-ui/src/types/icon.tsx b/packages/opub-ui/src/types/icon.tsx
index 8bea208b..93864343 100644
--- a/packages/opub-ui/src/types/icon.tsx
+++ b/packages/opub-ui/src/types/icon.tsx
@@ -16,7 +16,8 @@ export type Color =
   | 'decorative2'
   | 'decorative3'
   | 'decorative4'
-  | 'decorative5';
+  | 'decorative5'
+  | string;
 
 export type IconSource =
   | React.FunctionComponent<React.SVGProps<SVGSVGElement>>
@@ -43,4 +44,6 @@ export interface IconProps {
   fill?: Color;
   /** class name  */
   className?: string;
+  /** Prevent click event */
+  noEvents?: boolean;
 }
diff --git a/packages/opub-ui/styles/_variables.css b/packages/opub-ui/styles/_variables.css
index e5ea60c1..cb627231 100644
--- a/packages/opub-ui/styles/_variables.css
+++ b/packages/opub-ui/styles/_variables.css
@@ -1,267 +1,277 @@
-:root {
-  --lightmode-indigo-solid-1: #fdfdfe;
-  --lightmode-indigo-solid-2: #f8faff;
-  --lightmode-indigo-solid-3: #f0f4ff;
-  --lightmode-indigo-solid-4: #e6edfe;
-  --lightmode-indigo-solid-5: #d9e2fc;
-  --lightmode-indigo-solid-6: #c6d4f9;
-  --lightmode-indigo-solid-7: #aec0f5;
-  --lightmode-indigo-solid-8: #8da4ef;
-  --lightmode-indigo-solid-9: #3e63dd;
-  --lightmode-indigo-solid-10: #3a5ccc;
-  --lightmode-indigo-solid-11: #3451b2;
-  --lightmode-indigo-solid-12: #101d46;
-  --lightmode-blue-solid-1: #fbfdff;
-  --lightmode-blue-solid-2: #f5faff;
-  --lightmode-blue-solid-3: #edf6ff;
-  --lightmode-blue-solid-4: #e1f0ff;
-  --lightmode-blue-solid-5: #cee7fe;
-  --lightmode-blue-solid-6: #b7d9f8;
-  --lightmode-blue-solid-7: #96c7f2;
-  --lightmode-blue-solid-8: #5eb0ef;
-  --lightmode-blue-solid-9: #0091ff;
-  --lightmode-blue-solid-10: #0081f1;
-  --lightmode-blue-solid-11: #006adc;
-  --lightmode-blue-solid-12: #00254d;
-  --lightmode-violet-solid-1: #fdfcfe;
-  --lightmode-violet-solid-2: #fbfaff;
-  --lightmode-violet-solid-3: #f5f2ff;
-  --lightmode-violet-solid-4: #ede9fe;
-  --lightmode-violet-solid-5: #e4defc;
-  --lightmode-violet-solid-6: #d7cff9;
-  --lightmode-violet-solid-7: #c4b8f3;
-  --lightmode-violet-solid-8: #aa99ec;
-  --lightmode-violet-solid-9: #6e56cf;
-  --lightmode-violet-solid-10: #644fc1;
-  --lightmode-violet-solid-11: #5746af;
-  --lightmode-violet-solid-12: #20134b;
-  --lightmode-gray-slate-solid-1: #fbfcfd;
-  --lightmode-gray-slate-solid-2: #f8f9fa;
-  --lightmode-gray-slate-solid-3: #f1f3f5;
-  --lightmode-gray-slate-solid-4: #eceef0;
-  --lightmode-gray-slate-solid-5: #e6e8eb;
-  --lightmode-gray-slate-solid-6: #dfe3e6;
-  --lightmode-gray-slate-solid-7: #d7dbdf;
-  --lightmode-gray-slate-solid-8: #c1c8cd;
-  --lightmode-gray-slate-solid-9: #889096;
-  --lightmode-gray-slate-solid-10: #7e868c;
-  --lightmode-gray-slate-solid-11: #687076;
-  --lightmode-gray-slate-solid-12: #11181c;
-  --lightmode-red-solid-1: #fffcfc;
-  --lightmode-red-solid-2: #fff8f8;
-  --lightmode-red-solid-3: #ffefef;
-  --lightmode-red-solid-4: #ffe5e5;
-  --lightmode-red-solid-5: #fdd8d8;
-  --lightmode-red-solid-6: #f9c6c6;
-  --lightmode-red-solid-7: #f3aeaf;
-  --lightmode-red-solid-8: #eb9091;
-  --lightmode-red-solid-9: #e5484d;
-  --lightmode-red-solid-10: #dc3d43;
-  --lightmode-red-solid-11: #cd2b31;
-  --lightmode-red-solid-12: #381316;
-  --lightmode-green-solid-1: #fbfefc;
-  --lightmode-green-solid-2: #f2fcf5;
-  --lightmode-green-solid-3: #e9f9ee;
-  --lightmode-green-solid-4: #ddf3e4;
-  --lightmode-green-solid-5: #ccebd7;
-  --lightmode-green-solid-6: #b4dfc4;
-  --lightmode-green-solid-7: #92ceac;
-  --lightmode-green-solid-8: #5bb98c;
-  --lightmode-green-solid-9: #30a46c;
-  --lightmode-green-solid-10: #299764;
-  --lightmode-green-solid-11: #18794e;
-  --lightmode-green-solid-12: #153226;
-  --lightmode-amber-solid-1: #fefdfb;
-  --lightmode-amber-solid-2: #fff9ed;
-  --lightmode-amber-solid-3: #fff4d5;
-  --lightmode-amber-solid-4: #ffecbc;
-  --lightmode-amber-solid-5: #ffe3a2;
-  --lightmode-amber-solid-6: #ffd386;
-  --lightmode-amber-solid-7: #f3ba63;
-  --lightmode-amber-solid-8: #ee9d2b;
-  --lightmode-amber-solid-9: #ffb224;
-  --lightmode-amber-solid-10: #ffa01c;
-  --lightmode-amber-solid-11: #ad5700;
-  --lightmode-amber-solid-12: #4e2009;
-  --lightmode-pure-white: #ffffff;
-  --lightmode-pure-black: #000000;
-  --text-default: var(--lightmode-gray-slate-solid-12);
-  --text-subdued: #3e4346;
-  --text-disabled: var(--lightmode-gray-slate-solid-9);
-  --text-critical: var(--lightmode-red-solid-11);
-  --text-warning: var(--lightmode-amber-solid-11);
-  --text-success: var(--lightmode-green-solid-11);
-  --text-highlight: var(--lightmode-violet-solid-11);
-  --text-interactive: var(--lightmode-blue-solid-11);
-  --text-onbg-disabled: var(--lightmode-gray-slate-solid-6);
-  --text-onbg-default: var(--lightmode-pure-white);
-  --border-default: var(--lightmode-gray-slate-solid-8);
-  --border-subdued: var(--lightmode-gray-slate-solid-7);
-  --border-disabled: var(--lightmode-gray-slate-solid-6);
-  --border-critical-default: var(--lightmode-red-solid-8);
-  --border-critical-disabled: var(--lightmode-red-solid-7);
-  --border-critical-subdued: var(--lightmode-red-solid-6);
-  --border-success-default: var(--lightmode-green-solid-8);
-  --border-success-subdued: var(--lightmode-green-solid-7);
-  --border-warning-default: var(--lightmode-amber-solid-8);
-  --border-warning-subdued: var(--lightmode-amber-solid-7);
-  --border-highlight-default: var(--lightmode-violet-solid-8);
-  --border-highlight-subdued: var(--lightmode-violet-solid-7);
-  --border-interactive-default: var(--lightmode-blue-solid-8);
-  --border-interactive-focused: var(--lightmode-blue-solid-7);
-  --icon-default: var(--lightmode-gray-slate-solid-11);
-  --icon-subdued: var(--lightmode-gray-slate-solid-10);
-  --icon-disabled: var(--lightmode-gray-slate-solid-9);
-  --icon-critical: var(--lightmode-red-solid-10);
-  --action-primary-basic-default: var(--lightmode-violet-solid-9);
-  --icon-warning: var(--lightmode-amber-solid-10);
-  --action-primary-basic-hovered: var(--lightmode-violet-solid-10);
-  --icon-success: var(--lightmode-green-solid-10);
-  --action-primary-basic-pressed: var(--lightmode-violet-solid-11);
-  --icon-highlight: var(--lightmode-violet-solid-10);
-  --icon-interactive: var(--lightmode-indigo-solid-11);
-  --action-primary-basic-depressed: var(--lightmode-violet-solid-12);
-  --action-primary-disabled: var(--lightmode-gray-slate-solid-9);
-  --action-primary-critical-default: var(--lightmode-red-solid-9);
-  --action-primary-success-default: var(--lightmode-green-solid-9);
-  --action-primary-critical-hovered: var(--lightmode-red-solid-10);
-  --action-secondary-critical-pressed: var(--lightmode-red-solid-5);
-  --action-secondary-critical-hovered: var(--lightmode-red-solid-4);
-  --action-secondary-critical-depressed: var(--lightmode-red-solid-6);
-  --action-secondary-critical-default: var(--lightmode-red-solid-3);
-  --action-primary-interactive-default: var(--lightmode-blue-solid-9);
-  --action-primary-interactive-hovered: var(--lightmode-blue-solid-10);
-  --action-primary-interactive-pressed: var(--lightmode-blue-solid-11);
-  --action-primary-interactive-depressed: var(--lightmode-blue-solid-12);
-  --action-primary-success-hovered: var(--lightmode-green-solid-10);
-  --action-secondary-basic-default: var(--lightmode-violet-solid-3);
-  --action-primary-critical-pressed: var(--lightmode-red-solid-11);
-  --action-primary-critical-depressed: var(--lightmode-red-solid-12);
-  --action-secondary-disabled: var(--lightmode-gray-slate-solid-3);
-  --action-primary-success-pressed: var(--lightmode-green-solid-11);
-  --action-secondary-interactive-depressed: var(--lightmode-blue-solid-6);
-  --action-secondary-success-depressed: var(--lightmode-green-solid-6);
-  --action-secondary-success-pressed: var(--lightmode-green-solid-5);
-  --action-primary-success-depressed: var(--lightmode-green-solid-12);
-  --action-secondary-interactive-hovered: var(--lightmode-blue-solid-4);
-  --action-secondary-neutral-default: var(--lightmode-gray-slate-solid-1);
-  --action-secondary-interactive-pressed: var(--lightmode-blue-solid-5);
-  --action-secondary-success-hovered: var(--lightmode-green-solid-4);
-  --action-secondary-success-default: var(--lightmode-green-solid-3);
-  --action-secondary-interactive-default: var(--lightmode-blue-solid-3);
-  --action-secondary-neutral-hovered: var(--lightmode-gray-slate-solid-2);
-  --action-secondary-neutral-pressed: var(--lightmode-gray-slate-solid-5);
-  --action-secondary-basic-depressed: var(--lightmode-violet-solid-6);
-  --action-secondary-basic-hovered: var(--lightmode-violet-solid-4);
-  --action-secondary-basic-pressed: var(--lightmode-violet-solid-5);
-  --action-secondary-neutral-depressed: var(--lightmode-gray-slate-solid-6);
-  --action-tertiary-basic-hover: var(--lightmode-violet-alpha-2);
-  --lightmode-indigo-alpha-1: #05058203;
-  --action-tertiary-interactive-hover: var(--lightmode-blue-alpha-2);
-  --lightmode-indigo-alpha-2: #054cff08;
-  --action-tertiary-success-hover: var(--lightmode-green-alpha-2);
-  --action-tertiary-critical-hover: var(--lightmode-red-alpha-2);
-  --lightmode-indigo-alpha-3: #0144ff0f;
-  --lightmode-indigo-alpha-4: #0247f51a;
-  --lightmode-indigo-alpha-5: #023ceb26;
-  --lightmode-indigo-alpha-6: #013de438;
-  --lightmode-indigo-alpha-7: #0038e052;
-  --lightmode-indigo-alpha-8: #0134db73;
-  --lightmode-indigo-alpha-9: #0031d2c2;
-  --background-subdued: var(--lightmode-indigo-solid-2);
-  --background-dark: var(--lightmode-indigo-solid-12);
-  --background-default: var(--lightmode-indigo-solid-3);
-  --surface-default: var(--lightmode-pure-white);
-  --lightmode-indigo-alpha-10: #002cbdc4;
-  --surface-subdued: var(--lightmode-gray-slate-solid-2);
-  --lightmode-indigo-alpha-11: #00259ecc;
-  --surface-selected: var(--lightmode-blue-solid-2);
-  --lightmode-indigo-alpha-12: #000e3af0;
-  --surface-warning: var(--lightmode-amber-solid-2);
-  --surface-critical: var(--lightmode-red-solid-2);
-  --lightmode-blue-alpha-1: #0582ff05;
-  --lightmode-blue-alpha-2: #0582ff0a;
-  --surface-success: var(--lightmode-green-solid-2);
-  --surface-highlight-subdued: var(--lightmode-violet-solid-2);
-  --lightmode-blue-alpha-3: #0280ff12;
-  --lightmode-blue-alpha-4: #0180ff1f;
-  --surface-interactive: var(--lightmode-blue-solid-2);
-  --surface-highlight-default: var(--lightmode-violet-solid-4);
-  --lightmode-blue-alpha-5: #0180ef30;
-  --surface-highlight-hovered: var(--lightmode-violet-solid-6);
-  --lightmode-blue-alpha-6: #0177e647;
-  --lightmode-blue-alpha-7: #0077df69;
-  --lightmode-blue-alpha-8: #0082e6a1;
-  --lightmode-blue-alpha-9: #0091fffa;
-  --lightmode-blue-alpha-10: #0080f1fa;
-  --lightmode-blue-alpha-11: #0066dbfa;
-  --lightmode-blue-alpha-12: #002149fa;
-  --lightmode-violet-alpha-1: #5805ab03;
-  --lightmode-violet-alpha-2: #3705ff05;
-  --lightmode-violet-alpha-3: #3c00ff0d;
-  --lightmode-violet-alpha-4: #2e02f417;
-  --lightmode-violet-alpha-5: #2f01e821;
-  --lightmode-violet-alpha-6: #2a01df30;
-  --lightmode-violet-alpha-7: #2b01d447;
-  --lightmode-violet-alpha-8: #2a00d066;
-  --lightmode-violet-alpha-9: #2500b6a8;
-  --lightmode-violet-alpha-10: #1f00a5b0;
-  --lightmode-violet-alpha-11: #180091ba;
-  --lightmode-violet-alpha-12: #0e003ded;
-  --lightmode-gray-slate-alpha-1: #05448205;
-  --lightmode-gray-slate-alpha-2: #05294d08;
-  --lightmode-gray-slate-alpha-3: #0025490d;
-  --lightmode-gray-slate-alpha-4: #021c3714;
-  --lightmode-gray-slate-alpha-5: #0217351a;
-  --lightmode-gray-slate-alpha-6: #01213921;
-  --lightmode-gray-slate-alpha-7: #001a3329;
-  --lightmode-gray-slate-alpha-8: #011e323d;
-  --lightmode-gray-slate-alpha-9: #00111e78;
-  --lightmode-gray-slate-alpha-10: #00101b82;
-  --lightmode-gray-slate-alpha-11: #000e1896;
-  --lightmode-gray-slate-alpha-12: #00080ced;
-  --lightmode-green-alpha-1: #05c04305;
-  --lightmode-green-alpha-2: #00c43b0d;
-  --lightmode-green-alpha-3: #02ba3c17;
-  --lightmode-green-alpha-4: #01a63521;
-  --lightmode-green-alpha-5: #009b3633;
-  --lightmode-green-alpha-6: #0193364a;
-  --lightmode-green-alpha-7: #008c3d6e;
-  --lightmode-green-alpha-8: #00934ca3;
-  --lightmode-green-alpha-9: #008f4acf;
-  --lightmode-green-alpha-10: #008346d6;
-  --lightmode-green-alpha-11: #006b3be8;
-  --lightmode-green-alpha-12: #002012eb;
-  --lightmode-amber-alpha-1: #c0820505;
-  --lightmode-amber-alpha-2: #ffab0212;
-  --lightmode-amber-alpha-3: #ffbb012b;
-  --lightmode-amber-alpha-4: #ffb70042;
-  --lightmode-amber-alpha-5: #ffb3005e;
-  --lightmode-amber-alpha-6: #ffa20178;
-  --lightmode-amber-alpha-7: #ec8d009c;
-  --lightmode-amber-alpha-8: #ea8900d4;
-  --lightmode-amber-alpha-9: #ffa600db;
-  --lightmode-amber-alpha-10: #ff9500e3;
-  --lightmode-amber-alpha-11: #ab5300fa;
-  --lightmode-amber-alpha-12: #481800f5;
-  --lightmode-red-alpha-1: #ff050503;
-  --lightmode-red-alpha-2: #ff050508;
-  --lightmode-red-alpha-3: #ff01010f;
-  --lightmode-red-alpha-4: #ff00001a;
-  --lightmode-red-alpha-5: #f2000026;
-  --lightmode-red-alpha-6: #e4010138;
-  --lightmode-red-alpha-7: #d9000452;
-  --lightmode-red-alpha-8: #d1000470;
-  --lightmode-red-alpha-9: #db0007b8;
-  --lightmode-red-alpha-10: #d10007c2;
-  --lightmode-red-alpha-11: #c30007d4;
-  --lightmode-red-alpha-12: #280003ed;
+:root { 
+  --base-indigo-solid-1: #FDFDFE;
+  --base-indigo-solid-2: #F8FAFF;
+  --base-indigo-solid-3: #F0F4FF;
+  --base-indigo-solid-4: #E6EDFE;
+  --base-indigo-solid-5: #D9E2FC;
+  --base-indigo-solid-6: #C6D4F9;
+  --base-indigo-solid-7: #AEC0F5;
+  --base-indigo-solid-8: #8DA4EF;
+  --base-indigo-solid-9: #3E63DD;
+  --base-indigo-solid-10: #3A5CCC;
+  --base-indigo-solid-11: #3451B2;
+  --base-indigo-solid-12: #101D46;
+  --base-blue-solid-1: #FBFDFF;
+  --base-blue-solid-2: #F5FAFF;
+  --base-blue-solid-3: #EDF6FF;
+  --base-blue-solid-4: #E1F0FF;
+  --base-blue-solid-5: #CEE7FE;
+  --base-blue-solid-6: #B7D9F8;
+  --base-blue-solid-7: #96C7F2;
+  --base-blue-solid-8: #5EB0EF;
+  --base-blue-solid-9: #0091FF;
+  --base-blue-solid-10: #0081F1;
+  --base-blue-solid-11: #006ADC;
+  --base-blue-solid-12: #00254D;
+  --base-violet-solid-1: #FDFCFE;
+  --base-violet-solid-2: #FBFAFF;
+  --base-violet-solid-3: #F5F2FF;
+  --base-violet-solid-4: #EDE9FE;
+  --base-violet-solid-5: #E4DEFC;
+  --base-violet-solid-6: #D7CFF9;
+  --base-violet-solid-7: #C4B8F3;
+  --base-violet-solid-8: #AA99EC;
+  --base-violet-solid-9: #6E56CF;
+  --base-violet-solid-10: #644FC1;
+  --base-violet-solid-11: #5746AF;
+  --base-violet-solid-12: #20134B;
+  --base-gray-slate-solid-1: #FBFCFD;
+  --base-gray-slate-solid-2: #F8F9FA;
+  --base-gray-slate-solid-3: #F1F3F5;
+  --base-gray-slate-solid-4: #ECEEF0;
+  --base-gray-slate-solid-5: #E6E8EB;
+  --base-gray-slate-solid-6: #DFE3E6;
+  --base-gray-slate-solid-7: #D7DBDF;
+  --base-gray-slate-solid-8: #C1C8CD;
+  --base-gray-slate-solid-9: #889096;
+  --base-gray-slate-solid-10: #7E868C;
+  --base-gray-slate-solid-11: #687076;
+  --base-gray-slate-solid-12: #11181C;
+  --base-red-solid-1: #FFFCFC;
+  --base-red-solid-2: #FFF8F8;
+  --base-red-solid-3: #FFEFEF;
+  --base-red-solid-4: #FFE5E5;
+  --base-red-solid-5: #FDD8D8;
+  --base-red-solid-6: #F9C6C6;
+  --base-red-solid-7: #F3AEAF;
+  --base-red-solid-8: #EB9091;
+  --base-red-solid-9: #E5484D;
+  --base-red-solid-10: #DC3D43;
+  --base-red-solid-11: #CD2B31;
+  --base-red-solid-12: #381316;
+  --base-green-solid-1: #FBFEFC;
+  --base-green-solid-2: #F2FCF5;
+  --base-green-solid-3: #E9F9EE;
+  --base-green-solid-4: #DDF3E4;
+  --base-green-solid-5: #CCEBD7;
+  --base-green-solid-6: #B4DFC4;
+  --base-green-solid-7: #92CEAC;
+  --base-green-solid-8: #5BB98C;
+  --base-green-solid-9: #30A46C;
+  --base-green-solid-10: #299764;
+  --base-green-solid-11: #18794E;
+  --base-green-solid-12: #153226;
+  --base-amber-solid-1: #FEFDFB;
+  --base-amber-solid-2: #FFF9ED;
+  --base-amber-solid-3: #FFF4D5;
+  --base-amber-solid-4: #FFECBC;
+  --base-amber-solid-5: #FFE3A2;
+  --base-amber-solid-6: #FFD386;
+  --base-amber-solid-7: #F3BA63;
+  --base-amber-solid-8: #EE9D2B;
+  --base-amber-solid-9: #FFB224;
+  --base-amber-solid-10: #FFA01C;
+  --base-amber-solid-11: #AD5700;
+  --base-amber-solid-12: #4E2009;
+  --base-pure-white: #FFFFFF;
+  --base-pure-black: #000000;
+  --text-default: var(--base-gray-slate-solid-12);
+  --text-medium: var(--base-gray-slate-solid-11);
+  --text-subdued: #3E4346;
+  --text-disabled: var(--base-gray-slate-solid-9);
+  --text-critical: var(--base-red-solid-11);
+  --text-warning: var(--base-amber-solid-11);
+  --text-success: var(--base-green-solid-11);
+  --text-highlight: var(--base-violet-solid-11);
+  --text-interactive: var(--base-blue-solid-11);
+  --text-onbg-default: var(--base-gray-slate-solid-1);
+  --text-onbg-disabled: var(--base-gray-slate-solid-9);
+  --border-default: var(--base-gray-slate-solid-8);
+  --border-subdued: var(--base-gray-slate-solid-7);
+  --border-disabled: var(--base-gray-slate-solid-6);
+  --border-critical-default: var(--base-red-solid-8);
+  --border-critical-disabled: var(--base-red-solid-7);
+  --border-critical-subdued: var(--base-red-solid-6);
+  --border-success-default: var(--base-green-solid-8);
+  --border-success-subdued: var(--base-green-solid-7);
+  --border-warning-default: var(--base-amber-solid-8);
+  --border-warning-subdued: var(--base-amber-solid-7);
+  --border-highlight-default: var(--base-violet-solid-8);
+  --border-highlight-subdued: var(--base-violet-solid-7);
+  --border-highlight-onbg-subdued: var(--base-violet-solid-9);
+  --border-highlight-onbg-default: var(--base-violet-solid-7);
+  --border-interactive-default: var(--base-blue-solid-8);
+  --border-interactive-focused: var(--base-blue-solid-7);
+  --icon-default: var(--base-gray-slate-solid-11);
+  --icon-subdued: var(--base-gray-slate-solid-10);
+  --icon-disabled: var(--base-gray-slate-solid-9);
+  --icon-critical: var(--base-red-solid-10);
+  --action-primary-basic-default: var(--base-violet-solid-9);
+  --icon-warning: var(--base-amber-solid-10);
+  --action-primary-basic-hovered: var(--base-violet-solid-10);
+  --icon-success: var(--base-green-solid-10);
+  --action-primary-basic-pressed: var(--base-violet-solid-11);
+  --icon-highlight: var(--base-violet-solid-10);
+  --icon-interactive: var(--base-indigo-solid-11);
+  --action-primary-basic-depressed: var(--base-violet-solid-12);
+  --icon-onbg-default: var(--base-gray-slate-solid-1);
+  --action-primary-disabled: var(--base-gray-slate-solid-9);
+  --icon-onbg-subdued: var(--base-gray-slate-solid-4);
+  --action-primary-critical-default: var(--base-red-solid-9);
+  --icon-onbg-disabled: var(--base-gray-slate-solid-9);
+  --action-primary-success-default: var(--base-green-solid-9);
+  --action-primary-critical-hovered: var(--base-red-solid-10);
+  --action-secondary-critical-pressed: var(--base-red-solid-5);
+  --action-secondary-critical-hovered: var(--base-red-solid-4);
+  --action-secondary-critical-depressed: var(--base-red-solid-6);
+  --action-primary-interactive-default: var(--base-blue-solid-9);
+  --action-secondary-critical-default: var(--base-red-solid-3);
+  --action-primary-interactive-hovered: var(--base-blue-solid-10);
+  --action-primary-interactive-pressed: var(--base-blue-solid-11);
+  --action-primary-interactive-depressed: var(--base-blue-solid-12);
+  --action-primary-critical-pressed: var(--base-red-solid-11);
+  --action-secondary-basic-default: var(--base-violet-solid-3);
+  --action-primary-success-hovered: var(--base-green-solid-10);
+  --action-primary-success-pressed: var(--base-green-solid-11);
+  --action-secondary-disabled: var(--base-gray-slate-solid-3);
+  --action-primary-critical-depressed: var(--base-red-solid-12);
+  --action-secondary-interactive-pressed: var(--base-blue-solid-5);
+  --action-secondary-success-pressed: var(--base-green-solid-5);
+  --action-primary-success-depressed: var(--base-green-solid-12);
+  --action-secondary-interactive-hovered: var(--base-blue-solid-4);
+  --action-secondary-success-depressed: var(--base-green-solid-6);
+  --action-secondary-neutral-default: var(--base-gray-slate-solid-1);
+  --action-secondary-success-hovered: var(--base-green-solid-4);
+  --action-secondary-interactive-depressed: var(--base-blue-solid-6);
+  --action-secondary-success-default: var(--base-green-solid-3);
+  --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2);
+  --action-secondary-interactive-default: var(--base-blue-solid-3);
+  --action-secondary-basic-hovered: var(--base-violet-solid-4);
+  --action-secondary-basic-pressed: var(--base-violet-solid-5);
+  --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5);
+  --action-secondary-basic-depressed: var(--base-violet-solid-6);
+  --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6);
+  --action-tertiary-basic-hover: var(--base-violet-alpha-2);
+  --base-indigo-alpha-1: #05058203;
+  --action-tertiary-interactive-hover: var(--base-blue-alpha-2);
+  --action-tertiary-success-hover: var(--base-green-alpha-2);
+  --base-indigo-alpha-2: #054CFF08;
+  --action-tertiary-critical-hover: var(--base-red-alpha-2);
+  --base-indigo-alpha-3: #0144FF0F;
+  --base-indigo-alpha-4: #0247F51A;
+  --base-indigo-alpha-5: #023CEB26;
+  --background-alpha-dark: var(--base-indigo-alpha-12);
+  --base-indigo-alpha-6: #013DE438;
+  --background-alpha-medium: var(--base-indigo-alpha-4);
+  --base-indigo-alpha-7: #0038E052;
+  --base-indigo-alpha-8: #0134DB73;
+  --base-indigo-alpha-9: #0031D2C2;
+  --background-solid-subdued: var(--base-indigo-solid-2);
+  --background-solid-dark: var(--base-indigo-solid-12);
+  --background-solid-default: var(--base-indigo-solid-3);
+  --surface-default: var(--base-pure-white);
+  --surface-subdued: var(--base-gray-slate-solid-2);
+  --base-indigo-alpha-10: #002CBDC4;
+  --surface-selected: var(--base-blue-solid-2);
+  --base-indigo-alpha-11: #00259ECC;
+  --base-indigo-alpha-12: #000E3AF0;
+  --surface-warning: var(--base-amber-solid-2);
+  --base-blue-alpha-1: #0582FF05;
+  --surface-critical: var(--base-red-solid-2);
+  --base-blue-alpha-2: #0582FF0A;
+  --surface-success: var(--base-green-solid-2);
+  --base-blue-alpha-3: #0280FF12;
+  --surface-highlight-subdued: var(--base-violet-solid-2);
+  --base-blue-alpha-4: #0180FF1F;
+  --surface-interactive: var(--base-blue-solid-2);
+  --base-blue-alpha-5: #0180EF30;
+  --surface-highlight-default: var(--base-violet-solid-4);
+  --base-blue-alpha-6: #0177E647;
+  --surface-highlight-hovered: var(--base-violet-solid-6);
+  --base-blue-alpha-7: #0077DF69;
+  --base-blue-alpha-8: #0082E6A1;
+  --base-blue-alpha-9: #0091FFFA;
+  --base-blue-alpha-10: #0080F1FA;
+  --base-blue-alpha-11: #0066DBFA;
+  --base-blue-alpha-12: #002149FA;
+  --base-violet-alpha-1: #5805AB03;
+  --base-violet-alpha-2: #3705FF05;
+  --base-violet-alpha-3: #3C00FF0D;
+  --base-violet-alpha-4: #2E02F417;
+  --base-violet-alpha-5: #2F01E821;
+  --base-violet-alpha-6: #2A01DF30;
+  --base-violet-alpha-7: #2B01D447;
+  --base-violet-alpha-8: #2A00D066;
+  --base-violet-alpha-9: #2500B6A8;
+  --base-violet-alpha-10: #1F00A5B0;
+  --base-violet-alpha-11: #180091BA;
+  --base-violet-alpha-12: #0E003DED;
+  --base-gray-slate-alpha-1: #05448205;
+  --base-gray-slate-alpha-2: #05294D08;
+  --base-gray-slate-alpha-3: #0025490D;
+  --base-gray-slate-alpha-4: #021C3714;
+  --base-gray-slate-alpha-5: #0217351A;
+  --base-gray-slate-alpha-6: #01213921;
+  --base-gray-slate-alpha-7: #001A3329;
+  --base-gray-slate-alpha-8: #011E323D;
+  --base-gray-slate-alpha-9: #00111E78;
+  --base-gray-slate-alpha-10: #00101B82;
+  --base-gray-slate-alpha-11: #000E1896;
+  --base-gray-slate-alpha-12: #00080CED;
+  --base-green-alpha-1: #05C04305;
+  --base-green-alpha-2: #00C43B0D;
+  --base-green-alpha-3: #02BA3C17;
+  --base-green-alpha-4: #01A63521;
+  --base-green-alpha-5: #009B3633;
+  --base-green-alpha-6: #0193364A;
+  --base-green-alpha-7: #008C3D6E;
+  --base-green-alpha-8: #00934CA3;
+  --base-green-alpha-9: #008F4ACF;
+  --base-green-alpha-10: #008346D6;
+  --base-green-alpha-11: #006B3BE8;
+  --base-green-alpha-12: #002012EB;
+  --base-amber-alpha-1: #C0820505;
+  --base-amber-alpha-2: #FFAB0212;
+  --base-amber-alpha-3: #FFBB012B;
+  --base-amber-alpha-4: #FFB70042;
+  --base-amber-alpha-5: #FFB3005E;
+  --base-amber-alpha-6: #FFA20178;
+  --base-amber-alpha-7: #EC8D009C;
+  --base-amber-alpha-8: #EA8900D4;
+  --base-amber-alpha-9: #FFA600DB;
+  --base-amber-alpha-10: #FF9500E3;
+  --base-amber-alpha-11: #AB5300FA;
+  --base-amber-alpha-12: #481800F5;
+  --base-red-alpha-1: #FF050503;
+  --base-red-alpha-2: #FF050508;
+  --base-red-alpha-3: #FF01010F;
+  --base-red-alpha-4: #FF00001A;
+  --base-red-alpha-5: #F2000026;
+  --base-red-alpha-6: #E4010138;
+  --base-red-alpha-7: #D9000452;
+  --base-red-alpha-8: #D1000470;
+  --base-red-alpha-9: #DB0007B8;
+  --base-red-alpha-10: #D10007C2;
+  --base-red-alpha-11: #C30007D4;
+  --base-red-alpha-12: #280003ED;
   --mapareadistrict-default: var(--surface-highlight-default);
   --mapareadistrict-hover: var(--action-secondary-success-hovered);
   --mapareadistrict-selected: var(--action-primary-basic-default);
   --mapareadistrict-disabled: var(--action-primary-disabled);
-  --mapareadistrict-border: var(--lightmode-gray-slate-solid-9);
-  --border-focus: #ffffff03;
+  --mapareadistrict-border: var(--base-gray-slate-solid-9);
+  --border-focus: #FFFFFF03;
+  --transparent: #FFFFFF00;
+  --border-onbg-subdued: var(--base-gray-slate-solid-11);
 
   --space-0: 0px;
   --space-025: 1px;
@@ -293,35 +303,27 @@
   --border-width-2: var(--space-05);
   --border-width-4: var(--space-1);
 
-  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2),
-    0px 0px 1px 0px rgba(0, 0, 0, 0.2);
-  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2),
-    0px 2px 16px 0px rgba(32, 42, 54, 0.08);
+  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
+  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), 0px 2px 16px 0px rgba(32, 42, 54, 0.08);
   --shadow-inset-basic: inset -1px 0px 0px 0px rgba(228, 229, 231, 1);
   --shadow-inset-button: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
   --shadow-button-pressed: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
   --shadow-button-default: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08),
-    0px 0px 0px 1px rgba(6, 44, 82, 0.1);
+  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.1);
   --shadow-basic-faint: 0px 1px 0px 0px rgba(22, 29, 37, 0.05);
   --shadow-basic-transparent: 0px 0px 0px 0px rgba(0, 0, 0, 0);
   --shadow-basic-xs: 0px 0px 2px 0px rgba(31, 33, 36, 0.24);
   --shadow-basic-sm: 0px 1px 1px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 2px 4px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 4px 12px 0px rgba(31, 33, 36, 0.2);
-  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15),
-    0px 4px 18px -2px rgba(31, 33, 36, 0.08);
-  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16),
-    0px 32px 32px 0px rgba(31, 33, 36, 0.15);
-  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12),
-    0px 3px 6px -3px rgba(23, 24, 24, 0.08);
-  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15),
-    0px 0px 5px 0px rgba(23, 24, 24, 0.05);
+  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), 0px 2px 4px 0px rgba(31, 33, 36, 0.1);
+  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), 0px 4px 12px 0px rgba(31, 33, 36, 0.2);
+  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), 0px 4px 18px -2px rgba(31, 33, 36, 0.08);
+  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), 0px 32px 32px 0px rgba(31, 33, 36, 0.15);
+  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), 0px 3px 6px -3px rgba(23, 24, 24, 0.08);
+  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(23, 24, 24, 0.05);
   --shadow-element-topnav: 0px 2px 2px -1px rgba(0, 0, 0, 0.15);
   --shadow-element-focus: 0px 0px 0px 2px rgba(0, 145, 255, 1);
 
+
   --z-1: 100;
   --z-2: 400;
   --z-3: 513;
diff --git a/packages/opub-ui/styles/tailwind/border-radius.js b/packages/opub-ui/styles/tailwind/border-radius.js
new file mode 100644
index 00000000..fa5e5856
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/border-radius.js
@@ -0,0 +1,11 @@
+module.exports = { 
+  "0": "var(--space-0)",
+  "05": "var(--space-05)",
+  "1": "var(--space-1)",
+  "2": "var(--space-2)",
+  "3": "var(--space-3)",
+  "4": "var(--space-4)",
+  "5": "var(--space-5)",
+  "6": "var(--space-6)",
+  "full": "9999px",
+}
diff --git a/packages/opub-ui/styles/tailwind/border-width.js b/packages/opub-ui/styles/tailwind/border-width.js
new file mode 100644
index 00000000..018a18b8
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/border-width.js
@@ -0,0 +1,5 @@
+module.exports = { 
+  "1": "var(--space-025)",
+  "2": "var(--space-05)",
+  "4": "var(--space-1)",
+}
diff --git a/packages/opub-ui/styles/tailwind/box-shadow.js b/packages/opub-ui/styles/tailwind/box-shadow.js
new file mode 100644
index 00000000..32413699
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/box-shadow.js
@@ -0,0 +1,21 @@
+module.exports = { 
+  "shadowModal": "var(--shadow-modal)",
+  "shadowLayer": "var(--shadow-layer)",
+  "insetBasic": "var(--shadow-inset-basic)",
+  "insetButton": "var(--shadow-inset-button)",
+  "buttonPressed": "var(--shadow-button-pressed)",
+  "buttonDefault": "var(--shadow-button-default)",
+  "basicDeep": "var(--shadow-basic-deep)",
+  "basicFaint": "var(--shadow-basic-faint)",
+  "basicTransparent": "var(--shadow-basic-transparent)",
+  "basicXs": "var(--shadow-basic-xs)",
+  "basicSm": "var(--shadow-basic-sm)",
+  "basicMd": "var(--shadow-basic-md)",
+  "basicLg": "var(--shadow-basic-lg)",
+  "basicXl": "var(--shadow-basic-xl)",
+  "basic2xl": "var(--shadow-basic-2xl)",
+  "elementPopover": "var(--shadow-element-popover)",
+  "elementCard": "var(--shadow-element-card)",
+  "elementTopNav": "var(--shadow-element-topnav)",
+  "elementFocus": "var(--shadow-element-focus)",
+}
diff --git a/packages/opub-ui/styles/tailwind/color.js b/packages/opub-ui/styles/tailwind/color.js
new file mode 100644
index 00000000..ded0b84d
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/color.js
@@ -0,0 +1,275 @@
+module.exports = { 
+  "baseIndigoSolid1": "#FDFDFE",
+  "baseIndigoSolid2": "#F8FAFF",
+  "baseIndigoSolid3": "#F0F4FF",
+  "baseIndigoSolid4": "#E6EDFE",
+  "baseIndigoSolid5": "#D9E2FC",
+  "baseIndigoSolid6": "#C6D4F9",
+  "baseIndigoSolid7": "#AEC0F5",
+  "baseIndigoSolid8": "#8DA4EF",
+  "baseIndigoSolid9": "#3E63DD",
+  "baseIndigoSolid10": "#3A5CCC",
+  "baseIndigoSolid11": "#3451B2",
+  "baseIndigoSolid12": "#101D46",
+  "baseBlueSolid1": "#FBFDFF",
+  "baseBlueSolid2": "#F5FAFF",
+  "baseBlueSolid3": "#EDF6FF",
+  "baseBlueSolid4": "#E1F0FF",
+  "baseBlueSolid5": "#CEE7FE",
+  "baseBlueSolid6": "#B7D9F8",
+  "baseBlueSolid7": "#96C7F2",
+  "baseBlueSolid8": "#5EB0EF",
+  "baseBlueSolid9": "#0091FF",
+  "baseBlueSolid10": "#0081F1",
+  "baseBlueSolid11": "#006ADC",
+  "baseBlueSolid12": "#00254D",
+  "baseVioletSolid1": "#FDFCFE",
+  "baseVioletSolid2": "#FBFAFF",
+  "baseVioletSolid3": "#F5F2FF",
+  "baseVioletSolid4": "#EDE9FE",
+  "baseVioletSolid5": "#E4DEFC",
+  "baseVioletSolid6": "#D7CFF9",
+  "baseVioletSolid7": "#C4B8F3",
+  "baseVioletSolid8": "#AA99EC",
+  "baseVioletSolid9": "#6E56CF",
+  "baseVioletSolid10": "#644FC1",
+  "baseVioletSolid11": "#5746AF",
+  "baseVioletSolid12": "#20134B",
+  "baseGraySlateSolid1": "#FBFCFD",
+  "baseGraySlateSolid2": "#F8F9FA",
+  "baseGraySlateSolid3": "#F1F3F5",
+  "baseGraySlateSolid4": "#ECEEF0",
+  "baseGraySlateSolid5": "#E6E8EB",
+  "baseGraySlateSolid6": "#DFE3E6",
+  "baseGraySlateSolid7": "#D7DBDF",
+  "baseGraySlateSolid8": "#C1C8CD",
+  "baseGraySlateSolid9": "#889096",
+  "baseGraySlateSolid10": "#7E868C",
+  "baseGraySlateSolid11": "#687076",
+  "baseGraySlateSolid12": "#11181C",
+  "baseRedSolid1": "#FFFCFC",
+  "baseRedSolid2": "#FFF8F8",
+  "baseRedSolid3": "#FFEFEF",
+  "baseRedSolid4": "#FFE5E5",
+  "baseRedSolid5": "#FDD8D8",
+  "baseRedSolid6": "#F9C6C6",
+  "baseRedSolid7": "#F3AEAF",
+  "baseRedSolid8": "#EB9091",
+  "baseRedSolid9": "#E5484D",
+  "baseRedSolid10": "#DC3D43",
+  "baseRedSolid11": "#CD2B31",
+  "baseRedSolid12": "#381316",
+  "baseGreenSolid1": "#FBFEFC",
+  "baseGreenSolid2": "#F2FCF5",
+  "baseGreenSolid3": "#E9F9EE",
+  "baseGreenSolid4": "#DDF3E4",
+  "baseGreenSolid5": "#CCEBD7",
+  "baseGreenSolid6": "#B4DFC4",
+  "baseGreenSolid7": "#92CEAC",
+  "baseGreenSolid8": "#5BB98C",
+  "baseGreenSolid9": "#30A46C",
+  "baseGreenSolid10": "#299764",
+  "baseGreenSolid11": "#18794E",
+  "baseGreenSolid12": "#153226",
+  "baseAmberSolid1": "#FEFDFB",
+  "baseAmberSolid2": "#FFF9ED",
+  "baseAmberSolid3": "#FFF4D5",
+  "baseAmberSolid4": "#FFECBC",
+  "baseAmberSolid5": "#FFE3A2",
+  "baseAmberSolid6": "#FFD386",
+  "baseAmberSolid7": "#F3BA63",
+  "baseAmberSolid8": "#EE9D2B",
+  "baseAmberSolid9": "#FFB224",
+  "baseAmberSolid10": "#FFA01C",
+  "baseAmberSolid11": "#AD5700",
+  "baseAmberSolid12": "#4E2009",
+  "basePureWhite": "#FFFFFF",
+  "basePureBlack": "#000000",
+  "textDefault": "var(--base-gray-slate-solid-12)",
+  "textMedium": "var(--base-gray-slate-solid-11)",
+  "textSubdued": "#3E4346",
+  "textDisabled": "var(--base-gray-slate-solid-9)",
+  "textCritical": "var(--base-red-solid-11)",
+  "textWarning": "var(--base-amber-solid-11)",
+  "textSuccess": "var(--base-green-solid-11)",
+  "textHighlight": "var(--base-violet-solid-11)",
+  "textInteractive": "var(--base-blue-solid-11)",
+  "textOnBGDefault": "var(--base-gray-slate-solid-1)",
+  "textOnBGDisabled": "var(--base-gray-slate-solid-9)",
+  "borderDefault": "var(--base-gray-slate-solid-8)",
+  "borderSubdued": "var(--base-gray-slate-solid-7)",
+  "borderDisabled": "var(--base-gray-slate-solid-6)",
+  "borderCriticalDefault": "var(--base-red-solid-8)",
+  "borderCriticalDisabled": "var(--base-red-solid-7)",
+  "borderCriticalSubdued": "var(--base-red-solid-6)",
+  "borderSuccessDefault": "var(--base-green-solid-8)",
+  "borderSuccessSubdued": "var(--base-green-solid-7)",
+  "borderWarningDefault": "var(--base-amber-solid-8)",
+  "borderWarningSubdued": "var(--base-amber-solid-7)",
+  "borderHighlightDefault": "var(--base-violet-solid-8)",
+  "borderHighlightSubdued": "var(--base-violet-solid-7)",
+  "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)",
+  "borderHighlightOnBGDefault": "var(--base-violet-solid-7)",
+  "borderInteractiveDefault": "var(--base-blue-solid-8)",
+  "borderInteractiveFocused": "var(--base-blue-solid-7)",
+  "iconDefault": "var(--base-gray-slate-solid-11)",
+  "iconSubdued": "var(--base-gray-slate-solid-10)",
+  "iconDisabled": "var(--base-gray-slate-solid-9)",
+  "iconCritical": "var(--base-red-solid-10)",
+  "actionPrimaryBasicDefault": "var(--base-violet-solid-9)",
+  "iconWarning": "var(--base-amber-solid-10)",
+  "actionPrimaryBasicHovered": "var(--base-violet-solid-10)",
+  "iconSuccess": "var(--base-green-solid-10)",
+  "actionPrimaryBasicPressed": "var(--base-violet-solid-11)",
+  "iconHighlight": "var(--base-violet-solid-10)",
+  "iconInteractive": "var(--base-indigo-solid-11)",
+  "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)",
+  "iconOnBGDefault": "var(--base-gray-slate-solid-1)",
+  "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)",
+  "iconOnBGSubdued": "var(--base-gray-slate-solid-4)",
+  "actionPrimaryCriticalDefault": "var(--base-red-solid-9)",
+  "iconOnBGDisabled": "var(--base-gray-slate-solid-9)",
+  "actionPrimarySuccessDefault": "var(--base-green-solid-9)",
+  "actionPrimaryCriticalHovered": "var(--base-red-solid-10)",
+  "actionSecondaryCriticalPressed": "var(--base-red-solid-5)",
+  "actionSecondaryCriticalHovered": "var(--base-red-solid-4)",
+  "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)",
+  "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)",
+  "actionSecondaryCriticalDefault": "var(--base-red-solid-3)",
+  "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)",
+  "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)",
+  "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)",
+  "actionPrimaryCriticalPressed": "var(--base-red-solid-11)",
+  "actionSecondaryBasicDefault": "var(--base-violet-solid-3)",
+  "actionPrimarySuccessHovered": "var(--base-green-solid-10)",
+  "actionPrimarySuccessPressed": "var(--base-green-solid-11)",
+  "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)",
+  "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)",
+  "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)",
+  "actionSecondarySuccessPressed": "var(--base-green-solid-5)",
+  "actionPrimarySuccessDepressed": "var(--base-green-solid-12)",
+  "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)",
+  "actionSecondarySuccessDepressed": "var(--base-green-solid-6)",
+  "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)",
+  "actionSecondarySuccessHovered": "var(--base-green-solid-4)",
+  "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)",
+  "actionSecondarySuccessDefault": "var(--base-green-solid-3)",
+  "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)",
+  "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)",
+  "actionSecondaryBasicHovered": "var(--base-violet-solid-4)",
+  "actionSecondaryBasicPressed": "var(--base-violet-solid-5)",
+  "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)",
+  "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)",
+  "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)",
+  "actionTertiaryBasicHover": "var(--base-violet-alpha-2)",
+  "baseIndigoAlpha1": "#05058203",
+  "actionTertiaryInteractiveHover": "var(--base-blue-alpha-2)",
+  "actionTertiarySuccessHover": "var(--base-green-alpha-2)",
+  "baseIndigoAlpha2": "#054CFF08",
+  "actionTertiaryCriticalHover": "var(--base-red-alpha-2)",
+  "baseIndigoAlpha3": "#0144FF0F",
+  "baseIndigoAlpha4": "#0247F51A",
+  "baseIndigoAlpha5": "#023CEB26",
+  "backgroundAlphaDark": "var(--base-indigo-alpha-12)",
+  "baseIndigoAlpha6": "#013DE438",
+  "backgroundAlphaMedium": "var(--base-indigo-alpha-4)",
+  "baseIndigoAlpha7": "#0038E052",
+  "baseIndigoAlpha8": "#0134DB73",
+  "baseIndigoAlpha9": "#0031D2C2",
+  "backgroundSolidSubdued": "var(--base-indigo-solid-2)",
+  "backgroundSolidDark": "var(--base-indigo-solid-12)",
+  "backgroundSolidDefault": "var(--base-indigo-solid-3)",
+  "surfaceDefault": "var(--base-pure-white)",
+  "surfaceSubdued": "var(--base-gray-slate-solid-2)",
+  "baseIndigoAlpha10": "#002CBDC4",
+  "surfaceSelected": "var(--base-blue-solid-2)",
+  "baseIndigoAlpha11": "#00259ECC",
+  "baseIndigoAlpha12": "#000E3AF0",
+  "surfaceWarning": "var(--base-amber-solid-2)",
+  "baseBlueAlpha1": "#0582FF05",
+  "surfaceCritical": "var(--base-red-solid-2)",
+  "baseBlueAlpha2": "#0582FF0A",
+  "surfaceSuccess": "var(--base-green-solid-2)",
+  "baseBlueAlpha3": "#0280FF12",
+  "surfaceHighlightSubdued": "var(--base-violet-solid-2)",
+  "baseBlueAlpha4": "#0180FF1F",
+  "surfaceInteractive": "var(--base-blue-solid-2)",
+  "baseBlueAlpha5": "#0180EF30",
+  "surfaceHighlightDefault": "var(--base-violet-solid-4)",
+  "baseBlueAlpha6": "#0177E647",
+  "surfaceHighlightHovered": "var(--base-violet-solid-6)",
+  "baseBlueAlpha7": "#0077DF69",
+  "baseBlueAlpha8": "#0082E6A1",
+  "baseBlueAlpha9": "#0091FFFA",
+  "baseBlueAlpha10": "#0080F1FA",
+  "baseBlueAlpha11": "#0066DBFA",
+  "baseBlueAlpha12": "#002149FA",
+  "baseVioletAlpha1": "#5805AB03",
+  "baseVioletAlpha2": "#3705FF05",
+  "baseVioletAlpha3": "#3C00FF0D",
+  "baseVioletAlpha4": "#2E02F417",
+  "baseVioletAlpha5": "#2F01E821",
+  "baseVioletAlpha6": "#2A01DF30",
+  "baseVioletAlpha7": "#2B01D447",
+  "baseVioletAlpha8": "#2A00D066",
+  "baseVioletAlpha9": "#2500B6A8",
+  "baseVioletAlpha10": "#1F00A5B0",
+  "baseVioletAlpha11": "#180091BA",
+  "baseVioletAlpha12": "#0E003DED",
+  "baseGraySlateAlpha1": "#05448205",
+  "baseGraySlateAlpha2": "#05294D08",
+  "baseGraySlateAlpha3": "#0025490D",
+  "baseGraySlateAlpha4": "#021C3714",
+  "baseGraySlateAlpha5": "#0217351A",
+  "baseGraySlateAlpha6": "#01213921",
+  "baseGraySlateAlpha7": "#001A3329",
+  "baseGraySlateAlpha8": "#011E323D",
+  "baseGraySlateAlpha9": "#00111E78",
+  "baseGraySlateAlpha10": "#00101B82",
+  "baseGraySlateAlpha11": "#000E1896",
+  "baseGraySlateAlpha12": "#00080CED",
+  "baseGreenAlpha1": "#05C04305",
+  "baseGreenAlpha2": "#00C43B0D",
+  "baseGreenAlpha3": "#02BA3C17",
+  "baseGreenAlpha4": "#01A63521",
+  "baseGreenAlpha5": "#009B3633",
+  "baseGreenAlpha6": "#0193364A",
+  "baseGreenAlpha7": "#008C3D6E",
+  "baseGreenAlpha8": "#00934CA3",
+  "baseGreenAlpha9": "#008F4ACF",
+  "baseGreenAlpha10": "#008346D6",
+  "baseGreenAlpha11": "#006B3BE8",
+  "baseGreenAlpha12": "#002012EB",
+  "baseAmberAlpha1": "#C0820505",
+  "baseAmberAlpha2": "#FFAB0212",
+  "baseAmberAlpha3": "#FFBB012B",
+  "baseAmberAlpha4": "#FFB70042",
+  "baseAmberAlpha5": "#FFB3005E",
+  "baseAmberAlpha6": "#FFA20178",
+  "baseAmberAlpha7": "#EC8D009C",
+  "baseAmberAlpha8": "#EA8900D4",
+  "baseAmberAlpha9": "#FFA600DB",
+  "baseAmberAlpha10": "#FF9500E3",
+  "baseAmberAlpha11": "#AB5300FA",
+  "baseAmberAlpha12": "#481800F5",
+  "baseRedAlpha1": "#FF050503",
+  "baseRedAlpha2": "#FF050508",
+  "baseRedAlpha3": "#FF01010F",
+  "baseRedAlpha4": "#FF00001A",
+  "baseRedAlpha5": "#F2000026",
+  "baseRedAlpha6": "#E4010138",
+  "baseRedAlpha7": "#D9000452",
+  "baseRedAlpha8": "#D1000470",
+  "baseRedAlpha9": "#DB0007B8",
+  "baseRedAlpha10": "#D10007C2",
+  "baseRedAlpha11": "#C30007D4",
+  "baseRedAlpha12": "#280003ED",
+  "mapareadistrictDefault": "var(--surface-highlight-default)",
+  "mapareadistrictHover": "var(--action-secondary-success-hovered)",
+  "mapareadistrictSelected": "var(--action-primary-basic-default)",
+  "mapareadistrictDisabled": "var(--action-primary-disabled)",
+  "mapareadistrictBorder": "var(--base-gray-slate-solid-9)",
+  "borderFocus": "#FFFFFF03",
+  "transparent": "#FFFFFF00",
+  "borderOnBGSubdued": "var(--base-gray-slate-solid-11)",
+}
diff --git a/packages/opub-ui/styles/tailwind/duration.js b/packages/opub-ui/styles/tailwind/duration.js
new file mode 100644
index 00000000..ee478106
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/duration.js
@@ -0,0 +1,13 @@
+module.exports = {
+  0: 'var(--duration-0)',
+  100: 'var(--duration-100)',
+  150: 'var(--duration-150)',
+  200: 'var(--duration-200)',
+  250: 'var(--duration-250)',
+  300: 'var(--duration-300)',
+  350: 'var(--duration-350)',
+  400: 'var(--duration-400)',
+  450: 'var(--duration-450)',
+  500: 'var(--duration-500)',
+  5000: 'var(--duration-5000)',
+};
diff --git a/packages/opub-ui/styles/tailwind/ease-function.js b/packages/opub-ui/styles/tailwind/ease-function.js
new file mode 100644
index 00000000..75445c09
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/ease-function.js
@@ -0,0 +1,7 @@
+module.exports = {
+  ease: 'var(--ease)',
+  linear: 'var(--linear)',
+  'ease-in': 'var(--ease-in)',
+  'ease-out': 'var(--ease-out)',
+  'ease-in-out': 'var(--ease-in-out)',
+};
diff --git a/packages/opub-ui/styles/tailwind/font-family.js b/packages/opub-ui/styles/tailwind/font-family.js
new file mode 100644
index 00000000..7fea5209
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/font-family.js
@@ -0,0 +1,4 @@
+module.exports = {
+  primary: 'var(--font-family-primary)',
+  mono: 'var(--font-family-mono)',
+};
diff --git a/packages/opub-ui/styles/tailwind/font-size.js b/packages/opub-ui/styles/tailwind/font-size.js
new file mode 100644
index 00000000..bebb8b65
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/font-size.js
@@ -0,0 +1,10 @@
+module.exports = {
+  75: 'var(--font-size-75)',
+  100: 'var(--font-size-100)',
+  200: 'var(--font-size-200)',
+  300: 'var(--font-size-300)',
+  400: 'var(--font-size-400)',
+  500: 'var(--font-size-500)',
+  600: 'var(--font-size-600)',
+  700: 'var(--font-size-700)',
+};
diff --git a/packages/opub-ui/styles/tailwind/font-weight.js b/packages/opub-ui/styles/tailwind/font-weight.js
new file mode 100644
index 00000000..b46bd26b
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/font-weight.js
@@ -0,0 +1,6 @@
+module.exports = {
+  Regular: 'var(--font-weight-regular)',
+  Medium: 'var(--font-weight-medium)',
+  Bold: 'var(--font-weight-bold)',
+  'Extra-Bold': 'var(--font-weight-extra-bold)',
+};
diff --git a/packages/opub-ui/styles/tailwind/line-height.js b/packages/opub-ui/styles/tailwind/line-height.js
new file mode 100644
index 00000000..ef65b16a
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/line-height.js
@@ -0,0 +1,9 @@
+module.exports = {
+  1: 'var(--font-line-height-1)',
+  2: 'var(--font-line-height-2)',
+  3: 'var(--font-line-height-3)',
+  4: 'var(--font-line-height-4)',
+  5: 'var(--font-line-height-5)',
+  6: 'var(--font-line-height-6)',
+  7: 'var(--font-line-height-7)',
+};
diff --git a/packages/opub-ui/styles/tailwind/space.js b/packages/opub-ui/styles/tailwind/space.js
new file mode 100644
index 00000000..2219de0a
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/space.js
@@ -0,0 +1,18 @@
+module.exports = { 
+  "0": "0px",
+  "025": "1px",
+  "05": "2px",
+  "1": "4px",
+  "2": "8px",
+  "3": "12px",
+  "4": "16px",
+  "5": "20px",
+  "6": "24px",
+  "8": "32px",
+  "10": "40px",
+  "12": "48px",
+  "16": "64px",
+  "20": "80px",
+  "24": "96px",
+  "32": "128px",
+}
diff --git a/packages/opub-ui/styles/tailwind/z-index.js b/packages/opub-ui/styles/tailwind/z-index.js
new file mode 100644
index 00000000..b0bb0bfd
--- /dev/null
+++ b/packages/opub-ui/styles/tailwind/z-index.js
@@ -0,0 +1,13 @@
+module.exports = {
+  1: 'var(--z-1)',
+  2: 'var(--z-2)',
+  3: 'var(--z-3)',
+  4: 'var(--z-4)',
+  5: 'var(--z-5)',
+  6: 'var(--z-6)',
+  7: 'var(--z-7)',
+  8: 'var(--z-8)',
+  9: 'var(--z-9)',
+  10: 'var(--z-10)',
+  max: 'var(--z-max)',
+};
diff --git a/packages/opub-ui/styles/tokens.json b/packages/opub-ui/styles/tokens.json
new file mode 100644
index 00000000..6c9fd67c
--- /dev/null
+++ b/packages/opub-ui/styles/tokens.json
@@ -0,0 +1,3360 @@
+{
+  "collections": [
+    {
+      "name": "Colors",
+      "modes": [
+        {
+          "name": "Light",
+          "variables": [
+            {
+              "name": "base/indigo/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FDFDFE"
+            },
+            {
+              "name": "base/indigo/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F8FAFF"
+            },
+            {
+              "name": "base/indigo/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F0F4FF"
+            },
+            {
+              "name": "base/indigo/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E6EDFE"
+            },
+            {
+              "name": "base/indigo/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D9E2FC"
+            },
+            {
+              "name": "base/indigo/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C6D4F9"
+            },
+            {
+              "name": "base/indigo/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AEC0F5"
+            },
+            {
+              "name": "base/indigo/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#8DA4EF"
+            },
+            {
+              "name": "base/indigo/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3E63DD"
+            },
+            {
+              "name": "base/indigo/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3A5CCC"
+            },
+            {
+              "name": "base/indigo/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3451B2"
+            },
+            {
+              "name": "base/indigo/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#101D46"
+            },
+            {
+              "name": "base/blue/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFDFF"
+            },
+            {
+              "name": "base/blue/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F5FAFF"
+            },
+            {
+              "name": "base/blue/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EDF6FF"
+            },
+            {
+              "name": "base/blue/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E1F0FF"
+            },
+            {
+              "name": "base/blue/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#CEE7FE"
+            },
+            {
+              "name": "base/blue/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#B7D9F8"
+            },
+            {
+              "name": "base/blue/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#96C7F2"
+            },
+            {
+              "name": "base/blue/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5EB0EF"
+            },
+            {
+              "name": "base/blue/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0091FF"
+            },
+            {
+              "name": "base/blue/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0081F1"
+            },
+            {
+              "name": "base/blue/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#006ADC"
+            },
+            {
+              "name": "base/blue/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00254D"
+            },
+            {
+              "name": "base/violet/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FDFCFE"
+            },
+            {
+              "name": "base/violet/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFAFF"
+            },
+            {
+              "name": "base/violet/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F5F2FF"
+            },
+            {
+              "name": "base/violet/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EDE9FE"
+            },
+            {
+              "name": "base/violet/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E4DEFC"
+            },
+            {
+              "name": "base/violet/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D7CFF9"
+            },
+            {
+              "name": "base/violet/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C4B8F3"
+            },
+            {
+              "name": "base/violet/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AA99EC"
+            },
+            {
+              "name": "base/violet/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#6E56CF"
+            },
+            {
+              "name": "base/violet/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#644FC1"
+            },
+            {
+              "name": "base/violet/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5746AF"
+            },
+            {
+              "name": "base/violet/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#20134B"
+            },
+            {
+              "name": "base/gray/slate/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFCFD"
+            },
+            {
+              "name": "base/gray/slate/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F8F9FA"
+            },
+            {
+              "name": "base/gray/slate/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F1F3F5"
+            },
+            {
+              "name": "base/gray/slate/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#ECEEF0"
+            },
+            {
+              "name": "base/gray/slate/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E6E8EB"
+            },
+            {
+              "name": "base/gray/slate/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DFE3E6"
+            },
+            {
+              "name": "base/gray/slate/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D7DBDF"
+            },
+            {
+              "name": "base/gray/slate/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C1C8CD"
+            },
+            {
+              "name": "base/gray/slate/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#889096"
+            },
+            {
+              "name": "base/gray/slate/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#7E868C"
+            },
+            {
+              "name": "base/gray/slate/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#687076"
+            },
+            {
+              "name": "base/gray/slate/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#11181C"
+            },
+            {
+              "name": "base/red/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFCFC"
+            },
+            {
+              "name": "base/red/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFF8F8"
+            },
+            {
+              "name": "base/red/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFEFEF"
+            },
+            {
+              "name": "base/red/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFE5E5"
+            },
+            {
+              "name": "base/red/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FDD8D8"
+            },
+            {
+              "name": "base/red/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F9C6C6"
+            },
+            {
+              "name": "base/red/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F3AEAF"
+            },
+            {
+              "name": "base/red/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EB9091"
+            },
+            {
+              "name": "base/red/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E5484D"
+            },
+            {
+              "name": "base/red/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DC3D43"
+            },
+            {
+              "name": "base/red/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#CD2B31"
+            },
+            {
+              "name": "base/red/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#381316"
+            },
+            {
+              "name": "base/green/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FBFEFC"
+            },
+            {
+              "name": "base/green/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F2FCF5"
+            },
+            {
+              "name": "base/green/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E9F9EE"
+            },
+            {
+              "name": "base/green/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DDF3E4"
+            },
+            {
+              "name": "base/green/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#CCEBD7"
+            },
+            {
+              "name": "base/green/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#B4DFC4"
+            },
+            {
+              "name": "base/green/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#92CEAC"
+            },
+            {
+              "name": "base/green/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5BB98C"
+            },
+            {
+              "name": "base/green/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#30A46C"
+            },
+            {
+              "name": "base/green/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#299764"
+            },
+            {
+              "name": "base/green/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#18794E"
+            },
+            {
+              "name": "base/green/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#153226"
+            },
+            {
+              "name": "base/amber/solid/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FEFDFB"
+            },
+            {
+              "name": "base/amber/solid/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFF9ED"
+            },
+            {
+              "name": "base/amber/solid/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFF4D5"
+            },
+            {
+              "name": "base/amber/solid/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFECBC"
+            },
+            {
+              "name": "base/amber/solid/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFE3A2"
+            },
+            {
+              "name": "base/amber/solid/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFD386"
+            },
+            {
+              "name": "base/amber/solid/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F3BA63"
+            },
+            {
+              "name": "base/amber/solid/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EE9D2B"
+            },
+            {
+              "name": "base/amber/solid/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFB224"
+            },
+            {
+              "name": "base/amber/solid/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFA01C"
+            },
+            {
+              "name": "base/amber/solid/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AD5700"
+            },
+            {
+              "name": "base/amber/solid/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#4E2009"
+            },
+            {
+              "name": "base/Pure/White",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF"
+            },
+            {
+              "name": "base/Pure/Black",
+              "type": "color",
+              "isAlias": false,
+              "value": "#000000"
+            },
+            {
+              "name": "Text/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/12"
+              }
+            },
+            {
+              "name": "Text/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
+            },
+            {
+              "name": "Text/Subdued",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3E4346"
+            },
+            {
+              "name": "Text/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Text/Critical",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/11"
+              }
+            },
+            {
+              "name": "Text/Warning",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/11"
+              }
+            },
+            {
+              "name": "Text/Success",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/11"
+              }
+            },
+            {
+              "name": "Text/Highlight",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/11"
+              }
+            },
+            {
+              "name": "Text/Interactive",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/11"
+              }
+            },
+            {
+              "name": "Text/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/1"
+              }
+            },
+            {
+              "name": "Text/OnBG/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Border/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/8"
+              }
+            },
+            {
+              "name": "Border/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/7"
+              }
+            },
+            {
+              "name": "Border/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/6"
+              }
+            },
+            {
+              "name": "Border/Critical/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/8"
+              }
+            },
+            {
+              "name": "Border/Critical/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/7"
+              }
+            },
+            {
+              "name": "Border/Critical/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/6"
+              }
+            },
+            {
+              "name": "Border/Success/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/8"
+              }
+            },
+            {
+              "name": "Border/Success/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/7"
+              }
+            },
+            {
+              "name": "Border/Warning/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/8"
+              }
+            },
+            {
+              "name": "Border/Warning/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/7"
+              }
+            },
+            {
+              "name": "Border/Highlight/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/8"
+              }
+            },
+            {
+              "name": "Border/Highlight/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/7"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/9"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/7"
+              }
+            },
+            {
+              "name": "Border/Interactive/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/8"
+              }
+            },
+            {
+              "name": "Border/Interactive/Focused",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/7"
+              }
+            },
+            {
+              "name": "Icon/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
+            },
+            {
+              "name": "Icon/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/10"
+              }
+            },
+            {
+              "name": "Icon/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Icon/Critical",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/9"
+              }
+            },
+            {
+              "name": "Icon/Warning",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/10"
+              }
+            },
+            {
+              "name": "Icon/Success",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/11"
+              }
+            },
+            {
+              "name": "Icon/Highlight",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/10"
+              }
+            },
+            {
+              "name": "Icon/Interactive",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/11"
+              }
+            },
+            {
+              "name": "Action/Primary/Basic/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/12"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/1"
+              }
+            },
+            {
+              "name": "Action/Primary/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/4"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/9"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/9"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/10"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/6"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/9"
+              }
+            },
+            {
+              "name": "Action/Secondary/Critical/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/3"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/11"
+              }
+            },
+            {
+              "name": "Action/Primary/Interactive/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/12"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/11"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/3"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/10"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/11"
+              }
+            },
+            {
+              "name": "Action/Secondary/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/3"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/12"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/5"
+              }
+            },
+            {
+              "name": "Action/Primary/Success/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/12"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/6"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/1"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/6"
+              }
+            },
+            {
+              "name": "Action/Secondary/Success/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/3"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/2"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/3"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Pressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/5"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/6"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/6"
+              }
+            },
+            {
+              "name": "Action/Tertiary/Basic/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05058203"
+            },
+            {
+              "name": "Action/Tertiary/Interactive/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/alpha/2"
+              }
+            },
+            {
+              "name": "Action/Tertiary/Success/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#054CFF08"
+            },
+            {
+              "name": "Action/Tertiary/Critical/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0144FF0F"
+            },
+            {
+              "name": "base/indigo/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0247F51A"
+            },
+            {
+              "name": "base/indigo/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#023CEB26"
+            },
+            {
+              "name": "Background/Alpha/Dark",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/12"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#013DE438"
+            },
+            {
+              "name": "Background/Alpha/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/4"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0038E052"
+            },
+            {
+              "name": "base/indigo/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0134DB73"
+            },
+            {
+              "name": "base/indigo/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0031D2C2"
+            },
+            {
+              "name": "Background/Solid/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/2"
+              }
+            },
+            {
+              "name": "Background/Solid/Dark",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/12"
+              }
+            },
+            {
+              "name": "Background/Solid/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/3"
+              }
+            },
+            {
+              "name": "Surface/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/Pure/White"
+              }
+            },
+            {
+              "name": "Surface/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#002CBDC4"
+            },
+            {
+              "name": "Surface/Selected",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00259ECC"
+            },
+            {
+              "name": "base/indigo/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#000E3AF0"
+            },
+            {
+              "name": "Surface/Warning",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/amber/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0582FF05"
+            },
+            {
+              "name": "Surface/Critical",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0582FF0A"
+            },
+            {
+              "name": "Surface/Success",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0280FF12"
+            },
+            {
+              "name": "Surface/Highlight/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0180FF1F"
+            },
+            {
+              "name": "Surface/Interactive",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0180EF30"
+            },
+            {
+              "name": "Surface/Highlight/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/4"
+              }
+            },
+            {
+              "name": "base/blue/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0177E647"
+            },
+            {
+              "name": "Surface/Highlight/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/6"
+              }
+            },
+            {
+              "name": "base/blue/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0077DF69"
+            },
+            {
+              "name": "base/blue/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0082E6A1"
+            },
+            {
+              "name": "base/blue/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0091FFFA"
+            },
+            {
+              "name": "base/blue/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0080F1FA"
+            },
+            {
+              "name": "base/blue/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0066DBFA"
+            },
+            {
+              "name": "base/blue/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#002149FA"
+            },
+            {
+              "name": "base/violet/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#5805AB03"
+            },
+            {
+              "name": "base/violet/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3705FF05"
+            },
+            {
+              "name": "base/violet/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#3C00FF0D"
+            },
+            {
+              "name": "base/violet/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2E02F417"
+            },
+            {
+              "name": "base/violet/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2F01E821"
+            },
+            {
+              "name": "base/violet/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2A01DF30"
+            },
+            {
+              "name": "base/violet/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2B01D447"
+            },
+            {
+              "name": "base/violet/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2A00D066"
+            },
+            {
+              "name": "base/violet/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#2500B6A8"
+            },
+            {
+              "name": "base/violet/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#1F00A5B0"
+            },
+            {
+              "name": "base/violet/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#180091BA"
+            },
+            {
+              "name": "base/violet/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0E003DED"
+            },
+            {
+              "name": "base/gray/slate/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05448205"
+            },
+            {
+              "name": "base/gray/slate/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05294D08"
+            },
+            {
+              "name": "base/gray/slate/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0025490D"
+            },
+            {
+              "name": "base/gray/slate/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#021C3714"
+            },
+            {
+              "name": "base/gray/slate/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0217351A"
+            },
+            {
+              "name": "base/gray/slate/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#01213921"
+            },
+            {
+              "name": "base/gray/slate/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#001A3329"
+            },
+            {
+              "name": "base/gray/slate/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#011E323D"
+            },
+            {
+              "name": "base/gray/slate/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00111E78"
+            },
+            {
+              "name": "base/gray/slate/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00101B82"
+            },
+            {
+              "name": "base/gray/slate/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#000E1896"
+            },
+            {
+              "name": "base/gray/slate/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00080CED"
+            },
+            {
+              "name": "base/green/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#05C04305"
+            },
+            {
+              "name": "base/green/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00C43B0D"
+            },
+            {
+              "name": "base/green/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#02BA3C17"
+            },
+            {
+              "name": "base/green/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#01A63521"
+            },
+            {
+              "name": "base/green/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#009B3633"
+            },
+            {
+              "name": "base/green/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#0193364A"
+            },
+            {
+              "name": "base/green/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#008C3D6E"
+            },
+            {
+              "name": "base/green/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#00934CA3"
+            },
+            {
+              "name": "base/green/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#008F4ACF"
+            },
+            {
+              "name": "base/green/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#008346D6"
+            },
+            {
+              "name": "base/green/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#006B3BE8"
+            },
+            {
+              "name": "base/green/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#002012EB"
+            },
+            {
+              "name": "base/amber/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C0820505"
+            },
+            {
+              "name": "base/amber/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFAB0212"
+            },
+            {
+              "name": "base/amber/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFBB012B"
+            },
+            {
+              "name": "base/amber/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFB70042"
+            },
+            {
+              "name": "base/amber/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFB3005E"
+            },
+            {
+              "name": "base/amber/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFA20178"
+            },
+            {
+              "name": "base/amber/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EC8D009C"
+            },
+            {
+              "name": "base/amber/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#EA8900D4"
+            },
+            {
+              "name": "base/amber/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFA600DB"
+            },
+            {
+              "name": "base/amber/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF9500E3"
+            },
+            {
+              "name": "base/amber/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#AB5300FA"
+            },
+            {
+              "name": "base/amber/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#481800F5"
+            },
+            {
+              "name": "base/red/alpha/1",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF050503"
+            },
+            {
+              "name": "base/red/alpha/2",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF050508"
+            },
+            {
+              "name": "base/red/alpha/3",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF01010F"
+            },
+            {
+              "name": "base/red/alpha/4",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FF00001A"
+            },
+            {
+              "name": "base/red/alpha/5",
+              "type": "color",
+              "isAlias": false,
+              "value": "#F2000026"
+            },
+            {
+              "name": "base/red/alpha/6",
+              "type": "color",
+              "isAlias": false,
+              "value": "#E4010138"
+            },
+            {
+              "name": "base/red/alpha/7",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D9000452"
+            },
+            {
+              "name": "base/red/alpha/8",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D1000470"
+            },
+            {
+              "name": "base/red/alpha/9",
+              "type": "color",
+              "isAlias": false,
+              "value": "#DB0007B8"
+            },
+            {
+              "name": "base/red/alpha/10",
+              "type": "color",
+              "isAlias": false,
+              "value": "#D10007C2"
+            },
+            {
+              "name": "base/red/alpha/11",
+              "type": "color",
+              "isAlias": false,
+              "value": "#C30007D4"
+            },
+            {
+              "name": "base/red/alpha/12",
+              "type": "color",
+              "isAlias": false,
+              "value": "#280003ED"
+            },
+            {
+              "name": "MapAreaDistrict/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Surface/Highlight/Default"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Action/Secondary/Success/Hovered"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Selected",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Action/Primary/Basic/Default"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Disabled",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "Action/Primary/Disabled"
+              }
+            },
+            {
+              "name": "MapAreaDistrict/Border",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Border/Focus",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF03"
+            },
+            {
+              "name": "Transparent",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF00"
+            },
+            {
+              "name": "Border/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Spacing / Numericals",
+      "modes": [
+        {
+          "name": "Mode 1",
+          "variables": [
+            {
+              "name": "space/0",
+              "type": "number",
+              "isAlias": false,
+              "value": 0
+            },
+            {
+              "name": "space/025",
+              "type": "number",
+              "isAlias": false,
+              "value": 1
+            },
+            {
+              "name": "space/05",
+              "type": "number",
+              "isAlias": false,
+              "value": 2
+            },
+            {
+              "name": "space/1",
+              "type": "number",
+              "isAlias": false,
+              "value": 4
+            },
+            {
+              "name": "space/2",
+              "type": "number",
+              "isAlias": false,
+              "value": 8
+            },
+            {
+              "name": "space/3",
+              "type": "number",
+              "isAlias": false,
+              "value": 12
+            },
+            {
+              "name": "space/4",
+              "type": "number",
+              "isAlias": false,
+              "value": 16
+            },
+            {
+              "name": "space/5",
+              "type": "number",
+              "isAlias": false,
+              "value": 20
+            },
+            {
+              "name": "space/6",
+              "type": "number",
+              "isAlias": false,
+              "value": 24
+            },
+            {
+              "name": "space/8",
+              "type": "number",
+              "isAlias": false,
+              "value": 32
+            },
+            {
+              "name": "space/10",
+              "type": "number",
+              "isAlias": false,
+              "value": 40
+            },
+            {
+              "name": "space/12",
+              "type": "number",
+              "isAlias": false,
+              "value": 48
+            },
+            {
+              "name": "space/16",
+              "type": "number",
+              "isAlias": false,
+              "value": 64
+            },
+            {
+              "name": "space/20",
+              "type": "number",
+              "isAlias": false,
+              "value": 80
+            },
+            {
+              "name": "space/24",
+              "type": "number",
+              "isAlias": false,
+              "value": 96
+            },
+            {
+              "name": "space/32",
+              "type": "number",
+              "isAlias": false,
+              "value": 128
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Borders",
+      "modes": [
+        {
+          "name": "Mode 1",
+          "variables": [
+            {
+              "name": "border/radius/0",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/0"
+              }
+            },
+            {
+              "name": "border/radius/05",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/05"
+              }
+            },
+            {
+              "name": "border/radius/1",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/1"
+              }
+            },
+            {
+              "name": "border/radius/2",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/2"
+              }
+            },
+            {
+              "name": "border/radius/3",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/3"
+              }
+            },
+            {
+              "name": "border/radius/4",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/4"
+              }
+            },
+            {
+              "name": "border/radius/5",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/5"
+              }
+            },
+            {
+              "name": "border/radius/6",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/6"
+              }
+            },
+            {
+              "name": "border/radius/full",
+              "type": "number",
+              "isAlias": false,
+              "value": 9999
+            },
+            {
+              "name": "border/width/1",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/025"
+              }
+            },
+            {
+              "name": "border/width/2",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/05"
+              }
+            },
+            {
+              "name": "border/width/4",
+              "type": "number",
+              "isAlias": true,
+              "value": {
+                "collection": "Spacing / Numericals",
+                "name": "space/1"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Typography",
+      "modes": [
+        {
+          "name": "Style",
+          "variables": [
+            {
+              "name": "Desktop Heading/4xl-Bold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 40,
+                "fontFamily": "Inter",
+                "fontWeight": "Bold",
+                "lineHeight": 48,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/3xl-Bold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 32,
+                "fontFamily": "Inter",
+                "fontWeight": "Bold",
+                "lineHeight": 40,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/2xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 28,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 32,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 24,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 28,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Lg-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 26,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Md-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Sm-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Xs-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Sm Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Lg-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Desktop Heading/Lg-Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Medium/Underline-Reg",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "UNDERLINE"
+              }
+            },
+            {
+              "name": "Body/Large/Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Large/Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Large/Underline-Reg",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "UNDERLINE"
+              }
+            },
+            {
+              "name": "Body/Small/Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Small/Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Small/Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PERCENT",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Body/Small/bodySm- underline",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "UNDERLINE"
+              }
+            },
+            {
+              "name": "Mobile Heading/4xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 32,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 40,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/3xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 24,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 28,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/2xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Md-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Sm-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Sm Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Xs-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Xs Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Effects",
+      "modes": [
+        {
+          "name": "Style",
+          "variables": [
+            {
+              "name": "shadow/modal",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 26
+                    },
+                    "radius": 80,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 1,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/layer",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 32,
+                      "g": 42,
+                      "b": 53,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 31
+                    },
+                    "radius": 41,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 32,
+                      "g": 42,
+                      "b": 54,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 16,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/inset/basic",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "INNER_SHADOW",
+                    "color": {
+                      "r": 228,
+                      "g": 229,
+                      "b": 231,
+                      "a": 1
+                    },
+                    "offset": {
+                      "x": -1,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/inset/button",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "INNER_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": -1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/button/pressed",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "INNER_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/button/default",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/deep",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 33,
+                      "g": 43,
+                      "b": 54,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 16,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 6,
+                      "g": 44,
+                      "b": 82,
+                      "a": 0.1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 1
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/faint",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 22,
+                      "g": 29,
+                      "b": 37,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/transparent",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/xs",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.24
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 2,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/sm",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 1,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/md",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 6,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 4,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/lg",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 6,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.2
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 4
+                    },
+                    "radius": 12,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/xl",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 12
+                    },
+                    "radius": 18,
+                    "spread": -2
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 4
+                    },
+                    "radius": 18,
+                    "spread": -2
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/basic/2xl",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.16
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 32
+                    },
+                    "radius": 56,
+                    "spread": -2
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 31,
+                      "g": 33,
+                      "b": 36,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 32
+                    },
+                    "radius": 32,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/popover",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 23,
+                      "g": 24,
+                      "b": 24,
+                      "a": 0.12
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 8
+                    },
+                    "radius": 20,
+                    "spread": -4
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 23,
+                      "g": 24,
+                      "b": 24,
+                      "a": 0.08
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 3
+                    },
+                    "radius": 6,
+                    "spread": -3
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/card",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 1
+                    },
+                    "radius": 2,
+                    "spread": 0
+                  },
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 23,
+                      "g": 24,
+                      "b": 24,
+                      "a": 0.05
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 5,
+                    "spread": 0
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/topNav",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.15
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 2
+                    },
+                    "radius": 2,
+                    "spread": -1
+                  }
+                ]
+              }
+            },
+            {
+              "name": "shadow/element/focus",
+              "type": "effect",
+              "isAlias": false,
+              "value": {
+                "effects": [
+                  {
+                    "type": "DROP_SHADOW",
+                    "color": {
+                      "r": 0,
+                      "g": 145,
+                      "b": 255,
+                      "a": 1
+                    },
+                    "offset": {
+                      "x": 0,
+                      "y": 0
+                    },
+                    "radius": 0,
+                    "spread": 2
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Grids",
+      "modes": [
+        {
+          "name": "Style",
+          "variables": [
+            {
+              "name": "Basic 12 Col",
+              "type": "grid",
+              "isAlias": false,
+              "value": {
+                "layoutGrids": [
+                  {
+                    "pattern": "COLUMNS",
+                    "color": {
+                      "r": 255,
+                      "g": 0,
+                      "b": 0,
+                      "a": 0.1
+                    },
+                    "alignment": "STRETCH",
+                    "gutterSize": 16,
+                    "offset": 40,
+                    "count": 12
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx
index 11965354..6459a583 100644
--- a/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx
+++ b/packages/opub-viz/src/components/LeafletChoropleth/LeafletChoropleth.tsx
@@ -248,11 +248,11 @@ const LayerSelector = ({
       <Popover>
         <PopoverTrigger
           className={cn(
-            'p-3 rounded-1 cursor-pointer bg-lightmodeVioletSolid5 shadow-insetBasic'
+            'p-3 rounded-1 cursor-pointer bg-baseVioletSolid5 shadow-insetBasic'
           )}
         >
           <span className="sr-only">Change Layer</span>
-          <span className="text-lightmodeVioletSolid10">
+          <span className="text-baseVioletSolid10">
             <IconBoxMultiple />
           </span>
         </PopoverTrigger>
diff --git a/packages/opub-viz/styles/tokens/_variables.css b/packages/opub-viz/styles/tokens/_variables.css
index e5ea60c1..cb627231 100644
--- a/packages/opub-viz/styles/tokens/_variables.css
+++ b/packages/opub-viz/styles/tokens/_variables.css
@@ -1,267 +1,277 @@
-:root {
-  --lightmode-indigo-solid-1: #fdfdfe;
-  --lightmode-indigo-solid-2: #f8faff;
-  --lightmode-indigo-solid-3: #f0f4ff;
-  --lightmode-indigo-solid-4: #e6edfe;
-  --lightmode-indigo-solid-5: #d9e2fc;
-  --lightmode-indigo-solid-6: #c6d4f9;
-  --lightmode-indigo-solid-7: #aec0f5;
-  --lightmode-indigo-solid-8: #8da4ef;
-  --lightmode-indigo-solid-9: #3e63dd;
-  --lightmode-indigo-solid-10: #3a5ccc;
-  --lightmode-indigo-solid-11: #3451b2;
-  --lightmode-indigo-solid-12: #101d46;
-  --lightmode-blue-solid-1: #fbfdff;
-  --lightmode-blue-solid-2: #f5faff;
-  --lightmode-blue-solid-3: #edf6ff;
-  --lightmode-blue-solid-4: #e1f0ff;
-  --lightmode-blue-solid-5: #cee7fe;
-  --lightmode-blue-solid-6: #b7d9f8;
-  --lightmode-blue-solid-7: #96c7f2;
-  --lightmode-blue-solid-8: #5eb0ef;
-  --lightmode-blue-solid-9: #0091ff;
-  --lightmode-blue-solid-10: #0081f1;
-  --lightmode-blue-solid-11: #006adc;
-  --lightmode-blue-solid-12: #00254d;
-  --lightmode-violet-solid-1: #fdfcfe;
-  --lightmode-violet-solid-2: #fbfaff;
-  --lightmode-violet-solid-3: #f5f2ff;
-  --lightmode-violet-solid-4: #ede9fe;
-  --lightmode-violet-solid-5: #e4defc;
-  --lightmode-violet-solid-6: #d7cff9;
-  --lightmode-violet-solid-7: #c4b8f3;
-  --lightmode-violet-solid-8: #aa99ec;
-  --lightmode-violet-solid-9: #6e56cf;
-  --lightmode-violet-solid-10: #644fc1;
-  --lightmode-violet-solid-11: #5746af;
-  --lightmode-violet-solid-12: #20134b;
-  --lightmode-gray-slate-solid-1: #fbfcfd;
-  --lightmode-gray-slate-solid-2: #f8f9fa;
-  --lightmode-gray-slate-solid-3: #f1f3f5;
-  --lightmode-gray-slate-solid-4: #eceef0;
-  --lightmode-gray-slate-solid-5: #e6e8eb;
-  --lightmode-gray-slate-solid-6: #dfe3e6;
-  --lightmode-gray-slate-solid-7: #d7dbdf;
-  --lightmode-gray-slate-solid-8: #c1c8cd;
-  --lightmode-gray-slate-solid-9: #889096;
-  --lightmode-gray-slate-solid-10: #7e868c;
-  --lightmode-gray-slate-solid-11: #687076;
-  --lightmode-gray-slate-solid-12: #11181c;
-  --lightmode-red-solid-1: #fffcfc;
-  --lightmode-red-solid-2: #fff8f8;
-  --lightmode-red-solid-3: #ffefef;
-  --lightmode-red-solid-4: #ffe5e5;
-  --lightmode-red-solid-5: #fdd8d8;
-  --lightmode-red-solid-6: #f9c6c6;
-  --lightmode-red-solid-7: #f3aeaf;
-  --lightmode-red-solid-8: #eb9091;
-  --lightmode-red-solid-9: #e5484d;
-  --lightmode-red-solid-10: #dc3d43;
-  --lightmode-red-solid-11: #cd2b31;
-  --lightmode-red-solid-12: #381316;
-  --lightmode-green-solid-1: #fbfefc;
-  --lightmode-green-solid-2: #f2fcf5;
-  --lightmode-green-solid-3: #e9f9ee;
-  --lightmode-green-solid-4: #ddf3e4;
-  --lightmode-green-solid-5: #ccebd7;
-  --lightmode-green-solid-6: #b4dfc4;
-  --lightmode-green-solid-7: #92ceac;
-  --lightmode-green-solid-8: #5bb98c;
-  --lightmode-green-solid-9: #30a46c;
-  --lightmode-green-solid-10: #299764;
-  --lightmode-green-solid-11: #18794e;
-  --lightmode-green-solid-12: #153226;
-  --lightmode-amber-solid-1: #fefdfb;
-  --lightmode-amber-solid-2: #fff9ed;
-  --lightmode-amber-solid-3: #fff4d5;
-  --lightmode-amber-solid-4: #ffecbc;
-  --lightmode-amber-solid-5: #ffe3a2;
-  --lightmode-amber-solid-6: #ffd386;
-  --lightmode-amber-solid-7: #f3ba63;
-  --lightmode-amber-solid-8: #ee9d2b;
-  --lightmode-amber-solid-9: #ffb224;
-  --lightmode-amber-solid-10: #ffa01c;
-  --lightmode-amber-solid-11: #ad5700;
-  --lightmode-amber-solid-12: #4e2009;
-  --lightmode-pure-white: #ffffff;
-  --lightmode-pure-black: #000000;
-  --text-default: var(--lightmode-gray-slate-solid-12);
-  --text-subdued: #3e4346;
-  --text-disabled: var(--lightmode-gray-slate-solid-9);
-  --text-critical: var(--lightmode-red-solid-11);
-  --text-warning: var(--lightmode-amber-solid-11);
-  --text-success: var(--lightmode-green-solid-11);
-  --text-highlight: var(--lightmode-violet-solid-11);
-  --text-interactive: var(--lightmode-blue-solid-11);
-  --text-onbg-disabled: var(--lightmode-gray-slate-solid-6);
-  --text-onbg-default: var(--lightmode-pure-white);
-  --border-default: var(--lightmode-gray-slate-solid-8);
-  --border-subdued: var(--lightmode-gray-slate-solid-7);
-  --border-disabled: var(--lightmode-gray-slate-solid-6);
-  --border-critical-default: var(--lightmode-red-solid-8);
-  --border-critical-disabled: var(--lightmode-red-solid-7);
-  --border-critical-subdued: var(--lightmode-red-solid-6);
-  --border-success-default: var(--lightmode-green-solid-8);
-  --border-success-subdued: var(--lightmode-green-solid-7);
-  --border-warning-default: var(--lightmode-amber-solid-8);
-  --border-warning-subdued: var(--lightmode-amber-solid-7);
-  --border-highlight-default: var(--lightmode-violet-solid-8);
-  --border-highlight-subdued: var(--lightmode-violet-solid-7);
-  --border-interactive-default: var(--lightmode-blue-solid-8);
-  --border-interactive-focused: var(--lightmode-blue-solid-7);
-  --icon-default: var(--lightmode-gray-slate-solid-11);
-  --icon-subdued: var(--lightmode-gray-slate-solid-10);
-  --icon-disabled: var(--lightmode-gray-slate-solid-9);
-  --icon-critical: var(--lightmode-red-solid-10);
-  --action-primary-basic-default: var(--lightmode-violet-solid-9);
-  --icon-warning: var(--lightmode-amber-solid-10);
-  --action-primary-basic-hovered: var(--lightmode-violet-solid-10);
-  --icon-success: var(--lightmode-green-solid-10);
-  --action-primary-basic-pressed: var(--lightmode-violet-solid-11);
-  --icon-highlight: var(--lightmode-violet-solid-10);
-  --icon-interactive: var(--lightmode-indigo-solid-11);
-  --action-primary-basic-depressed: var(--lightmode-violet-solid-12);
-  --action-primary-disabled: var(--lightmode-gray-slate-solid-9);
-  --action-primary-critical-default: var(--lightmode-red-solid-9);
-  --action-primary-success-default: var(--lightmode-green-solid-9);
-  --action-primary-critical-hovered: var(--lightmode-red-solid-10);
-  --action-secondary-critical-pressed: var(--lightmode-red-solid-5);
-  --action-secondary-critical-hovered: var(--lightmode-red-solid-4);
-  --action-secondary-critical-depressed: var(--lightmode-red-solid-6);
-  --action-secondary-critical-default: var(--lightmode-red-solid-3);
-  --action-primary-interactive-default: var(--lightmode-blue-solid-9);
-  --action-primary-interactive-hovered: var(--lightmode-blue-solid-10);
-  --action-primary-interactive-pressed: var(--lightmode-blue-solid-11);
-  --action-primary-interactive-depressed: var(--lightmode-blue-solid-12);
-  --action-primary-success-hovered: var(--lightmode-green-solid-10);
-  --action-secondary-basic-default: var(--lightmode-violet-solid-3);
-  --action-primary-critical-pressed: var(--lightmode-red-solid-11);
-  --action-primary-critical-depressed: var(--lightmode-red-solid-12);
-  --action-secondary-disabled: var(--lightmode-gray-slate-solid-3);
-  --action-primary-success-pressed: var(--lightmode-green-solid-11);
-  --action-secondary-interactive-depressed: var(--lightmode-blue-solid-6);
-  --action-secondary-success-depressed: var(--lightmode-green-solid-6);
-  --action-secondary-success-pressed: var(--lightmode-green-solid-5);
-  --action-primary-success-depressed: var(--lightmode-green-solid-12);
-  --action-secondary-interactive-hovered: var(--lightmode-blue-solid-4);
-  --action-secondary-neutral-default: var(--lightmode-gray-slate-solid-1);
-  --action-secondary-interactive-pressed: var(--lightmode-blue-solid-5);
-  --action-secondary-success-hovered: var(--lightmode-green-solid-4);
-  --action-secondary-success-default: var(--lightmode-green-solid-3);
-  --action-secondary-interactive-default: var(--lightmode-blue-solid-3);
-  --action-secondary-neutral-hovered: var(--lightmode-gray-slate-solid-2);
-  --action-secondary-neutral-pressed: var(--lightmode-gray-slate-solid-5);
-  --action-secondary-basic-depressed: var(--lightmode-violet-solid-6);
-  --action-secondary-basic-hovered: var(--lightmode-violet-solid-4);
-  --action-secondary-basic-pressed: var(--lightmode-violet-solid-5);
-  --action-secondary-neutral-depressed: var(--lightmode-gray-slate-solid-6);
-  --action-tertiary-basic-hover: var(--lightmode-violet-alpha-2);
-  --lightmode-indigo-alpha-1: #05058203;
-  --action-tertiary-interactive-hover: var(--lightmode-blue-alpha-2);
-  --lightmode-indigo-alpha-2: #054cff08;
-  --action-tertiary-success-hover: var(--lightmode-green-alpha-2);
-  --action-tertiary-critical-hover: var(--lightmode-red-alpha-2);
-  --lightmode-indigo-alpha-3: #0144ff0f;
-  --lightmode-indigo-alpha-4: #0247f51a;
-  --lightmode-indigo-alpha-5: #023ceb26;
-  --lightmode-indigo-alpha-6: #013de438;
-  --lightmode-indigo-alpha-7: #0038e052;
-  --lightmode-indigo-alpha-8: #0134db73;
-  --lightmode-indigo-alpha-9: #0031d2c2;
-  --background-subdued: var(--lightmode-indigo-solid-2);
-  --background-dark: var(--lightmode-indigo-solid-12);
-  --background-default: var(--lightmode-indigo-solid-3);
-  --surface-default: var(--lightmode-pure-white);
-  --lightmode-indigo-alpha-10: #002cbdc4;
-  --surface-subdued: var(--lightmode-gray-slate-solid-2);
-  --lightmode-indigo-alpha-11: #00259ecc;
-  --surface-selected: var(--lightmode-blue-solid-2);
-  --lightmode-indigo-alpha-12: #000e3af0;
-  --surface-warning: var(--lightmode-amber-solid-2);
-  --surface-critical: var(--lightmode-red-solid-2);
-  --lightmode-blue-alpha-1: #0582ff05;
-  --lightmode-blue-alpha-2: #0582ff0a;
-  --surface-success: var(--lightmode-green-solid-2);
-  --surface-highlight-subdued: var(--lightmode-violet-solid-2);
-  --lightmode-blue-alpha-3: #0280ff12;
-  --lightmode-blue-alpha-4: #0180ff1f;
-  --surface-interactive: var(--lightmode-blue-solid-2);
-  --surface-highlight-default: var(--lightmode-violet-solid-4);
-  --lightmode-blue-alpha-5: #0180ef30;
-  --surface-highlight-hovered: var(--lightmode-violet-solid-6);
-  --lightmode-blue-alpha-6: #0177e647;
-  --lightmode-blue-alpha-7: #0077df69;
-  --lightmode-blue-alpha-8: #0082e6a1;
-  --lightmode-blue-alpha-9: #0091fffa;
-  --lightmode-blue-alpha-10: #0080f1fa;
-  --lightmode-blue-alpha-11: #0066dbfa;
-  --lightmode-blue-alpha-12: #002149fa;
-  --lightmode-violet-alpha-1: #5805ab03;
-  --lightmode-violet-alpha-2: #3705ff05;
-  --lightmode-violet-alpha-3: #3c00ff0d;
-  --lightmode-violet-alpha-4: #2e02f417;
-  --lightmode-violet-alpha-5: #2f01e821;
-  --lightmode-violet-alpha-6: #2a01df30;
-  --lightmode-violet-alpha-7: #2b01d447;
-  --lightmode-violet-alpha-8: #2a00d066;
-  --lightmode-violet-alpha-9: #2500b6a8;
-  --lightmode-violet-alpha-10: #1f00a5b0;
-  --lightmode-violet-alpha-11: #180091ba;
-  --lightmode-violet-alpha-12: #0e003ded;
-  --lightmode-gray-slate-alpha-1: #05448205;
-  --lightmode-gray-slate-alpha-2: #05294d08;
-  --lightmode-gray-slate-alpha-3: #0025490d;
-  --lightmode-gray-slate-alpha-4: #021c3714;
-  --lightmode-gray-slate-alpha-5: #0217351a;
-  --lightmode-gray-slate-alpha-6: #01213921;
-  --lightmode-gray-slate-alpha-7: #001a3329;
-  --lightmode-gray-slate-alpha-8: #011e323d;
-  --lightmode-gray-slate-alpha-9: #00111e78;
-  --lightmode-gray-slate-alpha-10: #00101b82;
-  --lightmode-gray-slate-alpha-11: #000e1896;
-  --lightmode-gray-slate-alpha-12: #00080ced;
-  --lightmode-green-alpha-1: #05c04305;
-  --lightmode-green-alpha-2: #00c43b0d;
-  --lightmode-green-alpha-3: #02ba3c17;
-  --lightmode-green-alpha-4: #01a63521;
-  --lightmode-green-alpha-5: #009b3633;
-  --lightmode-green-alpha-6: #0193364a;
-  --lightmode-green-alpha-7: #008c3d6e;
-  --lightmode-green-alpha-8: #00934ca3;
-  --lightmode-green-alpha-9: #008f4acf;
-  --lightmode-green-alpha-10: #008346d6;
-  --lightmode-green-alpha-11: #006b3be8;
-  --lightmode-green-alpha-12: #002012eb;
-  --lightmode-amber-alpha-1: #c0820505;
-  --lightmode-amber-alpha-2: #ffab0212;
-  --lightmode-amber-alpha-3: #ffbb012b;
-  --lightmode-amber-alpha-4: #ffb70042;
-  --lightmode-amber-alpha-5: #ffb3005e;
-  --lightmode-amber-alpha-6: #ffa20178;
-  --lightmode-amber-alpha-7: #ec8d009c;
-  --lightmode-amber-alpha-8: #ea8900d4;
-  --lightmode-amber-alpha-9: #ffa600db;
-  --lightmode-amber-alpha-10: #ff9500e3;
-  --lightmode-amber-alpha-11: #ab5300fa;
-  --lightmode-amber-alpha-12: #481800f5;
-  --lightmode-red-alpha-1: #ff050503;
-  --lightmode-red-alpha-2: #ff050508;
-  --lightmode-red-alpha-3: #ff01010f;
-  --lightmode-red-alpha-4: #ff00001a;
-  --lightmode-red-alpha-5: #f2000026;
-  --lightmode-red-alpha-6: #e4010138;
-  --lightmode-red-alpha-7: #d9000452;
-  --lightmode-red-alpha-8: #d1000470;
-  --lightmode-red-alpha-9: #db0007b8;
-  --lightmode-red-alpha-10: #d10007c2;
-  --lightmode-red-alpha-11: #c30007d4;
-  --lightmode-red-alpha-12: #280003ed;
+:root { 
+  --base-indigo-solid-1: #FDFDFE;
+  --base-indigo-solid-2: #F8FAFF;
+  --base-indigo-solid-3: #F0F4FF;
+  --base-indigo-solid-4: #E6EDFE;
+  --base-indigo-solid-5: #D9E2FC;
+  --base-indigo-solid-6: #C6D4F9;
+  --base-indigo-solid-7: #AEC0F5;
+  --base-indigo-solid-8: #8DA4EF;
+  --base-indigo-solid-9: #3E63DD;
+  --base-indigo-solid-10: #3A5CCC;
+  --base-indigo-solid-11: #3451B2;
+  --base-indigo-solid-12: #101D46;
+  --base-blue-solid-1: #FBFDFF;
+  --base-blue-solid-2: #F5FAFF;
+  --base-blue-solid-3: #EDF6FF;
+  --base-blue-solid-4: #E1F0FF;
+  --base-blue-solid-5: #CEE7FE;
+  --base-blue-solid-6: #B7D9F8;
+  --base-blue-solid-7: #96C7F2;
+  --base-blue-solid-8: #5EB0EF;
+  --base-blue-solid-9: #0091FF;
+  --base-blue-solid-10: #0081F1;
+  --base-blue-solid-11: #006ADC;
+  --base-blue-solid-12: #00254D;
+  --base-violet-solid-1: #FDFCFE;
+  --base-violet-solid-2: #FBFAFF;
+  --base-violet-solid-3: #F5F2FF;
+  --base-violet-solid-4: #EDE9FE;
+  --base-violet-solid-5: #E4DEFC;
+  --base-violet-solid-6: #D7CFF9;
+  --base-violet-solid-7: #C4B8F3;
+  --base-violet-solid-8: #AA99EC;
+  --base-violet-solid-9: #6E56CF;
+  --base-violet-solid-10: #644FC1;
+  --base-violet-solid-11: #5746AF;
+  --base-violet-solid-12: #20134B;
+  --base-gray-slate-solid-1: #FBFCFD;
+  --base-gray-slate-solid-2: #F8F9FA;
+  --base-gray-slate-solid-3: #F1F3F5;
+  --base-gray-slate-solid-4: #ECEEF0;
+  --base-gray-slate-solid-5: #E6E8EB;
+  --base-gray-slate-solid-6: #DFE3E6;
+  --base-gray-slate-solid-7: #D7DBDF;
+  --base-gray-slate-solid-8: #C1C8CD;
+  --base-gray-slate-solid-9: #889096;
+  --base-gray-slate-solid-10: #7E868C;
+  --base-gray-slate-solid-11: #687076;
+  --base-gray-slate-solid-12: #11181C;
+  --base-red-solid-1: #FFFCFC;
+  --base-red-solid-2: #FFF8F8;
+  --base-red-solid-3: #FFEFEF;
+  --base-red-solid-4: #FFE5E5;
+  --base-red-solid-5: #FDD8D8;
+  --base-red-solid-6: #F9C6C6;
+  --base-red-solid-7: #F3AEAF;
+  --base-red-solid-8: #EB9091;
+  --base-red-solid-9: #E5484D;
+  --base-red-solid-10: #DC3D43;
+  --base-red-solid-11: #CD2B31;
+  --base-red-solid-12: #381316;
+  --base-green-solid-1: #FBFEFC;
+  --base-green-solid-2: #F2FCF5;
+  --base-green-solid-3: #E9F9EE;
+  --base-green-solid-4: #DDF3E4;
+  --base-green-solid-5: #CCEBD7;
+  --base-green-solid-6: #B4DFC4;
+  --base-green-solid-7: #92CEAC;
+  --base-green-solid-8: #5BB98C;
+  --base-green-solid-9: #30A46C;
+  --base-green-solid-10: #299764;
+  --base-green-solid-11: #18794E;
+  --base-green-solid-12: #153226;
+  --base-amber-solid-1: #FEFDFB;
+  --base-amber-solid-2: #FFF9ED;
+  --base-amber-solid-3: #FFF4D5;
+  --base-amber-solid-4: #FFECBC;
+  --base-amber-solid-5: #FFE3A2;
+  --base-amber-solid-6: #FFD386;
+  --base-amber-solid-7: #F3BA63;
+  --base-amber-solid-8: #EE9D2B;
+  --base-amber-solid-9: #FFB224;
+  --base-amber-solid-10: #FFA01C;
+  --base-amber-solid-11: #AD5700;
+  --base-amber-solid-12: #4E2009;
+  --base-pure-white: #FFFFFF;
+  --base-pure-black: #000000;
+  --text-default: var(--base-gray-slate-solid-12);
+  --text-medium: var(--base-gray-slate-solid-11);
+  --text-subdued: #3E4346;
+  --text-disabled: var(--base-gray-slate-solid-9);
+  --text-critical: var(--base-red-solid-11);
+  --text-warning: var(--base-amber-solid-11);
+  --text-success: var(--base-green-solid-11);
+  --text-highlight: var(--base-violet-solid-11);
+  --text-interactive: var(--base-blue-solid-11);
+  --text-onbg-default: var(--base-gray-slate-solid-1);
+  --text-onbg-disabled: var(--base-gray-slate-solid-9);
+  --border-default: var(--base-gray-slate-solid-8);
+  --border-subdued: var(--base-gray-slate-solid-7);
+  --border-disabled: var(--base-gray-slate-solid-6);
+  --border-critical-default: var(--base-red-solid-8);
+  --border-critical-disabled: var(--base-red-solid-7);
+  --border-critical-subdued: var(--base-red-solid-6);
+  --border-success-default: var(--base-green-solid-8);
+  --border-success-subdued: var(--base-green-solid-7);
+  --border-warning-default: var(--base-amber-solid-8);
+  --border-warning-subdued: var(--base-amber-solid-7);
+  --border-highlight-default: var(--base-violet-solid-8);
+  --border-highlight-subdued: var(--base-violet-solid-7);
+  --border-highlight-onbg-subdued: var(--base-violet-solid-9);
+  --border-highlight-onbg-default: var(--base-violet-solid-7);
+  --border-interactive-default: var(--base-blue-solid-8);
+  --border-interactive-focused: var(--base-blue-solid-7);
+  --icon-default: var(--base-gray-slate-solid-11);
+  --icon-subdued: var(--base-gray-slate-solid-10);
+  --icon-disabled: var(--base-gray-slate-solid-9);
+  --icon-critical: var(--base-red-solid-10);
+  --action-primary-basic-default: var(--base-violet-solid-9);
+  --icon-warning: var(--base-amber-solid-10);
+  --action-primary-basic-hovered: var(--base-violet-solid-10);
+  --icon-success: var(--base-green-solid-10);
+  --action-primary-basic-pressed: var(--base-violet-solid-11);
+  --icon-highlight: var(--base-violet-solid-10);
+  --icon-interactive: var(--base-indigo-solid-11);
+  --action-primary-basic-depressed: var(--base-violet-solid-12);
+  --icon-onbg-default: var(--base-gray-slate-solid-1);
+  --action-primary-disabled: var(--base-gray-slate-solid-9);
+  --icon-onbg-subdued: var(--base-gray-slate-solid-4);
+  --action-primary-critical-default: var(--base-red-solid-9);
+  --icon-onbg-disabled: var(--base-gray-slate-solid-9);
+  --action-primary-success-default: var(--base-green-solid-9);
+  --action-primary-critical-hovered: var(--base-red-solid-10);
+  --action-secondary-critical-pressed: var(--base-red-solid-5);
+  --action-secondary-critical-hovered: var(--base-red-solid-4);
+  --action-secondary-critical-depressed: var(--base-red-solid-6);
+  --action-primary-interactive-default: var(--base-blue-solid-9);
+  --action-secondary-critical-default: var(--base-red-solid-3);
+  --action-primary-interactive-hovered: var(--base-blue-solid-10);
+  --action-primary-interactive-pressed: var(--base-blue-solid-11);
+  --action-primary-interactive-depressed: var(--base-blue-solid-12);
+  --action-primary-critical-pressed: var(--base-red-solid-11);
+  --action-secondary-basic-default: var(--base-violet-solid-3);
+  --action-primary-success-hovered: var(--base-green-solid-10);
+  --action-primary-success-pressed: var(--base-green-solid-11);
+  --action-secondary-disabled: var(--base-gray-slate-solid-3);
+  --action-primary-critical-depressed: var(--base-red-solid-12);
+  --action-secondary-interactive-pressed: var(--base-blue-solid-5);
+  --action-secondary-success-pressed: var(--base-green-solid-5);
+  --action-primary-success-depressed: var(--base-green-solid-12);
+  --action-secondary-interactive-hovered: var(--base-blue-solid-4);
+  --action-secondary-success-depressed: var(--base-green-solid-6);
+  --action-secondary-neutral-default: var(--base-gray-slate-solid-1);
+  --action-secondary-success-hovered: var(--base-green-solid-4);
+  --action-secondary-interactive-depressed: var(--base-blue-solid-6);
+  --action-secondary-success-default: var(--base-green-solid-3);
+  --action-secondary-neutral-hovered: var(--base-gray-slate-solid-2);
+  --action-secondary-interactive-default: var(--base-blue-solid-3);
+  --action-secondary-basic-hovered: var(--base-violet-solid-4);
+  --action-secondary-basic-pressed: var(--base-violet-solid-5);
+  --action-secondary-neutral-pressed: var(--base-gray-slate-solid-5);
+  --action-secondary-basic-depressed: var(--base-violet-solid-6);
+  --action-secondary-neutral-depressed: var(--base-gray-slate-solid-6);
+  --action-tertiary-basic-hover: var(--base-violet-alpha-2);
+  --base-indigo-alpha-1: #05058203;
+  --action-tertiary-interactive-hover: var(--base-blue-alpha-2);
+  --action-tertiary-success-hover: var(--base-green-alpha-2);
+  --base-indigo-alpha-2: #054CFF08;
+  --action-tertiary-critical-hover: var(--base-red-alpha-2);
+  --base-indigo-alpha-3: #0144FF0F;
+  --base-indigo-alpha-4: #0247F51A;
+  --base-indigo-alpha-5: #023CEB26;
+  --background-alpha-dark: var(--base-indigo-alpha-12);
+  --base-indigo-alpha-6: #013DE438;
+  --background-alpha-medium: var(--base-indigo-alpha-4);
+  --base-indigo-alpha-7: #0038E052;
+  --base-indigo-alpha-8: #0134DB73;
+  --base-indigo-alpha-9: #0031D2C2;
+  --background-solid-subdued: var(--base-indigo-solid-2);
+  --background-solid-dark: var(--base-indigo-solid-12);
+  --background-solid-default: var(--base-indigo-solid-3);
+  --surface-default: var(--base-pure-white);
+  --surface-subdued: var(--base-gray-slate-solid-2);
+  --base-indigo-alpha-10: #002CBDC4;
+  --surface-selected: var(--base-blue-solid-2);
+  --base-indigo-alpha-11: #00259ECC;
+  --base-indigo-alpha-12: #000E3AF0;
+  --surface-warning: var(--base-amber-solid-2);
+  --base-blue-alpha-1: #0582FF05;
+  --surface-critical: var(--base-red-solid-2);
+  --base-blue-alpha-2: #0582FF0A;
+  --surface-success: var(--base-green-solid-2);
+  --base-blue-alpha-3: #0280FF12;
+  --surface-highlight-subdued: var(--base-violet-solid-2);
+  --base-blue-alpha-4: #0180FF1F;
+  --surface-interactive: var(--base-blue-solid-2);
+  --base-blue-alpha-5: #0180EF30;
+  --surface-highlight-default: var(--base-violet-solid-4);
+  --base-blue-alpha-6: #0177E647;
+  --surface-highlight-hovered: var(--base-violet-solid-6);
+  --base-blue-alpha-7: #0077DF69;
+  --base-blue-alpha-8: #0082E6A1;
+  --base-blue-alpha-9: #0091FFFA;
+  --base-blue-alpha-10: #0080F1FA;
+  --base-blue-alpha-11: #0066DBFA;
+  --base-blue-alpha-12: #002149FA;
+  --base-violet-alpha-1: #5805AB03;
+  --base-violet-alpha-2: #3705FF05;
+  --base-violet-alpha-3: #3C00FF0D;
+  --base-violet-alpha-4: #2E02F417;
+  --base-violet-alpha-5: #2F01E821;
+  --base-violet-alpha-6: #2A01DF30;
+  --base-violet-alpha-7: #2B01D447;
+  --base-violet-alpha-8: #2A00D066;
+  --base-violet-alpha-9: #2500B6A8;
+  --base-violet-alpha-10: #1F00A5B0;
+  --base-violet-alpha-11: #180091BA;
+  --base-violet-alpha-12: #0E003DED;
+  --base-gray-slate-alpha-1: #05448205;
+  --base-gray-slate-alpha-2: #05294D08;
+  --base-gray-slate-alpha-3: #0025490D;
+  --base-gray-slate-alpha-4: #021C3714;
+  --base-gray-slate-alpha-5: #0217351A;
+  --base-gray-slate-alpha-6: #01213921;
+  --base-gray-slate-alpha-7: #001A3329;
+  --base-gray-slate-alpha-8: #011E323D;
+  --base-gray-slate-alpha-9: #00111E78;
+  --base-gray-slate-alpha-10: #00101B82;
+  --base-gray-slate-alpha-11: #000E1896;
+  --base-gray-slate-alpha-12: #00080CED;
+  --base-green-alpha-1: #05C04305;
+  --base-green-alpha-2: #00C43B0D;
+  --base-green-alpha-3: #02BA3C17;
+  --base-green-alpha-4: #01A63521;
+  --base-green-alpha-5: #009B3633;
+  --base-green-alpha-6: #0193364A;
+  --base-green-alpha-7: #008C3D6E;
+  --base-green-alpha-8: #00934CA3;
+  --base-green-alpha-9: #008F4ACF;
+  --base-green-alpha-10: #008346D6;
+  --base-green-alpha-11: #006B3BE8;
+  --base-green-alpha-12: #002012EB;
+  --base-amber-alpha-1: #C0820505;
+  --base-amber-alpha-2: #FFAB0212;
+  --base-amber-alpha-3: #FFBB012B;
+  --base-amber-alpha-4: #FFB70042;
+  --base-amber-alpha-5: #FFB3005E;
+  --base-amber-alpha-6: #FFA20178;
+  --base-amber-alpha-7: #EC8D009C;
+  --base-amber-alpha-8: #EA8900D4;
+  --base-amber-alpha-9: #FFA600DB;
+  --base-amber-alpha-10: #FF9500E3;
+  --base-amber-alpha-11: #AB5300FA;
+  --base-amber-alpha-12: #481800F5;
+  --base-red-alpha-1: #FF050503;
+  --base-red-alpha-2: #FF050508;
+  --base-red-alpha-3: #FF01010F;
+  --base-red-alpha-4: #FF00001A;
+  --base-red-alpha-5: #F2000026;
+  --base-red-alpha-6: #E4010138;
+  --base-red-alpha-7: #D9000452;
+  --base-red-alpha-8: #D1000470;
+  --base-red-alpha-9: #DB0007B8;
+  --base-red-alpha-10: #D10007C2;
+  --base-red-alpha-11: #C30007D4;
+  --base-red-alpha-12: #280003ED;
   --mapareadistrict-default: var(--surface-highlight-default);
   --mapareadistrict-hover: var(--action-secondary-success-hovered);
   --mapareadistrict-selected: var(--action-primary-basic-default);
   --mapareadistrict-disabled: var(--action-primary-disabled);
-  --mapareadistrict-border: var(--lightmode-gray-slate-solid-9);
-  --border-focus: #ffffff03;
+  --mapareadistrict-border: var(--base-gray-slate-solid-9);
+  --border-focus: #FFFFFF03;
+  --transparent: #FFFFFF00;
+  --border-onbg-subdued: var(--base-gray-slate-solid-11);
 
   --space-0: 0px;
   --space-025: 1px;
@@ -293,35 +303,27 @@
   --border-width-2: var(--space-05);
   --border-width-4: var(--space-1);
 
-  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2),
-    0px 0px 1px 0px rgba(0, 0, 0, 0.2);
-  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2),
-    0px 2px 16px 0px rgba(32, 42, 54, 0.08);
+  --shadow-modal: 0px 26px 80px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
+  --shadow-layer: 0px 31px 41px 0px rgba(32, 42, 53, 0.2), 0px 2px 16px 0px rgba(32, 42, 54, 0.08);
   --shadow-inset-basic: inset -1px 0px 0px 0px rgba(228, 229, 231, 1);
   --shadow-inset-button: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
   --shadow-button-pressed: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
   --shadow-button-default: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08),
-    0px 0px 0px 1px rgba(6, 44, 82, 0.1);
+  --shadow-basic-deep: 0px 2px 16px 0px rgba(33, 43, 54, 0.08), 0px 0px 0px 1px rgba(6, 44, 82, 0.1);
   --shadow-basic-faint: 0px 1px 0px 0px rgba(22, 29, 37, 0.05);
   --shadow-basic-transparent: 0px 0px 0px 0px rgba(0, 0, 0, 0);
   --shadow-basic-xs: 0px 0px 2px 0px rgba(31, 33, 36, 0.24);
   --shadow-basic-sm: 0px 1px 1px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 2px 4px 0px rgba(31, 33, 36, 0.1);
-  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05),
-    0px 4px 12px 0px rgba(31, 33, 36, 0.2);
-  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15),
-    0px 4px 18px -2px rgba(31, 33, 36, 0.08);
-  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16),
-    0px 32px 32px 0px rgba(31, 33, 36, 0.15);
-  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12),
-    0px 3px 6px -3px rgba(23, 24, 24, 0.08);
-  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15),
-    0px 0px 5px 0px rgba(23, 24, 24, 0.05);
+  --shadow-basic-md: 0px 1px 6px 0px rgba(31, 33, 36, 0.05), 0px 2px 4px 0px rgba(31, 33, 36, 0.1);
+  --shadow-basic-lg: 0px 2px 6px 0px rgba(31, 33, 36, 0.05), 0px 4px 12px 0px rgba(31, 33, 36, 0.2);
+  --shadow-basic-xl: 0px 12px 18px -2px rgba(31, 33, 36, 0.15), 0px 4px 18px -2px rgba(31, 33, 36, 0.08);
+  --shadow-basic-2xl: 0px 32px 56px -2px rgba(31, 33, 36, 0.16), 0px 32px 32px 0px rgba(31, 33, 36, 0.15);
+  --shadow-element-popover: 0px 8px 20px -4px rgba(23, 24, 24, 0.12), 0px 3px 6px -3px rgba(23, 24, 24, 0.08);
+  --shadow-element-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 5px 0px rgba(23, 24, 24, 0.05);
   --shadow-element-topnav: 0px 2px 2px -1px rgba(0, 0, 0, 0.15);
   --shadow-element-focus: 0px 0px 0px 2px rgba(0, 145, 255, 1);
 
+
   --z-1: 100;
   --z-2: 400;
   --z-3: 513;
diff --git a/packages/opub-viz/styles/tokens/_variables_dark.css b/packages/opub-viz/styles/tokens/_variables_dark.css
deleted file mode 100644
index 54da2e9f..00000000
--- a/packages/opub-viz/styles/tokens/_variables_dark.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-
-  :root {
-    --background: #202123ff;
-    --background-hovered: #474849;
-    --background-pressed: #555a5e;
-    --background-selected: #2d2d33;
-    --background-invert: #f6f6f7ff;
-
-    --text: #b0b0bc;
-    --text-strong: #e7e7f1;
-    --text-subdued: #85858e;
-    /* --interactive: #8bb2ff; */
-    --interactive-hovered: #2c6ecbff;
-
-    --surface: #161619;
-    --surface-hovered: #2d2d33;
-    --surface-pressed: #474849;
-    --surface-selected: #474849;
-
-    --surface-attention: #454500;
-    --surface-information: #02382d;
-    --surface-warning: #4c250f;
-    --surface-subdued: #1e1e23;
-
-    --surface-selected: #202124;
-    --surface-critical-subdued: #201e1e;
-
-    --surface-neutral: #202123;
-    --surface-neutral-hovered: #474849;
-    --surface-neutral-pressed: #555a5e;
-    --surface-neutral-disabled: #555a5e;
-
-    --card-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, 0.12);
-    --card-shadow-hover: 0 4px 7px hsla(0, 0%, 100%, 0.1),
-      inset 0 0 0 1px hsla(0, 0%, 100%, 0.12);
-
-    --backdrop: rgba(0, 0, 0, 0.5);
-
-    --icon: #eeeeee;
-    --icon-subdued: #dddddd;
-    --icon-hovered: #ffffff;
-    --icon-pressed: #dddddd;
-  }
-}
diff --git a/packages/opub-viz/styles/tokens/tailwind/color.js b/packages/opub-viz/styles/tokens/tailwind/color.js
index a716cfe7..ded0b84d 100644
--- a/packages/opub-viz/styles/tokens/tailwind/color.js
+++ b/packages/opub-viz/styles/tokens/tailwind/color.js
@@ -1,265 +1,275 @@
-module.exports = {
-  lightmodeIndigoSolid1: '#FDFDFE',
-  lightmodeIndigoSolid2: '#F8FAFF',
-  lightmodeIndigoSolid3: '#F0F4FF',
-  lightmodeIndigoSolid4: '#E6EDFE',
-  lightmodeIndigoSolid5: '#D9E2FC',
-  lightmodeIndigoSolid6: '#C6D4F9',
-  lightmodeIndigoSolid7: '#AEC0F5',
-  lightmodeIndigoSolid8: '#8DA4EF',
-  lightmodeIndigoSolid9: '#3E63DD',
-  lightmodeIndigoSolid10: '#3A5CCC',
-  lightmodeIndigoSolid11: '#3451B2',
-  lightmodeIndigoSolid12: '#101D46',
-  lightmodeBlueSolid1: '#FBFDFF',
-  lightmodeBlueSolid2: '#F5FAFF',
-  lightmodeBlueSolid3: '#EDF6FF',
-  lightmodeBlueSolid4: '#E1F0FF',
-  lightmodeBlueSolid5: '#CEE7FE',
-  lightmodeBlueSolid6: '#B7D9F8',
-  lightmodeBlueSolid7: '#96C7F2',
-  lightmodeBlueSolid8: '#5EB0EF',
-  lightmodeBlueSolid9: '#0091FF',
-  lightmodeBlueSolid10: '#0081F1',
-  lightmodeBlueSolid11: '#006ADC',
-  lightmodeBlueSolid12: '#00254D',
-  lightmodeVioletSolid1: '#FDFCFE',
-  lightmodeVioletSolid2: '#FBFAFF',
-  lightmodeVioletSolid3: '#F5F2FF',
-  lightmodeVioletSolid4: '#EDE9FE',
-  lightmodeVioletSolid5: '#E4DEFC',
-  lightmodeVioletSolid6: '#D7CFF9',
-  lightmodeVioletSolid7: '#C4B8F3',
-  lightmodeVioletSolid8: '#AA99EC',
-  lightmodeVioletSolid9: '#6E56CF',
-  lightmodeVioletSolid10: '#644FC1',
-  lightmodeVioletSolid11: '#5746AF',
-  lightmodeVioletSolid12: '#20134B',
-  lightmodeGraySlateSolid1: '#FBFCFD',
-  lightmodeGraySlateSolid2: '#F8F9FA',
-  lightmodeGraySlateSolid3: '#F1F3F5',
-  lightmodeGraySlateSolid4: '#ECEEF0',
-  lightmodeGraySlateSolid5: '#E6E8EB',
-  lightmodeGraySlateSolid6: '#DFE3E6',
-  lightmodeGraySlateSolid7: '#D7DBDF',
-  lightmodeGraySlateSolid8: '#C1C8CD',
-  lightmodeGraySlateSolid9: '#889096',
-  lightmodeGraySlateSolid10: '#7E868C',
-  lightmodeGraySlateSolid11: '#687076',
-  lightmodeGraySlateSolid12: '#11181C',
-  lightmodeRedSolid1: '#FFFCFC',
-  lightmodeRedSolid2: '#FFF8F8',
-  lightmodeRedSolid3: '#FFEFEF',
-  lightmodeRedSolid4: '#FFE5E5',
-  lightmodeRedSolid5: '#FDD8D8',
-  lightmodeRedSolid6: '#F9C6C6',
-  lightmodeRedSolid7: '#F3AEAF',
-  lightmodeRedSolid8: '#EB9091',
-  lightmodeRedSolid9: '#E5484D',
-  lightmodeRedSolid10: '#DC3D43',
-  lightmodeRedSolid11: '#CD2B31',
-  lightmodeRedSolid12: '#381316',
-  lightmodeGreenSolid1: '#FBFEFC',
-  lightmodeGreenSolid2: '#F2FCF5',
-  lightmodeGreenSolid3: '#E9F9EE',
-  lightmodeGreenSolid4: '#DDF3E4',
-  lightmodeGreenSolid5: '#CCEBD7',
-  lightmodeGreenSolid6: '#B4DFC4',
-  lightmodeGreenSolid7: '#92CEAC',
-  lightmodeGreenSolid8: '#5BB98C',
-  lightmodeGreenSolid9: '#30A46C',
-  lightmodeGreenSolid10: '#299764',
-  lightmodeGreenSolid11: '#18794E',
-  lightmodeGreenSolid12: '#153226',
-  lightmodeAmberSolid1: '#FEFDFB',
-  lightmodeAmberSolid2: '#FFF9ED',
-  lightmodeAmberSolid3: '#FFF4D5',
-  lightmodeAmberSolid4: '#FFECBC',
-  lightmodeAmberSolid5: '#FFE3A2',
-  lightmodeAmberSolid6: '#FFD386',
-  lightmodeAmberSolid7: '#F3BA63',
-  lightmodeAmberSolid8: '#EE9D2B',
-  lightmodeAmberSolid9: '#FFB224',
-  lightmodeAmberSolid10: '#FFA01C',
-  lightmodeAmberSolid11: '#AD5700',
-  lightmodeAmberSolid12: '#4E2009',
-  lightmodePureWhite: '#FFFFFF',
-  lightmodePureBlack: '#000000',
-  textDefault: 'var(--lightmode-gray-slate-solid-12)',
-  textSubdued: '#3E4346',
-  textDisabled: 'var(--lightmode-gray-slate-solid-9)',
-  textCritical: 'var(--lightmode-red-solid-11)',
-  textWarning: 'var(--lightmode-amber-solid-11)',
-  textSuccess: 'var(--lightmode-green-solid-11)',
-  textHighlight: 'var(--lightmode-violet-solid-11)',
-  textInteractive: 'var(--lightmode-blue-solid-11)',
-  textOnBGDisabled: 'var(--lightmode-gray-slate-solid-6)',
-  textOnBGDefault: 'var(--lightmode-pure-white)',
-  borderDefault: 'var(--lightmode-gray-slate-solid-8)',
-  borderSubdued: 'var(--lightmode-gray-slate-solid-7)',
-  borderDisabled: 'var(--lightmode-gray-slate-solid-6)',
-  borderCriticalDefault: 'var(--lightmode-red-solid-8)',
-  borderCriticalDisabled: 'var(--lightmode-red-solid-7)',
-  borderCriticalSubdued: 'var(--lightmode-red-solid-6)',
-  borderSuccessDefault: 'var(--lightmode-green-solid-8)',
-  borderSuccessSubdued: 'var(--lightmode-green-solid-7)',
-  borderWarningDefault: 'var(--lightmode-amber-solid-8)',
-  borderWarningSubdued: 'var(--lightmode-amber-solid-7)',
-  borderHighlightDefault: 'var(--lightmode-violet-solid-8)',
-  borderHighlightSubdued: 'var(--lightmode-violet-solid-7)',
-  borderInteractiveDefault: 'var(--lightmode-blue-solid-8)',
-  borderInteractiveFocused: 'var(--lightmode-blue-solid-7)',
-  iconDefault: 'var(--lightmode-gray-slate-solid-11)',
-  iconSubdued: 'var(--lightmode-gray-slate-solid-10)',
-  iconDisabled: 'var(--lightmode-gray-slate-solid-9)',
-  iconCritical: 'var(--lightmode-red-solid-10)',
-  actionPrimaryBasicDefault: 'var(--lightmode-violet-solid-9)',
-  iconWarning: 'var(--lightmode-amber-solid-10)',
-  actionPrimaryBasicHovered: 'var(--lightmode-violet-solid-10)',
-  iconSuccess: 'var(--lightmode-green-solid-10)',
-  actionPrimaryBasicPressed: 'var(--lightmode-violet-solid-11)',
-  iconHighlight: 'var(--lightmode-violet-solid-10)',
-  iconInteractive: 'var(--lightmode-indigo-solid-11)',
-  actionPrimaryBasicDepressed: 'var(--lightmode-violet-solid-12)',
-  actionPrimaryDisabled: 'var(--lightmode-gray-slate-solid-9)',
-  actionPrimaryCriticalDefault: 'var(--lightmode-red-solid-9)',
-  actionPrimarySuccessDefault: 'var(--lightmode-green-solid-9)',
-  actionPrimaryCriticalHovered: 'var(--lightmode-red-solid-10)',
-  actionSecondaryCriticalPressed: 'var(--lightmode-red-solid-5)',
-  actionSecondaryCriticalHovered: 'var(--lightmode-red-solid-4)',
-  actionSecondaryCriticalDepressed: 'var(--lightmode-red-solid-6)',
-  actionSecondaryCriticalDefault: 'var(--lightmode-red-solid-3)',
-  actionPrimaryInteractiveDefault: 'var(--lightmode-blue-solid-9)',
-  actionPrimaryInteractiveHovered: 'var(--lightmode-blue-solid-10)',
-  actionPrimaryInteractivePressed: 'var(--lightmode-blue-solid-11)',
-  actionPrimaryInteractiveDepressed: 'var(--lightmode-blue-solid-12)',
-  actionPrimarySuccessHovered: 'var(--lightmode-green-solid-10)',
-  actionSecondaryBasicDefault: 'var(--lightmode-violet-solid-3)',
-  actionPrimaryCriticalPressed: 'var(--lightmode-red-solid-11)',
-  actionPrimaryCriticalDepressed: 'var(--lightmode-red-solid-12)',
-  actionSecondaryDisabled: 'var(--lightmode-gray-slate-solid-3)',
-  actionPrimarySuccessPressed: 'var(--lightmode-green-solid-11)',
-  actionSecondaryInteractiveDepressed: 'var(--lightmode-blue-solid-6)',
-  actionSecondarySuccessDepressed: 'var(--lightmode-green-solid-6)',
-  actionSecondarySuccessPressed: 'var(--lightmode-green-solid-5)',
-  actionPrimarySuccessDepressed: 'var(--lightmode-green-solid-12)',
-  actionSecondaryInteractiveHovered: 'var(--lightmode-blue-solid-4)',
-  actionSecondaryNeutralDefault: 'var(--lightmode-gray-slate-solid-1)',
-  actionSecondaryInteractivePressed: 'var(--lightmode-blue-solid-5)',
-  actionSecondarySuccessHovered: 'var(--lightmode-green-solid-4)',
-  actionSecondarySuccessDefault: 'var(--lightmode-green-solid-3)',
-  actionSecondaryInteractiveDefault: 'var(--lightmode-blue-solid-3)',
-  actionSecondaryNeutralHovered: 'var(--lightmode-gray-slate-solid-2)',
-  actionSecondaryNeutralPressed: 'var(--lightmode-gray-slate-solid-5)',
-  actionSecondaryBasicDepressed: 'var(--lightmode-violet-solid-6)',
-  actionSecondaryBasicHovered: 'var(--lightmode-violet-solid-4)',
-  actionSecondaryBasicPressed: 'var(--lightmode-violet-solid-5)',
-  actionSecondaryNeutralDepressed: 'var(--lightmode-gray-slate-solid-6)',
-  actionTertiaryBasicHover: 'var(--lightmode-violet-alpha-2)',
-  lightmodeIndigoAlpha1: '#05058203',
-  actionTertiaryInteractiveHover: 'var(--lightmode-blue-alpha-2)',
-  lightmodeIndigoAlpha2: '#054CFF08',
-  actionTertiarySuccessHover: 'var(--lightmode-green-alpha-2)',
-  actionTertiaryCriticalHover: 'var(--lightmode-red-alpha-2)',
-  lightmodeIndigoAlpha3: '#0144FF0F',
-  lightmodeIndigoAlpha4: '#0247F51A',
-  lightmodeIndigoAlpha5: '#023CEB26',
-  lightmodeIndigoAlpha6: '#013DE438',
-  lightmodeIndigoAlpha7: '#0038E052',
-  lightmodeIndigoAlpha8: '#0134DB73',
-  lightmodeIndigoAlpha9: '#0031D2C2',
-  backgroundSubdued: 'var(--lightmode-indigo-solid-2)',
-  backgroundDark: 'var(--lightmode-indigo-solid-12)',
-  backgroundDefault: 'var(--lightmode-indigo-solid-3)',
-  surfaceDefault: 'var(--lightmode-pure-white)',
-  lightmodeIndigoAlpha10: '#002CBDC4',
-  surfaceSubdued: 'var(--lightmode-gray-slate-solid-2)',
-  lightmodeIndigoAlpha11: '#00259ECC',
-  surfaceSelected: 'var(--lightmode-blue-solid-2)',
-  lightmodeIndigoAlpha12: '#000E3AF0',
-  surfaceWarning: 'var(--lightmode-amber-solid-2)',
-  surfaceCritical: 'var(--lightmode-red-solid-2)',
-  lightmodeBlueAlpha1: '#0582FF05',
-  lightmodeBlueAlpha2: '#0582FF0A',
-  surfaceSuccess: 'var(--lightmode-green-solid-2)',
-  surfaceHighlightSubdued: 'var(--lightmode-violet-solid-2)',
-  lightmodeBlueAlpha3: '#0280FF12',
-  lightmodeBlueAlpha4: '#0180FF1F',
-  surfaceInteractive: 'var(--lightmode-blue-solid-2)',
-  surfaceHighlightDefault: 'var(--lightmode-violet-solid-4)',
-  lightmodeBlueAlpha5: '#0180EF30',
-  surfaceHighlightHovered: 'var(--lightmode-violet-solid-6)',
-  lightmodeBlueAlpha6: '#0177E647',
-  lightmodeBlueAlpha7: '#0077DF69',
-  lightmodeBlueAlpha8: '#0082E6A1',
-  lightmodeBlueAlpha9: '#0091FFFA',
-  lightmodeBlueAlpha10: '#0080F1FA',
-  lightmodeBlueAlpha11: '#0066DBFA',
-  lightmodeBlueAlpha12: '#002149FA',
-  lightmodeVioletAlpha1: '#5805AB03',
-  lightmodeVioletAlpha2: '#3705FF05',
-  lightmodeVioletAlpha3: '#3C00FF0D',
-  lightmodeVioletAlpha4: '#2E02F417',
-  lightmodeVioletAlpha5: '#2F01E821',
-  lightmodeVioletAlpha6: '#2A01DF30',
-  lightmodeVioletAlpha7: '#2B01D447',
-  lightmodeVioletAlpha8: '#2A00D066',
-  lightmodeVioletAlpha9: '#2500B6A8',
-  lightmodeVioletAlpha10: '#1F00A5B0',
-  lightmodeVioletAlpha11: '#180091BA',
-  lightmodeVioletAlpha12: '#0E003DED',
-  lightmodeGraySlateAlpha1: '#05448205',
-  lightmodeGraySlateAlpha2: '#05294D08',
-  lightmodeGraySlateAlpha3: '#0025490D',
-  lightmodeGraySlateAlpha4: '#021C3714',
-  lightmodeGraySlateAlpha5: '#0217351A',
-  lightmodeGraySlateAlpha6: '#01213921',
-  lightmodeGraySlateAlpha7: '#001A3329',
-  lightmodeGraySlateAlpha8: '#011E323D',
-  lightmodeGraySlateAlpha9: '#00111E78',
-  lightmodeGraySlateAlpha10: '#00101B82',
-  lightmodeGraySlateAlpha11: '#000E1896',
-  lightmodeGraySlateAlpha12: '#00080CED',
-  lightmodeGreenAlpha1: '#05C04305',
-  lightmodeGreenAlpha2: '#00C43B0D',
-  lightmodeGreenAlpha3: '#02BA3C17',
-  lightmodeGreenAlpha4: '#01A63521',
-  lightmodeGreenAlpha5: '#009B3633',
-  lightmodeGreenAlpha6: '#0193364A',
-  lightmodeGreenAlpha7: '#008C3D6E',
-  lightmodeGreenAlpha8: '#00934CA3',
-  lightmodeGreenAlpha9: '#008F4ACF',
-  lightmodeGreenAlpha10: '#008346D6',
-  lightmodeGreenAlpha11: '#006B3BE8',
-  lightmodeGreenAlpha12: '#002012EB',
-  lightmodeAmberAlpha1: '#C0820505',
-  lightmodeAmberAlpha2: '#FFAB0212',
-  lightmodeAmberAlpha3: '#FFBB012B',
-  lightmodeAmberAlpha4: '#FFB70042',
-  lightmodeAmberAlpha5: '#FFB3005E',
-  lightmodeAmberAlpha6: '#FFA20178',
-  lightmodeAmberAlpha7: '#EC8D009C',
-  lightmodeAmberAlpha8: '#EA8900D4',
-  lightmodeAmberAlpha9: '#FFA600DB',
-  lightmodeAmberAlpha10: '#FF9500E3',
-  lightmodeAmberAlpha11: '#AB5300FA',
-  lightmodeAmberAlpha12: '#481800F5',
-  lightmodeRedAlpha1: '#FF050503',
-  lightmodeRedAlpha2: '#FF050508',
-  lightmodeRedAlpha3: '#FF01010F',
-  lightmodeRedAlpha4: '#FF00001A',
-  lightmodeRedAlpha5: '#F2000026',
-  lightmodeRedAlpha6: '#E4010138',
-  lightmodeRedAlpha7: '#D9000452',
-  lightmodeRedAlpha8: '#D1000470',
-  lightmodeRedAlpha9: '#DB0007B8',
-  lightmodeRedAlpha10: '#D10007C2',
-  lightmodeRedAlpha11: '#C30007D4',
-  lightmodeRedAlpha12: '#280003ED',
-  mapareadistrictDefault: 'var(--surface-highlight-default)',
-  mapareadistrictHover: 'var(--action-secondary-success-hovered)',
-  mapareadistrictSelected: 'var(--action-primary-basic-default)',
-  mapareadistrictDisabled: 'var(--action-primary-disabled)',
-  mapareadistrictBorder: 'var(--lightmode-gray-slate-solid-9)',
-  borderFocus: '#FFFFFF03',
-};
+module.exports = { 
+  "baseIndigoSolid1": "#FDFDFE",
+  "baseIndigoSolid2": "#F8FAFF",
+  "baseIndigoSolid3": "#F0F4FF",
+  "baseIndigoSolid4": "#E6EDFE",
+  "baseIndigoSolid5": "#D9E2FC",
+  "baseIndigoSolid6": "#C6D4F9",
+  "baseIndigoSolid7": "#AEC0F5",
+  "baseIndigoSolid8": "#8DA4EF",
+  "baseIndigoSolid9": "#3E63DD",
+  "baseIndigoSolid10": "#3A5CCC",
+  "baseIndigoSolid11": "#3451B2",
+  "baseIndigoSolid12": "#101D46",
+  "baseBlueSolid1": "#FBFDFF",
+  "baseBlueSolid2": "#F5FAFF",
+  "baseBlueSolid3": "#EDF6FF",
+  "baseBlueSolid4": "#E1F0FF",
+  "baseBlueSolid5": "#CEE7FE",
+  "baseBlueSolid6": "#B7D9F8",
+  "baseBlueSolid7": "#96C7F2",
+  "baseBlueSolid8": "#5EB0EF",
+  "baseBlueSolid9": "#0091FF",
+  "baseBlueSolid10": "#0081F1",
+  "baseBlueSolid11": "#006ADC",
+  "baseBlueSolid12": "#00254D",
+  "baseVioletSolid1": "#FDFCFE",
+  "baseVioletSolid2": "#FBFAFF",
+  "baseVioletSolid3": "#F5F2FF",
+  "baseVioletSolid4": "#EDE9FE",
+  "baseVioletSolid5": "#E4DEFC",
+  "baseVioletSolid6": "#D7CFF9",
+  "baseVioletSolid7": "#C4B8F3",
+  "baseVioletSolid8": "#AA99EC",
+  "baseVioletSolid9": "#6E56CF",
+  "baseVioletSolid10": "#644FC1",
+  "baseVioletSolid11": "#5746AF",
+  "baseVioletSolid12": "#20134B",
+  "baseGraySlateSolid1": "#FBFCFD",
+  "baseGraySlateSolid2": "#F8F9FA",
+  "baseGraySlateSolid3": "#F1F3F5",
+  "baseGraySlateSolid4": "#ECEEF0",
+  "baseGraySlateSolid5": "#E6E8EB",
+  "baseGraySlateSolid6": "#DFE3E6",
+  "baseGraySlateSolid7": "#D7DBDF",
+  "baseGraySlateSolid8": "#C1C8CD",
+  "baseGraySlateSolid9": "#889096",
+  "baseGraySlateSolid10": "#7E868C",
+  "baseGraySlateSolid11": "#687076",
+  "baseGraySlateSolid12": "#11181C",
+  "baseRedSolid1": "#FFFCFC",
+  "baseRedSolid2": "#FFF8F8",
+  "baseRedSolid3": "#FFEFEF",
+  "baseRedSolid4": "#FFE5E5",
+  "baseRedSolid5": "#FDD8D8",
+  "baseRedSolid6": "#F9C6C6",
+  "baseRedSolid7": "#F3AEAF",
+  "baseRedSolid8": "#EB9091",
+  "baseRedSolid9": "#E5484D",
+  "baseRedSolid10": "#DC3D43",
+  "baseRedSolid11": "#CD2B31",
+  "baseRedSolid12": "#381316",
+  "baseGreenSolid1": "#FBFEFC",
+  "baseGreenSolid2": "#F2FCF5",
+  "baseGreenSolid3": "#E9F9EE",
+  "baseGreenSolid4": "#DDF3E4",
+  "baseGreenSolid5": "#CCEBD7",
+  "baseGreenSolid6": "#B4DFC4",
+  "baseGreenSolid7": "#92CEAC",
+  "baseGreenSolid8": "#5BB98C",
+  "baseGreenSolid9": "#30A46C",
+  "baseGreenSolid10": "#299764",
+  "baseGreenSolid11": "#18794E",
+  "baseGreenSolid12": "#153226",
+  "baseAmberSolid1": "#FEFDFB",
+  "baseAmberSolid2": "#FFF9ED",
+  "baseAmberSolid3": "#FFF4D5",
+  "baseAmberSolid4": "#FFECBC",
+  "baseAmberSolid5": "#FFE3A2",
+  "baseAmberSolid6": "#FFD386",
+  "baseAmberSolid7": "#F3BA63",
+  "baseAmberSolid8": "#EE9D2B",
+  "baseAmberSolid9": "#FFB224",
+  "baseAmberSolid10": "#FFA01C",
+  "baseAmberSolid11": "#AD5700",
+  "baseAmberSolid12": "#4E2009",
+  "basePureWhite": "#FFFFFF",
+  "basePureBlack": "#000000",
+  "textDefault": "var(--base-gray-slate-solid-12)",
+  "textMedium": "var(--base-gray-slate-solid-11)",
+  "textSubdued": "#3E4346",
+  "textDisabled": "var(--base-gray-slate-solid-9)",
+  "textCritical": "var(--base-red-solid-11)",
+  "textWarning": "var(--base-amber-solid-11)",
+  "textSuccess": "var(--base-green-solid-11)",
+  "textHighlight": "var(--base-violet-solid-11)",
+  "textInteractive": "var(--base-blue-solid-11)",
+  "textOnBGDefault": "var(--base-gray-slate-solid-1)",
+  "textOnBGDisabled": "var(--base-gray-slate-solid-9)",
+  "borderDefault": "var(--base-gray-slate-solid-8)",
+  "borderSubdued": "var(--base-gray-slate-solid-7)",
+  "borderDisabled": "var(--base-gray-slate-solid-6)",
+  "borderCriticalDefault": "var(--base-red-solid-8)",
+  "borderCriticalDisabled": "var(--base-red-solid-7)",
+  "borderCriticalSubdued": "var(--base-red-solid-6)",
+  "borderSuccessDefault": "var(--base-green-solid-8)",
+  "borderSuccessSubdued": "var(--base-green-solid-7)",
+  "borderWarningDefault": "var(--base-amber-solid-8)",
+  "borderWarningSubdued": "var(--base-amber-solid-7)",
+  "borderHighlightDefault": "var(--base-violet-solid-8)",
+  "borderHighlightSubdued": "var(--base-violet-solid-7)",
+  "borderHighlightOnBGSubdued": "var(--base-violet-solid-9)",
+  "borderHighlightOnBGDefault": "var(--base-violet-solid-7)",
+  "borderInteractiveDefault": "var(--base-blue-solid-8)",
+  "borderInteractiveFocused": "var(--base-blue-solid-7)",
+  "iconDefault": "var(--base-gray-slate-solid-11)",
+  "iconSubdued": "var(--base-gray-slate-solid-10)",
+  "iconDisabled": "var(--base-gray-slate-solid-9)",
+  "iconCritical": "var(--base-red-solid-10)",
+  "actionPrimaryBasicDefault": "var(--base-violet-solid-9)",
+  "iconWarning": "var(--base-amber-solid-10)",
+  "actionPrimaryBasicHovered": "var(--base-violet-solid-10)",
+  "iconSuccess": "var(--base-green-solid-10)",
+  "actionPrimaryBasicPressed": "var(--base-violet-solid-11)",
+  "iconHighlight": "var(--base-violet-solid-10)",
+  "iconInteractive": "var(--base-indigo-solid-11)",
+  "actionPrimaryBasicDepressed": "var(--base-violet-solid-12)",
+  "iconOnBGDefault": "var(--base-gray-slate-solid-1)",
+  "actionPrimaryDisabled": "var(--base-gray-slate-solid-9)",
+  "iconOnBGSubdued": "var(--base-gray-slate-solid-4)",
+  "actionPrimaryCriticalDefault": "var(--base-red-solid-9)",
+  "iconOnBGDisabled": "var(--base-gray-slate-solid-9)",
+  "actionPrimarySuccessDefault": "var(--base-green-solid-9)",
+  "actionPrimaryCriticalHovered": "var(--base-red-solid-10)",
+  "actionSecondaryCriticalPressed": "var(--base-red-solid-5)",
+  "actionSecondaryCriticalHovered": "var(--base-red-solid-4)",
+  "actionSecondaryCriticalDepressed": "var(--base-red-solid-6)",
+  "actionPrimaryInteractiveDefault": "var(--base-blue-solid-9)",
+  "actionSecondaryCriticalDefault": "var(--base-red-solid-3)",
+  "actionPrimaryInteractiveHovered": "var(--base-blue-solid-10)",
+  "actionPrimaryInteractivePressed": "var(--base-blue-solid-11)",
+  "actionPrimaryInteractiveDepressed": "var(--base-blue-solid-12)",
+  "actionPrimaryCriticalPressed": "var(--base-red-solid-11)",
+  "actionSecondaryBasicDefault": "var(--base-violet-solid-3)",
+  "actionPrimarySuccessHovered": "var(--base-green-solid-10)",
+  "actionPrimarySuccessPressed": "var(--base-green-solid-11)",
+  "actionSecondaryDisabled": "var(--base-gray-slate-solid-3)",
+  "actionPrimaryCriticalDepressed": "var(--base-red-solid-12)",
+  "actionSecondaryInteractivePressed": "var(--base-blue-solid-5)",
+  "actionSecondarySuccessPressed": "var(--base-green-solid-5)",
+  "actionPrimarySuccessDepressed": "var(--base-green-solid-12)",
+  "actionSecondaryInteractiveHovered": "var(--base-blue-solid-4)",
+  "actionSecondarySuccessDepressed": "var(--base-green-solid-6)",
+  "actionSecondaryNeutralDefault": "var(--base-gray-slate-solid-1)",
+  "actionSecondarySuccessHovered": "var(--base-green-solid-4)",
+  "actionSecondaryInteractiveDepressed": "var(--base-blue-solid-6)",
+  "actionSecondarySuccessDefault": "var(--base-green-solid-3)",
+  "actionSecondaryNeutralHovered": "var(--base-gray-slate-solid-2)",
+  "actionSecondaryInteractiveDefault": "var(--base-blue-solid-3)",
+  "actionSecondaryBasicHovered": "var(--base-violet-solid-4)",
+  "actionSecondaryBasicPressed": "var(--base-violet-solid-5)",
+  "actionSecondaryNeutralPressed": "var(--base-gray-slate-solid-5)",
+  "actionSecondaryBasicDepressed": "var(--base-violet-solid-6)",
+  "actionSecondaryNeutralDepressed": "var(--base-gray-slate-solid-6)",
+  "actionTertiaryBasicHover": "var(--base-violet-alpha-2)",
+  "baseIndigoAlpha1": "#05058203",
+  "actionTertiaryInteractiveHover": "var(--base-blue-alpha-2)",
+  "actionTertiarySuccessHover": "var(--base-green-alpha-2)",
+  "baseIndigoAlpha2": "#054CFF08",
+  "actionTertiaryCriticalHover": "var(--base-red-alpha-2)",
+  "baseIndigoAlpha3": "#0144FF0F",
+  "baseIndigoAlpha4": "#0247F51A",
+  "baseIndigoAlpha5": "#023CEB26",
+  "backgroundAlphaDark": "var(--base-indigo-alpha-12)",
+  "baseIndigoAlpha6": "#013DE438",
+  "backgroundAlphaMedium": "var(--base-indigo-alpha-4)",
+  "baseIndigoAlpha7": "#0038E052",
+  "baseIndigoAlpha8": "#0134DB73",
+  "baseIndigoAlpha9": "#0031D2C2",
+  "backgroundSolidSubdued": "var(--base-indigo-solid-2)",
+  "backgroundSolidDark": "var(--base-indigo-solid-12)",
+  "backgroundSolidDefault": "var(--base-indigo-solid-3)",
+  "surfaceDefault": "var(--base-pure-white)",
+  "surfaceSubdued": "var(--base-gray-slate-solid-2)",
+  "baseIndigoAlpha10": "#002CBDC4",
+  "surfaceSelected": "var(--base-blue-solid-2)",
+  "baseIndigoAlpha11": "#00259ECC",
+  "baseIndigoAlpha12": "#000E3AF0",
+  "surfaceWarning": "var(--base-amber-solid-2)",
+  "baseBlueAlpha1": "#0582FF05",
+  "surfaceCritical": "var(--base-red-solid-2)",
+  "baseBlueAlpha2": "#0582FF0A",
+  "surfaceSuccess": "var(--base-green-solid-2)",
+  "baseBlueAlpha3": "#0280FF12",
+  "surfaceHighlightSubdued": "var(--base-violet-solid-2)",
+  "baseBlueAlpha4": "#0180FF1F",
+  "surfaceInteractive": "var(--base-blue-solid-2)",
+  "baseBlueAlpha5": "#0180EF30",
+  "surfaceHighlightDefault": "var(--base-violet-solid-4)",
+  "baseBlueAlpha6": "#0177E647",
+  "surfaceHighlightHovered": "var(--base-violet-solid-6)",
+  "baseBlueAlpha7": "#0077DF69",
+  "baseBlueAlpha8": "#0082E6A1",
+  "baseBlueAlpha9": "#0091FFFA",
+  "baseBlueAlpha10": "#0080F1FA",
+  "baseBlueAlpha11": "#0066DBFA",
+  "baseBlueAlpha12": "#002149FA",
+  "baseVioletAlpha1": "#5805AB03",
+  "baseVioletAlpha2": "#3705FF05",
+  "baseVioletAlpha3": "#3C00FF0D",
+  "baseVioletAlpha4": "#2E02F417",
+  "baseVioletAlpha5": "#2F01E821",
+  "baseVioletAlpha6": "#2A01DF30",
+  "baseVioletAlpha7": "#2B01D447",
+  "baseVioletAlpha8": "#2A00D066",
+  "baseVioletAlpha9": "#2500B6A8",
+  "baseVioletAlpha10": "#1F00A5B0",
+  "baseVioletAlpha11": "#180091BA",
+  "baseVioletAlpha12": "#0E003DED",
+  "baseGraySlateAlpha1": "#05448205",
+  "baseGraySlateAlpha2": "#05294D08",
+  "baseGraySlateAlpha3": "#0025490D",
+  "baseGraySlateAlpha4": "#021C3714",
+  "baseGraySlateAlpha5": "#0217351A",
+  "baseGraySlateAlpha6": "#01213921",
+  "baseGraySlateAlpha7": "#001A3329",
+  "baseGraySlateAlpha8": "#011E323D",
+  "baseGraySlateAlpha9": "#00111E78",
+  "baseGraySlateAlpha10": "#00101B82",
+  "baseGraySlateAlpha11": "#000E1896",
+  "baseGraySlateAlpha12": "#00080CED",
+  "baseGreenAlpha1": "#05C04305",
+  "baseGreenAlpha2": "#00C43B0D",
+  "baseGreenAlpha3": "#02BA3C17",
+  "baseGreenAlpha4": "#01A63521",
+  "baseGreenAlpha5": "#009B3633",
+  "baseGreenAlpha6": "#0193364A",
+  "baseGreenAlpha7": "#008C3D6E",
+  "baseGreenAlpha8": "#00934CA3",
+  "baseGreenAlpha9": "#008F4ACF",
+  "baseGreenAlpha10": "#008346D6",
+  "baseGreenAlpha11": "#006B3BE8",
+  "baseGreenAlpha12": "#002012EB",
+  "baseAmberAlpha1": "#C0820505",
+  "baseAmberAlpha2": "#FFAB0212",
+  "baseAmberAlpha3": "#FFBB012B",
+  "baseAmberAlpha4": "#FFB70042",
+  "baseAmberAlpha5": "#FFB3005E",
+  "baseAmberAlpha6": "#FFA20178",
+  "baseAmberAlpha7": "#EC8D009C",
+  "baseAmberAlpha8": "#EA8900D4",
+  "baseAmberAlpha9": "#FFA600DB",
+  "baseAmberAlpha10": "#FF9500E3",
+  "baseAmberAlpha11": "#AB5300FA",
+  "baseAmberAlpha12": "#481800F5",
+  "baseRedAlpha1": "#FF050503",
+  "baseRedAlpha2": "#FF050508",
+  "baseRedAlpha3": "#FF01010F",
+  "baseRedAlpha4": "#FF00001A",
+  "baseRedAlpha5": "#F2000026",
+  "baseRedAlpha6": "#E4010138",
+  "baseRedAlpha7": "#D9000452",
+  "baseRedAlpha8": "#D1000470",
+  "baseRedAlpha9": "#DB0007B8",
+  "baseRedAlpha10": "#D10007C2",
+  "baseRedAlpha11": "#C30007D4",
+  "baseRedAlpha12": "#280003ED",
+  "mapareadistrictDefault": "var(--surface-highlight-default)",
+  "mapareadistrictHover": "var(--action-secondary-success-hovered)",
+  "mapareadistrictSelected": "var(--action-primary-basic-default)",
+  "mapareadistrictDisabled": "var(--action-primary-disabled)",
+  "mapareadistrictBorder": "var(--base-gray-slate-solid-9)",
+  "borderFocus": "#FFFFFF03",
+  "transparent": "#FFFFFF00",
+  "borderOnBGSubdued": "var(--base-gray-slate-solid-11)",
+}
diff --git a/packages/opub-viz/styles/tokens/tokens.json b/packages/opub-viz/styles/tokens/tokens.json
index 296b8933..6c9fd67c 100644
--- a/packages/opub-viz/styles/tokens/tokens.json
+++ b/packages/opub-viz/styles/tokens/tokens.json
@@ -4,520 +4,520 @@
       "name": "Colors",
       "modes": [
         {
-          "name": "Mode 1",
+          "name": "Light",
           "variables": [
             {
-              "name": "lightmode/indigo/solid/1",
+              "name": "base/indigo/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FDFDFE"
             },
             {
-              "name": "lightmode/indigo/solid/2",
+              "name": "base/indigo/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F8FAFF"
             },
             {
-              "name": "lightmode/indigo/solid/3",
+              "name": "base/indigo/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#F0F4FF"
             },
             {
-              "name": "lightmode/indigo/solid/4",
+              "name": "base/indigo/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#E6EDFE"
             },
             {
-              "name": "lightmode/indigo/solid/5",
+              "name": "base/indigo/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#D9E2FC"
             },
             {
-              "name": "lightmode/indigo/solid/6",
+              "name": "base/indigo/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#C6D4F9"
             },
             {
-              "name": "lightmode/indigo/solid/7",
+              "name": "base/indigo/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#AEC0F5"
             },
             {
-              "name": "lightmode/indigo/solid/8",
+              "name": "base/indigo/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#8DA4EF"
             },
             {
-              "name": "lightmode/indigo/solid/9",
+              "name": "base/indigo/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#3E63DD"
             },
             {
-              "name": "lightmode/indigo/solid/10",
+              "name": "base/indigo/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#3A5CCC"
             },
             {
-              "name": "lightmode/indigo/solid/11",
+              "name": "base/indigo/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#3451B2"
             },
             {
-              "name": "lightmode/indigo/solid/12",
+              "name": "base/indigo/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#101D46"
             },
             {
-              "name": "lightmode/blue/solid/1",
+              "name": "base/blue/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FBFDFF"
             },
             {
-              "name": "lightmode/blue/solid/2",
+              "name": "base/blue/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F5FAFF"
             },
             {
-              "name": "lightmode/blue/solid/3",
+              "name": "base/blue/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#EDF6FF"
             },
             {
-              "name": "lightmode/blue/solid/4",
+              "name": "base/blue/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#E1F0FF"
             },
             {
-              "name": "lightmode/blue/solid/5",
+              "name": "base/blue/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#CEE7FE"
             },
             {
-              "name": "lightmode/blue/solid/6",
+              "name": "base/blue/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#B7D9F8"
             },
             {
-              "name": "lightmode/blue/solid/7",
+              "name": "base/blue/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#96C7F2"
             },
             {
-              "name": "lightmode/blue/solid/8",
+              "name": "base/blue/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#5EB0EF"
             },
             {
-              "name": "lightmode/blue/solid/9",
+              "name": "base/blue/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#0091FF"
             },
             {
-              "name": "lightmode/blue/solid/10",
+              "name": "base/blue/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#0081F1"
             },
             {
-              "name": "lightmode/blue/solid/11",
+              "name": "base/blue/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#006ADC"
             },
             {
-              "name": "lightmode/blue/solid/12",
+              "name": "base/blue/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#00254D"
             },
             {
-              "name": "lightmode/violet/solid/1",
+              "name": "base/violet/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FDFCFE"
             },
             {
-              "name": "lightmode/violet/solid/2",
+              "name": "base/violet/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#FBFAFF"
             },
             {
-              "name": "lightmode/violet/solid/3",
+              "name": "base/violet/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#F5F2FF"
             },
             {
-              "name": "lightmode/violet/solid/4",
+              "name": "base/violet/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#EDE9FE"
             },
             {
-              "name": "lightmode/violet/solid/5",
+              "name": "base/violet/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#E4DEFC"
             },
             {
-              "name": "lightmode/violet/solid/6",
+              "name": "base/violet/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#D7CFF9"
             },
             {
-              "name": "lightmode/violet/solid/7",
+              "name": "base/violet/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#C4B8F3"
             },
             {
-              "name": "lightmode/violet/solid/8",
+              "name": "base/violet/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#AA99EC"
             },
             {
-              "name": "lightmode/violet/solid/9",
+              "name": "base/violet/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#6E56CF"
             },
             {
-              "name": "lightmode/violet/solid/10",
+              "name": "base/violet/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#644FC1"
             },
             {
-              "name": "lightmode/violet/solid/11",
+              "name": "base/violet/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#5746AF"
             },
             {
-              "name": "lightmode/violet/solid/12",
+              "name": "base/violet/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#20134B"
             },
             {
-              "name": "lightmode/gray/slate/solid/1",
+              "name": "base/gray/slate/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FBFCFD"
             },
             {
-              "name": "lightmode/gray/slate/solid/2",
+              "name": "base/gray/slate/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F8F9FA"
             },
             {
-              "name": "lightmode/gray/slate/solid/3",
+              "name": "base/gray/slate/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#F1F3F5"
             },
             {
-              "name": "lightmode/gray/slate/solid/4",
+              "name": "base/gray/slate/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#ECEEF0"
             },
             {
-              "name": "lightmode/gray/slate/solid/5",
+              "name": "base/gray/slate/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#E6E8EB"
             },
             {
-              "name": "lightmode/gray/slate/solid/6",
+              "name": "base/gray/slate/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#DFE3E6"
             },
             {
-              "name": "lightmode/gray/slate/solid/7",
+              "name": "base/gray/slate/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#D7DBDF"
             },
             {
-              "name": "lightmode/gray/slate/solid/8",
+              "name": "base/gray/slate/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#C1C8CD"
             },
             {
-              "name": "lightmode/gray/slate/solid/9",
+              "name": "base/gray/slate/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#889096"
             },
             {
-              "name": "lightmode/gray/slate/solid/10",
+              "name": "base/gray/slate/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#7E868C"
             },
             {
-              "name": "lightmode/gray/slate/solid/11",
+              "name": "base/gray/slate/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#687076"
             },
             {
-              "name": "lightmode/gray/slate/solid/12",
+              "name": "base/gray/slate/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#11181C"
             },
             {
-              "name": "lightmode/red/solid/1",
+              "name": "base/red/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FFFCFC"
             },
             {
-              "name": "lightmode/red/solid/2",
+              "name": "base/red/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#FFF8F8"
             },
             {
-              "name": "lightmode/red/solid/3",
+              "name": "base/red/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#FFEFEF"
             },
             {
-              "name": "lightmode/red/solid/4",
+              "name": "base/red/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#FFE5E5"
             },
             {
-              "name": "lightmode/red/solid/5",
+              "name": "base/red/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#FDD8D8"
             },
             {
-              "name": "lightmode/red/solid/6",
+              "name": "base/red/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#F9C6C6"
             },
             {
-              "name": "lightmode/red/solid/7",
+              "name": "base/red/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#F3AEAF"
             },
             {
-              "name": "lightmode/red/solid/8",
+              "name": "base/red/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#EB9091"
             },
             {
-              "name": "lightmode/red/solid/9",
+              "name": "base/red/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#E5484D"
             },
             {
-              "name": "lightmode/red/solid/10",
+              "name": "base/red/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#DC3D43"
             },
             {
-              "name": "lightmode/red/solid/11",
+              "name": "base/red/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#CD2B31"
             },
             {
-              "name": "lightmode/red/solid/12",
+              "name": "base/red/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#381316"
             },
             {
-              "name": "lightmode/green/solid/1",
+              "name": "base/green/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FBFEFC"
             },
             {
-              "name": "lightmode/green/solid/2",
+              "name": "base/green/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#F2FCF5"
             },
             {
-              "name": "lightmode/green/solid/3",
+              "name": "base/green/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#E9F9EE"
             },
             {
-              "name": "lightmode/green/solid/4",
+              "name": "base/green/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#DDF3E4"
             },
             {
-              "name": "lightmode/green/solid/5",
+              "name": "base/green/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#CCEBD7"
             },
             {
-              "name": "lightmode/green/solid/6",
+              "name": "base/green/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#B4DFC4"
             },
             {
-              "name": "lightmode/green/solid/7",
+              "name": "base/green/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#92CEAC"
             },
             {
-              "name": "lightmode/green/solid/8",
+              "name": "base/green/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#5BB98C"
             },
             {
-              "name": "lightmode/green/solid/9",
+              "name": "base/green/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#30A46C"
             },
             {
-              "name": "lightmode/green/solid/10",
+              "name": "base/green/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#299764"
             },
             {
-              "name": "lightmode/green/solid/11",
+              "name": "base/green/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#18794E"
             },
             {
-              "name": "lightmode/green/solid/12",
+              "name": "base/green/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#153226"
             },
             {
-              "name": "lightmode/amber/solid/1",
+              "name": "base/amber/solid/1",
               "type": "color",
               "isAlias": false,
               "value": "#FEFDFB"
             },
             {
-              "name": "lightmode/amber/solid/2",
+              "name": "base/amber/solid/2",
               "type": "color",
               "isAlias": false,
               "value": "#FFF9ED"
             },
             {
-              "name": "lightmode/amber/solid/3",
+              "name": "base/amber/solid/3",
               "type": "color",
               "isAlias": false,
               "value": "#FFF4D5"
             },
             {
-              "name": "lightmode/amber/solid/4",
+              "name": "base/amber/solid/4",
               "type": "color",
               "isAlias": false,
               "value": "#FFECBC"
             },
             {
-              "name": "lightmode/amber/solid/5",
+              "name": "base/amber/solid/5",
               "type": "color",
               "isAlias": false,
               "value": "#FFE3A2"
             },
             {
-              "name": "lightmode/amber/solid/6",
+              "name": "base/amber/solid/6",
               "type": "color",
               "isAlias": false,
               "value": "#FFD386"
             },
             {
-              "name": "lightmode/amber/solid/7",
+              "name": "base/amber/solid/7",
               "type": "color",
               "isAlias": false,
               "value": "#F3BA63"
             },
             {
-              "name": "lightmode/amber/solid/8",
+              "name": "base/amber/solid/8",
               "type": "color",
               "isAlias": false,
               "value": "#EE9D2B"
             },
             {
-              "name": "lightmode/amber/solid/9",
+              "name": "base/amber/solid/9",
               "type": "color",
               "isAlias": false,
               "value": "#FFB224"
             },
             {
-              "name": "lightmode/amber/solid/10",
+              "name": "base/amber/solid/10",
               "type": "color",
               "isAlias": false,
               "value": "#FFA01C"
             },
             {
-              "name": "lightmode/amber/solid/11",
+              "name": "base/amber/solid/11",
               "type": "color",
               "isAlias": false,
               "value": "#AD5700"
             },
             {
-              "name": "lightmode/amber/solid/12",
+              "name": "base/amber/solid/12",
               "type": "color",
               "isAlias": false,
               "value": "#4E2009"
             },
             {
-              "name": "lightmode/Pure/White",
+              "name": "base/Pure/White",
               "type": "color",
               "isAlias": false,
               "value": "#FFFFFF"
             },
             {
-              "name": "lightmode/Pure/Black",
+              "name": "base/Pure/Black",
               "type": "color",
               "isAlias": false,
               "value": "#000000"
@@ -528,7 +528,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/12"
+                "name": "base/gray/slate/solid/12"
+              }
+            },
+            {
+              "name": "Text/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
               }
             },
             {
@@ -543,7 +552,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -552,7 +561,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/11"
+                "name": "base/red/solid/11"
               }
             },
             {
@@ -561,7 +570,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/11"
+                "name": "base/amber/solid/11"
               }
             },
             {
@@ -570,7 +579,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/11"
+                "name": "base/green/solid/11"
               }
             },
             {
@@ -579,7 +588,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/11"
+                "name": "base/violet/solid/11"
               }
             },
             {
@@ -588,25 +597,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/11"
+                "name": "base/blue/solid/11"
               }
             },
             {
-              "name": "Text/OnBG/Disabled",
+              "name": "Text/OnBG/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/6"
+                "name": "base/gray/slate/solid/1"
               }
             },
             {
-              "name": "Text/OnBG/Default",
+              "name": "Text/OnBG/Disabled",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/Pure/White"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -615,7 +624,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/8"
+                "name": "base/gray/slate/solid/8"
               }
             },
             {
@@ -624,7 +633,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/7"
+                "name": "base/gray/slate/solid/7"
               }
             },
             {
@@ -633,7 +642,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/6"
+                "name": "base/gray/slate/solid/6"
               }
             },
             {
@@ -642,7 +651,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/8"
+                "name": "base/red/solid/8"
               }
             },
             {
@@ -651,7 +660,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/7"
+                "name": "base/red/solid/7"
               }
             },
             {
@@ -660,7 +669,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/6"
+                "name": "base/red/solid/6"
               }
             },
             {
@@ -669,7 +678,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/8"
+                "name": "base/green/solid/8"
               }
             },
             {
@@ -678,7 +687,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/7"
+                "name": "base/green/solid/7"
               }
             },
             {
@@ -687,7 +696,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/8"
+                "name": "base/amber/solid/8"
               }
             },
             {
@@ -696,7 +705,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/7"
+                "name": "base/amber/solid/7"
               }
             },
             {
@@ -705,7 +714,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/8"
+                "name": "base/violet/solid/8"
               }
             },
             {
@@ -714,7 +723,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/7"
+                "name": "base/violet/solid/7"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/9"
+              }
+            },
+            {
+              "name": "Border/Highlight/OnBG/Default",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/7"
               }
             },
             {
@@ -723,7 +750,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/8"
+                "name": "base/blue/solid/8"
               }
             },
             {
@@ -732,7 +759,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/7"
+                "name": "base/blue/solid/7"
               }
             },
             {
@@ -741,7 +768,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/11"
+                "name": "base/gray/slate/solid/11"
               }
             },
             {
@@ -750,7 +777,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/10"
+                "name": "base/gray/slate/solid/10"
               }
             },
             {
@@ -759,7 +786,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -768,25 +795,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/10"
+                "name": "base/red/solid/10"
               }
             },
             {
-              "name": "Icon/Warning",
+              "name": "Action/Primary/Basic/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/amber/solid/10"
+                "name": "base/violet/solid/9"
               }
             },
             {
-              "name": "Action/Primary/Basic/Default",
+              "name": "Icon/Warning",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/9"
+                "name": "base/amber/solid/10"
               }
             },
             {
@@ -795,7 +822,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/10"
+                "name": "base/violet/solid/10"
               }
             },
             {
@@ -804,7 +831,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/10"
+                "name": "base/green/solid/10"
               }
             },
             {
@@ -813,7 +840,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/11"
+                "name": "base/violet/solid/11"
               }
             },
             {
@@ -822,7 +849,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/10"
+                "name": "base/violet/solid/10"
+              }
+            },
+            {
+              "name": "Icon/Interactive",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/solid/11"
               }
             },
             {
@@ -831,16 +867,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/12"
+                "name": "base/violet/solid/12"
               }
             },
             {
-              "name": "Icon/Interactive",
+              "name": "Icon/OnBG/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/11"
+                "name": "base/gray/slate/solid/1"
               }
             },
             {
@@ -849,7 +885,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
+              }
+            },
+            {
+              "name": "Icon/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/4"
               }
             },
             {
@@ -858,16 +903,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/9"
+                "name": "base/red/solid/9"
               }
             },
             {
-              "name": "Action/Primary/Critical/Hovered",
+              "name": "Icon/OnBG/Disabled",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/10"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -876,7 +921,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/9"
+                "name": "base/green/solid/9"
+              }
+            },
+            {
+              "name": "Action/Primary/Critical/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/solid/10"
               }
             },
             {
@@ -885,7 +939,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/5"
+                "name": "base/red/solid/5"
               }
             },
             {
@@ -894,7 +948,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/4"
+                "name": "base/red/solid/4"
               }
             },
             {
@@ -903,7 +957,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/6"
+                "name": "base/red/solid/6"
               }
             },
             {
@@ -912,7 +966,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/9"
+                "name": "base/blue/solid/9"
               }
             },
             {
@@ -921,7 +975,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/3"
+                "name": "base/red/solid/3"
               }
             },
             {
@@ -930,7 +984,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/10"
+                "name": "base/blue/solid/10"
               }
             },
             {
@@ -939,7 +993,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/11"
+                "name": "base/blue/solid/11"
               }
             },
             {
@@ -948,25 +1002,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/12"
+                "name": "base/blue/solid/12"
               }
             },
             {
-              "name": "Action/Secondary/Basic/Default",
+              "name": "Action/Primary/Critical/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/3"
+                "name": "base/red/solid/11"
               }
             },
             {
-              "name": "Action/Primary/Critical/Pressed",
+              "name": "Action/Secondary/Basic/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/11"
+                "name": "base/violet/solid/3"
               }
             },
             {
@@ -975,16 +1029,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/10"
+                "name": "base/green/solid/10"
               }
             },
             {
-              "name": "Action/Primary/Critical/Depressed",
+              "name": "Action/Primary/Success/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/12"
+                "name": "base/green/solid/11"
               }
             },
             {
@@ -993,25 +1047,25 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/3"
+                "name": "base/gray/slate/solid/3"
               }
             },
             {
-              "name": "Action/Primary/Success/Pressed",
+              "name": "Action/Primary/Critical/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/11"
+                "name": "base/red/solid/12"
               }
             },
             {
-              "name": "Action/Secondary/Interactive/Hovered",
+              "name": "Action/Secondary/Interactive/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/4"
+                "name": "base/blue/solid/5"
               }
             },
             {
@@ -1020,52 +1074,61 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/5"
+                "name": "base/green/solid/5"
               }
             },
             {
-              "name": "Action/Secondary/Success/Hovered",
+              "name": "Action/Primary/Success/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/4"
+                "name": "base/green/solid/12"
               }
             },
             {
-              "name": "Action/Secondary/Interactive/Depressed",
+              "name": "Action/Secondary/Interactive/Hovered",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/6"
+                "name": "base/blue/solid/4"
               }
             },
             {
-              "name": "Action/Primary/Success/Depressed",
+              "name": "Action/Secondary/Success/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/12"
+                "name": "base/green/solid/6"
               }
             },
             {
-              "name": "Action/Secondary/Interactive/Pressed",
+              "name": "Action/Secondary/Neutral/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/5"
+                "name": "base/gray/slate/solid/1"
               }
             },
             {
-              "name": "Action/Secondary/Success/Depressed",
+              "name": "Action/Secondary/Success/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/4"
+              }
+            },
+            {
+              "name": "Action/Secondary/Interactive/Depressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/6"
+                "name": "base/blue/solid/6"
               }
             },
             {
@@ -1074,7 +1137,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/3"
+                "name": "base/green/solid/3"
+              }
+            },
+            {
+              "name": "Action/Secondary/Neutral/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/2"
               }
             },
             {
@@ -1083,7 +1155,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/3"
+                "name": "base/blue/solid/3"
+              }
+            },
+            {
+              "name": "Action/Secondary/Basic/Hovered",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/solid/4"
               }
             },
             {
@@ -1092,16 +1173,16 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/5"
+                "name": "base/violet/solid/5"
               }
             },
             {
-              "name": "Action/Secondary/Basic/Hovered",
+              "name": "Action/Secondary/Neutral/Pressed",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/4"
+                "name": "base/gray/slate/solid/5"
               }
             },
             {
@@ -1110,88 +1191,151 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/6"
+                "name": "base/violet/solid/6"
               }
             },
             {
-              "name": "lightmode/indigo/alpha/1",
+              "name": "Action/Secondary/Neutral/Depressed",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/6"
+              }
+            },
+            {
+              "name": "Action/Tertiary/Basic/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/violet/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#05058203"
             },
             {
-              "name": "lightmode/indigo/alpha/2",
+              "name": "Action/Tertiary/Interactive/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/blue/alpha/2"
+              }
+            },
+            {
+              "name": "Action/Tertiary/Success/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#054CFF08"
             },
             {
-              "name": "lightmode/indigo/alpha/3",
+              "name": "Action/Tertiary/Critical/Hover",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/red/alpha/2"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#0144FF0F"
             },
             {
-              "name": "lightmode/indigo/alpha/4",
+              "name": "base/indigo/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#0247F51A"
             },
             {
-              "name": "lightmode/indigo/alpha/5",
+              "name": "base/indigo/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#023CEB26"
             },
             {
-              "name": "lightmode/indigo/alpha/6",
+              "name": "Background/Alpha/Dark",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/12"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#013DE438"
             },
             {
-              "name": "lightmode/indigo/alpha/7",
+              "name": "Background/Alpha/Medium",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/indigo/alpha/4"
+              }
+            },
+            {
+              "name": "base/indigo/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#0038E052"
             },
             {
-              "name": "lightmode/indigo/alpha/8",
+              "name": "base/indigo/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#0134DB73"
             },
             {
-              "name": "lightmode/indigo/alpha/9",
+              "name": "base/indigo/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#0031D2C2"
             },
             {
-              "name": "Background/Subdued",
+              "name": "Background/Solid/Subdued",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/2"
+                "name": "base/indigo/solid/2"
               }
             },
             {
-              "name": "Background/Dark",
+              "name": "Background/Solid/Dark",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/12"
+                "name": "base/indigo/solid/12"
               }
             },
             {
-              "name": "Background/Default",
+              "name": "Background/Solid/Default",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/indigo/solid/3"
+                "name": "base/indigo/solid/3"
               }
             },
             {
@@ -1200,7 +1344,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/Pure/White"
+                "name": "base/Pure/White"
               }
             },
             {
@@ -1209,77 +1353,77 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/2"
+                "name": "base/gray/slate/solid/2"
               }
             },
             {
-              "name": "lightmode/indigo/alpha/10",
+              "name": "base/indigo/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#002CBDC4"
             },
-            {
-              "name": "lightmode/indigo/alpha/11",
-              "type": "color",
-              "isAlias": false,
-              "value": "#00259ECC"
-            },
             {
               "name": "Surface/Selected",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/2"
+                "name": "base/blue/solid/2"
               }
             },
             {
-              "name": "Surface/Warning",
+              "name": "base/indigo/alpha/11",
               "type": "color",
-              "isAlias": true,
-              "value": {
-                "collection": "Colors",
-                "name": "lightmode/amber/solid/2"
-              }
+              "isAlias": false,
+              "value": "#00259ECC"
             },
             {
-              "name": "lightmode/indigo/alpha/12",
+              "name": "base/indigo/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#000E3AF0"
             },
             {
-              "name": "Surface/Critical",
+              "name": "Surface/Warning",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/red/solid/2"
+                "name": "base/amber/solid/2"
               }
             },
             {
-              "name": "lightmode/blue/alpha/1",
+              "name": "base/blue/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#0582FF05"
             },
             {
-              "name": "Surface/Success",
+              "name": "Surface/Critical",
               "type": "color",
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/green/solid/2"
+                "name": "base/red/solid/2"
               }
             },
             {
-              "name": "lightmode/blue/alpha/2",
+              "name": "base/blue/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#0582FF0A"
             },
             {
-              "name": "lightmode/blue/alpha/3",
+              "name": "Surface/Success",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/green/solid/2"
+              }
+            },
+            {
+              "name": "base/blue/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#0280FF12"
@@ -1290,11 +1434,11 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/2"
+                "name": "base/violet/solid/2"
               }
             },
             {
-              "name": "lightmode/blue/alpha/4",
+              "name": "base/blue/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#0180FF1F"
@@ -1305,11 +1449,11 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/blue/solid/2"
+                "name": "base/blue/solid/2"
               }
             },
             {
-              "name": "lightmode/blue/alpha/5",
+              "name": "base/blue/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#0180EF30"
@@ -1320,11 +1464,11 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/4"
+                "name": "base/violet/solid/4"
               }
             },
             {
-              "name": "lightmode/blue/alpha/6",
+              "name": "base/blue/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#0177E647"
@@ -1335,401 +1479,401 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/violet/solid/6"
+                "name": "base/violet/solid/6"
               }
             },
             {
-              "name": "lightmode/blue/alpha/7",
+              "name": "base/blue/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#0077DF69"
             },
             {
-              "name": "lightmode/blue/alpha/8",
+              "name": "base/blue/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#0082E6A1"
             },
             {
-              "name": "lightmode/blue/alpha/9",
+              "name": "base/blue/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#0091FFFA"
             },
             {
-              "name": "lightmode/blue/alpha/10",
+              "name": "base/blue/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#0080F1FA"
             },
             {
-              "name": "lightmode/blue/alpha/11",
+              "name": "base/blue/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#0066DBFA"
             },
             {
-              "name": "lightmode/blue/alpha/12",
+              "name": "base/blue/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#002149FA"
             },
             {
-              "name": "lightmode/violet/alpha/1",
+              "name": "base/violet/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#5805AB03"
             },
             {
-              "name": "lightmode/violet/alpha/2",
+              "name": "base/violet/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#3705FF05"
             },
             {
-              "name": "lightmode/violet/alpha/3",
+              "name": "base/violet/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#3C00FF0D"
             },
             {
-              "name": "lightmode/violet/alpha/4",
+              "name": "base/violet/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#2E02F417"
             },
             {
-              "name": "lightmode/violet/alpha/5",
+              "name": "base/violet/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#2F01E821"
             },
             {
-              "name": "lightmode/violet/alpha/6",
+              "name": "base/violet/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#2A01DF30"
             },
             {
-              "name": "lightmode/violet/alpha/7",
+              "name": "base/violet/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#2B01D447"
             },
             {
-              "name": "lightmode/violet/alpha/8",
+              "name": "base/violet/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#2A00D066"
             },
             {
-              "name": "lightmode/violet/alpha/9",
+              "name": "base/violet/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#2500B6A8"
             },
             {
-              "name": "lightmode/violet/alpha/10",
+              "name": "base/violet/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#1F00A5B0"
             },
             {
-              "name": "lightmode/violet/alpha/11",
+              "name": "base/violet/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#180091BA"
             },
             {
-              "name": "lightmode/violet/alpha/12",
+              "name": "base/violet/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#0E003DED"
             },
             {
-              "name": "lightmode/gray/slate/alpha/1",
+              "name": "base/gray/slate/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#05448205"
             },
             {
-              "name": "lightmode/gray/slate/alpha/2",
+              "name": "base/gray/slate/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#05294D08"
             },
             {
-              "name": "lightmode/gray/slate/alpha/3",
+              "name": "base/gray/slate/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#0025490D"
             },
             {
-              "name": "lightmode/gray/slate/alpha/4",
+              "name": "base/gray/slate/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#021C3714"
             },
             {
-              "name": "lightmode/gray/slate/alpha/5",
+              "name": "base/gray/slate/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#0217351A"
             },
             {
-              "name": "lightmode/gray/slate/alpha/6",
+              "name": "base/gray/slate/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#01213921"
             },
             {
-              "name": "lightmode/gray/slate/alpha/7",
+              "name": "base/gray/slate/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#001A3329"
             },
             {
-              "name": "lightmode/gray/slate/alpha/8",
+              "name": "base/gray/slate/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#011E323D"
             },
             {
-              "name": "lightmode/gray/slate/alpha/9",
+              "name": "base/gray/slate/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#00111E78"
             },
             {
-              "name": "lightmode/gray/slate/alpha/10",
+              "name": "base/gray/slate/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#00101B82"
             },
             {
-              "name": "lightmode/gray/slate/alpha/11",
+              "name": "base/gray/slate/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#000E1896"
             },
             {
-              "name": "lightmode/gray/slate/alpha/12",
+              "name": "base/gray/slate/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#00080CED"
             },
             {
-              "name": "lightmode/green/alpha/1",
+              "name": "base/green/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#05C04305"
             },
             {
-              "name": "lightmode/green/alpha/2",
+              "name": "base/green/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#00C43B0D"
             },
             {
-              "name": "lightmode/green/alpha/3",
+              "name": "base/green/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#02BA3C17"
             },
             {
-              "name": "lightmode/green/alpha/4",
+              "name": "base/green/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#01A63521"
             },
             {
-              "name": "lightmode/green/alpha/5",
+              "name": "base/green/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#009B3633"
             },
             {
-              "name": "lightmode/green/alpha/6",
+              "name": "base/green/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#0193364A"
             },
             {
-              "name": "lightmode/green/alpha/7",
+              "name": "base/green/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#008C3D6E"
             },
             {
-              "name": "lightmode/green/alpha/8",
+              "name": "base/green/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#00934CA3"
             },
             {
-              "name": "lightmode/green/alpha/9",
+              "name": "base/green/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#008F4ACF"
             },
             {
-              "name": "lightmode/green/alpha/10",
+              "name": "base/green/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#008346D6"
             },
             {
-              "name": "lightmode/green/alpha/11",
+              "name": "base/green/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#006B3BE8"
             },
             {
-              "name": "lightmode/green/alpha/12",
+              "name": "base/green/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#002012EB"
             },
             {
-              "name": "lightmode/amber/alpha/1",
+              "name": "base/amber/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#C0820505"
             },
             {
-              "name": "lightmode/amber/alpha/2",
+              "name": "base/amber/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#FFAB0212"
             },
             {
-              "name": "lightmode/amber/alpha/3",
+              "name": "base/amber/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#FFBB012B"
             },
             {
-              "name": "lightmode/amber/alpha/4",
+              "name": "base/amber/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#FFB70042"
             },
             {
-              "name": "lightmode/amber/alpha/5",
+              "name": "base/amber/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#FFB3005E"
             },
             {
-              "name": "lightmode/amber/alpha/6",
+              "name": "base/amber/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#FFA20178"
             },
             {
-              "name": "lightmode/amber/alpha/7",
+              "name": "base/amber/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#EC8D009C"
             },
             {
-              "name": "lightmode/amber/alpha/8",
+              "name": "base/amber/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#EA8900D4"
             },
             {
-              "name": "lightmode/amber/alpha/9",
+              "name": "base/amber/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#FFA600DB"
             },
             {
-              "name": "lightmode/amber/alpha/10",
+              "name": "base/amber/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#FF9500E3"
             },
             {
-              "name": "lightmode/amber/alpha/11",
+              "name": "base/amber/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#AB5300FA"
             },
             {
-              "name": "lightmode/amber/alpha/12",
+              "name": "base/amber/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#481800F5"
             },
             {
-              "name": "lightmode/red/alpha/1",
+              "name": "base/red/alpha/1",
               "type": "color",
               "isAlias": false,
               "value": "#FF050503"
             },
             {
-              "name": "lightmode/red/alpha/2",
+              "name": "base/red/alpha/2",
               "type": "color",
               "isAlias": false,
               "value": "#FF050508"
             },
             {
-              "name": "lightmode/red/alpha/3",
+              "name": "base/red/alpha/3",
               "type": "color",
               "isAlias": false,
               "value": "#FF01010F"
             },
             {
-              "name": "lightmode/red/alpha/4",
+              "name": "base/red/alpha/4",
               "type": "color",
               "isAlias": false,
               "value": "#FF00001A"
             },
             {
-              "name": "lightmode/red/alpha/5",
+              "name": "base/red/alpha/5",
               "type": "color",
               "isAlias": false,
               "value": "#F2000026"
             },
             {
-              "name": "lightmode/red/alpha/6",
+              "name": "base/red/alpha/6",
               "type": "color",
               "isAlias": false,
               "value": "#E4010138"
             },
             {
-              "name": "lightmode/red/alpha/7",
+              "name": "base/red/alpha/7",
               "type": "color",
               "isAlias": false,
               "value": "#D9000452"
             },
             {
-              "name": "lightmode/red/alpha/8",
+              "name": "base/red/alpha/8",
               "type": "color",
               "isAlias": false,
               "value": "#D1000470"
             },
             {
-              "name": "lightmode/red/alpha/9",
+              "name": "base/red/alpha/9",
               "type": "color",
               "isAlias": false,
               "value": "#DB0007B8"
             },
             {
-              "name": "lightmode/red/alpha/10",
+              "name": "base/red/alpha/10",
               "type": "color",
               "isAlias": false,
               "value": "#D10007C2"
             },
             {
-              "name": "lightmode/red/alpha/11",
+              "name": "base/red/alpha/11",
               "type": "color",
               "isAlias": false,
               "value": "#C30007D4"
             },
             {
-              "name": "lightmode/red/alpha/12",
+              "name": "base/red/alpha/12",
               "type": "color",
               "isAlias": false,
               "value": "#280003ED"
@@ -1776,7 +1920,7 @@
               "isAlias": true,
               "value": {
                 "collection": "Colors",
-                "name": "lightmode/gray/slate/solid/9"
+                "name": "base/gray/slate/solid/9"
               }
             },
             {
@@ -1784,6 +1928,21 @@
               "type": "color",
               "isAlias": false,
               "value": "#FFFFFF03"
+            },
+            {
+              "name": "Transparent",
+              "type": "color",
+              "isAlias": false,
+              "value": "#FFFFFF00"
+            },
+            {
+              "name": "Border/OnBG/Subdued",
+              "type": "color",
+              "isAlias": true,
+              "value": {
+                "collection": "Colors",
+                "name": "base/gray/slate/solid/11"
+              }
             }
           ]
         }
@@ -2367,6 +2526,198 @@
                 "textCase": "ORIGINAL",
                 "textDecoration": "UNDERLINE"
               }
+            },
+            {
+              "name": "Mobile Heading/4xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 32,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 40,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/3xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 24,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 28,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/2xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/xl-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 20,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Lg-Regular",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Regular",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Md-Semibold",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 16,
+                "fontFamily": "Inter",
+                "fontWeight": "Semi Bold",
+                "lineHeight": 24,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Sm-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Sm Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 14,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 20,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Xs-Medium",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 0,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "ORIGINAL",
+                "textDecoration": "NONE"
+              }
+            },
+            {
+              "name": "Mobile Heading/Xs Caps",
+              "type": "typography",
+              "isAlias": false,
+              "value": {
+                "fontSize": 12,
+                "fontFamily": "Inter",
+                "fontWeight": "Medium",
+                "lineHeight": 16,
+                "lineHeightUnit": "PIXELS",
+                "letterSpacing": 2,
+                "letterSpacingUnit": "PIXELS",
+                "textCase": "UPPER",
+                "textDecoration": "NONE"
+              }
             }
           ]
         }