diff --git a/packages/blade/src/components/Accordion/Accordion.stories.tsx b/packages/blade/src/components/Accordion/Accordion.stories.tsx
index c83df59a0f0..17f7fb6cbe9 100644
--- a/packages/blade/src/components/Accordion/Accordion.stories.tsx
+++ b/packages/blade/src/components/Accordion/Accordion.stories.tsx
@@ -20,7 +20,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Accordion"
       componentDescription="An accordion is used to allow users to toggle between different content sections in a compact vertical stack."
-      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73183-42793&mode=design&t=JkDSnlo8KJOBJimR-4"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
diff --git a/packages/blade/src/components/ActionList/ActionList.stories.tsx b/packages/blade/src/components/ActionList/ActionList.stories.tsx
index f6c0ddf7097..a8f8e76fb43 100644
--- a/packages/blade/src/components/ActionList/ActionList.stories.tsx
+++ b/packages/blade/src/components/ActionList/ActionList.stories.tsx
@@ -30,6 +30,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="ActionList"
       componentDescription="ActionList contains list of ActionList Items with or without in sections to perform particular actions."
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=76148-71527&mode=design&t=JkDSnlo8KJOBJimR-0"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
diff --git a/packages/blade/src/components/Alert/Alert.stories.tsx b/packages/blade/src/components/Alert/Alert.stories.tsx
index 8a2ec1690ea..e4c9086cf26 100644
--- a/packages/blade/src/components/Alert/Alert.stories.tsx
+++ b/packages/blade/src/components/Alert/Alert.stories.tsx
@@ -13,7 +13,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Alert"
       componentDescription="Alerts are messages that communicate information to users about any significant changes or explanations inside the system in a prominent way."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=6922%3A17789"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73820-506596&mode=design&t=JkDSnlo8KJOBJimR-4"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx
index e74dae5a3e2..1e4a1aa1c39 100644
--- a/packages/blade/src/components/Amount/Amount.stories.tsx
+++ b/packages/blade/src/components/Amount/Amount.stories.tsx
@@ -15,10 +15,10 @@ import { objectKeysWithType } from '~utils/objectKeysWithType';
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28012%3A580578&t=WfWp7qiwZ3lvvbdw-0"
       componentName="Amount"
       componentDescription="Amounts are used to show small amount of color coded metadata, which are ideal for getting user attention."
       note="This component only displays the provided value in the specified currency, it does not perform any currency conversion."
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73328-558626&mode=design&t=JkDSnlo8KJOBJimR-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Badge/Badge.stories.tsx b/packages/blade/src/components/Badge/Badge.stories.tsx
index 82308f19061..9551fc4813f 100644
--- a/packages/blade/src/components/Badge/Badge.stories.tsx
+++ b/packages/blade/src/components/Badge/Badge.stories.tsx
@@ -13,9 +13,9 @@ import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgType
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8110%3A417"
       componentName="Badge"
       componentDescription="Badges are used to show small amount of color coded metadata, which are ideal for getting user attention."
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73237-214550&mode=design&t=JkDSnlo8KJOBJimR-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx b/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx
index ed5b3cc4308..cc311ccc9b3 100644
--- a/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx
+++ b/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx
@@ -15,10 +15,7 @@ const HeaderContainer = ({ children }: { children: BoxProps['children'] }): Reac
 
 export const BaseHeaderKitchenSink = (): React.ReactElement => {
   return (
-    <Box
-      backgroundColor="surface.background.level2.lowContrast"
-      maxWidth={{ base: '100%', m: '500px' }}
-    >
+    <Box backgroundColor="surface.background.gray.intense" maxWidth={{ base: '100%', m: '500px' }}>
       <HeaderContainer>
         <BaseHeader
           title="Simple BaseHeader"
@@ -29,10 +26,10 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
       </HeaderContainer>
       <HeaderContainer>
         <BaseHeader
-          leading={<StarIcon color="surface.text.normal.lowContrast" size="large" />}
+          leading={<StarIcon color="surface.icon.gray.normal" size="large" />}
           title="When The Title is So Large That It Goes On Next Line"
           subtitle="Header Subtitle"
-          titleSuffix={<Badge variant="positive">New</Badge>}
+          titleSuffix={<Badge color="positive">New</Badge>}
           trailing={<Amount value={1000} />}
           showCloseButton={false}
           showBackButton={false}
@@ -49,10 +46,10 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
       </HeaderContainer>
       <HeaderContainer>
         <BaseHeader
-          leading={<StarIcon color="surface.text.normal.lowContrast" size="large" />}
+          leading={<StarIcon color="surface.icon.gray.normal" size="large" />}
           title="When The Title is So Large That It Goes On Next Line"
           subtitle="When The Subtitle of this BaseHeader is So Largeeeee That It Goes On Next Line"
-          titleSuffix={<Badge variant="positive">New</Badge>}
+          titleSuffix={<Badge color="positive">New</Badge>}
           trailing={<Amount value={1000} />}
           showCloseButton={true}
           showBackButton={true}
@@ -72,7 +69,7 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
           }
           title="When The Title is So Large That It Goes On Next Line"
           subtitle="When The Subtitle of this BaseHeader is So Largeeeee That It Goes On Next Line"
-          titleSuffix={<Badge variant="positive">New</Badge>}
+          titleSuffix={<Badge color="positive">New</Badge>}
           trailing={<Amount value={1000} />}
           showCloseButton={true}
           showBackButton={true}
@@ -84,10 +81,7 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
 
 export const BaseFooterSink = (): React.ReactElement => {
   return (
-    <Box
-      backgroundColor="surface.background.level2.lowContrast"
-      maxWidth={{ base: '100%', m: '500px' }}
-    >
+    <Box backgroundColor="surface.background.gray.intense" maxWidth={{ base: '100%', m: '500px' }}>
       <BaseFooter>
         <Button isFullWidth>Submit</Button>
       </BaseFooter>
diff --git a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
index 5d115ee5fa2..1a366420730 100644
--- a/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
+++ b/packages/blade/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -67,7 +67,7 @@ const Page = (): React.ReactElement => {
         BottomSheetHeaderProps
       } from '@razorpay/blade/components';
       `}
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=26477-578228&t=agFItKEmWAzA4N13-0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=25045-554566&mode=design&t=JkDSnlo8KJOBJimR-4"
     >
       <Heading size="large">Usage</Heading>
       <Sandbox showConsole editorHeight={600}>
diff --git a/packages/blade/src/components/Button/Button/Button.stories.tsx b/packages/blade/src/components/Button/Button/Button.stories.tsx
index 836f3bd70be..5fd56cd2cb1 100644
--- a/packages/blade/src/components/Button/Button/Button.stories.tsx
+++ b/packages/blade/src/components/Button/Button/Button.stories.tsx
@@ -25,7 +25,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="This is the Button component which can be used for various CTAs. It is available in 3 different variants."
       componentName="Button"
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=5200%3A0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=58628-55173&mode=design&t=JkDSnlo8KJOBJimR-4"
     >
       <Title>Usage</Title>
       <Sandbox showConsole>
diff --git a/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx b/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx
index 1a04b451b8e..eb8962e3a9e 100644
--- a/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx
+++ b/packages/blade/src/components/Button/IconButton/IconButton.stories.tsx
@@ -15,7 +15,7 @@ const Page = (): ReactElement => {
       componentName="IconButton"
       componentDescription="Useful for making clickable icons. For example - close button for modals, inputs, etc."
       apiDecisionLink={null}
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=12702%3A149930&t=IyyhF89aEgTcRBzk-4"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71108-309592&mode=design&t=JkDSnlo8KJOBJimR-4"
     >
       <Title>Usage</Title>
       <Sandbox showConsole>
diff --git a/packages/blade/src/components/Card/Card.stories.tsx b/packages/blade/src/components/Card/Card.stories.tsx
index cf414a3ac01..d0c8544abc9 100644
--- a/packages/blade/src/components/Card/Card.stories.tsx
+++ b/packages/blade/src/components/Card/Card.stories.tsx
@@ -39,7 +39,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Card"
       componentDescription="Cards are used to group similar concepts and tasks together to make easier for merchants to scan, read, and get things done. In simpler words Cards help seprates content into sections. They are the surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=21248%3A400833&t=ZCWT255jVK78xf1J-4"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=72099-253612&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
diff --git a/packages/blade/src/components/Carousel/Carousel.stories.tsx b/packages/blade/src/components/Carousel/Carousel.stories.tsx
index b1a44a85964..497b9565684 100644
--- a/packages/blade/src/components/Carousel/Carousel.stories.tsx
+++ b/packages/blade/src/components/Carousel/Carousel.stories.tsx
@@ -19,7 +19,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Carousel"
       componentDescription="Carousel is a UI component that allows the display and navigation of a set of content items, typically images or cards, within a limited space. It is often used to showcase multiple pieces of content in a visually appealing and interactive way."
-      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2115-975755&mode=design&t=5g2Lqj2ez02pxQfO-0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=53853-58706&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <AddonTitle>Usage</AddonTitle>
       <Sandbox editorHeight={500}>
diff --git a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
index 56cbca15bd0..99f4e9302ce 100644
--- a/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/blade/src/components/Checkbox/Checkbox.stories.tsx
@@ -16,7 +16,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Checkbox"
       componentDescription="Checkbox can be used in forms when a user needs to select multiple values from several options."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71951-34708&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox showConsole>
diff --git a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
index d1e7cc1378a..b83a16c3cba 100644
--- a/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxGroup.stories.tsx
@@ -16,7 +16,7 @@ const Page = (): React.ReactElement => {
       componentName="CheckboxGroup"
       componentDescription="CheckboxGroup can be used to group together multiple checkboxes in a forms which provides out of the box state management for the multi-checkboxes and other features."
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Checkbox/_decisions/decisions.md"
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=72092-40150&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox showConsole editorHeight={400}>
diff --git a/packages/blade/src/components/Chip/Chip.stories.tsx b/packages/blade/src/components/Chip/Chip.stories.tsx
index 2c05c063b49..869e4756d6d 100644
--- a/packages/blade/src/components/Chip/Chip.stories.tsx
+++ b/packages/blade/src/components/Chip/Chip.stories.tsx
@@ -27,7 +27,7 @@ const Page = (): React.ReactElement => {
           </Link>
         </Text>
       }
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=52377%3A23885&mode=design&t=y7gUIBIzzNMRd3w6-1"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71286-204634&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     />
   );
 };
diff --git a/packages/blade/src/components/Collapsible/Collapsible.stories.tsx b/packages/blade/src/components/Collapsible/Collapsible.stories.tsx
index 218cd480729..b513d5fdf19 100644
--- a/packages/blade/src/components/Collapsible/Collapsible.stories.tsx
+++ b/packages/blade/src/components/Collapsible/Collapsible.stories.tsx
@@ -19,7 +19,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Collapsible"
       componentDescription="Collapsible is used to allow users to toggle the visibility of hidden content within a container."
-      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=79-629874&t=sVxH3DOnx3L3F9rO-0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73237-255926&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
@@ -39,7 +39,7 @@ const Page = (): ReactElement => {
                     alignItems="baseline"
                   >
                     <Text>Actual amount</Text>
-                    <Amount value={1000} intent="positive" />
+                    <Amount value={1000} color="positive" />
                   </Box>
                   <Box
                     display="flex"
@@ -100,7 +100,7 @@ const CollapsibleButtonTemplate: StoryFn<typeof CollapsibleComponent> = ({ ...ar
             alignItems="baseline"
           >
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
           <Box
             display="flex"
@@ -141,7 +141,7 @@ const CollapsibleLinkTemplate: StoryFn<typeof CollapsibleComponent> = ({ ...args
             alignItems="baseline"
           >
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
           <Box
             display="flex"
@@ -213,7 +213,7 @@ const CollapsibleControlledTemplate: StoryFn<typeof CollapsibleComponent> = ({
             alignItems="baseline"
           >
             <Text>Actual amount</Text>
-            <Amount value={1000} intent="positive" />
+            <Amount value={1000} color="feedback.text.positive.intense" />
           </Box>
           <Box
             display="flex"
diff --git a/packages/blade/src/components/Counter/Counter.stories.tsx b/packages/blade/src/components/Counter/Counter.stories.tsx
index ab674bc0987..59e631df5e6 100644
--- a/packages/blade/src/components/Counter/Counter.stories.tsx
+++ b/packages/blade/src/components/Counter/Counter.stories.tsx
@@ -14,7 +14,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentName="Counter"
       componentDescription="Counters are visual indicators that contains numerical values, tallies or counts in regards to some context. It can be used to show non-interactive numerical data."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8222%3A70827"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71114-257323&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Divider/Divider.stories.tsx b/packages/blade/src/components/Divider/Divider.stories.tsx
index 330ab7285ed..39bfa41b6b2 100644
--- a/packages/blade/src/components/Divider/Divider.stories.tsx
+++ b/packages/blade/src/components/Divider/Divider.stories.tsx
@@ -15,10 +15,10 @@ import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgType
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=608-883166&mode=design&t=6uRroMDHC66zlvxT-0"
       componentName="Divider"
       componentDescription="Divider is a visual element that is used to separate or divide content within a layout"
       apiDecisionLink={null}
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71106-265680&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Heading size="large">Usage</Heading>
       <Sandbox>
diff --git a/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx b/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx
index 0b54d05346a..9937f586407 100644
--- a/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx
+++ b/packages/blade/src/components/Dropdown/docs/DropdownDocs.tsx
@@ -23,7 +23,7 @@ const DropdownDocs = (): React.ReactElement => {
       componentDescription="Dropdown component to help you create select menu or action menu. To create a menu, you would have to use this component + Trigger (SelectInput, AutoComplete, DropdownButton, DropdownLink) + ActionList"
       imports=""
       showStorybookControls={false}
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=38643-719971"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=22673-499058&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Box as="section">
         <Heading size="xlarge">Playground</Heading>
diff --git a/packages/blade/src/components/Indicator/Indicator.stories.tsx b/packages/blade/src/components/Indicator/Indicator.stories.tsx
index 4dcee875d9f..f8a1edde77e 100644
--- a/packages/blade/src/components/Indicator/Indicator.stories.tsx
+++ b/packages/blade/src/components/Indicator/Indicator.stories.tsx
@@ -16,7 +16,7 @@ const Page = (): ReactElement => {
       componentName="Indicator"
       componentDescription="Indicators describe the condition of an entity. They can be used to convey semantic meaning,
     such as statuses and semantical-categories."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=8224%3A1"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71114-258498&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox editorHeight={500}>
@@ -44,7 +44,7 @@ const meta: Meta<IndicatorProps> = {
   args: {
     accessibilityLabel: 'Status OK',
     children: 'Success',
-    intent: 'neutral',
+    color: 'neutral',
     size: 'medium',
   },
   tags: ['autodocs'],
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
index 1052a96f10d..d8cab310e0d 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/AutoComplete.stories.tsx
@@ -200,7 +200,7 @@ export default {
           componentDescription="The AutoComplete component is SelectInput-like component where you can type text and search through the list"
           componentName="AutoComplete"
           note="AutoComplete is meant to be used only inside the Dropdown component. Things will not work as expected if you are using this without Dropdown"
-          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13590-171090'"
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=13590-171090&mode=design&t=jyVG8aXFc1Dlw2Se-4"
         >
           <Title>Usage</Title>
           <Sandbox showConsole>
diff --git a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
index 80bd532831f..5c246f8f4c4 100644
--- a/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
+++ b/packages/blade/src/components/Input/OTPInput/OTPInput.stories.tsx
@@ -154,7 +154,7 @@ export default {
           componentName="OTPInput"
           apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/OTPInput/_decisions/_decisions.md"
           componentDescription="A one-time password (OTP), also known as a one-time PIN, one-time authorization code (OTAC) or dynamic password, is a password that is valid for only one login session or a transaction. These are a group of inputs and can be either 4 or 6 characters long."
-          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A191059'"
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=10953-191059&mode=design&t=jyVG8aXFc1Dlw2Se-4"
         >
           <Title>Usage</Title>
           <Sandbox showConsole>
diff --git a/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx b/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
index e7b8447a690..f3fe8f294cb 100644
--- a/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
+++ b/packages/blade/src/components/Input/PasswordInput/PasswordInput.stories.tsx
@@ -17,7 +17,7 @@ const Page = (): ReactElement => {
       componentName="PasswordInput"
       apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/PasswordInput/_decisions/decisions.md"
       componentDescription="PasswordInput is an input field for entering passwords. The input is masked by default. On mobile devices the last typed letter is shown for a brief moment. The masking can be toggled using an optional reveal button."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A110176"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=10953-180381&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx b/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
index dd7c29f9646..41a7facf72a 100644
--- a/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
+++ b/packages/blade/src/components/Input/TextArea/TextArea.stories.tsx
@@ -170,7 +170,7 @@ export default {
           componentDescription="The TextArea component lets you enter long form text which spans over multiple lines."
           componentName="TextArea"
           apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/TextArea/_decisions/decisions.md"
-          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=11115%3A166804'"
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=11115-166804&mode=design&t=jyVG8aXFc1Dlw2Se-4"
         >
           <Title>Usage</Title>
           <Sandbox>
diff --git a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
index 3f999f7a67c..da4500ebb08 100644
--- a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
+++ b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
@@ -223,7 +223,7 @@ export default {
           componentDescription="The TextInput component is a component that can be used to input name, email, telephone, url, search or plain text."
           componentName="TextInput"
           apiDecisionLink="https://github.com/razorpay/blade/blob/master/packages/blade/src/components/Input/TextInput/_decisions/_decisions.md"
-          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=10953%3A210737'"
+          figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=10953-210737&mode=design&t=jyVG8aXFc1Dlw2Se-4"
         >
           <Title>Usage</Title>
           <Sandbox>
diff --git a/packages/blade/src/components/Link/Link/Link.stories.tsx b/packages/blade/src/components/Link/Link/Link.stories.tsx
index 10380857e6e..4adef04f2c3 100644
--- a/packages/blade/src/components/Link/Link/Link.stories.tsx
+++ b/packages/blade/src/components/Link/Link/Link.stories.tsx
@@ -18,9 +18,9 @@ import {
 const Page = (): ReactElement => {
   return (
     <StoryPageWrapper
-      componentDescription="This is the Link component which can be used for showing external or internal Links to the user. The Link component can also be used as an inline button in certain cases with the `button` variant"
       componentName="Link"
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=12699%3A147155"
+      componentDescription="This is the Link component which can be used for showing external or internal Links to the user. The Link component can also be used as an inline button in certain cases with the `button` variant"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=59519-143186&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>
@@ -158,7 +158,7 @@ const LinkColorsTemplate: StoryFn<typeof LinkComponent> = ({ icon, children = ''
   return (
     <BaseBox display="flex" flexDirection="column" gap="spacing.2">
       <BaseBox padding="spacing.2">
-        <LinkComponent {...args} color="default">
+        <LinkComponent {...args} color="primary">
           {children}
         </LinkComponent>
       </BaseBox>
diff --git a/packages/blade/src/components/List/List.stories.tsx b/packages/blade/src/components/List/List.stories.tsx
index 55b611f1aca..6b86b68d566 100644
--- a/packages/blade/src/components/List/List.stories.tsx
+++ b/packages/blade/src/components/List/List.stories.tsx
@@ -23,7 +23,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="List displays a set of related items that are composed of text/links."
       componentName="List"
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=23205%3A446859&t=itEw2V8u5Q0PPGJq-4"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=23205-446933&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Modal/docs/ModalDocs.tsx b/packages/blade/src/components/Modal/docs/ModalDocs.tsx
index ada4cfc715c..cf9648556c2 100644
--- a/packages/blade/src/components/Modal/docs/ModalDocs.tsx
+++ b/packages/blade/src/components/Modal/docs/ModalDocs.tsx
@@ -16,7 +16,7 @@ const ModalDocs = (): React.ReactElement => {
       componentDescription="Modals are often used to present information, notifications, or requests that require immediate attention or confirmation from the user"
       imports=""
       showStorybookControls={false}
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=39809-559333&t=j3ZK6zZSwP5CJ8Al-0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=37433-1082684&mode=design&t=jyVG8aXFc1Dlw2Se-4"
     >
       <Box as="section">
         <Heading size="xlarge">Playground</Heading>
diff --git a/packages/blade/src/components/Popover/Popover.stories.tsx b/packages/blade/src/components/Popover/Popover.stories.tsx
index 999ba8b6523..3566dfc6fc9 100644
--- a/packages/blade/src/components/Popover/Popover.stories.tsx
+++ b/packages/blade/src/components/Popover/Popover.stories.tsx
@@ -33,7 +33,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Popover"
       componentDescription="The popover typically provides additional context about the element or its function. A popover is always triggered by a mouse hover on desktop and on tap on mobile."
-      figmaURL="https://www.figma.com/file/LSG77hEeVYDk7j7WV7OMJE/Blade-DSL---Components-Guideline?type=design&node-id=2875-40870&mode=design&t=UP0cRLPEhmoPYo3b-0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73282-456803&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
index f50ad36dbb5..8b07e0c3922 100644
--- a/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/packages/blade/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -14,7 +14,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="A Progress bar is generally a branded element that indicates progress of process or task"
       componentName="ProgressBar"
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=16430%3A256423&t=0raQL8ilgxTx5XYL-4"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=74922-198459&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Radio/Radio.stories.tsx b/packages/blade/src/components/Radio/Radio.stories.tsx
index 84cca2ac83e..feee8dee9fb 100644
--- a/packages/blade/src/components/Radio/Radio.stories.tsx
+++ b/packages/blade/src/components/Radio/Radio.stories.tsx
@@ -18,7 +18,7 @@ const Page = (): React.ReactElement => {
       componentDescription="Radio & RadioGroup can be used in forms when a user needs to single value from several options."
       componentName="Radio"
       imports={`import { Radio, RadioGroup } from '@razorpay/blade/components';\nimport type { RadioProps, RadioGroupProps } from '@razorpay/blade/components';`}
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13133%3A160709"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71971-26042&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox showConsole editorHeight={400}>
diff --git a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
index 9b88e731d59..de154c04947 100644
--- a/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
+++ b/packages/blade/src/components/Skeleton/Skeleton.stories.tsx
@@ -27,9 +27,9 @@ import { kebabCase } from '~utils/lodashButBetter/kebabCase';
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=16508%3A258522"
       componentName="Skeleton"
       componentDescription="Skeleton Loader is a static / animated placeholder for the information that is still loading. It mimic the structure and look of the entire view."
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73282-409843&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Heading size="large">Usage</Heading>{' '}
       <Sandbox>
diff --git a/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx b/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
index 37adce137af..199e549eeb7 100644
--- a/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
+++ b/packages/blade/src/components/Spinner/Spinner/Spinner.stories.tsx
@@ -15,7 +15,7 @@ const Page = (): ReactElement => {
     <StoryPageWrapper
       componentDescription="A spinner is an element with a looping animation that indicates loading is in process."
       componentName="Spinner"
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=14825%3A203592"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=74922-185038&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx
index a680f591b1e..1782ece7dd1 100644
--- a/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx
+++ b/packages/blade/src/components/SpotlightPopoverTour/docs/Tour.stories.tsx
@@ -29,7 +29,7 @@ const Page = (): React.ReactElement => {
       showDefaultExample={false}
       componentName="SpotlightPopoverTour"
       componentDescription="The SpotlightPopoverTour component is used to provide context as well as enable users to take certain actions on it. These are used to highlight a new feature or provide a guided tour to a new user."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=63871%3A13263&mode=dev"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=63871-13263&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>{BasicExample}</Sandbox>
diff --git a/packages/blade/src/components/Switch/Switch.stories.tsx b/packages/blade/src/components/Switch/Switch.stories.tsx
index 3bec689fc2f..1ab63f69bed 100644
--- a/packages/blade/src/components/Switch/Switch.stories.tsx
+++ b/packages/blade/src/components/Switch/Switch.stories.tsx
@@ -23,7 +23,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Switch"
       componentDescription="A switch component is used to quickly switch between two possible states. These are only used for binary actions that occur immediately after the user turn the switch on/off."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=13227%3A163026"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73282-409938&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Tabs/Tabs.stories.tsx b/packages/blade/src/components/Tabs/Tabs.stories.tsx
index cedb2ce6223..1cc1412b5ec 100644
--- a/packages/blade/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/blade/src/components/Tabs/Tabs.stories.tsx
@@ -21,7 +21,7 @@ import { Counter } from '~components/Counter';
 import { Box } from '~components/Box';
 import { Card, CardBody, CardHeader, CardHeaderLeading } from '~components/Card';
 import { Alert } from '~components/Alert';
-// import { Switch } from '~components/Switch';
+import { Switch } from '~components/Switch';
 import iconMap from '~components/Icons/iconMap';
 import { Badge } from '~components/Badge';
 import { Button } from '~components/Button';
@@ -39,7 +39,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Tabs"
       componentDescription="A tab is a navigation component used in the interface to switch between different views in the same context. Tabs are contextual to the section or the page and are triggered by user interaction."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=60965%3A367088&mode=dev"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73282-389156&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Heading size="large">Usage</Heading>
       <Sandbox editorHeight={500}>
@@ -246,25 +246,25 @@ const SubscriptionPanel = ({ isVertical }: { isVertical: boolean }) => {
         <Alert
           title="1 - Active Subscriptions"
           description="You have 1 active subscription. Active subscriptions are subscriptions that are currently being charged."
-          intent="positive"
+          color="positive"
           isDismissible={false}
         />
         <Alert
           title="2 - Halted Subscriptions"
           description="You have 2 halted subscriptions. Halted subscriptions are subscriptions that have been stopped by the customer or by you."
-          intent="notice"
+          color="notice"
           isDismissible={false}
         />
         <Alert
           title="1 - Failed Subscriptions"
           description="You have 1 failed subscription. Failed subscriptions are subscriptions that have failed to charge the customer."
-          intent="negative"
+          color="negative"
           isDismissible={false}
         />
         <Alert
           title="3 - Expired Subscriptions"
           description="You have 3 expired subscriptions. Expired subscriptions are subscriptions that have reached the end of their billing cycle."
-          intent="information"
+          color="information"
           isDismissible={false}
         />
       </Box>
@@ -291,10 +291,10 @@ const PlansPanel = ({ isVertical }: { isVertical: boolean }) => {
           <CardBody>
             <Box display="flex" flexDirection="row" gap="spacing.4">
               <Box display="flex" flexDirection="column" gap="spacing.2">
-                <Text weight="bold">Name</Text>
-                <Text weight="bold">Description</Text>
-                <Text weight="bold">Bill Amount</Text>
-                <Text weight="bold">Bill Frequency</Text>
+                <Text weight="semibold">Name</Text>
+                <Text weight="semibold">Description</Text>
+                <Text weight="semibold">Bill Amount</Text>
+                <Text weight="semibold">Bill Frequency</Text>
               </Box>
               <Box display="flex" flexDirection="column" gap="spacing.2">
                 <Text>Basic Plan</Text>
@@ -312,10 +312,10 @@ const PlansPanel = ({ isVertical }: { isVertical: boolean }) => {
           <CardBody>
             <Box display="flex" flexDirection="row" gap="spacing.4">
               <Box display="flex" flexDirection="column" gap="spacing.2">
-                <Text weight="bold">Name</Text>
-                <Text weight="bold">Description</Text>
-                <Text weight="bold">Bill Amount</Text>
-                <Text weight="bold">Bill Frequency</Text>
+                <Text weight="semibold">Name</Text>
+                <Text weight="semibold">Description</Text>
+                <Text weight="semibold">Bill Amount</Text>
+                <Text weight="semibold">Bill Frequency</Text>
               </Box>
               <Box display="flex" flexDirection="column" gap="spacing.2">
                 <Text>Premium Plan</Text>
@@ -351,10 +351,10 @@ const SettingsCard = ({
             alignItems="center"
           >
             <Box display="flex" flexDirection="row" gap="spacing.4" alignItems="center">
-              <Icon size="large" color="surface.text.subtle.lowContrast" />
+              <Icon size="large" color="surface.icon.gray.subtle" />
               <Heading>{title}</Heading>
             </Box>
-            {/* <Switch accessibilityLabel="Enable Card" /> */}
+            <Switch accessibilityLabel="Enable Card" />
           </Box>
           {children}
         </Box>
@@ -388,7 +388,7 @@ const SettingsPanel = ({ isVertical }: { isVertical: boolean }) => {
 
           <Alert
             isDismissible={false}
-            intent="information"
+            color="information"
             title="Payment limits"
             description="Accept payments upto ₹ 2,00,000 ₹ - Indian Rupee (INR) Payments above ₹ 15,000 ₹ - Indian Rupee (INR) will ask the customer for OTP verification as well."
           />
@@ -402,7 +402,7 @@ const SettingsPanel = ({ isVertical }: { isVertical: boolean }) => {
 
           <Alert
             isDismissible={false}
-            intent="information"
+            color="information"
             title="Payment limits"
             description="Accept payments upto ₹ 1,00,000 ₹ - Indian Rupee (INR) (For BFSI: ₹ 2,00,000 ₹ - Indian Rupee (INR)) Payments above ₹ 15,000 ₹ - Indian Rupee (INR) will ask the customer for UPI PIN verification as well."
           />
@@ -416,7 +416,7 @@ const SettingsPanel = ({ isVertical }: { isVertical: boolean }) => {
 
           <Alert
             isDismissible={false}
-            intent="information"
+            color="information"
             title="Payment limits"
             description="Accept payments upto: ₹ 1,00,00,000"
           />
@@ -487,7 +487,7 @@ const ControlledTabsTemplate: StoryFn<(props: StoryControlProps) => React.ReactE
     <Box height={isReactNative() ? '100%' : undefined}>
       <Box padding="spacing.3" marginBottom="spacing.5">
         <Text>Tab's state can be controlled by using the value & onChange prop.</Text>
-        <Text weight="bold" marginBottom="spacing.4">
+        <Text weight="semibold" marginBottom="spacing.4">
           Current Tab: {value}
         </Text>
         <Box display="flex" flexDirection="row" gap="spacing.4">
@@ -562,7 +562,7 @@ const TabsWithTooltipTemplate: StoryFn<(props: StoryControlProps) => React.React
         wrapping the <Code size="medium">TabItem</Code> with{' '}
         <Code size="medium">TooltipInteractiveWrapper</Code>.
       </Text>
-      <Text marginBottom="spacing.5" type="subdued">
+      <Text marginBottom="spacing.5" color="surface.text.gray.subtle">
         (Hover over the Settings tab to see it in action)
       </Text>
       <Card elevation="none" padding="spacing.0">
@@ -744,7 +744,7 @@ const ProductUseCase2Template: StoryFn<(props: StoryControlProps) => React.React
         the <Code size="medium">TabList</Code> with a <Code size="medium">Box</Code> and aligning
         buttons or links to the right side of the box with flex.
       </Text>
-      <Text type="subdued">
+      <Text color="surface.text.gray.muted">
         Note: In mobile devices the real estate is limited, thus the UI should be tweaked.
       </Text>
 
@@ -804,7 +804,7 @@ const AccountRoute = ({
     };
   };
 }) => (
-  <Text weight="bold" marginY="spacing.4">
+  <Text weight="semibold" marginY="spacing.4">
     Router param: {match.params.id}
   </Text>
 );
@@ -847,7 +847,7 @@ const ReactRouterExample = () => {
         </ListItem>
       </List>
 
-      <Text type="subdued">
+      <Text color="surface.text.gray.muted">
         Switch to the <Code size="medium">Actions</Code> addon panel in storybook to see how routes
         are changing, and also notice how we can detect which route is active by using the{' '}
         <Code size="medium">Route</Code>
diff --git a/packages/blade/src/components/Tag/Tag.stories.tsx b/packages/blade/src/components/Tag/Tag.stories.tsx
index a764fff8817..b542d2ae5d8 100644
--- a/packages/blade/src/components/Tag/Tag.stories.tsx
+++ b/packages/blade/src/components/Tag/Tag.stories.tsx
@@ -17,9 +17,9 @@ import { PlusIcon } from '~components/Icons';
 const Page = (): React.ReactElement => {
   return (
     <StoryPageWrapper
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?node-id=28435%3A581488"
       componentName="Tag"
       componentDescription="These are set of interactive keywords that help organise & categorise objects. Tags can be added or removed from an object by the users."
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=71188-528135&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>
diff --git a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
index d762eaf8fdc..c32d757adc4 100644
--- a/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/blade/src/components/Tooltip/Tooltip.stories.tsx
@@ -24,7 +24,7 @@ const Page = (): React.ReactElement => {
     <StoryPageWrapper
       componentName="Tooltip"
       componentDescription="The tooltip typically provides additional context about the element or its function. A tooltip is always triggered by a mouse hover on desktop and on tap on mobile."
-      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade---Payment-Light?type=design&node-id=40636-559188&t=vaK9ZJskCpoIS07l-0"
+      figmaURL="https://www.figma.com/file/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=73273-256355&mode=design&t=Qm80tBqhFBFB5BvZ-4"
     >
       <Title>Usage</Title>
       <Sandbox>