diff --git a/src/__stories__/custom-field-story.tsx b/src/__stories__/custom-field-story.tsx
index 61daad597..97dd1d635 100644
--- a/src/__stories__/custom-field-story.tsx
+++ b/src/__stories__/custom-field-story.tsx
@@ -157,9 +157,8 @@ const Options = ({
                 }
             `}</style>
             {options.map((option) => (
-                <Box
-                    paddingX={16}
-                    paddingY={8}
+                <div
+                    style={{paddingLeft: 16, paddingRight: 16, paddingTop: 8, paddingBottom: 8}}
                     key={option.value}
                     className={classNames('option', {
                         selected: option.value === tentativeValueState,
@@ -188,7 +187,7 @@ const Options = ({
                             {option.value}
                         </Text1>
                     </Touchable>
-                </Box>
+                </div>
             ))}
             {options.length === 0 ? (
                 <Box paddingX={16} paddingY={8}>
diff --git a/src/card.css.ts b/src/card.css.ts
index 7de132996..661373112 100644
--- a/src/card.css.ts
+++ b/src/card.css.ts
@@ -223,6 +223,10 @@ export const mediaCardContent = style([
 ]);
 
 export const mediaCardAsset = style([
+    sprinkles({
+        paddingLeft: {mobile: 16, desktop: 24},
+        paddingTop: {mobile: 16, desktop: 24},
+    }),
     {
         position: 'absolute',
         zIndex: 1,
@@ -352,6 +356,9 @@ export const displayCardContent = style({
     zIndex: 2,
 });
 
+export const displayCardContentWithTopContent = sprinkles({paddingTop: 24});
+export const displayCardContentWithAsset = sprinkles({paddingTop: {mobile: 16, desktop: 24}});
+
 export const displayCardBackground = style({
     position: 'absolute',
     objectFit: 'cover',
@@ -360,8 +367,18 @@ export const displayCardBackground = style({
     zIndex: 0,
 });
 
-export const displayCardGradient = style({
-    background: skinVars.colors.cardContentOverlay,
+export const displayCardContentWrapper = sprinkles({paddingX: 24, paddingBottom: 24});
+
+export const displayCardGradient = style([
+    sprinkles({paddingTop: 40}),
+    {
+        background: skinVars.colors.cardContentOverlay,
+    },
+]);
+
+export const posterCardContentWrapper = sprinkles({
+    paddingX: {mobile: 16, desktop: 24},
+    paddingBottom: 24,
 });
 
 const aspectRatio = createVar();
diff --git a/src/card.tsx b/src/card.tsx
index 5f13cf172..e9e1c32b5 100644
--- a/src/card.tsx
+++ b/src/card.tsx
@@ -596,19 +596,14 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                                 />
                             </div>
                             {asset && (
-                                <Box
+                                <div
                                     className={styles.mediaCardAsset}
-                                    paddingLeft={{mobile: 16, desktop: 24}}
-                                    paddingTop={{mobile: 16, desktop: 24}}
+                                    style={applyCssVars({
+                                        [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
+                                    })}
                                 >
-                                    <div
-                                        style={applyCssVars({
-                                            [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
-                                        })}
-                                    >
-                                        {asset}
-                                    </div>
-                                </Box>
+                                    {asset}
+                                </div>
                             )}
                         </div>
                     </BaseTouchable>
@@ -704,19 +699,14 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MediaCardProps>(
                             />
                         </div>
                         {asset && (
-                            <Box
+                            <div
                                 className={styles.mediaCardAsset}
-                                paddingLeft={{mobile: 16, desktop: 24}}
-                                paddingTop={{mobile: 16, desktop: 24}}
+                                style={applyCssVars({
+                                    [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
+                                })}
                             >
-                                <div
-                                    style={applyCssVars({
-                                        [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
-                                    })}
-                                >
-                                    {asset}
-                                </div>
-                            </Box>
+                                {asset}
+                            </div>
                         )}
                     </div>
                 </BaseTouchable>
@@ -1342,11 +1332,10 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                                         }
                                     />
                                 )}
-                                <Box
-                                    paddingX={24}
-                                    paddingTop={withGradient ? 40 : 0}
-                                    paddingBottom={24}
-                                    className={withGradient ? styles.displayCardGradient : undefined}
+                                <div
+                                    className={classNames(styles.displayCardContentWrapper, {
+                                        [styles.displayCardGradient]: withGradient,
+                                    })}
                                 >
                                     <Stack space={24}>
                                         <DisplayCardContent
@@ -1409,7 +1398,7 @@ const DisplayCard = React.forwardRef<HTMLDivElement, GenericDisplayCardProps>(
                                             />
                                         )}
                                     </Stack>
-                                </Box>
+                                </div>
                             </div>
                         </div>
                     </BaseTouchable>
@@ -1614,13 +1603,15 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                     </div>
                                 </ThemeVariant>
                             )}
-                            <Box
-                                className={styles.displayCardContent}
-                                paddingTop={
+                            <div
+                                className={classNames(
+                                    styles.displayCardContent,
                                     withGradient && !asset && !hasTopActions && !hasVideo
-                                        ? 0
-                                        : {mobile: asset ? 16 : 24, desktop: 24}
-                                }
+                                        ? undefined
+                                        : asset
+                                          ? styles.displayCardContentWithAsset
+                                          : styles.displayCardContentWithTopContent
+                                )}
                             >
                                 {asset ? (
                                     <div
@@ -1642,11 +1633,10 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                         }
                                     />
                                 )}
-                                <Box
-                                    paddingX={{mobile: 16, desktop: 24}}
-                                    paddingTop={withGradient ? 40 : 0}
-                                    paddingBottom={24}
-                                    className={withGradient ? styles.displayCardGradient : undefined}
+                                <div
+                                    className={classNames(styles.posterCardContentWrapper, {
+                                        [styles.displayCardGradient]: withGradient,
+                                    })}
                                 >
                                     <DisplayCardContent
                                         title={
@@ -1710,8 +1700,8 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                                         extra={extra}
                                         extraRef={extraRef}
                                     />
-                                </Box>
-                            </Box>
+                                </div>
+                            </div>
                         </div>
                     </BaseTouchable>
                 </InternalBoxed>
diff --git a/src/chip.css.ts b/src/chip.css.ts
index b3dcc2361..6c6626b48 100644
--- a/src/chip.css.ts
+++ b/src/chip.css.ts
@@ -120,8 +120,25 @@ export const chipInteractiveVariants = styleVariants({
     ],
 });
 
-export const icon = style({color: vars.colors.neutralMedium});
-export const iconActive = style({color: vars.colors.controlActivated});
+export const icon = style([
+    sprinkles({paddingRight: 4}),
+    {color: vars.colors.neutralMedium, paddingRight: 4},
+]);
+
+export const iconActive = style([
+    sprinkles({paddingRight: 4}),
+    {color: vars.colors.controlActivated, paddingRight: 4},
+]);
+
+export const leftPadding = styleVariants({
+    default: [sprinkles({paddingLeft: {mobile: 20, desktop: 12}})],
+    withIcon: [sprinkles({paddingLeft: {mobile: 16, desktop: 8}})],
+});
+
+export const rightPadding = styleVariants({
+    default: [sprinkles({paddingRight: {mobile: 20, desktop: 12}})],
+    withIcon: [sprinkles({paddingRight: {mobile: 16, desktop: 8}})],
+});
 
 globalStyle(`${interactive}:hover:not(${chipActive}) > ${icon}`, {
     '@media': {
diff --git a/src/chip.tsx b/src/chip.tsx
index b96a3176e..e4425ff39 100644
--- a/src/chip.tsx
+++ b/src/chip.tsx
@@ -12,6 +12,7 @@ import {vars} from './skins/skin-contract.css';
 import {useThemeVariant} from './theme-variant-context';
 import Touchable, {BaseTouchable} from './touchable';
 import * as tokens from './text-tokens';
+import {getPrefixedDataAttributes} from './utils/dom';
 
 import type {TouchableComponentProps} from './touchable';
 import type {ExclusifyUnion} from './utils/utility-types';
@@ -44,16 +45,12 @@ const Chip = (props: ChipProps): JSX.Element => {
 
     const overAlternative = useThemeVariant() === 'alternative';
 
-    const paddingLeft = Icon ? ({mobile: 16, desktop: 8} as const) : ({mobile: 20, desktop: 12} as const);
-    const paddingRight = {mobile: 20, desktop: 12} as const;
-    const paddingIcon = {mobile: 16, desktop: 8} as const;
-
     const body = (
         <>
             {Icon && (
-                <Box paddingRight={4} className={active ? styles.iconActive : styles.icon}>
+                <div className={active ? styles.iconActive : styles.icon}>
                     <Icon color="currentColor" size={pxToRem(16)} />
-                </Box>
+                </div>
             )}
             <Box paddingRight={badge ? 8 : 0 || onClose ? 4 : 0}>
                 <Text2 id={id} weight={textPresets.indicator.weight} truncate={1} color="currentColor">
@@ -67,14 +64,14 @@ const Chip = (props: ChipProps): JSX.Element => {
 
     if (onClose) {
         return (
-            <Box
+            <div
                 className={classnames(
                     overAlternative ? styles.chipVariants.overAlternative : styles.chipVariants.default,
-                    styles.chipWrapper
+                    styles.chipWrapper,
+                    Icon ? styles.leftPadding.withIcon : styles.leftPadding.default,
+                    styles.rightPadding.withIcon
                 )}
-                paddingLeft={paddingLeft}
-                paddingRight={paddingIcon}
-                dataAttributes={chipDataAttributes}
+                {...getPrefixedDataAttributes(chipDataAttributes)}
             >
                 {body}
                 <Touchable
@@ -90,7 +87,7 @@ const Chip = (props: ChipProps): JSX.Element => {
                 >
                     <IconCloseRegular size={pxToRem(16)} color={vars.colors.neutralMedium} />
                 </Touchable>
-            </Box>
+            </div>
         );
     }
     const isTouchable = props.href || props.onPress || props.to;
@@ -104,22 +101,22 @@ const Chip = (props: ChipProps): JSX.Element => {
     };
 
     const renderContent = (dataAttributes?: DataAttributes) => (
-        <Box
+        <div
             className={classnames(
                 styles.chipVariants[active ? 'active' : overAlternative ? 'overAlternative' : 'default'],
                 // If the chip is wrapped inside a BaseTouchable, we set inline-flex to the Touchable instead
                 isTouchable ? styles.wrappedContent : styles.chipWrapper,
                 {
                     [styles.chipInteractiveVariants[isDarkMode ? 'dark' : 'light']]: isInteractive,
-                }
+                },
+                Icon ? styles.leftPadding.withIcon : styles.leftPadding.default,
+                badge ? styles.rightPadding.withIcon : styles.rightPadding.default
             )}
-            paddingLeft={paddingLeft}
-            paddingRight={badge ? paddingIcon : paddingRight}
-            dataAttributes={dataAttributes}
+            {...getPrefixedDataAttributes(dataAttributes)}
         >
             {body}
             {renderBadge()}
-        </Box>
+        </div>
     );
 
     if (isTouchable) {
diff --git a/src/community/advanced-data-card.css.ts b/src/community/advanced-data-card.css.ts
index 02c1ab67c..35aaa1c58 100644
--- a/src/community/advanced-data-card.css.ts
+++ b/src/community/advanced-data-card.css.ts
@@ -97,7 +97,7 @@ export const cardContentStyle = style([
     },
 ]);
 
-export const zindex = style({zIndex: -1});
+export const extra = style([sprinkles({paddingTop: 16, paddingBottom: 24}), {zIndex: -1}]);
 
 export const MIN_HEIGHT = 216;
 export const minHeight = style({minHeight: MIN_HEIGHT});
@@ -227,7 +227,7 @@ export const buttonMobile = style([
     },
 ]);
 
-export const footerImage = sprinkles({alignItems: 'center', display: 'flex'});
+export const footerImage = sprinkles({alignItems: 'center', display: 'flex', paddingRight: 16});
 
 export const footerDirection = style([
     sprinkles({
diff --git a/src/community/advanced-data-card.tsx b/src/community/advanced-data-card.tsx
index 86b009ed8..a15927830 100644
--- a/src/community/advanced-data-card.tsx
+++ b/src/community/advanced-data-card.tsx
@@ -166,7 +166,7 @@ const CardFooter = ({button, footerImage, footerText, footerTextLinesMax, button
                     )}
                 >
                     {hasFooterImage && (
-                        <Box paddingRight={16} className={styles.footerImage}>
+                        <div className={styles.footerImage}>
                             <div
                                 style={applyCssVars({
                                     [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
@@ -174,7 +174,7 @@ const CardFooter = ({button, footerImage, footerText, footerTextLinesMax, button
                             >
                                 {footerImage}
                             </div>
-                        </Box>
+                        </div>
                     )}
 
                     {hasFooterText && (
@@ -333,7 +333,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                         </div>
                         <div style={{flexGrow: 1}} />
                         {hasExtras && (
-                            <Box paddingTop={16} paddingBottom={24} width="100%" className={styles.zindex}>
+                            <div className={styles.extra}>
                                 {extra.map((item, index) => {
                                     return (
                                         <div key={index}>
@@ -347,7 +347,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                                         </div>
                                     );
                                 })}
-                            </Box>
+                            </div>
                         )}
                     </Touchable>
                     {hasFooter && <CardFooter {...footerProps} />}
diff --git a/src/hero.tsx b/src/hero.tsx
index 6cc75a503..fb30a8638 100644
--- a/src/hero.tsx
+++ b/src/hero.tsx
@@ -172,13 +172,15 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                                 backgroundColor={CONTENT_BACKGROUND_COLOR[background]}
                             >
                                 <div className={styles.expandedContent}>
-                                    <Box
-                                        paddingTop={24}
-                                        paddingBottom={hasSlideshowBullets ? 48 : noPaddingY ? 0 : 24}
+                                    <div
+                                        style={{
+                                            paddingTop: 24,
+                                            paddingBottom: hasSlideshowBullets ? 48 : noPaddingY ? 0 : 24,
+                                        }}
                                         className={styles.layout}
                                     >
                                         <HeroContent {...rest} />
-                                    </Box>
+                                    </div>
                                 </div>
                             </Layout>
                         </div>
@@ -223,24 +225,28 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                     <GridLayout
                         template="6+6"
                         left={
-                            <Box
-                                paddingTop={noPaddingY ? 0 : 56}
-                                paddingBottom={noPaddingY && !hasSlideshowBullets ? 0 : 56}
+                            <div
+                                style={{
+                                    paddingTop: noPaddingY ? 0 : 56,
+                                    paddingBottom: noPaddingY && !hasSlideshowBullets ? 0 : 56,
+                                }}
                                 className={classnames(styles.container, styles.containerDesktop, {
                                     [styles.containerMinHeight]: !noPaddingY,
                                 })}
                             >
                                 {left}
-                            </Box>
+                            </div>
                         }
                         right={
-                            <Box
-                                paddingTop={noPaddingY ? 0 : 56}
-                                paddingBottom={noPaddingY && !hasSlideshowBullets ? 0 : 56}
+                            <div
+                                style={{
+                                    paddingTop: noPaddingY ? 0 : 56,
+                                    paddingBottom: noPaddingY && !hasSlideshowBullets ? 0 : 56,
+                                }}
                                 className={classnames(styles.container, styles.containerDesktop)}
                             >
                                 {right}
-                            </Box>
+                            </div>
                         }
                     />
                 </Layout>
diff --git a/src/list.css.ts b/src/list.css.ts
index 4f401f6c8..9c0cbcc46 100644
--- a/src/list.css.ts
+++ b/src/list.css.ts
@@ -62,10 +62,19 @@ export const rowContent = sprinkles({
     height: '100%',
 });
 
+export const rowContentPadding = sprinkles({
+    paddingX: 16,
+});
+
 export const content = sprinkles({
     display: 'flex',
     width: '100%',
     minHeight: 72,
+    paddingY: 16,
+});
+
+export const assetContainer = sprinkles({
+    paddingRight: 16,
 });
 
 export const asset = sprinkles({
diff --git a/src/list.tsx b/src/list.tsx
index 03a71d95d..79662bf94 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -106,11 +106,13 @@ export const Content = ({
     const centerY = numTextLines === 1;
 
     return (
-        <Box paddingY={16} className={styles.content} id={labelId}>
+        <div className={styles.content} id={labelId}>
             {asset && (
-                <Box
-                    paddingRight={16}
-                    className={classNames({[styles.center]: centerY, [styles.disabled]: disabled})}
+                <div
+                    className={classNames(styles.assetContainer, {
+                        [styles.center]: centerY,
+                        [styles.disabled]: disabled,
+                    })}
                     // We don't want asset to be readable by screen readers
                     aria-hidden
                 >
@@ -129,7 +131,7 @@ export const Content = ({
                     >
                         {asset}
                     </div>
-                </Box>
+                </div>
             )}
 
             <div
@@ -214,25 +216,25 @@ export const Content = ({
                     )}
 
                     {withChevron && (
-                        <Box
-                            paddingLeft={detail || right ? 4 : 0}
+                        <div
+                            style={{paddingLeft: detail || right ? 4 : 0}}
                             className={classNames(styles.center, {[styles.disabled]: disabled})}
                         >
                             <IconChevron
                                 color={isInverse ? vars.colors.inverse : vars.colors.neutralMedium}
                                 direction="right"
                             />
-                        </Box>
+                        </div>
                     )}
 
                     {control && (
-                        <Box paddingLeft={detail || right ? 8 : 0} className={styles.center}>
+                        <div style={{paddingLeft: detail || right ? 8 : 0}} className={styles.center}>
                             {control}
-                        </Box>
+                        </div>
                     )}
                 </div>
             )}
-        </Box>
+        </div>
     );
 };
 
@@ -616,15 +618,14 @@ const RowContent = React.forwardRef<TouchableElement, RowContentProps>((props, r
     }
 
     return (
-        <Box
-            paddingX={16}
-            className={styles.rowContent}
+        <div
+            className={classNames(styles.rowContent, styles.rowContentPadding)}
             role={role}
-            dataAttributes={dataAttributes}
+            {...getPrefixedDataAttributes(dataAttributes)}
             ref={ref as React.Ref<HTMLDivElement>}
         >
             {renderContent()}
-        </Box>
+        </div>
     );
 });
 
diff --git a/src/menu.css.ts b/src/menu.css.ts
index b754cfc0b..c9cd9bd05 100644
--- a/src/menu.css.ts
+++ b/src/menu.css.ts
@@ -112,11 +112,14 @@ export const menuItemDisabled = style({
     opacity: 0.5,
 });
 
-export const menuSectionDivider = style({
-    ':last-child': {
-        display: 'none',
+export const menuSectionDivider = style([
+    sprinkles({paddingY: 8}),
+    {
+        ':last-child': {
+            display: 'none',
+        },
     },
-});
+]);
 
 export const itemContent = style({
     display: 'flex',
diff --git a/src/menu.tsx b/src/menu.tsx
index 39a40df88..a4b244ea3 100644
--- a/src/menu.tsx
+++ b/src/menu.tsx
@@ -171,9 +171,9 @@ export const MenuSection = ({children}: MenuSectionProps): JSX.Element => {
     return children ? (
         <>
             {children}
-            <Box paddingY={8} className={styles.menuSectionDivider}>
+            <div className={styles.menuSectionDivider}>
                 <Divider />
-            </Box>
+            </div>
         </>
     ) : (
         <></>
diff --git a/src/tag.css.ts b/src/tag.css.ts
index d38deb6e9..40338e82b 100644
--- a/src/tag.css.ts
+++ b/src/tag.css.ts
@@ -19,4 +19,4 @@ export const tag = style([
 
 export const icon = sprinkles({display: 'block'});
 
-export const badge = sprinkles({display: 'inline-flex'});
+export const badge = sprinkles({display: 'inline-flex', paddingLeft: 4});
diff --git a/src/tag.tsx b/src/tag.tsx
index 40e342771..8d385b1f7 100644
--- a/src/tag.tsx
+++ b/src/tag.tsx
@@ -78,9 +78,9 @@ const Tag = ({Icon, children, dataAttributes, type = 'promo', badge}: TagProps):
                     {children}
                 </Text>
                 {badgeValue !== 0 && (
-                    <Box paddingLeft={4} className={styles.badge}>
+                    <div className={styles.badge}>
                         <Badge value={badgeValue} />
-                    </Box>
+                    </div>
                 )}
             </ThemeVariant>
         </span>