From b9d2914d5ee43d3c46c0561210f02e47c5dcfd2c Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 09:21:55 +0000
Subject: [PATCH 1/8] Remove client directive

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/components/CodeBlock/client.tsx       | 24 +++++++++++++++++++
 canon-docs/src/components/CodeBlock/index.tsx | 17 +++----------
 canon-docs/src/mdx-components.tsx             |  1 -
 .../canon/src/components/Button/Button.tsx    |  2 --
 .../canon/src/components/Heading/Heading.tsx  |  2 --
 packages/canon/src/components/Icon/Icon.tsx   |  2 --
 packages/canon/src/components/Input/Input.tsx |  2 --
 packages/canon/src/components/Text/Text.tsx   |  2 --
 packages/canon/src/contexts/canon.tsx         |  2 --
 9 files changed, 27 insertions(+), 27 deletions(-)
 create mode 100644 canon-docs/src/components/CodeBlock/client.tsx

diff --git a/canon-docs/src/components/CodeBlock/client.tsx b/canon-docs/src/components/CodeBlock/client.tsx
new file mode 100644
index 0000000000..27f5bc1a02
--- /dev/null
+++ b/canon-docs/src/components/CodeBlock/client.tsx
@@ -0,0 +1,24 @@
+'use client';
+
+import { CodeBlockProps } from '.';
+import { Text } from '../../../../packages/canon';
+import styles from './styles.module.css';
+
+export const CodeBlockClient = ({
+  out,
+  title,
+}: {
+  out: string;
+  title?: CodeBlockProps['title'];
+}) => {
+  return (
+    <div className={styles.codeBlock}>
+      {title && (
+        <div className={styles.title}>
+          <Text variant="body">{title}</Text>
+        </div>
+      )}
+      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
+    </div>
+  );
+};
diff --git a/canon-docs/src/components/CodeBlock/index.tsx b/canon-docs/src/components/CodeBlock/index.tsx
index bbcf4d63da..4c0fe72960 100644
--- a/canon-docs/src/components/CodeBlock/index.tsx
+++ b/canon-docs/src/components/CodeBlock/index.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
 import type { BundledLanguage } from 'shiki';
 import { codeToHtml } from 'shiki';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import styles from './styles.module.css';
+import { CodeBlockClient } from './client';
 
-interface CodeBlockProps {
+export interface CodeBlockProps {
   lang?: BundledLanguage;
   title?: string;
   code?: string;
@@ -19,14 +17,5 @@ export async function CodeBlock({ lang = 'tsx', title, code }: CodeBlockProps) {
     },
   });
 
-  return (
-    <div className={styles.codeBlock}>
-      {title && (
-        <div className={styles.title}>
-          <Text variant="body">{title}</Text>
-        </div>
-      )}
-      <div dangerouslySetInnerHTML={{ __html: out }} className={styles.code} />
-    </div>
-  );
+  return <CodeBlockClient out={out} title={title} />;
 }
diff --git a/canon-docs/src/mdx-components.tsx b/canon-docs/src/mdx-components.tsx
index 182eaa03b4..5eb16edbfe 100644
--- a/canon-docs/src/mdx-components.tsx
+++ b/canon-docs/src/mdx-components.tsx
@@ -6,7 +6,6 @@ import { Box } from '../../packages/canon/src/components/Box';
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
-    // Allows customizing built-in components, e.g. to add styling.
     h1: ({ children }) => (
       <Box style={{ marginTop: '4rem' }}>
         <h1
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index c44d81dc15..abdd027bf0 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { Icon } from '../Icon';
 import clsx from 'clsx';
diff --git a/packages/canon/src/components/Heading/Heading.tsx b/packages/canon/src/components/Heading/Heading.tsx
index fd1158f3e3..6c16f32ffd 100644
--- a/packages/canon/src/components/Heading/Heading.tsx
+++ b/packages/canon/src/components/Heading/Heading.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
diff --git a/packages/canon/src/components/Icon/Icon.tsx b/packages/canon/src/components/Icon/Icon.tsx
index 610b3ae86e..c761d0d104 100644
--- a/packages/canon/src/components/Icon/Icon.tsx
+++ b/packages/canon/src/components/Icon/Icon.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React from 'react';
 import { useCanon } from '../../contexts/canon';
 import type { IconProps } from './types';
diff --git a/packages/canon/src/components/Input/Input.tsx b/packages/canon/src/components/Input/Input.tsx
index c07f13fabe..5eb68e7bf4 100644
--- a/packages/canon/src/components/Input/Input.tsx
+++ b/packages/canon/src/components/Input/Input.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { ElementRef, forwardRef } from 'react';
 import { Input as InputPrimitive } from '@base-ui-components/react/input';
 import clsx from 'clsx';
diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx
index 0606b2cd4c..1d490bc0ef 100644
--- a/packages/canon/src/components/Text/Text.tsx
+++ b/packages/canon/src/components/Text/Text.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { forwardRef } from 'react';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
 import clsx from 'clsx';
diff --git a/packages/canon/src/contexts/canon.tsx b/packages/canon/src/contexts/canon.tsx
index 7091413fd3..69a9e30b6f 100644
--- a/packages/canon/src/contexts/canon.tsx
+++ b/packages/canon/src/contexts/canon.tsx
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-'use client';
-
 import React, { createContext, ReactNode, useContext } from 'react';
 import { icons } from '../components/Icon/icons';
 import { IconMap, IconNames } from '../components/Icon/types';

From 6ec2d17ced0efec88afe3b4bdcc1c55fab230136 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 10:42:48 +0000
Subject: [PATCH 2/8] Fix directives

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 canon-docs/src/app/(docs)/components/icon/page.mdx    | 3 +--
 canon-docs/src/components/HeadlessBanners/BaseUI.tsx  | 5 +++--
 canon-docs/src/components/IconLibrary/IconLibrary.tsx | 8 +++-----
 canon-docs/src/components/PropsTable/PropsTable.tsx   | 8 ++++++--
 canon-docs/src/components/Snippet/index.tsx           | 3 +--
 canon-docs/src/components/Snippet/styles.module.css   | 1 +
 canon-docs/src/components/Tabs/parts.tsx              | 2 +-
 canon-docs/src/snippets/field.tsx                     | 2 ++
 canon-docs/src/snippets/input.tsx                     | 2 ++
 9 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx
index b85b33190d..cb7c0df626 100644
--- a/canon-docs/src/app/(docs)/components/icon/page.mdx
+++ b/canon-docs/src/app/(docs)/components/icon/page.mdx
@@ -1,5 +1,4 @@
 import { PropsTable } from '@/components/PropsTable';
-import { icons } from '@backstage/canon';
 import { IconPreview } from '@/snippets/icon';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
@@ -44,7 +43,7 @@ Icons are used to represent an action or a state.
 <PropsTable
   data={{
     name: {
-      type: Object.keys(icons),
+      type: 'icon',
       responsive: false,
     },
     size: {
diff --git a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
index 6d3a727333..8401cafd78 100644
--- a/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
+++ b/canon-docs/src/components/HeadlessBanners/BaseUI.tsx
@@ -1,6 +1,7 @@
+'use client';
+
+import { Icon, Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
 
 interface BaseUIProps {
   href: string;
diff --git a/canon-docs/src/components/IconLibrary/IconLibrary.tsx b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
index b8ca8acdea..be666fc896 100644
--- a/canon-docs/src/components/IconLibrary/IconLibrary.tsx
+++ b/canon-docs/src/components/IconLibrary/IconLibrary.tsx
@@ -13,12 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use client';
 
-import React from 'react';
-import { Icon } from '../../../../packages/canon/src/components/Icon';
-import type { IconNames } from '../../../../packages/canon/src/components/Icon';
-import { Text } from '../../../../packages/canon/src/components/Text';
-import { icons } from '../../../../packages/canon/src/components/Icon/icons';
+import { Text, Icon, icons } from '../../../../packages/canon';
+import type { IconNames } from '../../../../packages/canon';
 import styles from './styles.module.css';
 
 export const IconLibrary = () => {
diff --git a/canon-docs/src/components/PropsTable/PropsTable.tsx b/canon-docs/src/components/PropsTable/PropsTable.tsx
index 555df84903..69bff9ffe6 100644
--- a/canon-docs/src/components/PropsTable/PropsTable.tsx
+++ b/canon-docs/src/components/PropsTable/PropsTable.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+'use client';
+
 import * as Table from '../Table';
 import { Chip } from '../Chip';
+import { icons } from '../../../../packages/canon';
 
 // Define a more specific type for the data object
 type PropData = {
@@ -33,7 +35,9 @@ export const PropsTable = <T extends Record<string, PropData>>({
               <div
                 style={{ display: 'flex', flexWrap: 'wrap', gap: '0.375rem' }}
               >
-                {Array.isArray(data[n].type) ? (
+                {data[n].type === 'icon' ? (
+                  Object.keys(icons).map(icon => <Chip key={icon}>{icon}</Chip>)
+                ) : Array.isArray(data[n].type) ? (
                   data[n].type.map(t => <Chip key={t}>{t}</Chip>)
                 ) : (
                   <Chip>{data[n].type}</Chip>
diff --git a/canon-docs/src/components/Snippet/index.tsx b/canon-docs/src/components/Snippet/index.tsx
index 2c7c4c5a02..e1af88cb12 100644
--- a/canon-docs/src/components/Snippet/index.tsx
+++ b/canon-docs/src/components/Snippet/index.tsx
@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { CodeBlock } from '../CodeBlock';
-import { Text } from '../../../../packages/canon/src/components/Text';
 import { Collapsible } from '@base-ui-components/react/collapsible';
 import styles from './styles.module.css';
 
@@ -31,7 +30,7 @@ export const Snippet = ({
           {preview}
         </div>
         <Collapsible.Trigger className={styles.trigger}>
-          <Text variant="body">View code</Text>
+          View code
         </Collapsible.Trigger>
       </div>
       <Collapsible.Panel className={styles.panel}>
diff --git a/canon-docs/src/components/Snippet/styles.module.css b/canon-docs/src/components/Snippet/styles.module.css
index 65bdc62d05..dc892e099c 100644
--- a/canon-docs/src/components/Snippet/styles.module.css
+++ b/canon-docs/src/components/Snippet/styles.module.css
@@ -33,6 +33,7 @@
   right: 16px;
   bottom: 12px;
   cursor: pointer;
+  font-size: 14px;
 }
 
 [data-theme='dark'] .previewContent {
diff --git a/canon-docs/src/components/Tabs/parts.tsx b/canon-docs/src/components/Tabs/parts.tsx
index 41dfadf2ea..cdf9ddd63c 100644
--- a/canon-docs/src/components/Tabs/parts.tsx
+++ b/canon-docs/src/components/Tabs/parts.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { Tabs as TabsPrimitive } from '@base-ui-components/react/tabs';
+import { Text } from '../../../../packages/canon';
 import styles from './styles.module.css';
-import { Text } from '../../../../packages/canon/src/components/Text';
 
 export const Root = ({
   className,
diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx
index 4c14880e48..e801d85641 100644
--- a/canon-docs/src/snippets/field.tsx
+++ b/canon-docs/src/snippets/field.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Field } from '../../../packages/canon';
 
 export const FieldPreview = () => {
diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx
index d320f3a24a..69d0b62b7f 100644
--- a/canon-docs/src/snippets/input.tsx
+++ b/canon-docs/src/snippets/input.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { Input, Grid } from '../../../packages/canon';
 
 export const InputPreview = () => {

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 3/8] 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 };
+}

From 989af2597b231250972bd3351648ae7ede862b05 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 15:48:57 +0000
Subject: [PATCH 4/8] Create hungry-rings-live.md

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

diff --git a/.changeset/hungry-rings-live.md b/.changeset/hungry-rings-live.md
new file mode 100644
index 0000000000..b1c94af784
--- /dev/null
+++ b/.changeset/hungry-rings-live.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Removed client directive as they are not needed in React 18.

From 829c7d95c34b81148ecd7b9ac97f1d8ab6463589 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 15:59:11 +0000
Subject: [PATCH 5/8] Revert spacing prop

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

diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 5958e2a739..52dd7bc782 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -23,6 +23,9 @@ import { Inline } from '../Inline';
 const meta = {
   title: 'Components/Box',
   component: Box,
+  parameters: {
+    layout: 'centered',
+  },
   argTypes: {
     as: {
       control: { type: 'select' },
@@ -213,27 +216,27 @@ export const Padding: Story = {
   render: args => (
     <Stack align="center" gap="md">
       <Inline alignY="center" gap="md">
-        <Box p="3" style={styleInsideBox}>
+        <Box padding="md" style={styleInsideBox}>
           <Box {...args}>Padding</Box>
         </Box>
-        <Box px="3" style={styleInsideBox}>
+        <Box paddingX="md" style={styleInsideBox}>
           <Box {...args}>Padding X</Box>
         </Box>
-        <Box py="3" style={styleInsideBox}>
+        <Box paddingY="md" style={styleInsideBox}>
           <Box {...args}>Padding Y</Box>
         </Box>
       </Inline>
       <Inline alignY="center" gap="md">
-        <Box pt="3" style={styleInsideBox}>
+        <Box paddingTop="md" style={styleInsideBox}>
           <Box {...args}>Padding Top</Box>
         </Box>
-        <Box pr="3" style={styleInsideBox}>
+        <Box paddingRight="md" style={styleInsideBox}>
           <Box {...args}>Padding Right</Box>
         </Box>
-        <Box pb="3" style={styleInsideBox}>
+        <Box paddingBottom="md" style={styleInsideBox}>
           <Box {...args}>Padding Bottom</Box>
         </Box>
-        <Box pl="3" style={styleInsideBox}>
+        <Box paddingLeft="md" style={styleInsideBox}>
           <Box {...args}>Padding Left</Box>
         </Box>
       </Inline>
@@ -254,39 +257,39 @@ export const Margin: Story = {
     <Stack align="center" gap="md">
       <Inline alignY="center" gap="md">
         <Box style={styleInsideBox}>
-          <Box m="3" {...args}>
+          <Box margin="md" {...args}>
             Margin
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box mx="3" {...args}>
+          <Box marginX="md" {...args}>
             Margin X
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box my="3" {...args}>
+          <Box marginY="md" {...args}>
             Margin Y
           </Box>
         </Box>
       </Inline>
       <Inline alignY="center" gap="md">
         <Box style={styleInsideBox}>
-          <Box mt="3" {...args}>
+          <Box marginTop="md" {...args}>
             Margin Top
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box mr="3" {...args}>
+          <Box marginRight="md" {...args}>
             Margin Right
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box mb="3" {...args}>
+          <Box marginBottom="md" {...args}>
             Margin Bottom
           </Box>
         </Box>
         <Box style={styleInsideBox}>
-          <Box ml="3" {...args}>
+          <Box marginLeft="md" {...args}>
             Margin Left
           </Box>
         </Box>
diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 04dc4648ce..6b673abddd 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -16,24 +16,23 @@
 
 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', children } = props;
+  const { as = 'div', className, style, children, ...restProps } = props;
 
-  // Extract utility class names and styles
-  const propDefs = { ...spacingPropDefs };
-  const { className, style } = extractProps(props, propDefs);
+  // 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);
 
   return createElement(as, {
     ref,
-    className: clsx('canon-Box', className),
+    className: classNames,
     style,
     children,
   });
 });
-
-Box.displayName = 'Box';
diff --git a/packages/canon/src/components/Container/types.ts b/packages/canon/src/components/Container/types.ts
index 41de725b32..f9a71ecfa1 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;
-  my?: SpaceProps['my'];
-  mb?: SpaceProps['mb'];
-  mt?: SpaceProps['mt'];
-  py?: SpaceProps['py'];
-  pb?: SpaceProps['pb'];
-  pt?: SpaceProps['pt'];
+  marginY?: SpaceProps['marginY'];
+  marginBottom?: SpaceProps['marginBottom'];
+  marginTop?: SpaceProps['marginTop'];
+  paddingY?: SpaceProps['paddingY'];
+  paddingBottom?: SpaceProps['paddingBottom'];
+  paddingTop?: SpaceProps['paddingTop'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index b935a95ae0..ad4a8d03b4 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -31,21 +31,3 @@
 
 /* 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 78bc0a6f8d..0252fefaf7 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -373,6 +373,486 @@
       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 297aff1d98..a69dae1df3 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -373,6 +373,486 @@
       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
deleted file mode 100644
index 00a30cc8b1..0000000000
--- a/packages/canon/src/css/utilities/m.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index 4fbf8d614f..0000000000
--- a/packages/canon/src/css/utilities/mb.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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 981530f0e3..2230865466 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -373,6 +373,486 @@
       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
deleted file mode 100644
index 887c464df1..0000000000
--- a/packages/canon/src/css/utilities/ml.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index a2c0f8668b..0000000000
--- a/packages/canon/src/css/utilities/mr.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index b74525b142..0000000000
--- a/packages/canon/src/css/utilities/mt.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index 6ebbc57367..0000000000
--- a/packages/canon/src/css/utilities/mx.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.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
deleted file mode 100644
index feb4a6f5bd..0000000000
--- a/packages/canon/src/css/utilities/my.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.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
deleted file mode 100644
index 6540c626d2..0000000000
--- a/packages/canon/src/css/utilities/p.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index 722b744270..0000000000
--- a/packages/canon/src/css/utilities/pb.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index a9db77e279..0000000000
--- a/packages/canon/src/css/utilities/pl.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index bcbb35f192..0000000000
--- a/packages/canon/src/css/utilities/pr.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index 900f412892..0000000000
--- a/packages/canon/src/css/utilities/pt.css
+++ /dev/null
@@ -1,422 +0,0 @@
-.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
deleted file mode 100644
index 84fd30aaf8..0000000000
--- a/packages/canon/src/css/utilities/px.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.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
deleted file mode 100644
index 233794f888..0000000000
--- a/packages/canon/src/css/utilities/py.css
+++ /dev/null
@@ -1,524 +0,0 @@
-.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 856cc59440..c8fe35cb42 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -373,6 +373,486 @@
       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 10b6e44380..218bd37217 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -373,6 +373,486 @@
       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 e85832fe44..fa64c1d624 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -372,6 +372,486 @@
     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
deleted file mode 100644
index 15d8a8fc2b..0000000000
--- a/packages/canon/src/props/margin.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
- * 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
deleted file mode 100644
index 5c145ee6fd..0000000000
--- a/packages/canon/src/props/padding.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
- * 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
deleted file mode 100644
index b4689a13ca..0000000000
--- a/packages/canon/src/props/prop-def.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * 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
deleted file mode 100644
index 58b3a36eff..0000000000
--- a/packages/canon/src/props/spacing.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { paddingPropDefs } from './padding';
-import { marginPropDefs } from './margin';
-
-export const spacingValues = [
-  '0.5',
-  '1',
-  '1.5',
-  '2',
-  '3',
-  '4',
-  '5',
-  '6',
-  '7',
-  '8',
-  '9',
-  '10',
-  '11',
-  '12',
-  '13',
-  '14',
-];
-
-export const spacingPropDefs = {
-  ...paddingPropDefs(spacingValues),
-  ...marginPropDefs(spacingValues),
-};
diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
deleted file mode 100644
index 70e4249eed..0000000000
--- a/packages/canon/src/utils/extractProps.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export function extractProps(
-  props: {
-    className?: string;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-    as?: keyof JSX.IntrinsicElements;
-    [key: string]: any;
-  },
-  propDefs: { [key: string]: any },
-) {
-  let className: string = props.className || '';
-  let style: React.CSSProperties = props.style || {};
-
-  for (const key in propDefs) {
-    if (props.hasOwnProperty(key)) {
-      const value = props[key];
-      const propDefsValues = propDefs[key].values;
-      const propDefsCustomProperties = propDefs[key].customProperties;
-      const propDefsClassName = propDefs[key].className;
-      const isResponsive = propDefs[key].responsive;
-
-      const handleValue = (val: any, prefix: string = '') => {
-        if (propDefsValues.includes(val)) {
-          className += ` ${prefix}${propDefsClassName}-${val}`;
-        } else {
-          const customPropertyKey =
-            isResponsive && prefix
-              ? `${propDefsCustomProperties}-${prefix.slice(0, -1)}`
-              : propDefsCustomProperties;
-          (style as any)[customPropertyKey] = val;
-          className += ` ${prefix}${propDefsClassName}`;
-        }
-      };
-
-      if (isResponsive && typeof value === 'object') {
-        // Handle responsive object values
-        for (const breakpoint in value) {
-          const prefix = breakpoint === 'initial' ? '' : `${breakpoint}:`;
-          handleValue(value[breakpoint], prefix);
-        }
-      } else {
-        handleValue(value);
-      }
-    }
-  }
-
-  // Ensure keys from props that are defined in propDefs are removed
-  const cleanedProps = Object.keys(props).reduce((acc, key) => {
-    if (!propDefs.hasOwnProperty(key)) {
-      acc[key] = props[key];
-    }
-    return acc;
-  }, {} as { [key: string]: any });
-
-  return { ...cleanedProps, className, style };
-}

From 654e0e28c802bad8ba495098584fd8d2d42c37a4 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 16:00:12 +0000
Subject: [PATCH 6/8] Update report.api.md

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md | 90 ++++++++++++++----------------------
 1 file changed, 35 insertions(+), 55 deletions(-)

diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 8d38f76485..263ad82e82 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -160,17 +160,17 @@ export interface ContainerProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  mb?: SpaceProps['mb'];
+  marginBottom?: SpaceProps['marginBottom'];
   // (undocumented)
-  mt?: SpaceProps['mt'];
+  marginTop?: SpaceProps['marginTop'];
   // (undocumented)
-  my?: SpaceProps['my'];
+  marginY?: SpaceProps['marginY'];
   // (undocumented)
-  pb?: SpaceProps['pb'];
+  paddingBottom?: SpaceProps['paddingBottom'];
   // (undocumented)
-  pt?: SpaceProps['pt'];
+  paddingTop?: SpaceProps['paddingTop'];
   // (undocumented)
-  py?: SpaceProps['py'];
+  paddingY?: SpaceProps['paddingY'];
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -378,58 +378,38 @@ export type JustifyContent =
   | 'between';
 
 // @public (undocumented)
-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;
+export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 // @public (undocumented)
 export interface SpaceProps {
   // (undocumented)
-  m?: Responsive<Space>;
+  margin?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  mb?: Responsive<Space>;
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  ml?: Responsive<Space>;
+  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  mr?: Responsive<Space>;
+  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  mt?: Responsive<Space>;
+  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  mx?: Responsive<Space>;
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  my?: Responsive<Space>;
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  p?: Responsive<Space>;
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  pb?: Responsive<Space>;
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  pl?: Responsive<Space>;
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  pr?: Responsive<Space>;
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  pt?: Responsive<Space>;
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  px?: Responsive<Space>;
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  py?: Responsive<Space>;
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
 }
 
 // @public (undocumented)
@@ -530,30 +510,30 @@ export const useCanon: () => CanonContextProps;
 // @public (undocumented)
 export interface UtilityProps extends SpaceProps {
   // (undocumented)
-  alignItems?: Responsive<AlignItems>;
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
   // (undocumented)
-  border?: Responsive<Border>;
+  border?: Border | Partial<Record<Breakpoint, Border>>;
   // (undocumented)
-  borderRadius?: Responsive<BorderRadius>;
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
   // (undocumented)
-  colEnd?: Responsive<Columns | 'auto'>;
+  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
   // (undocumented)
-  colSpan?: Responsive<Columns | 'full'>;
+  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
   // (undocumented)
-  colStart?: Responsive<Columns | 'auto'>;
+  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
   // (undocumented)
-  columns?: Responsive<Columns>;
+  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
   // (undocumented)
-  display?: Responsive<Display>;
+  display?: Display | Partial<Record<Breakpoint, Display>>;
   // (undocumented)
-  flexDirection?: Responsive<FlexDirection>;
+  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
   // (undocumented)
-  flexWrap?: Responsive<FlexWrap>;
+  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
   // (undocumented)
-  gap?: Responsive<Space>;
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
   // (undocumented)
-  justifyContent?: Responsive<JustifyContent>;
+  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
   // (undocumented)
-  rowSpan?: Responsive<Columns | 'full'>;
+  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
 }
-```
+```
\ No newline at end of file

From ad9b36f61da2d9d1ac101ebe8b71660aebdd0293 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 16:01:33 +0000
Subject: [PATCH 7/8] Update types.ts

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/src/types.ts | 76 ++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 48 deletions(-)

diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index ee5d954576..3a6b55f13b 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -37,27 +37,7 @@ export type AsProps =
 export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 /** @public */
-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;
+export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 /** @public */
 export type Display = 'none' | 'flex' | 'block' | 'inline';
@@ -99,35 +79,35 @@ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 /** @public */
 export interface SpaceProps {
-  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>;
+  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>>;
 }
 
 /** @public */
 export interface UtilityProps extends SpaceProps {
-  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'>;
+  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'>>;
 }

From 0fa9dd0820ff6b62d1a27dd7ac5cf469d1187723 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 27 Jan 2025 16:34:18 +0000
Subject: [PATCH 8/8] Update report.api.md

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/canon/report.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 263ad82e82..8899f6ad45 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -536,4 +536,4 @@ export interface UtilityProps extends SpaceProps {
   // (undocumented)
   rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
 }
-```
\ No newline at end of file
+```