diff --git a/packages/ui/src/components/layout/box.tsx b/packages/ui/src/components/layout/box.tsx
index c970dad..858c6cd 100644
--- a/packages/ui/src/components/layout/box.tsx
+++ b/packages/ui/src/components/layout/box.tsx
@@ -1,16 +1,26 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import * as styles from './box.css';
-import { type HTMLFavolinkProps, Slot, forwardRef } from '../../system';
-import { cx, mergeStyles, px } from '../../utils';
+import * as Styles from './box.css';
+import { extractLayoutProps } from './extract-layout-props';
+import type * as CommonStyles from './layout.css';
+import {
+  type HTMLFavolinkPropsWithout,
+  type RemovedProps,
+  Slot,
+  forwardRef,
+} from '../../system';
+import { cx } from '../../utils';
 import { type MarginVariants, extractMarginProps } from '../margin';
 
-type BoxDivProps = HTMLFavolinkProps<'div'> & { as?: 'div' };
+type BoxDivProps = HTMLFavolinkPropsWithout<'div', RemovedProps> & {
+  as?: 'div';
+};
 
-type BoxSpanProps = HTMLFavolinkProps<'span'> & { as: 'span' };
+type BoxSpanProps = HTMLFavolinkPropsWithout<'span', RemovedProps> & {
+  as: 'span';
+};
 
-export type BoxProps = MarginVariants &
-  styles.BoxDynamicVariants &
-  styles.BoxEnumVariants &
+export type BoxProps = CommonStyles.LayoutVariants &
+  MarginVariants &
+  Styles.BoxVariants &
   (BoxDivProps | BoxSpanProps);
 
 export const Box = forwardRef<BoxProps, 'div'>(
@@ -18,36 +28,10 @@ export const Box = forwardRef<BoxProps, 'div'>(
     const {
       as: Tag = 'div',
       asChild,
-      children,
       className,
-      style,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      width,
-      minWidth,
-      maxWidth,
-      height,
-      minHeight,
-      maxHeight,
-      position,
-      inset,
-      top,
-      right,
-      bottom,
-      left,
-      overflow,
-      overflowX,
-      overflowY,
-      flexBasis,
-      flexShrink,
-      flexGrow,
+      display,
       ...restProps
-    } = extractMarginProps(props);
+    } = extractMarginProps(extractLayoutProps(props));
 
     return (
       <Slot
@@ -55,61 +39,11 @@ export const Box = forwardRef<BoxProps, 'div'>(
         ref={forwardedRef}
         className={cx(
           'favolink-box',
-          padding && styles.padding,
-          paddingX && styles.paddingX,
-          paddingY && styles.paddingY,
-          paddingTop && styles.paddingTop,
-          paddingRight && styles.paddingRight,
-          paddingBottom && styles.paddingBottom,
-          paddingLeft && styles.paddingLeft,
-          width && styles.width,
-          minWidth && styles.minWidth,
-          maxWidth && styles.maxWidth,
-          height && styles.width,
-          minHeight && styles.minHeight,
-          maxHeight && styles.maxHeight,
-          inset && styles.inset,
-          top && styles.top,
-          right && styles.right,
-          bottom && styles.bottom,
-          left && styles.left,
-          flexBasis && styles.flexBasis,
-          styles.boxEnumVariants({
-            position,
-            overflow,
-            overflowX,
-            overflowY,
-            flexShrink,
-            flexGrow,
-          }),
+          Styles.boxVariants({ display }),
           className,
         )}
-        style={mergeStyles(
-          assignInlineVars({
-            [styles.dynamicVars.padding]: px(padding),
-            [styles.dynamicVars.paddingX]: px(paddingX),
-            [styles.dynamicVars.paddingY]: px(paddingY),
-            [styles.dynamicVars.paddingTop]: px(paddingTop),
-            [styles.dynamicVars.paddingRight]: px(paddingRight),
-            [styles.dynamicVars.paddingBottom]: px(paddingBottom),
-            [styles.dynamicVars.paddingLeft]: px(paddingLeft),
-            [styles.dynamicVars.width]: px(width),
-            [styles.dynamicVars.minWidth]: px(minWidth),
-            [styles.dynamicVars.maxWidth]: px(maxWidth),
-            [styles.dynamicVars.height]: px(height),
-            [styles.dynamicVars.minHeight]: px(minHeight),
-            [styles.dynamicVars.maxHeight]: px(maxHeight),
-            [styles.dynamicVars.inset]: px(inset),
-            [styles.dynamicVars.top]: px(top),
-            [styles.dynamicVars.right]: px(right),
-            [styles.dynamicVars.bottom]: px(bottom),
-            [styles.dynamicVars.left]: px(left),
-            [styles.dynamicVars.flexBasis]: px(flexBasis),
-          }),
-          style,
-        )}
       >
-        {asChild ? children : <Tag>{children}</Tag>}
+        {asChild ? props.children : <Tag>{props.children}</Tag>}
       </Slot>
     );
   },
diff --git a/packages/ui/src/components/layout/flex.tsx b/packages/ui/src/components/layout/flex.tsx
index 9057024..a85551c 100644
--- a/packages/ui/src/components/layout/flex.tsx
+++ b/packages/ui/src/components/layout/flex.tsx
@@ -1,50 +1,47 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { Box, type BoxProps } from './box';
-import * as styles from './flex.css';
-import { forwardRef } from '../../system';
-import { cx, mergeStyles, px } from '../../utils';
+import { extractFlexProps } from './extract-flex-props';
+import { extractLayoutProps } from './extract-layout-props';
+import type * as Styles from './flex.css';
+import type * as CommonStyles from './layout.css';
+import {
+  type HTMLFavolinkPropsWithout,
+  type RemovedProps,
+  Slot,
+  forwardRef,
+} from '../../system';
+import { cx } from '../../utils';
+import { type MarginVariants, extractMarginProps } from '../margin';
 
-export type FlexProps = BoxProps &
-  styles.FlexDynamicVariants &
-  styles.FlexEnumVariants;
+type FlexDivProps = HTMLFavolinkPropsWithout<'div', RemovedProps> & {
+  as?: 'div';
+};
 
-export const Flex = forwardRef<FlexProps, typeof Box>(
+type FlexSpanProps = HTMLFavolinkPropsWithout<'span', RemovedProps> & {
+  as: 'span';
+};
+
+export type FlexProps = CommonStyles.LayoutVariants &
+  MarginVariants &
+  Styles.FlexVariants &
+  (FlexDivProps | FlexSpanProps);
+
+export const Flex = forwardRef<FlexProps, 'div'>(
   function Flex(props, forwardedRef) {
     const {
+      as: Tag = 'div',
+      asChild,
       className,
-      style,
-      display,
-      direction,
-      align,
-      justify,
-      wrap,
-      gap,
-      gapX,
-      gapY,
+      children,
       ...restProps
-    } = props;
+    } = extractMarginProps(extractFlexProps(extractLayoutProps(props)));
 
     return (
-      <Box
+      <Slot
         {...restProps}
         ref={forwardedRef}
-        className={cx(
-          'favolink-flex',
-          gap && styles.gap,
-          gapX && styles.gapX,
-          gapY && styles.gapY,
-          styles.flexEnumVariants({ display, direction, align, justify, wrap }),
-          className,
-        )}
-        style={mergeStyles(
-          assignInlineVars({
-            [styles.dynamicVars.gap]: px(gap),
-            [styles.dynamicVars.gapX]: px(gapX),
-            [styles.dynamicVars.gapY]: px(gapY),
-          }),
-          style,
-        )}
-      />
+        className={cx('favolink-flex', className)}
+      >
+        {asChild ? children : <Tag>{children}</Tag>}
+      </Slot>
     );
   },
 );