diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 0a7e289d0a..ec0fad7e7a 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -194,6 +194,9 @@ export const BoxDefinition: {
     'minHeight',
     'maxHeight',
   ];
+  readonly dataAttributes: {
+    readonly surface: readonly ['0', '1', '2', '3'];
+  };
 };
 
 // @public (undocumented)
@@ -223,6 +226,8 @@ export interface BoxProps extends SpaceProps {
   // (undocumented)
   style?: React.CSSProperties;
   // (undocumented)
+  surface?: Responsive<Surface>;
+  // (undocumented)
   width?: Responsive<string>;
 }
 
@@ -657,6 +662,9 @@ export const FlexDefinition: {
     'justify',
     'direction',
   ];
+  readonly dataAttributes: {
+    readonly surface: readonly ['0', '1', '2', '3'];
+  };
 };
 
 // @public (undocumented)
@@ -678,6 +686,8 @@ export interface FlexProps extends SpaceProps {
   justify?: Responsive<'start' | 'center' | 'end' | 'between'>;
   // (undocumented)
   style?: React.CSSProperties;
+  // (undocumented)
+  surface?: Responsive<Surface>;
 }
 
 // @public (undocumented)
@@ -714,6 +724,9 @@ export const GridDefinition: {
     'px',
     'py',
   ];
+  readonly dataAttributes: {
+    readonly surface: readonly ['0', '1', '2', '3'];
+  };
 };
 
 // @public
@@ -722,6 +735,9 @@ export const GridItemDefinition: {
     readonly root: 'bui-GridItem';
   };
   readonly utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'];
+  readonly dataAttributes: {
+    readonly surface: readonly ['0', '1', '2', '3'];
+  };
 };
 
 // @public (undocumented)
@@ -740,6 +756,8 @@ export interface GridItemProps {
   rowSpan?: Responsive<Columns>;
   // (undocumented)
   style?: React.CSSProperties;
+  // (undocumented)
+  surface?: Responsive<Surface>;
 }
 
 // @public (undocumented)
@@ -754,6 +772,8 @@ export interface GridProps extends SpaceProps {
   gap?: Responsive<Space>;
   // (undocumented)
   style?: React.CSSProperties;
+  // (undocumented)
+  surface?: Responsive<Surface>;
 }
 
 // @public
@@ -1229,6 +1249,9 @@ export const SubmenuTrigger: (props: SubmenuTriggerProps) => JSX_2.Element;
 // @public (undocumented)
 export interface SubmenuTriggerProps extends SubmenuTriggerProps_2 {}
 
+// @public
+export type Surface = '0' | '1' | '2' | '3';
+
 // @public (undocumented)
 export const Switch: ForwardRefExoticComponent<
   SwitchProps & RefAttributes<HTMLLabelElement>
diff --git a/packages/ui/src/components/Flex/Flex.module.css b/packages/ui/src/components/Flex/Flex.module.css
index 0d44fbd12f..76c0eb33dd 100644
--- a/packages/ui/src/components/Flex/Flex.module.css
+++ b/packages/ui/src/components/Flex/Flex.module.css
@@ -23,4 +23,20 @@
     /* This helps when using `truncate` on text inside a flex container */
     min-width: 0;
   }
+
+  .bui-Flex[data-surface='0'] {
+    background-color: var(--bui-bg-surface-0);
+  }
+
+  .bui-Flex[data-surface='1'] {
+    background-color: var(--bui-bg-surface-1);
+  }
+
+  .bui-Flex[data-surface='2'] {
+    background-color: var(--bui-bg-surface-2);
+  }
+
+  .bui-Flex[data-surface='3'] {
+    background-color: var(--bui-bg-surface-3);
+  }
 }
diff --git a/packages/ui/src/components/Flex/Flex.stories.tsx b/packages/ui/src/components/Flex/Flex.stories.tsx
index 17ee740997..411025914d 100644
--- a/packages/ui/src/components/Flex/Flex.stories.tsx
+++ b/packages/ui/src/components/Flex/Flex.stories.tsx
@@ -243,3 +243,30 @@ export const WithTextTruncate = meta.story({
     </Flex>
   ),
 });
+
+export const Surfaces = meta.story({
+  args: {
+    px: '6',
+    py: '4',
+  },
+  render: args => (
+    <Flex align="center">
+      <Flex {...args}>Default</Flex>
+      <Flex surface="0" {...args}>
+        Surface 0
+      </Flex>
+      <Flex surface="1" {...args}>
+        Surface 1
+      </Flex>
+      <Flex surface="2" {...args}>
+        Surface 2
+      </Flex>
+      <Flex surface="3" {...args}>
+        Surface 3
+      </Flex>
+      <Flex surface={{ initial: '0', sm: '1' }} {...args}>
+        Responsive Surface
+      </Flex>
+    </Flex>
+  ),
+});
diff --git a/packages/ui/src/components/Flex/Flex.tsx b/packages/ui/src/components/Flex/Flex.tsx
index 878bcfe0ea..6ad248d3a4 100644
--- a/packages/ui/src/components/Flex/Flex.tsx
+++ b/packages/ui/src/components/Flex/Flex.tsx
@@ -20,17 +20,16 @@ import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
 import { FlexDefinition } from './definition';
 import styles from './Flex.module.css';
+import { SurfaceProvider } from '../../hooks/useSurface';
 
 /** @public */
 export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
-  const { classNames, utilityClasses, style, cleanedProps } = useStyles(
-    FlexDefinition,
-    { gap: '4', ...props },
-  );
+  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
+    useStyles(FlexDefinition, { gap: '4', ...props });
 
-  const { className, ...rest } = cleanedProps;
+  const { className, surface, ...rest } = cleanedProps;
 
-  return (
+  const content = (
     <div
       ref={ref}
       className={clsx(
@@ -40,7 +39,14 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
         className,
       )}
       style={style}
+      {...dataAttributes}
       {...rest}
     />
   );
+
+  return surface ? (
+    <SurfaceProvider surface={surface}>{content}</SurfaceProvider>
+  ) : (
+    content
+  );
 });
diff --git a/packages/ui/src/components/Flex/definition.ts b/packages/ui/src/components/Flex/definition.ts
index d6902e2f47..82e216addc 100644
--- a/packages/ui/src/components/Flex/definition.ts
+++ b/packages/ui/src/components/Flex/definition.ts
@@ -44,4 +44,7 @@ export const FlexDefinition = {
     'justify',
     'direction',
   ],
+  dataAttributes: {
+    surface: ['0', '1', '2', '3'] as const,
+  },
 } as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Flex/types.ts b/packages/ui/src/components/Flex/types.ts
index 7699e0ddc5..33bc476f93 100644
--- a/packages/ui/src/components/Flex/types.ts
+++ b/packages/ui/src/components/Flex/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { Responsive, Space, SpaceProps } from '../../types';
+import type { Responsive, Space, SpaceProps, Surface } from '../../types';
 
 /** @public */
 export interface FlexProps extends SpaceProps {
@@ -25,4 +25,5 @@ export interface FlexProps extends SpaceProps {
   direction?: Responsive<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
   className?: string;
   style?: React.CSSProperties;
+  surface?: Responsive<Surface>;
 }
diff --git a/packages/ui/src/components/Grid/Grid.module.css b/packages/ui/src/components/Grid/Grid.module.css
index ff98e9337f..abe22ad6a9 100644
--- a/packages/ui/src/components/Grid/Grid.module.css
+++ b/packages/ui/src/components/Grid/Grid.module.css
@@ -20,4 +20,24 @@
   .bui-Grid {
     display: grid;
   }
+
+  .bui-Grid[data-surface='0'],
+  .bui-GridItem[data-surface='0'] {
+    background-color: var(--bui-bg-surface-0);
+  }
+
+  .bui-Grid[data-surface='1'],
+  .bui-GridItem[data-surface='1'] {
+    background-color: var(--bui-bg-surface-1);
+  }
+
+  .bui-Grid[data-surface='2'],
+  .bui-GridItem[data-surface='2'] {
+    background-color: var(--bui-bg-surface-2);
+  }
+
+  .bui-Grid[data-surface='3'],
+  .bui-GridItem[data-surface='3'] {
+    background-color: var(--bui-bg-surface-3);
+  }
 }
diff --git a/packages/ui/src/components/Grid/Grid.stories.tsx b/packages/ui/src/components/Grid/Grid.stories.tsx
index 56251b6085..12943dc5bc 100644
--- a/packages/ui/src/components/Grid/Grid.stories.tsx
+++ b/packages/ui/src/components/Grid/Grid.stories.tsx
@@ -103,3 +103,47 @@ export const RowAndColumns = meta.story({
     </Grid.Root>
   ),
 });
+
+export const Surfaces = meta.story({
+  args: { px: '6', py: '4' },
+  render: args => (
+    <Flex direction="column">
+      <Flex>
+        <Grid.Root {...args} surface="0">
+          Surface 0
+        </Grid.Root>
+        <Grid.Root {...args} surface="1">
+          Surface 1
+        </Grid.Root>
+        <Grid.Root {...args} surface="2">
+          Surface 2
+        </Grid.Root>
+        <Grid.Root {...args} surface="3">
+          Surface 3
+        </Grid.Root>
+        <Grid.Root {...args} surface={{ initial: '0', sm: '1' }}>
+          Responsive Surface
+        </Grid.Root>
+      </Flex>
+      <Flex>
+        <Grid.Root {...args}>
+          <Grid.Item surface="0">Surface 0</Grid.Item>
+        </Grid.Root>
+        <Grid.Root {...args}>
+          <Grid.Item surface="1">Surface 1</Grid.Item>
+        </Grid.Root>
+        <Grid.Root {...args}>
+          <Grid.Item surface="2">Surface 2</Grid.Item>
+        </Grid.Root>
+        <Grid.Root {...args}>
+          <Grid.Item surface="3">Surface 3</Grid.Item>
+        </Grid.Root>
+        <Grid.Root {...args}>
+          <Grid.Item surface={{ initial: '0', sm: '1' }}>
+            Responsive Surface
+          </Grid.Item>
+        </Grid.Root>
+      </Flex>
+    </Flex>
+  ),
+});
diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx
index aa30d25fc0..b2fc401ca8 100644
--- a/packages/ui/src/components/Grid/Grid.tsx
+++ b/packages/ui/src/components/Grid/Grid.tsx
@@ -20,16 +20,15 @@ import type { GridItemProps, GridProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import { GridDefinition, GridItemDefinition } from './definition';
 import styles from './Grid.module.css';
+import { SurfaceProvider } from '../../hooks/useSurface';
 
 const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  const { classNames, utilityClasses, style, cleanedProps } = useStyles(
-    GridDefinition,
-    { columns: 'auto', gap: '4', ...props },
-  );
+  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
+    useStyles(GridDefinition, { columns: 'auto', gap: '4', ...props });
 
-  const { className, ...rest } = cleanedProps;
+  const { className, surface, ...rest } = cleanedProps;
 
-  return (
+  const content = (
     <div
       ref={ref}
       className={clsx(
@@ -39,20 +38,25 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
         className,
       )}
       style={style}
+      {...dataAttributes}
       {...rest}
     />
   );
+
+  return surface ? (
+    <SurfaceProvider surface={surface}>{content}</SurfaceProvider>
+  ) : (
+    content
+  );
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { classNames, utilityClasses, style, cleanedProps } = useStyles(
-    GridItemDefinition,
-    props,
-  );
+  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =
+    useStyles(GridItemDefinition, props);
 
-  const { className, ...rest } = cleanedProps;
+  const { className, surface, ...rest } = cleanedProps;
 
-  return (
+  const content = (
     <div
       ref={ref}
       className={clsx(
@@ -62,9 +66,16 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
         className,
       )}
       style={style}
+      {...dataAttributes}
       {...rest}
     />
   );
+
+  return surface ? (
+    <SurfaceProvider surface={surface}>{content}</SurfaceProvider>
+  ) : (
+    content
+  );
 });
 
 /** @public */
diff --git a/packages/ui/src/components/Grid/definition.ts b/packages/ui/src/components/Grid/definition.ts
index 201ef4dc66..267c6fc872 100644
--- a/packages/ui/src/components/Grid/definition.ts
+++ b/packages/ui/src/components/Grid/definition.ts
@@ -42,6 +42,9 @@ export const GridDefinition = {
     'px',
     'py',
   ],
+  dataAttributes: {
+    surface: ['0', '1', '2', '3'] as const,
+  },
 } as const satisfies ComponentDefinition;
 
 /**
@@ -53,4 +56,7 @@ export const GridItemDefinition = {
     root: 'bui-GridItem',
   },
   utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
+  dataAttributes: {
+    surface: ['0', '1', '2', '3'] as const,
+  },
 } as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Grid/types.ts b/packages/ui/src/components/Grid/types.ts
index d9d18b4718..f5ce9ca9cb 100644
--- a/packages/ui/src/components/Grid/types.ts
+++ b/packages/ui/src/components/Grid/types.ts
@@ -14,7 +14,13 @@
  * limitations under the License.
  */
 
-import type { Space, SpaceProps, Responsive, Columns } from '../../types';
+import type {
+  Space,
+  SpaceProps,
+  Responsive,
+  Columns,
+  Surface,
+} from '../../types';
 
 /** @public */
 export interface GridProps extends SpaceProps {
@@ -23,6 +29,7 @@ export interface GridProps extends SpaceProps {
   columns?: Responsive<Columns>;
   gap?: Responsive<Space>;
   style?: React.CSSProperties;
+  surface?: Responsive<Surface>;
 }
 
 /** @public */
@@ -34,4 +41,5 @@ export interface GridItemProps {
   colStart?: Responsive<Columns>;
   rowSpan?: Responsive<Columns>;
   style?: React.CSSProperties;
+  surface?: Responsive<Surface>;
 }