diff --git a/example/pubspec.yaml b/example/pubspec.yaml
index 6b8917844..00110aaa1 100644
--- a/example/pubspec.yaml
+++ b/example/pubspec.yaml
@@ -12,6 +12,7 @@ dependencies:
     sdk: flutter
   go_router: ^11.1.2
   google_fonts: ^6.1.0
+  path_drawing: ^1.0.1
   shared_preferences: ^2.2.2
   zeta_flutter:
     path: ../
diff --git a/example/widgetbook/pages/theme/color_widgetbook.dart b/example/widgetbook/pages/theme/color_widgetbook.dart
index 1a7a55535..5afd0cfae 100644
--- a/example/widgetbook/pages/theme/color_widgetbook.dart
+++ b/example/widgetbook/pages/theme/color_widgetbook.dart
@@ -8,7 +8,7 @@ WidgetbookComponent colorWidgetBook() {
     name: 'Colors',
     useCases: [
       WidgetbookUseCase(
-        name: 'Light Mode',
+        name: 'Colors',
         builder: (BuildContext context) {
           return ZetaProvider(
             initialThemeMode: ThemeMode.light,
diff --git a/example/widgetbook/pages/theme/spacing_widgetbook.dart b/example/widgetbook/pages/theme/spacing_widgetbook.dart
new file mode 100644
index 000000000..773ed81d7
--- /dev/null
+++ b/example/widgetbook/pages/theme/spacing_widgetbook.dart
@@ -0,0 +1,138 @@
+import 'package:flutter/material.dart';
+import 'package:path_drawing/path_drawing.dart';
+import 'package:widgetbook/widgetbook.dart';
+
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+WidgetbookComponent spacingWidgetBook() {
+  return WidgetbookComponent(
+    name: 'Spacing',
+    useCases: [
+      WidgetbookUseCase(
+        name: 'Named spaces',
+        builder: (context) => SingleChildScrollView(
+          child: Row(
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: namedSpacings.entries.map((obj) => _SizeObject(obj)).toList(),
+              )
+            ],
+          ),
+        ),
+      ),
+      WidgetbookUseCase(
+        name: 'Value spaces',
+        builder: (context) => SingleChildScrollView(
+          child: Row(
+            children: [
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: valueSpacings.entries.map((obj) => _SizeObject(obj)).toList(),
+              )
+            ],
+          ),
+        ),
+      ),
+    ],
+  );
+}
+
+Map<String, double> namedSpacings = {
+  'xxs': ZetaSpacing.xxs,
+  'xs': ZetaSpacing.xs,
+  's': ZetaSpacing.s,
+  'b': ZetaSpacing.b,
+  'm': ZetaSpacing.m,
+  'l': ZetaSpacing.l,
+  'xl': ZetaSpacing.xl,
+  'xxl': ZetaSpacing.xxl,
+  'xxxl': ZetaSpacing.xxxl,
+};
+Map<String, double> valueSpacings = {
+  'x1': ZetaSpacing.x1,
+  'x2': ZetaSpacing.x2,
+  'x3': ZetaSpacing.x3,
+  'x3.5': ZetaSpacing.x3_5,
+  'x4': ZetaSpacing.x4,
+  'x5': ZetaSpacing.x5,
+  'x6': ZetaSpacing.x6,
+  'x7': ZetaSpacing.x7,
+  'x8': ZetaSpacing.x8,
+  'x9': ZetaSpacing.x9,
+  'x10': ZetaSpacing.x10,
+  'x11': ZetaSpacing.x11,
+  'x12': ZetaSpacing.x12,
+  'x13': ZetaSpacing.x13,
+  'x14': ZetaSpacing.x14,
+  'x16': ZetaSpacing.x16,
+  'x20': ZetaSpacing.x20,
+  'x24': ZetaSpacing.x24,
+};
+
+class _SizeObject extends StatelessWidget {
+  final MapEntry<String, double> size;
+
+  const _SizeObject(this.size);
+
+  @override
+  Widget build(BuildContext context) {
+    final colors = Zeta.of(context).colors;
+    return Container(
+      color: colors.blue.shade30,
+      margin: EdgeInsets.all(ZetaSpacing.m),
+      child: CustomPaint(
+        painter: _TagPainter(color: colors.pink),
+        child: LayoutBuilder(builder: (context, c2) {
+          return Container(
+            margin: EdgeInsets.all(size.value),
+            padding: EdgeInsets.all(ZetaSpacing.s),
+            color: colors.surfacePrimary,
+            child: Text(
+              'ZetaSpacing.' + size.key,
+              style: ZetaTextStyles.titleMedium.apply(
+                color: Zeta.of(context).colors.textDefault,
+                fontStyle: FontStyle.normal,
+                decoration: TextDecoration.none,
+              ),
+            ),
+          );
+        }),
+      ),
+    );
+  }
+}
+
+class _TagPainter extends CustomPainter {
+  const _TagPainter({
+    required this.color,
+  });
+
+  final Color color;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Paint paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.stroke;
+
+    final horizontal = Path()
+      ..moveTo(0, (size.height / 2))
+      ..lineTo(size.width, (size.height / 2))
+      ..close();
+
+    final vertical = Path()
+      ..moveTo(size.width / 2, 0)
+      ..lineTo(size.width / 2, size.height)
+      ..close();
+
+    canvas.drawPath(dashPath(horizontal, dashArray: CircularIntervalList([2, 3])), paint);
+    canvas.drawPath(
+      dashPath(vertical, dashArray: CircularIntervalList([2, 3]), dashOffset: DashOffset.absolute(size.height)),
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
diff --git a/example/widgetbook/pages/theme/typography_widgetbook.dart b/example/widgetbook/pages/theme/typography_widgetbook.dart
index 6bd60751f..e2c281c18 100644
--- a/example/widgetbook/pages/theme/typography_widgetbook.dart
+++ b/example/widgetbook/pages/theme/typography_widgetbook.dart
@@ -4,7 +4,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 WidgetbookComponent textWidgetBook() {
-  final dedicatedSizes = {
+  final Map<String, TextStyle> allTypes = {
     'Display large': ZetaTextStyles.displayLarge,
     'Display medium': ZetaTextStyles.displayMedium,
     'Display small': ZetaTextStyles.displaySmall,
@@ -33,8 +33,8 @@ WidgetbookComponent textWidgetBook() {
           style: context.knobs
               .list(
                 label: 'Sizes',
-                labelBuilder: (p0) => dedicatedSizes.entries.firstWhere((element) => element.value == p0).key,
-                options: dedicatedSizes.values.toList(),
+                labelBuilder: (p0) => allTypes.entries.firstWhere((element) => element.value == p0).key,
+                options: allTypes.values.toList(),
               )
               .apply(
                 color: Zeta.of(context).colors.textDefault,
@@ -51,11 +51,11 @@ WidgetbookComponent textWidgetBook() {
                   children: [
                     Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
-                        children: dedicatedSizes.keys.map(
+                        children: allTypes.keys.map(
                           (e) {
                             return Text(
                               e,
-                              style: dedicatedSizes[e]?.apply(
+                              style: allTypes[e]?.apply(
                                 color: Zeta.of(context).colors.textDefault,
                                 fontStyle: FontStyle.normal,
                                 decoration: TextDecoration.none,
diff --git a/example/widgetbook/widgetbook.dart b/example/widgetbook/widgetbook.dart
index b1bf23594..4ffd920e9 100644
--- a/example/widgetbook/widgetbook.dart
+++ b/example/widgetbook/widgetbook.dart
@@ -13,6 +13,7 @@ import 'pages/theme/color_widgetbook.dart';
 import 'pages/components/banner_widgetbook.dart';
 import 'pages/components/chip_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
+import 'pages/theme/spacing_widgetbook.dart';
 import 'pages/theme/typography_widgetbook.dart';
 import 'utils/zebra.dart';
 
@@ -42,11 +43,12 @@ class HotReload extends StatelessWidget {
         WidgetbookCategory(
           name: 'Theme',
           isInitiallyExpanded: false,
-          children: [textWidgetBook(), colorWidgetBook()]..sort((a, b) => a.name.compareTo(b.name)),
+          children: [textWidgetBook(), colorWidgetBook(), spacingWidgetBook()]
+            ..sort((a, b) => a.name.compareTo(b.name)),
         ),
         WidgetbookCategory(
           name: 'Assets',
-          isInitiallyExpanded: true,
+          isInitiallyExpanded: false,
           children: [iconWidgetbook()]..sort((a, b) => a.name.compareTo(b.name)),
         ),
       ],