diff --git a/apps/mobile/app/common/design/font.ts b/apps/mobile/app/common/design/font.ts
new file mode 100644
index 000000000..a25787b81
--- /dev/null
+++ b/apps/mobile/app/common/design/font.ts
@@ -0,0 +1,24 @@
+export const FontSizes = {
+  XXS: 10,
+  XS: 12,
+  SM: 14,
+  MD: 16,
+  LG: 18,
+  XL: 20,
+  XXL: 32
+};
+
+export const FontFamily = {
+  REGULAR: "Inter-Regular", // 400
+  MEDIUM: "Inter-Medium", // 500
+  SEMI_BOLD: "Inter-SemiBold", // 600
+  BOLD: "Inter-Bold" // 700
+};
+
+export const getLineHeight = (
+  fontSize: keyof typeof FontSizes,
+  type: 1 | 2
+) => {
+  if (type === 1) return FontSizes[fontSize];
+  if (type === 2) return (FontSizes[fontSize] / 100) * 150;
+};
diff --git a/apps/mobile/app/common/design/spacing.ts b/apps/mobile/app/common/design/spacing.ts
new file mode 100644
index 000000000..ffd30f860
--- /dev/null
+++ b/apps/mobile/app/common/design/spacing.ts
@@ -0,0 +1,21 @@
+export const Spacing = {
+  LEVEL_0: 4,
+  LEVEL_1: 8,
+  LEVEL_2: 12,
+  LEVEL_3: 16,
+  LEVEL_4: 20,
+  LEVEL_5: 24,
+  LEVEL_6: 28,
+  LEVEL_7: 32,
+  LEVEL_8: 40
+};
+
+export const Radius = {
+  XXS: 4,
+  XS: 8,
+  S: 12,
+  MD: 16,
+  LG: 20,
+  LG_2: 32,
+  XXL: 40
+};
diff --git a/apps/mobile/app/components/ui/typography/heading.tsx b/apps/mobile/app/components/ui/typography/heading.tsx
index a1ea7319f..ea5bc20e4 100644
--- a/apps/mobile/app/components/ui/typography/heading.tsx
+++ b/apps/mobile/app/components/ui/typography/heading.tsx
@@ -19,21 +19,26 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Platform, Text, TextProps, ViewStyle } from "react-native";
+import { Text, TextProps, ViewStyle } from "react-native";
 import { AppFontSize } from "../../../utils/size";
+import { FontFamily, FontSizes } from "../../../common/design/font";
+
 interface HeadingProps extends TextProps {
   color?: string;
+  /**
+   * @deprecated Use fontSize prop instead
+   */
   size?: number;
   extraBold?: boolean;
+  fontSize?: keyof typeof FontSizes;
+  fontFamily?: keyof typeof FontFamily;
 }
 
 const extraBoldStyle = {
-  fontFamily: Platform.OS === "android" ? "Inter-Bold" : undefined,
-  fontWeight: Platform.OS === "ios" ? "800" : undefined
+  fontFamily: FontFamily.BOLD
 };
 const boldStyle = {
-  fontFamily: Platform.OS === "android" ? "Inter-SemiBold" : undefined,
-  fontWeight: Platform.OS === "ios" ? "600" : undefined
+  fontFamily: FontFamily.SEMI_BOLD
 };
 
 const Heading = ({
@@ -41,23 +46,29 @@ const Heading = ({
   size = AppFontSize.xl,
   style,
   extraBold,
+  fontSize,
+  fontFamily,
   ...restProps
 }: HeadingProps) => {
   const { colors } = useThemeColors();
 
   return (
     <Text
-      allowFontScaling={true}
       {...restProps}
+      allowFontScaling={true}
       style={[
         {
-          fontSize: size || AppFontSize.xl,
+          fontSize: fontSize ? FontSizes[fontSize] : size || AppFontSize.xl,
           color: color || colors.primary.heading
         },
-        extraBold ? (extraBoldStyle as ViewStyle) : (boldStyle as ViewStyle),
+        fontFamily
+          ? { fontFamily: FontFamily[fontFamily] }
+          : extraBold
+            ? (extraBoldStyle as ViewStyle)
+            : (boldStyle as ViewStyle),
         style
       ]}
-    ></Text>
+    />
   );
 };
 
diff --git a/apps/mobile/app/components/ui/typography/paragraph.tsx b/apps/mobile/app/components/ui/typography/paragraph.tsx
index 5f7184056..096e796bb 100644
--- a/apps/mobile/app/components/ui/typography/paragraph.tsx
+++ b/apps/mobile/app/components/ui/typography/paragraph.tsx
@@ -21,14 +21,23 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { Text, TextProps } from "react-native";
 import { AppFontSize } from "../../../utils/size";
+import { FontFamily, FontSizes } from "../../../common/design/font";
+
 interface ParagraphProps extends TextProps {
   color?: string;
+  /**
+   * @deprecated Use fontSize prop instead
+   */
   size?: number;
+  fontSize?: keyof typeof FontSizes;
+  fontFamily?: keyof typeof FontFamily;
 }
 const Paragraph = ({
   color,
   size = AppFontSize.sm,
   style,
+  fontSize,
+  fontFamily,
   ...restProps
 }: ParagraphProps) => {
   const { colors } = useThemeColors();
@@ -36,12 +45,12 @@ const Paragraph = ({
   return (
     <Text
       {...restProps}
+      allowFontScaling={true}
       style={[
         {
-          fontSize: size || AppFontSize.sm,
+          fontSize: fontSize ? FontSizes[fontSize] : size || AppFontSize.xl,
           color: color || colors.primary.paragraph,
-          fontWeight: "400",
-          fontFamily: "Inter-Regular"
+          fontFamily: fontFamily ? FontFamily[fontFamily] : FontFamily.REGULAR
         },
         style
       ]}
diff --git a/apps/mobile/app/services/settings.ts b/apps/mobile/app/services/settings.ts
index 2d242bdb4..ace114b4f 100644
--- a/apps/mobile/app/services/settings.ts
+++ b/apps/mobile/app/services/settings.ts
@@ -27,7 +27,7 @@ import {
   useSettingStore
 } from "../stores/use-setting-store";
 import { NotesnookModule } from "../utils/notesnook-module";
-import { scale, updateSize } from "../utils/size";
+import { scale } from "../utils/size";
 import { DatabaseLogger } from "../common/database";
 import { useUserStore } from "../stores/use-user-store";
 import ScreenGuardModule from "react-native-screenguard";
@@ -123,7 +123,6 @@ function init() {
     scale.fontScale = settings.fontScale;
   }
 
-  updateSize();
   useSettingStore.getState().setSettings({ ...settings });
   migrateAppLock();
   setPrivacyScreen(settings);
diff --git a/apps/mobile/app/utils/size/index.js b/apps/mobile/app/utils/size/index.js
index f4cb1594a..17eb064ca 100644
--- a/apps/mobile/app/utils/size/index.js
+++ b/apps/mobile/app/utils/size/index.js
@@ -19,10 +19,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Dimensions, PixelRatio, Platform } from "react-native";
 import { DDS } from "../../services/device-detection";
+import { FontSizes } from "../../common/design/font";
+import { Radius } from "../../common/design/spacing";
 
 export const scale = {
   fontScale: 1
 };
+
 let windowSize = Dimensions.get("window");
 let adjustedWidth = windowSize.width * PixelRatio.get();
 let adjustedHeight = windowSize.height * PixelRatio.get();
@@ -37,77 +40,64 @@ export const getDeviceSize = () => {
   return Platform.isPad ? diagonalSize + 2 : diagonalSize;
 };
 
-const getDpi = (pd) => {
-  return 160 * pd;
-};
-const correction = (size, multiplier) => {
-  let dSize = getDeviceSize();
-  if (dSize <= 4.5 && pixelDensity <= 3) {
-    return size * 0.85;
-  } else if (dSize <= 5.3 && pixelDensity <= 3) {
-    return size * 0.93;
-  } else if (dSize > 5.3 && dSize < 7 && pixelDensity < 3 && !DDS.isTab) {
-    if (Platform.OS === "ios") {
-      return size;
-    }
-    return size * 0.97;
-  } else if (dSize <= 7 && pixelDensity >= 3 && !DDS.isTab) {
-    return size * 0.98;
-  } else if (dSize >= 6.5 && dSize <= 7.2 && DDS.isTab) {
-    return size * multiplier;
-  } else if (dSize > 7.2 && dSize <= 8.5 && DDS.isTab) {
-    return size * 0.92;
-  } else if (dSize > 8.5 && dSize <= 9.2 && DDS.isTab) {
-    return size * 0.92;
-  } else if (dSize > 9.2 && dSize <= 10.5 && DDS.isTab) {
-    return size * 0.95;
-  } else if (dSize > 10.5) {
-    return size * 1;
-  } else {
-    return size;
-  }
-};
+// const getDpi = (pd) => {
+//   return 160 * pd;
+// };
+// const correction = (size, multiplier) => {
+//   let dSize = getDeviceSize();
+//   if (dSize <= 4.5 && pixelDensity <= 3) {
+//     return size * 0.85;
+//   } else if (dSize <= 5.3 && pixelDensity <= 3) {
+//     return size * 0.93;
+//   } else if (dSize > 5.3 && dSize < 7 && pixelDensity < 3 && !DDS.isTab) {
+//     if (Platform.OS === "ios") {
+//       return size;
+//     }
+//     return size * 0.97;
+//   } else if (dSize <= 7 && pixelDensity >= 3 && !DDS.isTab) {
+//     return size * 0.98;
+//   } else if (dSize >= 6.5 && dSize <= 7.2 && DDS.isTab) {
+//     return size * multiplier;
+//   } else if (dSize > 7.2 && dSize <= 8.5 && DDS.isTab) {
+//     return size * 0.92;
+//   } else if (dSize > 8.5 && dSize <= 9.2 && DDS.isTab) {
+//     return size * 0.92;
+//   } else if (dSize > 9.2 && dSize <= 10.5 && DDS.isTab) {
+//     return size * 0.95;
+//   } else if (dSize > 10.5) {
+//     return size * 1;
+//   } else {
+//     return size;
+//   }
+// };
 export const normalize = (size) => {
-  let pd = pixelDensity;
-  if (pd === 1 || pd < 1) {
-    return correction(size, 0.82);
-  } else if (pd > 1 && pd <= 1.5) {
-    return correction(size, 0.7);
-  } else if (pd > 1.5 && pd <= 2) {
-    return correction(size, 0.9);
-  } else if (pd > 2 && pd <= 3) {
-    return correction(size, 0.93);
-  } else if (pd > 3) {
-    return correction(size, 1);
-  }
+  return size;
+  // let pd = pixelDensity;
+  // if (pd === 1 || pd < 1) {
+  //   return correction(size, 0.82);
+  // } else if (pd > 1 && pd <= 1.5) {
+  //   return correction(size, 0.7);
+  // } else if (pd > 1.5 && pd <= 2) {
+  //   return correction(size, 0.9);
+  // } else if (pd > 2 && pd <= 3) {
+  //   return correction(size, 0.93);
+  // } else if (pd > 3) {
+  //   return correction(size, 1);
+  // }
 };
 
 function getSize() {
   return {
-    xxxs: normalize(11.5) * scale.fontScale,
-    xxs: normalize(12.5) * scale.fontScale,
-    xs: normalize(13.5) * scale.fontScale,
-    sm: normalize(14.5) * scale.fontScale,
-    md: normalize(16.5) * scale.fontScale,
-    lg: normalize(20) * scale.fontScale,
-    xl: normalize(22) * scale.fontScale,
-    xxl: normalize(25) * scale.fontScale,
-    xxxl: normalize(30) * scale.fontScale
+    xxxs: FontSizes.XXS,
+    xxs: FontSizes.XXS,
+    xs: FontSizes.XX,
+    sm: FontSizes.SM,
+    md: FontSizes.MD,
+    lg: FontSizes.LG,
+    xl: FontSizes.XL,
+    xxl: FontSizes.XXL,
+    xxxl: FontSizes.XXL
   };
 }
-
 export const AppFontSize = getSize();
-
-export function updateSize() {
-  const newSize = getSize();
-  for (const key in AppFontSize) {
-    AppFontSize[key] = newSize[key];
-  }
-  ph = normalize(10) * scale.fontScale;
-  pv = normalize(10) * scale.fontScale;
-}
-
-export const defaultBorderRadius = 8; // border radius
-export var ph = normalize(10); // padding horizontal
-export var pv = normalize(10); // padding vertical
-export const opacity = 0.5; // active opacity
+export const defaultBorderRadius = Radius.S; // border radius
diff --git a/apps/mobile/app/utils/styles.ts b/apps/mobile/app/utils/styles.ts
index 0c183ee54..6059554e9 100644
--- a/apps/mobile/app/utils/styles.ts
+++ b/apps/mobile/app/utils/styles.ts
@@ -19,6 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 export const DefaultAppStyles = {
   GAP: 16,
   GAP_SMALL: 8,
-  GAP_VERTICAL: 10,
+  GAP_VERTICAL: 12,
   GAP_VERTICAL_SMALL: 6
 };