diff --git a/bskyembed/src/components/embed.tsx b/bskyembed/src/components/embed.tsx
index 52618a89da..ddaa7bf03e 100644
--- a/bskyembed/src/components/embed.tsx
+++ b/bskyembed/src/components/embed.tsx
@@ -330,7 +330,7 @@ function ExternalEmbed({
       {content.external.thumb && (
         <img
           src={content.external.thumb}
-          className="aspect-[1.91/1] object-cover"
+          className="aspect-[1200/630] object-cover"
         />
       )}
       <div className="py-3 px-4">
@@ -435,7 +435,7 @@ function StarterPackEmbed({
     <Link
       href={starterPackHref}
       className="w-full rounded-xl overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
-      <img src={imageUri} className="aspect-[1.91/1] object-cover" />
+      <img src={imageUri} className="aspect-[1200/630] object-cover" />
       <div className="py-3 px-4">
         <div className="flex space-x-2 items-center">
           <img src={starterPackIcon} className="w-10 h-10" />
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts
index 3168b1da18..6d40962e01 100644
--- a/src/alf/atoms.ts
+++ b/src/alf/atoms.ts
@@ -1,6 +1,7 @@
 import {type StyleProp, type ViewStyle} from 'react-native'
 import {atoms as baseAtoms} from '@bsky.app/alf'
 
+import {CARD_ASPECT_RATIO} from '#/lib/constants'
 import {native, platform, web} from '#/alf/util/platform'
 import * as Layout from '#/components/Layout'
 
@@ -31,6 +32,16 @@ export const atoms = {
     backgroundColor: 'transparent',
   },
 
+  /**
+   * Aspect ratios
+   */
+  aspect_square: {
+    aspectRatio: 1,
+  },
+  aspect_card: {
+    aspectRatio: CARD_ASPECT_RATIO,
+  },
+
   /*
    * Transition
    */
@@ -67,7 +78,7 @@ export const atoms = {
   }),
 
   /*
-   * Animaations
+   * Animations
    */
   fade_in: web({
     animation: 'fadeIn ease-out 0.15s',
diff --git a/src/components/InterestTabs.tsx b/src/components/InterestTabs.tsx
index aec4217681..6b4a46837f 100644
--- a/src/components/InterestTabs.tsx
+++ b/src/components/InterestTabs.tsx
@@ -258,7 +258,7 @@ export function InterestTabs({
               t.atoms.border_contrast_low,
               t.atoms.bg,
               a.h_full,
-              {aspectRatio: 1},
+              a.aspect_square,
               a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowLeft} />
@@ -292,7 +292,7 @@ export function InterestTabs({
               t.atoms.border_contrast_low,
               t.atoms.bg,
               a.h_full,
-              {aspectRatio: 1},
+              a.aspect_square,
               a.rounded_full,
             ]}>
             <ButtonIcon icon={ArrowRight} />
diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx
index c2603a4d78..d8d2e430f2 100644
--- a/src/components/MediaPreview.tsx
+++ b/src/components/MediaPreview.tsx
@@ -87,7 +87,7 @@ export function ImageItem({
 }) {
   const t = useTheme()
   return (
-    <View style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}>
+    <View style={[a.relative, a.flex_1, a.aspect_square, {maxWidth: 100}]}>
       <Image
         key={thumbnail}
         source={{uri: thumbnail}}
@@ -131,7 +131,8 @@ export function VideoItem({
         style={[
           {backgroundColor: 'black'},
           a.flex_1,
-          {aspectRatio: 1, maxWidth: 100},
+          a.aspect_square,
+          {maxWidth: 100},
           a.justify_center,
           a.align_center,
         ]}>
diff --git a/src/components/Post/Embed/ExternalEmbed/index.tsx b/src/components/Post/Embed/ExternalEmbed/index.tsx
index 7911df726b..4e970ad7f8 100644
--- a/src/components/Post/Embed/ExternalEmbed/index.tsx
+++ b/src/components/Post/Embed/ExternalEmbed/index.tsx
@@ -97,9 +97,7 @@ export const ExternalEmbed = ({
           ]}>
           {imageUri && !embedPlayerParams ? (
             <Image
-              style={{
-                aspectRatio: 1.91,
-              }}
+              style={[a.aspect_card]}
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
             />
diff --git a/src/components/StarterPack/ShareDialog.tsx b/src/components/StarterPack/ShareDialog.tsx
index 6c282f117b..dd0373b9f5 100644
--- a/src/components/StarterPack/ShareDialog.tsx
+++ b/src/components/StarterPack/ShareDialog.tsx
@@ -91,8 +91,8 @@ function ShareDialogInner({
               source={{uri: imageUrl}}
               style={[
                 a.rounded_sm,
+                a.aspect_card,
                 {
-                  aspectRatio: 1200 / 630,
                   transform: [{scale: gtMobile ? 0.85 : 1}],
                   marginTop: gtMobile ? -20 : 0,
                 },
diff --git a/src/components/StarterPack/StarterPackCard.tsx b/src/components/StarterPack/StarterPackCard.tsx
index e58c2ed271..18b994523f 100644
--- a/src/components/StarterPack/StarterPackCard.tsx
+++ b/src/components/StarterPack/StarterPackCard.tsx
@@ -191,7 +191,7 @@ export function Embed({
       <Link starterPack={starterPack}>
         <Image
           source={imageUri}
-          style={[a.w_full, {aspectRatio: 1.91}]}
+          style={[a.w_full, a.aspect_card]}
           accessibilityIgnoresInvertColors={true}
         />
         <View style={[a.px_sm, a.py_md]}>
diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
index d26cec2c6d..6ac87f4e02 100644
--- a/src/components/dialogs/GifSelect.tsx
+++ b/src/components/dialogs/GifSelect.tsx
@@ -300,7 +300,8 @@ export function GifPreview({
             a.flex_1,
             a.mb_sm,
             a.rounded_sm,
-            {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
+            a.aspect_card,
+            {opacity: pressed ? 0.8 : 1},
             t.atoms.bg_contrast_25,
           ]}
           source={{
diff --git a/src/components/live/LiveStatusDialog.tsx b/src/components/live/LiveStatusDialog.tsx
index 835b69e286..f15650e485 100644
--- a/src/components/live/LiveStatusDialog.tsx
+++ b/src/components/live/LiveStatusDialog.tsx
@@ -102,7 +102,7 @@ export function LiveStatus({
           style={[
             t.atoms.bg_contrast_25,
             a.w_full,
-            {aspectRatio: 1.91},
+            a.aspect_card,
             android([
               a.overflow_hidden,
               {
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 0ce6f88b8d..c777480fc0 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -17,6 +17,7 @@ export const EMBED_SERVICE = 'https://embed.bsky.app'
 export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
 export const BSKY_DOWNLOAD_URL = 'https://bsky.app/download'
 export const STARTER_PACK_MAX_SIZE = 150
+export const CARD_ASPECT_RATIO = 1200 / 630
 
 // HACK
 // Yes, this is exactly what it looks like. It's a hard-coded constant
diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx
index 3ed268a575..98a95bda60 100644
--- a/src/screens/Onboarding/StepFinished.tsx
+++ b/src/screens/Onboarding/StepFinished.tsx
@@ -401,7 +401,7 @@ function ValueProposition({
             ]}>
             <Image
               source={image}
-              style={[a.w_full, {aspectRatio: 1}]}
+              style={[a.w_full, a.aspect_square]}
               alt={alt}
               accessibilityIgnoresInvertColors={false} // I guess we do need it to blend into the background
             />
diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx
index 757d952a19..e1d125744c 100644
--- a/src/view/com/util/images/ImageLayoutGrid.tsx
+++ b/src/view/com/util/images/ImageLayoutGrid.tsx
@@ -67,7 +67,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       const containerRefs = [containerRef1, containerRef2]
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
-          <View style={[a.flex_1, {aspectRatio: 1}]}>
+          <View style={[a.flex_1, a.aspect_square]}>
             <GalleryItem
               {...props}
               index={0}
@@ -76,7 +76,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               thumbDimsRef={thumbDimsRef}
             />
           </View>
-          <View style={[a.flex_1, {aspectRatio: 1}]}>
+          <View style={[a.flex_1, a.aspect_square]}>
             <GalleryItem
               {...props}
               index={1}
@@ -93,7 +93,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
       const containerRefs = [containerRef1, containerRef2, containerRef3]
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
-          <View style={[a.flex_1, {aspectRatio: 1}]}>
+          <View style={[a.flex_1, a.aspect_square]}>
             <GalleryItem
               {...props}
               index={0}
@@ -102,7 +102,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               thumbDimsRef={thumbDimsRef}
             />
           </View>
-          <View style={[a.flex_1, {aspectRatio: 1}, gap]}>
+          <View style={[a.flex_1, a.aspect_square, gap]}>
             <View style={[a.flex_1]}>
               <GalleryItem
                 {...props}