diff --git a/example/src/Examples/ListItemExample.tsx b/example/src/Examples/ListItemExample.tsx
index 4d5a69b400..1cf1252071 100644
--- a/example/src/Examples/ListItemExample.tsx
+++ b/example/src/Examples/ListItemExample.tsx
@@ -1,15 +1,7 @@
-import { View, StyleSheet } from 'react-native';
-
 import { List, Divider, Checkbox, Avatar, Switch } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
-const CenteredCheckbox = () => (
-  <View style={styles.centered}>
-    <Checkbox status="checked" />
-  </View>
-);
-
 const ListItemExample = () => {
   return (
     <ScreenWrapper>
@@ -21,16 +13,19 @@ const ListItemExample = () => {
           description="Supporting text that is long enough to fill up multiple lines in the item"
         />
         <Divider />
-        <List.Item title="Headline" right={() => <CenteredCheckbox />} />
+        <List.Item
+          title="Headline"
+          right={(props) => <Checkbox status="checked" style={props.style} />}
+        />
         <List.Item
           title="Headline"
           description="Supporting text"
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -54,19 +49,19 @@ const ListItemExample = () => {
         <List.Item
           title="Headline"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -98,7 +93,7 @@ const ListItemExample = () => {
           left={(props) => (
             <Avatar.Text style={props.style} label="A" size={40} />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -106,7 +101,7 @@ const ListItemExample = () => {
           left={(props) => (
             <Avatar.Text style={props.style} label="A" size={40} />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -114,7 +109,7 @@ const ListItemExample = () => {
           left={(props) => (
             <Avatar.Text style={props.style} label="A" size={40} />
           )}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -158,7 +153,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -169,7 +164,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -180,7 +175,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -228,7 +223,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -240,7 +235,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <CenteredCheckbox />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <List.Item
           title="Headline"
@@ -252,7 +247,7 @@ const ListItemExample = () => {
               source={require('../../../example/assets/images/strawberries.jpg')}
             />
           )}
-          right={() => <Checkbox status="checked" />}
+          right={(props) => <Checkbox status="checked" style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -260,35 +255,35 @@ const ListItemExample = () => {
       <List.Section title="With switch">
         <List.Item
           title="Headline"
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
-          right={() => <Switch disabled />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <Divider />
         <List.Item
           title="Headline"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Switch disabled style={styles.centered} />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <List.Item
           title="Headline"
           description="Supporting text that is long enough to fill up multiple lines in the item"
           left={(props) => <List.Icon {...props} icon="account-outline" />}
-          right={() => <Switch disabled />}
+          right={(props) => <Switch disabled style={props.style} />}
         />
         <Divider />
       </List.Section>
@@ -296,12 +291,6 @@ const ListItemExample = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  centered: {
-    alignSelf: 'center',
-  },
-});
-
 ListItemExample.title = 'List.Item';
 
 export default ListItemExample;
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index ff26a075a4..dee7d7008e 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -14,8 +14,9 @@ import type {
 
 import { ListAccordionContext } from './ListAccordionContext';
 import { ListAccordionGroupContext } from './ListAccordionGroup';
+import { ListTokens } from './tokens';
 import type { Style } from './utils';
-import { getAccordionColors, getLeftStyles } from './utils';
+import { ListRowContext, getAccordionColors, getLeftStyles } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../theme/types';
@@ -202,13 +203,14 @@ const ListAccordion = ({
   const [expanded, setExpanded] = React.useState<boolean>(
     expandedProp || false
   );
-  const [alignToTop, setAlignToTop] = React.useState(false);
+  const [isDescriptionMultiline, setIsDescriptionMultiline] =
+    React.useState(false);
 
   const onDescriptionTextLayout = (
     event: NativeSyntheticEvent<TextLayoutEventData>
   ) => {
     const { nativeEvent } = event;
-    setAlignToTop(nativeEvent.lines.length >= 2);
+    setIsDescriptionMultiline(nativeEvent.lines.length >= 2);
   };
 
   const handlePressAction = (e: GestureResponderEvent) => {
@@ -233,100 +235,112 @@ const ListAccordion = ({
     ? groupContext.expandedId === id
     : expandedInternal;
 
-  const { descriptionColor, titleTextColor } = getAccordionColors({
-    theme,
-    isExpanded,
-  });
+  const { descriptionColor, titleTextColor } = getAccordionColors({ theme });
 
   const handlePress =
     groupContext && id !== undefined
       ? () => groupContext.onAccordionPress(id)
       : handlePressAction;
 
+  const rowContext = React.useMemo(
+    () => ({
+      verticalPadding: isDescriptionMultiline
+        ? ListTokens.threeLineVerticalPadding
+        : ListTokens.verticalPadding,
+    }),
+    [isDescriptionMultiline]
+  );
+
   const hasLeft = left != null;
   const accordionContext = React.useMemo(() => ({ hasLeft }), [hasLeft]);
 
   return (
     <View>
-      <View style={{ backgroundColor: theme?.colors?.background }}>
-        <TouchableRipple
-          style={[styles.container, style]}
-          onPress={handlePress}
-          onLongPress={onLongPress}
-          delayLongPress={delayLongPress}
-          role="button"
-          aria-expanded={isExpanded}
-          aria-label={ariaLabel}
-          testID={testID}
-          theme={theme}
-          background={background}
-          borderless
-          hitSlop={hitSlop}
-        >
-          <View
-            style={[styles.row, containerStyle]}
-            pointerEvents={pointerEvents}
+      <View
+        style={{ backgroundColor: theme.colors[ListTokens.containerColor] }}
+      >
+        <ListRowContext.Provider value={rowContext}>
+          <TouchableRipple
+            style={[
+              styles.container,
+              description ? styles.containerTwoLine : styles.containerOneLine,
+              isDescriptionMultiline && styles.containerThreeLine,
+              style,
+            ]}
+            onPress={handlePress}
+            onLongPress={onLongPress}
+            delayLongPress={delayLongPress}
+            role="button"
+            aria-expanded={isExpanded}
+            aria-label={ariaLabel}
+            testID={testID}
+            theme={theme}
+            background={background}
+            borderless
+            hitSlop={hitSlop}
           >
-            {left
-              ? left({
-                  color: isExpanded ? theme.colors?.primary : descriptionColor,
-                  style: getLeftStyles(alignToTop, description),
-                })
-              : null}
-            <View style={[styles.contentItem, styles.content, contentStyle]}>
-              <Text
-                selectable={false}
-                numberOfLines={titleNumberOfLines}
-                style={[
-                  styles.title,
-                  {
-                    color: titleTextColor,
-                  },
-                  titleStyle,
-                ]}
-                maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-              >
-                {title}
-              </Text>
-              {description ? (
+            <View
+              style={[styles.row, containerStyle]}
+              pointerEvents={pointerEvents}
+            >
+              {left
+                ? left({
+                    color: theme.colors[ListTokens.leadingIconColor],
+                    style: getLeftStyles(isDescriptionMultiline, description),
+                  })
+                : null}
+              <View style={[styles.contentItem, styles.content, contentStyle]}>
                 <Text
+                  variant="bodyLarge"
+                  theme={theme}
                   selectable={false}
-                  numberOfLines={descriptionNumberOfLines}
+                  numberOfLines={titleNumberOfLines}
                   style={[
-                    styles.description,
                     {
-                      color: descriptionColor,
+                      color: titleTextColor,
                     },
-                    descriptionStyle,
+                    titleStyle,
                   ]}
-                  onTextLayout={onDescriptionTextLayout}
-                  maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
+                  maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
                 >
-                  {description}
+                  {title}
                 </Text>
-              ) : null}
-            </View>
-            <View
-              style={[
-                styles.trailingItem,
-                description ? styles.multiline : undefined,
-              ]}
-            >
-              {right ? (
-                right({
-                  isExpanded: isExpanded,
-                })
-              ) : (
-                <MaterialCommunityIcon
-                  name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                  color={descriptionColor}
-                  size={24}
-                  direction={direction}
-                />
-              )}
+                {description ? (
+                  <Text
+                    variant="bodyMedium"
+                    theme={theme}
+                    selectable={false}
+                    numberOfLines={descriptionNumberOfLines}
+                    style={[
+                      {
+                        color: descriptionColor,
+                      },
+                      descriptionStyle,
+                    ]}
+                    onTextLayout={onDescriptionTextLayout}
+                    maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
+                  >
+                    {description}
+                  </Text>
+                ) : null}
+              </View>
+              <View style={styles.trailingItem}>
+                {right ? (
+                  right({
+                    isExpanded: isExpanded,
+                  })
+                ) : (
+                  <MaterialCommunityIcon
+                    name={isExpanded ? 'chevron-up' : 'chevron-down'}
+                    color={theme.colors[ListTokens.expandTrailingIconColor]}
+                    size={24}
+                    direction={direction}
+                  />
+                )}
+              </View>
             </View>
-          </View>
-        </TouchableRipple>
+          </TouchableRipple>
+        </ListRowContext.Provider>
       </View>
 
       {isExpanded ? (
@@ -342,30 +356,28 @@ ListAccordion.displayName = 'List.Accordion';
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
-    paddingRight: 24,
+    paddingVertical: ListTokens.verticalPadding,
+    paddingRight: ListTokens.trailingSpace,
+    justifyContent: 'center',
   },
-  row: {
-    flexDirection: 'row',
-    marginVertical: 6,
+  containerOneLine: {
+    minHeight: ListTokens.oneLineContainerHeight,
   },
-  multiline: {
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
+  containerTwoLine: {
+    minHeight: ListTokens.twoLineContainerHeight,
   },
-  title: {
-    fontSize: 16,
+  containerThreeLine: {
+    paddingVertical: ListTokens.threeLineVerticalPadding,
   },
-  description: {
-    fontSize: 14,
+  row: {
+    flexDirection: 'row',
   },
   contentItem: {
-    paddingLeft: 16,
+    paddingLeft: ListTokens.leadingSpace,
   },
   trailingItem: {
-    marginVertical: 6,
-    paddingLeft: 8,
+    alignSelf: 'center',
+    paddingLeft: ListTokens.leadingSpace,
   },
   content: {
     flex: 1,
diff --git a/src/components/List/ListImage.tsx b/src/components/List/ListImage.tsx
index 213d4254c7..73a2ba3692 100644
--- a/src/components/List/ListImage.tsx
+++ b/src/components/List/ListImage.tsx
@@ -1,6 +1,9 @@
+import * as React from 'react';
 import { StyleSheet, Image } from 'react-native';
 import type { StyleProp, ImageSourcePropType, ImageStyle } from 'react-native';
 
+import { ListTokens } from './tokens';
+import { ListRowContext } from './utils';
 import type { ThemeProp } from '../../theme/types';
 
 export type Props = {
@@ -37,9 +40,17 @@ const ListImage = ({
   variant = 'image',
   theme: _theme,
 }: Props) => {
+  const { verticalPadding } = React.useContext(ListRowContext);
+
   const getStyles = () => {
     if (variant === 'video') {
-      return [style, styles.video];
+      return [
+        style,
+        styles.video,
+        {
+          marginVertical: ListTokens.threeLineVerticalPadding - verticalPadding,
+        },
+      ];
     }
 
     return [style, styles.image];
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 038ef86a58..168b536874 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -12,7 +12,8 @@ import type {
 } from 'react-native';
 
 import { ListAccordionContext } from './ListAccordionContext';
-import { getLeftStyles, getRightStyles } from './utils';
+import { ListTokens } from './tokens';
+import { ListRowContext, getLeftStyles, getRightStyles } from './utils';
 import type { Style } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../theme/types';
@@ -169,13 +170,14 @@ const ListItem = ({
   const theme = useInternalTheme(themeOverrides);
   const { hasLeft } = React.useContext(ListAccordionContext);
   const shouldIndent = hasLeft && !left && !right;
-  const [alignToTop, setAlignToTop] = React.useState(false);
+  const [isDescriptionMultiline, setIsDescriptionMultiline] =
+    React.useState(false);
 
   const onDescriptionTextLayout = (
     event: NativeSyntheticEvent<TextLayoutEventData>
   ) => {
     const { nativeEvent } = event;
-    setAlignToTop(nativeEvent.lines.length >= 2);
+    setIsDescriptionMultiline(nativeEvent.lines.length >= 2);
   };
 
   const renderDescription = (
@@ -187,18 +189,16 @@ const ListItem = ({
         selectable: false,
         ellipsizeMode: descriptionEllipsizeMode,
         color: descriptionColor,
-        fontSize: styles.description.fontSize,
+        fontSize: theme.fonts.bodyMedium.fontSize,
       })
     ) : (
       <Text
+        variant="bodyMedium"
+        theme={theme}
         selectable={false}
         numberOfLines={descriptionNumberOfLines}
         ellipsizeMode={descriptionEllipsizeMode}
-        style={[
-          styles.description,
-          { color: descriptionColor },
-          descriptionStyle,
-        ]}
+        style={[{ color: descriptionColor }, descriptionStyle]}
         onTextLayout={onDescriptionTextLayout}
         maxFontSizeMultiplier={descriptionMaxFontSizeMultiplier}
       >
@@ -208,21 +208,23 @@ const ListItem = ({
   };
 
   const renderTitle = () => {
-    const titleColor = theme.colors.onSurface;
+    const titleColor = theme.colors[ListTokens.headlineColor];
 
     return typeof title === 'function' ? (
       title({
         selectable: false,
         ellipsizeMode: titleEllipsizeMode,
         color: titleColor,
-        fontSize: styles.title.fontSize,
+        fontSize: theme.fonts.bodyLarge.fontSize,
       })
     ) : (
       <Text
+        variant="bodyLarge"
+        theme={theme}
         selectable={false}
         ellipsizeMode={titleEllipsizeMode}
         numberOfLines={titleNumberOfLines}
-        style={[styles.title, { color: titleColor }, titleStyle]}
+        style={[{ color: titleColor }, titleStyle]}
         maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
       >
         {title}
@@ -230,43 +232,56 @@ const ListItem = ({
     );
   };
 
-  const descriptionColor = theme.colors.onSurfaceVariant;
+  const descriptionColor = theme.colors[ListTokens.supportingTextColor];
+
+  const rowContext = React.useMemo(
+    () => ({
+      verticalPadding: isDescriptionMultiline
+        ? ListTokens.threeLineVerticalPadding
+        : ListTokens.verticalPadding,
+    }),
+    [isDescriptionMultiline]
+  );
 
   return (
-    <TouchableRipple
-      {...rest}
-      ref={ref}
-      style={
-        shouldIndent
-          ? [styles.container, styles.indent, style]
-          : [styles.container, style]
-      }
-      onPress={onPress}
-      theme={theme}
-      testID={testID}
-    >
-      <View style={[styles.row, containerStyle]}>
-        {left
-          ? left({
-              color: descriptionColor,
-              style: getLeftStyles(alignToTop, description),
-            })
-          : null}
-        <View style={[styles.item, styles.content, contentStyle]}>
-          {renderTitle()}
+    <ListRowContext.Provider value={rowContext}>
+      <TouchableRipple
+        {...rest}
+        ref={ref}
+        style={[
+          styles.container,
+          description ? styles.containerTwoLine : styles.containerOneLine,
+          isDescriptionMultiline && styles.containerThreeLine,
+          shouldIndent && styles.indent,
+          style,
+        ]}
+        onPress={onPress}
+        theme={theme}
+        testID={testID}
+      >
+        <View style={[styles.row, containerStyle]}>
+          {left
+            ? left({
+                color: theme.colors[ListTokens.leadingIconColor],
+                style: getLeftStyles(isDescriptionMultiline, description),
+              })
+            : null}
+          <View style={[styles.item, styles.content, contentStyle]}>
+            {renderTitle()}
 
-          {description
-            ? renderDescription(descriptionColor, description)
+            {description
+              ? renderDescription(descriptionColor, description)
+              : null}
+          </View>
+          {right
+            ? right({
+                color: theme.colors[ListTokens.trailingIconColor],
+                style: getRightStyles(isDescriptionMultiline, description),
+              })
             : null}
         </View>
-        {right
-          ? right({
-              color: descriptionColor,
-              style: getRightStyles(alignToTop, description),
-            })
-          : null}
-      </View>
-    </TouchableRipple>
+      </TouchableRipple>
+    </ListRowContext.Provider>
   );
 };
 
@@ -274,8 +289,18 @@ ListItem.displayName = 'List.Item';
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
-    paddingRight: 24,
+    paddingVertical: ListTokens.verticalPadding,
+    paddingRight: ListTokens.trailingSpace,
+    justifyContent: 'center',
+  },
+  containerOneLine: {
+    minHeight: ListTokens.oneLineContainerHeight,
+  },
+  containerTwoLine: {
+    minHeight: ListTokens.twoLineContainerHeight,
+  },
+  containerThreeLine: {
+    paddingVertical: ListTokens.threeLineVerticalPadding,
   },
   indent: {
     paddingLeft: 40,
@@ -283,16 +308,9 @@ const styles = StyleSheet.create({
   row: {
     width: '100%',
     flexDirection: 'row',
-    marginVertical: 6,
-  },
-  title: {
-    fontSize: 16,
-  },
-  description: {
-    fontSize: 14,
   },
   item: {
-    paddingLeft: 16,
+    paddingLeft: ListTokens.leadingSpace,
   },
   content: {
     flexShrink: 1,
diff --git a/src/components/List/tokens.ts b/src/components/List/tokens.ts
new file mode 100644
index 0000000000..5df93882ed
--- /dev/null
+++ b/src/components/List/tokens.ts
@@ -0,0 +1,21 @@
+import type { ColorRole } from '../../theme/types';
+
+const sizes = {
+  verticalPadding: 8,
+  threeLineVerticalPadding: 12,
+  oneLineContainerHeight: 56,
+  twoLineContainerHeight: 72,
+  leadingSpace: 16,
+  trailingSpace: 16,
+} as const;
+
+const colors = {
+  containerColor: 'surface',
+  headlineColor: 'onSurface',
+  supportingTextColor: 'onSurfaceVariant',
+  leadingIconColor: 'onSurfaceVariant',
+  trailingIconColor: 'onSurfaceVariant',
+  expandTrailingIconColor: 'onSurface',
+} as const satisfies Record<string, ColorRole>;
+
+export const ListTokens = { ...sizes, ...colors };
diff --git a/src/components/List/utils.ts b/src/components/List/utils.ts
index e01f0e55c6..a0c5f1ef00 100644
--- a/src/components/List/utils.ts
+++ b/src/components/List/utils.ts
@@ -1,6 +1,7 @@
-import { StyleSheet } from 'react-native';
+import * as React from 'react';
 import type { StyleProp, TextProps, ViewStyle } from 'react-native';
 
+import { ListTokens } from './tokens';
 import type { InternalTheme, ThemeProp } from '../../theme/types';
 
 type Description =
@@ -26,82 +27,35 @@ export type Style = {
   alignSelf?: 'flex-start' | 'center';
 };
 
-const stylesV3Left = {
-  marginRight: 0,
-  marginLeft: 16,
-};
-
-const stylesV3Right = {
-  marginLeft: 16,
-};
-
-export const getLeftStyles = (
+const getAccessoryStyles = (
   alignToTop: boolean,
   description: Description
-) => {
-  const stylesV3: Style = {
-    ...stylesV3Left,
+): Style => {
+  const style: Style = {
+    marginLeft: ListTokens.leadingSpace,
+    marginRight: 0,
     alignSelf: alignToTop ? 'flex-start' : 'center',
   };
 
-  if (!description) {
-    return {
-      ...styles.iconMarginLeft,
-      ...styles.marginVerticalNone,
-      ...stylesV3,
-    };
-  }
-
-  return {
-    ...styles.iconMarginLeft,
-    ...stylesV3,
-  };
+  return description ? style : { ...style, marginVertical: 0 };
 };
 
-export const getRightStyles = (
-  alignToTop: boolean,
-  description: Description
-) => {
-  const stylesV3: Style = {
-    ...stylesV3Right,
-    alignSelf: alignToTop ? 'flex-start' : 'center',
-  };
+export const getLeftStyles = (alignToTop: boolean, description: Description) =>
+  getAccessoryStyles(alignToTop, description);
 
-  if (!description) {
-    return {
-      ...styles.iconMarginRight,
-      ...styles.marginVerticalNone,
-      ...stylesV3,
-    };
-  }
+export const getRightStyles = (alignToTop: boolean, description: Description) =>
+  getAccessoryStyles(alignToTop, description);
 
-  return {
-    ...styles.iconMarginRight,
-    ...stylesV3,
-  };
-};
-
-const styles = StyleSheet.create({
-  marginVerticalNone: { marginVertical: 0 },
-  iconMarginLeft: { marginLeft: 0, marginRight: 16 },
-  iconMarginRight: { marginRight: 0 },
+/**
+ * Rows change their vertical padding with the number of lines, so a leading
+ * element taller than the default slot needs to know how much of the MD3
+ * height the row already covers.
+ */
+export const ListRowContext = React.createContext<{ verticalPadding: number }>({
+  verticalPadding: ListTokens.verticalPadding,
 });
 
-export const getAccordionColors = ({
-  theme,
-  isExpanded,
-}: {
-  theme: InternalTheme;
-  isExpanded?: boolean;
-}) => {
-  const titleColor = theme.colors.onSurface;
-
-  const descriptionColor = theme.colors.onSurfaceVariant;
-
-  const titleTextColor = isExpanded ? theme.colors?.primary : titleColor;
-
-  return {
-    descriptionColor,
-    titleTextColor,
-  };
-};
+export const getAccordionColors = ({ theme }: { theme: InternalTheme }) => ({
+  titleTextColor: theme.colors[ListTokens.headlineColor],
+  descriptionColor: theme.colors[ListTokens.supportingTextColor],
+});
diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx
index ce387e343a..d9155fb259 100644
--- a/src/components/__tests__/ListAccordion.test.tsx
+++ b/src/components/__tests__/ListAccordion.test.tsx
@@ -2,14 +2,13 @@ import { StyleSheet, View } from 'react-native';
 
 import { describe, expect, it } from '@jest/globals';
 
-import { render, screen } from '../../test-utils';
+import { fireEvent, render, screen } from '../../test-utils';
 import { red500 } from '../../theme/colors';
 import { LightTheme } from '../../theme/schemes';
 import ListAccordion from '../List/ListAccordion';
 import ListAccordionGroup from '../List/ListAccordionGroup';
 import ListIcon from '../List/ListIcon';
 import ListItem from '../List/ListItem';
-import { getAccordionColors } from '../List/utils';
 
 const styles = StyleSheet.create({
   coloring: {
@@ -148,39 +147,102 @@ describe('ListAccordion', () => {
       'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.'
     );
   });
-});
 
-describe('getAccordionColors - description color', () => {
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAccordionColors({
-        theme: LightTheme,
-      })
-    ).toMatchObject({
-      descriptionColor: LightTheme.colors.onSurfaceVariant,
+  it('keeps the title on onSurface when collapsed', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1">
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({
+      color: LightTheme.colors.onSurface,
     });
   });
-});
 
-describe('getAccordionColors - title text color', () => {
-  it('should return theme color, for theme version 3', () => {
-    expect(
-      getAccordionColors({
-        theme: LightTheme,
-      })
-    ).toMatchObject({
-      titleTextColor: LightTheme.colors.onSurface,
+  it('keeps the title on onSurface when expanded', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1" expanded>
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({
+      color: LightTheme.colors.onSurface,
+    });
+  });
+
+  it('hits the container heights without measuring the description', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1" testID="list-accordion">
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByTestId('list-accordion')).toHaveStyle({
+      minHeight: 56,
+      paddingVertical: 8,
+    });
+  });
+
+  it('keeps the two line container height once a description is present', async () => {
+    await render(
+      <ListAccordion
+        title="Accordion item 1"
+        description="Describes the expandable list item"
+        testID="list-accordion"
+      >
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByTestId('list-accordion')).toHaveStyle({
+      minHeight: 72,
+      paddingVertical: 8,
+    });
+
+    await fireEvent(
+      screen.getByText('Describes the expandable list item'),
+      'textLayout',
+      { nativeEvent: { lines: [{}, {}] } }
+    );
+
+    expect(screen.getByTestId('list-accordion')).toHaveStyle({
+      minHeight: 72,
+      paddingVertical: 12,
     });
   });
 
-  it('should return primary color if it is expanded', () => {
+  it('uses the expand token for the chevron', async () => {
+    await render(
+      <ListAccordion title="Accordion item 1">
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
     expect(
-      getAccordionColors({
-        theme: LightTheme,
-        isExpanded: true,
-      })
-    ).toMatchObject({
-      titleTextColor: LightTheme.colors?.primary,
+      screen.getByText('chevron-down', { includeHiddenElements: true })
+    ).toHaveStyle({
+      color: LightTheme.colors.onSurface,
+    });
+  });
+
+  it('applies the theme override to title and description typography', async () => {
+    await render(
+      <ListAccordion
+        title="Accordion item 1"
+        description="Describes the expandable list item"
+        theme={{
+          fonts: { bodyLarge: { fontSize: 99 }, bodyMedium: { fontSize: 77 } },
+        }}
+      >
+        <ListItem title="List item 1" />
+      </ListAccordion>
+    );
+
+    expect(screen.getByText('Accordion item 1')).toHaveStyle({ fontSize: 99 });
+    expect(screen.getByText('Describes the expandable list item')).toHaveStyle({
+      fontSize: 77,
     });
   });
 });
diff --git a/src/components/__tests__/ListItem.test.tsx b/src/components/__tests__/ListItem.test.tsx
index 98e6e0f0fe..f96f87c439 100644
--- a/src/components/__tests__/ListItem.test.tsx
+++ b/src/components/__tests__/ListItem.test.tsx
@@ -5,11 +5,12 @@ import { Text, View } from 'react-native';
 import { expect, it, jest } from '@jest/globals';
 import { userEvent } from '@testing-library/react-native';
 
-import { render, screen } from '../../test-utils';
+import { fireEvent, render, screen } from '../../test-utils';
 import { red500 } from '../../theme/colors';
 import Chip from '../Chip/Chip';
 import IconButton from '../IconButton/IconButton';
 import ListIcon from '../List/ListIcon';
+import ListImage from '../List/ListImage';
 import ListItem from '../List/ListItem';
 
 const styles = StyleSheet.create({
@@ -22,6 +23,14 @@ const styles = StyleSheet.create({
   content: {
     paddingLeft: 0,
   },
+  avatar: {
+    width: 40,
+    height: 40,
+  },
+  image: {
+    width: 56,
+    height: 56,
+  },
 });
 
 const testID = 'list-item';
@@ -177,3 +186,156 @@ it('renders list item with custom content style', async () => {
 
   expect(toJSON()).toMatchSnapshot();
 });
+
+it('hits the one line container height without measuring the description', async () => {
+  await render(<ListItem title="First Item" testID={testID} />);
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 56,
+    paddingVertical: 8,
+  });
+});
+
+it('hits the two and three line container heights without measuring', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 72,
+    paddingVertical: 8,
+  });
+
+  await fireEvent(screen.getByText('Item description'), 'textLayout', {
+    nativeEvent: { lines: [{}, {}] },
+  });
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 72,
+    paddingVertical: 12,
+  });
+});
+
+it('leaves a 40dp leading element on the one line container height', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      left={(props) => (
+        <View testID="left-accessory" style={[props.style, styles.avatar]} />
+      )}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 56,
+    paddingVertical: 8,
+  });
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({ height: 40 });
+});
+
+it('leaves a 56dp leading image on the two line container height', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      left={(props) => (
+        <View testID="left-accessory" style={[props.style, styles.image]} />
+      )}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 72,
+    paddingVertical: 8,
+  });
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({ height: 56 });
+});
+
+it('keeps the container height with a 64dp leading video', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      left={(props) => (
+        <ListImage
+          variant="video"
+          style={props.style}
+          source={{ uri: 'https://www.someurl.com/apple' }}
+        />
+      )}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    minHeight: 56,
+    paddingVertical: 8,
+  });
+});
+
+it('grows the container padding with a 64dp leading video once the description wraps', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      left={(props) => (
+        <ListImage
+          variant="video"
+          style={props.style}
+          source={{ uri: 'https://www.someurl.com/apple' }}
+        />
+      )}
+      testID={testID}
+    />
+  );
+
+  await fireEvent(screen.getByText('Item description'), 'textLayout', {
+    nativeEvent: { lines: [{}, {}] },
+  });
+
+  expect(screen.getByTestId(testID)).toHaveStyle({ paddingVertical: 12 });
+});
+
+it('top aligns the accessories once the description wraps', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      left={(props) => <View testID="left-accessory" style={props.style} />}
+      testID={testID}
+    />
+  );
+
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({
+    alignSelf: 'center',
+  });
+
+  await fireEvent(screen.getByText('Item description'), 'textLayout', {
+    nativeEvent: { lines: [{}, {}] },
+  });
+
+  expect(screen.getByTestId('left-accessory')).toHaveStyle({
+    alignSelf: 'flex-start',
+  });
+});
+
+it('applies the theme override to title and description typography', async () => {
+  await render(
+    <ListItem
+      title="First Item"
+      description="Item description"
+      testID={testID}
+      theme={{
+        fonts: { bodyLarge: { fontSize: 99 }, bodyMedium: { fontSize: 77 } },
+      }}
+    />
+  );
+
+  expect(screen.getByText('First Item')).toHaveStyle({ fontSize: 99 });
+  expect(screen.getByText('Item description')).toHaveStyle({ fontSize: 77 });
+});
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
index c01fcf856a..0e99f586b1 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap
@@ -47,9 +47,14 @@ exports[`renders expanded accordion 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -61,7 +66,6 @@ exports[`renders expanded accordion 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -91,21 +95,22 @@ exports[`renders expanded accordion 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(103, 80, 164, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -115,13 +120,10 @@ exports[`renders expanded accordion 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
           <Text
@@ -132,7 +134,7 @@ exports[`renders expanded accordion 1`] = `
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -192,9 +194,15 @@ exports[`renders expanded accordion 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
           undefined,
         ],
       ]
@@ -205,7 +213,6 @@ exports[`renders expanded accordion 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -237,21 +244,22 @@ exports[`renders expanded accordion 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -311,9 +319,14 @@ exports[`renders list accordion with children 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -325,7 +338,6 @@ exports[`renders list accordion with children 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -402,21 +414,22 @@ exports[`renders list accordion with children 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -426,13 +439,10 @@ exports[`renders list accordion with children 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
           <Text
@@ -443,7 +453,7 @@ exports[`renders list accordion with children 1`] = `
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -518,9 +528,14 @@ exports[`renders list accordion with custom title and description styles 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 72,
+            },
+            false,
             undefined,
           ],
         ]
@@ -532,7 +547,6 @@ exports[`renders list accordion with custom title and description styles 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -562,23 +576,24 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  {
-                    "color": "#f44336",
-                  },
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    {
+                      "color": "#f44336",
+                    },
+                  ],
                 ],
               ]
             }
@@ -596,23 +611,24 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.25,
+                    "lineHeight": 20,
                   },
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                  },
-                  {
-                    "color": "#f44336",
-                  },
+                  [
+                    {
+                      "color": "rgba(73, 69, 79, 1)",
+                    },
+                    {
+                      "color": "#f44336",
+                    },
+                  ],
                 ],
               ]
             }
@@ -622,17 +638,10 @@ exports[`renders list accordion with custom title and description styles 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              {
-                "alignItems": "center",
-                "height": 40,
-                "justifyContent": "center",
-              },
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
           <Text
@@ -643,7 +652,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -718,9 +727,14 @@ exports[`renders list accordion with left items 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 56,
+            },
+            false,
             undefined,
           ],
         ]
@@ -732,7 +746,6 @@ exports[`renders list accordion with left items 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -809,21 +822,22 @@ exports[`renders list accordion with left items 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -833,13 +847,10 @@ exports[`renders list accordion with left items 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              undefined,
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
           <Text
@@ -850,7 +861,7 @@ exports[`renders list accordion with left items 1`] = `
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
@@ -925,9 +936,14 @@ exports[`renders multiline list accordion 1`] = `
           },
           [
             {
-              "paddingRight": 24,
+              "justifyContent": "center",
+              "paddingRight": 16,
               "paddingVertical": 8,
             },
+            {
+              "minHeight": 72,
+            },
+            false,
             undefined,
           ],
         ]
@@ -939,7 +955,6 @@ exports[`renders multiline list accordion 1`] = `
           [
             {
               "flexDirection": "row",
-              "marginVertical": 6,
             },
             undefined,
           ]
@@ -969,21 +984,22 @@ exports[`renders multiline list accordion 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 16,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.5,
+                    "lineHeight": 24,
                   },
-                  {
-                    "color": "rgba(29, 27, 32, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(29, 27, 32, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -1001,21 +1017,22 @@ exports[`renders multiline list accordion 1`] = `
                 },
                 {
                   "color": "rgba(29, 27, 32, 1)",
-                  "fontFamily": "System",
-                  "fontWeight": "400",
-                  "letterSpacing": 0,
-                },
-                {
                   "writingDirection": "ltr",
                 },
                 [
                   {
+                    "fontFamily": "System",
                     "fontSize": 14,
+                    "fontWeight": "400",
+                    "letterSpacing": 0.25,
+                    "lineHeight": 20,
                   },
-                  {
-                    "color": "rgba(73, 69, 79, 1)",
-                  },
-                  undefined,
+                  [
+                    {
+                      "color": "rgba(73, 69, 79, 1)",
+                    },
+                    undefined,
+                  ],
                 ],
               ]
             }
@@ -1025,17 +1042,10 @@ exports[`renders multiline list accordion 1`] = `
         </View>
         <View
           style={
-            [
-              {
-                "marginVertical": 6,
-                "paddingLeft": 8,
-              },
-              {
-                "alignItems": "center",
-                "height": 40,
-                "justifyContent": "center",
-              },
-            ]
+            {
+              "alignSelf": "center",
+              "paddingLeft": 16,
+            }
           }
         >
           <Text
@@ -1046,7 +1056,7 @@ exports[`renders multiline list accordion 1`] = `
             style={
               [
                 {
-                  "color": "rgba(73, 69, 79, 1)",
+                  "color": "rgba(29, 27, 32, 1)",
                   "fontSize": 24,
                 },
                 [
diff --git a/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap b/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
index 927779644c..abf60d8b22 100644
--- a/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListImage.test.tsx.snap
@@ -36,6 +36,9 @@ exports[`renders ListImage with \`video\` variant 1`] = `
         "marginLeft": 0,
         "width": 114,
       },
+      {
+        "marginVertical": 4,
+      },
     ]
   }
 />
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
index e63259b5ef..deae739e3d 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -38,9 +38,15 @@ exports[`renders list item with custom content style 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -52,7 +58,6 @@ exports[`renders list item with custom content style 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -86,21 +91,22 @@ exports[`renders list item with custom content style 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -118,21 +124,22 @@ exports[`renders list item with custom content style 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -180,9 +187,15 @@ exports[`renders list item with custom description 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -194,7 +207,6 @@ exports[`renders list item with custom description 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -226,21 +238,22 @@ exports[`renders list item with custom description 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -560,9 +573,15 @@ exports[`renders list item with custom title and description styles 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -574,7 +593,6 @@ exports[`renders list item with custom title and description styles 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -606,23 +624,24 @@ exports[`renders list item with custom title and description styles 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              {
-                "fontSize": 20,
-              },
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                {
+                  "fontSize": 20,
+                },
+              ],
             ],
           ]
         }
@@ -640,23 +659,24 @@ exports[`renders list item with custom title and description styles 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              {
-                "color": "#f44336",
-              },
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                {
+                  "color": "#f44336",
+                },
+              ],
             ],
           ]
         }
@@ -704,9 +724,15 @@ exports[`renders list item with left and right items 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -718,7 +744,6 @@ exports[`renders list item with left and right items 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -753,21 +778,22 @@ exports[`renders list item with left and right items 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -785,21 +811,22 @@ exports[`renders list item with left and right items 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -893,9 +920,15 @@ exports[`renders list item with left item 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 56,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -907,7 +940,6 @@ exports[`renders list item with left item 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -986,21 +1018,22 @@ exports[`renders list item with left item 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1048,9 +1081,15 @@ exports[`renders list item with right item 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 56,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -1062,7 +1101,6 @@ exports[`renders list item with right item 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1094,21 +1132,22 @@ exports[`renders list item with right item 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1159,9 +1198,15 @@ exports[`renders list item with title and description 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -1173,7 +1218,6 @@ exports[`renders list item with title and description 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1205,21 +1249,22 @@ exports[`renders list item with title and description 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1237,21 +1282,22 @@ exports[`renders list item with title and description 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              undefined,
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                undefined,
+              ],
             ],
           ]
         }
@@ -1299,9 +1345,15 @@ exports[`renders with a description with typeof number 1`] = `
       false,
       [
         {
-          "paddingRight": 24,
+          "justifyContent": "center",
+          "paddingRight": 16,
           "paddingVertical": 8,
         },
+        {
+          "minHeight": 72,
+        },
+        false,
+        false,
         undefined,
       ],
     ]
@@ -1313,7 +1365,6 @@ exports[`renders with a description with typeof number 1`] = `
       [
         {
           "flexDirection": "row",
-          "marginVertical": 6,
           "width": "100%",
         },
         undefined,
@@ -1345,23 +1396,24 @@ exports[`renders with a description with typeof number 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 16,
+                "fontWeight": "400",
+                "letterSpacing": 0.5,
+                "lineHeight": 24,
               },
-              {
-                "color": "rgba(29, 27, 32, 1)",
-              },
-              {
-                "fontSize": 20,
-              },
+              [
+                {
+                  "color": "rgba(29, 27, 32, 1)",
+                },
+                {
+                  "fontSize": 20,
+                },
+              ],
             ],
           ]
         }
@@ -1379,23 +1431,24 @@ exports[`renders with a description with typeof number 1`] = `
             },
             {
               "color": "rgba(29, 27, 32, 1)",
-              "fontFamily": "System",
-              "fontWeight": "400",
-              "letterSpacing": 0,
-            },
-            {
               "writingDirection": "ltr",
             },
             [
               {
+                "fontFamily": "System",
                 "fontSize": 14,
+                "fontWeight": "400",
+                "letterSpacing": 0.25,
+                "lineHeight": 20,
               },
-              {
-                "color": "rgba(73, 69, 79, 1)",
-              },
-              {
-                "color": "#f44336",
-              },
+              [
+                {
+                  "color": "rgba(73, 69, 79, 1)",
+                },
+                {
+                  "color": "#f44336",
+                },
+              ],
             ],
           ]
         }
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
index a64f2e3662..ed6e2c8ca7 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -488,9 +488,15 @@ exports[`renders list section with custom title style 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
           undefined,
         ],
       ]
@@ -502,7 +508,6 @@ exports[`renders list section with custom title style 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -581,21 +586,22 @@ exports[`renders list section with custom title style 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -640,9 +646,15 @@ exports[`renders list section with custom title style 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
           undefined,
         ],
       ]
@@ -654,7 +666,6 @@ exports[`renders list section with custom title style 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -733,21 +744,22 @@ exports[`renders list section with custom title style 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -1246,9 +1258,15 @@ exports[`renders list section with subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
           undefined,
         ],
       ]
@@ -1260,7 +1278,6 @@ exports[`renders list section with subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -1339,21 +1356,22 @@ exports[`renders list section with subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -1398,9 +1416,15 @@ exports[`renders list section with subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
           undefined,
         ],
       ]
@@ -1412,7 +1436,6 @@ exports[`renders list section with subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -1491,21 +1514,22 @@ exports[`renders list section with subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -1964,9 +1988,15 @@ exports[`renders list section without subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
           undefined,
         ],
       ]
@@ -1978,7 +2008,6 @@ exports[`renders list section without subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -2057,21 +2086,22 @@ exports[`renders list section without subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }
@@ -2116,9 +2146,15 @@ exports[`renders list section without subheader 1`] = `
         false,
         [
           {
-            "paddingRight": 24,
+            "justifyContent": "center",
+            "paddingRight": 16,
             "paddingVertical": 8,
           },
+          {
+            "minHeight": 56,
+          },
+          false,
+          false,
           undefined,
         ],
       ]
@@ -2130,7 +2166,6 @@ exports[`renders list section without subheader 1`] = `
         [
           {
             "flexDirection": "row",
-            "marginVertical": 6,
             "width": "100%",
           },
           undefined,
@@ -2209,21 +2244,22 @@ exports[`renders list section without subheader 1`] = `
               },
               {
                 "color": "rgba(29, 27, 32, 1)",
-                "fontFamily": "System",
-                "fontWeight": "400",
-                "letterSpacing": 0,
-              },
-              {
                 "writingDirection": "ltr",
               },
               [
                 {
+                  "fontFamily": "System",
                   "fontSize": 16,
+                  "fontWeight": "400",
+                  "letterSpacing": 0.5,
+                  "lineHeight": 24,
                 },
-                {
-                  "color": "rgba(29, 27, 32, 1)",
-                },
-                undefined,
+                [
+                  {
+                    "color": "rgba(29, 27, 32, 1)",
+                  },
+                  undefined,
+                ],
               ],
             ]
           }