diff --git a/packages/blade/.storybook/react/main.ts b/packages/blade/.storybook/react/main.ts
index f5ac002fc5a..0943487b659 100644
--- a/packages/blade/.storybook/react/main.ts
+++ b/packages/blade/.storybook/react/main.ts
@@ -18,6 +18,7 @@ const config: StorybookConfig = {
   stories: [
     '../../docs/guides/*.stories.mdx',
     '../../src/components/Box/**/*.stories.@(ts|tsx|js|jsx)',
+    '../../src/components/Amount/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Badge/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Card/**/*.stories.@(ts|tsx|js|jsx)',
     '../../src/components/Icons/**/*.stories.@(ts|tsx|js|jsx)',
diff --git a/packages/blade/package.json b/packages/blade/package.json
index 6eb83cdcf4b..7b5715d4b54 100644
--- a/packages/blade/package.json
+++ b/packages/blade/package.json
@@ -250,7 +250,7 @@
     "postinstall-postinstall": "2.1.0",
     "react-refresh": "0.11.0",
     "react-docgen-typescript-plugin": "1.0.5",
-    "react-json-tree":"0.18.0",
+    "react-json-tree": "0.18.0",
     "metro-config": "0.66.2",
     "@babel/plugin-proposal-class-static-block": "7.21.0",
     "react-native-safe-area-context": "3.4.1",
diff --git a/packages/blade/rebranded-components.js b/packages/blade/rebranded-components.js
index f31a8bc5774..9323a34ba8f 100644
--- a/packages/blade/rebranded-components.js
+++ b/packages/blade/rebranded-components.js
@@ -1,4 +1,5 @@
 const rebrandedComponents = [
+  'Amount',
   'BaseBox',
   'BaseText',
   'BaseLink',
diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx
index 24ca2d74ab3..ddd4a80f7bf 100644
--- a/packages/blade/src/components/Amount/Amount.stories.tsx
+++ b/packages/blade/src/components/Amount/Amount.stories.tsx
@@ -2,12 +2,15 @@ import type { StoryFn, Meta } from '@storybook/react';
 import { Title } from '@storybook/addon-docs';
 import type { AmountProps } from './Amount';
 import { Amount as AmountComponent } from './Amount';
+import type { AmountHeadingProps, AmountDisplayProps, AmountBodyProps } from './amountTokens';
 import { currencyPrefixMapping } from './amountTokens';
 import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
 import BaseBox from '~components/Box/BaseBox';
 import { Sandbox } from '~utils/storybook/Sandbox';
-import { Text } from '~components/Typography';
+import { Display, Text } from '~components/Typography';
 import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
+import { Box } from '~components/Box';
+import { objectKeysWithType } from '~utils/objectKeysWithType';
 
 const Page = (): React.ReactElement => {
   return (
@@ -67,40 +70,47 @@ const AmountTemplateWithText: StoryFn<typeof AmountComponent> = (args) => {
 export const AmountWithText = AmountTemplateWithText.bind({});
 
 AmountWithText.args = {
-  value: 12500.45,
-  size: 'body-medium',
+  value: 1000.0,
+  type: 'body',
+  size: 'medium',
 };
 AmountWithText.storyName = 'With Text';
 
-const AmountSizesTemplate: StoryFn<typeof AmountComponent> = ({ ...args }) => {
-  const sizes: AmountProps['size'][] = [
-    'body-small',
-    'body-small-bold',
-    'body-medium',
-    'body-medium-bold',
-    'heading-small',
-    'heading-small-bold',
-    'heading-large',
-    'heading-large-bold',
-    'title-small',
-    'title-medium',
-  ];
+const AmountSizesTemplate: StoryFn<typeof AmountComponent> = (args) => {
+  const sizes: {
+    heading: AmountHeadingProps['size'][];
+    body: AmountBodyProps['size'][];
+    display: AmountDisplayProps['size'][];
+  } = {
+    body: ['xsmall', 'small', 'medium', 'large'],
+    heading: ['small', 'medium', 'large', 'xlarge', '2xlarge'],
+    display: ['small', 'medium', 'large', 'xlarge'],
+  };
+
   return (
-    <BaseBox justifyContent="center">
-      {sizes.map((size) => (
-        <BaseBox key={size} marginBottom="spacing.3">
-          <Text>{size}</Text>
-          <BaseBox marginBottom="spacing.1" />
-          <AmountComponent {...args} size={size} />
-        </BaseBox>
+    <Box justifyContent="center">
+      {objectKeysWithType(sizes).map((amountTypeProp) => (
+        <Box key={amountTypeProp}>
+          <Display size="small" marginTop="spacing.8" marginBottom="spacing.4">
+            Type {amountTypeProp}
+          </Display>
+          {sizes[amountTypeProp].map((size) => (
+            <Box key={size} marginBottom="spacing.4">
+              <Text>{size}</Text>
+              <BaseBox marginBottom="spacing.1" />
+              {/* @ts-expect-error */}
+              <AmountComponent {...args} type={amountTypeProp} size={size} />
+            </Box>
+          ))}
+        </Box>
       ))}
-    </BaseBox>
+    </Box>
   );
 };
 
 const defaultArgs: AmountProps = {
   value: 123456.789,
-  size: 'title-medium',
+  size: 'medium',
 };
 
 export const AmountSizes: StoryFn<typeof AmountComponent> = AmountSizesTemplate.bind({});
@@ -110,21 +120,21 @@ AmountSizes.args = {
 AmountSizes.storyName = 'Sizes';
 
 const AmountTemplate: StoryFn<typeof AmountComponent> = (args) => {
-  const intents = ['positive', 'negative', 'notice', 'information'] as const;
+  const colors = ['positive', 'negative', 'notice', 'information'] as const;
 
   return (
     <BaseBox justifyContent="flex-start">
-      {intents.map((intent) => (
+      {colors.map((color) => (
         <BaseBox
           display="flex"
-          key={intent}
+          key={color}
           alignItems="baseline"
           paddingRight="spacing.3"
           paddingTop="spacing.3"
           flexDirection="column"
         >
-          <Text marginBottom="spacing.1">{intent}</Text>
-          <AmountComponent {...args} intent={intent} />
+          <Text marginBottom="spacing.1">{color}</Text>
+          <AmountComponent {...args} color={color} />
         </BaseBox>
       ))}
     </BaseBox>
diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx
index 5ab85918edd..f78db2a20fa 100644
--- a/packages/blade/src/components/Amount/Amount.tsx
+++ b/packages/blade/src/components/Amount/Amount.tsx
@@ -1,14 +1,13 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-import type { Currency } from './amountTokens';
+import type { AmountTypeProps, Currency } from './amountTokens';
 import {
-  amountFontSizes,
+  normalAmountSizes,
   getCurrencyAbbreviations,
   currencyPrefixMapping,
-  affixFontSizes,
+  subtleFontSizes,
   amountLineHeights,
 } from './amountTokens';
-import { BaseText } from '~components/Typography/BaseText';
 import type { FeedbackColors } from '~tokens/theme/theme';
 import type { BaseTextProps } from '~components/Typography/BaseText/types';
 import BaseBox from '~components/Box/BaseBox';
@@ -19,37 +18,23 @@ import { getStyledProps } from '~components/Box/styledProps';
 import type { StyledPropsBlade } from '~components/Box/styledProps';
 import { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';
 import { throwBladeError } from '~utils/logger';
+import { objectKeysWithType } from '~utils/objectKeysWithType';
+import { BaseText } from '~components/Typography/BaseText';
+import { Text } from '~components/Typography';
+import type { FontFamily } from '~tokens/global';
 
-// @TODO: Add CardHeaderAmount component to Card once this is migrated
-type AmountProps = {
+type AmountCommonProps = {
   /**
    * The value to be rendered within the component.
    *
    */
   value: number;
   /**
-   * Sets the intent of the amount.
+   * Sets the color of the amount.
    *
    * @default undefined
    */
-  intent?: Exclude<FeedbackColors, 'neutral'>;
-  /**
-   * Sets the size of the amount.
-   *
-   * @default 'body-medium'
-   */
-  size?:
-    | 'body-medium-bold'
-    | 'body-small'
-    | 'body-small-bold'
-    | 'body-medium'
-    | 'body-medium-bold'
-    | 'heading-small'
-    | 'heading-small-bold'
-    | 'heading-large'
-    | 'heading-large-bold'
-    | 'title-small'
-    | 'title-medium';
+  color?: Exclude<FeedbackColors, 'neutral'>;
   /**
    * Indicates what the suffix of amount should be
    *
@@ -80,22 +65,20 @@ type AmountProps = {
 
 type ColorProps = {
   amountValueColor: BaseTextProps['color'];
-  affixColor: BaseTextProps['color'];
 };
 
-const getTextColorProps = ({ intent }: { intent: AmountProps['intent'] }): ColorProps => {
+type AmountProps = AmountTypeProps & AmountCommonProps;
+
+const getTextColorProps = ({ color }: { color: AmountProps['color'] }): ColorProps => {
   const props: ColorProps = {
-    amountValueColor: 'surface.text.normal.lowContrast',
-    affixColor: 'surface.text.muted.lowContrast',
+    amountValueColor: 'surface.text.gray.normal',
   };
-  if (!intent) return props;
-  props.amountValueColor = `feedback.text.${intent}.lowContrast`;
-  props.affixColor = `feedback.text.${intent}.lowContrast`;
+  if (!color) return props;
+  props.amountValueColor = `feedback.text.${color}.intense`;
   return props;
 };
 
 interface AmountValue extends Omit<AmountProps, 'value'> {
-  affixColor: BaseTextProps['color'];
   amountValueColor: BaseTextProps['color'];
   value: string;
   size: Exclude<AmountProps['size'], undefined>;
@@ -103,39 +86,41 @@ interface AmountValue extends Omit<AmountProps, 'value'> {
 
 const AmountValue = ({
   value,
-  size,
+  size = 'medium',
+  type = 'body',
+  weight = 'regular',
   amountValueColor,
   isAffixSubtle,
   suffix,
-  affixColor,
 }: AmountValue): ReactElement => {
-  const affixFontWeight = isAffixSubtle ? 'regular' : 'bold';
   const isReactNative = getPlatformType() === 'react-native';
-  const affixFontSize = isAffixSubtle ? affixFontSizes[size] : amountFontSizes[size];
-  const valueForWeight = size.includes('bold') || size.startsWith('title') ? 'bold' : 'regular';
+  const affixFontSize = isAffixSubtle ? subtleFontSizes[type][size] : normalAmountSizes[type][size];
+  const numberFontFamily: keyof FontFamily = type === 'body' ? 'text' : 'heading';
   if (suffix === 'decimals' && isAffixSubtle) {
     const integer = value.split('.')[0];
     const decimal = value.split('.')[1];
 
     // Native does not support alignItems of Text inside a div, insted we need to wrap is in a Text
-    const AmountWrapper = getPlatformType() === 'react-native' ? BaseText : React.Fragment;
+    const AmountWrapper = getPlatformType() === 'react-native' ? Text : React.Fragment;
 
     return (
       <AmountWrapper>
         <BaseText
-          fontSize={amountFontSizes[size]}
-          fontWeight={valueForWeight}
-          lineHeight={amountLineHeights[size]}
+          fontSize={normalAmountSizes[type][size]}
+          fontWeight={weight}
+          lineHeight={amountLineHeights[type][size]}
           color={amountValueColor}
+          fontFamily={numberFontFamily}
           as={isReactNative ? undefined : 'span'}
         >
           {integer}.
         </BaseText>
         <BaseText
           marginLeft="spacing.1"
-          fontWeight={affixFontWeight}
+          fontWeight={weight}
           fontSize={affixFontSize}
-          color={affixColor}
+          fontFamily={numberFontFamily}
+          color={amountValueColor}
           as={isReactNative ? undefined : 'span'}
         >
           {decimal || '00'}
@@ -145,10 +130,11 @@ const AmountValue = ({
   }
   return (
     <BaseText
-      fontSize={amountFontSizes[size]}
-      fontWeight={valueForWeight}
+      fontSize={normalAmountSizes[type][size]}
+      fontWeight={weight}
+      fontFamily={numberFontFamily}
       color={amountValueColor}
-      lineHeight={amountLineHeights[size]}
+      lineHeight={amountLineHeights[type][size]}
     >
       {value}
     </BaseText>
@@ -214,20 +200,14 @@ export const formatAmountWithSuffix = ({
   }
 };
 
-const getCurrencyWeight = (
-  isAffixSubtle: NonNullable<AmountProps['isAffixSubtle']>,
-  size: NonNullable<AmountProps['size']>,
-): 'bold' | 'regular' => {
-  if (isAffixSubtle || size.startsWith('bold')) return 'bold';
-  return 'regular';
-};
-
 const _Amount = ({
   value,
   suffix = 'decimals',
-  size = 'body-medium',
+  type = 'body',
+  size = 'medium',
+  weight = 'regular',
   isAffixSubtle = true,
-  intent,
+  color,
   prefix = 'currency-symbol',
   testID,
   currency = 'INR',
@@ -240,10 +220,34 @@ const _Amount = ({
         moduleName: 'Amount',
       });
     }
-    // @ts-expect-error neutral intent should throw error
-    if (intent === 'neutral') {
+    // @ts-expect-error neutral color should throw error
+    if (color === 'neutral') {
       throwBladeError({
-        message: '`neutral` intent is not supported.',
+        message: '`neutral` color is not supported.',
+        moduleName: 'Amount',
+      });
+    }
+
+    const bodySizes = objectKeysWithType(normalAmountSizes.body);
+    if ((type === 'body' || !type) && !bodySizes.includes(size)) {
+      throwBladeError({
+        message: `size="${size}" is not allowed with type="body"`,
+        moduleName: 'Amount',
+      });
+    }
+
+    const displaySizes = objectKeysWithType(normalAmountSizes.display);
+    if (type === 'display' && !displaySizes.includes(size)) {
+      throwBladeError({
+        message: `size="${size}" is not allowed with type="display"`,
+        moduleName: 'Amount',
+      });
+    }
+
+    const headingSizes = objectKeysWithType(normalAmountSizes.heading);
+    if (type === 'heading' && !headingSizes.includes(size)) {
+      throwBladeError({
+        message: `size="${size}" is not allowed with type="heading"`,
         moduleName: 'Amount',
       });
     }
@@ -251,13 +255,13 @@ const _Amount = ({
 
   const currencyPrefix = currencyPrefixMapping[currency][prefix];
   const renderedValue = formatAmountWithSuffix({ suffix, value, currency });
-  const { amountValueColor, affixColor } = getTextColorProps({
-    intent,
+  const { amountValueColor } = getTextColorProps({
+    color,
   });
 
-  const currencyColor = isAffixSubtle ? affixColor : amountValueColor;
-  const currencyFontSize = isAffixSubtle ? affixFontSizes[size] : amountFontSizes[size];
-  const currencyWeight = getCurrencyWeight(isAffixSubtle, size);
+  const currencyFontSize = isAffixSubtle
+    ? subtleFontSizes[type][size]
+    : normalAmountSizes[type][size];
   const isReactNative = getPlatformType() === 'react-native';
 
   return (
@@ -273,9 +277,9 @@ const _Amount = ({
       >
         <BaseText
           marginRight="spacing.1"
-          fontWeight={currencyWeight}
+          fontWeight={weight}
           fontSize={currencyFontSize}
-          color={currencyColor}
+          color={amountValueColor}
           as={isReactNative ? undefined : 'span'}
         >
           {currencyPrefix}
@@ -283,10 +287,11 @@ const _Amount = ({
         <AmountValue
           value={renderedValue}
           amountValueColor={amountValueColor}
+          type={type}
+          weight={weight}
           size={size}
           isAffixSubtle={isAffixSubtle}
           suffix={suffix}
-          affixColor={affixColor}
         />
       </BaseBox>
     </BaseBox>
diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx
index 172aae4e07d..580d0c1a824 100644
--- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx
+++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx
@@ -22,6 +22,22 @@ describe('<Amount />', () => {
     );
   });
 
+  it('should throw an error when invalid type and size is passed', () => {
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="display" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="display"',
+    );
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="heading" size="xsmall" />)).toThrow(
+      '[Blade: Amount]: size="xsmall" is not allowed with type="heading"',
+    );
+
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="body" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="body"',
+    );
+  });
+
   it('should accept testID', () => {
     const { getByTestId } = renderWithTheme(<Amount value={10000} testID="amount-test" />);
     expect(getByTestId('amount-test')).toBeTruthy();
@@ -30,15 +46,15 @@ describe('<Amount />', () => {
   it('should render all sizes of Amount', () => {
     const { toJSON } = renderWithTheme(
       <>
-        <Amount size="body-medium" value={1000} />
-        <Amount size="body-medium-bold" value={1000} />
-        <Amount size="body-small" value={1000} />
-        <Amount size="body-small-bold" value={1000} />
-        <Amount size="heading-large" value={1000} />
-        <Amount size="heading-large-bold" value={1000} />
-        <Amount size="heading-small" value={1000} />
-        <Amount size="heading-small-bold" value={1000} />
-        <Amount size="title-medium" value={1000} />
+        <Amount type="body" size="medium" value={1000} />
+        <Amount type="body" size="medium" weight="semibold" value={1000} />
+        <Amount type="body" size="small" value={1000} />
+        <Amount type="body" size="small" weight="semibold" value={1000} />
+        <Amount type="heading" size="large" value={1000} />
+        <Amount type="heading" size="large" weight="semibold" value={1000} />
+        <Amount type="heading" size="small" value={1000} />
+        <Amount type="heading" size="small" weight="semibold" value={1000} />
+        <Amount type="display" size="medium" value={1000} />
       </>,
     );
     expect(toJSON()).toMatchSnapshot();
@@ -46,26 +62,26 @@ describe('<Amount />', () => {
 
   it('should render amount with Decimal value', () => {
     const { toJSON } = renderWithTheme(
-      <Amount size="heading-small" suffix="decimals" value={1000.22} />,
+      <Amount type="heading" size="small" suffix="decimals" value={1000.22} />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render amount with Humanize value', () => {
     const { toJSON } = renderWithTheme(
-      <Amount size="heading-small" suffix="humanize" value={1000.22} />,
+      <Amount type="heading" size="small" suffix="humanize" value={1000.22} />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render positive intent Amount ', () => {
-    const { toJSON } = renderWithTheme(<Amount intent="positive" value={1000} />);
+    const { toJSON } = renderWithTheme(<Amount color="positive" value={1000} />);
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('should render information intent Amount ', () => {
     const { toJSON } = renderWithTheme(
-      <Amount isAffixSubtle={false} intent="information" value={1000} />,
+      <Amount isAffixSubtle={false} color="information" value={1000} />,
     );
     expect(toJSON()).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx
index 35043249d42..d1a86b1d688 100644
--- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx
+++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx
@@ -30,33 +30,54 @@ describe('<Amount />', () => {
     mockConsoleError.mockRestore();
   });
 
+  it('should throw an error when invalid type and size is passed', () => {
+    const mockConsoleError = jest.spyOn(console, 'error').mockImplementation();
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="display" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="display"',
+    );
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="heading" size="xsmall" />)).toThrow(
+      '[Blade: Amount]: size="xsmall" is not allowed with type="heading"',
+    );
+    mockConsoleError.mockRestore();
+
+    // @ts-expect-error testing failure case when value is passed as a string
+    expect(() => renderWithTheme(<Amount value={1000} type="body" size="2xlarge" />)).toThrow(
+      '[Blade: Amount]: size="2xlarge" is not allowed with type="body"',
+    );
+    mockConsoleError.mockRestore();
+  });
+
   it('should render body-small size Amount', () => {
-    const { container } = renderWithTheme(<Amount size="body-small" value={1000} />);
+    const { container } = renderWithTheme(<Amount type="body" size="small" value={1000} />);
     expect(container).toMatchSnapshot();
   });
 
   it('should render body-small-bold size Amount', () => {
-    const { container } = renderWithTheme(<Amount size="body-small-bold" value={1000} />);
+    const { container } = renderWithTheme(
+      <Amount type="body" size="small" weight="semibold" value={1000} />,
+    );
     expect(container).toMatchSnapshot();
   });
 
   it('should render body-medium size Amount', () => {
-    const { container } = renderWithTheme(<Amount size="body-medium" value={1000} />);
+    const { container } = renderWithTheme(<Amount type="body" size="medium" value={1000} />);
     expect(container).toMatchSnapshot();
   });
 
   it('should render body-medium-bold size Amount', () => {
     const { container } = renderWithTheme(
       <>
-        <Amount size="body-medium" value={1000} />
-        <Amount size="body-medium-bold" value={1000} />
-        <Amount size="body-small" value={1000} />
-        <Amount size="body-small-bold" value={1000} />
-        <Amount size="heading-large" value={1000} />
-        <Amount size="heading-large-bold" value={1000} />
-        <Amount size="heading-small" value={1000} />
-        <Amount size="heading-small-bold" value={1000} />
-        <Amount size="title-medium" value={1000} />
+        <Amount type="body" size="medium" value={1000} />
+        <Amount type="body" size="medium" weight="semibold" value={1000} />
+        <Amount type="body" size="small" value={1000} />
+        <Amount type="body" size="small" weight="semibold" value={1000} />
+        <Amount type="heading" size="large" value={1000} />
+        <Amount type="heading" size="large" weight="semibold" value={1000} />
+        <Amount type="heading" size="small" value={1000} />
+        <Amount type="heading" size="small" weight="semibold" value={1000} />
+        <Amount type="display" size="medium" value={1000} />
       </>,
     );
     expect(container).toMatchSnapshot();
@@ -64,19 +85,19 @@ describe('<Amount />', () => {
 
   it('should render amount with Humanize value', () => {
     const { container } = renderWithTheme(
-      <Amount size="title-medium" suffix="humanize" value={1000.22} />,
+      <Amount type="display" size="medium" suffix="humanize" value={1000.22} />,
     );
     expect(container).toMatchSnapshot();
   });
 
   it('should render positive intent Amount ', () => {
-    const { container } = renderWithTheme(<Amount intent="positive" value={1000} />);
+    const { container } = renderWithTheme(<Amount color="positive" value={1000} />);
     expect(container).toMatchSnapshot();
   });
 
   it('should render negative intent Amount ', () => {
     const { container } = renderWithTheme(
-      <Amount isAffixSubtle={false} intent="negative" value={1000} />,
+      <Amount isAffixSubtle={false} color="negative" value={1000} />,
     );
     expect(container).toMatchSnapshot();
   });
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
index 27c65ff9ea1..9364b48b4c0 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap
@@ -36,19 +36,19 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -68,13 +68,19 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -94,15 +100,16 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -127,17 +134,18 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -199,19 +207,19 @@ exports[`<Amount /> should render Amount with default props 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -231,13 +239,19 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -257,15 +271,16 @@ exports[`<Amount /> should render Amount with default props 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -290,17 +305,18 @@ exports[`<Amount /> should render Amount with default props 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -362,19 +378,19 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -394,13 +410,19 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -420,15 +442,16 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -453,17 +476,18 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -525,19 +549,19 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -557,13 +581,19 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -583,15 +613,16 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -616,17 +647,18 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -688,19 +720,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -720,13 +752,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -746,15 +784,16 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -779,17 +818,18 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -840,19 +880,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="semibold"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -872,13 +912,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -898,19 +944,20 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
-          fontWeight="bold"
+          fontWeight="semibold"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
@@ -931,19 +978,20 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
-          fontWeight="regular"
+          fontFamily="text"
+          fontSize={25}
+          fontWeight="semibold"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
@@ -992,19 +1040,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -1024,13 +1072,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1050,21 +1104,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={75}
           fontWeight="regular"
-          lineHeight={50}
+          lineHeight={75}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
-                "lineHeight": 16,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1083,17 +1138,18 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -1144,19 +1200,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="semibold"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -1176,13 +1232,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1202,21 +1264,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={75}
-          fontWeight="bold"
-          lineHeight={50}
+          fontWeight="semibold"
+          lineHeight={75}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "letterSpacing": 0,
-                "lineHeight": 16,
+                "lineHeight": 18,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1235,19 +1298,20 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={75}
-          fontWeight="regular"
+          fontFamily="text"
+          fontSize={25}
+          fontWeight="semibold"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
+                "color": "hsla(212, 39%, 16%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
@@ -1296,19 +1360,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
+        fontSize={200}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -1328,13 +1392,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1354,21 +1424,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={400}
+          fontFamily="heading"
+          fontSize={500}
           fontWeight="regular"
-          lineHeight={400}
+          lineHeight={500}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Inter",
-                "fontSize": 18,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 20,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
-                "lineHeight": 24,
+                "lineHeight": 26,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1387,17 +1458,18 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={100}
+          fontFamily="heading"
+          fontSize={200}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Inter",
-                "fontSize": 14,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -1448,19 +1520,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={100}
-        fontWeight="bold"
+        fontSize={200}
+        fontWeight="semibold"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 14,
+              "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -1480,13 +1552,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1506,21 +1584,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={400}
-          fontWeight="bold"
-          lineHeight={400}
+          fontFamily="heading"
+          fontSize={500}
+          fontWeight="semibold"
+          lineHeight={500}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Inter",
-                "fontSize": 18,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 20,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "letterSpacing": 0,
-                "lineHeight": 24,
+                "lineHeight": 26,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1539,19 +1618,20 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={100}
-          fontWeight="regular"
+          fontFamily="heading"
+          fontSize={200}
+          fontWeight="semibold"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Inter",
-                "fontSize": 14,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
@@ -1600,19 +1680,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -1632,13 +1712,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1658,16 +1744,17 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={200}
+          fontFamily="heading"
+          fontSize={300}
           fontWeight="regular"
           lineHeight={300}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Inter",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -1691,16 +1778,17 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="heading"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Inter",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -1752,19 +1840,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="semibold"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -1784,13 +1872,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1810,19 +1904,20 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={200}
-          fontWeight="bold"
+          fontFamily="heading"
+          fontSize={300}
+          fontWeight="semibold"
           lineHeight={300}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Inter",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "letterSpacing": 0,
                 "lineHeight": 22,
                 "marginBottom": 0,
@@ -1843,19 +1938,20 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="heading"
           fontSize={75}
-          fontWeight="regular"
+          fontWeight="semibold"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Inter",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 12,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "letterSpacing": 0,
                 "lineHeight": 20,
                 "marginBottom": 0,
@@ -1904,19 +2000,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={400}
-        fontWeight="bold"
+        fontSize={700}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 18,
+              "fontSize": 32,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -1936,13 +2032,19 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -1962,21 +2064,22 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={700}
-          fontWeight="bold"
-          lineHeight={600}
+          fontFamily="heading"
+          fontSize={900}
+          fontWeight="regular"
+          lineHeight={900}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Inter",
-                "fontSize": 32,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 36,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "400",
                 "letterSpacing": 0,
-                "lineHeight": 32,
+                "lineHeight": 42,
                 "marginBottom": 0,
                 "marginLeft": 0,
                 "marginRight": 0,
@@ -1995,17 +2098,18 @@ exports[`<Amount /> should render all sizes of Amount 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={400}
+          fontFamily="heading"
+          fontSize={700}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Inter",
-                "fontSize": 18,
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
+                "fontSize": 32,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
@@ -2067,19 +2171,19 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -2099,13 +2203,19 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -2125,16 +2235,17 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
       >
         <Text
           accessible={true}
-          color="surface.text.normal.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
-          fontSize={200}
+          fontFamily="heading"
+          fontSize={300}
           fontWeight="regular"
           lineHeight={300}
           style={
             [
               {
-                "color": "hsla(217, 56%, 17%, 1)",
-                "fontFamily": "Inter",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -2158,16 +2269,17 @@ exports[`<Amount /> should render amount with Decimal value 1`] = `
         </Text>
         <Text
           accessible={true}
-          color="surface.text.muted.lowContrast"
+          color="surface.text.gray.normal"
           data-blade-component="base-text"
+          fontFamily="heading"
           fontSize={75}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(216, 16%, 60%, 1)",
-                "fontFamily": "Inter",
+                "color": "hsla(212, 39%, 16%, 1)",
+                "fontFamily": "TASA Orbiter Display",
                 "fontSize": 12,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -2230,19 +2342,19 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
     >
       <Text
         accessible={true}
-        color="surface.text.muted.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
         fontSize={75}
-        fontWeight="bold"
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(216, 16%, 60%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
               "fontSize": 12,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -2262,16 +2374,17 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
       </Text>
       <Text
         accessible={true}
-        color="surface.text.normal.lowContrast"
+        color="surface.text.gray.normal"
         data-blade-component="base-text"
-        fontSize={200}
+        fontFamily="heading"
+        fontSize={300}
         fontWeight="regular"
         lineHeight={300}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
-              "fontFamily": "Inter",
+              "color": "hsla(212, 39%, 16%, 1)",
+              "fontFamily": "TASA Orbiter Display",
               "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "400",
@@ -2333,7 +2446,7 @@ exports[`<Amount /> should render information intent Amount  1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.text.information.lowContrast"
+        color="feedback.text.information.intense"
         data-blade-component="base-text"
         fontSize={100}
         fontWeight="regular"
@@ -2341,7 +2454,7 @@ exports[`<Amount /> should render information intent Amount  1`] = `
         style={
           [
             {
-              "color": "hsla(193, 100%, 35%, 1)",
+              "color": "hsla(200, 84%, 29%, 1)",
               "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
@@ -2365,15 +2478,16 @@ exports[`<Amount /> should render information intent Amount  1`] = `
       </Text>
       <Text
         accessible={true}
-        color="feedback.text.information.lowContrast"
+        color="feedback.text.information.intense"
         data-blade-component="base-text"
+        fontFamily="text"
         fontSize={100}
         fontWeight="regular"
         lineHeight={100}
         style={
           [
             {
-              "color": "hsla(193, 100%, 35%, 1)",
+              "color": "hsla(200, 84%, 29%, 1)",
               "fontFamily": "Inter",
               "fontSize": 14,
               "fontStyle": "normal",
@@ -2436,19 +2550,19 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
     >
       <Text
         accessible={true}
-        color="feedback.text.positive.lowContrast"
+        color="feedback.text.positive.intense"
         data-blade-component="base-text"
-        fontSize={75}
-        fontWeight="bold"
+        fontSize={25}
+        fontWeight="regular"
         marginRight="spacing.1"
         style={
           [
             {
-              "color": "hsla(160, 100%, 26%, 1)",
+              "color": "hsla(150, 100%, 21%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 12,
+              "fontSize": 10,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "400",
               "letterSpacing": 0,
               "lineHeight": 20,
               "marginBottom": 0,
@@ -2468,13 +2582,19 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
       </Text>
       <Text
         accessible={true}
-        data-blade-component="base-text"
+        color="surface.text.gray.normal"
+        data-blade-component="text"
+        fontFamily="text"
+        fontSize={100}
+        fontStyle="normal"
+        fontWeight="regular"
+        lineHeight={100}
         style={
           [
             {
-              "color": "hsla(217, 56%, 17%, 1)",
+              "color": "hsla(212, 39%, 16%, 1)",
               "fontFamily": "Inter",
-              "fontSize": 16,
+              "fontSize": 14,
               "fontStyle": "normal",
               "fontWeight": "400",
               "letterSpacing": 0,
@@ -2494,15 +2614,16 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
       >
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="feedback.text.positive.intense"
           data-blade-component="base-text"
+          fontFamily="text"
           fontSize={100}
           fontWeight="regular"
           lineHeight={100}
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
+                "color": "hsla(150, 100%, 21%, 1)",
                 "fontFamily": "Inter",
                 "fontSize": 14,
                 "fontStyle": "normal",
@@ -2527,17 +2648,18 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
         </Text>
         <Text
           accessible={true}
-          color="feedback.text.positive.lowContrast"
+          color="feedback.text.positive.intense"
           data-blade-component="base-text"
-          fontSize={75}
+          fontFamily="text"
+          fontSize={25}
           fontWeight="regular"
           marginLeft="spacing.1"
           style={
             [
               {
-                "color": "hsla(160, 100%, 26%, 1)",
+                "color": "hsla(150, 100%, 21%, 1)",
                 "fontFamily": "Inter",
-                "fontSize": 12,
+                "fontSize": 10,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "letterSpacing": 0,
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
index da87eb73a39..c9a028b5619 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap
@@ -1,13 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Amount /> should render Amount on server 1`] = `"<div id="root"><div data-blade-component="amount" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx caXXVm"><span class="StyledBaseText-dVBfTO hWtqUK" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO fRrfTw" data-blade-component="base-text">10,000<!-- -->.</span><span class="StyledBaseText-dVBfTO ebnBpi" data-blade-component="base-text">00</span></div></div></div>"`;
+exports[`<Amount /> should render Amount on server 1`] = `"<div id="root"><div data-blade-component="amount" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx caXXVm"><span class="StyledBaseText-dVBfTO kkBehy" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="base-text">10,000<!-- -->.</span><span class="StyledBaseText-dVBfTO kGBFNJ" data-blade-component="base-text">00</span></div></div></div>"`;
 
 exports[`<Amount /> should render Amount on server 2`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -22,7 +43,7 @@ exports[`<Amount /> should render Amount on server 2`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -39,9 +60,9 @@ exports[`<Amount /> should render Amount on server 2`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -56,27 +77,6 @@ exports[`<Amount /> should render Amount on server 2`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div
   id="root"
 >
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap
index 499ed156fdf..2688a3ffb21 100644
--- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap
+++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap
@@ -1,11 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Amount /> should render AED currency Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -20,7 +41,7 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -37,9 +58,9 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -54,27 +75,6 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -109,11 +109,32 @@ exports[`<Amount /> should render AED currency Amount 1`] = `
 `;
 
 exports[`<Amount /> should render Amount with default props 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -128,7 +149,7 @@ exports[`<Amount /> should render Amount with default props 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -145,9 +166,9 @@ exports[`<Amount /> should render Amount with default props 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -162,27 +183,6 @@ exports[`<Amount /> should render Amount with default props 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -217,11 +217,32 @@ exports[`<Amount /> should render Amount with default props 1`] = `
 `;
 
 exports[`<Amount /> should render MYR currency Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -236,7 +257,7 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -253,9 +274,9 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -270,27 +291,6 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -325,11 +325,32 @@ exports[`<Amount /> should render MYR currency Amount 1`] = `
 `;
 
 exports[`<Amount /> should render USD currency Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -344,7 +365,7 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -361,9 +382,9 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -378,27 +399,6 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -433,11 +433,32 @@ exports[`<Amount /> should render USD currency Amount 1`] = `
 `;
 
 exports[`<Amount /> should render amount with Humanize value 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: 2.5rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -452,14 +473,14 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 2.5rem;
-  font-weight: 700;
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 3.5rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 2.375rem;
+  line-height: 4rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
@@ -468,27 +489,6 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
   padding: 0;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -516,11 +516,32 @@ exports[`<Amount /> should render amount with Humanize value 1`] = `
 `;
 
 exports[`<Amount /> should render body-medium size Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -535,7 +556,7 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -552,9 +573,9 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -569,27 +590,6 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -624,11 +624,32 @@ exports[`<Amount /> should render body-medium size Amount 1`] = `
 `;
 
 exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -643,7 +664,7 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -660,9 +681,9 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -678,10 +699,10 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
 }
 
 .c5.c5.c5.c5.c5 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.875rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -692,17 +713,53 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  margin-right: 2px;
 }
 
 .c6.c6.c6.c6.c6 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c7.c7.c7.c7.c7 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.625rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  margin-left: 2px;
+}
+
+.c8.c8.c8.c8.c8 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
@@ -711,15 +768,15 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   padding: 0;
 }
 
-.c7.c7.c7.c7.c7 {
-  color: hsla(217,56%,17%,1);
+.c9.c9.c9.c9.c9 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
@@ -728,11 +785,11 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   padding: 0;
 }
 
-.c8.c8.c8.c8.c8 {
-  color: hsla(216,16%,60%,1);
+.c10.c10.c10.c10.c10 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.875rem;
-  font-weight: 700;
+  font-size: 1rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -746,15 +803,15 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   margin-right: 2px;
 }
 
-.c9.c9.c9.c9.c9 {
-  color: hsla(217,56%,17%,1);
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 1.25rem;
+.c11.c11.c11.c11.c11 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.5rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.625rem;
+  line-height: 2rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
@@ -763,10 +820,116 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   padding: 0;
 }
 
-.c10.c10.c10.c10.c10 {
-  color: hsla(216,16%,60%,1);
+.c12.c12.c12.c12.c12 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  margin-left: 2px;
+}
+
+.c13.c13.c13.c13.c13 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.875rem;
+  font-size: 1rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  margin-right: 2px;
+}
+
+.c14.c14.c14.c14.c14 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.5rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 2rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c15.c15.c15.c15.c15 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  margin-left: 2px;
+}
+
+.c16.c16.c16.c16.c16 {
+  color: hsla(212,39%,16%,1);
+  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+  margin-right: 2px;
+}
+
+.c17.c17.c17.c17.c17 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 400;
+  font-style: normal;
+  -webkit-text-decoration-line: none;
+  text-decoration-line: none;
+  line-height: 1.5rem;
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  margin: 0;
+  padding: 0;
+}
+
+.c18.c18.c18.c18.c18 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -781,28 +944,29 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   margin-left: 2px;
 }
 
-.c11.c11.c11.c11.c11 {
-  color: hsla(217,56%,17%,1);
+.c19.c19.c19.c19.c19 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: 0.75rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.625rem;
+  line-height: 1.25rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
   letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  margin-right: 2px;
 }
 
-.c12.c12.c12.c12.c12 {
-  color: hsla(217,56%,17%,1);
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
+.c20.c20.c20.c20.c20 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -815,28 +979,29 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   padding: 0;
 }
 
-.c13.c13.c13.c13.c13 {
-  color: hsla(217,56%,17%,1);
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 1rem;
-  font-weight: 700;
+.c21.c21.c21.c21.c21 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1.5rem;
+  line-height: 1.25rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
   letter-spacing: 0px;
   margin: 0;
   padding: 0;
+  margin-left: 2px;
 }
 
-.c14.c14.c14.c14.c14 {
-  color: hsla(216,16%,60%,1);
+.c22.c22.c22.c22.c22 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: 2.5rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -850,15 +1015,15 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   margin-right: 2px;
 }
 
-.c15.c15.c15.c15.c15 {
-  color: hsla(217,56%,17%,1);
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 2.5rem;
-  font-weight: 700;
+.c23.c23.c23.c23.c23 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 3.5rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 2.375rem;
+  line-height: 4rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
@@ -867,10 +1032,10 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   padding: 0;
 }
 
-.c16.c16.c16.c16.c16 {
-  color: hsla(216,16%,60%,1);
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 1.25rem;
+.c24.c24.c24.c24.c24 {
+  color: hsla(212,39%,16%,1);
+  font-family: "TASA Orbiter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+  font-size: 2.5rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -885,27 +1050,6 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -945,20 +1089,20 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c5"
         data-blade-component="base-text"
       >
         ₹
       </span>
       <span
-        class="c5"
+        class="c6"
         data-blade-component="base-text"
       >
         1,000
         .
       </span>
       <span
-        class="c4"
+        class="c7"
         data-blade-component="base-text"
       >
         00
@@ -980,7 +1124,7 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
         ₹
       </span>
       <span
-        class="c6"
+        class="c8"
         data-blade-component="base-text"
       >
         1,000
@@ -1003,20 +1147,20 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c5"
         data-blade-component="base-text"
       >
         ₹
       </span>
       <span
-        class="c7"
+        class="c9"
         data-blade-component="base-text"
       >
         1,000
         .
       </span>
       <span
-        class="c4"
+        class="c7"
         data-blade-component="base-text"
       >
         00
@@ -1032,20 +1176,20 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c8"
+        class="c10"
         data-blade-component="base-text"
       >
         ₹
       </span>
       <span
-        class="c9"
+        class="c11"
         data-blade-component="base-text"
       >
         1,000
         .
       </span>
       <span
-        class="c10"
+        class="c12"
         data-blade-component="base-text"
       >
         00
@@ -1061,20 +1205,20 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c8"
+        class="c13"
         data-blade-component="base-text"
       >
         ₹
       </span>
       <span
-        class="c11"
+        class="c14"
         data-blade-component="base-text"
       >
         1,000
         .
       </span>
       <span
-        class="c10"
+        class="c15"
         data-blade-component="base-text"
       >
         00
@@ -1090,20 +1234,20 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c16"
         data-blade-component="base-text"
       >
         ₹
       </span>
       <span
-        class="c12"
+        class="c17"
         data-blade-component="base-text"
       >
         1,000
         .
       </span>
       <span
-        class="c4"
+        class="c18"
         data-blade-component="base-text"
       >
         00
@@ -1119,20 +1263,20 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c2"
+        class="c19"
         data-blade-component="base-text"
       >
         ₹
       </span>
       <span
-        class="c13"
+        class="c20"
         data-blade-component="base-text"
       >
         1,000
         .
       </span>
       <span
-        class="c4"
+        class="c21"
         data-blade-component="base-text"
       >
         00
@@ -1148,20 +1292,20 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
       data-blade-component="base-box"
     >
       <span
-        class="c14"
+        class="c22"
         data-blade-component="base-text"
       >
         ₹
       </span>
       <span
-        class="c15"
+        class="c23"
         data-blade-component="base-text"
       >
         1,000
         .
       </span>
       <span
-        class="c16"
+        class="c24"
         data-blade-component="base-text"
       >
         00
@@ -1172,11 +1316,32 @@ exports[`<Amount /> should render body-medium-bold size Amount 1`] = `
 `;
 
 exports[`<Amount /> should render body-small size Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -1191,14 +1356,14 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
@@ -1208,9 +1373,9 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -1225,27 +1390,6 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -1280,11 +1424,32 @@ exports[`<Amount /> should render body-small size Amount 1`] = `
 `;
 
 exports[`<Amount /> should render body-small-bold size Amount 1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -1299,14 +1464,14 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(217,56%,17%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
-  line-height: 1rem;
+  line-height: 1.125rem;
   -webkit-letter-spacing: 0px;
   -moz-letter-spacing: 0px;
   -ms-letter-spacing: 0px;
@@ -1316,10 +1481,10 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(216,16%,60%,1);
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 400;
+  font-size: 0.625rem;
+  font-weight: 600;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -1333,27 +1498,6 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -1388,8 +1532,29 @@ exports[`<Amount /> should render body-small-bold size Amount 1`] = `
 `;
 
 exports[`<Amount /> should render negative intent Amount  1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(8,73%,47%,1);
+  color: hsla(0,83%,33%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -1407,7 +1572,7 @@ exports[`<Amount /> should render negative intent Amount  1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(8,73%,47%,1);
+  color: hsla(0,83%,33%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -1423,27 +1588,6 @@ exports[`<Amount /> should render negative intent Amount  1`] = `
   padding: 0;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
@@ -1471,11 +1615,32 @@ exports[`<Amount /> should render negative intent Amount  1`] = `
 `;
 
 exports[`<Amount /> should render positive intent Amount  1`] = `
+.c0.c0.c0.c0.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1.c1.c1.c1.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+
 .c2.c2.c2.c2.c2 {
-  color: hsla(160,100%,26%,1);
+  color: hsla(150,100%,21%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -1490,7 +1655,7 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
 }
 
 .c3.c3.c3.c3.c3 {
-  color: hsla(160,100%,26%,1);
+  color: hsla(150,100%,21%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
   font-weight: 400;
@@ -1507,9 +1672,9 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
 }
 
 .c4.c4.c4.c4.c4 {
-  color: hsla(160,100%,26%,1);
+  color: hsla(150,100%,21%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -1524,27 +1689,6 @@ exports[`<Amount /> should render positive intent Amount  1`] = `
   margin-left: 2px;
 }
 
-.c0.c0.c0.c0.c0 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.c1.c1.c1.c1.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: baseline;
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-}
-
 <div>
   <div
     class="c0"
diff --git a/packages/blade/src/components/Amount/amountTokens.ts b/packages/blade/src/components/Amount/amountTokens.ts
index c339cfd1ebb..034ac517e4f 100644
--- a/packages/blade/src/components/Amount/amountTokens.ts
+++ b/packages/blade/src/components/Amount/amountTokens.ts
@@ -1,48 +1,102 @@
-// @ts-nocheck
-import type { AmountProps } from './Amount';
 import type { FontSize, Typography } from '~tokens/global';
+import type { BaseTextProps } from '~components/Typography/BaseText/types';
 
-const affixFontSizes: Record<NonNullable<AmountProps['size']>, keyof FontSize> = {
-  'body-small': 75,
-  'body-small-bold': 75,
-  'body-medium': 75,
-  'body-medium-bold': 75,
-  'heading-small': 75,
-  'heading-small-bold': 75,
-  'heading-large': 100,
-  'heading-large-bold': 100,
-  'title-small': 300,
-  'title-medium': 400,
-} as const;
+type AmountSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 
-const amountFontSizes: Record<NonNullable<AmountProps['size']>, keyof FontSize> = {
-  'body-small': 75,
-  'body-small-bold': 75,
-  'body-medium': 100,
-  'body-medium-bold': 100,
-  'heading-small': 200,
-  'heading-small-bold': 200,
-  'heading-large': 400,
-  'heading-large-bold': 400,
-  'title-small': 600,
-  'title-medium': 700,
-} as const;
+type AmountDisplayProps = {
+  type?: 'display';
+  size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge'>;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
+};
+
+type AmountHeadingProps = {
+  type?: 'heading';
+  size?: Extract<AmountSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
+};
+
+type AmountBodyProps = {
+  type?: 'body';
+  size?: Extract<AmountSizes, 'xsmall' | 'small' | 'medium' | 'large'>;
+  weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
+};
+
+type AmountTypeProps = AmountDisplayProps | AmountHeadingProps | AmountBodyProps;
+
+const normalAmountSizes: Record<
+  'body' | 'heading' | 'display',
+  Partial<Record<NonNullable<AmountTypeProps['size']>, keyof FontSize>>
+> = {
+  body: {
+    xsmall: 25,
+    small: 75,
+    medium: 100,
+    large: 200,
+  },
+  heading: {
+    small: 300,
+    medium: 400,
+    large: 500,
+    xlarge: 600,
+    '2xlarge': 700,
+  },
+  display: {
+    small: 800,
+    medium: 900,
+    large: 1000,
+    xlarge: 1100,
+  },
+};
+
+const subtleFontSizes: Record<
+  'body' | 'heading' | 'display',
+  Partial<Record<NonNullable<AmountTypeProps['size']>, keyof FontSize>>
+> = {
+  body: {
+    xsmall: normalAmountSizes.body.xsmall,
+    small: normalAmountSizes.body.xsmall,
+    medium: normalAmountSizes.body.xsmall,
+    large: normalAmountSizes.body.small,
+  },
+  heading: {
+    small: normalAmountSizes.body.small,
+    medium: normalAmountSizes.body.medium,
+    large: normalAmountSizes.body.large,
+    xlarge: normalAmountSizes.heading.medium,
+    '2xlarge': normalAmountSizes.heading.large,
+  },
+  display: {
+    small: normalAmountSizes.heading.xlarge,
+    medium: normalAmountSizes.heading['2xlarge'],
+    large: normalAmountSizes.heading['2xlarge'],
+    xlarge: normalAmountSizes.display.small,
+  },
+};
 
 const amountLineHeights: Record<
-  NonNullable<AmountProps['size']>,
-  keyof Typography['lineHeights']
+  'body' | 'heading' | 'display',
+  Partial<Record<NonNullable<AmountTypeProps['size']>, keyof Typography['lineHeights']>>
 > = {
-  'body-small': 50,
-  'body-small-bold': 50,
-  'body-medium': 100,
-  'body-medium-bold': 100,
-  'heading-small': 300,
-  'heading-small-bold': 300,
-  'heading-large': 400,
-  'heading-large-bold': 400,
-  'title-small': 500,
-  'title-medium': 600,
-} as const;
+  body: {
+    xsmall: 25,
+    small: 75,
+    medium: 100,
+    large: 200,
+  },
+  heading: {
+    small: 300,
+    medium: 400,
+    large: 500,
+    xlarge: 600,
+    '2xlarge': 700,
+  },
+  display: {
+    small: 800,
+    medium: 900,
+    large: 1000,
+    xlarge: 1100,
+  },
+};
 
 // All the supported currency codes are taken from Razorpay's Merchant Dashboard codebase
 const currencyPrefixMapping = {
@@ -167,11 +221,11 @@ const getCurrencyAbbreviations = (currency: Currency): CurrencyAbbreviation[] =>
 };
 
 export {
-  amountFontSizes,
+  subtleFontSizes,
+  normalAmountSizes,
   amountLineHeights,
-  affixFontSizes,
   currencyPrefixMapping,
   getCurrencyAbbreviations,
 };
 
-export type { Currency };
+export type { Currency, AmountBodyProps, AmountDisplayProps, AmountHeadingProps, AmountTypeProps };
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
index 8385cff820d..1c94ad7f764 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap
@@ -310,18 +310,19 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                   >
                     <Text
                       accessible={true}
-                      color="feedback.text.positive.lowContrast"
+                      color="surface.text.gray.normal"
                       data-blade-component="base-text"
-                      fontSize={75}
-                      fontWeight="bold"
+                      fontSize={25}
+                      fontWeight="regular"
                       marginRight="spacing.1"
                       style={
                         [
                           {
+                            "color": "hsla(212, 39%, 16%, 1)",
                             "fontFamily": "Inter",
-                            "fontSize": 12,
+                            "fontSize": 10,
                             "fontStyle": "normal",
-                            "fontWeight": "700",
+                            "fontWeight": "400",
                             "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
@@ -341,13 +342,19 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     </Text>
                     <Text
                       accessible={true}
-                      data-blade-component="base-text"
+                      color="surface.text.gray.normal"
+                      data-blade-component="text"
+                      fontFamily="text"
+                      fontSize={100}
+                      fontStyle="normal"
+                      fontWeight="regular"
+                      lineHeight={100}
                       style={
                         [
                           {
                             "color": "hsla(212, 39%, 16%, 1)",
                             "fontFamily": "Inter",
-                            "fontSize": 16,
+                            "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
                             "letterSpacing": 0,
@@ -367,14 +374,16 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     >
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="surface.text.gray.normal"
                         data-blade-component="base-text"
+                        fontFamily="text"
                         fontSize={100}
                         fontWeight="regular"
                         lineHeight={100}
                         style={
                           [
                             {
+                              "color": "hsla(212, 39%, 16%, 1)",
                               "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
@@ -399,16 +408,18 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                       </Text>
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="surface.text.gray.normal"
                         data-blade-component="base-text"
-                        fontSize={75}
+                        fontFamily="text"
+                        fontSize={25}
                         fontWeight="regular"
                         marginLeft="spacing.1"
                         style={
                           [
                             {
+                              "color": "hsla(212, 39%, 16%, 1)",
                               "fontFamily": "Inter",
-                              "fontSize": 12,
+                              "fontSize": 10,
                               "fontStyle": "normal",
                               "fontWeight": "400",
                               "letterSpacing": 0,
@@ -793,18 +804,19 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                   >
                     <Text
                       accessible={true}
-                      color="feedback.text.positive.lowContrast"
+                      color="surface.text.gray.normal"
                       data-blade-component="base-text"
-                      fontSize={75}
-                      fontWeight="bold"
+                      fontSize={25}
+                      fontWeight="regular"
                       marginRight="spacing.1"
                       style={
                         [
                           {
+                            "color": "hsla(212, 39%, 16%, 1)",
                             "fontFamily": "Inter",
-                            "fontSize": 12,
+                            "fontSize": 10,
                             "fontStyle": "normal",
-                            "fontWeight": "700",
+                            "fontWeight": "400",
                             "letterSpacing": 0,
                             "lineHeight": 20,
                             "marginBottom": 0,
@@ -824,13 +836,19 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     </Text>
                     <Text
                       accessible={true}
-                      data-blade-component="base-text"
+                      color="surface.text.gray.normal"
+                      data-blade-component="text"
+                      fontFamily="text"
+                      fontSize={100}
+                      fontStyle="normal"
+                      fontWeight="regular"
+                      lineHeight={100}
                       style={
                         [
                           {
                             "color": "hsla(212, 39%, 16%, 1)",
                             "fontFamily": "Inter",
-                            "fontSize": 16,
+                            "fontSize": 14,
                             "fontStyle": "normal",
                             "fontWeight": "400",
                             "letterSpacing": 0,
@@ -850,14 +868,16 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     >
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="surface.text.gray.normal"
                         data-blade-component="base-text"
+                        fontFamily="text"
                         fontSize={100}
                         fontWeight="regular"
                         lineHeight={100}
                         style={
                           [
                             {
+                              "color": "hsla(212, 39%, 16%, 1)",
                               "fontFamily": "Inter",
                               "fontSize": 14,
                               "fontStyle": "normal",
@@ -882,16 +902,18 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                       </Text>
                       <Text
                         accessible={true}
-                        color="feedback.text.positive.lowContrast"
+                        color="surface.text.gray.normal"
                         data-blade-component="base-text"
-                        fontSize={75}
+                        fontFamily="text"
+                        fontSize={25}
                         fontWeight="regular"
                         marginLeft="spacing.1"
                         style={
                           [
                             {
+                              "color": "hsla(212, 39%, 16%, 1)",
                               "fontFamily": "Inter",
-                              "fontSize": 12,
+                              "fontSize": 10,
                               "fontStyle": "normal",
                               "fontWeight": "400",
                               "letterSpacing": 0,
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
index 1dfe8106c68..9a70fdfbd17 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Collapsible /> should render Collapsible on server 1`] = `"<div id="root"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx RvefM"><button type="button" data-blade-component="button" role="button" aria-controls="collapsible-body-undefined" aria-expanded="true" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO kqByBJ" data-blade-component="base-text">View Price Breakdown</div></div></button><div id="collapsible-body-undefined" role="region" aria-hidden="false" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 rdBDV"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="box" class="BaseBox-bmPWx RDiNQ"><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Actual amount</p><div data-blade-component="amount" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx caXXVm"><span class="StyledBaseText-dVBfTO hjdXDQ" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO eQyIov" data-blade-component="base-text">1,000<!-- -->.</span><span class="StyledBaseText-dVBfTO iovTmM" data-blade-component="base-text">00</span></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO ekqPVM" data-blade-component="text">Razorpay Platform Fees</p><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">2%</p></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO ekqPVM" data-blade-component="text">GST</p><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">18%</p></div></div></div></div></div></div></div></div>"`;
+exports[`<Collapsible /> should render Collapsible on server 1`] = `"<div id="root"><div data-blade-component="collapsible" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx RvefM"><button type="button" data-blade-component="button" role="button" aria-controls="collapsible-body-undefined" aria-expanded="true" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 ctKBsz"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO kqByBJ" data-blade-component="base-text">View Price Breakdown</div></div></button><div id="collapsible-body-undefined" role="region" aria-hidden="false" data-blade-component="collapsible-body" class="BaseBox-bmPWx"><div class="CollapsibleBodyContentweb__StyledCollapsibleBodyContent-sc-1oi3ngc-0 rdBDV"><div data-blade-component="box" class="BaseBox-bmPWx jYeWPh"><div data-blade-component="box" class="BaseBox-bmPWx RDiNQ"><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">Actual amount</p><div data-blade-component="amount" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx caXXVm"><span class="StyledBaseText-dVBfTO kkBehy" data-blade-component="base-text">₹</span><span class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="base-text">1,000<!-- -->.</span><span class="StyledBaseText-dVBfTO kGBFNJ" data-blade-component="base-text">00</span></div></div></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO ekqPVM" data-blade-component="text">Razorpay Platform Fees</p><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">2%</p></div><div data-blade-component="box" class="BaseBox-bmPWx bfJYDa"><p class="StyledBaseText-dVBfTO ekqPVM" data-blade-component="text">GST</p><p class="StyledBaseText-dVBfTO lXtvZ" data-blade-component="text">18%</p></div></div></div></div></div></div></div></div>"`;
 
 exports[`<Collapsible /> should render Collapsible on server 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -194,9 +194,10 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
 }
 
 .c12.c12.c12.c12.c12 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -211,24 +212,9 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
 }
 
 .c13.c13.c13.c13.c13 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  margin: 0;
-  padding: 0;
-}
-
-.c14.c14.c14.c14.c14 {
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -243,7 +229,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
   margin-left: 2px;
 }
 
-.c15.c15.c15.c15.c15 {
+.c14.c14.c14.c14.c14 {
   color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
   font-size: 0.875rem;
@@ -370,7 +356,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
                       ₹
                     </span>
                     <span
-                      class="c13"
+                      class="c9"
                       data-blade-component="base-text"
                     >
                       1,000
@@ -378,7 +364,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
                       .
                     </span>
                     <span
-                      class="c14"
+                      class="c13"
                       data-blade-component="base-text"
                     >
                       00
@@ -391,7 +377,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
                 data-blade-component="box"
               >
                 <p
-                  class="c15"
+                  class="c14"
                   data-blade-component="text"
                 >
                   Razorpay Platform Fees
@@ -408,7 +394,7 @@ exports[`<Collapsible /> should render Collapsible on server 2`] = `
                 data-blade-component="box"
               >
                 <p
-                  class="c15"
+                  class="c14"
                   data-blade-component="text"
                 >
                   GST
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap
index c8a61a28261..b54c771211f 100644
--- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap
+++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap
@@ -187,9 +187,10 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
 }
 
 .c11.c11.c11.c11.c11 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -204,24 +205,9 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
 }
 
 .c12.c12.c12.c12.c12 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  margin: 0;
-  padding: 0;
-}
-
-.c13.c13.c13.c13.c13 {
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -326,14 +312,14 @@ exports[`<Collapsible /> should render with CollapsibleButton 1`] = `
                     ₹
                   </span>
                   <span
-                    class="c12"
+                    class="c8"
                     data-blade-component="base-text"
                   >
                     1,000
                     .
                   </span>
                   <span
-                    class="c13"
+                    class="c12"
                     data-blade-component="base-text"
                   >
                     00
@@ -477,9 +463,10 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
 }
 
 .c12.c12.c12.c12.c12 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
-  font-weight: 700;
+  font-size: 0.625rem;
+  font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
   text-decoration-line: none;
@@ -494,24 +481,9 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
 }
 
 .c13.c13.c13.c13.c13 {
+  color: hsla(212,39%,16%,1);
   font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.875rem;
-  font-weight: 400;
-  font-style: normal;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1.25rem;
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  margin: 0;
-  padding: 0;
-}
-
-.c14.c14.c14.c14.c14 {
-  font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
-  font-size: 0.75rem;
+  font-size: 0.625rem;
   font-weight: 400;
   font-style: normal;
   -webkit-text-decoration-line: none;
@@ -704,14 +676,14 @@ exports[`<Collapsible /> should render with CollapsibleLink 1`] = `
                     ₹
                   </span>
                   <span
-                    class="c13"
+                    class="c9"
                     data-blade-component="base-text"
                   >
                     1,000
                     .
                   </span>
                   <span
-                    class="c14"
+                    class="c13"
                     data-blade-component="base-text"
                   >
                     00
diff --git a/packages/blade/src/components/index.ts b/packages/blade/src/components/index.ts
index e749c0fa414..c7b26bca876 100644
--- a/packages/blade/src/components/index.ts
+++ b/packages/blade/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './Amount';
 export * from './Accordion';
 export * from './Badge';
 export * from './BladeProvider';
diff --git a/packages/blade/src/utils/objectKeysWithType.ts b/packages/blade/src/utils/objectKeysWithType.ts
new file mode 100644
index 00000000000..3a8f9c13a09
--- /dev/null
+++ b/packages/blade/src/utils/objectKeysWithType.ts
@@ -0,0 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function objectKeysWithType<T extends Record<any, any>>(obj: T): (keyof T)[] {
+  return Object.keys(obj) as (keyof T)[];
+}
+
+export { objectKeysWithType };
diff --git a/packages/blade/tsconfig.json b/packages/blade/tsconfig.json
index d856bf5869f..4d7250d174e 100644
--- a/packages/blade/tsconfig.json
+++ b/packages/blade/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.json",
+  // "include": ["src"],
   "include": [
     "src/components/index.ts",
     "src/tokens/index.ts",