redesign take 2 complete

fix artefacts from previous dessign

apps/mobile/src/styles/typography.ts

@@ -1,53 +1,54 @@
 /**
- * FitAI Typography System
- * Minimalist typography with clear hierarchy using system fonts
+ * FitAI Typography System - BOLD MODERN
+ * High-impact typography with clear hierarchy using system fonts
  */
 
 import { TextStyle } from "react-native";
 
 /**
- * Font Sizes
- * Refined scale with fewer sizes for clearer hierarchy
+ * Font Sizes - Larger for bold impact
  */
 export const fontSize = {
-  xs: 11,
-  sm: 13,
-  base: 15,
-  md: 17, // Body emphasis
-  lg: 20,
-  xl: 24,
-  "2xl": 28,
-  "3xl": 34,
-  "4xl": 40,
+  xs: 12,
+  sm: 14,
+  base: 16,
+  md: 18, // Body emphasis
+  lg: 22,
+  xl: 26,
+  "2xl": 32,
+  "3xl": 40,
+  "4xl": 52,
+  "5xl": 64,
 } as const;
 
 /**
- * Font Weights
+ * Font Weights - Emphasize bold
  */
 export const fontWeight = {
   regular: "400" as TextStyle["fontWeight"],
   medium: "500" as TextStyle["fontWeight"],
   semibold: "600" as TextStyle["fontWeight"],
   bold: "700" as TextStyle["fontWeight"],
+  extrabold: "800" as TextStyle["fontWeight"],
 } as const;
 
 /**
  * Line Heights
  */
 export const lineHeight = {
-  tight: 1.2,
-  normal: 1.5,
-  relaxed: 1.7,
+  tight: 1.15,
+  normal: 1.4,
+  relaxed: 1.6,
 } as const;
 
 /**
  * Letter Spacing
  */
 export const letterSpacing = {
-  tight: -0.5,
+  tight: -1,
   normal: 0,
   wide: 0.5,
-  wider: 1,
+  wider: 1.5,
 } as const;
 
 /**
@@ -58,11 +59,14 @@ export interface TypographyPresets {
   h1: TextStyle;
   h2: TextStyle;
   h3: TextStyle;
+  h4: TextStyle;
   body: TextStyle;
   bodyEmphasis: TextStyle;
   label: TextStyle;
   stat: TextStyle;
+  statLarge: TextStyle;
   caption: TextStyle;
+  button: TextStyle;
 }
 
 export const createTypographyPresets = (
@@ -70,25 +74,33 @@ export const createTypographyPresets = (
   textSecondary: string,
   textTertiary: string,
 ): TypographyPresets => ({
-  // Display Text (Screen Titles)
+  // Display Text (Screen Titles) - Extra Bold
   h1: {
-    fontSize: fontSize["3xl"],
-    fontWeight: fontWeight.bold,
+    fontSize: fontSize["4xl"],
+    fontWeight: fontWeight.extrabold,
     letterSpacing: letterSpacing.tight,
-    lineHeight: fontSize["3xl"] * lineHeight.tight,
+    lineHeight: fontSize["4xl"] * lineHeight.tight,
     color: textPrimary,
   },
 
-  // Section Headers
+  // Section Headers - Bold
   h2: {
-    fontSize: fontSize.xl,
+    fontSize: fontSize["2xl"],
+    fontWeight: fontWeight.bold,
+    letterSpacing: -0.5,
+    color: textPrimary,
+  },
+
+  // Card Titles - Semibold
+  h3: {
+    fontSize: fontSize.lg,
     fontWeight: fontWeight.semibold,
     letterSpacing: -0.3,
     color: textPrimary,
   },
 
-  // Card Titles
-  h3: {
+  // Small Headers
+  h4: {
     fontSize: fontSize.md,
     fontWeight: fontWeight.semibold,
     color: textPrimary,
@@ -112,17 +124,27 @@ export const createTypographyPresets = (
 
   // Labels (uppercase, spaced)
   label: {
-    fontSize: fontSize.sm,
-    fontWeight: fontWeight.medium,
-    letterSpacing: letterSpacing.wide,
+    fontSize: fontSize.xs,
+    fontWeight: fontWeight.semibold,
+    letterSpacing: letterSpacing.wider,
     textTransform: "uppercase",
     color: textTertiary,
   },
 
-  // Stats/Numbers
+  // Stats/Numbers - Bold Large
   stat: {
-    fontSize: fontSize["2xl"],
+    fontSize: fontSize["3xl"],
     fontWeight: fontWeight.bold,
+    letterSpacing: -1,
+    color: textPrimary,
+  },
+
+  // Large Stats (Hero numbers)
+  statLarge: {
+    fontSize: fontSize["5xl"],
+    fontWeight: fontWeight.extrabold,
+    letterSpacing: -2,
+    lineHeight: fontSize["5xl"] * lineHeight.tight,
     color: textPrimary,
   },
 
@@ -132,6 +154,13 @@ export const createTypographyPresets = (
     fontWeight: fontWeight.regular,
     color: textTertiary,
   },
+
+  // Button Text
+  button: {
+    fontSize: fontSize.base,
+    fontWeight: fontWeight.bold,
+    letterSpacing: 0.5,
+  },
 });
 
 /**