diff --git a/packages/ui/src/components/Box/Box.module.css b/packages/ui/src/components/Box/Box.module.css
index 77200b297f..f5af895f85 100644
--- a/packages/ui/src/components/Box/Box.module.css
+++ b/packages/ui/src/components/Box/Box.module.css
@@ -38,4 +38,16 @@
   .bui-Box[data-surface='3'] {
     background-color: var(--bui-bg-surface-3);
   }
+
+  .bui-Box[data-surface='danger'] {
+    background-color: var(--bui-bg-danger);
+  }
+
+  .bui-Box[data-surface='warning'] {
+    background-color: var(--bui-bg-warning);
+  }
+
+  .bui-Box[data-surface='success'] {
+    background-color: var(--bui-bg-success);
+  }
 }
diff --git a/packages/ui/src/components/Box/Box.stories.tsx b/packages/ui/src/components/Box/Box.stories.tsx
index 2cfc21ca9e..4d64b5c560 100644
--- a/packages/ui/src/components/Box/Box.stories.tsx
+++ b/packages/ui/src/components/Box/Box.stories.tsx
@@ -349,7 +349,7 @@ export const Display = meta.story({
 export const Surfaces = meta.story({
   args: { px: '6', py: '4' },
   render: args => (
-    <Flex align="center">
+    <Flex align="center" style={{ flexWrap: 'wrap' }}>
       <Box {...args}>Default</Box>
       <Box surface="0" {...args}>
         Surface 0
@@ -366,6 +366,15 @@ export const Surfaces = meta.story({
       <Box surface={{ initial: '0', sm: '1' }} {...args}>
         Responsive Surface
       </Box>
+      <Box surface="danger" {...args}>
+        Surface Danger
+      </Box>
+      <Box surface="warning" {...args}>
+        Surface Warning
+      </Box>
+      <Box surface="success" {...args}>
+        Surface Success
+      </Box>
     </Flex>
   ),
 });
diff --git a/packages/ui/src/components/Box/definition.ts b/packages/ui/src/components/Box/definition.ts
index 1bd1db97e6..a9989daf46 100644
--- a/packages/ui/src/components/Box/definition.ts
+++ b/packages/ui/src/components/Box/definition.ts
@@ -49,6 +49,6 @@ export const BoxDefinition = {
     'maxHeight',
   ],
   dataAttributes: {
-    surface: ['0', '1', '2', '3'] as const,
+    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
   },
 } as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Flex/Flex.module.css b/packages/ui/src/components/Flex/Flex.module.css
index 76c0eb33dd..1ca3497cba 100644
--- a/packages/ui/src/components/Flex/Flex.module.css
+++ b/packages/ui/src/components/Flex/Flex.module.css
@@ -39,4 +39,16 @@
   .bui-Flex[data-surface='3'] {
     background-color: var(--bui-bg-surface-3);
   }
+
+  .bui-Flex[data-surface='danger'] {
+    background-color: var(--bui-bg-danger);
+  }
+
+  .bui-Flex[data-surface='warning'] {
+    background-color: var(--bui-bg-warning);
+  }
+
+  .bui-Flex[data-surface='success'] {
+    background-color: var(--bui-bg-success);
+  }
 }
diff --git a/packages/ui/src/components/Flex/Flex.stories.tsx b/packages/ui/src/components/Flex/Flex.stories.tsx
index 411025914d..64c5dd0239 100644
--- a/packages/ui/src/components/Flex/Flex.stories.tsx
+++ b/packages/ui/src/components/Flex/Flex.stories.tsx
@@ -250,7 +250,7 @@ export const Surfaces = meta.story({
     py: '4',
   },
   render: args => (
-    <Flex align="center">
+    <Flex align="center" style={{ flexWrap: 'wrap' }}>
       <Flex {...args}>Default</Flex>
       <Flex surface="0" {...args}>
         Surface 0
@@ -267,6 +267,15 @@ export const Surfaces = meta.story({
       <Flex surface={{ initial: '0', sm: '1' }} {...args}>
         Responsive Surface
       </Flex>
+      <Flex surface="danger" {...args}>
+        Surface Danger
+      </Flex>
+      <Flex surface="warning" {...args}>
+        Surface Warning
+      </Flex>
+      <Flex surface="success" {...args}>
+        Surface Success
+      </Flex>
     </Flex>
   ),
 });
diff --git a/packages/ui/src/components/Flex/definition.ts b/packages/ui/src/components/Flex/definition.ts
index 82e216addc..3f747e153b 100644
--- a/packages/ui/src/components/Flex/definition.ts
+++ b/packages/ui/src/components/Flex/definition.ts
@@ -45,6 +45,6 @@ export const FlexDefinition = {
     'direction',
   ],
   dataAttributes: {
-    surface: ['0', '1', '2', '3'] as const,
+    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
   },
 } as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Grid/Grid.module.css b/packages/ui/src/components/Grid/Grid.module.css
index abe22ad6a9..1861e38101 100644
--- a/packages/ui/src/components/Grid/Grid.module.css
+++ b/packages/ui/src/components/Grid/Grid.module.css
@@ -40,4 +40,19 @@
   .bui-GridItem[data-surface='3'] {
     background-color: var(--bui-bg-surface-3);
   }
+
+  .bui-Grid[data-surface='danger'],
+  .bui-GridItem[data-surface='danger'] {
+    background-color: var(--bui-bg-danger);
+  }
+
+  .bui-Grid[data-surface='warning'],
+  .bui-GridItem[data-surface='warning'] {
+    background-color: var(--bui-bg-warning);
+  }
+
+  .bui-Grid[data-surface='success'],
+  .bui-GridItem[data-surface='success'] {
+    background-color: var(--bui-bg-success);
+  }
 }
diff --git a/packages/ui/src/components/Grid/Grid.stories.tsx b/packages/ui/src/components/Grid/Grid.stories.tsx
index 12943dc5bc..c445b2ae0b 100644
--- a/packages/ui/src/components/Grid/Grid.stories.tsx
+++ b/packages/ui/src/components/Grid/Grid.stories.tsx
@@ -108,7 +108,7 @@ export const Surfaces = meta.story({
   args: { px: '6', py: '4' },
   render: args => (
     <Flex direction="column">
-      <Flex>
+      <Flex style={{ flexWrap: 'wrap' }}>
         <Grid.Root {...args} surface="0">
           Surface 0
         </Grid.Root>
@@ -124,25 +124,60 @@ export const Surfaces = meta.story({
         <Grid.Root {...args} surface={{ initial: '0', sm: '1' }}>
           Responsive Surface
         </Grid.Root>
+        <Grid.Root {...args} surface="danger">
+          Surface Danger
+        </Grid.Root>
+        <Grid.Root {...args} surface="warning">
+          Surface Warning
+        </Grid.Root>
+        <Grid.Root {...args} surface="success">
+          Surface Success
+        </Grid.Root>
       </Flex>
-      <Flex>
+      <Flex style={{ flexWrap: 'wrap' }}>
         <Grid.Root {...args}>
-          <Grid.Item surface="0">Surface 0</Grid.Item>
+          <Grid.Item surface="0" style={{ padding: '4px' }}>
+            Surface 0
+          </Grid.Item>
         </Grid.Root>
         <Grid.Root {...args}>
-          <Grid.Item surface="1">Surface 1</Grid.Item>
+          <Grid.Item surface="1" style={{ padding: '4px' }}>
+            Surface 1
+          </Grid.Item>
         </Grid.Root>
         <Grid.Root {...args}>
-          <Grid.Item surface="2">Surface 2</Grid.Item>
+          <Grid.Item surface="2" style={{ padding: '4px' }}>
+            Surface 2
+          </Grid.Item>
         </Grid.Root>
         <Grid.Root {...args}>
-          <Grid.Item surface="3">Surface 3</Grid.Item>
+          <Grid.Item surface="3" style={{ padding: '4px' }}>
+            Surface 3
+          </Grid.Item>
         </Grid.Root>
         <Grid.Root {...args}>
-          <Grid.Item surface={{ initial: '0', sm: '1' }}>
+          <Grid.Item
+            surface={{ initial: '0', sm: '1' }}
+            style={{ padding: '4px' }}
+          >
             Responsive Surface
           </Grid.Item>
         </Grid.Root>
+        <Grid.Root {...args}>
+          <Grid.Item surface="danger" style={{ padding: '4px' }}>
+            Surface Danger
+          </Grid.Item>
+        </Grid.Root>
+        <Grid.Root {...args}>
+          <Grid.Item surface="warning" style={{ padding: '4px' }}>
+            Surface Warning
+          </Grid.Item>
+        </Grid.Root>
+        <Grid.Root {...args}>
+          <Grid.Item surface="success" style={{ padding: '4px' }}>
+            Surface Success
+          </Grid.Item>
+        </Grid.Root>
       </Flex>
     </Flex>
   ),
diff --git a/packages/ui/src/components/Grid/definition.ts b/packages/ui/src/components/Grid/definition.ts
index 267c6fc872..a6c5c582c7 100644
--- a/packages/ui/src/components/Grid/definition.ts
+++ b/packages/ui/src/components/Grid/definition.ts
@@ -43,7 +43,7 @@ export const GridDefinition = {
     'py',
   ],
   dataAttributes: {
-    surface: ['0', '1', '2', '3'] as const,
+    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
   },
 } as const satisfies ComponentDefinition;
 
@@ -57,6 +57,6 @@ export const GridItemDefinition = {
   },
   utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
   dataAttributes: {
-    surface: ['0', '1', '2', '3'] as const,
+    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,
   },
 } as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 8b2ea94873..8630dd1f44 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -178,4 +178,4 @@ export interface ComponentDefinition {
  * Surface type
  * @public
  */
-export type Surface = '0' | '1' | '2' | '3';
+export type Surface = '0' | '1' | '2' | '3' | 'danger' | 'warning' | 'success';