assets/fonts/
├── Inter-Regular.ttf
├── Inter-Medium.ttf
├── Inter-SemiBold.ttf
└── Inter-Bold.ttf

Default text component with Inter-Medium (500 weight):

import { Text } from '@/components/ui/text';

<Text className="text-base text-sys-text-body">
  Regular body text content
</Text>

Enhanced text component with Inter-SemiBold (600 weight):

import { TextSemiBold } from '@/components/ui/text';

<TextSemiBold className="text-md text-sys-text-body">
  Important labels and emphasis
</TextSemiBold>

Strong emphasis text component with Inter-Bold (700 weight):

import { TextBold } from '@/components/ui/text';

<TextBold className="text-lg text-sys-text-body">
  Strong emphasis and headings
</TextBold>

- **Font Scaling Disabled**: `allowFontScaling={false}` ensures consistent sizing
- **Web Selection**: `web:select-text` enables text selection on web platforms
- **Context Support**: `TextClassContext` for hierarchical styling
- **Slot Support**: `asChild` prop for composition patterns

// Minimum touch targets for mobile
<TouchableOpacity className="min-h-[44px] px-md">  {/* iOS guidelines */}
  <Text className="text-base">Touchable text</Text>
</TouchableOpacity>

<Pressable className="min-h-[48px] px-md">          {/* Android guidelines */}
  <Text className="text-base">Pressable text</Text>
</Pressable>

// Semantic heading structure
<Text 
  className="text-6xl text-sys-text-body"
  accessibilityRole="header"
  accessibilityLevel={1}
>
  Page Title
</Text>

// Descriptive text with context
<Text 
  className="text-sm text-sys-text-neutral-3"
  accessibilityLabel="Form validation error"
  accessibilityLiveRegion="polite"
>
  Please enter a valid email address
</Text>

#### Font Rendering
// Native-specific font optimizations
const styles = StyleSheet.create({
  Inter: {
    fontFamily: 'Inter-Medium',
    // Native font rendering optimizations
  },
  InterSemiBold: {
    fontFamily: 'Inter-SemiBold',
    fontWeight: 'bold', // Web fallback
  }
});

#### Text Selection
// Web-specific text selection
<Text className="text-base web:select-text">
  Selectable text on web platforms
</Text>

// Native text selection (when needed)
<Text selectable className="text-base">
  Selectable text on native platforms
</Text>

#### Font Scaling Control
// Consistent sizing across devices
<Text allowFontScaling={false} className="text-base">
  Fixed size text that won't scale with system settings
</Text>

#### Font Loading Strategy
// Expo font configuration in app.json
{
  "expo": {
    "plugins": ["expo-font"],
    "assetBundlePatterns": ["**/*"]
  }
}

// Providing context for nested components
<TextClassContext.Provider value="text-sys-text-secondary">
  <Card>
    <Text>This text inherits secondary color</Text>
  </Card>
</TextClassContext.Provider>

// Using asChild for composition
<Button asChild>
  <Text className="text-base text-sys-text-white">
    Composed button text
  </Text>
</Button>

import Animated, { FadeInUp } from 'react-native-reanimated';

<Animated.View entering={FadeInUp}>
  <TextBold className="text-4xl text-sys-text-body">
    Animated Heading
  </TextBold>
</Animated.View>

// These tokens automatically switch between light and dark modes
<Text className="text-sys-text-body">
  {/* Light mode: Dark text (readable on light background) */}
  {/* Dark mode: White text (readable on dark background) */}
  Main content text
</Text>

<Text className="text-sys-text-white">
  {/* Always white in both modes */}
  Button text or emphasis
</Text>

<Text className="text-sys-text-secondary">
  {/* Light mode: Purple accent */}
  {/* Dark mode: Lighter purple accent */}
  Secondary accent text
</Text>

// ❌ Don't use React Native's native hook
import { useColorScheme } from 'react-native';

// ✅ Use the design system's hook for NativeWind integration
import { useColorScheme } from '@/lib/useColorScheme';

function MyComponent() {
  const { isDarkColorScheme } = useColorScheme();
  
  return (
    <Text className="text-sys-text-body">
      {/* Automatically adapts to dark mode changes */}
      Text that switches color based on theme
    </Text>
  );
}

1. **Consistent Font Weight Usage**
✅ <Text className="text-base">Regular content</Text>
✅ <TextSemiBold className="text-md">Important labels</TextSemiBold>
✅ <TextBold className="text-lg">Strong emphasis</TextBold>

❌ <Text style={{ fontWeight: '600' }}>Avoid inline styles</Text>

2. **Semantic Color Tokens**
✅ <Text className="text-sys-text-body">Use semantic tokens</Text>
✅ <Text className="text-sys-text-secondary">Secondary content</Text>

❌ <Text className="text-ref-neutral-900">Avoid reference tokens</Text>

3. **Responsive Typography**
✅ <Text className="text-sm md:text-base">Responsive scaling</Text>
✅ <TextBold className="text-4xl lg:text-6xl">Responsive headings</TextBold>

❌ <Text className="text-[14px]">Avoid arbitrary values</Text>

4. **Accessibility Labels**
✅ <Text accessibilityRole="header" accessibilityLevel={2}>Section Title</Text>
✅ <Text accessibilityLabel="Error message">Field validation failed</Text>

❌ <Text>❌ Error</Text> // No context for screen readers

5. **Platform Optimization**
✅ <Text className="text-base native:text-md">Platform-optimized</Text>
✅ <Text className="web:select-text">Web-specific features</Text>

❌ <Text selectable={Platform.OS === 'web'}>Manual platform detection</Text>