From 9a87340e98445a4ada3847fb116a1a7c3939bee7 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 15:45:04 +0000
Subject: [PATCH] Fix spacing props

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md                  |  88 +--
 .../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/types.ts                   |  76 ++-
 packages/canon/src/utils/extractProps.ts      |  71 +++
 31 files changed, 7021 insertions(+), 2973 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/report.api.md b/packages/canon/report.api.md
index 8899f6ad45..8d38f76485 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -160,17 +160,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;
 }
@@ -378,38 +378,58 @@ export type JustifyContent =
   | 'between';
 
 // @public (undocumented)
-export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+// @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)
@@ -510,30 +530,30 @@ 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'>;
 }
 ```
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/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'>;
 }
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 };
+}