diff --git a/stories/spacing.mdx b/stories/spacing.mdx
new file mode 100644
index 0000000000..b64446c7bb
--- /dev/null
+++ b/stories/spacing.mdx
@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/blocks';
+
+
+
+# Spacing
+
+## Relative Values
+
+| token name | value |
+| ---------: | --------- |
+| r1 | 0.0625rem |
+| r2 | 0.125rem |
+| r4 | 0.25rem |
+| r8 | 0.5rem |
+| r10 | 0.625rem |
+| r12 | 0.75rem |
+| r14 | 0.875rem |
+| r16 | 1rem |
+| r20 | 1.25rem |
+| r24 | 1.5rem |
+| r28 | 1.75rem |
+| r32 | 2rem |
+| r40 | 2.5rem |
+
+## Fixed Values
+
+| token name | value |
+| ---------: | ----- |
+| f1 | 1px |
+| f2 | 2px |
+| f4 | 4px |
+| f8 | 8px |
+| f10 | 10px |
+| f12 | 12px |
+| f14 | 14px |
+| f16 | 16px |
+| f20 | 20px |
+| f24 | 24px |
+| f28 | 28px |
+| f32 | 32px |
+| f40 | 40px |
+
+## Utils
+
+We provide 3 utils component for spacing.
+
+A `Box` generic component with all css flex box customisation possible.
+A `Stack` component placing children side by side with a uniform configurable gap in between.
+`Stack` children can optionaly be separated by dividers. A `Stack` can be verticaly or horizontaly aligned.
+A `Wrap` component filling parent width with non configurable uniform gap between children.
diff --git a/stories/spacing.stories.tsx b/stories/spacing.stories.tsx
new file mode 100644
index 0000000000..6d702ec49f
--- /dev/null
+++ b/stories/spacing.stories.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { spacing, Stack, Wrap } from '../src/lib/spacing';
+import { Icon } from '../src/lib/components/icon/Icon.component';
+import {
+ SecondaryText,
+ LargerText,
+ EmphaseText,
+ SmallerSecondaryText,
+} from '../src/lib/components/text/Text.component';
+import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
+import { brand } from '../src/lib/style/theme';
+
+export default {
+ title: 'Components/Spacing Utils',
+ component: Stack,
+};
+
+export const Playground = {
+ render:(args) => (
+
+
+ 6 Accounts
+
+ )
+}
+
+export const StackStory = {
+ render: ({}) => {
+ return (
+ <>
+ Banner example
+
+
+
+
+
+ 6 Accounts
+ for this instance
+
+
+
+
+
+ Replication
+
+
+
+ Expiration
+
+
+
+ Transition
+
+
+
+
+ Active Alerts
+
+
+ No active alerts
+
+
+
+
+ Vertical divided example
+
+
+ Section 1
+ Section 2
+
+
+
+ );
+ },
+};
+
+export const WrapStory = {
+ render: ({}) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+};