diff --git a/.changeset/khaki-seahorses-fly.md b/.changeset/khaki-seahorses-fly.md
index d510f4b6..9416b99f 100644
--- a/.changeset/khaki-seahorses-fly.md
+++ b/.changeset/khaki-seahorses-fly.md
@@ -2,4 +2,4 @@
 'playroom': minor
 ---
 
-Use CSS gap for layout spacing in Playroom UI.
+Use CSS gap and grid for layout spacing in Playroom UI.
diff --git a/src/Playroom/Button/Button.css.ts b/src/Playroom/Button/Button.css.ts
index b450fef8..02bb62dc 100644
--- a/src/Playroom/Button/Button.css.ts
+++ b/src/Playroom/Button/Button.css.ts
@@ -78,7 +78,7 @@ export const positive = style({
 });
 
 export const iconContainer = style([
-  sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+  sprinkles({ position: 'relative', paddingLeft: 'small' }),
   {
     top: '1px',
   },
diff --git a/src/Playroom/CodeEditor/CodeEditor.css.ts b/src/Playroom/CodeEditor/CodeEditor.css.ts
index 8078b632..88686a38 100644
--- a/src/Playroom/CodeEditor/CodeEditor.css.ts
+++ b/src/Playroom/CodeEditor/CodeEditor.css.ts
@@ -296,9 +296,9 @@ globalStyle('.CodeMirror-dialog button', {
   appearance: 'none',
   font: vars.font.scale.standard,
   fontFamily: vars.font.family.standard,
-  marginLeft: vars.space.medium,
-  paddingTop: vars.space.medium,
-  paddingBottom: vars.space.medium,
+  marginLeft: vars.space.small,
+  paddingTop: vars.space.small,
+  paddingBottom: vars.space.small,
   paddingLeft: vars.space.large,
   paddingRight: vars.space.large,
   alignSelf: 'center',
diff --git a/src/Playroom/Frames/Frames.css.ts b/src/Playroom/Frames/Frames.css.ts
index a5ef0cb9..658e1d34 100644
--- a/src/Playroom/Frames/Frames.css.ts
+++ b/src/Playroom/Frames/Frames.css.ts
@@ -4,26 +4,21 @@ import { sprinkles } from '../sprinkles.css';
 export const root = style([
   sprinkles({
     height: 'full',
-    width: 'full',
-    whiteSpace: 'nowrap',
-    display: 'flex',
     boxSizing: 'border-box',
-    paddingY: 'gutter',
-    paddingLeft: 'gutter',
+    display: 'flex',
+    padding: 'gutter',
     textAlign: 'center',
+    overflow: 'auto',
+  }),
+]);
+
+export const framesContainer = style([
+  sprinkles({
+    display: 'flex',
+    gap: 'gutter',
   }),
   {
-    overflowX: 'auto',
-    overflowY: 'hidden',
-    // // Simulate centering when fewer frames than viewport width.
-    '::before': {
-      content: '""',
-      flex: 1,
-    },
-    '::after': {
-      content: '""',
-      flex: 1,
-    },
+    marginInline: 'auto',
   },
 ]);
 
@@ -34,7 +29,6 @@ export const frameContainer = style([
     textAlign: 'left',
     display: 'flex',
     flexDirection: 'column',
-    paddingRight: 'gutter',
   }),
   {},
 ]);
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
index 5ce42a72..07bae466 100644
--- a/src/Playroom/Frames/Frames.tsx
+++ b/src/Playroom/Frames/Frames.tsx
@@ -34,36 +34,38 @@ export default function Frames({ code, themes, widths }: FramesProps) {
 
   return (
     <div ref={scrollingPanelRef} className={styles.root}>
-      {frames.map((frame) => (
-        <div
-          key={`${frame.theme}_${frame.width}`}
-          className={styles.frameContainer}
-        >
-          <div className={styles.frame}>
-            <div className={styles.frameBorder} />
-            <Iframe
-              intersectionRootRef={scrollingPanelRef}
-              src={frameSrc(
-                { themeName: frame.theme, code: renderCode.current },
-                playroomConfig
+      <div className={styles.framesContainer}>
+        {frames.map((frame) => (
+          <div
+            key={`${frame.theme}_${frame.width}`}
+            className={styles.frameContainer}
+          >
+            <div className={styles.frame}>
+              <div className={styles.frameBorder} />
+              <Iframe
+                intersectionRootRef={scrollingPanelRef}
+                src={frameSrc(
+                  { themeName: frame.theme, code: renderCode.current },
+                  playroomConfig
+                )}
+                className={styles.frame}
+                style={{ width: frame.width }}
+                data-testid="previewFrame"
+              />
+            </div>
+            <div className={styles.frameName} data-testid="frameName">
+              {frame.theme === '__PLAYROOM__NO_THEME__' ? (
+                <Text weight="strong">{frame.widthName}</Text>
+              ) : (
+                <Text>
+                  <Strong>{frame.theme}</Strong>
+                  {` \u2013 ${frame.widthName}`}
+                </Text>
               )}
-              className={styles.frame}
-              style={{ width: frame.width }}
-              data-testid="previewFrame"
-            />
+            </div>
           </div>
-          <div className={styles.frameName} data-testid="frameName">
-            {frame.theme === '__PLAYROOM__NO_THEME__' ? (
-              <Text weight="strong">{frame.widthName}</Text>
-            ) : (
-              <Text>
-                <Strong>{frame.theme}</Strong>
-                {` \u2013 ${frame.widthName}`}
-              </Text>
-            )}
-          </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/Playroom/FramesPanel/FramesPanel.css.ts b/src/Playroom/FramesPanel/FramesPanel.css.ts
index ccde74b1..5816a6b4 100644
--- a/src/Playroom/FramesPanel/FramesPanel.css.ts
+++ b/src/Playroom/FramesPanel/FramesPanel.css.ts
@@ -2,11 +2,8 @@ import { calc } from '@vanilla-extract/css-utils';
 import { globalStyle, style } from '@vanilla-extract/css';
 import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
 
-export const title = sprinkles({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  marginBottom: 'medium',
+export const title = style({
+  marginRight: 'auto',
 });
 
 export const reset = style([
@@ -14,7 +11,7 @@ export const reset = style([
     position: 'relative',
     font: 'small',
     border: 0,
-    padding: 'medium',
+    padding: 'small',
     appearance: 'none',
   }),
   {
@@ -22,7 +19,7 @@ export const reset = style([
     backgroundColor: 'transparent',
     outline: 'none',
     textDecoration: 'underline',
-    margin: calc(vars.space.medium).negate().toString(),
+    margin: calc(vars.space.small).negate().toString(),
     '::before': {
       content: '""',
       position: 'absolute',
@@ -46,18 +43,9 @@ export const reset = style([
   },
 ]);
 
-export const label = style([
-  sprinkles({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    userSelect: 'none',
-  }),
-  {
-    height: calc(vars.grid).multiply(9).toString(),
-  },
-]);
+export const label = sprinkles({
+  cursor: 'pointer',
+});
 
 const checkboxSize = '20px';
 export const checkbox = style([
@@ -82,7 +70,6 @@ export const fakeCheckbox = style([
     justifyContent: 'center',
     position: 'relative',
     borderRadius: 'large',
-    marginRight: 'large',
     padding: checkboxPadding,
     pointerEvents: 'none',
   }),
diff --git a/src/Playroom/FramesPanel/FramesPanel.tsx b/src/Playroom/FramesPanel/FramesPanel.tsx
index 2f20a693..25ce095b 100644
--- a/src/Playroom/FramesPanel/FramesPanel.tsx
+++ b/src/Playroom/FramesPanel/FramesPanel.tsx
@@ -8,6 +8,7 @@ import { Text } from '../Text/Text';
 
 import * as styles from './FramesPanel.css';
 import { Helmet } from 'react-helmet';
+import { Inline } from '../Inline/Inline';
 
 const getTitle = (title: string | undefined) => {
   if (title) {
@@ -45,10 +46,12 @@ interface FrameHeadingProps {
   children: ReactNode;
 }
 const FrameHeading = ({ showReset, onReset, children }: FrameHeadingProps) => (
-  <div className={styles.title}>
-    <Heading level="3">{children}</Heading>
+  <Inline space="none" alignY="center">
+    <div className={styles.title}>
+      <Heading level="3">{children}</Heading>
+    </div>
     {showReset && <ResetButton onClick={onReset}>Clear</ResetButton>}
-  </div>
+  </Inline>
 );
 
 interface FrameOptionProps<Option> {
@@ -65,23 +68,25 @@ function FrameOption<Option>({
 }: FrameOptionProps<Option>) {
   return (
     <label className={styles.label}>
-      <input
-        type="checkbox"
-        checked={selected}
-        className={styles.checkbox}
-        onChange={(event) => {
-          if (event.target.checked) {
-            const newVisiblePreference = [...visible, option];
-            onChange(newVisiblePreference);
-          } else {
-            onChange(visible.filter((p) => p !== option));
-          }
-        }}
-      />
-      <div className={styles.fakeCheckbox}>
-        <Checkmark />
-      </div>
-      <Text truncate>{String(option)}</Text>
+      <Inline space="large" alignY="center">
+        <input
+          type="checkbox"
+          checked={selected}
+          className={styles.checkbox}
+          onChange={(event) => {
+            if (event.target.checked) {
+              const newVisiblePreference = [...visible, option];
+              onChange(newVisiblePreference);
+            } else {
+              onChange(visible.filter((p) => p !== option));
+            }
+          }}
+        />
+        <div className={styles.fakeCheckbox}>
+          <Checkmark />
+        </div>
+        <Text truncate>{String(option)}</Text>
+      </Inline>
     </label>
   );
 }
@@ -110,7 +115,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
       <ToolbarPanel>
         <Stack space="xxxlarge">
           <label>
-            <Stack space="medium">
+            <Stack space="small">
               <Heading level="3">Title</Heading>
               <input
                 type="text"
@@ -128,7 +133,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
             </Stack>
           </label>
 
-          <Stack space="none">
+          <Stack space="xlarge">
             <FrameHeading
               showReset={hasFilteredWidths}
               onReset={() => dispatch({ type: 'resetVisibleWidths' })}
@@ -156,7 +161,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
           </Stack>
 
           {hasThemes ? (
-            <Stack space="none">
+            <Stack space="xlarge">
               <FrameHeading
                 showReset={hasFilteredThemes}
                 onReset={() => dispatch({ type: 'resetVisibleThemes' })}
diff --git a/src/Playroom/Inline/Inline.css.ts b/src/Playroom/Inline/Inline.css.ts
index 03ae3579..ca4fba7c 100644
--- a/src/Playroom/Inline/Inline.css.ts
+++ b/src/Playroom/Inline/Inline.css.ts
@@ -1,57 +1,30 @@
-import { calc } from '@vanilla-extract/css-utils';
-import { createVar, style } from '@vanilla-extract/css';
-import { sprinkles, vars } from '../sprinkles.css';
+import { style, createVar, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../sprinkles.css';
 
 const size = createVar();
-
-export const root = style([
-  sprinkles({
-    display: 'flex',
-    flexWrap: 'wrap',
-  }),
-  {
-    marginTop: calc(size).negate().toString(),
-    marginLeft: calc(size).negate().toString(),
-  },
-]);
-
-export const item = style({
-  paddingTop: size,
-  paddingLeft: size,
-});
-
-export const xxsmall = style({
-  vars: {
-    [size]: vars.grid,
-  },
-});
-
-export const xsmall = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(2).toString(),
-  },
+const horizontalAlignment = createVar();
+
+export const gap = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: size,
+  alignItems: horizontalAlignment,
 });
 
-export const small = style({
+export const spaceScale = styleVariants(vars.space, (space) => ({
   vars: {
-    [size]: calc(vars.grid).multiply(3).toString(),
+    [size]: space,
   },
-});
-
-export const medium = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(4).toString(),
-  },
-});
-
-export const large = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(5).toString(),
-  },
-});
+}));
 
-export const xlarge = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(6).toString(),
+export const horizontalAlignmentScale = styleVariants(
+  {
+    top: 'flex-start',
+    center: 'center',
+    bottom: 'flex-end',
   },
-});
+  (alignment) => ({
+    alignItems: alignment,
+  })
+);
diff --git a/src/Playroom/Inline/Inline.tsx b/src/Playroom/Inline/Inline.tsx
index f25e9f84..2e2a15bf 100644
--- a/src/Playroom/Inline/Inline.tsx
+++ b/src/Playroom/Inline/Inline.tsx
@@ -1,4 +1,4 @@
-import { type ReactElement, Children } from 'react';
+import type { ReactElement } from 'react';
 import classnames from 'classnames';
 
 import * as styles from './Inline.css';
@@ -13,22 +13,18 @@ type ReactNodeNoStrings =
 
 interface Props {
   children: ReactNodeNoStrings;
-  space:
-    | 'none'
-    | 'xxsmall'
-    | 'xsmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'xlarge';
+  space: keyof typeof styles.spaceScale;
+  alignY?: keyof typeof styles.horizontalAlignmentScale;
 }
 
-export const Inline = ({ children, space }: Props) => (
-  <div className={classnames(styles.root, space !== 'none' && styles[space])}>
-    {Children.toArray(children).map((item, index) => (
-      <div key={index} className={styles.item}>
-        {item}
-      </div>
-    ))}
+export const Inline = ({ children, space, alignY }: Props) => (
+  <div
+    className={classnames(
+      styles.gap,
+      styles.spaceScale[space],
+      alignY ? styles.horizontalAlignmentScale[alignY] : undefined
+    )}
+  >
+    {children}
   </div>
 );
diff --git a/src/Playroom/PreviewPanel/PreviewPanel.tsx b/src/Playroom/PreviewPanel/PreviewPanel.tsx
index 9b6e3698..869c11b4 100644
--- a/src/Playroom/PreviewPanel/PreviewPanel.tsx
+++ b/src/Playroom/PreviewPanel/PreviewPanel.tsx
@@ -43,7 +43,7 @@ export default ({ themes, visibleThemes }: PreviewPanelProps) => {
           />
         ) : null}
 
-        <Inline space="small">
+        <Inline space="large">
           <Button
             as="a"
             href={prototypeUrl}
diff --git a/src/Playroom/SettingsPanel/SettingsPanel.css.ts b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
index 6c4cb202..6a2cf35d 100644
--- a/src/Playroom/SettingsPanel/SettingsPanel.css.ts
+++ b/src/Playroom/SettingsPanel/SettingsPanel.css.ts
@@ -1,5 +1,5 @@
 import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
 export const fieldset = sprinkles({
   border: 0,
@@ -7,23 +7,23 @@ export const fieldset = sprinkles({
   padding: 'none',
 });
 
-export const radioContainer = sprinkles({
-  display: 'flex',
-  paddingTop: 'medium',
-});
-
-export const keyboardShortcutRow = style({
-  display: 'flex',
+export const keyboardShortcutsRow = sprinkles({
   alignItems: 'center',
 });
 
-globalStyle(`${keyboardShortcutRow} > *:first-child`, {
-  flex: 1,
+export const keyboardShortcutTitle = style({
+  marginRight: 'auto',
 });
 
-globalStyle(`${keyboardShortcutRow} > *:nth-child(2)`, {
-  flex: '0 0 43%',
-});
+export const keyboardShortcutKeys = style([
+  {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+  },
+  sprinkles({
+    gap: 'xsmall',
+  }),
+]);
 
 export const kbd = style([
   sprinkles({
diff --git a/src/Playroom/SettingsPanel/SettingsPanel.tsx b/src/Playroom/SettingsPanel/SettingsPanel.tsx
index 62c3ee0c..c4c3cd2a 100644
--- a/src/Playroom/SettingsPanel/SettingsPanel.tsx
+++ b/src/Playroom/SettingsPanel/SettingsPanel.tsx
@@ -71,12 +71,14 @@ const KeyboardShortcut = ({
   ));
 
   return (
-    <div className={styles.keyboardShortcutRow}>
-      <Text>{description}</Text>
+    <Inline space="small" alignY="center">
+      <div className={styles.keyboardShortcutTitle}>
+        <Text>{description}</Text>
+      </div>
       <Text size={isMac() ? 'large' : 'standard'}>
-        <Inline space="xxsmall">{shortcutSegments}</Inline>
+        <div className={styles.keyboardShortcutKeys}>{shortcutSegments}</div>
       </Text>
-    </div>
+    </Inline>
   );
 };
 
@@ -89,75 +91,79 @@ export default React.memo(() => {
     <ToolbarPanel>
       <Stack space="xxxlarge">
         <fieldset className={styles.fieldset}>
-          <legend>
-            <Heading level="3">Editor Position</Heading>
-          </legend>
-          <div className={styles.radioContainer}>
-            {['Bottom', 'Right'].map((option) => (
-              <div key={option}>
-                <input
-                  type="radio"
-                  name="editorPosition"
-                  id={`editorPosition${option}`}
-                  value={option.toLowerCase()}
-                  title={option}
-                  checked={option.toLowerCase() === editorPosition}
-                  onChange={() =>
-                    dispatch({
-                      type: 'updateEditorPosition',
-                      payload: {
-                        position: option.toLowerCase() as EditorPosition,
-                      },
-                    })
-                  }
-                  className={styles.realRadio}
-                />
-                <label
-                  htmlFor={`editorPosition${option}`}
-                  className={styles.label}
-                  title={option}
-                >
-                  {positionIcon[option.toLowerCase() as EditorPosition]}
-                </label>
-              </div>
-            ))}
-          </div>
+          <Stack space="small">
+            <legend>
+              <Heading level="3">Editor Position</Heading>
+            </legend>
+            <Inline space="none">
+              {['Bottom', 'Right'].map((option) => (
+                <div key={option}>
+                  <input
+                    type="radio"
+                    name="editorPosition"
+                    id={`editorPosition${option}`}
+                    value={option.toLowerCase()}
+                    title={option}
+                    checked={option.toLowerCase() === editorPosition}
+                    onChange={() =>
+                      dispatch({
+                        type: 'updateEditorPosition',
+                        payload: {
+                          position: option.toLowerCase() as EditorPosition,
+                        },
+                      })
+                    }
+                    className={styles.realRadio}
+                  />
+                  <label
+                    htmlFor={`editorPosition${option}`}
+                    className={styles.label}
+                    title={option}
+                  >
+                    {positionIcon[option.toLowerCase() as EditorPosition]}
+                  </label>
+                </div>
+              ))}
+            </Inline>
+          </Stack>
         </fieldset>
 
         <fieldset className={styles.fieldset}>
-          <legend>
-            <Heading level="3">Color Scheme</Heading>
-          </legend>
-          <div className={styles.radioContainer}>
-            {['Light', 'Dark', 'System'].map((option) => (
-              <div key={option}>
-                <input
-                  type="radio"
-                  name="colorScheme"
-                  id={`colorScheme${option}`}
-                  value={option.toLowerCase()}
-                  title={option}
-                  checked={option.toLowerCase() === colorScheme}
-                  onChange={() =>
-                    dispatch({
-                      type: 'updateColorScheme',
-                      payload: {
-                        colorScheme: option.toLowerCase() as ColorScheme,
-                      },
-                    })
-                  }
-                  className={styles.realRadio}
-                />
-                <label
-                  htmlFor={`colorScheme${option}`}
-                  className={styles.label}
-                  title={option}
-                >
-                  {colorModeIcon[option.toLowerCase() as ColorScheme]}
-                </label>
-              </div>
-            ))}
-          </div>
+          <Stack space="small">
+            <legend>
+              <Heading level="3">Color Scheme</Heading>
+            </legend>
+            <Inline space="none">
+              {['Light', 'Dark', 'System'].map((option) => (
+                <div key={option}>
+                  <input
+                    type="radio"
+                    name="colorScheme"
+                    id={`colorScheme${option}`}
+                    value={option.toLowerCase()}
+                    title={option}
+                    checked={option.toLowerCase() === colorScheme}
+                    onChange={() =>
+                      dispatch({
+                        type: 'updateColorScheme',
+                        payload: {
+                          colorScheme: option.toLowerCase() as ColorScheme,
+                        },
+                      })
+                    }
+                    className={styles.realRadio}
+                  />
+                  <label
+                    htmlFor={`colorScheme${option}`}
+                    className={styles.label}
+                    title={option}
+                  >
+                    {colorModeIcon[option.toLowerCase() as ColorScheme]}
+                  </label>
+                </div>
+              ))}
+            </Inline>
+          </Stack>
         </fieldset>
 
         <Stack space="xlarge">
diff --git a/src/Playroom/Snippets/Snippets.css.ts b/src/Playroom/Snippets/Snippets.css.ts
index 65fb4921..c81686c2 100644
--- a/src/Playroom/Snippets/Snippets.css.ts
+++ b/src/Playroom/Snippets/Snippets.css.ts
@@ -16,7 +16,7 @@ export const fieldContainer = style([
     right: 0,
     display: 'flex',
     alignItems: 'center',
-    paddingX: 'medium',
+    paddingX: 'small',
   }),
   {
     height: toolbarItemSize,
@@ -32,7 +32,7 @@ export const snippetsContainer = style([
     right: 0,
     overflow: 'auto',
     padding: 'none',
-    margin: 'medium',
+    margin: 'small',
   }),
   {
     top: toolbarItemSize,
diff --git a/src/Playroom/sprinkles.css.ts b/src/Playroom/sprinkles.css.ts
index 8c8659b3..4603c78f 100644
--- a/src/Playroom/sprinkles.css.ts
+++ b/src/Playroom/sprinkles.css.ts
@@ -38,7 +38,8 @@ export const vars = createGlobalTheme(':root', {
     none: '0',
     xxsmall: '2px',
     xsmall: '4px',
-    medium: '6px',
+    small: '6px',
+    medium: '8px',
     large: '12px',
     xlarge: '16px',
     xxlarge: '20px',
@@ -108,6 +109,7 @@ const responsiveProperties = defineProperties({
       'space-between',
     ],
     alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    gap: vars.space,
     paddingTop: vars.space,
     paddingBottom: vars.space,
     paddingLeft: vars.space,