Rework all typography

21 files changed, 83 insertions, 78 deletions

diff --git a/src/view/com/composer/Autocomplete.tsx b/src/view/com/composer/Autocomplete.tsx
index 2ccd05653..d3f99627c 100644
--- a/src/view/com/composer/Autocomplete.tsx
+++ b/src/view/com/composer/Autocomplete.tsx
@@ -50,9 +50,9 @@ export function Autocomplete({
           key={i}
           style={[pal.border, styles.item]}
           onPress={() => onSelect(item.handle)}>
-          <Text style={pal.text}>
+          <Text type="md-medium" style={pal.text}>
             {item.displayName || item.handle}
-            <Text type="body2" style={pal.textLight}>
+            <Text type="sm" style={pal.textLight}>
               &nbsp;@{item.handle}
             </Text>
           </Text>
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx
index 790e0f784..b3a5680f2 100644
--- a/src/view/com/composer/ComposePost.tsx
+++ b/src/view/com/composer/ComposePost.tsx
@@ -243,12 +243,12 @@ export const ComposePost = observer(function ComposePost({
               />
               <View style={styles.replyToPost}>
                 <TextLink
-                  type="h5"
+                  type="xl-medium"
                   href={`/profile/${replyTo.author.handle}`}
                   text={replyTo.author.displayName || replyTo.author.handle}
                   style={[pal.text]}
                 />
-                <Text style={pal.text} numberOfLines={6}>
+                <Text type="post-text" style={pal.text} numberOfLines={6}>
                   {replyTo.text}
                 </Text>
               </View>
@@ -408,9 +408,12 @@ const styles = StyleSheet.create({
   textInput: {
     flex: 1,
     padding: 5,
-    fontSize: 18,
     marginLeft: 8,
     alignSelf: 'flex-start',
+    fontSize: 18,
+    letterSpacing: 0.2,
+    fontWeight: '400',
+    lineHeight: 23.4, // 1.3*16
   },
   replyToLayout: {
     flexDirection: 'row',
diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx
index e8f52f84a..0b420021a 100644
--- a/src/view/com/composer/Prompt.tsx
+++ b/src/view/com/composer/Prompt.tsx
@@ -26,7 +26,7 @@ export function ComposePrompt({
       ]}
       onPress={onPressCompose}>
       <View style={styles.textContainer}>
-        <Text type="h5" style={[pal.textLight, {fontWeight: 'normal'}]}>
+        <Text type="lg" style={[pal.textLight]}>
           {text}
         </Text>
       </View>
diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx
index 07f397447..f9e28da29 100644
--- a/src/view/com/discover/SuggestedFollows.tsx
+++ b/src/view/com/discover/SuggestedFollows.tsx
@@ -160,7 +160,7 @@ const User = ({
           />
         </View>
         <View style={styles.actorContent}>
-          <Text type="h5" style={pal.text} numberOfLines={1}>
+          <Text type="title-sm" style={pal.text} numberOfLines={1}>
             {item.displayName || item.handle}
           </Text>
           <Text style={pal.textLight} numberOfLines={1}>
diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 86e428621..2456da5a4 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -130,17 +130,19 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
             <View style={styles.layoutContent}>
               <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
-                <Link
-                  style={styles.metaItem}
-                  href={authorHref}
-                  title={authorTitle}>
-                  <Text type="h5" style={[pal.text]} numberOfLines={1}>
-                    {item.post.author.displayName || item.post.author.handle}
+                <View style={{flexDirection: 'row', alignItems: 'baseline'}}>
+                  <Link
+                    style={styles.metaItem}
+                    href={authorHref}
+                    title={authorTitle}>
+                    <Text type="xl-bold" style={[pal.text]} numberOfLines={1}>
+                      {item.post.author.displayName || item.post.author.handle}
+                    </Text>
+                  </Link>
+                  <Text type="md" style={[styles.metaItem, pal.textLight]}>
+                    &middot; {ago(item.post.indexedAt)}
                   </Text>
-                </Link>
-                <Text type="h6" style={[styles.metaItem, pal.textLight]}>
-                  &middot; {ago(item.post.indexedAt)}
-                </Text>
+                </View>
                 <View style={s.flex1} />
                 <PostDropdownBtn
                   style={styles.metaItem}
@@ -161,7 +163,7 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={styles.metaItem}
                   href={authorHref}
                   title={authorTitle}>
-                  <Text type="h6" style={[pal.textLight]} numberOfLines={1}>
+                  <Text type="md" style={[pal.textLight]} numberOfLines={1}>
                     @{item.post.author.handle}
                   </Text>
                 </Link>
@@ -176,9 +178,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   styles.postTextLargeContainer,
                 ]}>
                 <RichText
-                  type="h3"
+                  type="post-text-lg"
                   text={record.text}
                   entities={record.entities}
+                  lineHeight={1.3}
                 />
               </View>
             ) : undefined}
@@ -190,8 +193,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.expandedInfoItem}
                     href={repostsHref}
                     title={repostsTitle}>
-                    <Text type="h6" style={pal.textLight}>
-                      <Text type="h5" style={pal.text}>
+                    <Text type="lg" style={pal.textLight}>
+                      <Text type="xl-bold" style={pal.text}>
                         {item.post.repostCount}
                       </Text>{' '}
                       {pluralize(item.post.repostCount, 'repost')}
@@ -205,8 +208,8 @@ export const PostThreadItem = observer(function PostThreadItem({
                     style={styles.expandedInfoItem}
                     href={upvotesHref}
                     title={upvotesTitle}>
-                    <Text type="h6" style={pal.textLight}>
-                      <Text type="h5" style={pal.text}>
+                    <Text type="lg" style={pal.textLight}>
+                      <Text type="xl-bold" style={pal.text}>
                         {item.post.upvoteCount}
                       </Text>{' '}
                       {pluralize(item.post.upvoteCount, 'like')}
@@ -289,14 +292,16 @@ export const PostThreadItem = observer(function PostThreadItem({
               {item.post.author.viewer?.muted ? (
                 <View style={[styles.mutedWarning, pal.btn]}>
                   <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-                  <Text type="body2">This post is by a muted account.</Text>
+                  <Text type="sm">This post is by a muted account.</Text>
                 </View>
               ) : record.text ? (
                 <View style={styles.postTextContainer}>
                   <RichText
+                    type="post-text"
                     text={record.text}
                     entities={record.entities}
                     style={pal.text}
+                    lineHeight={1.3}
                   />
                 </View>
               ) : (
@@ -394,6 +399,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 8,
+    paddingRight: 20,
     minHeight: 36,
   },
   postTextLargeContainer: {
diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx
index 75ed84954..7e0a87050 100644
--- a/src/view/com/post/Post.tsx
+++ b/src/view/com/post/Post.tsx
@@ -20,7 +20,6 @@ import {Text} from '../util/text/Text'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
-import {ErrorMessage} from '../util/error/ErrorMessage'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
 import {usePalette} from '../../lib/hooks/usePalette'
@@ -166,12 +165,12 @@ export const Post = observer(function Post({
                 size={9}
                 style={[pal.textLight, s.mr5]}
               />
-              <Text type="body2" style={[pal.textLight, s.mr2]}>
+              <Text type="sm" style={[pal.textLight, s.mr2]}>
                 Reply to
               </Text>
               <Link href={replyHref} title="Parent post">
                 <UserInfoText
-                  type="body2"
+                  type="sm"
                   did={replyAuthorDid}
                   attr="displayName"
                   style={[pal.textLight]}
@@ -182,11 +181,16 @@ export const Post = observer(function Post({
           {item.post.author.viewer?.muted ? (
             <View style={[styles.mutedWarning, pal.btn]}>
               <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-              <Text type="body2">This post is by a muted account.</Text>
+              <Text type="sm">This post is by a muted account.</Text>
             </View>
           ) : record.text ? (
             <View style={styles.postTextContainer}>
-              <RichText text={record.text} entities={record.entities} />
+              <RichText
+                type="post-text"
+                text={record.text}
+                entities={record.entities}
+                lineHeight={1.3}
+              />
             </View>
           ) : (
             <View style={{height: 5}} />
diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index f5536907d..cfac2bede 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -15,7 +15,7 @@ import {PostEmbeds} from '../util/PostEmbeds'
 import {RichText} from '../util/text/RichText'
 import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
-import {s, colors} from '../../lib/styles'
+import {s} from '../../lib/styles'
 import {useStores} from '../../../state'
 import {useTheme} from '../../lib/ThemeContext'
 import {usePalette} from '../../lib/hooks/usePalette'
@@ -30,7 +30,6 @@ export const FeedItem = observer(function ({
   ignoreMuteFor?: string
 }) {
   const store = useStores()
-  const theme = useTheme()
   const pal = usePalette('default')
   const [deleted, setDeleted] = useState(false)
   const record = item.postRecord
@@ -144,12 +143,7 @@ export const FeedItem = observer(function ({
               icon="retweet"
               style={[styles.includeReasonIcon, {color: pal.colors.textLight}]}
             />
-            <Text
-              type="body2"
-              style={{
-                fontWeight: '600',
-                color: pal.colors.textLight,
-              }}>
+            <Text type="sm-bold" style={pal.textLight}>
               Reposted by{' '}
               {item.reasonRepost.by.displayName || item.reasonRepost.by.handle}
             </Text>
@@ -180,15 +174,15 @@ export const FeedItem = observer(function ({
                   size={9}
                   style={[{color: pal.colors.textLight}, s.mr5]}
                 />
-                <Text type="body2" style={[pal.textLight, s.mr2]}>
+                <Text type="md" style={[pal.textLight, s.mr2]}>
                   Reply to
                 </Text>
                 <Link href={replyHref} title="Parent post">
                   <UserInfoText
-                    type="body2"
+                    type="md"
                     did={replyAuthorDid}
                     attr="displayName"
-                    style={[pal.textLight]}
+                    style={[pal.textLight, s.ml2]}
                   />
                 </Link>
               </View>
@@ -197,14 +191,15 @@ export const FeedItem = observer(function ({
             ignoreMuteFor !== item.post.author.did ? (
               <View style={[styles.mutedWarning, pal.btn]}>
                 <FontAwesomeIcon icon={['far', 'eye-slash']} style={s.mr2} />
-                <Text type="body2">This post is by a muted account.</Text>
+                <Text type="sm">This post is by a muted account.</Text>
               </View>
             ) : record.text ? (
               <View style={styles.postTextContainer}>
                 <RichText
-                  type="body1"
+                  type="post-text"
                   text={record.text}
                   entities={record.entities}
+                  lineHeight={1.3}
                 />
               </View>
             ) : (
@@ -251,7 +246,7 @@ export const FeedItem = observer(function ({
               <Circle x="2" y="22" r="1.5" fill={pal.colors.replyLineDot} />
             </Svg>
           </View>
-          <Text style={[pal.link, theme.typography.body2]}>
+          <Text type="md" style={pal.link}>
             View full thread
           </Text>
         </Link>
@@ -322,6 +317,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexWrap: 'wrap',
     paddingBottom: 4,
+    paddingRight: 20,
   },
   embed: {
     marginBottom: 6,
diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx
index 5d1992b7a..0cda3ba2a 100644
--- a/src/view/com/profile/ProfileCard.tsx
+++ b/src/view/com/profile/ProfileCard.tsx
@@ -39,7 +39,7 @@ export function ProfileCard({
           <Text style={[s.bold, pal.text]} numberOfLines={1}>
             {displayName || handle}
           </Text>
-          <Text type="body2" style={[pal.textLight]} numberOfLines={1}>
+          <Text type="sm" style={[pal.textLight]} numberOfLines={1}>
             @{handle}
           </Text>
         </View>
diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx
index 26939c7ce..469a91f8d 100644
--- a/src/view/com/profile/ProfileFollowers.tsx
+++ b/src/view/com/profile/ProfileFollowers.tsx
@@ -99,7 +99,7 @@ const User = ({item}: {item: FollowerItem}) => {
           <Text style={[s.bold, pal.text]}>
             {item.displayName || item.handle}
           </Text>
-          <Text type="body2" style={[pal.textLight]}>
+          <Text type="sm" style={[pal.textLight]}>
             @{item.handle}
           </Text>
         </View>
diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx
index 03c5b13bb..9b413ab76 100644
--- a/src/view/com/profile/ProfileFollows.tsx
+++ b/src/view/com/profile/ProfileFollows.tsx
@@ -99,7 +99,7 @@ const User = ({item}: {item: FollowItem}) => {
           <Text style={[s.bold, pal.text]}>
             {item.displayName || item.handle}
           </Text>
-          <Text type="body2" style={pal.textLight}>
+          <Text type="sm" style={pal.textLight}>
             @{item.handle}
           </Text>
         </View>
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 52a4400a5..ec577f25e 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -108,7 +108,7 @@ export const ProfileHeader = observer(function ProfileHeader({
             />
           </View>
           <View style={styles.displayNameLine}>
-            <Text type="h2" style={[pal.text, {lineHeight: 38}]}>
+            <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
               {view.displayName || view.handle}
             </Text>
           </View>
@@ -200,7 +200,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           ) : undefined}
         </View>
         <View style={styles.displayNameLine}>
-          <Text type="h2" style={[pal.text, {lineHeight: 38}]}>
+          <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}>
             {view.displayName || view.handle}
           </Text>
         </View>
@@ -212,10 +212,10 @@ export const ProfileHeader = observer(function ProfileHeader({
             testID="profileHeaderFollowersButton"
             style={[s.flexRow, s.mr10]}
             onPress={onPressFollowers}>
-            <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
+            <Text type="md" style={[s.bold, s.mr2, pal.text]}>
               {view.followersCount}
             </Text>
-            <Text type="body2" style={[pal.textLight]}>
+            <Text type="md" style={[pal.textLight]}>
               {pluralize(view.followersCount, 'follower')}
             </Text>
           </TouchableOpacity>
@@ -224,19 +224,19 @@ export const ProfileHeader = observer(function ProfileHeader({
               testID="profileHeaderFollowsButton"
               style={[s.flexRow, s.mr10]}
               onPress={onPressFollows}>
-              <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
+              <Text type="md" style={[s.bold, s.mr2, pal.text]}>
                 {view.followsCount}
               </Text>
-              <Text type="body2" style={[pal.textLight]}>
+              <Text type="md" style={[pal.textLight]}>
                 following
               </Text>
             </TouchableOpacity>
           ) : undefined}
           <View style={[s.flexRow, s.mr10]}>
-            <Text type="body2" style={[s.bold, s.mr2, pal.text]}>
+            <Text type="md" style={[s.bold, s.mr2, pal.text]}>
               {view.postsCount}
             </Text>
-            <Text type="body2" style={[pal.textLight]}>
+            <Text type="md" style={[pal.textLight]}>
               {pluralize(view.postsCount, 'post')}
             </Text>
           </View>
@@ -255,7 +255,7 @@ export const ProfileHeader = observer(function ProfileHeader({
               icon={['far', 'eye-slash']}
               style={[pal.text, s.mr5]}
             />
-            <Text type="body2" style={[s.mr2, pal.text]}>
+            <Text type="md" style={[s.mr2, pal.text]}>
               Account muted.
             </Text>
           </View>
diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx
index d9a317fae..5cede14a9 100644
--- a/src/view/com/util/EmptyState.tsx
+++ b/src/view/com/util/EmptyState.tsx
@@ -29,7 +29,7 @@ export function EmptyState({
           />
         )}
       </View>
-      <Text type="body1" style={[pal.textLight, styles.text]}>
+      <Text type="xl" style={[pal.textLight, styles.text]}>
         {message}
       </Text>
     </View>
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index 1e7b90506..aacdc3272 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -58,7 +58,7 @@ export const Link = observer(function Link({
 })
 
 export const TextLink = observer(function Link({
-  type = 'body1',
+  type = 'md',
   style,
   href,
   text,
diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx
index 5e01f8628..8d2bc6f33 100644
--- a/src/view/com/util/PostEmbeds.tsx
+++ b/src/view/com/util/PostEmbeds.tsx
@@ -92,21 +92,18 @@ export function PostEmbeds({
           />
         )}
         <View style={styles.extInner}>
-          <Text
-            type="body2"
-            numberOfLines={2}
-            style={[pal.text, styles.extTitle]}>
+          <Text type="sm-bold" numberOfLines={2} style={[pal.text]}>
             {link.title || link.uri}
           </Text>
           <Text
-            type="body2"
+            type="sm"
             numberOfLines={1}
             style={[pal.textLight, styles.extUri]}>
             {link.uri}
           </Text>
           {link.description ? (
             <Text
-              type="body2"
+              type="sm"
               numberOfLines={2}
               style={[pal.text, styles.extDescription]}>
               {link.description}
@@ -140,9 +137,6 @@ const styles = StyleSheet.create({
   extImageFallback: {
     height: 160,
   },
-  extTitle: {
-    fontWeight: '600',
-  },
   extUri: {
     marginTop: 2,
   },
diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 8e1a900d7..241480323 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -40,16 +40,16 @@ export function PostMeta(opts: PostMetaOpts) {
         style={[styles.metaItem, styles.maxWidth]}
         href={opts.authorHref}
         title={opts.authorHandle}>
-        <Text type="h5" style={[pal.text]} numberOfLines={1}>
+        <Text type="lg-bold" style={[pal.text]} numberOfLines={1}>
           {displayName}
           {handle ? (
-            <Text type="h6" style={[pal.textLight]}>
+            <Text type="md" style={[pal.textLight]}>
               &nbsp;{handle}
             </Text>
           ) : undefined}
         </Text>
       </Link>
-      <Text type="h6" style={[styles.metaItem, pal.textLight]}>
+      <Text type="md" style={[styles.metaItem, pal.textLight]}>
         &middot; {ago(opts.timestamp)}
       </Text>
     </View>
diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx
index d9f8cbf27..db6696a9b 100644
--- a/src/view/com/util/UserInfoText.tsx
+++ b/src/view/com/util/UserInfoText.tsx
@@ -8,7 +8,7 @@ import {useStores} from '../../../state'
 import {TypographyVariant} from '../../lib/ThemeContext'
 
 export function UserInfoText({
-  type = 'body1',
+  type = 'md',
   did,
   attr,
   loading,
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index ab80bd854..07f7bc22f 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -68,12 +68,12 @@ export const ViewHeader = observer(function ViewHeader({
         )}
       </TouchableOpacity>
       <View style={styles.titleContainer} pointerEvents="none">
-        <Text type="h4" style={[pal.text, styles.title]}>
+        <Text type="title" style={[pal.text, styles.title]}>
           {title}
         </Text>
         {subtitle ? (
           <Text
-            type="h5"
+            type="title-sm"
             style={[styles.subtitle, pal.textLight]}
             numberOfLines={1}>
             {subtitle}
diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx
index ee31ad2cb..684e93fca 100644
--- a/src/view/com/util/error/ErrorMessage.tsx
+++ b/src/view/com/util/error/ErrorMessage.tsx
@@ -31,7 +31,7 @@ export function ErrorMessage({
         <FontAwesomeIcon icon="exclamation" style={pal.text} size={16} />
       </View>
       <Text
-        type="body2"
+        type="sm"
         style={[styles.message, pal.text]}
         numberOfLines={numberOfLines}>
         {message}
diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx
index 0033195d9..0500b206d 100644
--- a/src/view/com/util/error/ErrorScreen.tsx
+++ b/src/view/com/util/error/ErrorScreen.tsx
@@ -36,14 +36,14 @@ export function ErrorScreen({
           />
         </View>
       </View>
-      <Text type="h3" style={[styles.title, pal.text]}>
+      <Text type="title-lg" style={[styles.title, pal.text]}>
         {title}
       </Text>
       <Text style={[styles.message, pal.textLight]}>{message}</Text>
       {details && (
         <Text
           testID={`${testID}-details`}
-          type="body2"
+          type="sm"
           style={[
             styles.details,
             pal.textInverted,
diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx
index 2a42d26ae..a7bc92a45 100644
--- a/src/view/com/util/text/RichText.tsx
+++ b/src/view/com/util/text/RichText.tsx
@@ -15,21 +15,23 @@ type Entity = {
 }
 
 export function RichText({
-  type = 'body1',
+  type = 'md',
   text,
   entities,
+  lineHeight = 1.2,
   style,
   numberOfLines,
 }: {
   type?: TypographyVariant
   text: string
   entities?: Entity[]
+  lineHeight?: number
   style?: StyleProp<TextStyle>
   numberOfLines?: number
 }) {
   const theme = useTheme()
   const pal = usePalette('default')
-  const lineHeightStyle = lh(theme, type, 1.2)
+  const lineHeightStyle = lh(theme, type, lineHeight)
   if (!entities?.length) {
     if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
       style = {
diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx
index 549eb2901..c3a8a2194 100644
--- a/src/view/com/util/text/Text.tsx
+++ b/src/view/com/util/text/Text.tsx
@@ -8,7 +8,7 @@ export type CustomTextProps = TextProps & {
 }
 
 export function Text({
-  type = 'body1',
+  type = 'md',
   children,
   style,
   ...props