@xetwa/design-system 1.0.35 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xetwa/design-system",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/IconButton/IconButton.tsx

@@ -161,11 +161,11 @@ export const IconButton = React.forwardRef<React.ElementRef<typeof Pressable>, I
             strokeWidth={text ? 2.5 : 3}
           />
         ) : (
-          <Typography style={{ color: 'red', fontSize: 10 }}>Missing</Typography>
+          <Typography variant="caption" style={{ color: 'red' }}>Missing</Typography>
         )}
 
         {!!text && (
-          <Typography style={[styles.text, { color: getTextColor(), fontSize: scaleText(size === 'sm' ? 10 : 12), marginTop: scale(4) }]}>
+          <Typography variant={size === 'sm' ? 'caption' : 'bodySm'} style={[styles.text, { color: getTextColor(), marginTop: scale(4) }]}>
             {text}
           </Typography>
         )}

package/src/components/Buttons/JourneyButton/JourneyButton.tsx

@@ -138,13 +138,19 @@ export const JourneyButton = React.forwardRef<React.ElementRef<typeof Pressable>
           
           <View style={styles.textContainer}>
             <Typography 
+              variant="label"
               numberOfLines={1} 
               adjustsFontSizeToFit 
-              style={[styles.subtitle, { color: getTextColor(), fontSize: scaleText(10), marginBottom: scale(4) }]}
+              style={[styles.subtitle, { color: getTextColor(), fontSize: scaleText(11), lineHeight: scaleText(16), marginBottom: scale(4) }]}
             >
               {subtitle}
             </Typography>
-            <Typography style={[styles.title, { color: getTextColor(), fontSize: scaleText(20) }]}>
+            <Typography 
+              variant="btnLg" 
+              numberOfLines={1} 
+              adjustsFontSizeToFit 
+              style={[styles.title, { color: getTextColor(), fontSize: scaleText(17), lineHeight: scaleText(22) }]}
+            >
               {title}
             </Typography>
           </View>

package/src/components/Buttons/MainButton/MainButton.tsx

@@ -140,11 +140,6 @@ export const MainButton = React.forwardRef<React.ElementRef<typeof Pressable>, M
     const textStyles: TextStyle[] = [
       styles.textBase,
       {
-        fontSize: {
-          sm: scaleText(12),
-          md: scaleText(16),
-          lg: scaleText(18),
-        }[size],
         letterSpacing: {
           sm: scale(0.48),
           md: scale(0.64),
@@ -243,21 +238,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textTransform: 'uppercase',
   },
-  text_sm: {
-    fontSize: 12,
-
-    letterSpacing: 12 * 0.04, // 0.48
-  },
-  text_md: {
-    fontSize: 16,
 
-    letterSpacing: 16 * 0.04, // 0.64
-  },
-  text_lg: {
-    fontSize: 18,
-
-    letterSpacing: 18 * 0.04, // 0.72
-  },
 
   textHidden: {
     color: 'transparent',

package/src/components/Buttons/WordChip/WordChip.tsx

@@ -105,6 +105,15 @@ export const WordChip = ({
   // Press state visual adjustments
   const showPressed = isPressed && !isDisabled;
 
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'lg': return 'btnLg';
+      case 'sm': return 'bodyMd';
+      case 'md':
+      default: return 'bodyLg';
+    }
+  };
+
   return (
     <Animated.View style={[{ transform: [{ scale: scaleAnim }] }, width ? { width } : null, style]}>
       <Pressable
@@ -136,12 +145,9 @@ export const WordChip = ({
             },
             (fullWidth || width) ? { width: '100%' } : null
           ]}>
-            <Typography style={[
+            <Typography variant={getTypographyVariant()} style={[
               styles.text,
-              { 
-                color: currentStyles.text,
-                fontSize: scaleText(size === 'lg' ? 17 : size === 'sm' ? 13 : 15),
-              }
+              { color: currentStyles.text }
             ]}>
               {word}
             </Typography>

package/src/components/Cards/BoardingPassCard/BoardingPassCard.tsx

@@ -158,7 +158,7 @@ export const BoardingPassCard = ({
         ]} />
 
         <View style={[styles.headerRow, { marginBottom: scale(16) }]}>
-          <Typography style={[styles.headerText, { fontSize: scaleText(10) }]}>CARTÃO DE EMBARQUE</Typography>
+          <Typography variant="caption" style={[styles.headerText]}>CARTÃO DE EMBARQUE</Typography>
           <View style={styles.headerPlaneContainer}>
             <Plane stroke={theme.colors.white} strokeWidth={2.2} size={scale(22)} />
           </View>
@@ -166,8 +166,8 @@ export const BoardingPassCard = ({
 
         <View style={styles.routeRow}>
           <View style={styles.cityCol}>
-            <Typography style={[styles.cityCode, { fontSize: scaleText(22) }]}>{originCode}</Typography>
-            <Typography style={[styles.cityName, { fontSize: scaleText(9) }]}>{originName}</Typography>
+            <Typography variant="h1" style={[styles.cityCode]}>{originCode}</Typography>
+            <Typography variant="caption" style={[styles.cityName]}>{originName}</Typography>
           </View>
 
           <View style={[styles.flightLineContainer, { height: scale(30), marginHorizontal: scale(12) }]}>
@@ -178,8 +178,8 @@ export const BoardingPassCard = ({
           </View>
 
           <View style={[styles.cityCol, { alignItems: 'flex-end' }]}>
-            <Typography style={[styles.cityCode, { fontSize: scaleText(22) }]}>{destCode}</Typography>
-            <Typography style={[styles.cityName, { fontSize: scaleText(9) }]}>{destName}</Typography>
+            <Typography variant="h1" style={[styles.cityCode]}>{destCode}</Typography>
+            <Typography variant="caption" style={[styles.cityName]}>{destName}</Typography>
           </View>
         </View>
       </View>
@@ -205,8 +205,8 @@ export const BoardingPassCard = ({
             {flagIconNode ? flagIconNode : <Flag countryCode={countryName} size={scale(40)} />}
           </View>
           <View style={styles.countryContent}>
-            <Typography style={[styles.countryName, { fontSize: scaleText(17) }]}>{countryName}</Typography>
-            <Typography style={[styles.countrySubtitle, { fontSize: scaleText(11) }]}>{countrySubtitle}</Typography>
+            <Typography variant="h2" style={[styles.countryName]}>{countryName}</Typography>
+            <Typography variant="bodySm" style={[styles.countrySubtitle]}>{countrySubtitle}</Typography>
           </View>
         </View>
 
@@ -220,12 +220,12 @@ export const BoardingPassCard = ({
 
         <View style={[styles.footerRow, { gap: scale(14) }]}>
           <View style={styles.footerCol}>
-            <Typography style={[styles.footerLabel, { fontSize: scaleText(9) }]}>MÓDULOS</Typography>
-            <Typography style={[styles.footerValue, { fontSize: scaleText(16) }]}>{modulesCount}</Typography>
+            <Typography variant="caption" style={[styles.footerLabel]}>MÓDULOS</Typography>
+            <Typography variant="h3" style={[styles.footerValue]}>{modulesCount}</Typography>
           </View>
           <View style={styles.footerCol}>
-            <Typography style={[styles.footerLabel, { fontSize: scaleText(9) }]}>FOCO</Typography>
-            <Typography style={[styles.footerValue, { fontSize: scaleText(16) }]}>{focusText}</Typography>
+            <Typography variant="caption" style={[styles.footerLabel]}>FOCO</Typography>
+            <Typography variant="h3" style={[styles.footerValue]}>{focusText}</Typography>
           </View>
         </View>
       </View>
@@ -267,8 +267,6 @@ const styles = StyleSheet.create({
     transform: [{ rotate: '0deg' }],
   },
   headerText: {
-
-    fontSize: 10,
     letterSpacing: 1.2,
     textTransform: 'uppercase',
     color: 'rgba(255, 255, 255, 0.75)',
@@ -282,13 +280,9 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
   },
   cityCode: {
-
-    fontSize: 22,
     color: theme.colors.white,
   },
   cityName: {
-
-    fontSize: 9,
     color: 'rgba(255, 255, 255, 0.75)',
     marginTop: 2,
   },
@@ -345,14 +339,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   countryName: {
-
-    fontSize: 17,
     color: '#51332d',
     marginBottom: 2,
   },
   countrySubtitle: {
-
-    fontSize: 11,
     color: '#9a8478',
   },
   divider: {
@@ -370,15 +360,11 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   footerLabel: {
-
-    fontSize: 9,
     textTransform: 'uppercase',
     color: '#b9a392',
     marginBottom: 4,
   },
   footerValue: {
-
-    fontSize: 16,
     color: '#51332d',
   },
 });

package/src/components/Cards/ModuleCard/ModuleCard.tsx

@@ -164,8 +164,9 @@ export const ModuleCard = ({
   const colGap = size === 'xl' ? scale(16) : size === 'lg' ? scale(14) : isMobileScreen ? scale(8) : scale(12);
   const cardPaddingV = size === 'xl' ? scale(20) : size === 'lg' ? scale(16) : isMobileScreen ? scale(10) : scale(14);
   const cardPaddingH = size === 'xl' ? scale(20) : size === 'lg' ? scale(18) : isMobileScreen ? scale(12) : scale(15);
-  const titleFontSize = size === 'xl' ? scaleText(18) : size === 'lg' ? scaleText(16) : isMobileScreen ? scaleText(14) : scaleText(16);
-  const subtitleFontSize = size === 'xl' ? scaleText(14) : size === 'lg' ? scaleText(13) : isMobileScreen ? scaleText(10) : scaleText(12);
+  
+  const titleVariant = size === 'xl' ? 'h1' : size === 'lg' ? 'h2' : 'h3';
+  const subtitleVariant = size === 'xl' ? 'bodyLg' : size === 'lg' ? 'bodyMd' : 'bodySm';
 
   return (
     <Pressable
@@ -189,11 +190,10 @@ export const ModuleCard = ({
         </View>
 
         <View style={[styles.content, { marginLeft: colGap }]}>
-          <Typography variant="h2" style={[
+          <Typography variant={titleVariant} style={[
             styles.title,
             {
               color: titleStyleColor,
-              fontSize: titleFontSize,
               marginBottom: scale(2),
             }
           ]}>
@@ -201,16 +201,15 @@ export const ModuleCard = ({
           </Typography>
 
           {(subtitle || subtext) && (
-            <Typography variant="bodyMd" style={[
+            <Typography variant={subtitleVariant} style={[
               styles.subtitle,
               {
                 color: subtitleStyleColor,
-                fontSize: subtitleFontSize,
               }
             ]}>
               {subtitle}
               {subtitle && subtext && ' '}
-              {subtext && <Typography style={styles.subtext}>{subtext}</Typography>}
+              {subtext && <Typography variant={subtitleVariant} style={styles.subtext}>{subtext}</Typography>}
             </Typography>
           )}
         </View>
@@ -288,13 +287,9 @@ const styles = StyleSheet.create({
     borderStyle: 'dashed' as const,
   },
   title: {
-
-    fontSize: 16,
     marginBottom: 4,
   },
   subtitle: {
-
-    fontSize: 12,
   },
   subtext: {
     color: theme.colors.brown[400],

package/src/components/Cards/Passport/PassportCover.tsx

@@ -27,7 +27,7 @@ export const PassportCover = () => {
         borderRadius: scale(8)
       }]}>
 
-        <Typography style={[styles.republique, { fontSize: scaleText(12), marginBottom: scale(48) }]}>
+        <Typography variant="label" style={[styles.republique, { marginBottom: scale(48) }]}>
           RÉPUBLIQUE DE LA XETWA
         </Typography>
 
@@ -48,10 +48,10 @@ export const PassportCover = () => {
         </View>
 
         <View style={styles.titleContainer}>
-          <Typography style={[styles.title, { fontSize: scaleText(32) }]}>
+          <Typography variant="display1" style={[styles.title]}>
             PASSEPORT
           </Typography>
-          <Typography style={[styles.subtitle, { fontSize: scaleText(10), marginTop: scale(8) }]}>
+          <Typography variant="caption" style={[styles.subtitle, { marginTop: scale(8) }]}>
             FRANCOPHONIE · MONDE
           </Typography>
         </View>

package/src/components/Charts/WeeklyProgressChart/WeeklyProgressChart.tsx

@@ -34,19 +34,19 @@ export const WeeklyProgressChart = ({
   // Compute dimensions based on size variant
   let defaultMaxHeight = 80;
   let barWidth = 24;
-  let titleFontSize = 14;
-  let labelFontSize = 12;
+  let titleVariant: any = 'btnMd';
+  let labelVariant: any = 'bodySm';
 
   if (size === 'sm') {
     defaultMaxHeight = 50;
     barWidth = 16;
-    titleFontSize = 12;
-    labelFontSize = 10;
+    titleVariant = 'btnSm';
+    labelVariant = 'caption';
   } else if (size === 'lg') {
     defaultMaxHeight = 110;
     barWidth = 32;
-    titleFontSize = 16;
-    labelFontSize = 14;
+    titleVariant = 'btnLg';
+    labelVariant = 'bodyMd';
   }
 
   const finalMaxHeight = maxHeight ?? defaultMaxHeight;
@@ -77,7 +77,7 @@ export const WeeklyProgressChart = ({
     <View style={[styles.container, style]}>
       {/* Header / Title */}
       <View style={styles.header}>
-        <Typography style={[styles.title, { fontSize: scaleText(titleFontSize) }]}>
+        <Typography variant={titleVariant} style={[styles.title]}>
           {title.toUpperCase()}
           {subtitle ? ` · ${subtitle.toUpperCase()}` : ''}
         </Typography>
@@ -122,12 +122,11 @@ export const WeeklyProgressChart = ({
                 />
               </View>
               <Typography
+                variant={labelVariant}
                 style={[
                   styles.dayLabel,
                   {
                     color: labelColor,
-                    fontSize: scaleText(labelFontSize),
-
                     marginTop: scale(12),
                   }
                 ]}

package/src/components/DataDisplay/Avatar/Avatar.tsx

@@ -44,12 +44,12 @@ const SQUARE_RADIUS_MAP: Record<AvatarSize, number> = {
   xl: 22,
 };
 
-const FONT_SIZE_MAP: Record<AvatarSize, number> = {
-  xs: 12,
-  sm: 14,
-  md: 18,
-  lg: 22,
-  xl: 28,
+const VARIANT_MAP: Record<AvatarSize, any> = {
+  xs: 'bodySm',
+  sm: 'btnMd',
+  md: 'h2',
+  lg: 'h1',
+  xl: 'display1',
 };
 
 export const Avatar = ({
@@ -67,8 +67,7 @@ export const Avatar = ({
     ? pxSize / 2
     : scale(SQUARE_RADIUS_MAP[size]);
 
-  const fontSize = scaleText(FONT_SIZE_MAP[size]);
-  const lineHeight = fontSize * 1.2;
+  const typographyVariant = VARIANT_MAP[size];
 
   const containerStyles = [
     styles.container,
@@ -96,7 +95,7 @@ export const Avatar = ({
   return (
     <View style={containerStyles}>
       {initials ? (
-        <Typography style={[styles.text, { fontSize, lineHeight }]}>
+        <Typography variant={typographyVariant} style={[styles.text]}>
           {initials}
         </Typography>
       ) : null}

package/src/components/DataDisplay/Badge/Badge.tsx

@@ -70,6 +70,18 @@ export const Badge = ({
 
   const vStyles = getVariantStyles();
 
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'xs': return 'caption';
+      case 'sm': return 'caption';
+      case 'md': return 'bodySm';
+      case 'lg': return 'bodyMd';
+      case 'xl': return 'h3';
+      case 'xxl': return 'h2';
+      default: return 'caption';
+    }
+  };
+
   return (
     <View style={[
       styles.container,
@@ -78,9 +90,8 @@ export const Badge = ({
       style
     ]}>
       {typeof content === 'string' || typeof content === 'number' ? (
-        <Typography style={[
+        <Typography variant={getTypographyVariant()} style={[
           styles.text,
-          size === 'xs' ? styles.textXs : size === 'sm' ? styles.textSm : size === 'md' ? styles.textMd : size === 'lg' ? styles.textLg : size === 'xl' ? styles.textXl : styles.textXxl,
           { color: vStyles.color }
         ]}>
           {content}
@@ -125,22 +136,4 @@ const styles = StyleSheet.create({
   text: {
 
   },
-  textXs: {
-    fontSize: 9,
-  },
-  textSm: {
-    fontSize: 10,
-  },
-  textMd: {
-    fontSize: 12,
-  },
-  textLg: {
-    fontSize: 14,
-  },
-  textXl: {
-    fontSize: 16,
-  },
-  textXxl: {
-    fontSize: 18,
-  },
 });

package/src/components/DataDisplay/InstructionBubble/InstructionBubble.tsx

@@ -45,11 +45,11 @@ export const InstructionBubble = ({
           borderWidth: scale(2),
         }
       ]}>
-        <Typography style={[styles.title, { fontSize: scaleText(22), lineHeight: scaleText(28) }]}>
+        <Typography variant="h1" style={[styles.title]}>
           {title}
         </Typography>
         {subtitle && (
-          <Typography style={[styles.subtitle, { fontSize: scaleText(14), marginTop: scale(4) }]}>
+          <Typography variant="bodyMd" style={[styles.subtitle, { marginTop: scale(4) }]}>
             {subtitle}
           </Typography>
         )}

package/src/components/DataDisplay/LevelBadge/LevelBadge.tsx

@@ -75,13 +75,13 @@ export const LevelBadge = ({
       />
 
       {/* Level Code */}
-      <Typography style={[styles.levelText, isLarge ? styles.levelTextLg : styles.levelTextSm]}>
+      <Typography variant={isLarge ? 'display1' : 'btnMd'} style={[styles.levelText]}>
         {levelCode}
       </Typography>
 
       {/* Optional Descriptive Label for Large Badge */}
       {isLarge && (
-        <Typography style={[styles.labelText, { color: config.color }]}>
+        <Typography variant="btnMd" style={[styles.labelText, { color: config.color }]}>
           {config.label}
         </Typography>
       )}
@@ -98,21 +98,8 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
   },
   levelText: {
-
     color: '#51332d',
-    lineHeight: 28, // Matches large font alignment
-  },
-  levelTextLg: {
-    fontSize: 28,
-    lineHeight: 30,
-  },
-  levelTextSm: {
-    fontSize: 14,
-    lineHeight: 16,
   },
   labelText: {
-
-    fontSize: 14,
-    lineHeight: 16,
   },
 });

package/src/components/DataDisplay/NumberBadge/NumberBadge.tsx

@@ -29,8 +29,7 @@ export const NumberBadge = ({ value, selected = false, correct = false }: Number
       alignItems: 'center',
       justifyContent: 'center',
     }}>
-      <Typography style={{
-        fontSize: 14,
+      <Typography variant="btnMd" style={{
         color: textColor,
       }}>
         {value}

package/src/components/DataDisplay/StatBadge/StatBadge.tsx

@@ -103,7 +103,7 @@ export const StatBadge = ({
       <View style={styles.iconContainer}>
         {renderIcon()}
       </View>
-      <Typography style={[styles.text, { fontSize: scaleText(16) }]}>
+      <Typography variant="h3" style={[styles.text]}>
         {value}
       </Typography>
     </View>

package/src/components/DataDisplay/Tag/Tag.tsx

@@ -72,6 +72,16 @@ export const Tag = ({
 
   const vStyles = getVariantStyles();
 
+  const getTypographyVariant = () => {
+    switch (size) {
+      case 'xs': return 'caption';
+      case 'sm': return 'caption';
+      case 'md': return 'caption';
+      case 'lg': return 'label';
+      default: return 'caption';
+    }
+  };
+
   return (
     <View style={[
       styles.container,
@@ -80,9 +90,8 @@ export const Tag = ({
       style
     ]}>
       {icon && <View style={styles.iconContainer}>{icon}</View>}
-      <Typography style={[
+      <Typography variant={getTypographyVariant()} style={[
         styles.text,
-        size === 'xs' ? styles.textXs : size === 'sm' ? styles.textSm : size === 'md' ? styles.textMd : styles.textLg,
         { color: vStyles.color }
       ]}>
         {label}
@@ -119,29 +128,8 @@ const styles = StyleSheet.create({
     borderRadius: 12,
   },
   text: {
-
     textTransform: 'uppercase',
   },
-  textXs: {
-    fontSize: 9,
-    lineHeight: 11,
-    letterSpacing: 0.54,
-  },
-  textSm: {
-    fontSize: 10,
-    lineHeight: 12,
-    letterSpacing: 0.6, // 10 * 0.06em
-  },
-  textMd: {
-    fontSize: 11,
-    lineHeight: 13,
-    letterSpacing: 0.66, // 11 * 0.06em
-  },
-  textLg: {
-    fontSize: 12,
-    lineHeight: 14,
-    letterSpacing: 0.72,
-  },
   iconContainer: {
     marginRight: 4,
   }

package/src/components/Feedback/FeedbackBottomSheet/FeedbackBottomSheet.tsx

@@ -80,15 +80,15 @@ export const FeedbackBottomSheet: React.FC<FeedbackBottomSheetProps> = ({
           <Yaya variant={finalMascotVariant} avatarOnly size={64} />
         </View>
         <View style={styles.textContainer}>
-          <Typography style={[styles.title, { color: borderColor }]}>{title}</Typography>
-          <Typography style={[styles.subtitle, { color: borderColor }]}>{subtitle}</Typography>
+          <Typography variant="h1" style={[styles.title, { color: borderColor }]}>{title}</Typography>
+          <Typography variant="bodyLg" style={[styles.subtitle, { color: borderColor }]}>{subtitle}</Typography>
         </View>
       </View>
 
       {!isCorrect && correctAnswer && (
         <View style={styles.correctAnswerBox}>
-          <Typography style={styles.correctAnswerLabel}>RESPOSTA CERTA</Typography>
-          <Typography style={styles.correctAnswerText}>{correctAnswer}</Typography>
+          <Typography variant="label" style={styles.correctAnswerLabel}>RESPOSTA CERTA</Typography>
+          <Typography variant="h1" style={styles.correctAnswerText}>{correctAnswer}</Typography>
         </View>
       )}
 
@@ -132,9 +132,6 @@ const styles = StyleSheet.create({
     marginBottom: 2,
   },
   subtitle: {
-
-    fontSize: 15,
-
     marginTop: 2,
   },
   button: {
@@ -153,16 +150,10 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(207, 91, 72, 0.15)', // light red tint border
   },
   correctAnswerLabel: {
-
-    fontSize: 11,
-
     color: '#cf5b48',
-    letterSpacing: 0.8,
-    textTransform: 'uppercase',
     marginBottom: 4,
   },
   correctAnswerText: {
-    ...theme.typography.h1,
     color: theme.colors.brown[700],
   },
   buttonShadowCorrect: {

package/src/components/Headers/CountryHeader/CountryHeader.tsx

@@ -66,7 +66,7 @@ export const CountryHeader = ({
         {/* Top Bar: Back Button e Header Text */}
         <View style={[styles.topRow, { marginBottom: scale(16) }]}>
           <BackButton onPress={onBackPress} variant="glass" />
-          <Typography style={[styles.headerText, { fontSize: scaleText(13), lineHeight: scaleText(16), marginLeft: scale(12) }]}>
+          <Typography variant="label" style={[styles.headerText, { marginLeft: scale(12) }]}>
             {headerText}
           </Typography>
         </View>
@@ -77,10 +77,10 @@ export const CountryHeader = ({
             <Flag countryCode={countryCode} size={scale(56)} />
           </View>
           <View style={[styles.textContainer, { marginLeft: scale(12) }]}>
-            <Typography style={[styles.title, { fontSize: scaleText(26), lineHeight: scaleText(30) }]}>
+            <Typography variant="display1" style={[styles.title]}>
               {title}
             </Typography>
-            <Typography style={[styles.subtitle, { fontSize: scaleText(13), lineHeight: scaleText(16), marginTop: scale(2) }]}>
+            <Typography variant="bodyMd" style={[styles.subtitle, { marginTop: scale(2) }]}>
               {subtitle}
             </Typography>
           </View>

package/src/components/Headers/ProfileHeader/ProfileHeader.tsx

@@ -87,14 +87,16 @@ export const ProfileHeader = ({
             
             <View style={styles.userTexts}>
               <Typography 
-                style={[styles.userName, { fontSize: scaleText(26), lineHeight: scaleText(30) }]}
+                variant="display1"
+                style={[styles.userName]}
                 numberOfLines={1}
                 adjustsFontSizeToFit
               >
                 {userName}
               </Typography>
               <Typography 
-                style={[styles.userSubtitle, { fontSize: scaleText(14.5), lineHeight: scaleText(18), marginTop: scale(4) }]}
+                variant="bodyLg"
+                style={[styles.userSubtitle, { marginTop: scale(4) }]}
               >
                 {userSubtitle}
               </Typography>
@@ -134,19 +136,20 @@ export const ProfileHeader = ({
             ) : null}
             <View style={styles.progressCardTexts}>
               <Typography 
-                style={[styles.progressTitle, { fontSize: scaleText(16.5), lineHeight: scaleText(20) }]}
+                variant="h3"
+                style={[styles.progressTitle]}
                 numberOfLines={1}
                 adjustsFontSizeToFit
               >
                 {countryName} · {level}
               </Typography>
-              <Typography style={[styles.progressSubtitle, { fontSize: scaleText(13.5), lineHeight: scaleText(17), marginTop: scale(2) }]}>
+              <Typography variant="bodyMd" style={[styles.progressSubtitle, { marginTop: scale(2) }]}>
                 {moduleSubtitle}
               </Typography>
             </View>
           </View>
 
-          <Typography style={[styles.progressPercent, { fontSize: scaleText(22), lineHeight: scaleText(26) }]}>
+          <Typography variant="h1" style={[styles.progressPercent]}>
             {progressPercentage}%
           </Typography>
         </View>

package/src/components/Inputs/FillInTheBlank/FillInTheBlank.tsx

@@ -118,7 +118,7 @@ export const FillInTheBlank = ({
                 backgroundColor,
                 color: textColor,
                 borderRadius: scale(10),
-                fontSize: scaleText(16),
+                fontSize: theme.typography.bodyLg.fontSize,
                 paddingHorizontal: scale(12),
                 borderWidth: 2,
               }
@@ -141,11 +141,10 @@ export const FillInTheBlank = ({
             paddingHorizontal: scale(12),
           }
         ]}>
-          <Typography style={[
+          <Typography variant="btnLg" style={[
             styles.blankText,
             {
               color: isFilled ? textColor : theme.colors.brown[400],
-              fontSize: scaleText(16),
             }
           ]}>
             {value || (part as any).placeholder || ''}
@@ -216,7 +215,8 @@ export const FillInTheBlank = ({
         return (
           <Typography
             key={`text-${index}-${wIdx}`}
-            style={[styles.staticText, { fontSize: scaleText(17.5), marginRight: scale(6), marginVertical: scale(4) }]}
+            variant="h2"
+            style={[styles.staticText, { marginRight: scale(6), marginVertical: scale(4) }]}
           >
             {word}
           </Typography>
@@ -231,7 +231,7 @@ export const FillInTheBlank = ({
     <View style={[styles.container, style]}>
       {/* Opcional: Texto de instrução no topo */}
       {!!instruction && (
-        <Typography style={[styles.instructionText, { fontSize: scaleText(16), marginBottom: scale(16) }]}>
+        <Typography variant="h3" style={[styles.instructionText, { marginBottom: scale(16) }]}>
           {instruction}
         </Typography>
       )}

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -104,9 +104,9 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
     return (
       <View style={[styles.root, style]}>
         {label && (
-          <Typography style={[
+          <Typography variant="bodySm" style={[
             styles.label, 
-            { fontSize: scaleText(12), marginBottom: scale(6) },
+            { marginBottom: scale(6) },
             disabled && { color: theme.colors.brown[400] }
           ]}>
             {label}
@@ -131,7 +131,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
             style={[
               styles.input,
               {
-                fontSize: scaleText(15),
+                fontSize: theme.typography.bodyLg.fontSize,
               },
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               Platform.OS === 'web' && ({ outlineStyle: 'none' } as any),
@@ -144,7 +144,7 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
         </View>
 
         {messageText && (
-          <Typography style={[styles.message, { color: messageColor, fontSize: scaleText(12), marginTop: scale(5) }]}>
+          <Typography variant="bodySm" style={[styles.message, { color: messageColor, marginTop: scale(5) }]}>
             {messageText}
           </Typography>
         )}

package/src/components/Navigation/BottomTabBar/BottomTabBarItem.tsx

@@ -34,11 +34,11 @@ export const BottomTabBarItem = ({
         <IconComponent stroke={color} size={scale(24)} strokeWidth={2} />
       </View>
       <Typography
+        variant="caption"
         style={[
           styles.label,
           {
             color,
-            fontSize: scaleText(10),
             marginTop: scale(4),
           }
         ]}

package/src/components/Navigation/ProgressMap/ProgressMap.tsx

@@ -297,12 +297,11 @@ export const ProgressMap = ({
       {/* Header Container */}
       <View style={styles.header}>
         <View style={styles.headerLeft}>
-          <BackButton onPress={onBackPress} variant="default" />
           <View style={styles.headerText}>
-            <Typography style={[styles.headerTitle, { fontSize: scaleText(headerTitleSize) }]}>
+            <Typography variant="h3" style={[styles.headerTitle, { fontSize: scaleText(headerTitleSize) }]}>
               {title.toUpperCase()}
             </Typography>
-            <Typography style={[styles.headerSubtitle, { fontSize: scaleText(headerSubtitleSize) }]}>
+            <Typography variant="bodyLg" style={[styles.headerSubtitle, { fontSize: scaleText(headerSubtitleSize) }]}>
               {subtitle ?? `${stations.length} paragens · A1 → C1`}
             </Typography>
           </View>
@@ -313,7 +312,7 @@ export const ProgressMap = ({
           style={[styles.flightBtn, { borderRadius: scale(14), paddingHorizontal: scale(16), height: scale(40) }]}
         >
           <FlightIcon color="#ffffff" size={scale(16)} />
-          <Typography style={[styles.flightBtnText, { fontSize: scaleText(12) }]}>VOO</Typography>
+          <Typography variant="btnSm" style={[styles.flightBtnText, { fontSize: scaleText(12) }]}>VOO</Typography>
         </TouchableOpacity>
       </View>
 
@@ -514,7 +513,7 @@ export const ProgressMap = ({
                     },
                   ]}
                 >
-                  <Typography style={[styles.indexBadgeText, { fontSize: scaleText(9) }]}>
+                  <Typography variant="label" style={[styles.indexBadgeText, { fontSize: scaleText(9) }]}>
                     {idx + 1}
                   </Typography>
                 </View>
@@ -532,6 +531,7 @@ export const ProgressMap = ({
                   ]}
                 >
                   <Typography
+                    variant="bodySm"
                     numberOfLines={1}
                     style={[
                       isCurrent ? styles.activeLabelText : styles.labelText,
@@ -539,7 +539,7 @@ export const ProgressMap = ({
                     ]}
                   >
                     {p.label}{' '}
-                    <Typography style={{ opacity: isCurrent ? 0.9 : 0.6, fontSize: scaleText(10) }}>
+                    <Typography variant="caption" style={{ opacity: isCurrent ? 0.9 : 0.6, fontSize: scaleText(10) }}>
                       {p.levelCode}
                     </Typography>
                     {isCurrent && ' · AQUI'}
@@ -563,15 +563,15 @@ export const ProgressMap = ({
         >
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.success }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>visitado · rever</Typography>
+            <Typography variant="caption" style={[styles.legendText, { fontSize: scaleText(11) }]}>visitado · rever</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.primary }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>estás aqui</Typography>
+            <Typography variant="caption" style={[styles.legendText, { fontSize: scaleText(11) }]}>estás aqui</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.brown[300] }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>bloqueado</Typography>
+            <Typography variant="caption" style={[styles.legendText, { fontSize: scaleText(11) }]}>bloqueado</Typography>
           </View>
         </View>
 

package/src/components/Navigation/WorldProgressMap/WorldProgressMap.tsx

@@ -255,10 +255,10 @@ export const WorldProgressMap = ({
         <View style={styles.headerLeft}>
           <BackButton onPress={onBackPress} variant="default" />
           <View style={styles.headerText}>
-            <Typography style={[styles.headerTitle, { fontSize: scaleText(headerTitleSize) }]}>
+            <Typography variant="btnMd" style={[styles.headerTitle]}>
               {title.toUpperCase()}
             </Typography>
-            <Typography style={[styles.headerSubtitle, { fontSize: scaleText(headerSubtitleSize) }]}>
+            <Typography variant="h2" style={[styles.headerSubtitle]}>
               {subtitle ?? `${stations.length} destinos`}
             </Typography>
           </View>
@@ -269,7 +269,7 @@ export const WorldProgressMap = ({
           style={[styles.flightBtn, { borderRadius: scale(14), paddingHorizontal: scale(16), height: scale(40) }]}
         >
           <FlightIcon color="#ffffff" size={scale(16)} />
-          <Typography style={[styles.flightBtnText, { fontSize: scaleText(12) }]}>VOO</Typography>
+          <Typography variant="btnSm" style={[styles.flightBtnText]}>VOO</Typography>
         </TouchableOpacity>
       </View>
 
@@ -481,7 +481,7 @@ export const WorldProgressMap = ({
                         },
                       ]}
                     >
-                      <Typography style={[styles.indexBadgeText, { fontSize: scaleText(9) }]}>
+                      <Typography variant="caption" style={[styles.indexBadgeText]}>
                         {idx + 1}
                       </Typography>
                     </View>
@@ -499,14 +499,14 @@ export const WorldProgressMap = ({
                       ]}
                     >
                       <Typography
+                        variant="bodySm"
                         numberOfLines={1}
                         style={[
                           isCurrent ? styles.activeLabelText : styles.labelText,
-                          { fontSize: scaleText(11.5) },
                         ]}
                       >
                         {p.label}{' '}
-                        <Typography style={{ opacity: isCurrent ? 0.9 : 0.6, fontSize: scaleText(10) }}>
+                        <Typography variant="caption" style={{ opacity: isCurrent ? 0.9 : 0.6 }}>
                           {p.levelCode}
                         </Typography>
                         {isCurrent && ' · AQUI'}
@@ -532,15 +532,15 @@ export const WorldProgressMap = ({
         >
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.success }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>visitado · rever</Typography>
+            <Typography variant="caption" style={[styles.legendText]}>visitado · rever</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.primary }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>estás aqui</Typography>
+            <Typography variant="caption" style={[styles.legendText]}>estás aqui</Typography>
           </View>
           <View style={styles.legendRow}>
             <View style={[styles.legendDot, { backgroundColor: theme.colors.brown[300] }]} />
-            <Typography style={[styles.legendText, { fontSize: scaleText(11) }]}>bloqueado</Typography>
+            <Typography variant="caption" style={[styles.legendText]}>bloqueado</Typography>
           </View>
         </View>
 

package/src/components/Typography/Typography.tsx

@@ -16,33 +16,39 @@ export interface TypographyProps extends RNTextProps {
   align?: 'auto' | 'left' | 'right' | 'center' | 'justify';
   /** Cor do texto (em formato hexadecimal ou rgba). */
   color?: string;
-  /** Peso da fonte opcional para sobrepor a variante. */
-  weight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+  // A propriedade 'weight' foi removida para forçar o uso da variante correta e evitar furos na tipografia.
 }
 
 export const Typography = React.forwardRef<React.ElementRef<typeof RNText>, TypographyProps>(
-  ({ variant = 'bodyMd', color, align, weight, style, children, ...props }, ref) => {
+  ({ variant = 'bodyMd', color, align, style, children, ...props }, ref) => {
     const { colors } = useTheme();
-    const { scaleText } = useResponsive();
+    const { isDesktop } = useResponsive();
     
     // Resolve variant styles from the static theme tokens
-    const typographyStyle = theme.typography[variant];
+    const typographyStyle = theme.typography[variant] as any;
     
     // Default text color based on the current active theme
     const defaultColor = colors.textPrimary;
 
-    const responsiveStyle: TextStyle = {
+    // Use exact values from spec (no scaling!)
+    const exactFontSize = isDesktop && typographyStyle.desktopFontSize ? typographyStyle.desktopFontSize : typographyStyle.fontSize;
+    const exactLineHeight = isDesktop && typographyStyle.desktopFontSize && typographyStyle.lineHeight
+      ? (typographyStyle.desktopFontSize * (typographyStyle.lineHeight / typographyStyle.fontSize))
+      : typographyStyle.lineHeight;
+
+    const strictStyle: TextStyle = {
       ...typographyStyle,
-      fontSize: typographyStyle.fontSize ? scaleText(typographyStyle.fontSize) : undefined,
-      lineHeight: typographyStyle.lineHeight ? scaleText(typographyStyle.lineHeight) : undefined,
+      fontSize: exactFontSize,
+      lineHeight: exactLineHeight,
+      // Não propagamos campos web-only para o RN
+      desktopFontSize: undefined,
     };
 
     const combinedStyles = [
       { color: defaultColor },
-      responsiveStyle,
+      strictStyle,
       color ? { color } : null,
       align ? { textAlign: align } : null,
-      weight ? { fontWeight: weight } : null,
       style,
     ];
 

package/src/styles/theme.ts

@@ -1,10 +1,12 @@
 import { Platform } from 'react-native';
 
-const font = (family: string, webWeight: '600' | '700' | '800') => {
+const font = (family: string, webWeight: '400' | '500' | '600' | '700' | '800' | '900') => {
+  // Extract base family for web (e.g. 'Nunito-SemiBold' -> 'Nunito')
+  const webFamily = family.split('-')[0];
   return Platform.select({
-    web: { fontFamily: family.split('-')[0], fontWeight: webWeight },
+    web: { fontFamily: webFamily, fontWeight: webWeight },
     default: { fontFamily: family }
-  }) as { fontFamily: string; fontWeight?: '600' | '700' | '800' };
+  }) as { fontFamily: string; fontWeight?: '400' | '500' | '600' | '700' | '800' | '900' };
 };
 
 export const theme = {
@@ -173,71 +175,84 @@ export const theme = {
     display1: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 28,
-      lineHeight: 30,
+      lineHeight: 34,
+      desktopFontSize: 42,
     },
     display2: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 24,
-      lineHeight: 27,
+      lineHeight: 30,
+      desktopFontSize: 34,
     },
     h1: {
       ...font('Fredoka-Bold', '700'),
       fontSize: 22,
-      lineHeight: 25,
+      lineHeight: 28,
+      desktopFontSize: 28,
     },
     h2: {
       ...font('Fredoka-SemiBold', '600'),
       fontSize: 18,
-      lineHeight: 22,
+      lineHeight: 24,
+      desktopFontSize: 22,
     },
     h3: {
       ...font('Fredoka-SemiBold', '600'),
       fontSize: 16,
-      lineHeight: 20,
+      lineHeight: 22,
+      desktopFontSize: 19,
     },
     label: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 10,
       lineHeight: 14,
-      letterSpacing: 1.2,
+      letterSpacing: 1.2, // 10 * 0.12
+      desktopFontSize: 11,
     },
     bodyLg: {
       ...font('Nunito-Bold', '700'),
       fontSize: 15,
-      lineHeight: 23,
+      lineHeight: 24,
+      desktopFontSize: 17,
     },
     bodyMd: {
       ...font('Nunito-Bold', '700'),
       fontSize: 13.5,
-      lineHeight: 20,
+      lineHeight: 22,
+      desktopFontSize: 15,
     },
     bodySm: {
-      ...font('Nunito-Bold', '700'),
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 12,
-      lineHeight: 17,
+      lineHeight: 18,
+      desktopFontSize: 13,
     },
     caption: {
-      ...font('Nunito-SemiBold', '600'),
+      ...font('Nunito-ExtraBold', '800'),
       fontSize: 10,
-      lineHeight: 14,
+      lineHeight: 16,
+      desktopFontSize: 11,
     },
     btnLg: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 16,
-      lineHeight: 22,
-      letterSpacing: 0.64,
+      lineHeight: 20,
+      letterSpacing: 0.64, // 16 * 0.04
+      desktopFontSize: 17,
     },
     btnMd: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 14,
-      lineHeight: 20,
-      letterSpacing: 0.56,
+      lineHeight: 18,
+      letterSpacing: 0.56, // 14 * 0.04
+      desktopFontSize: 15,
     },
     btnSm: {
-      ...font('Nunito-ExtraBold', '800'),
+      ...font('Nunito-Black', '900'),
       fontSize: 12,
       lineHeight: 16,
-      letterSpacing: 0.48,
+      letterSpacing: 0.48, // 12 * 0.04
+      desktopFontSize: 12,
     },
   },