From ca343e2e17c509ba365ba6b1f1d730dd91964092 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 15:56:09 +0000
Subject: [PATCH 01/10] Update space props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.stories.tsx  |  31 +-
 packages/canon/src/components/Box/Box.tsx     |  17 +-
 .../canon/src/components/Container/types.ts   |  12 +-
 packages/canon/src/css/utilities.css          |  18 +
 packages/canon/src/css/utilities/2xl.css      | 480 ----------------
 packages/canon/src/css/utilities/lg.css       | 480 ----------------
 packages/canon/src/css/utilities/m.css        | 422 ++++++++++++++
 packages/canon/src/css/utilities/mb.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/md.css       | 480 ----------------
 packages/canon/src/css/utilities/ml.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/mr.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/mt.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/mx.css       | 524 ++++++++++++++++++
 packages/canon/src/css/utilities/my.css       | 524 ++++++++++++++++++
 packages/canon/src/css/utilities/p.css        | 422 ++++++++++++++
 packages/canon/src/css/utilities/pb.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/pl.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/pr.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/pt.css       | 422 ++++++++++++++
 packages/canon/src/css/utilities/px.css       | 524 ++++++++++++++++++
 packages/canon/src/css/utilities/py.css       | 524 ++++++++++++++++++
 packages/canon/src/css/utilities/sm.css       | 480 ----------------
 packages/canon/src/css/utilities/xl.css       | 480 ----------------
 packages/canon/src/css/utilities/xs.css       | 480 ----------------
 packages/canon/src/props/margin.ts            | 168 ++++++
 packages/canon/src/props/padding.ts           | 169 ++++++
 packages/canon/src/props/prop-def.ts          | 107 ++++
 packages/canon/src/props/spacing.ts           |  41 ++
 packages/canon/src/utils/extractProps.ts      |  71 +++
 29 files changed, 6919 insertions(+), 2911 deletions(-)
 create mode 100644 packages/canon/src/css/utilities/m.css
 create mode 100644 packages/canon/src/css/utilities/mb.css
 create mode 100644 packages/canon/src/css/utilities/ml.css
 create mode 100644 packages/canon/src/css/utilities/mr.css
 create mode 100644 packages/canon/src/css/utilities/mt.css
 create mode 100644 packages/canon/src/css/utilities/mx.css
 create mode 100644 packages/canon/src/css/utilities/my.css
 create mode 100644 packages/canon/src/css/utilities/p.css
 create mode 100644 packages/canon/src/css/utilities/pb.css
 create mode 100644 packages/canon/src/css/utilities/pl.css
 create mode 100644 packages/canon/src/css/utilities/pr.css
 create mode 100644 packages/canon/src/css/utilities/pt.css
 create mode 100644 packages/canon/src/css/utilities/px.css
 create mode 100644 packages/canon/src/css/utilities/py.css
 create mode 100644 packages/canon/src/props/margin.ts
 create mode 100644 packages/canon/src/props/padding.ts
 create mode 100644 packages/canon/src/props/prop-def.ts
 create mode 100644 packages/canon/src/props/spacing.ts
 create mode 100644 packages/canon/src/utils/extractProps.ts

diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 52dd7bc782..5958e2a739 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -23,9 +23,6 @@ import { Inline } from '../Inline';
 const meta = {
   title: 'Components/Box',
   component: Box,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
     as: {
       control: { type: 'select' },
@@ -216,27 +213,27 @@ export const Padding: Story = {
   render: args => (
     <Stack align="center" gap="md">
       <Inline alignY="center" gap="md">
-        <Box padding="md" style={styleInsideBox}>
+        <Box p="3" style={styleInsideBox}>
           <Box {...args}>Padding</Box>
         </Box>
-        <Box paddingX="md" style={styleInsideBox}>
+        <Box px="3" style={styleInsideBox}>
           <Box {...args}>Padding X</Box>
         </Box>
-        <Box paddingY="md" style={styleInsideBox}>
+        <Box py="3" style={styleInsideBox}>
           <Box {...args}>Padding Y</Box>
         </Box>
       </Inline>
       <Inline alignY="center" gap="md">
-        <Box paddingTop="md" style={styleInsideBox}>
+        <Box pt="3" style={styleInsideBox}>
           <Box {...args}>Padding Top</Box>
         </Box>
-        <Box paddingRight="md" style={styleInsideBox}>
+        <Box pr="3" style={styleInsideBox}>
           <Box {...args}>Padding Right</Box>
         </Box>
-        <Box paddingBottom="md" style={styleInsideBox}>
+        <Box pb="3" style={styleInsideBox}>
           <Box {...args}>Padding Bottom</Box>
         </Box>
-        <Box paddingLeft="md" style={styleInsideBox}>
+        <Box pl="3" style={styleInsideBox}>
           <Box {...args}>Padding Left</Box>
         </Box>
       </Inline>
@@ -257,39 +254,39 @@ export const Margin: Story = {
     <Stack align="center" gap="md">
       <Inline alignY="center" gap="md">
         <Box style={styleInsideBox}>
-          <Box margin="md" {...args}>
+          <Box m="3" {...args}>
             Margin
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box marginX="md" {...args}>
+          <Box mx="3" {...args}>
             Margin X
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box marginY="md" {...args}>
+          <Box my="3" {...args}>
             Margin Y
           </Box>
         </Box>
       </Inline>
       <Inline alignY="center" gap="md">
         <Box style={styleInsideBox}>
-          <Box marginTop="md" {...args}>
+          <Box mt="3" {...args}>
             Margin Top
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box marginRight="md" {...args}>
+          <Box mr="3" {...args}>
             Margin Right
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box marginBottom="md" {...args}>
+          <Box mb="3" {...args}>
             Margin Bottom
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box marginLeft="md" {...args}>
+          <Box ml="3" {...args}>
             Margin Left
           </Box>
         </Box>
diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 6b673abddd..04dc4648ce 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -16,23 +16,24 @@
 
 import { createElement, forwardRef } from 'react';
 import { BoxProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
 import clsx from 'clsx';
+import { extractProps } from '../../utils/extractProps';
+import { spacingPropDefs } from '../../props/spacing';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  const { as = 'div', className, style, children, ...restProps } = props;
+  const { as = 'div', children } = props;
 
-  // Generate utility class names
-  const utilityClassNames = getClassNames(restProps);
-
-  // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = clsx('canon-Box', utilityClassNames, className);
+  // Extract utility class names and styles
+  const propDefs = { ...spacingPropDefs };
+  const { className, style } = extractProps(props, propDefs);
 
   return createElement(as, {
     ref,
-    className: classNames,
+    className: clsx('canon-Box', className),
     style,
     children,
   });
 });
+
+Box.displayName = 'Box';
diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts
index f9a71ecfa1..41de725b32 100644
--- a/packages/canon/src/components/Container/types.ts
+++ b/packages/canon/src/components/Container/types.ts
@@ -19,11 +19,11 @@ import { SpaceProps } from '../../types';
 export interface ContainerProps {
   children?: React.ReactNode;
   className?: string;
-  marginY?: SpaceProps['marginY'];
-  marginBottom?: SpaceProps['marginBottom'];
-  marginTop?: SpaceProps['marginTop'];
-  paddingY?: SpaceProps['paddingY'];
-  paddingBottom?: SpaceProps['paddingBottom'];
-  paddingTop?: SpaceProps['paddingTop'];
+  my?: SpaceProps['my'];
+  mb?: SpaceProps['mb'];
+  mt?: SpaceProps['mt'];
+  py?: SpaceProps['py'];
+  pb?: SpaceProps['pb'];
+  pt?: SpaceProps['pt'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index ad4a8d03b4..b935a95ae0 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -31,3 +31,21 @@
 
 /* Min 1536px */
 @import './utilities/2xl.css';
+
+/* Padding */
+@import './utilities/p.css';
+@import './utilities/pl.css';
+@import './utilities/pr.css';
+@import './utilities/pt.css';
+@import './utilities/pb.css';
+@import './utilities/py.css';
+@import './utilities/px.css';
+
+/* Margin */
+@import './utilities/m.css';
+@import './utilities/ml.css';
+@import './utilities/mr.css';
+@import './utilities/mt.css';
+@import './utilities/mb.css';
+@import './utilities/my.css';
+@import './utilities/mx.css';
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 0252fefaf7..78bc0a6f8d 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -373,486 +373,6 @@
       justify-content: stretch;
     }
 
-    .cu-2xl-m-2xl {
-      margin: var(--canon-space-12);
-    }
-
-    .cu-2xl-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-2xl-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-2xl-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-2xl-m-none {
-      margin: 0;
-    }
-
-    .cu-2xl-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-2xl-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-2xl-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-2xl-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-2xl-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-2xl-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-2xl-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-2xl-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-2xl-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-2xl-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-2xl-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-2xl-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-2xl-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-2xl-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-2xl-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-2xl-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-2xl-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-2xl-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-2xl-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-2xl-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-2xl-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-2xl-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-2xl-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-2xl-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-2xl-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-2xl-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-2xl-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-2xl-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-2xl-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-2xl-p-none {
-      padding: 0;
-    }
-
-    .cu-2xl-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-2xl-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-2xl-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-2xl-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-2xl-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-2xl-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-2xl-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-2xl-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-2xl-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-2xl-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-2xl-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-2xl-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-2xl-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-2xl-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-2xl-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-2xl-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-2xl-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-2xl-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-2xl-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-2xl-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-2xl-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-2xl-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-2xl-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-2xl-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-2xl-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-2xl-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-2xl-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-2xl-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-2xl-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-2xl-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-2xl-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-2xl-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-2xl-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-2xl-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-2xl-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-2xl-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-2xl-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-2xl-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
     .cu-2xl-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index a69dae1df3..297aff1d98 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -373,486 +373,6 @@
       justify-content: stretch;
     }
 
-    .cu-lg-m-2xl {
-      margin: var(--canon-space-12);
-    }
-
-    .cu-lg-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-lg-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-lg-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-lg-m-none {
-      margin: 0;
-    }
-
-    .cu-lg-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-lg-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-lg-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-lg-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-lg-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-lg-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-lg-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-lg-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-lg-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-lg-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-lg-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-lg-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-lg-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-lg-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-lg-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-lg-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-lg-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-lg-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-lg-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-lg-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-lg-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-lg-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-lg-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-lg-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-lg-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-lg-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-lg-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-lg-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-lg-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-lg-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-lg-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-lg-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-lg-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-lg-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-lg-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-lg-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-lg-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-lg-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-lg-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-lg-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-lg-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-lg-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-lg-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-lg-p-none {
-      padding: 0;
-    }
-
-    .cu-lg-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-lg-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-lg-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-lg-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-lg-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-lg-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-lg-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-lg-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-lg-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-lg-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-lg-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-lg-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-lg-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-lg-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-lg-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-lg-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-lg-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-lg-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-lg-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-lg-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-lg-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-lg-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-lg-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-lg-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-lg-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-lg-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-lg-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-lg-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-lg-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-lg-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-lg-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-lg-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-lg-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-lg-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-lg-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-lg-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-lg-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-lg-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-lg-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-lg-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-lg-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-lg-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-lg-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-lg-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-lg-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
     .cu-lg-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/m.css b/packages/canon/src/css/utilities/m.css
new file mode 100644
index 0000000000..00a30cc8b1
--- /dev/null
+++ b/packages/canon/src/css/utilities/m.css
@@ -0,0 +1,422 @@
+.cu-m {
+  margin: var(--p);
+}
+
+.cu-m-0\.5 {
+  margin: var(--canon-space-0_5);
+}
+
+.cu-m-1 {
+  margin: var(--canon-space-1);
+}
+
+.cu-m-1\.5 {
+  margin: var(--canon-space-1_5);
+}
+
+.cu-m-2 {
+  margin: var(--canon-space-2);
+}
+
+.cu-m-3 {
+  margin: var(--canon-space-3);
+}
+
+.cu-m-4 {
+  margin: var(--canon-space-4);
+}
+
+.cu-m-5 {
+  margin: var(--canon-space-5);
+}
+
+.cu-m-6 {
+  margin: var(--canon-space-6);
+}
+
+.cu-m-7 {
+  margin: var(--canon-space-7);
+}
+
+.cu-m-8 {
+  margin: var(--canon-space-8);
+}
+
+.cu-m-9 {
+  margin: var(--canon-space-9);
+}
+
+.cu-m-10 {
+  margin: var(--canon-space-10);
+}
+
+.cu-m-11 {
+  margin: var(--canon-space-11);
+}
+
+.cu-m-12 {
+  margin: var(--canon-space-12);
+}
+
+.cu-m-13 {
+  margin: var(--canon-space-13);
+}
+
+.cu-m-14 {
+  margin: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-m {
+    margin: var(--p-xs);
+  }
+
+  .xs\:cu-m-0\.5 {
+    margin: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-m-1 {
+    margin: var(--canon-space-1);
+  }
+
+  .xs\:cu-m-1\.5 {
+    margin: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-m-2 {
+    margin: var(--canon-space-2);
+  }
+
+  .xs\:cu-m-3 {
+    margin: var(--canon-space-3);
+  }
+
+  .xs\:cu-m-4 {
+    margin: var(--canon-space-4);
+  }
+
+  .xs\:cu-m-5 {
+    margin: var(--canon-space-5);
+  }
+
+  .xs\:cu-m-6 {
+    margin: var(--canon-space-6);
+  }
+
+  .xs\:cu-m-7 {
+    margin: var(--canon-space-7);
+  }
+
+  .xs\:cu-m-8 {
+    margin: var(--canon-space-8);
+  }
+
+  .xs\:cu-m-9 {
+    margin: var(--canon-space-9);
+  }
+
+  .xs\:cu-m-10 {
+    margin: var(--canon-space-10);
+  }
+
+  .xs\:cu-m-11 {
+    margin: var(--canon-space-11);
+  }
+
+  .xs\:cu-m-12 {
+    margin: var(--canon-space-12);
+  }
+
+  .xs\:cu-m-13 {
+    margin: var(--canon-space-13);
+  }
+
+  .xs\:cu-m-14 {
+    margin: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-m {
+    margin: var(--p-sm);
+  }
+
+  .sm\:cu-m-0\.5 {
+    margin: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-m-1 {
+    margin: var(--canon-space-1);
+  }
+
+  .sm\:cu-m-1\.5 {
+    margin: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-m-2 {
+    margin: var(--canon-space-2);
+  }
+
+  .sm\:cu-m-3 {
+    margin: var(--canon-space-3);
+  }
+
+  .sm\:cu-m-4 {
+    margin: var(--canon-space-4);
+  }
+
+  .sm\:cu-m-5 {
+    margin: var(--canon-space-5);
+  }
+
+  .sm\:cu-m-6 {
+    margin: var(--canon-space-6);
+  }
+
+  .sm\:cu-m-7 {
+    margin: var(--canon-space-7);
+  }
+
+  .sm\:cu-m-8 {
+    margin: var(--canon-space-8);
+  }
+
+  .sm\:cu-m-9 {
+    margin: var(--canon-space-9);
+  }
+
+  .sm\:cu-m-10 {
+    margin: var(--canon-space-10);
+  }
+
+  .sm\:cu-m-11 {
+    margin: var(--canon-space-11);
+  }
+
+  .sm\:cu-m-12 {
+    margin: var(--canon-space-12);
+  }
+
+  .sm\:cu-m-13 {
+    margin: var(--canon-space-13);
+  }
+
+  .sm\:cu-m-14 {
+    margin: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-m {
+    margin: var(--p-md);
+  }
+
+  .md\:cu-m-0\.5 {
+    margin: var(--canon-space-0_5);
+  }
+
+  .md\:cu-m-1 {
+    margin: var(--canon-space-1);
+  }
+
+  .md\:cu-m-1\.5 {
+    margin: var(--canon-space-1_5);
+  }
+
+  .md\:cu-m-2 {
+    margin: var(--canon-space-2);
+  }
+
+  .md\:cu-m-3 {
+    margin: var(--canon-space-3);
+  }
+
+  .md\:cu-m-4 {
+    margin: var(--canon-space-4);
+  }
+
+  .md\:cu-m-5 {
+    margin: var(--canon-space-5);
+  }
+
+  .md\:cu-m-6 {
+    margin: var(--canon-space-6);
+  }
+
+  .md\:cu-m-7 {
+    margin: var(--canon-space-7);
+  }
+
+  .md\:cu-m-8 {
+    margin: var(--canon-space-8);
+  }
+
+  .md\:cu-m-9 {
+    margin: var(--canon-space-9);
+  }
+
+  .md\:cu-m-10 {
+    margin: var(--canon-space-10);
+  }
+
+  .md\:cu-m-11 {
+    margin: var(--canon-space-11);
+  }
+
+  .md\:cu-m-12 {
+    margin: var(--canon-space-12);
+  }
+
+  .md\:cu-m-13 {
+    margin: var(--canon-space-13);
+  }
+
+  .md\:cu-m-14 {
+    margin: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-m {
+    margin: var(--p-lg);
+  }
+
+  .lg\:cu-m-0\.5 {
+    margin: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-m-1 {
+    margin: var(--canon-space-1);
+  }
+
+  .lg\:cu-m-1\.5 {
+    margin: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-m-2 {
+    margin: var(--canon-space-2);
+  }
+
+  .lg\:cu-m-3 {
+    margin: var(--canon-space-3);
+  }
+
+  .lg\:cu-m-4 {
+    margin: var(--canon-space-4);
+  }
+
+  .lg\:cu-m-5 {
+    margin: var(--canon-space-5);
+  }
+
+  .lg\:cu-m-6 {
+    margin: var(--canon-space-6);
+  }
+
+  .lg\:cu-m-7 {
+    margin: var(--canon-space-7);
+  }
+
+  .lg\:cu-m-8 {
+    margin: var(--canon-space-8);
+  }
+
+  .lg\:cu-m-9 {
+    margin: var(--canon-space-9);
+  }
+
+  .lg\:cu-m-10 {
+    margin: var(--canon-space-10);
+  }
+
+  .lg\:cu-m-11 {
+    margin: var(--canon-space-11);
+  }
+
+  .lg\:cu-m-12 {
+    margin: var(--canon-space-12);
+  }
+
+  .lg\:cu-m-13 {
+    margin: var(--canon-space-13);
+  }
+
+  .lg\:cu-m-14 {
+    margin: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-m {
+    margin: var(--p-xl);
+  }
+
+  .xl\:cu-m-0\.5 {
+    margin: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-m-1 {
+    margin: var(--canon-space-1);
+  }
+
+  .xl\:cu-m-1\.5 {
+    margin: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-m-2 {
+    margin: var(--canon-space-2);
+  }
+
+  .xl\:cu-m-3 {
+    margin: var(--canon-space-3);
+  }
+
+  .xl\:cu-m-4 {
+    margin: var(--canon-space-4);
+  }
+
+  .xl\:cu-m-5 {
+    margin: var(--canon-space-5);
+  }
+
+  .xl\:cu-m-6 {
+    margin: var(--canon-space-6);
+  }
+
+  .xl\:cu-m-7 {
+    margin: var(--canon-space-7);
+  }
+
+  .xl\:cu-m-8 {
+    margin: var(--canon-space-8);
+  }
+
+  .xl\:cu-m-9 {
+    margin: var(--canon-space-9);
+  }
+
+  .xl\:cu-m-10 {
+    margin: var(--canon-space-10);
+  }
+
+  .xl\:cu-m-11 {
+    margin: var(--canon-space-11);
+  }
+
+  .xl\:cu-m-12 {
+    margin: var(--canon-space-12);
+  }
+
+  .xl\:cu-m-13 {
+    margin: var(--canon-space-13);
+  }
+
+  .xl\:cu-m-14 {
+    margin: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/mb.css b/packages/canon/src/css/utilities/mb.css
new file mode 100644
index 0000000000..4fbf8d614f
--- /dev/null
+++ b/packages/canon/src/css/utilities/mb.css
@@ -0,0 +1,422 @@
+.cu-mb {
+  margin-bottom: var(--pb);
+}
+
+.cu-mb-0\.5 {
+  margin-bottom: var(--canon-space-0_5);
+}
+
+.cu-mb-1 {
+  margin-bottom: var(--canon-space-1);
+}
+
+.cu-mb-1\.5 {
+  margin-bottom: var(--canon-space-1_5);
+}
+
+.cu-mb-2 {
+  margin-bottom: var(--canon-space-2);
+}
+
+.cu-mb-3 {
+  margin-bottom: var(--canon-space-3);
+}
+
+.cu-mb-4 {
+  margin-bottom: var(--canon-space-4);
+}
+
+.cu-mb-5 {
+  margin-bottom: var(--canon-space-5);
+}
+
+.cu-mb-6 {
+  margin-bottom: var(--canon-space-6);
+}
+
+.cu-mb-7 {
+  margin-bottom: var(--canon-space-7);
+}
+
+.cu-mb-8 {
+  margin-bottom: var(--canon-space-8);
+}
+
+.cu-mb-9 {
+  margin-bottom: var(--canon-space-9);
+}
+
+.cu-mb-10 {
+  margin-bottom: var(--canon-space-10);
+}
+
+.cu-mb-11 {
+  margin-bottom: var(--canon-space-11);
+}
+
+.cu-mb-12 {
+  margin-bottom: var(--canon-space-12);
+}
+
+.cu-mb-13 {
+  margin-bottom: var(--canon-space-13);
+}
+
+.cu-mb-14 {
+  margin-bottom: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-mb {
+    margin-bottom: var(--pb-xs);
+  }
+
+  .xs\:cu-mb-0\.5 {
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-mb-1 {
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .xs\:cu-mb-1\.5 {
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-mb-2 {
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .xs\:cu-mb-3 {
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .xs\:cu-mb-4 {
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .xs\:cu-mb-5 {
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .xs\:cu-mb-6 {
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .xs\:cu-mb-7 {
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .xs\:cu-mb-8 {
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .xs\:cu-mb-9 {
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .xs\:cu-mb-10 {
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .xs\:cu-mb-11 {
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .xs\:cu-mb-12 {
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .xs\:cu-mb-13 {
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .xs\:cu-mb-14 {
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-mb {
+    margin-bottom: var(--pb-sm);
+  }
+
+  .sm\:cu-mb-0\.5 {
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-mb-1 {
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .sm\:cu-mb-1\.5 {
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-mb-2 {
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .sm\:cu-mb-3 {
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .sm\:cu-mb-4 {
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .sm\:cu-mb-5 {
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .sm\:cu-mb-6 {
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .sm\:cu-mb-7 {
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .sm\:cu-mb-8 {
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .sm\:cu-mb-9 {
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .sm\:cu-mb-10 {
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .sm\:cu-mb-11 {
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .sm\:cu-mb-12 {
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .sm\:cu-mb-13 {
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .sm\:cu-mb-14 {
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-mb {
+    margin-bottom: var(--pb-md);
+  }
+
+  .md\:cu-mb-0\.5 {
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .md\:cu-mb-1 {
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .md\:cu-mb-1\.5 {
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .md\:cu-mb-2 {
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .md\:cu-mb-3 {
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .md\:cu-mb-4 {
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .md\:cu-mb-5 {
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .md\:cu-mb-6 {
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .md\:cu-mb-7 {
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .md\:cu-mb-8 {
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .md\:cu-mb-9 {
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .md\:cu-mb-10 {
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .md\:cu-mb-11 {
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .md\:cu-mb-12 {
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .md\:cu-mb-13 {
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .md\:cu-mb-14 {
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-mb {
+    margin-bottom: var(--pb-lg);
+  }
+
+  .lg\:cu-mb-0\.5 {
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-mb-1 {
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .lg\:cu-mb-1\.5 {
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-mb-2 {
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .lg\:cu-mb-3 {
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .lg\:cu-mb-4 {
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .lg\:cu-mb-5 {
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .lg\:cu-mb-6 {
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .lg\:cu-mb-7 {
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .lg\:cu-mb-8 {
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .lg\:cu-mb-9 {
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .lg\:cu-mb-10 {
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .lg\:cu-mb-11 {
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .lg\:cu-mb-12 {
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .lg\:cu-mb-13 {
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .lg\:cu-mb-14 {
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-mb {
+    margin-bottom: var(--pb-xl);
+  }
+
+  .xl\:cu-mb-0\.5 {
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-mb-1 {
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .xl\:cu-mb-1\.5 {
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-mb-2 {
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .xl\:cu-mb-3 {
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .xl\:cu-mb-4 {
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .xl\:cu-mb-5 {
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .xl\:cu-mb-6 {
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .xl\:cu-mb-7 {
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .xl\:cu-mb-8 {
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .xl\:cu-mb-9 {
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .xl\:cu-mb-10 {
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .xl\:cu-mb-11 {
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .xl\:cu-mb-12 {
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .xl\:cu-mb-13 {
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .xl\:cu-mb-14 {
+    margin-bottom: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 2230865466..981530f0e3 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -373,486 +373,6 @@
       justify-content: stretch;
     }
 
-    .cu-md-m-2xl {
-      margin: var(--canon-space-12);
-    }
-
-    .cu-md-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-md-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-md-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-md-m-none {
-      margin: 0;
-    }
-
-    .cu-md-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-md-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-md-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-md-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-md-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-md-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-md-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-md-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-md-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-md-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-md-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-md-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-md-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-md-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-md-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-md-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-md-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-md-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-md-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-md-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-md-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-md-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-md-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-md-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-md-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-md-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-md-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-md-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-md-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-md-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-md-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-md-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-md-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-md-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-md-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-md-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-md-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-md-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-md-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-md-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-md-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-md-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-md-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-md-p-none {
-      padding: 0;
-    }
-
-    .cu-md-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-md-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-md-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-md-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-md-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-md-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-md-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-md-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-md-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-md-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-md-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-md-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-md-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-md-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-md-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-md-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-md-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-md-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-md-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-md-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-md-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-md-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-md-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-md-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-md-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-md-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-md-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-md-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-md-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-md-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-md-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-md-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-md-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-md-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-md-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-md-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-md-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-md-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-md-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-md-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-md-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-md-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-md-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-md-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-md-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
     .cu-md-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/ml.css b/packages/canon/src/css/utilities/ml.css
new file mode 100644
index 0000000000..887c464df1
--- /dev/null
+++ b/packages/canon/src/css/utilities/ml.css
@@ -0,0 +1,422 @@
+.cu-ml {
+  margin-left: var(--pl);
+}
+
+.cu-ml-0\.5 {
+  margin-left: var(--canon-space-0_5);
+}
+
+.cu-ml-1 {
+  margin-left: var(--canon-space-1);
+}
+
+.cu-ml-1\.5 {
+  margin-left: var(--canon-space-1_5);
+}
+
+.cu-ml-2 {
+  margin-left: var(--canon-space-2);
+}
+
+.cu-ml-3 {
+  margin-left: var(--canon-space-3);
+}
+
+.cu-ml-4 {
+  margin-left: var(--canon-space-4);
+}
+
+.cu-ml-5 {
+  margin-left: var(--canon-space-5);
+}
+
+.cu-ml-6 {
+  margin-left: var(--canon-space-6);
+}
+
+.cu-ml-7 {
+  margin-left: var(--canon-space-7);
+}
+
+.cu-ml-8 {
+  margin-left: var(--canon-space-8);
+}
+
+.cu-ml-9 {
+  margin-left: var(--canon-space-9);
+}
+
+.cu-ml-10 {
+  margin-left: var(--canon-space-10);
+}
+
+.cu-ml-11 {
+  margin-left: var(--canon-space-11);
+}
+
+.cu-ml-12 {
+  margin-left: var(--canon-space-12);
+}
+
+.cu-ml-13 {
+  margin-left: var(--canon-space-13);
+}
+
+.cu-ml-14 {
+  margin-left: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-ml {
+    margin-left: var(--pl-xs);
+  }
+
+  .xs\:cu-ml-0\.5 {
+    margin-left: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-ml-1 {
+    margin-left: var(--canon-space-1);
+  }
+
+  .xs\:cu-ml-1\.5 {
+    margin-left: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-ml-2 {
+    margin-left: var(--canon-space-2);
+  }
+
+  .xs\:cu-ml-3 {
+    margin-left: var(--canon-space-3);
+  }
+
+  .xs\:cu-ml-4 {
+    margin-left: var(--canon-space-4);
+  }
+
+  .xs\:cu-ml-5 {
+    margin-left: var(--canon-space-5);
+  }
+
+  .xs\:cu-ml-6 {
+    margin-left: var(--canon-space-6);
+  }
+
+  .xs\:cu-ml-7 {
+    margin-left: var(--canon-space-7);
+  }
+
+  .xs\:cu-ml-8 {
+    margin-left: var(--canon-space-8);
+  }
+
+  .xs\:cu-ml-9 {
+    margin-left: var(--canon-space-9);
+  }
+
+  .xs\:cu-ml-10 {
+    margin-left: var(--canon-space-10);
+  }
+
+  .xs\:cu-ml-11 {
+    margin-left: var(--canon-space-11);
+  }
+
+  .xs\:cu-ml-12 {
+    margin-left: var(--canon-space-12);
+  }
+
+  .xs\:cu-ml-13 {
+    margin-left: var(--canon-space-13);
+  }
+
+  .xs\:cu-ml-14 {
+    margin-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-ml {
+    margin-left: var(--pl-sm);
+  }
+
+  .sm\:cu-ml-0\.5 {
+    margin-left: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-ml-1 {
+    margin-left: var(--canon-space-1);
+  }
+
+  .sm\:cu-ml-1\.5 {
+    margin-left: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-ml-2 {
+    margin-left: var(--canon-space-2);
+  }
+
+  .sm\:cu-ml-3 {
+    margin-left: var(--canon-space-3);
+  }
+
+  .sm\:cu-ml-4 {
+    margin-left: var(--canon-space-4);
+  }
+
+  .sm\:cu-ml-5 {
+    margin-left: var(--canon-space-5);
+  }
+
+  .sm\:cu-ml-6 {
+    margin-left: var(--canon-space-6);
+  }
+
+  .sm\:cu-ml-7 {
+    margin-left: var(--canon-space-7);
+  }
+
+  .sm\:cu-ml-8 {
+    margin-left: var(--canon-space-8);
+  }
+
+  .sm\:cu-ml-9 {
+    margin-left: var(--canon-space-9);
+  }
+
+  .sm\:cu-ml-10 {
+    margin-left: var(--canon-space-10);
+  }
+
+  .sm\:cu-ml-11 {
+    margin-left: var(--canon-space-11);
+  }
+
+  .sm\:cu-ml-12 {
+    margin-left: var(--canon-space-12);
+  }
+
+  .sm\:cu-ml-13 {
+    margin-left: var(--canon-space-13);
+  }
+
+  .sm\:cu-ml-14 {
+    margin-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-ml {
+    margin-left: var(--pl-md);
+  }
+
+  .md\:cu-ml-0\.5 {
+    margin-left: var(--canon-space-0_5);
+  }
+
+  .md\:cu-ml-1 {
+    margin-left: var(--canon-space-1);
+  }
+
+  .md\:cu-ml-1\.5 {
+    margin-left: var(--canon-space-1_5);
+  }
+
+  .md\:cu-ml-2 {
+    margin-left: var(--canon-space-2);
+  }
+
+  .md\:cu-ml-3 {
+    margin-left: var(--canon-space-3);
+  }
+
+  .md\:cu-ml-4 {
+    margin-left: var(--canon-space-4);
+  }
+
+  .md\:cu-ml-5 {
+    margin-left: var(--canon-space-5);
+  }
+
+  .md\:cu-ml-6 {
+    margin-left: var(--canon-space-6);
+  }
+
+  .md\:cu-ml-7 {
+    margin-left: var(--canon-space-7);
+  }
+
+  .md\:cu-ml-8 {
+    margin-left: var(--canon-space-8);
+  }
+
+  .md\:cu-ml-9 {
+    margin-left: var(--canon-space-9);
+  }
+
+  .md\:cu-ml-10 {
+    margin-left: var(--canon-space-10);
+  }
+
+  .md\:cu-ml-11 {
+    margin-left: var(--canon-space-11);
+  }
+
+  .md\:cu-ml-12 {
+    margin-left: var(--canon-space-12);
+  }
+
+  .md\:cu-ml-13 {
+    margin-left: var(--canon-space-13);
+  }
+
+  .md\:cu-ml-14 {
+    margin-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-ml {
+    margin-left: var(--pl-lg);
+  }
+
+  .lg\:cu-ml-0\.5 {
+    margin-left: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-ml-1 {
+    margin-left: var(--canon-space-1);
+  }
+
+  .lg\:cu-ml-1\.5 {
+    margin-left: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-ml-2 {
+    margin-left: var(--canon-space-2);
+  }
+
+  .lg\:cu-ml-3 {
+    margin-left: var(--canon-space-3);
+  }
+
+  .lg\:cu-ml-4 {
+    margin-left: var(--canon-space-4);
+  }
+
+  .lg\:cu-ml-5 {
+    margin-left: var(--canon-space-5);
+  }
+
+  .lg\:cu-ml-6 {
+    margin-left: var(--canon-space-6);
+  }
+
+  .lg\:cu-ml-7 {
+    margin-left: var(--canon-space-7);
+  }
+
+  .lg\:cu-ml-8 {
+    margin-left: var(--canon-space-8);
+  }
+
+  .lg\:cu-ml-9 {
+    margin-left: var(--canon-space-9);
+  }
+
+  .lg\:cu-ml-10 {
+    margin-left: var(--canon-space-10);
+  }
+
+  .lg\:cu-ml-11 {
+    margin-left: var(--canon-space-11);
+  }
+
+  .lg\:cu-ml-12 {
+    margin-left: var(--canon-space-12);
+  }
+
+  .lg\:cu-ml-13 {
+    margin-left: var(--canon-space-13);
+  }
+
+  .lg\:cu-ml-14 {
+    margin-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-ml {
+    margin-left: var(--pl-xl);
+  }
+
+  .xl\:cu-ml-0\.5 {
+    margin-left: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-ml-1 {
+    margin-left: var(--canon-space-1);
+  }
+
+  .xl\:cu-ml-1\.5 {
+    margin-left: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-ml-2 {
+    margin-left: var(--canon-space-2);
+  }
+
+  .xl\:cu-ml-3 {
+    margin-left: var(--canon-space-3);
+  }
+
+  .xl\:cu-ml-4 {
+    margin-left: var(--canon-space-4);
+  }
+
+  .xl\:cu-ml-5 {
+    margin-left: var(--canon-space-5);
+  }
+
+  .xl\:cu-ml-6 {
+    margin-left: var(--canon-space-6);
+  }
+
+  .xl\:cu-ml-7 {
+    margin-left: var(--canon-space-7);
+  }
+
+  .xl\:cu-ml-8 {
+    margin-left: var(--canon-space-8);
+  }
+
+  .xl\:cu-ml-9 {
+    margin-left: var(--canon-space-9);
+  }
+
+  .xl\:cu-ml-10 {
+    margin-left: var(--canon-space-10);
+  }
+
+  .xl\:cu-ml-11 {
+    margin-left: var(--canon-space-11);
+  }
+
+  .xl\:cu-ml-12 {
+    margin-left: var(--canon-space-12);
+  }
+
+  .xl\:cu-ml-13 {
+    margin-left: var(--canon-space-13);
+  }
+
+  .xl\:cu-ml-14 {
+    margin-left: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/mr.css b/packages/canon/src/css/utilities/mr.css
new file mode 100644
index 0000000000..a2c0f8668b
--- /dev/null
+++ b/packages/canon/src/css/utilities/mr.css
@@ -0,0 +1,422 @@
+.cu-mr {
+  margin-right: var(--pr);
+}
+
+.cu-mr-0\.5 {
+  margin-right: var(--canon-space-0_5);
+}
+
+.cu-mr-1 {
+  margin-right: var(--canon-space-1);
+}
+
+.cu-mr-1\.5 {
+  margin-right: var(--canon-space-1_5);
+}
+
+.cu-mr-2 {
+  margin-right: var(--canon-space-2);
+}
+
+.cu-mr-3 {
+  margin-right: var(--canon-space-3);
+}
+
+.cu-mr-4 {
+  margin-right: var(--canon-space-4);
+}
+
+.cu-mr-5 {
+  margin-right: var(--canon-space-5);
+}
+
+.cu-mr-6 {
+  margin-right: var(--canon-space-6);
+}
+
+.cu-mr-7 {
+  margin-right: var(--canon-space-7);
+}
+
+.cu-mr-8 {
+  margin-right: var(--canon-space-8);
+}
+
+.cu-mr-9 {
+  margin-right: var(--canon-space-9);
+}
+
+.cu-mr-10 {
+  margin-right: var(--canon-space-10);
+}
+
+.cu-mr-11 {
+  margin-right: var(--canon-space-11);
+}
+
+.cu-mr-12 {
+  margin-right: var(--canon-space-12);
+}
+
+.cu-mr-13 {
+  margin-right: var(--canon-space-13);
+}
+
+.cu-mr-14 {
+  margin-right: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-mr {
+    margin-right: var(--pr-xs);
+  }
+
+  .xs\:cu-mr-0\.5 {
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-mr-1 {
+    margin-right: var(--canon-space-1);
+  }
+
+  .xs\:cu-mr-1\.5 {
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-mr-2 {
+    margin-right: var(--canon-space-2);
+  }
+
+  .xs\:cu-mr-3 {
+    margin-right: var(--canon-space-3);
+  }
+
+  .xs\:cu-mr-4 {
+    margin-right: var(--canon-space-4);
+  }
+
+  .xs\:cu-mr-5 {
+    margin-right: var(--canon-space-5);
+  }
+
+  .xs\:cu-mr-6 {
+    margin-right: var(--canon-space-6);
+  }
+
+  .xs\:cu-mr-7 {
+    margin-right: var(--canon-space-7);
+  }
+
+  .xs\:cu-mr-8 {
+    margin-right: var(--canon-space-8);
+  }
+
+  .xs\:cu-mr-9 {
+    margin-right: var(--canon-space-9);
+  }
+
+  .xs\:cu-mr-10 {
+    margin-right: var(--canon-space-10);
+  }
+
+  .xs\:cu-mr-11 {
+    margin-right: var(--canon-space-11);
+  }
+
+  .xs\:cu-mr-12 {
+    margin-right: var(--canon-space-12);
+  }
+
+  .xs\:cu-mr-13 {
+    margin-right: var(--canon-space-13);
+  }
+
+  .xs\:cu-mr-14 {
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-mr {
+    margin-right: var(--pr-sm);
+  }
+
+  .sm\:cu-mr-0\.5 {
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-mr-1 {
+    margin-right: var(--canon-space-1);
+  }
+
+  .sm\:cu-mr-1\.5 {
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-mr-2 {
+    margin-right: var(--canon-space-2);
+  }
+
+  .sm\:cu-mr-3 {
+    margin-right: var(--canon-space-3);
+  }
+
+  .sm\:cu-mr-4 {
+    margin-right: var(--canon-space-4);
+  }
+
+  .sm\:cu-mr-5 {
+    margin-right: var(--canon-space-5);
+  }
+
+  .sm\:cu-mr-6 {
+    margin-right: var(--canon-space-6);
+  }
+
+  .sm\:cu-mr-7 {
+    margin-right: var(--canon-space-7);
+  }
+
+  .sm\:cu-mr-8 {
+    margin-right: var(--canon-space-8);
+  }
+
+  .sm\:cu-mr-9 {
+    margin-right: var(--canon-space-9);
+  }
+
+  .sm\:cu-mr-10 {
+    margin-right: var(--canon-space-10);
+  }
+
+  .sm\:cu-mr-11 {
+    margin-right: var(--canon-space-11);
+  }
+
+  .sm\:cu-mr-12 {
+    margin-right: var(--canon-space-12);
+  }
+
+  .sm\:cu-mr-13 {
+    margin-right: var(--canon-space-13);
+  }
+
+  .sm\:cu-mr-14 {
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-mr {
+    margin-right: var(--pr-md);
+  }
+
+  .md\:cu-mr-0\.5 {
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .md\:cu-mr-1 {
+    margin-right: var(--canon-space-1);
+  }
+
+  .md\:cu-mr-1\.5 {
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .md\:cu-mr-2 {
+    margin-right: var(--canon-space-2);
+  }
+
+  .md\:cu-mr-3 {
+    margin-right: var(--canon-space-3);
+  }
+
+  .md\:cu-mr-4 {
+    margin-right: var(--canon-space-4);
+  }
+
+  .md\:cu-mr-5 {
+    margin-right: var(--canon-space-5);
+  }
+
+  .md\:cu-mr-6 {
+    margin-right: var(--canon-space-6);
+  }
+
+  .md\:cu-mr-7 {
+    margin-right: var(--canon-space-7);
+  }
+
+  .md\:cu-mr-8 {
+    margin-right: var(--canon-space-8);
+  }
+
+  .md\:cu-mr-9 {
+    margin-right: var(--canon-space-9);
+  }
+
+  .md\:cu-mr-10 {
+    margin-right: var(--canon-space-10);
+  }
+
+  .md\:cu-mr-11 {
+    margin-right: var(--canon-space-11);
+  }
+
+  .md\:cu-mr-12 {
+    margin-right: var(--canon-space-12);
+  }
+
+  .md\:cu-mr-13 {
+    margin-right: var(--canon-space-13);
+  }
+
+  .md\:cu-mr-14 {
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-mr {
+    margin-right: var(--pr-lg);
+  }
+
+  .lg\:cu-mr-0\.5 {
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-mr-1 {
+    margin-right: var(--canon-space-1);
+  }
+
+  .lg\:cu-mr-1\.5 {
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-mr-2 {
+    margin-right: var(--canon-space-2);
+  }
+
+  .lg\:cu-mr-3 {
+    margin-right: var(--canon-space-3);
+  }
+
+  .lg\:cu-mr-4 {
+    margin-right: var(--canon-space-4);
+  }
+
+  .lg\:cu-mr-5 {
+    margin-right: var(--canon-space-5);
+  }
+
+  .lg\:cu-mr-6 {
+    margin-right: var(--canon-space-6);
+  }
+
+  .lg\:cu-mr-7 {
+    margin-right: var(--canon-space-7);
+  }
+
+  .lg\:cu-mr-8 {
+    margin-right: var(--canon-space-8);
+  }
+
+  .lg\:cu-mr-9 {
+    margin-right: var(--canon-space-9);
+  }
+
+  .lg\:cu-mr-10 {
+    margin-right: var(--canon-space-10);
+  }
+
+  .lg\:cu-mr-11 {
+    margin-right: var(--canon-space-11);
+  }
+
+  .lg\:cu-mr-12 {
+    margin-right: var(--canon-space-12);
+  }
+
+  .lg\:cu-mr-13 {
+    margin-right: var(--canon-space-13);
+  }
+
+  .lg\:cu-mr-14 {
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-mr {
+    margin-right: var(--pr-xl);
+  }
+
+  .xl\:cu-mr-0\.5 {
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-mr-1 {
+    margin-right: var(--canon-space-1);
+  }
+
+  .xl\:cu-mr-1\.5 {
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-mr-2 {
+    margin-right: var(--canon-space-2);
+  }
+
+  .xl\:cu-mr-3 {
+    margin-right: var(--canon-space-3);
+  }
+
+  .xl\:cu-mr-4 {
+    margin-right: var(--canon-space-4);
+  }
+
+  .xl\:cu-mr-5 {
+    margin-right: var(--canon-space-5);
+  }
+
+  .xl\:cu-mr-6 {
+    margin-right: var(--canon-space-6);
+  }
+
+  .xl\:cu-mr-7 {
+    margin-right: var(--canon-space-7);
+  }
+
+  .xl\:cu-mr-8 {
+    margin-right: var(--canon-space-8);
+  }
+
+  .xl\:cu-mr-9 {
+    margin-right: var(--canon-space-9);
+  }
+
+  .xl\:cu-mr-10 {
+    margin-right: var(--canon-space-10);
+  }
+
+  .xl\:cu-mr-11 {
+    margin-right: var(--canon-space-11);
+  }
+
+  .xl\:cu-mr-12 {
+    margin-right: var(--canon-space-12);
+  }
+
+  .xl\:cu-mr-13 {
+    margin-right: var(--canon-space-13);
+  }
+
+  .xl\:cu-mr-14 {
+    margin-right: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/mt.css b/packages/canon/src/css/utilities/mt.css
new file mode 100644
index 0000000000..b74525b142
--- /dev/null
+++ b/packages/canon/src/css/utilities/mt.css
@@ -0,0 +1,422 @@
+.cu-mt {
+  margin-top: var(--pt);
+}
+
+.cu-mt-0\.5 {
+  margin-top: var(--canon-space-0_5);
+}
+
+.cu-mt-1 {
+  margin-top: var(--canon-space-1);
+}
+
+.cu-mt-1\.5 {
+  margin-top: var(--canon-space-1_5);
+}
+
+.cu-mt-2 {
+  margin-top: var(--canon-space-2);
+}
+
+.cu-mt-3 {
+  margin-top: var(--canon-space-3);
+}
+
+.cu-mt-4 {
+  margin-top: var(--canon-space-4);
+}
+
+.cu-mt-5 {
+  margin-top: var(--canon-space-5);
+}
+
+.cu-mt-6 {
+  margin-top: var(--canon-space-6);
+}
+
+.cu-mt-7 {
+  margin-top: var(--canon-space-7);
+}
+
+.cu-mt-8 {
+  margin-top: var(--canon-space-8);
+}
+
+.cu-mt-9 {
+  margin-top: var(--canon-space-9);
+}
+
+.cu-mt-10 {
+  margin-top: var(--canon-space-10);
+}
+
+.cu-mt-11 {
+  margin-top: var(--canon-space-11);
+}
+
+.cu-mt-12 {
+  margin-top: var(--canon-space-12);
+}
+
+.cu-mt-13 {
+  margin-top: var(--canon-space-13);
+}
+
+.cu-mt-14 {
+  margin-top: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-mt {
+    margin-top: var(--pt-xs);
+  }
+
+  .xs\:cu-mt-0\.5 {
+    margin-top: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-mt-1 {
+    margin-top: var(--canon-space-1);
+  }
+
+  .xs\:cu-mt-1\.5 {
+    margin-top: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-mt-2 {
+    margin-top: var(--canon-space-2);
+  }
+
+  .xs\:cu-mt-3 {
+    margin-top: var(--canon-space-3);
+  }
+
+  .xs\:cu-mt-4 {
+    margin-top: var(--canon-space-4);
+  }
+
+  .xs\:cu-mt-5 {
+    margin-top: var(--canon-space-5);
+  }
+
+  .xs\:cu-mt-6 {
+    margin-top: var(--canon-space-6);
+  }
+
+  .xs\:cu-mt-7 {
+    margin-top: var(--canon-space-7);
+  }
+
+  .xs\:cu-mt-8 {
+    margin-top: var(--canon-space-8);
+  }
+
+  .xs\:cu-mt-9 {
+    margin-top: var(--canon-space-9);
+  }
+
+  .xs\:cu-mt-10 {
+    margin-top: var(--canon-space-10);
+  }
+
+  .xs\:cu-mt-11 {
+    margin-top: var(--canon-space-11);
+  }
+
+  .xs\:cu-mt-12 {
+    margin-top: var(--canon-space-12);
+  }
+
+  .xs\:cu-mt-13 {
+    margin-top: var(--canon-space-13);
+  }
+
+  .xs\:cu-mt-14 {
+    margin-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-mt {
+    margin-top: var(--pt-sm);
+  }
+
+  .sm\:cu-mt-0\.5 {
+    margin-top: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-mt-1 {
+    margin-top: var(--canon-space-1);
+  }
+
+  .sm\:cu-mt-1\.5 {
+    margin-top: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-mt-2 {
+    margin-top: var(--canon-space-2);
+  }
+
+  .sm\:cu-mt-3 {
+    margin-top: var(--canon-space-3);
+  }
+
+  .sm\:cu-mt-4 {
+    margin-top: var(--canon-space-4);
+  }
+
+  .sm\:cu-mt-5 {
+    margin-top: var(--canon-space-5);
+  }
+
+  .sm\:cu-mt-6 {
+    margin-top: var(--canon-space-6);
+  }
+
+  .sm\:cu-mt-7 {
+    margin-top: var(--canon-space-7);
+  }
+
+  .sm\:cu-mt-8 {
+    margin-top: var(--canon-space-8);
+  }
+
+  .sm\:cu-mt-9 {
+    margin-top: var(--canon-space-9);
+  }
+
+  .sm\:cu-mt-10 {
+    margin-top: var(--canon-space-10);
+  }
+
+  .sm\:cu-mt-11 {
+    margin-top: var(--canon-space-11);
+  }
+
+  .sm\:cu-mt-12 {
+    margin-top: var(--canon-space-12);
+  }
+
+  .sm\:cu-mt-13 {
+    margin-top: var(--canon-space-13);
+  }
+
+  .sm\:cu-mt-14 {
+    margin-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-mt {
+    margin-top: var(--pt-md);
+  }
+
+  .md\:cu-mt-0\.5 {
+    margin-top: var(--canon-space-0_5);
+  }
+
+  .md\:cu-mt-1 {
+    margin-top: var(--canon-space-1);
+  }
+
+  .md\:cu-mt-1\.5 {
+    margin-top: var(--canon-space-1_5);
+  }
+
+  .md\:cu-mt-2 {
+    margin-top: var(--canon-space-2);
+  }
+
+  .md\:cu-mt-3 {
+    margin-top: var(--canon-space-3);
+  }
+
+  .md\:cu-mt-4 {
+    margin-top: var(--canon-space-4);
+  }
+
+  .md\:cu-mt-5 {
+    margin-top: var(--canon-space-5);
+  }
+
+  .md\:cu-mt-6 {
+    margin-top: var(--canon-space-6);
+  }
+
+  .md\:cu-mt-7 {
+    margin-top: var(--canon-space-7);
+  }
+
+  .md\:cu-mt-8 {
+    margin-top: var(--canon-space-8);
+  }
+
+  .md\:cu-mt-9 {
+    margin-top: var(--canon-space-9);
+  }
+
+  .md\:cu-mt-10 {
+    margin-top: var(--canon-space-10);
+  }
+
+  .md\:cu-mt-11 {
+    margin-top: var(--canon-space-11);
+  }
+
+  .md\:cu-mt-12 {
+    margin-top: var(--canon-space-12);
+  }
+
+  .md\:cu-mt-13 {
+    margin-top: var(--canon-space-13);
+  }
+
+  .md\:cu-mt-14 {
+    margin-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-mt {
+    margin-top: var(--pt-lg);
+  }
+
+  .lg\:cu-mt-0\.5 {
+    margin-top: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-mt-1 {
+    margin-top: var(--canon-space-1);
+  }
+
+  .lg\:cu-mt-1\.5 {
+    margin-top: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-mt-2 {
+    margin-top: var(--canon-space-2);
+  }
+
+  .lg\:cu-mt-3 {
+    margin-top: var(--canon-space-3);
+  }
+
+  .lg\:cu-mt-4 {
+    margin-top: var(--canon-space-4);
+  }
+
+  .lg\:cu-mt-5 {
+    margin-top: var(--canon-space-5);
+  }
+
+  .lg\:cu-mt-6 {
+    margin-top: var(--canon-space-6);
+  }
+
+  .lg\:cu-mt-7 {
+    margin-top: var(--canon-space-7);
+  }
+
+  .lg\:cu-mt-8 {
+    margin-top: var(--canon-space-8);
+  }
+
+  .lg\:cu-mt-9 {
+    margin-top: var(--canon-space-9);
+  }
+
+  .lg\:cu-mt-10 {
+    margin-top: var(--canon-space-10);
+  }
+
+  .lg\:cu-mt-11 {
+    margin-top: var(--canon-space-11);
+  }
+
+  .lg\:cu-mt-12 {
+    margin-top: var(--canon-space-12);
+  }
+
+  .lg\:cu-mt-13 {
+    margin-top: var(--canon-space-13);
+  }
+
+  .lg\:cu-mt-14 {
+    margin-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-mt {
+    margin-top: var(--pt-xl);
+  }
+
+  .xl\:cu-mt-0\.5 {
+    margin-top: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-mt-1 {
+    margin-top: var(--canon-space-1);
+  }
+
+  .xl\:cu-mt-1\.5 {
+    margin-top: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-mt-2 {
+    margin-top: var(--canon-space-2);
+  }
+
+  .xl\:cu-mt-3 {
+    margin-top: var(--canon-space-3);
+  }
+
+  .xl\:cu-mt-4 {
+    margin-top: var(--canon-space-4);
+  }
+
+  .xl\:cu-mt-5 {
+    margin-top: var(--canon-space-5);
+  }
+
+  .xl\:cu-mt-6 {
+    margin-top: var(--canon-space-6);
+  }
+
+  .xl\:cu-mt-7 {
+    margin-top: var(--canon-space-7);
+  }
+
+  .xl\:cu-mt-8 {
+    margin-top: var(--canon-space-8);
+  }
+
+  .xl\:cu-mt-9 {
+    margin-top: var(--canon-space-9);
+  }
+
+  .xl\:cu-mt-10 {
+    margin-top: var(--canon-space-10);
+  }
+
+  .xl\:cu-mt-11 {
+    margin-top: var(--canon-space-11);
+  }
+
+  .xl\:cu-mt-12 {
+    margin-top: var(--canon-space-12);
+  }
+
+  .xl\:cu-mt-13 {
+    margin-top: var(--canon-space-13);
+  }
+
+  .xl\:cu-mt-14 {
+    margin-top: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/mx.css b/packages/canon/src/css/utilities/mx.css
new file mode 100644
index 0000000000..6ebbc57367
--- /dev/null
+++ b/packages/canon/src/css/utilities/mx.css
@@ -0,0 +1,524 @@
+.cu-mx {
+  margin-left: var(--px);
+  margin-right: var(--px);
+}
+
+.cu-mx-0\.5 {
+  margin-left: var(--canon-space-0_5);
+  margin-right: var(--canon-space-0_5);
+}
+
+.cu-mx-1 {
+  margin-left: var(--canon-space-1);
+  margin-right: var(--canon-space-1);
+}
+
+.cu-mx-1\.5 {
+  margin-left: var(--canon-space-1_5);
+  margin-right: var(--canon-space-1_5);
+}
+
+.cu-mx-2 {
+  margin-left: var(--canon-space-2);
+  margin-right: var(--canon-space-2);
+}
+
+.cu-mx-3 {
+  margin-left: var(--canon-space-3);
+  margin-right: var(--canon-space-3);
+}
+
+.cu-mx-4 {
+  margin-left: var(--canon-space-4);
+  margin-right: var(--canon-space-4);
+}
+
+.cu-mx-5 {
+  margin-left: var(--canon-space-5);
+  margin-right: var(--canon-space-5);
+}
+
+.cu-mx-6 {
+  margin-left: var(--canon-space-6);
+  margin-right: var(--canon-space-6);
+}
+
+.cu-mx-7 {
+  margin-left: var(--canon-space-7);
+  margin-right: var(--canon-space-7);
+}
+
+.cu-mx-8 {
+  margin-left: var(--canon-space-8);
+  margin-right: var(--canon-space-8);
+}
+
+.cu-mx-9 {
+  margin-left: var(--canon-space-9);
+  margin-right: var(--canon-space-9);
+}
+
+.cu-mx-10 {
+  margin-left: var(--canon-space-10);
+  margin-right: var(--canon-space-10);
+}
+
+.cu-mx-11 {
+  margin-left: var(--canon-space-11);
+  margin-right: var(--canon-space-11);
+}
+
+.cu-mx-12 {
+  margin-left: var(--canon-space-12);
+  margin-right: var(--canon-space-12);
+}
+
+.cu-mx-13 {
+  margin-left: var(--canon-space-13);
+  margin-right: var(--canon-space-13);
+}
+
+.cu-mx-14 {
+  margin-left: var(--canon-space-14);
+  margin-right: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-mx {
+    margin-left: var(--px-xs);
+    margin-right: var(--px-xs);
+  }
+
+  .xs\:cu-mx-0\.5 {
+    margin-left: var(--canon-space-0_5);
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-mx-1 {
+    margin-left: var(--canon-space-1);
+    margin-right: var(--canon-space-1);
+  }
+
+  .xs\:cu-mx-1\.5 {
+    margin-left: var(--canon-space-1_5);
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-mx-2 {
+    margin-left: var(--canon-space-2);
+    margin-right: var(--canon-space-2);
+  }
+
+  .xs\:cu-mx-3 {
+    margin-left: var(--canon-space-3);
+    margin-right: var(--canon-space-3);
+  }
+
+  .xs\:cu-mx-4 {
+    margin-left: var(--canon-space-4);
+    margin-right: var(--canon-space-4);
+  }
+
+  .xs\:cu-mx-5 {
+    margin-left: var(--canon-space-5);
+    margin-right: var(--canon-space-5);
+  }
+
+  .xs\:cu-mx-6 {
+    margin-left: var(--canon-space-6);
+    margin-right: var(--canon-space-6);
+  }
+
+  .xs\:cu-mx-7 {
+    margin-left: var(--canon-space-7);
+    margin-right: var(--canon-space-7);
+  }
+
+  .xs\:cu-mx-8 {
+    margin-left: var(--canon-space-8);
+    margin-right: var(--canon-space-8);
+  }
+
+  .xs\:cu-mx-9 {
+    margin-left: var(--canon-space-9);
+    margin-right: var(--canon-space-9);
+  }
+
+  .xs\:cu-mx-10 {
+    margin-left: var(--canon-space-10);
+    margin-right: var(--canon-space-10);
+  }
+
+  .xs\:cu-mx-11 {
+    margin-left: var(--canon-space-11);
+    margin-right: var(--canon-space-11);
+  }
+
+  .xs\:cu-mx-12 {
+    margin-left: var(--canon-space-12);
+    margin-right: var(--canon-space-12);
+  }
+
+  .xs\:cu-mx-13 {
+    margin-left: var(--canon-space-13);
+    margin-right: var(--canon-space-13);
+  }
+
+  .xs\:cu-mx-14 {
+    margin-left: var(--canon-space-14);
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-mx {
+    margin-left: var(--px-sm);
+    margin-right: var(--px-sm);
+  }
+
+  .sm\:cu-mx-0\.5 {
+    margin-left: var(--canon-space-0_5);
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-mx-1 {
+    margin-left: var(--canon-space-1);
+    margin-right: var(--canon-space-1);
+  }
+
+  .sm\:cu-mx-1\.5 {
+    margin-left: var(--canon-space-1_5);
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-mx-2 {
+    margin-left: var(--canon-space-2);
+    margin-right: var(--canon-space-2);
+  }
+
+  .sm\:cu-mx-3 {
+    margin-left: var(--canon-space-3);
+    margin-right: var(--canon-space-3);
+  }
+
+  .sm\:cu-mx-4 {
+    margin-left: var(--canon-space-4);
+    margin-right: var(--canon-space-4);
+  }
+
+  .sm\:cu-mx-5 {
+    margin-left: var(--canon-space-5);
+    margin-right: var(--canon-space-5);
+  }
+
+  .sm\:cu-mx-6 {
+    margin-left: var(--canon-space-6);
+    margin-right: var(--canon-space-6);
+  }
+
+  .sm\:cu-mx-7 {
+    margin-left: var(--canon-space-7);
+    margin-right: var(--canon-space-7);
+  }
+
+  .sm\:cu-mx-8 {
+    margin-left: var(--canon-space-8);
+    margin-right: var(--canon-space-8);
+  }
+
+  .sm\:cu-mx-9 {
+    margin-left: var(--canon-space-9);
+    margin-right: var(--canon-space-9);
+  }
+
+  .sm\:cu-mx-10 {
+    margin-left: var(--canon-space-10);
+    margin-right: var(--canon-space-10);
+  }
+
+  .sm\:cu-mx-11 {
+    margin-left: var(--canon-space-11);
+    margin-right: var(--canon-space-11);
+  }
+
+  .sm\:cu-mx-12 {
+    margin-left: var(--canon-space-12);
+    margin-right: var(--canon-space-12);
+  }
+
+  .sm\:cu-mx-13 {
+    margin-left: var(--canon-space-13);
+    margin-right: var(--canon-space-13);
+  }
+
+  .sm\:cu-mx-14 {
+    margin-left: var(--canon-space-14);
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-mx {
+    margin-left: var(--px-md);
+    margin-right: var(--px-md);
+  }
+
+  .md\:cu-mx-0\.5 {
+    margin-left: var(--canon-space-0_5);
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .md\:cu-mx-1 {
+    margin-left: var(--canon-space-1);
+    margin-right: var(--canon-space-1);
+  }
+
+  .md\:cu-mx-1\.5 {
+    margin-left: var(--canon-space-1_5);
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .md\:cu-mx-2 {
+    margin-left: var(--canon-space-2);
+    margin-right: var(--canon-space-2);
+  }
+
+  .md\:cu-mx-3 {
+    margin-left: var(--canon-space-3);
+    margin-right: var(--canon-space-3);
+  }
+
+  .md\:cu-mx-4 {
+    margin-left: var(--canon-space-4);
+    margin-right: var(--canon-space-4);
+  }
+
+  .md\:cu-mx-5 {
+    margin-left: var(--canon-space-5);
+    margin-right: var(--canon-space-5);
+  }
+
+  .md\:cu-mx-6 {
+    margin-left: var(--canon-space-6);
+    margin-right: var(--canon-space-6);
+  }
+
+  .md\:cu-mx-7 {
+    margin-left: var(--canon-space-7);
+    margin-right: var(--canon-space-7);
+  }
+
+  .md\:cu-mx-8 {
+    margin-left: var(--canon-space-8);
+    margin-right: var(--canon-space-8);
+  }
+
+  .md\:cu-mx-9 {
+    margin-left: var(--canon-space-9);
+    margin-right: var(--canon-space-9);
+  }
+
+  .md\:cu-mx-10 {
+    margin-left: var(--canon-space-10);
+    margin-right: var(--canon-space-10);
+  }
+
+  .md\:cu-mx-11 {
+    margin-left: var(--canon-space-11);
+    margin-right: var(--canon-space-11);
+  }
+
+  .md\:cu-mx-12 {
+    margin-left: var(--canon-space-12);
+    margin-right: var(--canon-space-12);
+  }
+
+  .md\:cu-mx-13 {
+    margin-left: var(--canon-space-13);
+    margin-right: var(--canon-space-13);
+  }
+
+  .md\:cu-mx-14 {
+    margin-left: var(--canon-space-14);
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-mx {
+    margin-left: var(--px-lg);
+    margin-right: var(--px-lg);
+  }
+
+  .lg\:cu-mx-0\.5 {
+    margin-left: var(--canon-space-0_5);
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-mx-1 {
+    margin-left: var(--canon-space-1);
+    margin-right: var(--canon-space-1);
+  }
+
+  .lg\:cu-mx-1\.5 {
+    margin-left: var(--canon-space-1_5);
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-mx-2 {
+    margin-left: var(--canon-space-2);
+    margin-right: var(--canon-space-2);
+  }
+
+  .lg\:cu-mx-3 {
+    margin-left: var(--canon-space-3);
+    margin-right: var(--canon-space-3);
+  }
+
+  .lg\:cu-mx-4 {
+    margin-left: var(--canon-space-4);
+    margin-right: var(--canon-space-4);
+  }
+
+  .lg\:cu-mx-5 {
+    margin-left: var(--canon-space-5);
+    margin-right: var(--canon-space-5);
+  }
+
+  .lg\:cu-mx-6 {
+    margin-left: var(--canon-space-6);
+    margin-right: var(--canon-space-6);
+  }
+
+  .lg\:cu-mx-7 {
+    margin-left: var(--canon-space-7);
+    margin-right: var(--canon-space-7);
+  }
+
+  .lg\:cu-mx-8 {
+    margin-left: var(--canon-space-8);
+    margin-right: var(--canon-space-8);
+  }
+
+  .lg\:cu-mx-9 {
+    margin-left: var(--canon-space-9);
+    margin-right: var(--canon-space-9);
+  }
+
+  .lg\:cu-mx-10 {
+    margin-left: var(--canon-space-10);
+    margin-right: var(--canon-space-10);
+  }
+
+  .lg\:cu-mx-11 {
+    margin-left: var(--canon-space-11);
+    margin-right: var(--canon-space-11);
+  }
+
+  .lg\:cu-mx-12 {
+    margin-left: var(--canon-space-12);
+    margin-right: var(--canon-space-12);
+  }
+
+  .lg\:cu-mx-13 {
+    margin-left: var(--canon-space-13);
+    margin-right: var(--canon-space-13);
+  }
+
+  .lg\:cu-mx-14 {
+    margin-left: var(--canon-space-14);
+    margin-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-mx {
+    margin-left: var(--px-xl);
+    margin-right: var(--px-xl);
+  }
+
+  .xl\:cu-mx-0\.5 {
+    margin-left: var(--canon-space-0_5);
+    margin-right: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-mx-1 {
+    margin-left: var(--canon-space-1);
+    margin-right: var(--canon-space-1);
+  }
+
+  .xl\:cu-mx-1\.5 {
+    margin-left: var(--canon-space-1_5);
+    margin-right: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-mx-2 {
+    margin-left: var(--canon-space-2);
+    margin-right: var(--canon-space-2);
+  }
+
+  .xl\:cu-mx-3 {
+    margin-left: var(--canon-space-3);
+    margin-right: var(--canon-space-3);
+  }
+
+  .xl\:cu-mx-4 {
+    margin-left: var(--canon-space-4);
+    margin-right: var(--canon-space-4);
+  }
+
+  .xl\:cu-mx-5 {
+    margin-left: var(--canon-space-5);
+    margin-right: var(--canon-space-5);
+  }
+
+  .xl\:cu-mx-6 {
+    margin-left: var(--canon-space-6);
+    margin-right: var(--canon-space-6);
+  }
+
+  .xl\:cu-mx-7 {
+    margin-left: var(--canon-space-7);
+    margin-right: var(--canon-space-7);
+  }
+
+  .xl\:cu-mx-8 {
+    margin-left: var(--canon-space-8);
+    margin-right: var(--canon-space-8);
+  }
+
+  .xl\:cu-mx-9 {
+    margin-left: var(--canon-space-9);
+    margin-right: var(--canon-space-9);
+  }
+
+  .xl\:cu-mx-10 {
+    margin-left: var(--canon-space-10);
+    margin-right: var(--canon-space-10);
+  }
+
+  .xl\:cu-mx-11 {
+    margin-left: var(--canon-space-11);
+    margin-right: var(--canon-space-11);
+  }
+
+  .xl\:cu-mx-12 {
+    margin-left: var(--canon-space-12);
+    margin-right: var(--canon-space-12);
+  }
+
+  .xl\:cu-mx-13 {
+    margin-left: var(--canon-space-13);
+    margin-right: var(--canon-space-13);
+  }
+
+  .xl\:cu-mx-14 {
+    margin-left: var(--canon-space-14);
+    margin-right: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/my.css b/packages/canon/src/css/utilities/my.css
new file mode 100644
index 0000000000..feb4a6f5bd
--- /dev/null
+++ b/packages/canon/src/css/utilities/my.css
@@ -0,0 +1,524 @@
+.cu-my {
+  margin-top: var(--py);
+  margin-bottom: var(--py);
+}
+
+.cu-my-0\.5 {
+  margin-top: var(--canon-space-0_5);
+  margin-bottom: var(--canon-space-0_5);
+}
+
+.cu-my-1 {
+  margin-top: var(--canon-space-1);
+  margin-bottom: var(--canon-space-1);
+}
+
+.cu-my-1\.5 {
+  margin-top: var(--canon-space-1_5);
+  margin-bottom: var(--canon-space-1_5);
+}
+
+.cu-my-2 {
+  margin-top: var(--canon-space-2);
+  margin-bottom: var(--canon-space-2);
+}
+
+.cu-my-3 {
+  margin-top: var(--canon-space-3);
+  margin-bottom: var(--canon-space-3);
+}
+
+.cu-my-4 {
+  margin-top: var(--canon-space-4);
+  margin-bottom: var(--canon-space-4);
+}
+
+.cu-my-5 {
+  margin-top: var(--canon-space-5);
+  margin-bottom: var(--canon-space-5);
+}
+
+.cu-my-6 {
+  margin-top: var(--canon-space-6);
+  margin-bottom: var(--canon-space-6);
+}
+
+.cu-my-7 {
+  margin-top: var(--canon-space-7);
+  margin-bottom: var(--canon-space-7);
+}
+
+.cu-my-8 {
+  margin-top: var(--canon-space-8);
+  margin-bottom: var(--canon-space-8);
+}
+
+.cu-my-9 {
+  margin-top: var(--canon-space-9);
+  margin-bottom: var(--canon-space-9);
+}
+
+.cu-my-10 {
+  margin-top: var(--canon-space-10);
+  margin-bottom: var(--canon-space-10);
+}
+
+.cu-my-11 {
+  margin-top: var(--canon-space-11);
+  margin-bottom: var(--canon-space-11);
+}
+
+.cu-my-12 {
+  margin-top: var(--canon-space-12);
+  margin-bottom: var(--canon-space-12);
+}
+
+.cu-my-13 {
+  margin-top: var(--canon-space-13);
+  margin-bottom: var(--canon-space-13);
+}
+
+.cu-my-14 {
+  margin-top: var(--canon-space-14);
+  margin-bottom: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-my {
+    margin-top: var(--py-xs);
+    margin-bottom: var(--py-xs);
+  }
+
+  .xs\:cu-my-0\.5 {
+    margin-top: var(--canon-space-0_5);
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-my-1 {
+    margin-top: var(--canon-space-1);
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .xs\:cu-my-1\.5 {
+    margin-top: var(--canon-space-1_5);
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-my-2 {
+    margin-top: var(--canon-space-2);
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .xs\:cu-my-3 {
+    margin-top: var(--canon-space-3);
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .xs\:cu-my-4 {
+    margin-top: var(--canon-space-4);
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .xs\:cu-my-5 {
+    margin-top: var(--canon-space-5);
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .xs\:cu-my-6 {
+    margin-top: var(--canon-space-6);
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .xs\:cu-my-7 {
+    margin-top: var(--canon-space-7);
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .xs\:cu-my-8 {
+    margin-top: var(--canon-space-8);
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .xs\:cu-my-9 {
+    margin-top: var(--canon-space-9);
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .xs\:cu-my-10 {
+    margin-top: var(--canon-space-10);
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .xs\:cu-my-11 {
+    margin-top: var(--canon-space-11);
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .xs\:cu-my-12 {
+    margin-top: var(--canon-space-12);
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .xs\:cu-my-13 {
+    margin-top: var(--canon-space-13);
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .xs\:cu-my-14 {
+    margin-top: var(--canon-space-14);
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-my {
+    margin-top: var(--py-sm);
+    margin-bottom: var(--py-sm);
+  }
+
+  .sm\:cu-my-0\.5 {
+    margin-top: var(--canon-space-0_5);
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-my-1 {
+    margin-top: var(--canon-space-1);
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .sm\:cu-my-1\.5 {
+    margin-top: var(--canon-space-1_5);
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-my-2 {
+    margin-top: var(--canon-space-2);
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .sm\:cu-my-3 {
+    margin-top: var(--canon-space-3);
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .sm\:cu-my-4 {
+    margin-top: var(--canon-space-4);
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .sm\:cu-my-5 {
+    margin-top: var(--canon-space-5);
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .sm\:cu-my-6 {
+    margin-top: var(--canon-space-6);
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .sm\:cu-my-7 {
+    margin-top: var(--canon-space-7);
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .sm\:cu-my-8 {
+    margin-top: var(--canon-space-8);
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .sm\:cu-my-9 {
+    margin-top: var(--canon-space-9);
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .sm\:cu-my-10 {
+    margin-top: var(--canon-space-10);
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .sm\:cu-my-11 {
+    margin-top: var(--canon-space-11);
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .sm\:cu-my-12 {
+    margin-top: var(--canon-space-12);
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .sm\:cu-my-13 {
+    margin-top: var(--canon-space-13);
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .sm\:cu-my-14 {
+    margin-top: var(--canon-space-14);
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-my {
+    margin-top: var(--py-md);
+    margin-bottom: var(--py-md);
+  }
+
+  .md\:cu-my-0\.5 {
+    margin-top: var(--canon-space-0_5);
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .md\:cu-my-1 {
+    margin-top: var(--canon-space-1);
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .md\:cu-my-1\.5 {
+    margin-top: var(--canon-space-1_5);
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .md\:cu-my-2 {
+    margin-top: var(--canon-space-2);
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .md\:cu-my-3 {
+    margin-top: var(--canon-space-3);
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .md\:cu-my-4 {
+    margin-top: var(--canon-space-4);
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .md\:cu-my-5 {
+    margin-top: var(--canon-space-5);
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .md\:cu-my-6 {
+    margin-top: var(--canon-space-6);
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .md\:cu-my-7 {
+    margin-top: var(--canon-space-7);
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .md\:cu-my-8 {
+    margin-top: var(--canon-space-8);
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .md\:cu-my-9 {
+    margin-top: var(--canon-space-9);
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .md\:cu-my-10 {
+    margin-top: var(--canon-space-10);
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .md\:cu-my-11 {
+    margin-top: var(--canon-space-11);
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .md\:cu-my-12 {
+    margin-top: var(--canon-space-12);
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .md\:cu-my-13 {
+    margin-top: var(--canon-space-13);
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .md\:cu-my-14 {
+    margin-top: var(--canon-space-14);
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-my {
+    margin-top: var(--py-lg);
+    margin-bottom: var(--py-lg);
+  }
+
+  .lg\:cu-my-0\.5 {
+    margin-top: var(--canon-space-0_5);
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-my-1 {
+    margin-top: var(--canon-space-1);
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .lg\:cu-my-1\.5 {
+    margin-top: var(--canon-space-1_5);
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-my-2 {
+    margin-top: var(--canon-space-2);
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .lg\:cu-my-3 {
+    margin-top: var(--canon-space-3);
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .lg\:cu-my-4 {
+    margin-top: var(--canon-space-4);
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .lg\:cu-my-5 {
+    margin-top: var(--canon-space-5);
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .lg\:cu-my-6 {
+    margin-top: var(--canon-space-6);
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .lg\:cu-my-7 {
+    margin-top: var(--canon-space-7);
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .lg\:cu-my-8 {
+    margin-top: var(--canon-space-8);
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .lg\:cu-my-9 {
+    margin-top: var(--canon-space-9);
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .lg\:cu-my-10 {
+    margin-top: var(--canon-space-10);
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .lg\:cu-my-11 {
+    margin-top: var(--canon-space-11);
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .lg\:cu-my-12 {
+    margin-top: var(--canon-space-12);
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .lg\:cu-my-13 {
+    margin-top: var(--canon-space-13);
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .lg\:cu-my-14 {
+    margin-top: var(--canon-space-14);
+    margin-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-my {
+    margin-top: var(--py-xl);
+    margin-bottom: var(--py-xl);
+  }
+
+  .xl\:cu-my-0\.5 {
+    margin-top: var(--canon-space-0_5);
+    margin-bottom: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-my-1 {
+    margin-top: var(--canon-space-1);
+    margin-bottom: var(--canon-space-1);
+  }
+
+  .xl\:cu-my-1\.5 {
+    margin-top: var(--canon-space-1_5);
+    margin-bottom: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-my-2 {
+    margin-top: var(--canon-space-2);
+    margin-bottom: var(--canon-space-2);
+  }
+
+  .xl\:cu-my-3 {
+    margin-top: var(--canon-space-3);
+    margin-bottom: var(--canon-space-3);
+  }
+
+  .xl\:cu-my-4 {
+    margin-top: var(--canon-space-4);
+    margin-bottom: var(--canon-space-4);
+  }
+
+  .xl\:cu-my-5 {
+    margin-top: var(--canon-space-5);
+    margin-bottom: var(--canon-space-5);
+  }
+
+  .xl\:cu-my-6 {
+    margin-top: var(--canon-space-6);
+    margin-bottom: var(--canon-space-6);
+  }
+
+  .xl\:cu-my-7 {
+    margin-top: var(--canon-space-7);
+    margin-bottom: var(--canon-space-7);
+  }
+
+  .xl\:cu-my-8 {
+    margin-top: var(--canon-space-8);
+    margin-bottom: var(--canon-space-8);
+  }
+
+  .xl\:cu-my-9 {
+    margin-top: var(--canon-space-9);
+    margin-bottom: var(--canon-space-9);
+  }
+
+  .xl\:cu-my-10 {
+    margin-top: var(--canon-space-10);
+    margin-bottom: var(--canon-space-10);
+  }
+
+  .xl\:cu-my-11 {
+    margin-top: var(--canon-space-11);
+    margin-bottom: var(--canon-space-11);
+  }
+
+  .xl\:cu-my-12 {
+    margin-top: var(--canon-space-12);
+    margin-bottom: var(--canon-space-12);
+  }
+
+  .xl\:cu-my-13 {
+    margin-top: var(--canon-space-13);
+    margin-bottom: var(--canon-space-13);
+  }
+
+  .xl\:cu-my-14 {
+    margin-top: var(--canon-space-14);
+    margin-bottom: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/p.css b/packages/canon/src/css/utilities/p.css
new file mode 100644
index 0000000000..6540c626d2
--- /dev/null
+++ b/packages/canon/src/css/utilities/p.css
@@ -0,0 +1,422 @@
+.cu-p {
+  padding: var(--p);
+}
+
+.cu-p-0\.5 {
+  padding: var(--canon-space-0_5);
+}
+
+.cu-p-1 {
+  padding: var(--canon-space-1);
+}
+
+.cu-p-1\.5 {
+  padding: var(--canon-space-1_5);
+}
+
+.cu-p-2 {
+  padding: var(--canon-space-2);
+}
+
+.cu-p-3 {
+  padding: var(--canon-space-3);
+}
+
+.cu-p-4 {
+  padding: var(--canon-space-4);
+}
+
+.cu-p-5 {
+  padding: var(--canon-space-5);
+}
+
+.cu-p-6 {
+  padding: var(--canon-space-6);
+}
+
+.cu-p-7 {
+  padding: var(--canon-space-7);
+}
+
+.cu-p-8 {
+  padding: var(--canon-space-8);
+}
+
+.cu-p-9 {
+  padding: var(--canon-space-9);
+}
+
+.cu-p-10 {
+  padding: var(--canon-space-10);
+}
+
+.cu-p-11 {
+  padding: var(--canon-space-11);
+}
+
+.cu-p-12 {
+  padding: var(--canon-space-12);
+}
+
+.cu-p-13 {
+  padding: var(--canon-space-13);
+}
+
+.cu-p-14 {
+  padding: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-p {
+    padding: var(--p-xs);
+  }
+
+  .xs\:cu-p-0\.5 {
+    padding: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-p-1 {
+    padding: var(--canon-space-1);
+  }
+
+  .xs\:cu-p-1\.5 {
+    padding: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-p-2 {
+    padding: var(--canon-space-2);
+  }
+
+  .xs\:cu-p-3 {
+    padding: var(--canon-space-3);
+  }
+
+  .xs\:cu-p-4 {
+    padding: var(--canon-space-4);
+  }
+
+  .xs\:cu-p-5 {
+    padding: var(--canon-space-5);
+  }
+
+  .xs\:cu-p-6 {
+    padding: var(--canon-space-6);
+  }
+
+  .xs\:cu-p-7 {
+    padding: var(--canon-space-7);
+  }
+
+  .xs\:cu-p-8 {
+    padding: var(--canon-space-8);
+  }
+
+  .xs\:cu-p-9 {
+    padding: var(--canon-space-9);
+  }
+
+  .xs\:cu-p-10 {
+    padding: var(--canon-space-10);
+  }
+
+  .xs\:cu-p-11 {
+    padding: var(--canon-space-11);
+  }
+
+  .xs\:cu-p-12 {
+    padding: var(--canon-space-12);
+  }
+
+  .xs\:cu-p-13 {
+    padding: var(--canon-space-13);
+  }
+
+  .xs\:cu-p-14 {
+    padding: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-p {
+    padding: var(--p-sm);
+  }
+
+  .sm\:cu-p-0\.5 {
+    padding: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-p-1 {
+    padding: var(--canon-space-1);
+  }
+
+  .sm\:cu-p-1\.5 {
+    padding: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-p-2 {
+    padding: var(--canon-space-2);
+  }
+
+  .sm\:cu-p-3 {
+    padding: var(--canon-space-3);
+  }
+
+  .sm\:cu-p-4 {
+    padding: var(--canon-space-4);
+  }
+
+  .sm\:cu-p-5 {
+    padding: var(--canon-space-5);
+  }
+
+  .sm\:cu-p-6 {
+    padding: var(--canon-space-6);
+  }
+
+  .sm\:cu-p-7 {
+    padding: var(--canon-space-7);
+  }
+
+  .sm\:cu-p-8 {
+    padding: var(--canon-space-8);
+  }
+
+  .sm\:cu-p-9 {
+    padding: var(--canon-space-9);
+  }
+
+  .sm\:cu-p-10 {
+    padding: var(--canon-space-10);
+  }
+
+  .sm\:cu-p-11 {
+    padding: var(--canon-space-11);
+  }
+
+  .sm\:cu-p-12 {
+    padding: var(--canon-space-12);
+  }
+
+  .sm\:cu-p-13 {
+    padding: var(--canon-space-13);
+  }
+
+  .sm\:cu-p-14 {
+    padding: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-p {
+    padding: var(--p-md);
+  }
+
+  .md\:cu-p-0\.5 {
+    padding: var(--canon-space-0_5);
+  }
+
+  .md\:cu-p-1 {
+    padding: var(--canon-space-1);
+  }
+
+  .md\:cu-p-1\.5 {
+    padding: var(--canon-space-1_5);
+  }
+
+  .md\:cu-p-2 {
+    padding: var(--canon-space-2);
+  }
+
+  .md\:cu-p-3 {
+    padding: var(--canon-space-3);
+  }
+
+  .md\:cu-p-4 {
+    padding: var(--canon-space-4);
+  }
+
+  .md\:cu-p-5 {
+    padding: var(--canon-space-5);
+  }
+
+  .md\:cu-p-6 {
+    padding: var(--canon-space-6);
+  }
+
+  .md\:cu-p-7 {
+    padding: var(--canon-space-7);
+  }
+
+  .md\:cu-p-8 {
+    padding: var(--canon-space-8);
+  }
+
+  .md\:cu-p-9 {
+    padding: var(--canon-space-9);
+  }
+
+  .md\:cu-p-10 {
+    padding: var(--canon-space-10);
+  }
+
+  .md\:cu-p-11 {
+    padding: var(--canon-space-11);
+  }
+
+  .md\:cu-p-12 {
+    padding: var(--canon-space-12);
+  }
+
+  .md\:cu-p-13 {
+    padding: var(--canon-space-13);
+  }
+
+  .md\:cu-p-14 {
+    padding: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-p {
+    padding: var(--p-lg);
+  }
+
+  .lg\:cu-p-0\.5 {
+    padding: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-p-1 {
+    padding: var(--canon-space-1);
+  }
+
+  .lg\:cu-p-1\.5 {
+    padding: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-p-2 {
+    padding: var(--canon-space-2);
+  }
+
+  .lg\:cu-p-3 {
+    padding: var(--canon-space-3);
+  }
+
+  .lg\:cu-p-4 {
+    padding: var(--canon-space-4);
+  }
+
+  .lg\:cu-p-5 {
+    padding: var(--canon-space-5);
+  }
+
+  .lg\:cu-p-6 {
+    padding: var(--canon-space-6);
+  }
+
+  .lg\:cu-p-7 {
+    padding: var(--canon-space-7);
+  }
+
+  .lg\:cu-p-8 {
+    padding: var(--canon-space-8);
+  }
+
+  .lg\:cu-p-9 {
+    padding: var(--canon-space-9);
+  }
+
+  .lg\:cu-p-10 {
+    padding: var(--canon-space-10);
+  }
+
+  .lg\:cu-p-11 {
+    padding: var(--canon-space-11);
+  }
+
+  .lg\:cu-p-12 {
+    padding: var(--canon-space-12);
+  }
+
+  .lg\:cu-p-13 {
+    padding: var(--canon-space-13);
+  }
+
+  .lg\:cu-p-14 {
+    padding: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-p {
+    padding: var(--p-xl);
+  }
+
+  .xl\:cu-p-0\.5 {
+    padding: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-p-1 {
+    padding: var(--canon-space-1);
+  }
+
+  .xl\:cu-p-1\.5 {
+    padding: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-p-2 {
+    padding: var(--canon-space-2);
+  }
+
+  .xl\:cu-p-3 {
+    padding: var(--canon-space-3);
+  }
+
+  .xl\:cu-p-4 {
+    padding: var(--canon-space-4);
+  }
+
+  .xl\:cu-p-5 {
+    padding: var(--canon-space-5);
+  }
+
+  .xl\:cu-p-6 {
+    padding: var(--canon-space-6);
+  }
+
+  .xl\:cu-p-7 {
+    padding: var(--canon-space-7);
+  }
+
+  .xl\:cu-p-8 {
+    padding: var(--canon-space-8);
+  }
+
+  .xl\:cu-p-9 {
+    padding: var(--canon-space-9);
+  }
+
+  .xl\:cu-p-10 {
+    padding: var(--canon-space-10);
+  }
+
+  .xl\:cu-p-11 {
+    padding: var(--canon-space-11);
+  }
+
+  .xl\:cu-p-12 {
+    padding: var(--canon-space-12);
+  }
+
+  .xl\:cu-p-13 {
+    padding: var(--canon-space-13);
+  }
+
+  .xl\:cu-p-14 {
+    padding: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/pb.css b/packages/canon/src/css/utilities/pb.css
new file mode 100644
index 0000000000..722b744270
--- /dev/null
+++ b/packages/canon/src/css/utilities/pb.css
@@ -0,0 +1,422 @@
+.cu-pb {
+  padding-bottom: var(--pb);
+}
+
+.cu-pb-0\.5 {
+  padding-bottom: var(--canon-space-0_5);
+}
+
+.cu-pb-1 {
+  padding-bottom: var(--canon-space-1);
+}
+
+.cu-pb-1\.5 {
+  padding-bottom: var(--canon-space-1_5);
+}
+
+.cu-pb-2 {
+  padding-bottom: var(--canon-space-2);
+}
+
+.cu-pb-3 {
+  padding-bottom: var(--canon-space-3);
+}
+
+.cu-pb-4 {
+  padding-bottom: var(--canon-space-4);
+}
+
+.cu-pb-5 {
+  padding-bottom: var(--canon-space-5);
+}
+
+.cu-pb-6 {
+  padding-bottom: var(--canon-space-6);
+}
+
+.cu-pb-7 {
+  padding-bottom: var(--canon-space-7);
+}
+
+.cu-pb-8 {
+  padding-bottom: var(--canon-space-8);
+}
+
+.cu-pb-9 {
+  padding-bottom: var(--canon-space-9);
+}
+
+.cu-pb-10 {
+  padding-bottom: var(--canon-space-10);
+}
+
+.cu-pb-11 {
+  padding-bottom: var(--canon-space-11);
+}
+
+.cu-pb-12 {
+  padding-bottom: var(--canon-space-12);
+}
+
+.cu-pb-13 {
+  padding-bottom: var(--canon-space-13);
+}
+
+.cu-pb-14 {
+  padding-bottom: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-pb {
+    padding-bottom: var(--pb-xs);
+  }
+
+  .xs\:cu-pb-0\.5 {
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-pb-1 {
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .xs\:cu-pb-1\.5 {
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-pb-2 {
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .xs\:cu-pb-3 {
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .xs\:cu-pb-4 {
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .xs\:cu-pb-5 {
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .xs\:cu-pb-6 {
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .xs\:cu-pb-7 {
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .xs\:cu-pb-8 {
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .xs\:cu-pb-9 {
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .xs\:cu-pb-10 {
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .xs\:cu-pb-11 {
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .xs\:cu-pb-12 {
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .xs\:cu-pb-13 {
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .xs\:cu-pb-14 {
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-pb {
+    padding-bottom: var(--pb-sm);
+  }
+
+  .sm\:cu-pb-0\.5 {
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-pb-1 {
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .sm\:cu-pb-1\.5 {
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-pb-2 {
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .sm\:cu-pb-3 {
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .sm\:cu-pb-4 {
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .sm\:cu-pb-5 {
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .sm\:cu-pb-6 {
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .sm\:cu-pb-7 {
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .sm\:cu-pb-8 {
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .sm\:cu-pb-9 {
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .sm\:cu-pb-10 {
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .sm\:cu-pb-11 {
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .sm\:cu-pb-12 {
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .sm\:cu-pb-13 {
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .sm\:cu-pb-14 {
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-pb {
+    padding-bottom: var(--pb-md);
+  }
+
+  .md\:cu-pb-0\.5 {
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .md\:cu-pb-1 {
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .md\:cu-pb-1\.5 {
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .md\:cu-pb-2 {
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .md\:cu-pb-3 {
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .md\:cu-pb-4 {
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .md\:cu-pb-5 {
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .md\:cu-pb-6 {
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .md\:cu-pb-7 {
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .md\:cu-pb-8 {
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .md\:cu-pb-9 {
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .md\:cu-pb-10 {
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .md\:cu-pb-11 {
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .md\:cu-pb-12 {
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .md\:cu-pb-13 {
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .md\:cu-pb-14 {
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-pb {
+    padding-bottom: var(--pb-lg);
+  }
+
+  .lg\:cu-pb-0\.5 {
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-pb-1 {
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .lg\:cu-pb-1\.5 {
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-pb-2 {
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .lg\:cu-pb-3 {
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .lg\:cu-pb-4 {
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .lg\:cu-pb-5 {
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .lg\:cu-pb-6 {
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .lg\:cu-pb-7 {
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .lg\:cu-pb-8 {
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .lg\:cu-pb-9 {
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .lg\:cu-pb-10 {
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .lg\:cu-pb-11 {
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .lg\:cu-pb-12 {
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .lg\:cu-pb-13 {
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .lg\:cu-pb-14 {
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-pb {
+    padding-bottom: var(--pb-xl);
+  }
+
+  .xl\:cu-pb-0\.5 {
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-pb-1 {
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .xl\:cu-pb-1\.5 {
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-pb-2 {
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .xl\:cu-pb-3 {
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .xl\:cu-pb-4 {
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .xl\:cu-pb-5 {
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .xl\:cu-pb-6 {
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .xl\:cu-pb-7 {
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .xl\:cu-pb-8 {
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .xl\:cu-pb-9 {
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .xl\:cu-pb-10 {
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .xl\:cu-pb-11 {
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .xl\:cu-pb-12 {
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .xl\:cu-pb-13 {
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .xl\:cu-pb-14 {
+    padding-bottom: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/pl.css b/packages/canon/src/css/utilities/pl.css
new file mode 100644
index 0000000000..a9db77e279
--- /dev/null
+++ b/packages/canon/src/css/utilities/pl.css
@@ -0,0 +1,422 @@
+.cu-pl {
+  padding-left: var(--pl);
+}
+
+.cu-pl-0\.5 {
+  padding-left: var(--canon-space-0_5);
+}
+
+.cu-pl-1 {
+  padding-left: var(--canon-space-1);
+}
+
+.cu-pl-1\.5 {
+  padding-left: var(--canon-space-1_5);
+}
+
+.cu-pl-2 {
+  padding-left: var(--canon-space-2);
+}
+
+.cu-pl-3 {
+  padding-left: var(--canon-space-3);
+}
+
+.cu-pl-4 {
+  padding-left: var(--canon-space-4);
+}
+
+.cu-pl-5 {
+  padding-left: var(--canon-space-5);
+}
+
+.cu-pl-6 {
+  padding-left: var(--canon-space-6);
+}
+
+.cu-pl-7 {
+  padding-left: var(--canon-space-7);
+}
+
+.cu-pl-8 {
+  padding-left: var(--canon-space-8);
+}
+
+.cu-pl-9 {
+  padding-left: var(--canon-space-9);
+}
+
+.cu-pl-10 {
+  padding-left: var(--canon-space-10);
+}
+
+.cu-pl-11 {
+  padding-left: var(--canon-space-11);
+}
+
+.cu-pl-12 {
+  padding-left: var(--canon-space-12);
+}
+
+.cu-pl-13 {
+  padding-left: var(--canon-space-13);
+}
+
+.cu-pl-14 {
+  padding-left: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-pl {
+    padding-left: var(--pl-xs);
+  }
+
+  .xs\:cu-pl-0\.5 {
+    padding-left: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-pl-1 {
+    padding-left: var(--canon-space-1);
+  }
+
+  .xs\:cu-pl-1\.5 {
+    padding-left: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-pl-2 {
+    padding-left: var(--canon-space-2);
+  }
+
+  .xs\:cu-pl-3 {
+    padding-left: var(--canon-space-3);
+  }
+
+  .xs\:cu-pl-4 {
+    padding-left: var(--canon-space-4);
+  }
+
+  .xs\:cu-pl-5 {
+    padding-left: var(--canon-space-5);
+  }
+
+  .xs\:cu-pl-6 {
+    padding-left: var(--canon-space-6);
+  }
+
+  .xs\:cu-pl-7 {
+    padding-left: var(--canon-space-7);
+  }
+
+  .xs\:cu-pl-8 {
+    padding-left: var(--canon-space-8);
+  }
+
+  .xs\:cu-pl-9 {
+    padding-left: var(--canon-space-9);
+  }
+
+  .xs\:cu-pl-10 {
+    padding-left: var(--canon-space-10);
+  }
+
+  .xs\:cu-pl-11 {
+    padding-left: var(--canon-space-11);
+  }
+
+  .xs\:cu-pl-12 {
+    padding-left: var(--canon-space-12);
+  }
+
+  .xs\:cu-pl-13 {
+    padding-left: var(--canon-space-13);
+  }
+
+  .xs\:cu-pl-14 {
+    padding-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-pl {
+    padding-left: var(--pl-sm);
+  }
+
+  .sm\:cu-pl-0\.5 {
+    padding-left: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-pl-1 {
+    padding-left: var(--canon-space-1);
+  }
+
+  .sm\:cu-pl-1\.5 {
+    padding-left: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-pl-2 {
+    padding-left: var(--canon-space-2);
+  }
+
+  .sm\:cu-pl-3 {
+    padding-left: var(--canon-space-3);
+  }
+
+  .sm\:cu-pl-4 {
+    padding-left: var(--canon-space-4);
+  }
+
+  .sm\:cu-pl-5 {
+    padding-left: var(--canon-space-5);
+  }
+
+  .sm\:cu-pl-6 {
+    padding-left: var(--canon-space-6);
+  }
+
+  .sm\:cu-pl-7 {
+    padding-left: var(--canon-space-7);
+  }
+
+  .sm\:cu-pl-8 {
+    padding-left: var(--canon-space-8);
+  }
+
+  .sm\:cu-pl-9 {
+    padding-left: var(--canon-space-9);
+  }
+
+  .sm\:cu-pl-10 {
+    padding-left: var(--canon-space-10);
+  }
+
+  .sm\:cu-pl-11 {
+    padding-left: var(--canon-space-11);
+  }
+
+  .sm\:cu-pl-12 {
+    padding-left: var(--canon-space-12);
+  }
+
+  .sm\:cu-pl-13 {
+    padding-left: var(--canon-space-13);
+  }
+
+  .sm\:cu-pl-14 {
+    padding-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-pl {
+    padding-left: var(--pl-md);
+  }
+
+  .md\:cu-pl-0\.5 {
+    padding-left: var(--canon-space-0_5);
+  }
+
+  .md\:cu-pl-1 {
+    padding-left: var(--canon-space-1);
+  }
+
+  .md\:cu-pl-1\.5 {
+    padding-left: var(--canon-space-1_5);
+  }
+
+  .md\:cu-pl-2 {
+    padding-left: var(--canon-space-2);
+  }
+
+  .md\:cu-pl-3 {
+    padding-left: var(--canon-space-3);
+  }
+
+  .md\:cu-pl-4 {
+    padding-left: var(--canon-space-4);
+  }
+
+  .md\:cu-pl-5 {
+    padding-left: var(--canon-space-5);
+  }
+
+  .md\:cu-pl-6 {
+    padding-left: var(--canon-space-6);
+  }
+
+  .md\:cu-pl-7 {
+    padding-left: var(--canon-space-7);
+  }
+
+  .md\:cu-pl-8 {
+    padding-left: var(--canon-space-8);
+  }
+
+  .md\:cu-pl-9 {
+    padding-left: var(--canon-space-9);
+  }
+
+  .md\:cu-pl-10 {
+    padding-left: var(--canon-space-10);
+  }
+
+  .md\:cu-pl-11 {
+    padding-left: var(--canon-space-11);
+  }
+
+  .md\:cu-pl-12 {
+    padding-left: var(--canon-space-12);
+  }
+
+  .md\:cu-pl-13 {
+    padding-left: var(--canon-space-13);
+  }
+
+  .md\:cu-pl-14 {
+    padding-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-pl {
+    padding-left: var(--pl-lg);
+  }
+
+  .lg\:cu-pl-0\.5 {
+    padding-left: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-pl-1 {
+    padding-left: var(--canon-space-1);
+  }
+
+  .lg\:cu-pl-1\.5 {
+    padding-left: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-pl-2 {
+    padding-left: var(--canon-space-2);
+  }
+
+  .lg\:cu-pl-3 {
+    padding-left: var(--canon-space-3);
+  }
+
+  .lg\:cu-pl-4 {
+    padding-left: var(--canon-space-4);
+  }
+
+  .lg\:cu-pl-5 {
+    padding-left: var(--canon-space-5);
+  }
+
+  .lg\:cu-pl-6 {
+    padding-left: var(--canon-space-6);
+  }
+
+  .lg\:cu-pl-7 {
+    padding-left: var(--canon-space-7);
+  }
+
+  .lg\:cu-pl-8 {
+    padding-left: var(--canon-space-8);
+  }
+
+  .lg\:cu-pl-9 {
+    padding-left: var(--canon-space-9);
+  }
+
+  .lg\:cu-pl-10 {
+    padding-left: var(--canon-space-10);
+  }
+
+  .lg\:cu-pl-11 {
+    padding-left: var(--canon-space-11);
+  }
+
+  .lg\:cu-pl-12 {
+    padding-left: var(--canon-space-12);
+  }
+
+  .lg\:cu-pl-13 {
+    padding-left: var(--canon-space-13);
+  }
+
+  .lg\:cu-pl-14 {
+    padding-left: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-pl {
+    padding-left: var(--pl-xl);
+  }
+
+  .xl\:cu-pl-0\.5 {
+    padding-left: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-pl-1 {
+    padding-left: var(--canon-space-1);
+  }
+
+  .xl\:cu-pl-1\.5 {
+    padding-left: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-pl-2 {
+    padding-left: var(--canon-space-2);
+  }
+
+  .xl\:cu-pl-3 {
+    padding-left: var(--canon-space-3);
+  }
+
+  .xl\:cu-pl-4 {
+    padding-left: var(--canon-space-4);
+  }
+
+  .xl\:cu-pl-5 {
+    padding-left: var(--canon-space-5);
+  }
+
+  .xl\:cu-pl-6 {
+    padding-left: var(--canon-space-6);
+  }
+
+  .xl\:cu-pl-7 {
+    padding-left: var(--canon-space-7);
+  }
+
+  .xl\:cu-pl-8 {
+    padding-left: var(--canon-space-8);
+  }
+
+  .xl\:cu-pl-9 {
+    padding-left: var(--canon-space-9);
+  }
+
+  .xl\:cu-pl-10 {
+    padding-left: var(--canon-space-10);
+  }
+
+  .xl\:cu-pl-11 {
+    padding-left: var(--canon-space-11);
+  }
+
+  .xl\:cu-pl-12 {
+    padding-left: var(--canon-space-12);
+  }
+
+  .xl\:cu-pl-13 {
+    padding-left: var(--canon-space-13);
+  }
+
+  .xl\:cu-pl-14 {
+    padding-left: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/pr.css b/packages/canon/src/css/utilities/pr.css
new file mode 100644
index 0000000000..bcbb35f192
--- /dev/null
+++ b/packages/canon/src/css/utilities/pr.css
@@ -0,0 +1,422 @@
+.cu-pr {
+  padding-right: var(--pr);
+}
+
+.cu-pr-0\.5 {
+  padding-right: var(--canon-space-0_5);
+}
+
+.cu-pr-1 {
+  padding-right: var(--canon-space-1);
+}
+
+.cu-pr-1\.5 {
+  padding-right: var(--canon-space-1_5);
+}
+
+.cu-pr-2 {
+  padding-right: var(--canon-space-2);
+}
+
+.cu-pr-3 {
+  padding-right: var(--canon-space-3);
+}
+
+.cu-pr-4 {
+  padding-right: var(--canon-space-4);
+}
+
+.cu-pr-5 {
+  padding-right: var(--canon-space-5);
+}
+
+.cu-pr-6 {
+  padding-right: var(--canon-space-6);
+}
+
+.cu-pr-7 {
+  padding-right: var(--canon-space-7);
+}
+
+.cu-pr-8 {
+  padding-right: var(--canon-space-8);
+}
+
+.cu-pr-9 {
+  padding-right: var(--canon-space-9);
+}
+
+.cu-pr-10 {
+  padding-right: var(--canon-space-10);
+}
+
+.cu-pr-11 {
+  padding-right: var(--canon-space-11);
+}
+
+.cu-pr-12 {
+  padding-right: var(--canon-space-12);
+}
+
+.cu-pr-13 {
+  padding-right: var(--canon-space-13);
+}
+
+.cu-pr-14 {
+  padding-right: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-pr {
+    padding-right: var(--pr-xs);
+  }
+
+  .xs\:cu-pr-0\.5 {
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-pr-1 {
+    padding-right: var(--canon-space-1);
+  }
+
+  .xs\:cu-pr-1\.5 {
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-pr-2 {
+    padding-right: var(--canon-space-2);
+  }
+
+  .xs\:cu-pr-3 {
+    padding-right: var(--canon-space-3);
+  }
+
+  .xs\:cu-pr-4 {
+    padding-right: var(--canon-space-4);
+  }
+
+  .xs\:cu-pr-5 {
+    padding-right: var(--canon-space-5);
+  }
+
+  .xs\:cu-pr-6 {
+    padding-right: var(--canon-space-6);
+  }
+
+  .xs\:cu-pr-7 {
+    padding-right: var(--canon-space-7);
+  }
+
+  .xs\:cu-pr-8 {
+    padding-right: var(--canon-space-8);
+  }
+
+  .xs\:cu-pr-9 {
+    padding-right: var(--canon-space-9);
+  }
+
+  .xs\:cu-pr-10 {
+    padding-right: var(--canon-space-10);
+  }
+
+  .xs\:cu-pr-11 {
+    padding-right: var(--canon-space-11);
+  }
+
+  .xs\:cu-pr-12 {
+    padding-right: var(--canon-space-12);
+  }
+
+  .xs\:cu-pr-13 {
+    padding-right: var(--canon-space-13);
+  }
+
+  .xs\:cu-pr-14 {
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-pr {
+    padding-right: var(--pr-sm);
+  }
+
+  .sm\:cu-pr-0\.5 {
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-pr-1 {
+    padding-right: var(--canon-space-1);
+  }
+
+  .sm\:cu-pr-1\.5 {
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-pr-2 {
+    padding-right: var(--canon-space-2);
+  }
+
+  .sm\:cu-pr-3 {
+    padding-right: var(--canon-space-3);
+  }
+
+  .sm\:cu-pr-4 {
+    padding-right: var(--canon-space-4);
+  }
+
+  .sm\:cu-pr-5 {
+    padding-right: var(--canon-space-5);
+  }
+
+  .sm\:cu-pr-6 {
+    padding-right: var(--canon-space-6);
+  }
+
+  .sm\:cu-pr-7 {
+    padding-right: var(--canon-space-7);
+  }
+
+  .sm\:cu-pr-8 {
+    padding-right: var(--canon-space-8);
+  }
+
+  .sm\:cu-pr-9 {
+    padding-right: var(--canon-space-9);
+  }
+
+  .sm\:cu-pr-10 {
+    padding-right: var(--canon-space-10);
+  }
+
+  .sm\:cu-pr-11 {
+    padding-right: var(--canon-space-11);
+  }
+
+  .sm\:cu-pr-12 {
+    padding-right: var(--canon-space-12);
+  }
+
+  .sm\:cu-pr-13 {
+    padding-right: var(--canon-space-13);
+  }
+
+  .sm\:cu-pr-14 {
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-pr {
+    padding-right: var(--pr-md);
+  }
+
+  .md\:cu-pr-0\.5 {
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .md\:cu-pr-1 {
+    padding-right: var(--canon-space-1);
+  }
+
+  .md\:cu-pr-1\.5 {
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .md\:cu-pr-2 {
+    padding-right: var(--canon-space-2);
+  }
+
+  .md\:cu-pr-3 {
+    padding-right: var(--canon-space-3);
+  }
+
+  .md\:cu-pr-4 {
+    padding-right: var(--canon-space-4);
+  }
+
+  .md\:cu-pr-5 {
+    padding-right: var(--canon-space-5);
+  }
+
+  .md\:cu-pr-6 {
+    padding-right: var(--canon-space-6);
+  }
+
+  .md\:cu-pr-7 {
+    padding-right: var(--canon-space-7);
+  }
+
+  .md\:cu-pr-8 {
+    padding-right: var(--canon-space-8);
+  }
+
+  .md\:cu-pr-9 {
+    padding-right: var(--canon-space-9);
+  }
+
+  .md\:cu-pr-10 {
+    padding-right: var(--canon-space-10);
+  }
+
+  .md\:cu-pr-11 {
+    padding-right: var(--canon-space-11);
+  }
+
+  .md\:cu-pr-12 {
+    padding-right: var(--canon-space-12);
+  }
+
+  .md\:cu-pr-13 {
+    padding-right: var(--canon-space-13);
+  }
+
+  .md\:cu-pr-14 {
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-pr {
+    padding-right: var(--pr-lg);
+  }
+
+  .lg\:cu-pr-0\.5 {
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-pr-1 {
+    padding-right: var(--canon-space-1);
+  }
+
+  .lg\:cu-pr-1\.5 {
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-pr-2 {
+    padding-right: var(--canon-space-2);
+  }
+
+  .lg\:cu-pr-3 {
+    padding-right: var(--canon-space-3);
+  }
+
+  .lg\:cu-pr-4 {
+    padding-right: var(--canon-space-4);
+  }
+
+  .lg\:cu-pr-5 {
+    padding-right: var(--canon-space-5);
+  }
+
+  .lg\:cu-pr-6 {
+    padding-right: var(--canon-space-6);
+  }
+
+  .lg\:cu-pr-7 {
+    padding-right: var(--canon-space-7);
+  }
+
+  .lg\:cu-pr-8 {
+    padding-right: var(--canon-space-8);
+  }
+
+  .lg\:cu-pr-9 {
+    padding-right: var(--canon-space-9);
+  }
+
+  .lg\:cu-pr-10 {
+    padding-right: var(--canon-space-10);
+  }
+
+  .lg\:cu-pr-11 {
+    padding-right: var(--canon-space-11);
+  }
+
+  .lg\:cu-pr-12 {
+    padding-right: var(--canon-space-12);
+  }
+
+  .lg\:cu-pr-13 {
+    padding-right: var(--canon-space-13);
+  }
+
+  .lg\:cu-pr-14 {
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-pr {
+    padding-right: var(--pr-xl);
+  }
+
+  .xl\:cu-pr-0\.5 {
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-pr-1 {
+    padding-right: var(--canon-space-1);
+  }
+
+  .xl\:cu-pr-1\.5 {
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-pr-2 {
+    padding-right: var(--canon-space-2);
+  }
+
+  .xl\:cu-pr-3 {
+    padding-right: var(--canon-space-3);
+  }
+
+  .xl\:cu-pr-4 {
+    padding-right: var(--canon-space-4);
+  }
+
+  .xl\:cu-pr-5 {
+    padding-right: var(--canon-space-5);
+  }
+
+  .xl\:cu-pr-6 {
+    padding-right: var(--canon-space-6);
+  }
+
+  .xl\:cu-pr-7 {
+    padding-right: var(--canon-space-7);
+  }
+
+  .xl\:cu-pr-8 {
+    padding-right: var(--canon-space-8);
+  }
+
+  .xl\:cu-pr-9 {
+    padding-right: var(--canon-space-9);
+  }
+
+  .xl\:cu-pr-10 {
+    padding-right: var(--canon-space-10);
+  }
+
+  .xl\:cu-pr-11 {
+    padding-right: var(--canon-space-11);
+  }
+
+  .xl\:cu-pr-12 {
+    padding-right: var(--canon-space-12);
+  }
+
+  .xl\:cu-pr-13 {
+    padding-right: var(--canon-space-13);
+  }
+
+  .xl\:cu-pr-14 {
+    padding-right: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/pt.css b/packages/canon/src/css/utilities/pt.css
new file mode 100644
index 0000000000..900f412892
--- /dev/null
+++ b/packages/canon/src/css/utilities/pt.css
@@ -0,0 +1,422 @@
+.cu-pt {
+  padding-top: var(--pt);
+}
+
+.cu-pt-0\.5 {
+  padding-top: var(--canon-space-0_5);
+}
+
+.cu-pt-1 {
+  padding-top: var(--canon-space-1);
+}
+
+.cu-pt-1\.5 {
+  padding-top: var(--canon-space-1_5);
+}
+
+.cu-pt-2 {
+  padding-top: var(--canon-space-2);
+}
+
+.cu-pt-3 {
+  padding-top: var(--canon-space-3);
+}
+
+.cu-pt-4 {
+  padding-top: var(--canon-space-4);
+}
+
+.cu-pt-5 {
+  padding-top: var(--canon-space-5);
+}
+
+.cu-pt-6 {
+  padding-top: var(--canon-space-6);
+}
+
+.cu-pt-7 {
+  padding-top: var(--canon-space-7);
+}
+
+.cu-pt-8 {
+  padding-top: var(--canon-space-8);
+}
+
+.cu-pt-9 {
+  padding-top: var(--canon-space-9);
+}
+
+.cu-pt-10 {
+  padding-top: var(--canon-space-10);
+}
+
+.cu-pt-11 {
+  padding-top: var(--canon-space-11);
+}
+
+.cu-pt-12 {
+  padding-top: var(--canon-space-12);
+}
+
+.cu-pt-13 {
+  padding-top: var(--canon-space-13);
+}
+
+.cu-pt-14 {
+  padding-top: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-pt {
+    padding-top: var(--pt-xs);
+  }
+
+  .xs\:cu-pt-0\.5 {
+    padding-top: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-pt-1 {
+    padding-top: var(--canon-space-1);
+  }
+
+  .xs\:cu-pt-1\.5 {
+    padding-top: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-pt-2 {
+    padding-top: var(--canon-space-2);
+  }
+
+  .xs\:cu-pt-3 {
+    padding-top: var(--canon-space-3);
+  }
+
+  .xs\:cu-pt-4 {
+    padding-top: var(--canon-space-4);
+  }
+
+  .xs\:cu-pt-5 {
+    padding-top: var(--canon-space-5);
+  }
+
+  .xs\:cu-pt-6 {
+    padding-top: var(--canon-space-6);
+  }
+
+  .xs\:cu-pt-7 {
+    padding-top: var(--canon-space-7);
+  }
+
+  .xs\:cu-pt-8 {
+    padding-top: var(--canon-space-8);
+  }
+
+  .xs\:cu-pt-9 {
+    padding-top: var(--canon-space-9);
+  }
+
+  .xs\:cu-pt-10 {
+    padding-top: var(--canon-space-10);
+  }
+
+  .xs\:cu-pt-11 {
+    padding-top: var(--canon-space-11);
+  }
+
+  .xs\:cu-pt-12 {
+    padding-top: var(--canon-space-12);
+  }
+
+  .xs\:cu-pt-13 {
+    padding-top: var(--canon-space-13);
+  }
+
+  .xs\:cu-pt-14 {
+    padding-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-pt {
+    padding-top: var(--pt-sm);
+  }
+
+  .sm\:cu-pt-0\.5 {
+    padding-top: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-pt-1 {
+    padding-top: var(--canon-space-1);
+  }
+
+  .sm\:cu-pt-1\.5 {
+    padding-top: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-pt-2 {
+    padding-top: var(--canon-space-2);
+  }
+
+  .sm\:cu-pt-3 {
+    padding-top: var(--canon-space-3);
+  }
+
+  .sm\:cu-pt-4 {
+    padding-top: var(--canon-space-4);
+  }
+
+  .sm\:cu-pt-5 {
+    padding-top: var(--canon-space-5);
+  }
+
+  .sm\:cu-pt-6 {
+    padding-top: var(--canon-space-6);
+  }
+
+  .sm\:cu-pt-7 {
+    padding-top: var(--canon-space-7);
+  }
+
+  .sm\:cu-pt-8 {
+    padding-top: var(--canon-space-8);
+  }
+
+  .sm\:cu-pt-9 {
+    padding-top: var(--canon-space-9);
+  }
+
+  .sm\:cu-pt-10 {
+    padding-top: var(--canon-space-10);
+  }
+
+  .sm\:cu-pt-11 {
+    padding-top: var(--canon-space-11);
+  }
+
+  .sm\:cu-pt-12 {
+    padding-top: var(--canon-space-12);
+  }
+
+  .sm\:cu-pt-13 {
+    padding-top: var(--canon-space-13);
+  }
+
+  .sm\:cu-pt-14 {
+    padding-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-pt {
+    padding-top: var(--pt-md);
+  }
+
+  .md\:cu-pt-0\.5 {
+    padding-top: var(--canon-space-0_5);
+  }
+
+  .md\:cu-pt-1 {
+    padding-top: var(--canon-space-1);
+  }
+
+  .md\:cu-pt-1\.5 {
+    padding-top: var(--canon-space-1_5);
+  }
+
+  .md\:cu-pt-2 {
+    padding-top: var(--canon-space-2);
+  }
+
+  .md\:cu-pt-3 {
+    padding-top: var(--canon-space-3);
+  }
+
+  .md\:cu-pt-4 {
+    padding-top: var(--canon-space-4);
+  }
+
+  .md\:cu-pt-5 {
+    padding-top: var(--canon-space-5);
+  }
+
+  .md\:cu-pt-6 {
+    padding-top: var(--canon-space-6);
+  }
+
+  .md\:cu-pt-7 {
+    padding-top: var(--canon-space-7);
+  }
+
+  .md\:cu-pt-8 {
+    padding-top: var(--canon-space-8);
+  }
+
+  .md\:cu-pt-9 {
+    padding-top: var(--canon-space-9);
+  }
+
+  .md\:cu-pt-10 {
+    padding-top: var(--canon-space-10);
+  }
+
+  .md\:cu-pt-11 {
+    padding-top: var(--canon-space-11);
+  }
+
+  .md\:cu-pt-12 {
+    padding-top: var(--canon-space-12);
+  }
+
+  .md\:cu-pt-13 {
+    padding-top: var(--canon-space-13);
+  }
+
+  .md\:cu-pt-14 {
+    padding-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-pt {
+    padding-top: var(--pt-lg);
+  }
+
+  .lg\:cu-pt-0\.5 {
+    padding-top: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-pt-1 {
+    padding-top: var(--canon-space-1);
+  }
+
+  .lg\:cu-pt-1\.5 {
+    padding-top: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-pt-2 {
+    padding-top: var(--canon-space-2);
+  }
+
+  .lg\:cu-pt-3 {
+    padding-top: var(--canon-space-3);
+  }
+
+  .lg\:cu-pt-4 {
+    padding-top: var(--canon-space-4);
+  }
+
+  .lg\:cu-pt-5 {
+    padding-top: var(--canon-space-5);
+  }
+
+  .lg\:cu-pt-6 {
+    padding-top: var(--canon-space-6);
+  }
+
+  .lg\:cu-pt-7 {
+    padding-top: var(--canon-space-7);
+  }
+
+  .lg\:cu-pt-8 {
+    padding-top: var(--canon-space-8);
+  }
+
+  .lg\:cu-pt-9 {
+    padding-top: var(--canon-space-9);
+  }
+
+  .lg\:cu-pt-10 {
+    padding-top: var(--canon-space-10);
+  }
+
+  .lg\:cu-pt-11 {
+    padding-top: var(--canon-space-11);
+  }
+
+  .lg\:cu-pt-12 {
+    padding-top: var(--canon-space-12);
+  }
+
+  .lg\:cu-pt-13 {
+    padding-top: var(--canon-space-13);
+  }
+
+  .lg\:cu-pt-14 {
+    padding-top: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-pt {
+    padding-top: var(--pt-xl);
+  }
+
+  .xl\:cu-pt-0\.5 {
+    padding-top: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-pt-1 {
+    padding-top: var(--canon-space-1);
+  }
+
+  .xl\:cu-pt-1\.5 {
+    padding-top: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-pt-2 {
+    padding-top: var(--canon-space-2);
+  }
+
+  .xl\:cu-pt-3 {
+    padding-top: var(--canon-space-3);
+  }
+
+  .xl\:cu-pt-4 {
+    padding-top: var(--canon-space-4);
+  }
+
+  .xl\:cu-pt-5 {
+    padding-top: var(--canon-space-5);
+  }
+
+  .xl\:cu-pt-6 {
+    padding-top: var(--canon-space-6);
+  }
+
+  .xl\:cu-pt-7 {
+    padding-top: var(--canon-space-7);
+  }
+
+  .xl\:cu-pt-8 {
+    padding-top: var(--canon-space-8);
+  }
+
+  .xl\:cu-pt-9 {
+    padding-top: var(--canon-space-9);
+  }
+
+  .xl\:cu-pt-10 {
+    padding-top: var(--canon-space-10);
+  }
+
+  .xl\:cu-pt-11 {
+    padding-top: var(--canon-space-11);
+  }
+
+  .xl\:cu-pt-12 {
+    padding-top: var(--canon-space-12);
+  }
+
+  .xl\:cu-pt-13 {
+    padding-top: var(--canon-space-13);
+  }
+
+  .xl\:cu-pt-14 {
+    padding-top: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/px.css b/packages/canon/src/css/utilities/px.css
new file mode 100644
index 0000000000..84fd30aaf8
--- /dev/null
+++ b/packages/canon/src/css/utilities/px.css
@@ -0,0 +1,524 @@
+.cu-px {
+  padding-left: var(--px);
+  padding-right: var(--px);
+}
+
+.cu-px-0\.5 {
+  padding-left: var(--canon-space-0_5);
+  padding-right: var(--canon-space-0_5);
+}
+
+.cu-px-1 {
+  padding-left: var(--canon-space-1);
+  padding-right: var(--canon-space-1);
+}
+
+.cu-px-1\.5 {
+  padding-left: var(--canon-space-1_5);
+  padding-right: var(--canon-space-1_5);
+}
+
+.cu-px-2 {
+  padding-left: var(--canon-space-2);
+  padding-right: var(--canon-space-2);
+}
+
+.cu-px-3 {
+  padding-left: var(--canon-space-3);
+  padding-right: var(--canon-space-3);
+}
+
+.cu-px-4 {
+  padding-left: var(--canon-space-4);
+  padding-right: var(--canon-space-4);
+}
+
+.cu-px-5 {
+  padding-left: var(--canon-space-5);
+  padding-right: var(--canon-space-5);
+}
+
+.cu-px-6 {
+  padding-left: var(--canon-space-6);
+  padding-right: var(--canon-space-6);
+}
+
+.cu-px-7 {
+  padding-left: var(--canon-space-7);
+  padding-right: var(--canon-space-7);
+}
+
+.cu-px-8 {
+  padding-left: var(--canon-space-8);
+  padding-right: var(--canon-space-8);
+}
+
+.cu-px-9 {
+  padding-left: var(--canon-space-9);
+  padding-right: var(--canon-space-9);
+}
+
+.cu-px-10 {
+  padding-left: var(--canon-space-10);
+  padding-right: var(--canon-space-10);
+}
+
+.cu-px-11 {
+  padding-left: var(--canon-space-11);
+  padding-right: var(--canon-space-11);
+}
+
+.cu-px-12 {
+  padding-left: var(--canon-space-12);
+  padding-right: var(--canon-space-12);
+}
+
+.cu-px-13 {
+  padding-left: var(--canon-space-13);
+  padding-right: var(--canon-space-13);
+}
+
+.cu-px-14 {
+  padding-left: var(--canon-space-14);
+  padding-right: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-px {
+    padding-left: var(--px-xs);
+    padding-right: var(--px-xs);
+  }
+
+  .xs\:cu-px-0\.5 {
+    padding-left: var(--canon-space-0_5);
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-px-1 {
+    padding-left: var(--canon-space-1);
+    padding-right: var(--canon-space-1);
+  }
+
+  .xs\:cu-px-1\.5 {
+    padding-left: var(--canon-space-1_5);
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-px-2 {
+    padding-left: var(--canon-space-2);
+    padding-right: var(--canon-space-2);
+  }
+
+  .xs\:cu-px-3 {
+    padding-left: var(--canon-space-3);
+    padding-right: var(--canon-space-3);
+  }
+
+  .xs\:cu-px-4 {
+    padding-left: var(--canon-space-4);
+    padding-right: var(--canon-space-4);
+  }
+
+  .xs\:cu-px-5 {
+    padding-left: var(--canon-space-5);
+    padding-right: var(--canon-space-5);
+  }
+
+  .xs\:cu-px-6 {
+    padding-left: var(--canon-space-6);
+    padding-right: var(--canon-space-6);
+  }
+
+  .xs\:cu-px-7 {
+    padding-left: var(--canon-space-7);
+    padding-right: var(--canon-space-7);
+  }
+
+  .xs\:cu-px-8 {
+    padding-left: var(--canon-space-8);
+    padding-right: var(--canon-space-8);
+  }
+
+  .xs\:cu-px-9 {
+    padding-left: var(--canon-space-9);
+    padding-right: var(--canon-space-9);
+  }
+
+  .xs\:cu-px-10 {
+    padding-left: var(--canon-space-10);
+    padding-right: var(--canon-space-10);
+  }
+
+  .xs\:cu-px-11 {
+    padding-left: var(--canon-space-11);
+    padding-right: var(--canon-space-11);
+  }
+
+  .xs\:cu-px-12 {
+    padding-left: var(--canon-space-12);
+    padding-right: var(--canon-space-12);
+  }
+
+  .xs\:cu-px-13 {
+    padding-left: var(--canon-space-13);
+    padding-right: var(--canon-space-13);
+  }
+
+  .xs\:cu-px-14 {
+    padding-left: var(--canon-space-14);
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-px {
+    padding-left: var(--px-sm);
+    padding-right: var(--px-sm);
+  }
+
+  .sm\:cu-px-0\.5 {
+    padding-left: var(--canon-space-0_5);
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-px-1 {
+    padding-left: var(--canon-space-1);
+    padding-right: var(--canon-space-1);
+  }
+
+  .sm\:cu-px-1\.5 {
+    padding-left: var(--canon-space-1_5);
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-px-2 {
+    padding-left: var(--canon-space-2);
+    padding-right: var(--canon-space-2);
+  }
+
+  .sm\:cu-px-3 {
+    padding-left: var(--canon-space-3);
+    padding-right: var(--canon-space-3);
+  }
+
+  .sm\:cu-px-4 {
+    padding-left: var(--canon-space-4);
+    padding-right: var(--canon-space-4);
+  }
+
+  .sm\:cu-px-5 {
+    padding-left: var(--canon-space-5);
+    padding-right: var(--canon-space-5);
+  }
+
+  .sm\:cu-px-6 {
+    padding-left: var(--canon-space-6);
+    padding-right: var(--canon-space-6);
+  }
+
+  .sm\:cu-px-7 {
+    padding-left: var(--canon-space-7);
+    padding-right: var(--canon-space-7);
+  }
+
+  .sm\:cu-px-8 {
+    padding-left: var(--canon-space-8);
+    padding-right: var(--canon-space-8);
+  }
+
+  .sm\:cu-px-9 {
+    padding-left: var(--canon-space-9);
+    padding-right: var(--canon-space-9);
+  }
+
+  .sm\:cu-px-10 {
+    padding-left: var(--canon-space-10);
+    padding-right: var(--canon-space-10);
+  }
+
+  .sm\:cu-px-11 {
+    padding-left: var(--canon-space-11);
+    padding-right: var(--canon-space-11);
+  }
+
+  .sm\:cu-px-12 {
+    padding-left: var(--canon-space-12);
+    padding-right: var(--canon-space-12);
+  }
+
+  .sm\:cu-px-13 {
+    padding-left: var(--canon-space-13);
+    padding-right: var(--canon-space-13);
+  }
+
+  .sm\:cu-px-14 {
+    padding-left: var(--canon-space-14);
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-px {
+    padding-left: var(--px-md);
+    padding-right: var(--px-md);
+  }
+
+  .md\:cu-px-0\.5 {
+    padding-left: var(--canon-space-0_5);
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .md\:cu-px-1 {
+    padding-left: var(--canon-space-1);
+    padding-right: var(--canon-space-1);
+  }
+
+  .md\:cu-px-1\.5 {
+    padding-left: var(--canon-space-1_5);
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .md\:cu-px-2 {
+    padding-left: var(--canon-space-2);
+    padding-right: var(--canon-space-2);
+  }
+
+  .md\:cu-px-3 {
+    padding-left: var(--canon-space-3);
+    padding-right: var(--canon-space-3);
+  }
+
+  .md\:cu-px-4 {
+    padding-left: var(--canon-space-4);
+    padding-right: var(--canon-space-4);
+  }
+
+  .md\:cu-px-5 {
+    padding-left: var(--canon-space-5);
+    padding-right: var(--canon-space-5);
+  }
+
+  .md\:cu-px-6 {
+    padding-left: var(--canon-space-6);
+    padding-right: var(--canon-space-6);
+  }
+
+  .md\:cu-px-7 {
+    padding-left: var(--canon-space-7);
+    padding-right: var(--canon-space-7);
+  }
+
+  .md\:cu-px-8 {
+    padding-left: var(--canon-space-8);
+    padding-right: var(--canon-space-8);
+  }
+
+  .md\:cu-px-9 {
+    padding-left: var(--canon-space-9);
+    padding-right: var(--canon-space-9);
+  }
+
+  .md\:cu-px-10 {
+    padding-left: var(--canon-space-10);
+    padding-right: var(--canon-space-10);
+  }
+
+  .md\:cu-px-11 {
+    padding-left: var(--canon-space-11);
+    padding-right: var(--canon-space-11);
+  }
+
+  .md\:cu-px-12 {
+    padding-left: var(--canon-space-12);
+    padding-right: var(--canon-space-12);
+  }
+
+  .md\:cu-px-13 {
+    padding-left: var(--canon-space-13);
+    padding-right: var(--canon-space-13);
+  }
+
+  .md\:cu-px-14 {
+    padding-left: var(--canon-space-14);
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-px {
+    padding-left: var(--px-lg);
+    padding-right: var(--px-lg);
+  }
+
+  .lg\:cu-px-0\.5 {
+    padding-left: var(--canon-space-0_5);
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-px-1 {
+    padding-left: var(--canon-space-1);
+    padding-right: var(--canon-space-1);
+  }
+
+  .lg\:cu-px-1\.5 {
+    padding-left: var(--canon-space-1_5);
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-px-2 {
+    padding-left: var(--canon-space-2);
+    padding-right: var(--canon-space-2);
+  }
+
+  .lg\:cu-px-3 {
+    padding-left: var(--canon-space-3);
+    padding-right: var(--canon-space-3);
+  }
+
+  .lg\:cu-px-4 {
+    padding-left: var(--canon-space-4);
+    padding-right: var(--canon-space-4);
+  }
+
+  .lg\:cu-px-5 {
+    padding-left: var(--canon-space-5);
+    padding-right: var(--canon-space-5);
+  }
+
+  .lg\:cu-px-6 {
+    padding-left: var(--canon-space-6);
+    padding-right: var(--canon-space-6);
+  }
+
+  .lg\:cu-px-7 {
+    padding-left: var(--canon-space-7);
+    padding-right: var(--canon-space-7);
+  }
+
+  .lg\:cu-px-8 {
+    padding-left: var(--canon-space-8);
+    padding-right: var(--canon-space-8);
+  }
+
+  .lg\:cu-px-9 {
+    padding-left: var(--canon-space-9);
+    padding-right: var(--canon-space-9);
+  }
+
+  .lg\:cu-px-10 {
+    padding-left: var(--canon-space-10);
+    padding-right: var(--canon-space-10);
+  }
+
+  .lg\:cu-px-11 {
+    padding-left: var(--canon-space-11);
+    padding-right: var(--canon-space-11);
+  }
+
+  .lg\:cu-px-12 {
+    padding-left: var(--canon-space-12);
+    padding-right: var(--canon-space-12);
+  }
+
+  .lg\:cu-px-13 {
+    padding-left: var(--canon-space-13);
+    padding-right: var(--canon-space-13);
+  }
+
+  .lg\:cu-px-14 {
+    padding-left: var(--canon-space-14);
+    padding-right: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-px {
+    padding-left: var(--px-xl);
+    padding-right: var(--px-xl);
+  }
+
+  .xl\:cu-px-0\.5 {
+    padding-left: var(--canon-space-0_5);
+    padding-right: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-px-1 {
+    padding-left: var(--canon-space-1);
+    padding-right: var(--canon-space-1);
+  }
+
+  .xl\:cu-px-1\.5 {
+    padding-left: var(--canon-space-1_5);
+    padding-right: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-px-2 {
+    padding-left: var(--canon-space-2);
+    padding-right: var(--canon-space-2);
+  }
+
+  .xl\:cu-px-3 {
+    padding-left: var(--canon-space-3);
+    padding-right: var(--canon-space-3);
+  }
+
+  .xl\:cu-px-4 {
+    padding-left: var(--canon-space-4);
+    padding-right: var(--canon-space-4);
+  }
+
+  .xl\:cu-px-5 {
+    padding-left: var(--canon-space-5);
+    padding-right: var(--canon-space-5);
+  }
+
+  .xl\:cu-px-6 {
+    padding-left: var(--canon-space-6);
+    padding-right: var(--canon-space-6);
+  }
+
+  .xl\:cu-px-7 {
+    padding-left: var(--canon-space-7);
+    padding-right: var(--canon-space-7);
+  }
+
+  .xl\:cu-px-8 {
+    padding-left: var(--canon-space-8);
+    padding-right: var(--canon-space-8);
+  }
+
+  .xl\:cu-px-9 {
+    padding-left: var(--canon-space-9);
+    padding-right: var(--canon-space-9);
+  }
+
+  .xl\:cu-px-10 {
+    padding-left: var(--canon-space-10);
+    padding-right: var(--canon-space-10);
+  }
+
+  .xl\:cu-px-11 {
+    padding-left: var(--canon-space-11);
+    padding-right: var(--canon-space-11);
+  }
+
+  .xl\:cu-px-12 {
+    padding-left: var(--canon-space-12);
+    padding-right: var(--canon-space-12);
+  }
+
+  .xl\:cu-px-13 {
+    padding-left: var(--canon-space-13);
+    padding-right: var(--canon-space-13);
+  }
+
+  .xl\:cu-px-14 {
+    padding-left: var(--canon-space-14);
+    padding-right: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/py.css b/packages/canon/src/css/utilities/py.css
new file mode 100644
index 0000000000..233794f888
--- /dev/null
+++ b/packages/canon/src/css/utilities/py.css
@@ -0,0 +1,524 @@
+.cu-py {
+  padding-top: var(--py);
+  padding-bottom: var(--py);
+}
+
+.cu-py-0\.5 {
+  padding-top: var(--canon-space-0_5);
+  padding-bottom: var(--canon-space-0_5);
+}
+
+.cu-py-1 {
+  padding-top: var(--canon-space-1);
+  padding-bottom: var(--canon-space-1);
+}
+
+.cu-py-1\.5 {
+  padding-top: var(--canon-space-1_5);
+  padding-bottom: var(--canon-space-1_5);
+}
+
+.cu-py-2 {
+  padding-top: var(--canon-space-2);
+  padding-bottom: var(--canon-space-2);
+}
+
+.cu-py-3 {
+  padding-top: var(--canon-space-3);
+  padding-bottom: var(--canon-space-3);
+}
+
+.cu-py-4 {
+  padding-top: var(--canon-space-4);
+  padding-bottom: var(--canon-space-4);
+}
+
+.cu-py-5 {
+  padding-top: var(--canon-space-5);
+  padding-bottom: var(--canon-space-5);
+}
+
+.cu-py-6 {
+  padding-top: var(--canon-space-6);
+  padding-bottom: var(--canon-space-6);
+}
+
+.cu-py-7 {
+  padding-top: var(--canon-space-7);
+  padding-bottom: var(--canon-space-7);
+}
+
+.cu-py-8 {
+  padding-top: var(--canon-space-8);
+  padding-bottom: var(--canon-space-8);
+}
+
+.cu-py-9 {
+  padding-top: var(--canon-space-9);
+  padding-bottom: var(--canon-space-9);
+}
+
+.cu-py-10 {
+  padding-top: var(--canon-space-10);
+  padding-bottom: var(--canon-space-10);
+}
+
+.cu-py-11 {
+  padding-top: var(--canon-space-11);
+  padding-bottom: var(--canon-space-11);
+}
+
+.cu-py-12 {
+  padding-top: var(--canon-space-12);
+  padding-bottom: var(--canon-space-12);
+}
+
+.cu-py-13 {
+  padding-top: var(--canon-space-13);
+  padding-bottom: var(--canon-space-13);
+}
+
+.cu-py-14 {
+  padding-top: var(--canon-space-14);
+  padding-bottom: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-py {
+    padding-top: var(--py-xs);
+    padding-bottom: var(--py-xs);
+  }
+
+  .xs\:cu-py-0\.5 {
+    padding-top: var(--canon-space-0_5);
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-py-1 {
+    padding-top: var(--canon-space-1);
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .xs\:cu-py-1\.5 {
+    padding-top: var(--canon-space-1_5);
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-py-2 {
+    padding-top: var(--canon-space-2);
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .xs\:cu-py-3 {
+    padding-top: var(--canon-space-3);
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .xs\:cu-py-4 {
+    padding-top: var(--canon-space-4);
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .xs\:cu-py-5 {
+    padding-top: var(--canon-space-5);
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .xs\:cu-py-6 {
+    padding-top: var(--canon-space-6);
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .xs\:cu-py-7 {
+    padding-top: var(--canon-space-7);
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .xs\:cu-py-8 {
+    padding-top: var(--canon-space-8);
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .xs\:cu-py-9 {
+    padding-top: var(--canon-space-9);
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .xs\:cu-py-10 {
+    padding-top: var(--canon-space-10);
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .xs\:cu-py-11 {
+    padding-top: var(--canon-space-11);
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .xs\:cu-py-12 {
+    padding-top: var(--canon-space-12);
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .xs\:cu-py-13 {
+    padding-top: var(--canon-space-13);
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .xs\:cu-py-14 {
+    padding-top: var(--canon-space-14);
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-py {
+    padding-top: var(--py-sm);
+    padding-bottom: var(--py-sm);
+  }
+
+  .sm\:cu-py-0\.5 {
+    padding-top: var(--canon-space-0_5);
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-py-1 {
+    padding-top: var(--canon-space-1);
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .sm\:cu-py-1\.5 {
+    padding-top: var(--canon-space-1_5);
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-py-2 {
+    padding-top: var(--canon-space-2);
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .sm\:cu-py-3 {
+    padding-top: var(--canon-space-3);
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .sm\:cu-py-4 {
+    padding-top: var(--canon-space-4);
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .sm\:cu-py-5 {
+    padding-top: var(--canon-space-5);
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .sm\:cu-py-6 {
+    padding-top: var(--canon-space-6);
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .sm\:cu-py-7 {
+    padding-top: var(--canon-space-7);
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .sm\:cu-py-8 {
+    padding-top: var(--canon-space-8);
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .sm\:cu-py-9 {
+    padding-top: var(--canon-space-9);
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .sm\:cu-py-10 {
+    padding-top: var(--canon-space-10);
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .sm\:cu-py-11 {
+    padding-top: var(--canon-space-11);
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .sm\:cu-py-12 {
+    padding-top: var(--canon-space-12);
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .sm\:cu-py-13 {
+    padding-top: var(--canon-space-13);
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .sm\:cu-py-14 {
+    padding-top: var(--canon-space-14);
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-py {
+    padding-top: var(--py-md);
+    padding-bottom: var(--py-md);
+  }
+
+  .md\:cu-py-0\.5 {
+    padding-top: var(--canon-space-0_5);
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .md\:cu-py-1 {
+    padding-top: var(--canon-space-1);
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .md\:cu-py-1\.5 {
+    padding-top: var(--canon-space-1_5);
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .md\:cu-py-2 {
+    padding-top: var(--canon-space-2);
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .md\:cu-py-3 {
+    padding-top: var(--canon-space-3);
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .md\:cu-py-4 {
+    padding-top: var(--canon-space-4);
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .md\:cu-py-5 {
+    padding-top: var(--canon-space-5);
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .md\:cu-py-6 {
+    padding-top: var(--canon-space-6);
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .md\:cu-py-7 {
+    padding-top: var(--canon-space-7);
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .md\:cu-py-8 {
+    padding-top: var(--canon-space-8);
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .md\:cu-py-9 {
+    padding-top: var(--canon-space-9);
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .md\:cu-py-10 {
+    padding-top: var(--canon-space-10);
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .md\:cu-py-11 {
+    padding-top: var(--canon-space-11);
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .md\:cu-py-12 {
+    padding-top: var(--canon-space-12);
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .md\:cu-py-13 {
+    padding-top: var(--canon-space-13);
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .md\:cu-py-14 {
+    padding-top: var(--canon-space-14);
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-py {
+    padding-top: var(--py-lg);
+    padding-bottom: var(--py-lg);
+  }
+
+  .lg\:cu-py-0\.5 {
+    padding-top: var(--canon-space-0_5);
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-py-1 {
+    padding-top: var(--canon-space-1);
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .lg\:cu-py-1\.5 {
+    padding-top: var(--canon-space-1_5);
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-py-2 {
+    padding-top: var(--canon-space-2);
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .lg\:cu-py-3 {
+    padding-top: var(--canon-space-3);
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .lg\:cu-py-4 {
+    padding-top: var(--canon-space-4);
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .lg\:cu-py-5 {
+    padding-top: var(--canon-space-5);
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .lg\:cu-py-6 {
+    padding-top: var(--canon-space-6);
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .lg\:cu-py-7 {
+    padding-top: var(--canon-space-7);
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .lg\:cu-py-8 {
+    padding-top: var(--canon-space-8);
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .lg\:cu-py-9 {
+    padding-top: var(--canon-space-9);
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .lg\:cu-py-10 {
+    padding-top: var(--canon-space-10);
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .lg\:cu-py-11 {
+    padding-top: var(--canon-space-11);
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .lg\:cu-py-12 {
+    padding-top: var(--canon-space-12);
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .lg\:cu-py-13 {
+    padding-top: var(--canon-space-13);
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .lg\:cu-py-14 {
+    padding-top: var(--canon-space-14);
+    padding-bottom: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-py {
+    padding-top: var(--py-xl);
+    padding-bottom: var(--py-xl);
+  }
+
+  .xl\:cu-py-0\.5 {
+    padding-top: var(--canon-space-0_5);
+    padding-bottom: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-py-1 {
+    padding-top: var(--canon-space-1);
+    padding-bottom: var(--canon-space-1);
+  }
+
+  .xl\:cu-py-1\.5 {
+    padding-top: var(--canon-space-1_5);
+    padding-bottom: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-py-2 {
+    padding-top: var(--canon-space-2);
+    padding-bottom: var(--canon-space-2);
+  }
+
+  .xl\:cu-py-3 {
+    padding-top: var(--canon-space-3);
+    padding-bottom: var(--canon-space-3);
+  }
+
+  .xl\:cu-py-4 {
+    padding-top: var(--canon-space-4);
+    padding-bottom: var(--canon-space-4);
+  }
+
+  .xl\:cu-py-5 {
+    padding-top: var(--canon-space-5);
+    padding-bottom: var(--canon-space-5);
+  }
+
+  .xl\:cu-py-6 {
+    padding-top: var(--canon-space-6);
+    padding-bottom: var(--canon-space-6);
+  }
+
+  .xl\:cu-py-7 {
+    padding-top: var(--canon-space-7);
+    padding-bottom: var(--canon-space-7);
+  }
+
+  .xl\:cu-py-8 {
+    padding-top: var(--canon-space-8);
+    padding-bottom: var(--canon-space-8);
+  }
+
+  .xl\:cu-py-9 {
+    padding-top: var(--canon-space-9);
+    padding-bottom: var(--canon-space-9);
+  }
+
+  .xl\:cu-py-10 {
+    padding-top: var(--canon-space-10);
+    padding-bottom: var(--canon-space-10);
+  }
+
+  .xl\:cu-py-11 {
+    padding-top: var(--canon-space-11);
+    padding-bottom: var(--canon-space-11);
+  }
+
+  .xl\:cu-py-12 {
+    padding-top: var(--canon-space-12);
+    padding-bottom: var(--canon-space-12);
+  }
+
+  .xl\:cu-py-13 {
+    padding-top: var(--canon-space-13);
+    padding-bottom: var(--canon-space-13);
+  }
+
+  .xl\:cu-py-14 {
+    padding-top: var(--canon-space-14);
+    padding-bottom: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index c8fe35cb42..856cc59440 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -373,486 +373,6 @@
       justify-content: stretch;
     }
 
-    .cu-sm-m-2xl {
-      margin: var(--canon-space-12);
-    }
-
-    .cu-sm-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-sm-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-sm-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-sm-m-none {
-      margin: 0;
-    }
-
-    .cu-sm-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-sm-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-sm-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-sm-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-sm-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-sm-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-sm-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-sm-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-sm-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-sm-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-sm-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-sm-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-sm-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-sm-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-sm-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-sm-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-sm-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-sm-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-sm-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-sm-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-sm-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-sm-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-sm-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-sm-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-sm-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-sm-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-sm-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-sm-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-sm-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-sm-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-sm-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-sm-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-sm-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-sm-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-sm-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-sm-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-sm-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-sm-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-sm-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-sm-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-sm-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-sm-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-sm-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-sm-p-none {
-      padding: 0;
-    }
-
-    .cu-sm-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-sm-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-sm-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-sm-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-sm-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-sm-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-sm-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-sm-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-sm-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-sm-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-sm-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-sm-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-sm-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-sm-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-sm-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-sm-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-sm-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-sm-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-sm-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-sm-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-sm-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-sm-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-sm-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-sm-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-sm-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-sm-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-sm-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-sm-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-sm-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-sm-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-sm-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-sm-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-sm-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-sm-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-sm-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-sm-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-sm-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-sm-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-sm-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-sm-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-sm-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-sm-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-sm-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-sm-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-sm-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
     .cu-sm-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 218bd37217..10b6e44380 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -373,486 +373,6 @@
       justify-content: stretch;
     }
 
-    .cu-xl-m-2xl {
-      margin: var(--canon-space-12);
-    }
-
-    .cu-xl-m-2xs {
-      margin: var(--canon-space-2);
-    }
-
-    .cu-xl-m-lg {
-      margin: var(--canon-space-8);
-    }
-
-    .cu-xl-m-md {
-      margin: var(--canon-space-6);
-    }
-
-    .cu-xl-m-none {
-      margin: 0;
-    }
-
-    .cu-xl-m-sm {
-      margin: var(--canon-space-4);
-    }
-
-    .cu-xl-m-xl {
-      margin: var(--canon-space-10);
-    }
-
-    .cu-xl-m-xs {
-      margin: var(--canon-space-3);
-    }
-
-    .cu-xl-mb-2xl {
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-mb-2xs {
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-mb-lg {
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-mb-md {
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-mb-none {
-      margin-bottom: 0;
-    }
-
-    .cu-xl-mb-sm {
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-mb-xl {
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-mb-xs {
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-xl-ml-2xl {
-      margin-left: var(--canon-space-12);
-    }
-
-    .cu-xl-ml-2xs {
-      margin-left: var(--canon-space-2);
-    }
-
-    .cu-xl-ml-lg {
-      margin-left: var(--canon-space-8);
-    }
-
-    .cu-xl-ml-md {
-      margin-left: var(--canon-space-6);
-    }
-
-    .cu-xl-ml-none {
-      margin-left: 0;
-    }
-
-    .cu-xl-ml-sm {
-      margin-left: var(--canon-space-4);
-    }
-
-    .cu-xl-ml-xl {
-      margin-left: var(--canon-space-10);
-    }
-
-    .cu-xl-ml-xs {
-      margin-left: var(--canon-space-3);
-    }
-
-    .cu-xl-mr-2xl {
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-xl-mr-2xs {
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-xl-mr-lg {
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-xl-mr-md {
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-xl-mr-none {
-      margin-right: 0;
-    }
-
-    .cu-xl-mr-sm {
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-xl-mr-xl {
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-xl-mr-xs {
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-xl-mt-2xl {
-      margin-top: var(--canon-space-12);
-    }
-
-    .cu-xl-mt-2xs {
-      margin-top: var(--canon-space-2);
-    }
-
-    .cu-xl-mt-lg {
-      margin-top: var(--canon-space-8);
-    }
-
-    .cu-xl-mt-md {
-      margin-top: var(--canon-space-6);
-    }
-
-    .cu-xl-mt-none {
-      margin-top: 0;
-    }
-
-    .cu-xl-mt-sm {
-      margin-top: var(--canon-space-4);
-    }
-
-    .cu-xl-mt-xl {
-      margin-top: var(--canon-space-10);
-    }
-
-    .cu-xl-mt-xs {
-      margin-top: var(--canon-space-3);
-    }
-
-    .cu-xl-mx-2xl {
-      margin-left: var(--canon-space-12);
-      margin-right: var(--canon-space-12);
-    }
-
-    .cu-xl-mx-2xs {
-      margin-left: var(--canon-space-2);
-      margin-right: var(--canon-space-2);
-    }
-
-    .cu-xl-mx-lg {
-      margin-left: var(--canon-space-8);
-      margin-right: var(--canon-space-8);
-    }
-
-    .cu-xl-mx-md {
-      margin-left: var(--canon-space-6);
-      margin-right: var(--canon-space-6);
-    }
-
-    .cu-xl-mx-none {
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .cu-xl-mx-sm {
-      margin-left: var(--canon-space-4);
-      margin-right: var(--canon-space-4);
-    }
-
-    .cu-xl-mx-xl {
-      margin-left: var(--canon-space-10);
-      margin-right: var(--canon-space-10);
-    }
-
-    .cu-xl-mx-xs {
-      margin-left: var(--canon-space-3);
-      margin-right: var(--canon-space-3);
-    }
-
-    .cu-xl-my-2xl {
-      margin-top: var(--canon-space-12);
-      margin-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-my-2xs {
-      margin-top: var(--canon-space-2);
-      margin-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-my-lg {
-      margin-top: var(--canon-space-8);
-      margin-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-my-md {
-      margin-top: var(--canon-space-6);
-      margin-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-my-none {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .cu-xl-my-sm {
-      margin-top: var(--canon-space-4);
-      margin-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-my-xl {
-      margin-top: var(--canon-space-10);
-      margin-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-my-xs {
-      margin-top: var(--canon-space-3);
-      margin-bottom: var(--canon-space-3);
-    }
-
-    .cu-xl-p-2xl {
-      padding: var(--canon-space-12);
-    }
-
-    .cu-xl-p-2xs {
-      padding: var(--canon-space-2);
-    }
-
-    .cu-xl-p-lg {
-      padding: var(--canon-space-8);
-    }
-
-    .cu-xl-p-md {
-      padding: var(--canon-space-6);
-    }
-
-    .cu-xl-p-none {
-      padding: 0;
-    }
-
-    .cu-xl-p-sm {
-      padding: var(--canon-space-4);
-    }
-
-    .cu-xl-p-xl {
-      padding: var(--canon-space-10);
-    }
-
-    .cu-xl-p-xs {
-      padding: var(--canon-space-3);
-    }
-
-    .cu-xl-pb-2xl {
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-pb-2xs {
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-pb-lg {
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-pb-md {
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-pb-none {
-      padding-bottom: 0;
-    }
-
-    .cu-xl-pb-sm {
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-pb-xl {
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-pb-xs {
-      padding-bottom: var(--canon-space-3);
-    }
-
-    .cu-xl-pl-2xl {
-      padding-left: var(--canon-space-12);
-    }
-
-    .cu-xl-pl-2xs {
-      padding-left: var(--canon-space-2);
-    }
-
-    .cu-xl-pl-lg {
-      padding-left: var(--canon-space-8);
-    }
-
-    .cu-xl-pl-md {
-      padding-left: var(--canon-space-6);
-    }
-
-    .cu-xl-pl-none {
-      padding-left: 0;
-    }
-
-    .cu-xl-pl-sm {
-      padding-left: var(--canon-space-4);
-    }
-
-    .cu-xl-pl-xl {
-      padding-left: var(--canon-space-10);
-    }
-
-    .cu-xl-pl-xs {
-      padding-left: var(--canon-space-3);
-    }
-
-    .cu-xl-pr-2xl {
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-xl-pr-2xs {
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-xl-pr-lg {
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-xl-pr-md {
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-xl-pr-none {
-      padding-right: 0;
-    }
-
-    .cu-xl-pr-sm {
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-xl-pr-xl {
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-xl-pr-xs {
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-xl-pt-2xl {
-      padding-top: var(--canon-space-12);
-    }
-
-    .cu-xl-pt-2xs {
-      padding-top: var(--canon-space-2);
-    }
-
-    .cu-xl-pt-lg {
-      padding-top: var(--canon-space-8);
-    }
-
-    .cu-xl-pt-md {
-      padding-top: var(--canon-space-6);
-    }
-
-    .cu-xl-pt-none {
-      padding-top: 0;
-    }
-
-    .cu-xl-pt-sm {
-      padding-top: var(--canon-space-4);
-    }
-
-    .cu-xl-pt-xl {
-      padding-top: var(--canon-space-10);
-    }
-
-    .cu-xl-pt-xs {
-      padding-top: var(--canon-space-3);
-    }
-
-    .cu-xl-px-2xl {
-      padding-left: var(--canon-space-12);
-      padding-right: var(--canon-space-12);
-    }
-
-    .cu-xl-px-2xs {
-      padding-left: var(--canon-space-2);
-      padding-right: var(--canon-space-2);
-    }
-
-    .cu-xl-px-lg {
-      padding-left: var(--canon-space-8);
-      padding-right: var(--canon-space-8);
-    }
-
-    .cu-xl-px-md {
-      padding-left: var(--canon-space-6);
-      padding-right: var(--canon-space-6);
-    }
-
-    .cu-xl-px-none {
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-    .cu-xl-px-sm {
-      padding-left: var(--canon-space-4);
-      padding-right: var(--canon-space-4);
-    }
-
-    .cu-xl-px-xl {
-      padding-left: var(--canon-space-10);
-      padding-right: var(--canon-space-10);
-    }
-
-    .cu-xl-px-xs {
-      padding-left: var(--canon-space-3);
-      padding-right: var(--canon-space-3);
-    }
-
-    .cu-xl-py-2xl {
-      padding-top: var(--canon-space-12);
-      padding-bottom: var(--canon-space-12);
-    }
-
-    .cu-xl-py-2xs {
-      padding-top: var(--canon-space-2);
-      padding-bottom: var(--canon-space-2);
-    }
-
-    .cu-xl-py-lg {
-      padding-top: var(--canon-space-8);
-      padding-bottom: var(--canon-space-8);
-    }
-
-    .cu-xl-py-md {
-      padding-top: var(--canon-space-6);
-      padding-bottom: var(--canon-space-6);
-    }
-
-    .cu-xl-py-none {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    .cu-xl-py-sm {
-      padding-top: var(--canon-space-4);
-      padding-bottom: var(--canon-space-4);
-    }
-
-    .cu-xl-py-xl {
-      padding-top: var(--canon-space-10);
-      padding-bottom: var(--canon-space-10);
-    }
-
-    .cu-xl-py-xs {
-      padding-top: var(--canon-space-3);
-      padding-bottom: var(--canon-space-3);
-    }
-
     .cu-xl-rounded-2xl {
       border-radius: var(--canon-radius-full);
     }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index fa64c1d624..e85832fe44 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -372,486 +372,6 @@
     justify-content: stretch;
   }
 
-  .cu-m-2xl {
-    margin: var(--canon-space-12);
-  }
-
-  .cu-m-2xs {
-    margin: var(--canon-space-2);
-  }
-
-  .cu-m-lg {
-    margin: var(--canon-space-8);
-  }
-
-  .cu-m-md {
-    margin: var(--canon-space-6);
-  }
-
-  .cu-m-none {
-    margin: 0;
-  }
-
-  .cu-m-sm {
-    margin: var(--canon-space-4);
-  }
-
-  .cu-m-xl {
-    margin: var(--canon-space-10);
-  }
-
-  .cu-m-xs {
-    margin: var(--canon-space-3);
-  }
-
-  .cu-mb-2xl {
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .cu-mb-2xs {
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .cu-mb-lg {
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .cu-mb-md {
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .cu-mb-none {
-    margin-bottom: 0;
-  }
-
-  .cu-mb-sm {
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .cu-mb-xl {
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .cu-mb-xs {
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .cu-ml-2xl {
-    margin-left: var(--canon-space-12);
-  }
-
-  .cu-ml-2xs {
-    margin-left: var(--canon-space-2);
-  }
-
-  .cu-ml-lg {
-    margin-left: var(--canon-space-8);
-  }
-
-  .cu-ml-md {
-    margin-left: var(--canon-space-6);
-  }
-
-  .cu-ml-none {
-    margin-left: 0;
-  }
-
-  .cu-ml-sm {
-    margin-left: var(--canon-space-4);
-  }
-
-  .cu-ml-xl {
-    margin-left: var(--canon-space-10);
-  }
-
-  .cu-ml-xs {
-    margin-left: var(--canon-space-3);
-  }
-
-  .cu-mr-2xl {
-    margin-right: var(--canon-space-12);
-  }
-
-  .cu-mr-2xs {
-    margin-right: var(--canon-space-2);
-  }
-
-  .cu-mr-lg {
-    margin-right: var(--canon-space-8);
-  }
-
-  .cu-mr-md {
-    margin-right: var(--canon-space-6);
-  }
-
-  .cu-mr-none {
-    margin-right: 0;
-  }
-
-  .cu-mr-sm {
-    margin-right: var(--canon-space-4);
-  }
-
-  .cu-mr-xl {
-    margin-right: var(--canon-space-10);
-  }
-
-  .cu-mr-xs {
-    margin-right: var(--canon-space-3);
-  }
-
-  .cu-mt-2xl {
-    margin-top: var(--canon-space-12);
-  }
-
-  .cu-mt-2xs {
-    margin-top: var(--canon-space-2);
-  }
-
-  .cu-mt-lg {
-    margin-top: var(--canon-space-8);
-  }
-
-  .cu-mt-md {
-    margin-top: var(--canon-space-6);
-  }
-
-  .cu-mt-none {
-    margin-top: 0;
-  }
-
-  .cu-mt-sm {
-    margin-top: var(--canon-space-4);
-  }
-
-  .cu-mt-xl {
-    margin-top: var(--canon-space-10);
-  }
-
-  .cu-mt-xs {
-    margin-top: var(--canon-space-3);
-  }
-
-  .cu-mx-2xl {
-    margin-left: var(--canon-space-12);
-    margin-right: var(--canon-space-12);
-  }
-
-  .cu-mx-2xs {
-    margin-left: var(--canon-space-2);
-    margin-right: var(--canon-space-2);
-  }
-
-  .cu-mx-lg {
-    margin-left: var(--canon-space-8);
-    margin-right: var(--canon-space-8);
-  }
-
-  .cu-mx-md {
-    margin-left: var(--canon-space-6);
-    margin-right: var(--canon-space-6);
-  }
-
-  .cu-mx-none {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .cu-mx-sm {
-    margin-left: var(--canon-space-4);
-    margin-right: var(--canon-space-4);
-  }
-
-  .cu-mx-xl {
-    margin-left: var(--canon-space-10);
-    margin-right: var(--canon-space-10);
-  }
-
-  .cu-mx-xs {
-    margin-left: var(--canon-space-3);
-    margin-right: var(--canon-space-3);
-  }
-
-  .cu-my-2xl {
-    margin-top: var(--canon-space-12);
-    margin-bottom: var(--canon-space-12);
-  }
-
-  .cu-my-2xs {
-    margin-top: var(--canon-space-2);
-    margin-bottom: var(--canon-space-2);
-  }
-
-  .cu-my-lg {
-    margin-top: var(--canon-space-8);
-    margin-bottom: var(--canon-space-8);
-  }
-
-  .cu-my-md {
-    margin-top: var(--canon-space-6);
-    margin-bottom: var(--canon-space-6);
-  }
-
-  .cu-my-none {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .cu-my-sm {
-    margin-top: var(--canon-space-4);
-    margin-bottom: var(--canon-space-4);
-  }
-
-  .cu-my-xl {
-    margin-top: var(--canon-space-10);
-    margin-bottom: var(--canon-space-10);
-  }
-
-  .cu-my-xs {
-    margin-top: var(--canon-space-3);
-    margin-bottom: var(--canon-space-3);
-  }
-
-  .cu-p-2xl {
-    padding: var(--canon-space-12);
-  }
-
-  .cu-p-2xs {
-    padding: var(--canon-space-2);
-  }
-
-  .cu-p-lg {
-    padding: var(--canon-space-8);
-  }
-
-  .cu-p-md {
-    padding: var(--canon-space-6);
-  }
-
-  .cu-p-none {
-    padding: 0;
-  }
-
-  .cu-p-sm {
-    padding: var(--canon-space-4);
-  }
-
-  .cu-p-xl {
-    padding: var(--canon-space-10);
-  }
-
-  .cu-p-xs {
-    padding: var(--canon-space-3);
-  }
-
-  .cu-pb-2xl {
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .cu-pb-2xs {
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .cu-pb-lg {
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .cu-pb-md {
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .cu-pb-none {
-    padding-bottom: 0;
-  }
-
-  .cu-pb-sm {
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .cu-pb-xl {
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .cu-pb-xs {
-    padding-bottom: var(--canon-space-3);
-  }
-
-  .cu-pl-2xl {
-    padding-left: var(--canon-space-12);
-  }
-
-  .cu-pl-2xs {
-    padding-left: var(--canon-space-2);
-  }
-
-  .cu-pl-lg {
-    padding-left: var(--canon-space-8);
-  }
-
-  .cu-pl-md {
-    padding-left: var(--canon-space-6);
-  }
-
-  .cu-pl-none {
-    padding-left: 0;
-  }
-
-  .cu-pl-sm {
-    padding-left: var(--canon-space-4);
-  }
-
-  .cu-pl-xl {
-    padding-left: var(--canon-space-10);
-  }
-
-  .cu-pl-xs {
-    padding-left: var(--canon-space-3);
-  }
-
-  .cu-pr-2xl {
-    padding-right: var(--canon-space-12);
-  }
-
-  .cu-pr-2xs {
-    padding-right: var(--canon-space-2);
-  }
-
-  .cu-pr-lg {
-    padding-right: var(--canon-space-8);
-  }
-
-  .cu-pr-md {
-    padding-right: var(--canon-space-6);
-  }
-
-  .cu-pr-none {
-    padding-right: 0;
-  }
-
-  .cu-pr-sm {
-    padding-right: var(--canon-space-4);
-  }
-
-  .cu-pr-xl {
-    padding-right: var(--canon-space-10);
-  }
-
-  .cu-pr-xs {
-    padding-right: var(--canon-space-3);
-  }
-
-  .cu-pt-2xl {
-    padding-top: var(--canon-space-12);
-  }
-
-  .cu-pt-2xs {
-    padding-top: var(--canon-space-2);
-  }
-
-  .cu-pt-lg {
-    padding-top: var(--canon-space-8);
-  }
-
-  .cu-pt-md {
-    padding-top: var(--canon-space-6);
-  }
-
-  .cu-pt-none {
-    padding-top: 0;
-  }
-
-  .cu-pt-sm {
-    padding-top: var(--canon-space-4);
-  }
-
-  .cu-pt-xl {
-    padding-top: var(--canon-space-10);
-  }
-
-  .cu-pt-xs {
-    padding-top: var(--canon-space-3);
-  }
-
-  .cu-px-2xl {
-    padding-left: var(--canon-space-12);
-    padding-right: var(--canon-space-12);
-  }
-
-  .cu-px-2xs {
-    padding-left: var(--canon-space-2);
-    padding-right: var(--canon-space-2);
-  }
-
-  .cu-px-lg {
-    padding-left: var(--canon-space-8);
-    padding-right: var(--canon-space-8);
-  }
-
-  .cu-px-md {
-    padding-left: var(--canon-space-6);
-    padding-right: var(--canon-space-6);
-  }
-
-  .cu-px-none {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .cu-px-sm {
-    padding-left: var(--canon-space-4);
-    padding-right: var(--canon-space-4);
-  }
-
-  .cu-px-xl {
-    padding-left: var(--canon-space-10);
-    padding-right: var(--canon-space-10);
-  }
-
-  .cu-px-xs {
-    padding-left: var(--canon-space-3);
-    padding-right: var(--canon-space-3);
-  }
-
-  .cu-py-2xl {
-    padding-top: var(--canon-space-12);
-    padding-bottom: var(--canon-space-12);
-  }
-
-  .cu-py-2xs {
-    padding-top: var(--canon-space-2);
-    padding-bottom: var(--canon-space-2);
-  }
-
-  .cu-py-lg {
-    padding-top: var(--canon-space-8);
-    padding-bottom: var(--canon-space-8);
-  }
-
-  .cu-py-md {
-    padding-top: var(--canon-space-6);
-    padding-bottom: var(--canon-space-6);
-  }
-
-  .cu-py-none {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  .cu-py-sm {
-    padding-top: var(--canon-space-4);
-    padding-bottom: var(--canon-space-4);
-  }
-
-  .cu-py-xl {
-    padding-top: var(--canon-space-10);
-    padding-bottom: var(--canon-space-10);
-  }
-
-  .cu-py-xs {
-    padding-top: var(--canon-space-3);
-    padding-bottom: var(--canon-space-3);
-  }
-
   .cu-rounded-2xl {
     border-radius: var(--canon-radius-full);
   }
diff --git a/packages/canon/src/props/margin.ts b/packages/canon/src/props/margin.ts
new file mode 100644
index 0000000000..15d8a8fc2b
--- /dev/null
+++ b/packages/canon/src/props/margin.ts
@@ -0,0 +1,168 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { PropDef, GetPropDefTypes } from './prop-def.js';
+
+const marginPropDefs = (spacingValues: string[]) =>
+  ({
+    /**
+     * Sets the CSS **margin** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * m="4"
+     * m="100px"
+     * m={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin
+     */
+    m: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-m',
+      customProperties: ['--m'],
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **margin-left** and **margin-right** properties.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * mx="4"
+     * mx="100px"
+     * mx={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
+     */
+    mx: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mx',
+      customProperties: ['--ml', '--mr'],
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **margin-top** and **margin-bottom** properties.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * my="4"
+     * my="100px"
+     * my={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+     */
+    my: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-my',
+      customProperties: ['--mt', '--mb'],
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **margin-top** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * mt="4"
+     * mt="100px"
+     * mt={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
+     */
+    mt: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mt',
+      customProperties: ['--mt'],
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **margin-right** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * mr="4"
+     * mr="100px"
+     * mr={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
+     */
+    mr: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mr',
+      customProperties: ['--mr'],
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **margin-bottom** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * mb="4"
+     * mb="100px"
+     * mb={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+     */
+    mb: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mb',
+      customProperties: ['--mb'],
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **margin-left** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * ml="4"
+     * ml="100px"
+     * ml={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
+     */
+    ml: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-ml',
+      customProperties: ['--ml'],
+      responsive: true,
+    },
+  } satisfies {
+    m: PropDef<(typeof spacingValues)[number]>;
+    mx: PropDef<(typeof spacingValues)[number]>;
+    my: PropDef<(typeof spacingValues)[number]>;
+    mt: PropDef<(typeof spacingValues)[number]>;
+    mr: PropDef<(typeof spacingValues)[number]>;
+    mb: PropDef<(typeof spacingValues)[number]>;
+    ml: PropDef<(typeof spacingValues)[number]>;
+  });
+
+type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
+
+export { marginPropDefs };
+export type { MarginProps };
diff --git a/packages/canon/src/props/padding.ts b/packages/canon/src/props/padding.ts
new file mode 100644
index 0000000000..5c145ee6fd
--- /dev/null
+++ b/packages/canon/src/props/padding.ts
@@ -0,0 +1,169 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PropDef } from './prop-def';
+import { GetPropDefTypes } from './prop-def';
+
+const paddingPropDefs = (spacingValues: string[]) =>
+  ({
+    /**
+     * Sets the CSS **padding** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * p="4"
+     * p="100px"
+     * p={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding
+     */
+    p: {
+      type: 'enum | string',
+      className: 'cu-p',
+      customProperties: ['--p'],
+      values: spacingValues,
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **padding-left** and **padding-right** properties.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * px="4"
+     * px="100px"
+     * px={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
+     */
+    px: {
+      type: 'enum | string',
+      className: 'cu-px',
+      customProperties: ['--pl', '--pr'],
+      values: spacingValues,
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **padding-top** and **padding-bottom** properties.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * py="4"
+     * py="100px"
+     * py={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+     */
+    py: {
+      type: 'enum | string',
+      className: 'cu-py',
+      customProperties: ['--pt', '--pb'],
+      values: spacingValues,
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **padding-top** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * pt="4"
+     * pt="100px"
+     * pt={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
+     */
+    pt: {
+      type: 'enum | string',
+      className: 'cu-pt',
+      customProperties: ['--pt'],
+      values: spacingValues,
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **padding-right** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * pr="4"
+     * pr="100px"
+     * pr={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
+     */
+    pr: {
+      type: 'enum | string',
+      className: 'cu-pr',
+      customProperties: ['--pr'],
+      values: spacingValues,
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **padding-bottom** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * pb="4"
+     * pb="100px"
+     * pb={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
+     */
+    pb: {
+      type: 'enum | string',
+      className: 'cu-pb',
+      customProperties: ['--pb'],
+      values: spacingValues,
+      responsive: true,
+    },
+    /**
+     * Sets the CSS **padding-left** property.
+     * Supports space scale values, CSS strings, and responsive objects.
+     *
+     * @example
+     * pl="4"
+     * pl="100px"
+     * pl={{ sm: '6', lg: '9' }}
+     *
+     * @link
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
+     */
+    pl: {
+      type: 'enum | string',
+      className: 'cu-pl',
+      customProperties: ['--pl'],
+      values: spacingValues,
+      responsive: true,
+    },
+  } satisfies {
+    p: PropDef<(typeof spacingValues)[number]>;
+    px: PropDef<(typeof spacingValues)[number]>;
+    py: PropDef<(typeof spacingValues)[number]>;
+    pt: PropDef<(typeof spacingValues)[number]>;
+    pr: PropDef<(typeof spacingValues)[number]>;
+    pb: PropDef<(typeof spacingValues)[number]>;
+    pl: PropDef<(typeof spacingValues)[number]>;
+  });
+
+type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
+
+export { paddingPropDefs };
+export type { PaddingProps };
diff --git a/packages/canon/src/props/prop-def.ts b/packages/canon/src/props/prop-def.ts
new file mode 100644
index 0000000000..b4689a13ca
--- /dev/null
+++ b/packages/canon/src/props/prop-def.ts
@@ -0,0 +1,107 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type React from 'react';
+
+// Creates a union type of string literals with strings, but retains intellisense for the literals.
+// Union<string, 'foo' | 'bar'> => string | Omit<string, 'foo' | 'bar'>
+type Union<S = string, T extends string | number = string> = T | Omit<S, T>;
+
+const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
+type Breakpoint = (typeof breakpoints)[number];
+type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+type BooleanPropDef = {
+  type: 'boolean';
+  default?: boolean;
+  required?: boolean;
+  className?: string;
+};
+type StringPropDef = {
+  type: 'string';
+  default?: string;
+  required?: boolean;
+};
+type ReactNodePropDef = {
+  type: 'ReactNode';
+  default?: React.ReactNode;
+  required?: boolean;
+};
+type EnumPropDef<T> = {
+  type: 'enum';
+  values: readonly T[];
+  default?: T;
+  required?: boolean;
+};
+type EnumOrStringPropDef<T> = {
+  type: 'enum | string';
+  values: readonly T[];
+  default?: T | string;
+  required?: boolean;
+};
+
+type NonStylingPropDef = {
+  className?: never;
+  customProperties?: never;
+  parseValue?: never;
+};
+
+type StylingPropDef = {
+  className: string;
+  parseValue?: (value: string) => string | undefined;
+};
+
+type ArbitraryStylingPropDef = {
+  className: string;
+  customProperties: `--${string}`[];
+  parseValue?: (value: string) => string | undefined;
+};
+
+type RegularPropDef<T> =
+  | ReactNodePropDef
+  | BooleanPropDef
+  | (StringPropDef & ArbitraryStylingPropDef)
+  | (StringPropDef & NonStylingPropDef)
+  | (EnumPropDef<T> & StylingPropDef)
+  | (EnumPropDef<T> & NonStylingPropDef)
+  | (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
+  | (EnumOrStringPropDef<T> & NonStylingPropDef);
+type ResponsivePropDef<T = any> = RegularPropDef<T> & { responsive: true };
+type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
+
+// prettier-ignore
+type GetPropDefType<Def> =
+    Def extends BooleanPropDef ? (Def extends ResponsivePropDef ? Responsive<boolean> : boolean)
+  : Def extends StringPropDef ? (Def extends ResponsivePropDef ? Responsive<string> : string)
+  : Def extends ReactNodePropDef ? (Def extends ResponsivePropDef ? Responsive<React.ReactNode> : React.ReactNode)
+  : Def extends EnumOrStringPropDef<infer Type> ?
+    Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Type
+  : Def extends EnumPropDef<infer Type> ? (Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type)
+  : never;
+
+type GetPropDefTypes<P> = {
+  [K in keyof P]?: GetPropDefType<P[K]>;
+};
+
+export { breakpoints };
+export type {
+  PropDef,
+  GetPropDefTypes,
+  ResponsivePropDef,
+  //
+  Breakpoint,
+  Responsive,
+  Union,
+};
diff --git a/packages/canon/src/props/spacing.ts b/packages/canon/src/props/spacing.ts
new file mode 100644
index 0000000000..58b3a36eff
--- /dev/null
+++ b/packages/canon/src/props/spacing.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { paddingPropDefs } from './padding';
+import { marginPropDefs } from './margin';
+
+export const spacingValues = [
+  '0.5',
+  '1',
+  '1.5',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+  '13',
+  '14',
+];
+
+export const spacingPropDefs = {
+  ...paddingPropDefs(spacingValues),
+  ...marginPropDefs(spacingValues),
+};
diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
new file mode 100644
index 0000000000..70e4249eed
--- /dev/null
+++ b/packages/canon/src/utils/extractProps.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function extractProps(
+  props: {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    as?: keyof JSX.IntrinsicElements;
+    [key: string]: any;
+  },
+  propDefs: { [key: string]: any },
+) {
+  let className: string = props.className || '';
+  let style: React.CSSProperties = props.style || {};
+
+  for (const key in propDefs) {
+    if (props.hasOwnProperty(key)) {
+      const value = props[key];
+      const propDefsValues = propDefs[key].values;
+      const propDefsCustomProperties = propDefs[key].customProperties;
+      const propDefsClassName = propDefs[key].className;
+      const isResponsive = propDefs[key].responsive;
+
+      const handleValue = (val: any, prefix: string = '') => {
+        if (propDefsValues.includes(val)) {
+          className += ` ${prefix}${propDefsClassName}-${val}`;
+        } else {
+          const customPropertyKey =
+            isResponsive && prefix
+              ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
+              : propDefsCustomProperties;
+          (style as any)[customPropertyKey] = val;
+          className += ` ${prefix}${propDefsClassName}`;
+        }
+      };
+
+      if (isResponsive && typeof value === 'object') {
+        // Handle responsive object values
+        for (const breakpoint in value) {
+          const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
+          handleValue(value[breakpoint], prefix);
+        }
+      } else {
+        handleValue(value);
+      }
+    }
+  }
+
+  // Ensure keys from props that are defined in propDefs are removed
+  const cleanedProps = Object.keys(props).reduce((acc, key) => {
+    if (!propDefs.hasOwnProperty(key)) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {} as { [key: string]: any });
+
+  return { ...cleanedProps, className, style };
+}

From 722a1a953cf2a484d0868ab56f1a828d36d89c9b Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 16:31:06 +0000
Subject: [PATCH 02/10] Cleanup Box props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.props.ts     |  57 +++++
 .../canon/src/components/Box/Box.stories.tsx  | 232 +-----------------
 packages/canon/src/components/Box/Box.tsx     |  14 +-
 packages/canon/src/components/Box/types.ts    |  22 +-
 packages/canon/src/props/height.props.ts      |  79 ++++++
 .../src/props/{margin.ts => margin.props.ts}  |   0
 .../props/{padding.ts => padding.props.ts}    |   0
 packages/canon/src/props/position.props.ts    | 154 ++++++++++++
 .../props/{spacing.ts => spacing.props.ts}    |   4 +-
 packages/canon/src/props/width.props.ts       |  79 ++++++
 packages/canon/src/types.ts                   |  76 +++---
 11 files changed, 451 insertions(+), 266 deletions(-)
 create mode 100644 packages/canon/src/components/Box/Box.props.ts
 create mode 100644 packages/canon/src/props/height.props.ts
 rename packages/canon/src/props/{margin.ts => margin.props.ts} (100%)
 rename packages/canon/src/props/{padding.ts => padding.props.ts} (100%)
 create mode 100644 packages/canon/src/props/position.props.ts
 rename packages/canon/src/props/{spacing.ts => spacing.props.ts} (89%)
 create mode 100644 packages/canon/src/props/width.props.ts

diff --git a/packages/canon/src/components/Box/Box.props.ts b/packages/canon/src/components/Box/Box.props.ts
new file mode 100644
index 0000000000..af444adbf8
--- /dev/null
+++ b/packages/canon/src/components/Box/Box.props.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
+
+const as = ['div', 'span'] as const;
+const displayValues = ['none', 'inline', 'inline-block', 'block'] as const;
+
+const boxPropDefs = {
+  /**
+   * Controls whether to render **div** or **span**
+   *
+   * @example
+   * as="div"
+   * as="span"
+   */
+  as: { type: 'enum', values: as, default: 'div' },
+  /**
+   * Sets the CSS **display** property.
+   * Supports a subset of the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * display="inline-block"
+   * display={{ sm: 'none', lg: 'block' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/display
+   */
+  display: {
+    type: 'enum',
+    className: 'rt-r-display',
+    values: displayValues,
+    responsive: true,
+  },
+} satisfies {
+  as: PropDef<(typeof as)[number]>;
+  display: PropDef<(typeof displayValues)[number]>;
+};
+
+// Use all of the imported prop defs to ensure that JSDoc works
+type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
+
+export { boxPropDefs };
+export type { BoxOwnProps };
diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 5958e2a739..aaa19105cc 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -67,9 +67,6 @@ export const Display: Story = {
         <Box display="block" {...args}>
           Block
         </Box>
-        <Box display="flex" {...args}>
-          Flex
-        </Box>
         <Box display="inline" {...args}>
           Inline
         </Box>
@@ -77,124 +74,13 @@ export const Display: Story = {
           None
         </Box>
       </Inline>
-      <Box display={{ xs: 'block', sm: 'flex', md: 'inline' }} {...args}>
+      <Box display={{ initial: 'block', md: 'inline' }} {...args}>
         Responsive
       </Box>
     </Stack>
   ),
 };
 
-export const FlexDirection: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: 'auto',
-      height: 'auto',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack align="center">
-      <Box flexDirection="row" {...args}>
-        <span>Row</span>
-        <span>Row</span>
-      </Box>
-      <Box flexDirection="column" {...args}>
-        <span>Column</span>
-        <span>Column</span>
-      </Box>
-      <Box flexDirection={{ xs: 'column', sm: 'row' }} {...args}>
-        <span>Responsive</span>
-        <span>Flex Direction</span>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const JustifyContent: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: '200px',
-      height: 'auto',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack>
-      <Box justifyContent="start" {...args}>
-        <span>Flex Start</span>
-      </Box>
-      <Box justifyContent="center" {...args}>
-        <span>Center</span>
-      </Box>
-      <Box justifyContent="end" {...args}>
-        <span>Flex End</span>
-      </Box>
-      <Box justifyContent="around" {...args}>
-        <span>Space</span>
-        <span>Around</span>
-      </Box>
-      <Box justifyContent="between" {...args}>
-        <span>Space</span>
-        <span>Between</span>
-      </Box>
-      <Box
-        justifyContent={{
-          xs: 'between',
-          sm: 'around',
-          md: 'start',
-        }}
-        {...args}
-      >
-        <span>Responsive</span>
-        <span>Spacing</span>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const AlignItems: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: '200px',
-      height: '100px',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack>
-      <Box alignItems="start" {...args}>
-        <span>Flex Start</span>
-      </Box>
-      <Box alignItems="center" {...args}>
-        <span>Center</span>
-      </Box>
-      <Box alignItems="end" {...args}>
-        <span>Flex End</span>
-      </Box>
-      <Box
-        alignItems={{
-          xs: 'start',
-          sm: 'center',
-          md: 'end',
-        }}
-        {...args}
-      >
-        <span>Responsive</span>
-        <span>Spacing</span>
-      </Box>
-    </Stack>
-  ),
-};
-
 const styleInsideBox = {
   background: 'rgb(196, 202, 251)',
   color: 'white',
@@ -294,119 +180,3 @@ export const Margin: Story = {
     </Stack>
   ),
 };
-
-export const FlexWrap: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: '200px',
-      height: 'auto',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack align="center">
-      <Box flexWrap="wrap" {...args}>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-        <span>Four</span>
-        <span>Five</span>
-        <span>Six</span>
-      </Box>
-      <Box flexWrap="nowrap" {...args}>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-        <span>Four</span>
-        <span>Five</span>
-        <span>Six</span>
-      </Box>
-      <Box flexWrap="wrap-reverse" {...args}>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-        <span>Four</span>
-        <span>Five</span>
-        <span>Six</span>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const BorderRadius: Story = {
-  args: {
-    style: {
-      width: '64px',
-      height: '64px',
-      background: '#eaf2fd',
-      border: '1px solid #2563eb',
-      color: '#2563eb',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-      padding: '4px 8px',
-    },
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  render: args => (
-    <Inline align="center">
-      <Box borderRadius="2xs" {...args}>
-        <span>2xs</span>
-      </Box>
-      <Box borderRadius="xs" {...args}>
-        <span>xs</span>
-      </Box>
-      <Box borderRadius="sm" {...args}>
-        <span>sm</span>
-      </Box>
-      <Box borderRadius="md" {...args}>
-        <span>md</span>
-      </Box>
-      <Box borderRadius="xl" {...args}>
-        <span>xl</span>
-      </Box>
-      <Box borderRadius="2xl" {...args}>
-        <span>2xl</span>
-      </Box>
-    </Inline>
-  ),
-};
-
-export const Border: Story = {
-  args: {
-    style: {
-      background: 'var(--canon-bg-elevated)',
-      color: 'var(--canon-fg-text-primary)',
-      padding: '4px 8px',
-      width: '80px',
-      height: '32px',
-    },
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 'xs',
-  },
-  render: args => (
-    <Inline align="center">
-      <Box border="base" {...args}>
-        Base
-      </Box>
-      <Box border="error" {...args}>
-        Error
-      </Box>
-      <Box border="warning" {...args}>
-        Warning
-      </Box>
-      <Box border="selected" {...args}>
-        Selected
-      </Box>
-      <Box border="none" {...args}>
-        None
-      </Box>
-    </Inline>
-  ),
-};
diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 04dc4648ce..9a92d26de1 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -18,14 +18,24 @@ import { createElement, forwardRef } from 'react';
 import { BoxProps } from './types';
 import clsx from 'clsx';
 import { extractProps } from '../../utils/extractProps';
-import { spacingPropDefs } from '../../props/spacing';
+import { spacingPropDefs } from '../../props/spacing.props';
+import { boxPropDefs } from './Box.props';
+import { widthPropDefs } from '../../props/width.props';
+import { heightPropDefs } from '../../props/height.props';
+import { positionPropDefs } from '../../props/position.props';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const { as = 'div', children } = props;
 
   // Extract utility class names and styles
-  const propDefs = { ...spacingPropDefs };
+  const propDefs = {
+    ...spacingPropDefs,
+    ...widthPropDefs,
+    ...heightPropDefs,
+    ...positionPropDefs,
+    ...boxPropDefs,
+  };
   const { className, style } = extractProps(props, propDefs);
 
   return createElement(as, {
diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts
index a55c856caf..dcab30cd22 100644
--- a/packages/canon/src/components/Box/types.ts
+++ b/packages/canon/src/components/Box/types.ts
@@ -14,11 +14,27 @@
  * limitations under the License.
  */
 
-import type { UtilityProps } from '../../types';
+import type { HeightProps } from '../../props/height.props';
+import type { WidthProps } from '../../props/width.props';
+import type { PositionProps } from '../../props/position.props';
+import type { SpaceProps } from '../../types';
+import type { BoxOwnProps } from './Box.props';
 
 /** @public */
-export interface BoxProps extends UtilityProps {
-  as?: keyof JSX.IntrinsicElements;
+export interface BoxProps extends SpaceProps {
+  as?: BoxOwnProps['as'];
+  display?: BoxOwnProps['display'];
+  width?: WidthProps['width'];
+  minWidth?: WidthProps['minWidth'];
+  maxWidth?: WidthProps['maxWidth'];
+  height?: HeightProps['height'];
+  minHeight?: HeightProps['minHeight'];
+  maxHeight?: HeightProps['maxHeight'];
+  position?: PositionProps['position'];
+  top?: PositionProps['top'];
+  left?: PositionProps['left'];
+  right?: PositionProps['right'];
+  bottom?: PositionProps['bottom'];
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
diff --git a/packages/canon/src/props/height.props.ts b/packages/canon/src/props/height.props.ts
new file mode 100644
index 0000000000..337a91001e
--- /dev/null
+++ b/packages/canon/src/props/height.props.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { PropDef, GetPropDefTypes } from './prop-def.js';
+
+const heightPropDefs = {
+  /**
+   * Sets the CSS **height** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * height="100px"
+   * height={{ md: '100vh', xl: '600px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/height
+   */
+  height: {
+    type: 'string',
+    className: 'cu-h',
+    customProperties: ['--height'],
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **min-height** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * minHeight="100px"
+   * minHeight={{ md: '100vh', xl: '600px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
+   */
+  minHeight: {
+    type: 'string',
+    className: 'cu-min-h',
+    customProperties: ['--min-height'],
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **max-height** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * maxHeight="100px"
+   * maxHeight={{ md: '100vh', xl: '600px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
+   */
+  maxHeight: {
+    type: 'string',
+    className: 'cu-max-h',
+    customProperties: ['--max-height'],
+    responsive: true,
+  },
+} satisfies {
+  height: PropDef<string>;
+  minHeight: PropDef<string>;
+  maxHeight: PropDef<string>;
+};
+
+type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
+
+export { heightPropDefs };
+export type { HeightProps };
diff --git a/packages/canon/src/props/margin.ts b/packages/canon/src/props/margin.props.ts
similarity index 100%
rename from packages/canon/src/props/margin.ts
rename to packages/canon/src/props/margin.props.ts
diff --git a/packages/canon/src/props/padding.ts b/packages/canon/src/props/padding.props.ts
similarity index 100%
rename from packages/canon/src/props/padding.ts
rename to packages/canon/src/props/padding.props.ts
diff --git a/packages/canon/src/props/position.props.ts b/packages/canon/src/props/position.props.ts
new file mode 100644
index 0000000000..248141221e
--- /dev/null
+++ b/packages/canon/src/props/position.props.ts
@@ -0,0 +1,154 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { PropDef, GetPropDefTypes } from './prop-def';
+
+const positionValues = [
+  'static',
+  'relative',
+  'absolute',
+  'fixed',
+  'sticky',
+] as const;
+
+const positionEdgeValues = [
+  '0',
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '-1',
+  '-2',
+  '-3',
+  '-4',
+  '-5',
+  '-6',
+  '-7',
+  '-8',
+  '-9',
+] as const;
+
+const positionPropDefs = {
+  /**
+   * Sets the CSS **position** property.
+   * Supports the corresponding CSS values and responsive objects.
+   *
+   * @example
+   * position="absolute"
+   * position={{ sm: 'absolute', lg: 'sticky' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/position
+   */
+  position: {
+    type: 'enum',
+    className: 'cu-position',
+    values: positionValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **top** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * top="4"
+   * top="100px"
+   * top={{ sm: '0', lg: '50%' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/top
+   */
+  top: {
+    type: 'enum | string',
+    className: 'cu-top',
+    customProperties: ['--top'],
+    values: positionEdgeValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **right** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * right="4"
+   * right="100px"
+   * right={{ sm: '0', lg: '50%' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/right
+   */
+  right: {
+    type: 'enum | string',
+    className: 'cu-right',
+    customProperties: ['--right'],
+    values: positionEdgeValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **bottom** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * bottom="4"
+   * bottom="100px"
+   * bottom={{ sm: '0', lg: '50%' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
+   */
+  bottom: {
+    type: 'enum | string',
+    className: 'cu-bottom',
+    customProperties: ['--bottom'],
+    values: positionEdgeValues,
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **left** property.
+   * Supports space scale values, CSS strings, and responsive objects.
+   *
+   * @example
+   * left="4"
+   * left="100px"
+   * left={{ sm: '0', lg: '50%' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/left
+   */
+  left: {
+    type: 'enum | string',
+    className: 'cu-left',
+    customProperties: ['--left'],
+    values: positionEdgeValues,
+    responsive: true,
+  },
+} satisfies {
+  position: PropDef<(typeof positionValues)[number]>;
+  top: PropDef<(typeof positionEdgeValues)[number]>;
+  right: PropDef<(typeof positionEdgeValues)[number]>;
+  bottom: PropDef<(typeof positionEdgeValues)[number]>;
+  left: PropDef<(typeof positionEdgeValues)[number]>;
+};
+
+// Use all of the imported prop defs to ensure that JSDoc works
+type PositionProps = GetPropDefTypes<typeof positionPropDefs>;
+
+export { positionPropDefs };
+export type { PositionProps };
diff --git a/packages/canon/src/props/spacing.ts b/packages/canon/src/props/spacing.props.ts
similarity index 89%
rename from packages/canon/src/props/spacing.ts
rename to packages/canon/src/props/spacing.props.ts
index 58b3a36eff..d33bab2aa5 100644
--- a/packages/canon/src/props/spacing.ts
+++ b/packages/canon/src/props/spacing.props.ts
@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { paddingPropDefs } from './padding';
-import { marginPropDefs } from './margin';
+import { paddingPropDefs } from './padding.props';
+import { marginPropDefs } from './margin.props';
 
 export const spacingValues = [
   '0.5',
diff --git a/packages/canon/src/props/width.props.ts b/packages/canon/src/props/width.props.ts
new file mode 100644
index 0000000000..bb1d92249b
--- /dev/null
+++ b/packages/canon/src/props/width.props.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { GetPropDefTypes, PropDef } from './prop-def.js';
+
+const widthPropDefs = {
+  /**
+   * Sets the CSS **width** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * width="100px"
+   * width={{ md: '100vw', xl: '1400px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/width
+   */
+  width: {
+    type: 'string',
+    className: 'cu-w',
+    customProperties: ['--width'],
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **min-width** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * minWidth="100px"
+   * minWidth={{ md: '100vw', xl: '1400px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
+   */
+  minWidth: {
+    type: 'string',
+    className: 'cu-min-w',
+    customProperties: ['--min-width'],
+    responsive: true,
+  },
+  /**
+   * Sets the CSS **max-width** property.
+   * Supports CSS strings and responsive objects.
+   *
+   * @example
+   * maxWidth="100px"
+   * maxWidth={{ md: '100vw', xl: '1400px' }}
+   *
+   * @link
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
+   */
+  maxWidth: {
+    type: 'string',
+    className: 'cu-max-w',
+    customProperties: ['--max-width'],
+    responsive: true,
+  },
+} satisfies {
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
+};
+
+type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
+
+export { widthPropDefs };
+export type { WidthProps };
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 3a6b55f13b..ee5d954576 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -37,7 +37,27 @@ export type AsProps =
 export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 /** @public */
-export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+/** @public */
+export type Space =
+  | '0.5'
+  | '1'
+  | '1.5'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | '13'
+  | '14'
+  | string;
 
 /** @public */
 export type Display = 'none' | 'flex' | 'block' | 'inline';
@@ -79,35 +99,35 @@ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 /** @public */
 export interface SpaceProps {
-  margin?: Space | Partial<Record<Breakpoint, Space>>;
-  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
-  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
-  marginX?: Space | Partial<Record<Breakpoint, Space>>;
-  marginY?: Space | Partial<Record<Breakpoint, Space>>;
-  padding?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+  m?: Responsive<Space>;
+  mb?: Responsive<Space>;
+  ml?: Responsive<Space>;
+  mr?: Responsive<Space>;
+  mt?: Responsive<Space>;
+  mx?: Responsive<Space>;
+  my?: Responsive<Space>;
+  p?: Responsive<Space>;
+  pb?: Responsive<Space>;
+  pl?: Responsive<Space>;
+  pr?: Responsive<Space>;
+  pt?: Responsive<Space>;
+  px?: Responsive<Space>;
+  py?: Responsive<Space>;
 }
 
 /** @public */
 export interface UtilityProps extends SpaceProps {
-  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
-  border?: Border | Partial<Record<Breakpoint, Border>>;
-  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
-  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
-  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
-  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
-  display?: Display | Partial<Record<Breakpoint, Display>>;
-  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
-  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
-  gap?: Space | Partial<Record<Breakpoint, Space>>;
-  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
-  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  alignItems?: Responsive<AlignItems>;
+  border?: Responsive<Border>;
+  borderRadius?: Responsive<BorderRadius>;
+  colEnd?: Responsive<Columns | 'auto'>;
+  colSpan?: Responsive<Columns | 'full'>;
+  colStart?: Responsive<Columns | 'auto'>;
+  columns?: Responsive<Columns>;
+  display?: Responsive<Display>;
+  flexDirection?: Responsive<FlexDirection>;
+  flexWrap?: Responsive<FlexWrap>;
+  gap?: Responsive<Space>;
+  justifyContent?: Responsive<JustifyContent>;
+  rowSpan?: Responsive<Columns | 'full'>;
 }

From 8f1a1d9823f636c5ef19aa1aeb0917d8ccbb76ea Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 16:59:31 +0000
Subject: [PATCH 03/10] Update Box other props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Box/Box.props.ts     |   2 +-
 .../canon/src/components/Box/Box.stories.tsx  |  63 +++++---
 packages/canon/src/components/Box/types.ts    |   4 -
 packages/canon/src/css/utilities.css          |  12 ++
 packages/canon/src/css/utilities/display.css  | 110 ++++++++++++++
 packages/canon/src/css/utilities/height.css   |  86 +++++++++++
 packages/canon/src/css/utilities/position.css | 134 ++++++++++++++++++
 packages/canon/src/css/utilities/width.css    |  86 +++++++++++
 packages/canon/src/props/height.props.ts      |   2 +-
 packages/canon/src/props/margin.props.ts      |   2 +-
 packages/canon/src/props/position.props.ts    |  90 ------------
 packages/canon/src/props/width.props.ts       |   2 +-
 12 files changed, 473 insertions(+), 120 deletions(-)
 create mode 100644 packages/canon/src/css/utilities/display.css
 create mode 100644 packages/canon/src/css/utilities/height.css
 create mode 100644 packages/canon/src/css/utilities/position.css
 create mode 100644 packages/canon/src/css/utilities/width.css

diff --git a/packages/canon/src/components/Box/Box.props.ts b/packages/canon/src/components/Box/Box.props.ts
index af444adbf8..68e011ad93 100644
--- a/packages/canon/src/components/Box/Box.props.ts
+++ b/packages/canon/src/components/Box/Box.props.ts
@@ -41,7 +41,7 @@ const boxPropDefs = {
    */
   display: {
     type: 'enum',
-    className: 'rt-r-display',
+    className: 'cu-display',
     values: displayValues,
     responsive: true,
   },
diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index aaa19105cc..c7fc341bf4 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -37,45 +37,64 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const Card = () => {
+  return (
+    <div
+      style={{
+        width: '64px',
+        height: '64px',
+        background: '#eaf2fd',
+        borderRadius: '4px',
+        border: '1px solid #2563eb',
+        color: '#2563eb',
+        backgroundImage:
+          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
+      }}
+    />
+  );
+};
+
 export const Default: Story = {
   args: {
-    style: {
-      width: '64px',
-      height: '64px',
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      border: '1px solid #2563eb',
-      color: '#2563eb',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    },
+    children: <Card />,
+    display: 'inline',
   },
 };
 
+const CardDisplay = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div
+      style={{
+        padding: '8px',
+        background: '#eaf2fd',
+        borderRadius: '4px',
+        border: '1px solid #2563eb',
+        color: '#2563eb',
+        backgroundImage:
+          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
 export const Display: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: 'auto',
-      height: 'auto',
-      padding: '8px',
-    },
-  },
   render: args => (
     <Stack align="center">
       <Inline>
         <Box display="block" {...args}>
-          Block
+          <CardDisplay>Block</CardDisplay>
         </Box>
         <Box display="inline" {...args}>
-          Inline
+          <CardDisplay>Inline</CardDisplay>
         </Box>
         <Box display="none" {...args}>
-          None
+          <CardDisplay>None</CardDisplay>
         </Box>
       </Inline>
       <Box display={{ initial: 'block', md: 'inline' }} {...args}>
-        Responsive
+        <CardDisplay>Responsive</CardDisplay>
       </Box>
     </Stack>
   ),
diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts
index dcab30cd22..6105de0a97 100644
--- a/packages/canon/src/components/Box/types.ts
+++ b/packages/canon/src/components/Box/types.ts
@@ -31,10 +31,6 @@ export interface BoxProps extends SpaceProps {
   minHeight?: HeightProps['minHeight'];
   maxHeight?: HeightProps['maxHeight'];
   position?: PositionProps['position'];
-  top?: PositionProps['top'];
-  left?: PositionProps['left'];
-  right?: PositionProps['right'];
-  bottom?: PositionProps['bottom'];
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index b935a95ae0..81e862d7e1 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -49,3 +49,15 @@
 @import './utilities/mb.css';
 @import './utilities/my.css';
 @import './utilities/mx.css';
+
+/* Display */
+@import './utilities/display.css';
+
+/* Width */
+@import './utilities/width.css';
+
+/* Height */
+@import './utilities/height.css';
+
+/* Position */
+@import './utilities/position.css';
diff --git a/packages/canon/src/css/utilities/display.css b/packages/canon/src/css/utilities/display.css
new file mode 100644
index 0000000000..8c353730ca
--- /dev/null
+++ b/packages/canon/src/css/utilities/display.css
@@ -0,0 +1,110 @@
+.cu-display-none {
+  display: none;
+}
+
+.cu-display-inline {
+  display: inline;
+}
+
+.cu-display-inline-block {
+  display: inline-block;
+}
+
+.cu-display-block {
+  display: block;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-display-none {
+    display: none;
+  }
+
+  .xs\:cu-display-inline {
+    display: inline;
+  }
+
+  .xs\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .xs\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-display-none {
+    display: none;
+  }
+
+  .sm\:cu-display-inline {
+    display: inline;
+  }
+
+  .sm\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .sm\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-display-none {
+    display: none;
+  }
+
+  .md\:cu-display-inline {
+    display: inline;
+  }
+
+  .md\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .md\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-display-none {
+    display: none;
+  }
+
+  .lg\:cu-display-inline {
+    display: inline;
+  }
+
+  .lg\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .lg\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-display-none {
+    display: none;
+  }
+
+  .xl\:cu-display-inline {
+    display: inline;
+  }
+
+  .xl\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .xl\:cu-display-block {
+    display: block;
+  }
+}
diff --git a/packages/canon/src/css/utilities/height.css b/packages/canon/src/css/utilities/height.css
new file mode 100644
index 0000000000..130dfc5020
--- /dev/null
+++ b/packages/canon/src/css/utilities/height.css
@@ -0,0 +1,86 @@
+.cu-h {
+  height: var(--height);
+}
+
+.cu-min-h {
+  min-height: var(--min-height);
+}
+
+.cu-max-h {
+  max-height: var(--max-height);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-h {
+    height: var(--height);
+  }
+
+  .xs\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .xs\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-h {
+    height: var(--height);
+  }
+
+  .sm\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .sm\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-h {
+    height: var(--height);
+  }
+
+  .md\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .md\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-h {
+    height: var(--height);
+  }
+
+  .lg\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .lg\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-h {
+    height: var(--height);
+  }
+
+  .xl\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .xl\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
diff --git a/packages/canon/src/css/utilities/position.css b/packages/canon/src/css/utilities/position.css
new file mode 100644
index 0000000000..764ada623b
--- /dev/null
+++ b/packages/canon/src/css/utilities/position.css
@@ -0,0 +1,134 @@
+.cu-position-absolute {
+  position: absolute;
+}
+
+.cu-position-fixed {
+  position: fixed;
+}
+
+.cu-position-sticky {
+  position: sticky;
+}
+
+.cu-position-relative {
+  position: relative;
+}
+
+.cu-position-static {
+  position: static;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .xs\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .xs\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .xs\:cu-position-relative {
+    position: relative;
+  }
+
+  .xs\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .sm\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .sm\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .sm\:cu-position-relative {
+    position: relative;
+  }
+
+  .sm\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .md\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .md\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .md\:cu-position-relative {
+    position: relative;
+  }
+
+  .md\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .lg\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .lg\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .lg\:cu-position-relative {
+    position: relative;
+  }
+
+  .lg\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .xl\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .xl\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .xl\:cu-position-relative {
+    position: relative;
+  }
+
+  .xl\:cu-position-static {
+    position: static;
+  }
+}
diff --git a/packages/canon/src/css/utilities/width.css b/packages/canon/src/css/utilities/width.css
new file mode 100644
index 0000000000..f4f10c9416
--- /dev/null
+++ b/packages/canon/src/css/utilities/width.css
@@ -0,0 +1,86 @@
+.cu-w {
+  width: var(--width);
+}
+
+.cu-min-w {
+  min-width: var(--min-width);
+}
+
+.cu-max-w {
+  max-width: var(--max-width);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-w {
+    width: var(--width);
+  }
+
+  .xs\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .xs\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-w {
+    width: var(--width);
+  }
+
+  .sm\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .sm\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-w {
+    width: var(--width);
+  }
+
+  .md\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .md\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-w {
+    width: var(--width);
+  }
+
+  .lg\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .lg\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-w {
+    width: var(--width);
+  }
+
+  .xl\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .xl\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
diff --git a/packages/canon/src/props/height.props.ts b/packages/canon/src/props/height.props.ts
index 337a91001e..a4c2c3f87f 100644
--- a/packages/canon/src/props/height.props.ts
+++ b/packages/canon/src/props/height.props.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { PropDef, GetPropDefTypes } from './prop-def.js';
+import type { PropDef, GetPropDefTypes } from './prop-def';
 
 const heightPropDefs = {
   /**
diff --git a/packages/canon/src/props/margin.props.ts b/packages/canon/src/props/margin.props.ts
index 15d8a8fc2b..69baf08ab7 100644
--- a/packages/canon/src/props/margin.props.ts
+++ b/packages/canon/src/props/margin.props.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { PropDef, GetPropDefTypes } from './prop-def.js';
+import type { PropDef, GetPropDefTypes } from './prop-def';
 
 const marginPropDefs = (spacingValues: string[]) =>
   ({
diff --git a/packages/canon/src/props/position.props.ts b/packages/canon/src/props/position.props.ts
index 248141221e..7c7e0b3b28 100644
--- a/packages/canon/src/props/position.props.ts
+++ b/packages/canon/src/props/position.props.ts
@@ -23,28 +23,6 @@ const positionValues = [
   'sticky',
 ] as const;
 
-const positionEdgeValues = [
-  '0',
-  '1',
-  '2',
-  '3',
-  '4',
-  '5',
-  '6',
-  '7',
-  '8',
-  '9',
-  '-1',
-  '-2',
-  '-3',
-  '-4',
-  '-5',
-  '-6',
-  '-7',
-  '-8',
-  '-9',
-] as const;
-
 const positionPropDefs = {
   /**
    * Sets the CSS **position** property.
@@ -75,76 +53,8 @@ const positionPropDefs = {
    * @link
    * https://developer.mozilla.org/en-US/docs/Web/CSS/top
    */
-  top: {
-    type: 'enum | string',
-    className: 'cu-top',
-    customProperties: ['--top'],
-    values: positionEdgeValues,
-    responsive: true,
-  },
-  /**
-   * Sets the CSS **right** property.
-   * Supports space scale values, CSS strings, and responsive objects.
-   *
-   * @example
-   * right="4"
-   * right="100px"
-   * right={{ sm: '0', lg: '50%' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/right
-   */
-  right: {
-    type: 'enum | string',
-    className: 'cu-right',
-    customProperties: ['--right'],
-    values: positionEdgeValues,
-    responsive: true,
-  },
-  /**
-   * Sets the CSS **bottom** property.
-   * Supports space scale values, CSS strings, and responsive objects.
-   *
-   * @example
-   * bottom="4"
-   * bottom="100px"
-   * bottom={{ sm: '0', lg: '50%' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/bottom
-   */
-  bottom: {
-    type: 'enum | string',
-    className: 'cu-bottom',
-    customProperties: ['--bottom'],
-    values: positionEdgeValues,
-    responsive: true,
-  },
-  /**
-   * Sets the CSS **left** property.
-   * Supports space scale values, CSS strings, and responsive objects.
-   *
-   * @example
-   * left="4"
-   * left="100px"
-   * left={{ sm: '0', lg: '50%' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/left
-   */
-  left: {
-    type: 'enum | string',
-    className: 'cu-left',
-    customProperties: ['--left'],
-    values: positionEdgeValues,
-    responsive: true,
-  },
 } satisfies {
   position: PropDef<(typeof positionValues)[number]>;
-  top: PropDef<(typeof positionEdgeValues)[number]>;
-  right: PropDef<(typeof positionEdgeValues)[number]>;
-  bottom: PropDef<(typeof positionEdgeValues)[number]>;
-  left: PropDef<(typeof positionEdgeValues)[number]>;
 };
 
 // Use all of the imported prop defs to ensure that JSDoc works
diff --git a/packages/canon/src/props/width.props.ts b/packages/canon/src/props/width.props.ts
index bb1d92249b..2f549012f7 100644
--- a/packages/canon/src/props/width.props.ts
+++ b/packages/canon/src/props/width.props.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { GetPropDefTypes, PropDef } from './prop-def.js';
+import type { GetPropDefTypes, PropDef } from './prop-def';
 
 const widthPropDefs = {
   /**

From 0a4be85a676e20441f934c171d4b534df8c9da27 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 17:59:23 +0000
Subject: [PATCH 04/10] Update props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md                  | 420 ++++++++++++++++--
 .../canon/src/components/Box/Box.props.ts     |  28 +-
 packages/canon/src/components/Box/Box.tsx     |   2 +
 packages/canon/src/components/Box/index.tsx   |   2 +
 packages/canon/src/components/Box/types.ts    |   3 +-
 .../Container/Container.stories.tsx           |   1 -
 .../src/components/Container/Container.tsx    |  30 +-
 .../src/components/Grid/Grid.stories.tsx      |   2 -
 .../src/components/Inline/Inline.stories.tsx  |   1 -
 packages/canon/src/index.ts                   |   2 +
 packages/canon/src/props/display.props.ts     |  37 ++
 packages/canon/src/props/height.props.ts      |  35 +-
 packages/canon/src/props/index.ts             |  22 +
 packages/canon/src/props/margin.props.ts      |  88 +---
 packages/canon/src/props/padding.props.ts     |  88 +---
 packages/canon/src/props/position.props.ts    |  26 +-
 packages/canon/src/props/prop-def.ts          |  81 ++--
 packages/canon/src/props/width.props.ts       |  35 +-
 18 files changed, 532 insertions(+), 371 deletions(-)
 create mode 100644 packages/canon/src/props/display.props.ts
 create mode 100644 packages/canon/src/props/index.ts

diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 8899f6ad45..64a1482867 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -17,6 +17,13 @@ import { RefAttributes } from 'react';
 // @public (undocumented)
 export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
 
+// @public (undocumented)
+export type ArbitraryStylingPropDef = {
+  className: string;
+  customProperties: `--${string}`[];
+  parseValue?: (value: string) => string | undefined;
+};
+
 // @public (undocumented)
 export type AsProps =
   | 'div'
@@ -36,6 +43,14 @@ export type AsProps =
   | 'dl'
   | 'dt';
 
+// @public (undocumented)
+export type BooleanPropDef = {
+  type: 'boolean';
+  default?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
 // @public (undocumented)
 export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
 
@@ -56,20 +71,51 @@ export const Box: ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface BoxProps extends UtilityProps {
+export type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
+
+// @public (undocumented)
+export const boxPropDefs: {
+  as: {
+    type: 'enum';
+    values: readonly ['div', 'span'];
+    default: 'div';
+  };
+};
+
+// @public (undocumented)
+export interface BoxProps extends SpaceProps {
   // (undocumented)
-  as?: keyof JSX.IntrinsicElements;
+  as?: BoxOwnProps['as'];
   // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
+  display?: DisplayProps['display'];
+  // (undocumented)
+  height?: HeightProps['height'];
+  // (undocumented)
+  maxHeight?: HeightProps['maxHeight'];
+  // (undocumented)
+  maxWidth?: WidthProps['maxWidth'];
+  // (undocumented)
+  minHeight?: HeightProps['minHeight'];
+  // (undocumented)
+  minWidth?: WidthProps['minWidth'];
+  // (undocumented)
+  position?: PositionProps['position'];
+  // (undocumented)
   style?: React.CSSProperties;
+  // (undocumented)
+  width?: WidthProps['width'];
 }
 
 // @public (undocumented)
 export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+// @public (undocumented)
+export const breakpoints: Breakpoint[];
+
 // @public (undocumented)
 export const Button: React_2.ForwardRefExoticComponent<
   ButtonProps & React_2.RefAttributes<HTMLButtonElement>
@@ -149,8 +195,8 @@ export interface CheckboxProps {
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 // @public (undocumented)
-export const Container: React_2.ForwardRefExoticComponent<
-  ContainerProps & React_2.RefAttributes<HTMLDivElement>
+export const Container: ForwardRefExoticComponent<
+  ContainerProps & RefAttributes<HTMLDivElement>
 >;
 
 // @public (undocumented)
@@ -160,17 +206,17 @@ export interface ContainerProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  marginBottom?: SpaceProps['marginBottom'];
+  mb?: SpaceProps['mb'];
   // (undocumented)
-  marginTop?: SpaceProps['marginTop'];
+  mt?: SpaceProps['mt'];
   // (undocumented)
-  marginY?: SpaceProps['marginY'];
+  my?: SpaceProps['my'];
   // (undocumented)
-  paddingBottom?: SpaceProps['paddingBottom'];
+  pb?: SpaceProps['pb'];
   // (undocumented)
-  paddingTop?: SpaceProps['paddingTop'];
+  pt?: SpaceProps['pt'];
   // (undocumented)
-  paddingY?: SpaceProps['paddingY'];
+  py?: SpaceProps['py'];
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -178,6 +224,35 @@ export interface ContainerProps {
 // @public (undocumented)
 export type Display = 'none' | 'flex' | 'block' | 'inline';
 
+// @public (undocumented)
+export const displayPropDefs: {
+  display: {
+    type: 'enum';
+    className: string;
+    values: readonly ['none', 'inline', 'inline-block', 'block'];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type DisplayProps = GetPropDefTypes<typeof displayPropDefs>;
+
+// @public (undocumented)
+export type EnumOrStringPropDef<T> = {
+  type: 'enum | string';
+  values: readonly T[];
+  default?: T | string;
+  required?: boolean;
+};
+
+// @public (undocumented)
+export type EnumPropDef<T> = {
+  type: 'enum';
+  values: readonly T[];
+  default?: T;
+  required?: boolean;
+};
+
 // @public (undocumented)
 export const Field: {
   Root: React_2.ForwardRefExoticComponent<
@@ -214,6 +289,34 @@ export type FlexDirection = 'row' | 'column';
 // @public (undocumented)
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
+// @public (undocumented)
+export type GetPropDefType<Def> = Def extends BooleanPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<boolean>
+    : boolean
+  : Def extends StringPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<string>
+    : string
+  : Def extends ReactNodePropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<React_2.ReactNode>
+    : React_2.ReactNode
+  : Def extends EnumOrStringPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type extends string>
+    ? Responsive<string | Type>
+    : string | Type
+  : Def extends EnumPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type>
+    ? Responsive<Type>
+    : Type
+  : never;
+
+// @public (undocumented)
+export type GetPropDefTypes<P> = {
+  [K in keyof P]?: GetPropDefType<P[K]>;
+};
+
 // @public (undocumented)
 export const Grid: ForwardRefExoticComponent<
   GridProps & RefAttributes<HTMLDivElement>
@@ -286,6 +389,31 @@ export interface HeadingProps {
       >;
 }
 
+// @public (undocumented)
+export const heightPropDefs: {
+  height: {
+    type: 'string';
+    className: string;
+    customProperties: '--height'[];
+    responsive: true;
+  };
+  minHeight: {
+    type: 'string';
+    className: string;
+    customProperties: '--min-height'[];
+    responsive: true;
+  };
+  maxHeight: {
+    type: 'string';
+    className: string;
+    customProperties: '--max-height'[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
+
 // @public (undocumented)
 export const Icon: (props: IconProps) => React_2.JSX.Element;
 
@@ -378,38 +506,216 @@ export type JustifyContent =
   | 'between';
 
 // @public (undocumented)
-export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export const marginPropDefs: (spacingValues: string[]) => {
+  m: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--m'[];
+    responsive: true;
+  };
+  mx: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: ('--ml' | '--mr')[];
+    responsive: true;
+  };
+  my: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: ('--mt' | '--mb')[];
+    responsive: true;
+  };
+  mt: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--mt'[];
+    responsive: true;
+  };
+  mr: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--mr'[];
+    responsive: true;
+  };
+  mb: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--mb'[];
+    responsive: true;
+  };
+  ml: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--ml'[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
+
+// @public (undocumented)
+export type NonStylingPropDef = {
+  className?: never;
+  customProperties?: never;
+  parseValue?: never;
+};
+
+// @public (undocumented)
+export const paddingPropDefs: (spacingValues: string[]) => {
+  p: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--p'[];
+    values: string[];
+    responsive: true;
+  };
+  px: {
+    type: 'enum | string';
+    className: string;
+    customProperties: ('--pl' | '--pr')[];
+    values: string[];
+    responsive: true;
+  };
+  py: {
+    type: 'enum | string';
+    className: string;
+    customProperties: ('--pt' | '--pb')[];
+    values: string[];
+    responsive: true;
+  };
+  pt: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pt'[];
+    values: string[];
+    responsive: true;
+  };
+  pr: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pr'[];
+    values: string[];
+    responsive: true;
+  };
+  pb: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pb'[];
+    values: string[];
+    responsive: true;
+  };
+  pl: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pl'[];
+    values: string[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
+
+// @public (undocumented)
+export const positionPropDefs: {
+  position: {
+    type: 'enum';
+    className: string;
+    values: readonly ['static', 'relative', 'absolute', 'fixed', 'sticky'];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type PositionProps = GetPropDefTypes<typeof positionPropDefs>;
+
+// @public (undocumented)
+export type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
+
+// @public (undocumented)
+export type ReactNodePropDef = {
+  type: 'ReactNode';
+  default?: React_2.ReactNode;
+  required?: boolean;
+};
+
+// @public (undocumented)
+export type RegularPropDef<T> =
+  | ReactNodePropDef
+  | BooleanPropDef
+  | (StringPropDef & ArbitraryStylingPropDef)
+  | (StringPropDef & NonStylingPropDef)
+  | (EnumPropDef<T> & StylingPropDef)
+  | (EnumPropDef<T> & NonStylingPropDef)
+  | (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
+  | (EnumOrStringPropDef<T> & NonStylingPropDef);
+
+// @public (undocumented)
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+// @public (undocumented)
+export type ResponsivePropDef<T = any> = RegularPropDef<T> & {
+  responsive: true;
+};
+
+// @public (undocumented)
+export type Space =
+  | '0.5'
+  | '1'
+  | '1.5'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | '13'
+  | '14'
+  | string;
 
 // @public (undocumented)
 export interface SpaceProps {
   // (undocumented)
-  margin?: Space | Partial<Record<Breakpoint, Space>>;
+  m?: Responsive<Space>;
   // (undocumented)
-  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  mb?: Responsive<Space>;
   // (undocumented)
-  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  ml?: Responsive<Space>;
   // (undocumented)
-  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
+  mr?: Responsive<Space>;
   // (undocumented)
-  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
+  mt?: Responsive<Space>;
   // (undocumented)
-  marginX?: Space | Partial<Record<Breakpoint, Space>>;
+  mx?: Responsive<Space>;
   // (undocumented)
-  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  my?: Responsive<Space>;
   // (undocumented)
-  padding?: Space | Partial<Record<Breakpoint, Space>>;
+  p?: Responsive<Space>;
   // (undocumented)
-  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  pb?: Responsive<Space>;
   // (undocumented)
-  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  pl?: Responsive<Space>;
   // (undocumented)
-  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
+  pr?: Responsive<Space>;
   // (undocumented)
-  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
+  pt?: Responsive<Space>;
   // (undocumented)
-  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
+  px?: Responsive<Space>;
   // (undocumented)
-  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+  py?: Responsive<Space>;
 }
 
 // @public (undocumented)
@@ -437,6 +743,19 @@ export interface StackProps extends SpaceProps {
   style?: React.CSSProperties;
 }
 
+// @public (undocumented)
+export type StringPropDef = {
+  type: 'string';
+  default?: string;
+  required?: boolean;
+};
+
+// @public (undocumented)
+export type StylingPropDef = {
+  className: string;
+  parseValue?: (value: string) => string | undefined;
+};
+
 // @public (undocumented)
 export const Table: React_3.ForwardRefExoticComponent<
   React_3.HTMLAttributes<HTMLTableElement> &
@@ -510,30 +829,55 @@ export const useCanon: () => CanonContextProps;
 // @public (undocumented)
 export interface UtilityProps extends SpaceProps {
   // (undocumented)
-  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  alignItems?: Responsive<AlignItems>;
   // (undocumented)
-  border?: Border | Partial<Record<Breakpoint, Border>>;
+  border?: Responsive<Border>;
   // (undocumented)
-  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  borderRadius?: Responsive<BorderRadius>;
   // (undocumented)
-  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colEnd?: Responsive<Columns | 'auto'>;
   // (undocumented)
-  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colSpan?: Responsive<Columns | 'full'>;
   // (undocumented)
-  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colStart?: Responsive<Columns | 'auto'>;
   // (undocumented)
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  columns?: Responsive<Columns>;
   // (undocumented)
-  display?: Display | Partial<Record<Breakpoint, Display>>;
+  display?: Responsive<Display>;
   // (undocumented)
-  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  flexDirection?: Responsive<FlexDirection>;
   // (undocumented)
-  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  flexWrap?: Responsive<FlexWrap>;
   // (undocumented)
-  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  gap?: Responsive<Space>;
   // (undocumented)
-  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  justifyContent?: Responsive<JustifyContent>;
   // (undocumented)
-  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  rowSpan?: Responsive<Columns | 'full'>;
 }
+
+// @public (undocumented)
+export const widthPropDefs: {
+  width: {
+    type: 'string';
+    className: string;
+    customProperties: '--width'[];
+    responsive: true;
+  };
+  minWidth: {
+    type: 'string';
+    className: string;
+    customProperties: '--min-width'[];
+    responsive: true;
+  };
+  maxWidth: {
+    type: 'string';
+    className: string;
+    customProperties: '--max-width'[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
 ```
diff --git a/packages/canon/src/components/Box/Box.props.ts b/packages/canon/src/components/Box/Box.props.ts
index 68e011ad93..3cf0291e43 100644
--- a/packages/canon/src/components/Box/Box.props.ts
+++ b/packages/canon/src/components/Box/Box.props.ts
@@ -17,40 +17,16 @@
 import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
 
 const as = ['div', 'span'] as const;
-const displayValues = ['none', 'inline', 'inline-block', 'block'] as const;
 
+/** @public */
 const boxPropDefs = {
-  /**
-   * Controls whether to render **div** or **span**
-   *
-   * @example
-   * as="div"
-   * as="span"
-   */
   as: { type: 'enum', values: as, default: 'div' },
-  /**
-   * Sets the CSS **display** property.
-   * Supports a subset of the corresponding CSS values and responsive objects.
-   *
-   * @example
-   * display="inline-block"
-   * display={{ sm: 'none', lg: 'block' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/display
-   */
-  display: {
-    type: 'enum',
-    className: 'cu-display',
-    values: displayValues,
-    responsive: true,
-  },
 } satisfies {
   as: PropDef<(typeof as)[number]>;
-  display: PropDef<(typeof displayValues)[number]>;
 };
 
 // Use all of the imported prop defs to ensure that JSDoc works
+/** @public */
 type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
 
 export { boxPropDefs };
diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 9a92d26de1..27f8a3046f 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -23,6 +23,7 @@ import { boxPropDefs } from './Box.props';
 import { widthPropDefs } from '../../props/width.props';
 import { heightPropDefs } from '../../props/height.props';
 import { positionPropDefs } from '../../props/position.props';
+import { displayPropDefs } from '../../props/display.props';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
@@ -34,6 +35,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
     ...widthPropDefs,
     ...heightPropDefs,
     ...positionPropDefs,
+    ...displayPropDefs,
     ...boxPropDefs,
   };
   const { className, style } = extractProps(props, propDefs);
diff --git a/packages/canon/src/components/Box/index.tsx b/packages/canon/src/components/Box/index.tsx
index d47e653dfd..087a940a2d 100644
--- a/packages/canon/src/components/Box/index.tsx
+++ b/packages/canon/src/components/Box/index.tsx
@@ -15,3 +15,5 @@
  */
 export { Box } from './Box';
 export type * from './types';
+export type { BoxOwnProps } from './Box.props';
+export { boxPropDefs } from './Box.props';
diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts
index 6105de0a97..c70012dd56 100644
--- a/packages/canon/src/components/Box/types.ts
+++ b/packages/canon/src/components/Box/types.ts
@@ -17,13 +17,14 @@
 import type { HeightProps } from '../../props/height.props';
 import type { WidthProps } from '../../props/width.props';
 import type { PositionProps } from '../../props/position.props';
+import type { DisplayProps } from '../../props/display.props';
 import type { SpaceProps } from '../../types';
 import type { BoxOwnProps } from './Box.props';
 
 /** @public */
 export interface BoxProps extends SpaceProps {
+  display?: DisplayProps['display'];
   as?: BoxOwnProps['as'];
-  display?: BoxOwnProps['display'];
   width?: WidthProps['width'];
   minWidth?: WidthProps['minWidth'];
   maxWidth?: WidthProps['maxWidth'];
diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx
index c9f468048e..f6b0fab8ba 100644
--- a/packages/canon/src/components/Container/Container.stories.tsx
+++ b/packages/canon/src/components/Container/Container.stories.tsx
@@ -37,7 +37,6 @@ type Story = StoryObj<typeof meta>;
 
 const DecorativeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       height: '64px',
       background: '#eaf2fd',
diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx
index 3583f8ba87..a925a5c38e 100644
--- a/packages/canon/src/components/Container/Container.tsx
+++ b/packages/canon/src/components/Container/Container.tsx
@@ -13,27 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { forwardRef } from 'react';
+
+import { createElement, forwardRef } from 'react';
 import { ContainerProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
 import clsx from 'clsx';
+import { displayPropDefs } from '../../props/display.props';
+import { extractProps } from '../../utils/extractProps';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
-    const { children, className, style, ...restProps } = props;
+    const { children } = props;
 
-    // Generate utility class names
-    const utilityClassNames = getClassNames(restProps);
+    // Extract utility class names and styles
+    const propDefs = {
+      ...displayPropDefs,
+    };
+    const { className, style } = extractProps(props, propDefs);
 
-    return (
-      <div
-        ref={ref}
-        className={clsx('canon-Container', utilityClassNames, className)}
-        style={style}
-      >
-        {children}
-      </div>
-    );
+    return createElement('div', {
+      ref,
+      className: clsx('canon-Container', className),
+      style,
+      children,
+    });
   },
 );
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 9aeec52d00..8d235cd736 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -42,7 +42,6 @@ type Story = StoryObj<typeof meta>;
 
 const FakeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
@@ -109,7 +108,6 @@ export const RowAndColumns: Story = {
       <Grid {...args} columns={3}>
         <Grid.Item colSpan={1} rowSpan={2}>
           <Box
-            borderRadius="xs"
             style={{
               height: '100%',
               background: '#eaf2fd',
diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index 6aa6079989..96833d1f64 100644
--- a/packages/canon/src/components/Inline/Inline.stories.tsx
+++ b/packages/canon/src/components/Inline/Inline.stories.tsx
@@ -71,7 +71,6 @@ const FakeBox = ({
   height?: number;
 }) => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 987aa959de..bfe796ff47 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -39,5 +39,7 @@ export * from './components/Checkbox';
 export * from './components/Table';
 export * from './components/Input';
 export * from './components/Field';
+
 // Types
 export * from './types';
+export * from './props';
diff --git a/packages/canon/src/props/display.props.ts b/packages/canon/src/props/display.props.ts
new file mode 100644
index 0000000000..a71557f05b
--- /dev/null
+++ b/packages/canon/src/props/display.props.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from './prop-def';
+
+const displayValues = ['none', 'inline', 'inline-block', 'block'] as const;
+
+/** @public */
+const displayPropDefs = {
+  display: {
+    type: 'enum',
+    className: 'cu-display',
+    values: displayValues,
+    responsive: true,
+  },
+} satisfies {
+  display: PropDef<(typeof displayValues)[number]>;
+};
+
+/** @public */
+type DisplayProps = GetPropDefTypes<typeof displayPropDefs>;
+
+export { displayPropDefs };
+export type { DisplayProps };
diff --git a/packages/canon/src/props/height.props.ts b/packages/canon/src/props/height.props.ts
index a4c2c3f87f..b42f965e54 100644
--- a/packages/canon/src/props/height.props.ts
+++ b/packages/canon/src/props/height.props.ts
@@ -15,52 +15,20 @@
  */
 import type { PropDef, GetPropDefTypes } from './prop-def';
 
+/** @public */
 const heightPropDefs = {
-  /**
-   * Sets the CSS **height** property.
-   * Supports CSS strings and responsive objects.
-   *
-   * @example
-   * height="100px"
-   * height={{ md: '100vh', xl: '600px' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/height
-   */
   height: {
     type: 'string',
     className: 'cu-h',
     customProperties: ['--height'],
     responsive: true,
   },
-  /**
-   * Sets the CSS **min-height** property.
-   * Supports CSS strings and responsive objects.
-   *
-   * @example
-   * minHeight="100px"
-   * minHeight={{ md: '100vh', xl: '600px' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
-   */
   minHeight: {
     type: 'string',
     className: 'cu-min-h',
     customProperties: ['--min-height'],
     responsive: true,
   },
-  /**
-   * Sets the CSS **max-height** property.
-   * Supports CSS strings and responsive objects.
-   *
-   * @example
-   * maxHeight="100px"
-   * maxHeight={{ md: '100vh', xl: '600px' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
-   */
   maxHeight: {
     type: 'string',
     className: 'cu-max-h',
@@ -73,6 +41,7 @@ const heightPropDefs = {
   maxHeight: PropDef<string>;
 };
 
+/** @public */
 type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
 
 export { heightPropDefs };
diff --git a/packages/canon/src/props/index.ts b/packages/canon/src/props/index.ts
new file mode 100644
index 0000000000..79093974b3
--- /dev/null
+++ b/packages/canon/src/props/index.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type { DisplayProps, displayPropDefs } from './display.props';
+export type { HeightProps, heightPropDefs } from './height.props';
+export type { MarginProps, marginPropDefs } from './margin.props';
+export type { PaddingProps, paddingPropDefs } from './padding.props';
+export type { PositionProps, positionPropDefs } from './position.props';
+export type { WidthProps, widthPropDefs } from './width.props';
+export * from './prop-def';
diff --git a/packages/canon/src/props/margin.props.ts b/packages/canon/src/props/margin.props.ts
index 69baf08ab7..94ec01cfc8 100644
--- a/packages/canon/src/props/margin.props.ts
+++ b/packages/canon/src/props/margin.props.ts
@@ -15,20 +15,9 @@
  */
 import type { PropDef, GetPropDefTypes } from './prop-def';
 
+/** @public */
 const marginPropDefs = (spacingValues: string[]) =>
   ({
-    /**
-     * Sets the CSS **margin** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * m="4"
-     * m="100px"
-     * m={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin
-     */
     m: {
       type: 'enum | string',
       values: spacingValues,
@@ -36,19 +25,6 @@ const marginPropDefs = (spacingValues: string[]) =>
       customProperties: ['--m'],
       responsive: true,
     },
-    /**
-     * Sets the CSS **margin-left** and **margin-right** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mx="4"
-     * mx="100px"
-     * mx={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
-     */
     mx: {
       type: 'enum | string',
       values: spacingValues,
@@ -56,19 +32,6 @@ const marginPropDefs = (spacingValues: string[]) =>
       customProperties: ['--ml', '--mr'],
       responsive: true,
     },
-    /**
-     * Sets the CSS **margin-top** and **margin-bottom** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * my="4"
-     * my="100px"
-     * my={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-     */
     my: {
       type: 'enum | string',
       values: spacingValues,
@@ -76,18 +39,6 @@ const marginPropDefs = (spacingValues: string[]) =>
       customProperties: ['--mt', '--mb'],
       responsive: true,
     },
-    /**
-     * Sets the CSS **margin-top** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mt="4"
-     * mt="100px"
-     * mt={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top
-     */
     mt: {
       type: 'enum | string',
       values: spacingValues,
@@ -95,18 +46,6 @@ const marginPropDefs = (spacingValues: string[]) =>
       customProperties: ['--mt'],
       responsive: true,
     },
-    /**
-     * Sets the CSS **margin-right** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mr="4"
-     * mr="100px"
-     * mr={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right
-     */
     mr: {
       type: 'enum | string',
       values: spacingValues,
@@ -114,18 +53,6 @@ const marginPropDefs = (spacingValues: string[]) =>
       customProperties: ['--mr'],
       responsive: true,
     },
-    /**
-     * Sets the CSS **margin-bottom** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * mb="4"
-     * mb="100px"
-     * mb={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
-     */
     mb: {
       type: 'enum | string',
       values: spacingValues,
@@ -133,18 +60,6 @@ const marginPropDefs = (spacingValues: string[]) =>
       customProperties: ['--mb'],
       responsive: true,
     },
-    /**
-     * Sets the CSS **margin-left** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * ml="4"
-     * ml="100px"
-     * ml={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
-     */
     ml: {
       type: 'enum | string',
       values: spacingValues,
@@ -162,6 +77,7 @@ const marginPropDefs = (spacingValues: string[]) =>
     ml: PropDef<(typeof spacingValues)[number]>;
   });
 
+/** @public */
 type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
 
 export { marginPropDefs };
diff --git a/packages/canon/src/props/padding.props.ts b/packages/canon/src/props/padding.props.ts
index 5c145ee6fd..4ae686adb9 100644
--- a/packages/canon/src/props/padding.props.ts
+++ b/packages/canon/src/props/padding.props.ts
@@ -16,20 +16,9 @@
 import { PropDef } from './prop-def';
 import { GetPropDefTypes } from './prop-def';
 
+/** @public */
 const paddingPropDefs = (spacingValues: string[]) =>
   ({
-    /**
-     * Sets the CSS **padding** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * p="4"
-     * p="100px"
-     * p={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding
-     */
     p: {
       type: 'enum | string',
       className: 'cu-p',
@@ -37,19 +26,6 @@ const paddingPropDefs = (spacingValues: string[]) =>
       values: spacingValues,
       responsive: true,
     },
-    /**
-     * Sets the CSS **padding-left** and **padding-right** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * px="4"
-     * px="100px"
-     * px={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-     */
     px: {
       type: 'enum | string',
       className: 'cu-px',
@@ -57,19 +33,6 @@ const paddingPropDefs = (spacingValues: string[]) =>
       values: spacingValues,
       responsive: true,
     },
-    /**
-     * Sets the CSS **padding-top** and **padding-bottom** properties.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * py="4"
-     * py="100px"
-     * py={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-     */
     py: {
       type: 'enum | string',
       className: 'cu-py',
@@ -77,18 +40,6 @@ const paddingPropDefs = (spacingValues: string[]) =>
       values: spacingValues,
       responsive: true,
     },
-    /**
-     * Sets the CSS **padding-top** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pt="4"
-     * pt="100px"
-     * pt={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top
-     */
     pt: {
       type: 'enum | string',
       className: 'cu-pt',
@@ -96,18 +47,6 @@ const paddingPropDefs = (spacingValues: string[]) =>
       values: spacingValues,
       responsive: true,
     },
-    /**
-     * Sets the CSS **padding-right** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pr="4"
-     * pr="100px"
-     * pr={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right
-     */
     pr: {
       type: 'enum | string',
       className: 'cu-pr',
@@ -115,18 +54,6 @@ const paddingPropDefs = (spacingValues: string[]) =>
       values: spacingValues,
       responsive: true,
     },
-    /**
-     * Sets the CSS **padding-bottom** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pb="4"
-     * pb="100px"
-     * pb={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
-     */
     pb: {
       type: 'enum | string',
       className: 'cu-pb',
@@ -134,18 +61,6 @@ const paddingPropDefs = (spacingValues: string[]) =>
       values: spacingValues,
       responsive: true,
     },
-    /**
-     * Sets the CSS **padding-left** property.
-     * Supports space scale values, CSS strings, and responsive objects.
-     *
-     * @example
-     * pl="4"
-     * pl="100px"
-     * pl={{ sm: '6', lg: '9' }}
-     *
-     * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
-     */
     pl: {
       type: 'enum | string',
       className: 'cu-pl',
@@ -163,6 +78,7 @@ const paddingPropDefs = (spacingValues: string[]) =>
     pl: PropDef<(typeof spacingValues)[number]>;
   });
 
+/** @public */
 type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
 
 export { paddingPropDefs };
diff --git a/packages/canon/src/props/position.props.ts b/packages/canon/src/props/position.props.ts
index 7c7e0b3b28..048e3b13ce 100644
--- a/packages/canon/src/props/position.props.ts
+++ b/packages/canon/src/props/position.props.ts
@@ -15,6 +15,7 @@
  */
 import type { PropDef, GetPropDefTypes } from './prop-def';
 
+/** @public */
 const positionValues = [
   'static',
   'relative',
@@ -23,41 +24,20 @@ const positionValues = [
   'sticky',
 ] as const;
 
+/** @public */
 const positionPropDefs = {
-  /**
-   * Sets the CSS **position** property.
-   * Supports the corresponding CSS values and responsive objects.
-   *
-   * @example
-   * position="absolute"
-   * position={{ sm: 'absolute', lg: 'sticky' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/position
-   */
   position: {
     type: 'enum',
     className: 'cu-position',
     values: positionValues,
     responsive: true,
   },
-  /**
-   * Sets the CSS **top** property.
-   * Supports space scale values, CSS strings, and responsive objects.
-   *
-   * @example
-   * top="4"
-   * top="100px"
-   * top={{ sm: '0', lg: '50%' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/top
-   */
 } satisfies {
   position: PropDef<(typeof positionValues)[number]>;
 };
 
 // Use all of the imported prop defs to ensure that JSDoc works
+/** @public */
 type PositionProps = GetPropDefTypes<typeof positionPropDefs>;
 
 export { positionPropDefs };
diff --git a/packages/canon/src/props/prop-def.ts b/packages/canon/src/props/prop-def.ts
index b4689a13ca..eb721aa115 100644
--- a/packages/canon/src/props/prop-def.ts
+++ b/packages/canon/src/props/prop-def.ts
@@ -14,62 +14,71 @@
  * limitations under the License.
  */
 import type React from 'react';
+import type { Breakpoint, Responsive } from '../types';
 
-// Creates a union type of string literals with strings, but retains intellisense for the literals.
-// Union<string, 'foo' | 'bar'> => string | Omit<string, 'foo' | 'bar'>
-type Union<S = string, T extends string | number = string> = T | Omit<S, T>;
+/** @public */
+const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as Breakpoint[];
 
-const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as const;
-type Breakpoint = (typeof breakpoints)[number];
-type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
-
-type BooleanPropDef = {
+/** @public */
+export type BooleanPropDef = {
   type: 'boolean';
   default?: boolean;
   required?: boolean;
   className?: string;
 };
-type StringPropDef = {
+
+/** @public */
+export type StringPropDef = {
   type: 'string';
   default?: string;
   required?: boolean;
 };
-type ReactNodePropDef = {
+
+/** @public */
+export type ReactNodePropDef = {
   type: 'ReactNode';
   default?: React.ReactNode;
   required?: boolean;
 };
-type EnumPropDef<T> = {
+
+/** @public */
+export type EnumPropDef<T> = {
   type: 'enum';
   values: readonly T[];
   default?: T;
   required?: boolean;
 };
-type EnumOrStringPropDef<T> = {
+
+/** @public */
+export type EnumOrStringPropDef<T> = {
   type: 'enum | string';
   values: readonly T[];
   default?: T | string;
   required?: boolean;
 };
 
-type NonStylingPropDef = {
+/** @public */
+export type NonStylingPropDef = {
   className?: never;
   customProperties?: never;
   parseValue?: never;
 };
 
-type StylingPropDef = {
+/** @public */
+export type StylingPropDef = {
   className: string;
   parseValue?: (value: string) => string | undefined;
 };
 
-type ArbitraryStylingPropDef = {
+/** @public */
+export type ArbitraryStylingPropDef = {
   className: string;
   customProperties: `--${string}`[];
   parseValue?: (value: string) => string | undefined;
 };
 
-type RegularPropDef<T> =
+/** @public */
+export type RegularPropDef<T> =
   | ReactNodePropDef
   | BooleanPropDef
   | (StringPropDef & ArbitraryStylingPropDef)
@@ -78,19 +87,39 @@ type RegularPropDef<T> =
   | (EnumPropDef<T> & NonStylingPropDef)
   | (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
   | (EnumOrStringPropDef<T> & NonStylingPropDef);
-type ResponsivePropDef<T = any> = RegularPropDef<T> & { responsive: true };
+
+/** @public */
+type ResponsivePropDef<T = any> = RegularPropDef<T> & {
+  responsive: true;
+};
+
+/** @public */
 type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
 
-// prettier-ignore
-type GetPropDefType<Def> =
-    Def extends BooleanPropDef ? (Def extends ResponsivePropDef ? Responsive<boolean> : boolean)
-  : Def extends StringPropDef ? (Def extends ResponsivePropDef ? Responsive<string> : string)
-  : Def extends ReactNodePropDef ? (Def extends ResponsivePropDef ? Responsive<React.ReactNode> : React.ReactNode)
-  : Def extends EnumOrStringPropDef<infer Type> ?
-    Def extends ResponsivePropDef<infer Type extends string> ? Responsive<Union<string, Type>> : Type
-  : Def extends EnumPropDef<infer Type> ? (Def extends ResponsivePropDef<infer Type> ? Responsive<Type> : Type)
+/** @public */
+export type GetPropDefType<Def> = Def extends BooleanPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<boolean>
+    : boolean
+  : Def extends StringPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<string>
+    : string
+  : Def extends ReactNodePropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<React.ReactNode>
+    : React.ReactNode
+  : Def extends EnumOrStringPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type extends string>
+    ? Responsive<string | Type>
+    : string | Type
+  : Def extends EnumPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type>
+    ? Responsive<Type>
+    : Type
   : never;
 
+/** @public */
 type GetPropDefTypes<P> = {
   [K in keyof P]?: GetPropDefType<P[K]>;
 };
@@ -100,8 +129,6 @@ export type {
   PropDef,
   GetPropDefTypes,
   ResponsivePropDef,
-  //
   Breakpoint,
   Responsive,
-  Union,
 };
diff --git a/packages/canon/src/props/width.props.ts b/packages/canon/src/props/width.props.ts
index 2f549012f7..fdd8f3fdd4 100644
--- a/packages/canon/src/props/width.props.ts
+++ b/packages/canon/src/props/width.props.ts
@@ -15,52 +15,20 @@
  */
 import type { GetPropDefTypes, PropDef } from './prop-def';
 
+/** @public */
 const widthPropDefs = {
-  /**
-   * Sets the CSS **width** property.
-   * Supports CSS strings and responsive objects.
-   *
-   * @example
-   * width="100px"
-   * width={{ md: '100vw', xl: '1400px' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/width
-   */
   width: {
     type: 'string',
     className: 'cu-w',
     customProperties: ['--width'],
     responsive: true,
   },
-  /**
-   * Sets the CSS **min-width** property.
-   * Supports CSS strings and responsive objects.
-   *
-   * @example
-   * minWidth="100px"
-   * minWidth={{ md: '100vw', xl: '1400px' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/min-width
-   */
   minWidth: {
     type: 'string',
     className: 'cu-min-w',
     customProperties: ['--min-width'],
     responsive: true,
   },
-  /**
-   * Sets the CSS **max-width** property.
-   * Supports CSS strings and responsive objects.
-   *
-   * @example
-   * maxWidth="100px"
-   * maxWidth={{ md: '100vw', xl: '1400px' }}
-   *
-   * @link
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
-   */
   maxWidth: {
     type: 'string',
     className: 'cu-max-w',
@@ -73,6 +41,7 @@ const widthPropDefs = {
   maxWidth: PropDef<string>;
 };
 
+/** @public */
 type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
 
 export { widthPropDefs };

From e7a195eff45762f6c97ee70e2c42f34f399db083 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 18:10:38 +0000
Subject: [PATCH 05/10] Create serious-gifts-pretend.md

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/serious-gifts-pretend.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/serious-gifts-pretend.md

diff --git a/.changeset/serious-gifts-pretend.md b/.changeset/serious-gifts-pretend.md
new file mode 100644
index 0000000000..3b7bbb84f0
--- /dev/null
+++ b/.changeset/serious-gifts-pretend.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Fixing css structure and making sure that props are applying the correct styles for all responsive values.

From 525f1a3a880d5d90f65f4d75826208b952a4fc00 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 20:35:53 +0000
Subject: [PATCH 06/10] Clean grip props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../canon/src/components/Grid/Grid.props.ts   |   93 ++
 .../src/components/Grid/Grid.stories.tsx      |   24 +-
 packages/canon/src/components/Grid/Grid.tsx   |   34 +-
 packages/canon/src/components/Grid/types.ts   |   18 +-
 packages/canon/src/css/utilities.css          |    6 +
 packages/canon/src/css/utilities/2xl.css      |  300 ----
 packages/canon/src/css/utilities/gap.css      |  422 ++++++
 packages/canon/src/css/utilities/grid.css     | 1292 +++++++++++++++++
 packages/canon/src/css/utilities/lg.css       |  300 ----
 packages/canon/src/css/utilities/md.css       |  300 ----
 packages/canon/src/css/utilities/sm.css       |  272 ----
 packages/canon/src/css/utilities/xl.css       |  300 ----
 packages/canon/src/css/utilities/xs.css       |  300 ----
 packages/canon/src/props/gap-props.ts         |   38 +
 packages/canon/src/props/index.ts             |    1 +
 packages/canon/src/utils/extractProps.ts      |   65 +-
 16 files changed, 1930 insertions(+), 1835 deletions(-)
 create mode 100644 packages/canon/src/components/Grid/Grid.props.ts
 create mode 100644 packages/canon/src/css/utilities/gap.css
 create mode 100644 packages/canon/src/css/utilities/grid.css
 create mode 100644 packages/canon/src/props/gap-props.ts

diff --git a/packages/canon/src/components/Grid/Grid.props.ts b/packages/canon/src/components/Grid/Grid.props.ts
new file mode 100644
index 0000000000..a918af6187
--- /dev/null
+++ b/packages/canon/src/components/Grid/Grid.props.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
+
+const columnsValues = [
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+  'auto',
+] as const;
+
+/** @public */
+const gridPropDefs = {
+  columns: {
+    type: 'enum | string',
+    className: 'cu-columns',
+    customProperties: ['--columns'],
+    values: columnsValues,
+    responsive: true,
+    default: 'auto',
+  },
+} satisfies {
+  columns: PropDef<(typeof columnsValues)[number]>;
+};
+
+/** @public */
+const gridItemPropDefs = {
+  colSpan: {
+    type: 'enum | string',
+    className: 'cu-col-span',
+    customProperties: ['--col-span'],
+    values: columnsValues,
+    responsive: true,
+  },
+  colEnd: {
+    type: 'enum | string',
+    className: 'cu-col-end',
+    customProperties: ['--col-end'],
+    values: columnsValues,
+    responsive: true,
+  },
+  colStart: {
+    type: 'enum | string',
+    className: 'cu-col-start',
+    customProperties: ['--col-start'],
+    values: columnsValues,
+    responsive: true,
+  },
+  rowSpan: {
+    type: 'enum | string',
+    className: 'cu-row-span',
+    customProperties: ['--row-span'],
+    values: columnsValues,
+    responsive: true,
+  },
+} satisfies {
+  colSpan: PropDef<(typeof columnsValues)[number]>;
+  colEnd: PropDef<(typeof columnsValues)[number]>;
+  colStart: PropDef<(typeof columnsValues)[number]>;
+  rowSpan: PropDef<(typeof columnsValues)[number]>;
+};
+
+/** @public */
+type GridOwnProps = GetPropDefTypes<typeof gridPropDefs>;
+
+/** @public */
+type GridItemOwnProps = GetPropDefTypes<typeof gridItemPropDefs>;
+
+export { gridPropDefs, gridItemPropDefs };
+export type { GridOwnProps, GridItemOwnProps };
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 8d235cd736..ebffe29bc0 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -33,7 +33,7 @@ const meta = {
     },
   },
   args: {
-    gap: 'xs',
+    gap: '4',
   },
 } satisfies Meta<typeof Grid>;
 
@@ -66,7 +66,7 @@ export const Default: Story = {
 
 export const LargeGap: Story = {
   args: {
-    gap: 'lg',
+    gap: '64px',
   },
   render: args => (
     <Grid {...args}>
@@ -79,17 +79,16 @@ export const LargeGap: Story = {
 
 export const ColumnSizes: Story = {
   args: {
-    columns: 12,
-    gap: 'md',
+    columns: '12',
   },
   render: args => (
-    <Stack gap="md">
+    <Stack gap="4">
       {Array.from({ length: 11 }, (_, i) => (
         <Grid {...args} key={i}>
-          <Grid.Item colSpan={(i + 1) as GridItemProps['colSpan']}>
+          <Grid.Item colSpan={String(i + 1) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
-          <Grid.Item colSpan={(11 - i) as GridItemProps['colSpan']}>
+          <Grid.Item colSpan={String(11 - i) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
         </Grid>
@@ -100,13 +99,12 @@ export const ColumnSizes: Story = {
 
 export const RowAndColumns: Story = {
   args: {
-    columns: 12,
-    gap: 'md',
+    columns: '12',
   },
   render: args => (
     <Stack gap="md">
-      <Grid {...args} columns={3}>
-        <Grid.Item colSpan={1} rowSpan={2}>
+      <Grid {...args} columns="3">
+        <Grid.Item colSpan="1" rowSpan="2">
           <Box
             style={{
               height: '100%',
@@ -118,10 +116,10 @@ export const RowAndColumns: Story = {
             }}
           />
         </Grid.Item>
-        <Grid.Item colSpan={2}>
+        <Grid.Item colSpan="2">
           <FakeBox />
         </Grid.Item>
-        <Grid.Item colSpan={2}>
+        <Grid.Item colSpan="2">
           <FakeBox />
         </Grid.Item>
       </Grid>
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index fc12695006..aedce886ed 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -15,40 +15,40 @@
  */
 
 import { createElement, forwardRef } from 'react';
-import { GridItemProps, GridProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
+import { gapPropDefs } from '../../props/gap-props';
+import { extractProps } from '../../utils/extractProps';
+import { gridItemPropDefs, gridPropDefs } from './Grid.props';
 import clsx from 'clsx';
+import type { GridItemProps, GridProps } from './types';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  const {
-    children,
-    gap = 'xs',
-    columns = 'auto',
-    className,
-    style,
-    ...restProps
-  } = props;
+  const propDefs = {
+    ...gapPropDefs,
+    ...gridPropDefs,
+  };
 
-  const utilityClassNames = getClassNames({ gap, columns, ...restProps });
+  const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-Grid', utilityClassNames, className),
+    className: clsx('canon-Grid', className),
     style,
-    children,
+    children: props.children,
   });
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { children, className, style, ...restProps } = props;
+  const propDefs = {
+    ...gridItemPropDefs,
+  };
 
-  const utilityClassNames = getClassNames(restProps);
+  const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-GridItem', utilityClassNames, className),
+    className: clsx('canon-GridItem', className),
     style,
-    children,
+    children: props.children,
   });
 });
 
diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts
index 4e154f03b7..8d658fff70 100644
--- a/packages/canon/src/components/Grid/types.ts
+++ b/packages/canon/src/components/Grid/types.ts
@@ -14,24 +14,26 @@
  * limitations under the License.
  */
 
-import type { UtilityProps, SpaceProps } from '../../types';
+import type { GapProps } from '../../props/gap-props';
+import type { SpaceProps } from '../../types';
+import type { GridItemOwnProps, GridOwnProps } from './Grid.props';
 
 /** @public */
 export interface GridProps extends SpaceProps {
   children?: React.ReactNode;
   className?: string;
-  columns?: UtilityProps['columns'];
-  gap?: UtilityProps['gap'];
+  columns?: GridOwnProps['columns'];
+  gap?: GapProps['gap'];
   style?: React.CSSProperties;
 }
 
 /** @public */
 export interface GridItemProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
-  colSpan?: UtilityProps['colSpan'];
-  colEnd?: UtilityProps['colEnd'];
-  colStart?: UtilityProps['colStart'];
-  rowSpan?: UtilityProps['rowSpan'];
+  colSpan?: GridItemOwnProps['colSpan'];
+  colEnd?: GridItemOwnProps['colEnd'];
+  colStart?: GridItemOwnProps['colStart'];
+  rowSpan?: GridItemOwnProps['rowSpan'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index 81e862d7e1..60f5d886d9 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -61,3 +61,9 @@
 
 /* Position */
 @import './utilities/position.css';
+
+/* Grid */
+@import './utilities/grid.css';
+
+/* Gap */
+@import './utilities/gap.css';
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 78bc0a6f8d..5c152fb86f 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-2xl-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-2xl-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-2xl-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-2xl-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-2xl-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-2xl-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-2xl-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-2xl-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-2xl-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-2xl-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-2xl-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-2xl-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-2xl-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-2xl-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-2xl-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-2xl-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-2xl-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-2xl-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-2xl-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-2xl-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-2xl-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-2xl-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-2xl-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-2xl-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-2xl-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-2xl-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-2xl-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-2xl-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-2xl-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-2xl-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-2xl-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-2xl-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-2xl-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-2xl-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-2xl-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-2xl-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-2xl-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-2xl-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-2xl-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-2xl-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-2xl-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-2xl-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-2xl-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-2xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-2xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-2xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-2xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-2xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-2xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-2xl-grid {
-      display: grid;
-    }
-
-    .cu-2xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-2xl-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-2xl-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-2xl-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-2xl-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-2xl-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-2xl-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-2xl-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-2xl-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-2xl-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-2xl-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-2xl-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-2xl-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-2xl-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-2xl-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/gap.css b/packages/canon/src/css/utilities/gap.css
new file mode 100644
index 0000000000..c86c91b958
--- /dev/null
+++ b/packages/canon/src/css/utilities/gap.css
@@ -0,0 +1,422 @@
+.cu-gap {
+  gap: var(--gap);
+}
+
+.cu-gap-0\.5 {
+  gap: var(--canon-space-0_5);
+}
+
+.cu-gap-1 {
+  gap: var(--canon-space-1);
+}
+
+.cu-gap-1\.5 {
+  gap: var(--canon-space-1_5);
+}
+
+.cu-gap-2 {
+  gap: var(--canon-space-2);
+}
+
+.cu-gap-3 {
+  gap: var(--canon-space-3);
+}
+
+.cu-gap-4 {
+  gap: var(--canon-space-4);
+}
+
+.cu-gap-5 {
+  gap: var(--canon-space-5);
+}
+
+.cu-gap-6 {
+  gap: var(--canon-space-6);
+}
+
+.cu-gap-7 {
+  gap: var(--canon-space-7);
+}
+
+.cu-gap-8 {
+  gap: var(--canon-space-8);
+}
+
+.cu-gap-9 {
+  gap: var(--canon-space-9);
+}
+
+.cu-gap-10 {
+  gap: var(--canon-space-10);
+}
+
+.cu-gap-11 {
+  gap: var(--canon-space-11);
+}
+
+.cu-gap-12 {
+  gap: var(--canon-space-12);
+}
+
+.cu-gap-13 {
+  gap: var(--canon-space-13);
+}
+
+.cu-gap-14 {
+  gap: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-gap {
+    gap: var(--gap-xs);
+  }
+
+  .xs\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .xs\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .xs\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .xs\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .xs\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .xs\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .xs\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .xs\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .xs\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .xs\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .xs\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .xs\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .xs\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .xs\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-gap {
+    gap: var(--gap-sm);
+  }
+
+  .sm\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .sm\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .sm\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .sm\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .sm\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .sm\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .sm\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .sm\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .sm\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .sm\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .sm\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .sm\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .sm\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .sm\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-gap {
+    gap: var(--gap-md);
+  }
+
+  .md\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .md\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .md\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .md\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .md\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .md\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .md\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .md\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .md\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .md\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .md\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .md\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .md\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .md\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .md\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .md\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-gap {
+    gap: var(--gap-lg);
+  }
+
+  .lg\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .lg\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .lg\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .lg\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .lg\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .lg\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .lg\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .lg\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .lg\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .lg\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .lg\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .lg\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .lg\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .lg\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-gap {
+    gap: var(--gap-xl);
+  }
+
+  .xl\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .xl\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .xl\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .xl\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .xl\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .xl\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .xl\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .xl\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .xl\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .xl\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .xl\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .xl\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .xl\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .xl\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/grid.css b/packages/canon/src/css/utilities/grid.css
new file mode 100644
index 0000000000..a0afe55533
--- /dev/null
+++ b/packages/canon/src/css/utilities/grid.css
@@ -0,0 +1,1292 @@
+.cu-columns-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cu-columns-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cu-columns-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cu-columns-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.cu-columns-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.cu-columns-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.cu-columns-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.cu-columns-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.cu-columns-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.cu-columns-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.cu-columns-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.cu-columns-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.cu-columns-auto {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+
+.cu-col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.cu-col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.cu-col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.cu-col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
+.cu-col-span-5 {
+  grid-column: span 5 / span 5;
+}
+
+.cu-col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
+.cu-col-span-7 {
+  grid-column: span 7 / span 7;
+}
+
+.cu-col-span-8 {
+  grid-column: span 8 / span 8;
+}
+
+.cu-col-span-9 {
+  grid-column: span 9 / span 9;
+}
+
+.cu-col-span-10 {
+  grid-column: span 10 / span 10;
+}
+
+.cu-col-span-11 {
+  grid-column: span 11 / span 11;
+}
+
+.cu-col-span-12 {
+  grid-column: span 12 / span 12;
+}
+
+.cu-col-span-auto {
+  grid-column: span auto / span auto;
+}
+
+.cu-col-start-1 {
+  grid-column-start: 1;
+}
+
+.cu-col-start-2 {
+  grid-column-start: 2;
+}
+
+.cu-col-start-3 {
+  grid-column-start: 3;
+}
+
+.cu-col-start-4 {
+  grid-column-start: 4;
+}
+
+.cu-col-start-5 {
+  grid-column-start: 5;
+}
+
+.cu-col-start-6 {
+  grid-column-start: 6;
+}
+
+.cu-col-start-7 {
+  grid-column-start: 7;
+}
+
+.cu-col-start-8 {
+  grid-column-start: 8;
+}
+
+.cu-col-start-9 {
+  grid-column-start: 9;
+}
+
+.cu-col-start-10 {
+  grid-column-start: 10;
+}
+
+.cu-col-start-11 {
+  grid-column-start: 11;
+}
+
+.cu-col-start-12 {
+  grid-column-start: 12;
+}
+
+.cu-col-start-13 {
+  grid-column-start: 13;
+}
+
+.cu-col-start-auto {
+  grid-column-start: auto;
+}
+
+.cu-col-end-1 {
+  grid-column-end: 1;
+}
+
+.cu-col-end-2 {
+  grid-column-end: 2;
+}
+
+.cu-col-end-3 {
+  grid-column-end: 3;
+}
+
+.cu-col-end-4 {
+  grid-column-end: 4;
+}
+
+.cu-col-end-5 {
+  grid-column-end: 5;
+}
+
+.cu-col-end-6 {
+  grid-column-end: 6;
+}
+
+.cu-col-end-7 {
+  grid-column-end: 7;
+}
+
+.cu-col-end-8 {
+  grid-column-end: 8;
+}
+
+.cu-col-end-9 {
+  grid-column-end: 9;
+}
+
+.cu-col-end-10 {
+  grid-column-end: 10;
+}
+
+.cu-col-end-11 {
+  grid-column-end: 11;
+}
+
+.cu-col-end-12 {
+  grid-column-end: 12;
+}
+
+.cu-col-end-13 {
+  grid-column-end: 13;
+}
+
+.cu-col-end-auto {
+  grid-column-end: auto;
+}
+
+.cu-row-span-1 {
+  grid-row: span 1 / span 1;
+}
+
+.cu-row-span-2 {
+  grid-row: span 2 / span 2;
+}
+
+.cu-row-span-3 {
+  grid-row: span 3 / span 3;
+}
+
+.cu-row-span-4 {
+  grid-row: span 4 / span 4;
+}
+
+.cu-row-span-5 {
+  grid-row: span 5 / span 5;
+}
+
+.cu-row-span-6 {
+  grid-row: span 6 / span 6;
+}
+
+.cu-row-span-7 {
+  grid-row: span 7 / span 7;
+}
+
+.cu-row-span-8 {
+  grid-row: span 8 / span 8;
+}
+
+.cu-row-span-9 {
+  grid-row: span 9 / span 9;
+}
+
+.cu-row-span-10 {
+  grid-row: span 10 / span 10;
+}
+
+.cu-row-span-11 {
+  grid-row: span 11 / span 11;
+}
+
+.cu-row-span-12 {
+  grid-row: span 12 / span 12;
+}
+
+.cu-row-span-auto {
+  grid-row: span auto / span auto;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .xs\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .xs\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .xs\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .xs\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .xs\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .xs\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .xs\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .xs\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .xs\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .xs\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .xs\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .xs\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .xs\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .xs\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .xs\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .xs\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .xs\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .xs\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .xs\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .xs\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .xs\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .xs\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .xs\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .xs\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .xs\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .xs\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .xs\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .xs\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .xs\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .xs\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .xs\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .xs\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .xs\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .xs\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .xs\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .xs\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .xs\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .xs\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .xs\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .xs\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .xs\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .xs\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .xs\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .xs\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .xs\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .xs\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .xs\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .xs\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .xs\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .xs\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .xs\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .xs\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .xs\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .xs\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .sm\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .sm\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .sm\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .sm\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .sm\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .sm\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .sm\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .sm\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .sm\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .sm\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .sm\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .sm\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .sm\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .sm\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .sm\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .sm\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .sm\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .sm\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .sm\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .sm\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .sm\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .sm\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .sm\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .sm\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .sm\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .sm\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .sm\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .sm\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .sm\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .sm\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .sm\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .sm\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .sm\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .sm\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .sm\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .sm\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .sm\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .sm\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .sm\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .sm\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .sm\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .sm\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .sm\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .sm\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .sm\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .sm\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .sm\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .sm\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .sm\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .sm\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .sm\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .sm\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .sm\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .sm\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .md\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .md\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .md\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .md\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .md\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .md\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .md\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .md\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .md\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .md\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .md\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .md\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .md\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .md\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .md\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .md\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .md\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .md\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .md\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .md\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .md\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .md\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .md\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .md\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .md\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .md\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .md\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .md\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .md\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .md\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .md\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .md\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .md\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .md\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .md\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .md\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .md\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .md\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .md\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .md\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .md\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .md\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .md\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .md\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .md\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .md\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .md\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .md\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .md\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .md\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .md\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .md\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .md\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .md\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .md\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .md\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .md\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .md\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .md\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .md\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .md\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .md\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .md\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .md\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .md\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .md\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .lg\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .lg\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .lg\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .lg\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .lg\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .lg\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .lg\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .lg\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .lg\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .lg\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .lg\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .lg\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .lg\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .lg\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .lg\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .lg\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .lg\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .lg\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .lg\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .lg\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .lg\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .lg\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .lg\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .lg\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .lg\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .lg\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .lg\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .lg\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .lg\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .lg\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .lg\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .lg\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .lg\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .lg\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .lg\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .lg\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .lg\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .lg\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .lg\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .lg\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .lg\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .lg\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .lg\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .lg\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .lg\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .lg\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .lg\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .lg\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .lg\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .lg\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .lg\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .lg\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .lg\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .lg\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .xl\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .xl\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .xl\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .xl\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .xl\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .xl\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .xl\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .xl\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .xl\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .xl\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .xl\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .xl\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .xl\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .xl\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .xl\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .xl\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .xl\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .xl\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .xl\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .xl\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .xl\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .xl\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .xl\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .xl\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .xl\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .xl\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .xl\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .xl\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .xl\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .xl\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .xl\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .xl\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .xl\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .xl\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .xl\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .xl\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .xl\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .xl\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .xl\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .xl\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .xl\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .xl\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .xl\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .xl\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .xl\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .xl\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .xl\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .xl\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .xl\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .xl\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .xl\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .xl\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .xl\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .xl\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index 297aff1d98..179b4a83b2 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-lg-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-lg-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-lg-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-lg-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-lg-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-lg-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-lg-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-lg-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-lg-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-lg-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-lg-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-lg-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-lg-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-lg-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-lg-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-lg-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-lg-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-lg-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-lg-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-lg-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-lg-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-lg-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-lg-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-lg-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-lg-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-lg-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-lg-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-lg-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-lg-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-lg-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-lg-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-lg-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-lg-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-lg-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-lg-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-lg-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-lg-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-lg-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-lg-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-lg-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-lg-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-lg-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-lg-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-lg-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-lg-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-lg-gap-none {
-      gap: 0;
-    }
-
-    .cu-lg-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-lg-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-lg-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-lg-grid {
-      display: grid;
-    }
-
-    .cu-lg-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-lg-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-lg-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-lg-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-lg-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-lg-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-lg-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-lg-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-lg-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-lg-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-lg-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-lg-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-lg-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-lg-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-lg-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
index 981530f0e3..2cf50dc137 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-md-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-md-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-md-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-md-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-md-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-md-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-md-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-md-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-md-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-md-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-md-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-md-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-md-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-md-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-md-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-md-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-md-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-md-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-md-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-md-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-md-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-md-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-md-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-md-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-md-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-md-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-md-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-md-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-md-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-md-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-md-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-md-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-md-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-md-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-md-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-md-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-md-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-md-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-md-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-md-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-md-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-md-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-md-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-md-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-md-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-md-gap-none {
-      gap: 0;
-    }
-
-    .cu-md-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-md-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-md-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-md-grid {
-      display: grid;
-    }
-
-    .cu-md-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-md-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-md-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-md-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-md-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-md-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-md-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-md-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-md-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-md-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-md-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-md-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-md-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-md-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-md-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
index 856cc59440..2a216a950e 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-sm-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-sm-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-sm-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-sm-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-sm-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-sm-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-sm-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-sm-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-sm-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-sm-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-sm-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-sm-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-sm-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-sm-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-sm-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-sm-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-sm-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-sm-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-sm-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-sm-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-sm-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-sm-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-sm-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-sm-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-sm-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-sm-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-sm-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-sm-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-sm-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-sm-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-sm-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-sm-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-sm-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-sm-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-sm-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-sm-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-sm-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-sm-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-sm-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-sm-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-sm-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-sm-flex {
       display: flex;
     }
@@ -265,62 +101,6 @@
       gap: var(--canon-space-3);
     }
 
-    .cu-sm-grid {
-      display: grid;
-    }
-
-    .cu-sm-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-sm-hidden {
       display: none;
     }
@@ -405,58 +185,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-sm-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-sm-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-sm-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-sm-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-sm-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-sm-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-sm-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-sm-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-sm-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-sm-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-sm-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-sm-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-sm-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 10b6e44380..0efa83e034 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-xl-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-xl-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-xl-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-xl-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-xl-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-xl-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-xl-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-xl-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-xl-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-xl-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-xl-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-xl-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-xl-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-xl-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-xl-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-xl-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-xl-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-xl-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-xl-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-xl-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-xl-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-xl-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-xl-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-xl-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-xl-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-xl-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-xl-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-xl-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-xl-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-xl-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-xl-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-xl-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-xl-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-xl-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-xl-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-xl-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-xl-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-xl-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-xl-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-xl-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-xl-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-xl-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-xl-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-xl-grid {
-      display: grid;
-    }
-
-    .cu-xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-xl-hidden {
       display: none;
     }
@@ -405,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-xl-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-xl-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-xl-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-xl-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-xl-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-xl-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-xl-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-xl-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-xl-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-xl-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-xl-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-xl-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-xl-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index e85832fe44..1d8dae99cd 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -48,170 +48,6 @@
     border-style: solid;
   }
 
-  .cu-col-end-1 {
-    grid-column-end: 1;
-  }
-
-  .cu-col-end-10 {
-    grid-column-end: 10;
-  }
-
-  .cu-col-end-11 {
-    grid-column-end: 11;
-  }
-
-  .cu-col-end-12 {
-    grid-column-end: 12;
-  }
-
-  .cu-col-end-13 {
-    grid-column-end: 13;
-  }
-
-  .cu-col-end-2 {
-    grid-column-end: 2;
-  }
-
-  .cu-col-end-3 {
-    grid-column-end: 3;
-  }
-
-  .cu-col-end-4 {
-    grid-column-end: 4;
-  }
-
-  .cu-col-end-5 {
-    grid-column-end: 5;
-  }
-
-  .cu-col-end-6 {
-    grid-column-end: 6;
-  }
-
-  .cu-col-end-7 {
-    grid-column-end: 7;
-  }
-
-  .cu-col-end-8 {
-    grid-column-end: 8;
-  }
-
-  .cu-col-end-9 {
-    grid-column-end: 9;
-  }
-
-  .cu-col-end-auto {
-    grid-column-end: auto;
-  }
-
-  .cu-col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
-  .cu-col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-
-  .cu-col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-
-  .cu-col-span-12 {
-    grid-column: span 12 / span 12;
-  }
-
-  .cu-col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .cu-col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-
-  .cu-col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-
-  .cu-col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-
-  .cu-col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-
-  .cu-col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-
-  .cu-col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
-  .cu-col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-
-  .cu-col-span-auto {
-    grid-column: span auto / span auto;
-  }
-
-  .cu-col-start-1 {
-    grid-column-start: 1;
-  }
-
-  .cu-col-start-10 {
-    grid-column-start: 10;
-  }
-
-  .cu-col-start-11 {
-    grid-column-start: 11;
-  }
-
-  .cu-col-start-12 {
-    grid-column-start: 12;
-  }
-
-  .cu-col-start-13 {
-    grid-column-start: 13;
-  }
-
-  .cu-col-start-2 {
-    grid-column-start: 2;
-  }
-
-  .cu-col-start-3 {
-    grid-column-start: 3;
-  }
-
-  .cu-col-start-4 {
-    grid-column-start: 4;
-  }
-
-  .cu-col-start-5 {
-    grid-column-start: 5;
-  }
-
-  .cu-col-start-6 {
-    grid-column-start: 6;
-  }
-
-  .cu-col-start-7 {
-    grid-column-start: 7;
-  }
-
-  .cu-col-start-8 {
-    grid-column-start: 8;
-  }
-
-  .cu-col-start-9 {
-    grid-column-start: 9;
-  }
-
-  .cu-col-start-auto {
-    grid-column-start: auto;
-  }
-
   .cu-flex {
     display: flex;
   }
@@ -236,90 +72,6 @@
     flex-wrap: wrap-reverse;
   }
 
-  .cu-gap-2xl {
-    gap: var(--canon-space-12);
-  }
-
-  .cu-gap-lg {
-    gap: var(--canon-space-8);
-  }
-
-  .cu-gap-md {
-    gap: var(--canon-space-6);
-  }
-
-  .cu-gap-none {
-    gap: 0;
-  }
-
-  .cu-gap-sm {
-    gap: var(--canon-space-4);
-  }
-
-  .cu-gap-xl {
-    gap: var(--canon-space-10);
-  }
-
-  .cu-gap-xs {
-    gap: var(--canon-space-3);
-  }
-
-  .cu-grid {
-    display: grid;
-  }
-
-  .cu-grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-auto {
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-  }
-
   .cu-hidden {
     display: none;
   }
@@ -404,58 +156,6 @@
     border-radius: var(--canon-radius-2);
   }
 
-  .cu-row-span-1 {
-    grid-row: span 1 / span 1;
-  }
-
-  .cu-row-span-10 {
-    grid-row: span 10 / span 10;
-  }
-
-  .cu-row-span-11 {
-    grid-row: span 11 / span 11;
-  }
-
-  .cu-row-span-12 {
-    grid-row: span 12 / span 12;
-  }
-
-  .cu-row-span-2 {
-    grid-row: span 2 / span 2;
-  }
-
-  .cu-row-span-3 {
-    grid-row: span 3 / span 3;
-  }
-
-  .cu-row-span-4 {
-    grid-row: span 4 / span 4;
-  }
-
-  .cu-row-span-5 {
-    grid-row: span 5 / span 5;
-  }
-
-  .cu-row-span-6 {
-    grid-row: span 6 / span 6;
-  }
-
-  .cu-row-span-7 {
-    grid-row: span 7 / span 7;
-  }
-
-  .cu-row-span-8 {
-    grid-row: span 8 / span 8;
-  }
-
-  .cu-row-span-9 {
-    grid-row: span 9 / span 9;
-  }
-
-  .cu-row-span-auto {
-    grid-row: span auto / span auto;
-  }
-
   .cu-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
diff --git a/packages/canon/src/props/gap-props.ts b/packages/canon/src/props/gap-props.ts
new file mode 100644
index 0000000000..68a03a9f51
--- /dev/null
+++ b/packages/canon/src/props/gap-props.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PropDef } from './prop-def';
+import { GetPropDefTypes } from './prop-def';
+import { spacingValues } from './spacing.props';
+
+/** @public */
+const gapPropDefs = {
+  gap: {
+    type: 'enum | string',
+    className: 'cu-gap',
+    customProperties: ['--gap'],
+    values: spacingValues,
+    responsive: true,
+    default: '4',
+  },
+} satisfies {
+  gap: PropDef<(typeof spacingValues)[number]>;
+};
+
+/** @public */
+type GapProps = GetPropDefTypes<typeof gapPropDefs>;
+
+export { gapPropDefs };
+export type { GapProps };
diff --git a/packages/canon/src/props/index.ts b/packages/canon/src/props/index.ts
index 79093974b3..fc92cea12d 100644
--- a/packages/canon/src/props/index.ts
+++ b/packages/canon/src/props/index.ts
@@ -19,4 +19,5 @@ export type { MarginProps, marginPropDefs } from './margin.props';
 export type { PaddingProps, paddingPropDefs } from './padding.props';
 export type { PositionProps, positionPropDefs } from './position.props';
 export type { WidthProps, widthPropDefs } from './width.props';
+export type { GapProps, gapPropDefs } from './gap-props';
 export * from './prop-def';
diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
index 70e4249eed..715bf5d36f 100644
--- a/packages/canon/src/utils/extractProps.ts
+++ b/packages/canon/src/utils/extractProps.ts
@@ -27,35 +27,50 @@ export function extractProps(
   let style: React.CSSProperties = props.style || {};
 
   for (const key in propDefs) {
-    if (props.hasOwnProperty(key)) {
-      const value = props[key];
-      const propDefsValues = propDefs[key].values;
-      const propDefsCustomProperties = propDefs[key].customProperties;
-      const propDefsClassName = propDefs[key].className;
-      const isResponsive = propDefs[key].responsive;
+    if (key === 'gap') {
+      console.log(key, propDefs[key]);
+    }
+    // Check if the prop is present or has a default value
+    if (
+      !props.hasOwnProperty(key) &&
+      !propDefs[key].hasOwnProperty('default')
+    ) {
+      continue; // Skip processing if neither is present
+    }
 
-      const handleValue = (val: any, prefix: string = '') => {
-        if (propDefsValues.includes(val)) {
-          className += ` ${prefix}${propDefsClassName}-${val}`;
-        } else {
-          const customPropertyKey =
-            isResponsive && prefix
-              ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
-              : propDefsCustomProperties;
-          (style as any)[customPropertyKey] = val;
-          className += ` ${prefix}${propDefsClassName}`;
-        }
-      };
+    const value = props.hasOwnProperty(key)
+      ? props[key]
+      : propDefs[key].default;
+    const propDefsValues = propDefs[key].values;
+    const propDefsCustomProperties = propDefs[key].customProperties;
+    const propDefsClassName = propDefs[key].className;
+    const isResponsive = propDefs[key].responsive;
 
-      if (isResponsive && typeof value === 'object') {
-        // Handle responsive object values
-        for (const breakpoint in value) {
-          const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
-          handleValue(value[breakpoint], prefix);
-        }
+    if (key === 'gap') {
+      console.log('coco', key, propDefs[key], value);
+    }
+
+    const handleValue = (val: any, prefix: string = '') => {
+      if (propDefsValues.includes(val)) {
+        className += ` ${prefix}${propDefsClassName}-${val}`;
       } else {
-        handleValue(value);
+        const customPropertyKey =
+          isResponsive && prefix
+            ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
+            : propDefsCustomProperties;
+        (style as any)[customPropertyKey] = val;
+        className += ` ${prefix}${propDefsClassName}`;
       }
+    };
+
+    if (isResponsive && typeof value === 'object') {
+      // Handle responsive object values
+      for (const breakpoint in value) {
+        const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
+        handleValue(value[breakpoint], prefix);
+      }
+    } else {
+      handleValue(value);
     }
   }
 

From fca276ff68a4b225504bee0bfa2aa29d73aa3d54 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 21:02:17 +0000
Subject: [PATCH 07/10] Improve Stack

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/src/components/Box/Box.tsx     |  1 -
 .../src/components/Container/Container.tsx    |  1 -
 .../canon/src/components/Stack/Stack.props.ts | 38 ++++++++
 .../src/components/Stack/Stack.stories.tsx    | 29 +++----
 packages/canon/src/components/Stack/Stack.tsx | 49 +++--------
 packages/canon/src/components/Stack/types.ts  | 18 ++--
 packages/canon/src/css/utilities.css          |  3 +
 packages/canon/src/css/utilities/flex.css     | 86 +++++++++++++++++++
 8 files changed, 153 insertions(+), 72 deletions(-)
 create mode 100644 packages/canon/src/components/Stack/Stack.props.ts
 create mode 100644 packages/canon/src/css/utilities/flex.css

diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 27f8a3046f..00e15a2b72 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -29,7 +29,6 @@ import { displayPropDefs } from '../../props/display.props';
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const { as = 'div', children } = props;
 
-  // Extract utility class names and styles
   const propDefs = {
     ...spacingPropDefs,
     ...widthPropDefs,
diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx
index a925a5c38e..46a5356d56 100644
--- a/packages/canon/src/components/Container/Container.tsx
+++ b/packages/canon/src/components/Container/Container.tsx
@@ -25,7 +25,6 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
     const { children } = props;
 
-    // Extract utility class names and styles
     const propDefs = {
       ...displayPropDefs,
     };
diff --git a/packages/canon/src/components/Stack/Stack.props.ts b/packages/canon/src/components/Stack/Stack.props.ts
new file mode 100644
index 0000000000..5cc7300c5d
--- /dev/null
+++ b/packages/canon/src/components/Stack/Stack.props.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
+
+const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
+
+/** @public */
+const stackPropDefs = {
+  align: {
+    type: 'enum',
+    className: 'cu-align',
+    values: alignValues,
+    responsive: true,
+    default: 'stretch',
+  },
+} satisfies {
+  align: PropDef<(typeof alignValues)[number]>;
+};
+
+/** @public */
+type StackOwnProps = GetPropDefTypes<typeof stackPropDefs>;
+
+export { stackPropDefs };
+export type { StackOwnProps };
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index 4c48cf80cc..0b02849a91 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -29,16 +29,13 @@ const meta = {
     children: {
       control: false,
     },
-    as: {
-      control: false,
-    },
     className: {
       control: 'text',
     },
   },
   args: {
-    align: 'left',
-    gap: 'xs',
+    align: 'stretch',
+    gap: '4',
     children: 'hello world',
   },
 } satisfies Meta<typeof Stack>;
@@ -63,20 +60,14 @@ const DecorativeBox = () => {
 };
 
 export const Default: Story = {
-  render: () => (
-    <div style={{ width: '320px' }}>
-      <Stack>
-        <DecorativeBox />
-        <DecorativeBox />
-        <DecorativeBox />
-      </Stack>
-    </div>
-  ),
+  args: {
+    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+  },
 };
 
 export const AlignLeft: Story = {
   render: () => (
-    <Stack align="left">
+    <Stack align="start">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -96,7 +87,7 @@ export const AlignCenter: Story = {
 
 export const AlignRight: Story = {
   render: () => (
-    <Stack align="right">
+    <Stack align="end">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -106,7 +97,7 @@ export const AlignRight: Story = {
 
 export const ResponsiveAlign: Story = {
   render: () => (
-    <Stack align={{ xs: 'left', md: 'center', lg: 'right' }}>
+    <Stack align={{ xs: 'start', md: 'center', lg: 'end' }}>
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -116,7 +107,7 @@ export const ResponsiveAlign: Story = {
 
 export const ResponsiveGap: Story = {
   render: () => (
-    <Stack gap={{ xs: 'xs', md: 'md', lg: '2xl' }}>
+    <Stack gap={{ xs: '4', md: '8', lg: '12' }}>
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -126,7 +117,7 @@ export const ResponsiveGap: Story = {
 
 export const LargeGap: Story = {
   render: () => (
-    <Stack gap="xl">
+    <Stack gap="8">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx
index 4b6a4596bb..9080a28e11 100644
--- a/packages/canon/src/components/Stack/Stack.tsx
+++ b/packages/canon/src/components/Stack/Stack.tsx
@@ -16,51 +16,24 @@
 
 import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
-import type { AlignItems, Breakpoint } from '../../types';
 import clsx from 'clsx';
-
-// Function to map align values
-const mapAlignValue = (value?: StackProps['align']) => {
-  if (typeof value === 'string') {
-    let returnedValue: AlignItems = 'stretch';
-    if (value === 'left') returnedValue = 'stretch';
-    if (value === 'center') returnedValue = 'center';
-    if (value === 'right') returnedValue = 'end';
-    return returnedValue;
-  } else if (typeof value === 'object') {
-    const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
-    for (const [key, val] of Object.entries(value)) {
-      returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems;
-    }
-    return returnedValue;
-  }
-  return 'stretch';
-};
+import { stackPropDefs } from './Stack.props';
+import { extractProps } from '../../utils/extractProps';
+import { gapPropDefs } from '../../props/gap-props';
 
 /** @public */
 export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
-  const {
-    as = 'div',
-    children,
-    align = 'left',
-    gap = 'xs',
-    className,
-    style,
-    ...restProps
-  } = props;
+  const propDefs = {
+    ...gapPropDefs,
+    ...stackPropDefs,
+  };
 
-  // Generate utility class names
-  const utilityClassNames = getClassNames({
-    gap,
-    alignItems: mapAlignValue(align),
-    ...restProps,
-  });
+  const { className, style } = extractProps(props, propDefs);
 
-  return createElement(as, {
+  return createElement('div', {
     ref,
-    className: clsx('canon-Stack', utilityClassNames, className),
+    className: clsx('canon-Stack', className),
     style,
-    children,
+    children: props.children,
   });
 });
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
index bccdc59a57..267845c48a 100644
--- a/packages/canon/src/components/Stack/types.ts
+++ b/packages/canon/src/components/Stack/types.ts
@@ -14,23 +14,15 @@
  * limitations under the License.
  */
 
-import type {
-  SpaceProps,
-  UtilityProps,
-  AsProps,
-  Breakpoint,
-} from '../../types';
+import type { SpaceProps } from '../../types';
+import { StackOwnProps } from './Stack.props';
+import type { GapProps } from '../../props/gap-props';
 
 /** @public */
 export interface StackProps extends SpaceProps {
   children: React.ReactNode;
-  as?: AsProps;
-  gap?: UtilityProps['gap'];
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  gap?: GapProps['gap'];
+  align?: StackOwnProps['align'];
   className?: string;
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index 60f5d886d9..aa7136fb94 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -67,3 +67,6 @@
 
 /* Gap */
 @import './utilities/gap.css';
+
+/* Flex */
+@import './utilities/flex.css';
diff --git a/packages/canon/src/css/utilities/flex.css b/packages/canon/src/css/utilities/flex.css
new file mode 100644
index 0000000000..209334c23d
--- /dev/null
+++ b/packages/canon/src/css/utilities/flex.css
@@ -0,0 +1,86 @@
+.cu-align-start {
+  align-items: start;
+}
+
+.cu-align-center {
+  align-items: center;
+}
+
+.cu-align-end {
+  align-items: end;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-align-start {
+    align-items: start;
+  }
+
+  .xs\:cu-align-center {
+    align-items: center;
+  }
+
+  .xs\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-align-start {
+    align-items: start;
+  }
+
+  .sm\:cu-align-center {
+    align-items: center;
+  }
+
+  .sm\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-align-start {
+    align-items: start;
+  }
+
+  .md\:cu-align-center {
+    align-items: center;
+  }
+
+  .md\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-align-start {
+    align-items: start;
+  }
+
+  .lg\:cu-align-center {
+    align-items: center;
+  }
+
+  .lg\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-align-start {
+    align-items: start;
+  }
+
+  .xl\:cu-align-center {
+    align-items: center;
+  }
+
+  .xl\:cu-align-end {
+    align-items: end;
+  }
+}

From 8c137662a26e80426923a83f27a4a4aeb899bf9d Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 22:02:35 +0000
Subject: [PATCH 08/10] Update report

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md                 | 173 +++++++++++++++++--
 packages/canon/src/components/Grid/index.ts  |   2 +
 packages/canon/src/components/Stack/index.ts |   2 +
 3 files changed, 162 insertions(+), 15 deletions(-)

diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 64a1482867..33efa37c7d 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -289,6 +289,21 @@ export type FlexDirection = 'row' | 'column';
 // @public (undocumented)
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
+// @public (undocumented)
+export const gapPropDefs: {
+  gap: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--gap'[];
+    values: string[];
+    responsive: true;
+    default: string;
+  };
+};
+
+// @public (undocumented)
+export type GapProps = GetPropDefTypes<typeof gapPropDefs>;
+
 // @public (undocumented)
 export type GetPropDefType<Def> = Def extends BooleanPropDef
   ? Def extends ResponsivePropDef
@@ -326,24 +341,144 @@ export const Grid: ForwardRefExoticComponent<
   >;
 };
 
+// @public (undocumented)
+export type GridItemOwnProps = GetPropDefTypes<typeof gridItemPropDefs>;
+
+// @public (undocumented)
+export const gridItemPropDefs: {
+  colSpan: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--col-span'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+  colEnd: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--col-end'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+  colStart: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--col-start'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+  rowSpan: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--row-span'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+};
+
 // @public (undocumented)
 export interface GridItemProps {
   // (undocumented)
-  children: React.ReactNode;
+  children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  colEnd?: UtilityProps['colEnd'];
+  colEnd?: GridItemOwnProps['colEnd'];
   // (undocumented)
-  colSpan?: UtilityProps['colSpan'];
+  colSpan?: GridItemOwnProps['colSpan'];
   // (undocumented)
-  colStart?: UtilityProps['colStart'];
+  colStart?: GridItemOwnProps['colStart'];
   // (undocumented)
-  rowSpan?: UtilityProps['rowSpan'];
+  rowSpan?: GridItemOwnProps['rowSpan'];
   // (undocumented)
   style?: React.CSSProperties;
 }
 
+// @public (undocumented)
+export type GridOwnProps = GetPropDefTypes<typeof gridPropDefs>;
+
+// @public (undocumented)
+export const gridPropDefs: {
+  columns: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--columns'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+    default: string;
+  };
+};
+
 // @public (undocumented)
 export interface GridProps extends SpaceProps {
   // (undocumented)
@@ -351,9 +486,9 @@ export interface GridProps extends SpaceProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  columns?: UtilityProps['columns'];
+  columns?: GridOwnProps['columns'];
   // (undocumented)
-  gap?: UtilityProps['gap'];
+  gap?: GapProps['gap'];
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -723,22 +858,30 @@ export const Stack: ForwardRefExoticComponent<
   StackProps & RefAttributes<HTMLDivElement>
 >;
 
+// @public (undocumented)
+export type StackOwnProps = GetPropDefTypes<typeof stackPropDefs>;
+
+// @public (undocumented)
+export const stackPropDefs: {
+  align: {
+    type: 'enum';
+    className: string;
+    values: readonly ['start', 'center', 'end', 'baseline', 'stretch'];
+    responsive: true;
+    default: 'stretch';
+  };
+};
+
 // @public (undocumented)
 export interface StackProps extends SpaceProps {
   // (undocumented)
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
-  // (undocumented)
-  as?: AsProps;
+  align?: StackOwnProps['align'];
   // (undocumented)
   children: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  gap?: UtilityProps['gap'];
+  gap?: GapProps['gap'];
   // (undocumented)
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/components/Grid/index.ts b/packages/canon/src/components/Grid/index.ts
index b2534c6b77..fd10e7fe68 100644
--- a/packages/canon/src/components/Grid/index.ts
+++ b/packages/canon/src/components/Grid/index.ts
@@ -14,4 +14,6 @@
  * limitations under the License.
  */
 export { Grid } from './Grid';
+export { gridPropDefs, gridItemPropDefs } from './Grid.props';
 export type { GridProps, GridItemProps } from './types';
+export type { GridOwnProps, GridItemOwnProps } from './Grid.props';
diff --git a/packages/canon/src/components/Stack/index.ts b/packages/canon/src/components/Stack/index.ts
index 7abbc3f439..122d0ee57c 100644
--- a/packages/canon/src/components/Stack/index.ts
+++ b/packages/canon/src/components/Stack/index.ts
@@ -14,4 +14,6 @@
  * limitations under the License.
  */
 export { Stack } from './Stack';
+export { stackPropDefs } from './Stack.props';
 export type { StackProps } from './types';
+export type { StackOwnProps } from './Stack.props';

From 0636e0ab625b0208200a2fda69c69d6b723733d8 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 22:34:10 +0000
Subject: [PATCH 09/10] Update extractProps.ts

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/src/utils/extractProps.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
index 715bf5d36f..fdd98048cf 100644
--- a/packages/canon/src/utils/extractProps.ts
+++ b/packages/canon/src/utils/extractProps.ts
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export function extractProps(
   props: {
     className?: string;
@@ -27,9 +28,6 @@ export function extractProps(
   let style: React.CSSProperties = props.style || {};
 
   for (const key in propDefs) {
-    if (key === 'gap') {
-      console.log(key, propDefs[key]);
-    }
     // Check if the prop is present or has a default value
     if (
       !props.hasOwnProperty(key) &&
@@ -46,10 +44,6 @@ export function extractProps(
     const propDefsClassName = propDefs[key].className;
     const isResponsive = propDefs[key].responsive;
 
-    if (key === 'gap') {
-      console.log('coco', key, propDefs[key], value);
-    }
-
     const handleValue = (val: any, prefix: string = '') => {
       if (propDefsValues.includes(val)) {
         className += ` ${prefix}${propDefsClassName}-${val}`;

From 1e4ccced425774ac499281068220aae913351dfc Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Tue, 28 Jan 2025 10:12:39 +0000
Subject: [PATCH 10/10] Change to minor

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/selfish-dodos-hear.md    | 5 +++++
 .changeset/serious-gifts-pretend.md | 5 -----
 2 files changed, 5 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/selfish-dodos-hear.md
 delete mode 100644 .changeset/serious-gifts-pretend.md

diff --git a/.changeset/selfish-dodos-hear.md b/.changeset/selfish-dodos-hear.md
new file mode 100644
index 0000000000..8754f6859d
--- /dev/null
+++ b/.changeset/selfish-dodos-hear.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+**BREAKING**: Fixing css structure and making sure that props are applying the correct styles for all responsive values.
diff --git a/.changeset/serious-gifts-pretend.md b/.changeset/serious-gifts-pretend.md
deleted file mode 100644
index 3b7bbb84f0..0000000000
--- a/.changeset/serious-gifts-pretend.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@backstage/canon': patch
----
-
-Fixing css structure and making sure that props are applying the correct styles for all responsive values.