diff --git a/.changeset/selfish-dodos-hear.md b/.changeset/selfish-dodos-hear.md
new file mode 100644
index 0000000000..8754f6859d
--- /dev/null
+++ b/.changeset/selfish-dodos-hear.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': minor
+---
+
+**BREAKING**: Fixing css structure and making sure that props are applying the correct styles for all responsive values.
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index 8899f6ad45..33efa37c7d 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -17,6 +17,13 @@ import { RefAttributes } from 'react';
 // @public (undocumented)
 export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
 
+// @public (undocumented)
+export type ArbitraryStylingPropDef = {
+  className: string;
+  customProperties: `--${string}`[];
+  parseValue?: (value: string) => string | undefined;
+};
+
 // @public (undocumented)
 export type AsProps =
   | 'div'
@@ -36,6 +43,14 @@ export type AsProps =
   | 'dl'
   | 'dt';
 
+// @public (undocumented)
+export type BooleanPropDef = {
+  type: 'boolean';
+  default?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
 // @public (undocumented)
 export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
 
@@ -56,20 +71,51 @@ export const Box: ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface BoxProps extends UtilityProps {
+export type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
+
+// @public (undocumented)
+export const boxPropDefs: {
+  as: {
+    type: 'enum';
+    values: readonly ['div', 'span'];
+    default: 'div';
+  };
+};
+
+// @public (undocumented)
+export interface BoxProps extends SpaceProps {
   // (undocumented)
-  as?: keyof JSX.IntrinsicElements;
+  as?: BoxOwnProps['as'];
   // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
+  display?: DisplayProps['display'];
+  // (undocumented)
+  height?: HeightProps['height'];
+  // (undocumented)
+  maxHeight?: HeightProps['maxHeight'];
+  // (undocumented)
+  maxWidth?: WidthProps['maxWidth'];
+  // (undocumented)
+  minHeight?: HeightProps['minHeight'];
+  // (undocumented)
+  minWidth?: WidthProps['minWidth'];
+  // (undocumented)
+  position?: PositionProps['position'];
+  // (undocumented)
   style?: React.CSSProperties;
+  // (undocumented)
+  width?: WidthProps['width'];
 }
 
 // @public (undocumented)
 export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
+// @public (undocumented)
+export const breakpoints: Breakpoint[];
+
 // @public (undocumented)
 export const Button: React_2.ForwardRefExoticComponent<
   ButtonProps & React_2.RefAttributes<HTMLButtonElement>
@@ -149,8 +195,8 @@ export interface CheckboxProps {
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 // @public (undocumented)
-export const Container: React_2.ForwardRefExoticComponent<
-  ContainerProps & React_2.RefAttributes<HTMLDivElement>
+export const Container: ForwardRefExoticComponent<
+  ContainerProps & RefAttributes<HTMLDivElement>
 >;
 
 // @public (undocumented)
@@ -160,17 +206,17 @@ export interface ContainerProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  marginBottom?: SpaceProps['marginBottom'];
+  mb?: SpaceProps['mb'];
   // (undocumented)
-  marginTop?: SpaceProps['marginTop'];
+  mt?: SpaceProps['mt'];
   // (undocumented)
-  marginY?: SpaceProps['marginY'];
+  my?: SpaceProps['my'];
   // (undocumented)
-  paddingBottom?: SpaceProps['paddingBottom'];
+  pb?: SpaceProps['pb'];
   // (undocumented)
-  paddingTop?: SpaceProps['paddingTop'];
+  pt?: SpaceProps['pt'];
   // (undocumented)
-  paddingY?: SpaceProps['paddingY'];
+  py?: SpaceProps['py'];
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -178,6 +224,35 @@ export interface ContainerProps {
 // @public (undocumented)
 export type Display = 'none' | 'flex' | 'block' | 'inline';
 
+// @public (undocumented)
+export const displayPropDefs: {
+  display: {
+    type: 'enum';
+    className: string;
+    values: readonly ['none', 'inline', 'inline-block', 'block'];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type DisplayProps = GetPropDefTypes<typeof displayPropDefs>;
+
+// @public (undocumented)
+export type EnumOrStringPropDef<T> = {
+  type: 'enum | string';
+  values: readonly T[];
+  default?: T | string;
+  required?: boolean;
+};
+
+// @public (undocumented)
+export type EnumPropDef<T> = {
+  type: 'enum';
+  values: readonly T[];
+  default?: T;
+  required?: boolean;
+};
+
 // @public (undocumented)
 export const Field: {
   Root: React_2.ForwardRefExoticComponent<
@@ -214,6 +289,49 @@ export type FlexDirection = 'row' | 'column';
 // @public (undocumented)
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
+// @public (undocumented)
+export const gapPropDefs: {
+  gap: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--gap'[];
+    values: string[];
+    responsive: true;
+    default: string;
+  };
+};
+
+// @public (undocumented)
+export type GapProps = GetPropDefTypes<typeof gapPropDefs>;
+
+// @public (undocumented)
+export type GetPropDefType<Def> = Def extends BooleanPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<boolean>
+    : boolean
+  : Def extends StringPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<string>
+    : string
+  : Def extends ReactNodePropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<React_2.ReactNode>
+    : React_2.ReactNode
+  : Def extends EnumOrStringPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type extends string>
+    ? Responsive<string | Type>
+    : string | Type
+  : Def extends EnumPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type>
+    ? Responsive<Type>
+    : Type
+  : never;
+
+// @public (undocumented)
+export type GetPropDefTypes<P> = {
+  [K in keyof P]?: GetPropDefType<P[K]>;
+};
+
 // @public (undocumented)
 export const Grid: ForwardRefExoticComponent<
   GridProps & RefAttributes<HTMLDivElement>
@@ -223,24 +341,144 @@ export const Grid: ForwardRefExoticComponent<
   >;
 };
 
+// @public (undocumented)
+export type GridItemOwnProps = GetPropDefTypes<typeof gridItemPropDefs>;
+
+// @public (undocumented)
+export const gridItemPropDefs: {
+  colSpan: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--col-span'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+  colEnd: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--col-end'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+  colStart: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--col-start'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+  rowSpan: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--row-span'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+  };
+};
+
 // @public (undocumented)
 export interface GridItemProps {
   // (undocumented)
-  children: React.ReactNode;
+  children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  colEnd?: UtilityProps['colEnd'];
+  colEnd?: GridItemOwnProps['colEnd'];
   // (undocumented)
-  colSpan?: UtilityProps['colSpan'];
+  colSpan?: GridItemOwnProps['colSpan'];
   // (undocumented)
-  colStart?: UtilityProps['colStart'];
+  colStart?: GridItemOwnProps['colStart'];
   // (undocumented)
-  rowSpan?: UtilityProps['rowSpan'];
+  rowSpan?: GridItemOwnProps['rowSpan'];
   // (undocumented)
   style?: React.CSSProperties;
 }
 
+// @public (undocumented)
+export type GridOwnProps = GetPropDefTypes<typeof gridPropDefs>;
+
+// @public (undocumented)
+export const gridPropDefs: {
+  columns: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--columns'[];
+    values: readonly [
+      '1',
+      '2',
+      '3',
+      '4',
+      '5',
+      '6',
+      '7',
+      '8',
+      '9',
+      '10',
+      '11',
+      '12',
+      'auto',
+    ];
+    responsive: true;
+    default: string;
+  };
+};
+
 // @public (undocumented)
 export interface GridProps extends SpaceProps {
   // (undocumented)
@@ -248,9 +486,9 @@ export interface GridProps extends SpaceProps {
   // (undocumented)
   className?: string;
   // (undocumented)
-  columns?: UtilityProps['columns'];
+  columns?: GridOwnProps['columns'];
   // (undocumented)
-  gap?: UtilityProps['gap'];
+  gap?: GapProps['gap'];
   // (undocumented)
   style?: React.CSSProperties;
 }
@@ -286,6 +524,31 @@ export interface HeadingProps {
       >;
 }
 
+// @public (undocumented)
+export const heightPropDefs: {
+  height: {
+    type: 'string';
+    className: string;
+    customProperties: '--height'[];
+    responsive: true;
+  };
+  minHeight: {
+    type: 'string';
+    className: string;
+    customProperties: '--min-height'[];
+    responsive: true;
+  };
+  maxHeight: {
+    type: 'string';
+    className: string;
+    customProperties: '--max-height'[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
+
 // @public (undocumented)
 export const Icon: (props: IconProps) => React_2.JSX.Element;
 
@@ -378,38 +641,216 @@ export type JustifyContent =
   | 'between';
 
 // @public (undocumented)
-export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export const marginPropDefs: (spacingValues: string[]) => {
+  m: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--m'[];
+    responsive: true;
+  };
+  mx: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: ('--ml' | '--mr')[];
+    responsive: true;
+  };
+  my: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: ('--mt' | '--mb')[];
+    responsive: true;
+  };
+  mt: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--mt'[];
+    responsive: true;
+  };
+  mr: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--mr'[];
+    responsive: true;
+  };
+  mb: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--mb'[];
+    responsive: true;
+  };
+  ml: {
+    type: 'enum | string';
+    values: string[];
+    className: string;
+    customProperties: '--ml'[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
+
+// @public (undocumented)
+export type NonStylingPropDef = {
+  className?: never;
+  customProperties?: never;
+  parseValue?: never;
+};
+
+// @public (undocumented)
+export const paddingPropDefs: (spacingValues: string[]) => {
+  p: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--p'[];
+    values: string[];
+    responsive: true;
+  };
+  px: {
+    type: 'enum | string';
+    className: string;
+    customProperties: ('--pl' | '--pr')[];
+    values: string[];
+    responsive: true;
+  };
+  py: {
+    type: 'enum | string';
+    className: string;
+    customProperties: ('--pt' | '--pb')[];
+    values: string[];
+    responsive: true;
+  };
+  pt: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pt'[];
+    values: string[];
+    responsive: true;
+  };
+  pr: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pr'[];
+    values: string[];
+    responsive: true;
+  };
+  pb: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pb'[];
+    values: string[];
+    responsive: true;
+  };
+  pl: {
+    type: 'enum | string';
+    className: string;
+    customProperties: '--pl'[];
+    values: string[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
+
+// @public (undocumented)
+export const positionPropDefs: {
+  position: {
+    type: 'enum';
+    className: string;
+    values: readonly ['static', 'relative', 'absolute', 'fixed', 'sticky'];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type PositionProps = GetPropDefTypes<typeof positionPropDefs>;
+
+// @public (undocumented)
+export type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
+
+// @public (undocumented)
+export type ReactNodePropDef = {
+  type: 'ReactNode';
+  default?: React_2.ReactNode;
+  required?: boolean;
+};
+
+// @public (undocumented)
+export type RegularPropDef<T> =
+  | ReactNodePropDef
+  | BooleanPropDef
+  | (StringPropDef & ArbitraryStylingPropDef)
+  | (StringPropDef & NonStylingPropDef)
+  | (EnumPropDef<T> & StylingPropDef)
+  | (EnumPropDef<T> & NonStylingPropDef)
+  | (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
+  | (EnumOrStringPropDef<T> & NonStylingPropDef);
+
+// @public (undocumented)
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+// @public (undocumented)
+export type ResponsivePropDef<T = any> = RegularPropDef<T> & {
+  responsive: true;
+};
+
+// @public (undocumented)
+export type Space =
+  | '0.5'
+  | '1'
+  | '1.5'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | '13'
+  | '14'
+  | string;
 
 // @public (undocumented)
 export interface SpaceProps {
   // (undocumented)
-  margin?: Space | Partial<Record<Breakpoint, Space>>;
+  m?: Responsive<Space>;
   // (undocumented)
-  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  mb?: Responsive<Space>;
   // (undocumented)
-  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  ml?: Responsive<Space>;
   // (undocumented)
-  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
+  mr?: Responsive<Space>;
   // (undocumented)
-  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
+  mt?: Responsive<Space>;
   // (undocumented)
-  marginX?: Space | Partial<Record<Breakpoint, Space>>;
+  mx?: Responsive<Space>;
   // (undocumented)
-  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  my?: Responsive<Space>;
   // (undocumented)
-  padding?: Space | Partial<Record<Breakpoint, Space>>;
+  p?: Responsive<Space>;
   // (undocumented)
-  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  pb?: Responsive<Space>;
   // (undocumented)
-  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  pl?: Responsive<Space>;
   // (undocumented)
-  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
+  pr?: Responsive<Space>;
   // (undocumented)
-  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
+  pt?: Responsive<Space>;
   // (undocumented)
-  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
+  px?: Responsive<Space>;
   // (undocumented)
-  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+  py?: Responsive<Space>;
 }
 
 // @public (undocumented)
@@ -417,26 +858,47 @@ export const Stack: ForwardRefExoticComponent<
   StackProps & RefAttributes<HTMLDivElement>
 >;
 
+// @public (undocumented)
+export type StackOwnProps = GetPropDefTypes<typeof stackPropDefs>;
+
+// @public (undocumented)
+export const stackPropDefs: {
+  align: {
+    type: 'enum';
+    className: string;
+    values: readonly ['start', 'center', 'end', 'baseline', 'stretch'];
+    responsive: true;
+    default: 'stretch';
+  };
+};
+
 // @public (undocumented)
 export interface StackProps extends SpaceProps {
   // (undocumented)
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
-  // (undocumented)
-  as?: AsProps;
+  align?: StackOwnProps['align'];
   // (undocumented)
   children: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  gap?: UtilityProps['gap'];
+  gap?: GapProps['gap'];
   // (undocumented)
   style?: React.CSSProperties;
 }
 
+// @public (undocumented)
+export type StringPropDef = {
+  type: 'string';
+  default?: string;
+  required?: boolean;
+};
+
+// @public (undocumented)
+export type StylingPropDef = {
+  className: string;
+  parseValue?: (value: string) => string | undefined;
+};
+
 // @public (undocumented)
 export const Table: React_3.ForwardRefExoticComponent<
   React_3.HTMLAttributes<HTMLTableElement> &
@@ -510,30 +972,55 @@ export const useCanon: () => CanonContextProps;
 // @public (undocumented)
 export interface UtilityProps extends SpaceProps {
   // (undocumented)
-  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  alignItems?: Responsive<AlignItems>;
   // (undocumented)
-  border?: Border | Partial<Record<Breakpoint, Border>>;
+  border?: Responsive<Border>;
   // (undocumented)
-  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  borderRadius?: Responsive<BorderRadius>;
   // (undocumented)
-  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colEnd?: Responsive<Columns | 'auto'>;
   // (undocumented)
-  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  colSpan?: Responsive<Columns | 'full'>;
   // (undocumented)
-  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
+  colStart?: Responsive<Columns | 'auto'>;
   // (undocumented)
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
+  columns?: Responsive<Columns>;
   // (undocumented)
-  display?: Display | Partial<Record<Breakpoint, Display>>;
+  display?: Responsive<Display>;
   // (undocumented)
-  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  flexDirection?: Responsive<FlexDirection>;
   // (undocumented)
-  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  flexWrap?: Responsive<FlexWrap>;
   // (undocumented)
-  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  gap?: Responsive<Space>;
   // (undocumented)
-  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  justifyContent?: Responsive<JustifyContent>;
   // (undocumented)
-  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  rowSpan?: Responsive<Columns | 'full'>;
 }
+
+// @public (undocumented)
+export const widthPropDefs: {
+  width: {
+    type: 'string';
+    className: string;
+    customProperties: '--width'[];
+    responsive: true;
+  };
+  minWidth: {
+    type: 'string';
+    className: string;
+    customProperties: '--min-width'[];
+    responsive: true;
+  };
+  maxWidth: {
+    type: 'string';
+    className: string;
+    customProperties: '--max-width'[];
+    responsive: true;
+  };
+};
+
+// @public (undocumented)
+export type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
 ```
diff --git a/packages/canon/src/components/Box/Box.props.ts b/packages/canon/src/components/Box/Box.props.ts
new file mode 100644
index 0000000000..3cf0291e43
--- /dev/null
+++ b/packages/canon/src/components/Box/Box.props.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
+
+const as = ['div', 'span'] as const;
+
+/** @public */
+const boxPropDefs = {
+  as: { type: 'enum', values: as, default: 'div' },
+} satisfies {
+  as: PropDef<(typeof as)[number]>;
+};
+
+// Use all of the imported prop defs to ensure that JSDoc works
+/** @public */
+type BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;
+
+export { boxPropDefs };
+export type { BoxOwnProps };
diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 52dd7bc782..c7fc341bf4 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' },
@@ -40,159 +37,64 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const Card = () => {
+  return (
+    <div
+      style={{
+        width: '64px',
+        height: '64px',
+        background: '#eaf2fd',
+        borderRadius: '4px',
+        border: '1px solid #2563eb',
+        color: '#2563eb',
+        backgroundImage:
+          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
+      }}
+    />
+  );
+};
+
 export const Default: Story = {
   args: {
-    style: {
-      width: '64px',
-      height: '64px',
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      border: '1px solid #2563eb',
-      color: '#2563eb',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    },
+    children: <Card />,
+    display: 'inline',
   },
 };
 
+const CardDisplay = ({ children }: { children?: React.ReactNode }) => {
+  return (
+    <div
+      style={{
+        padding: '8px',
+        background: '#eaf2fd',
+        borderRadius: '4px',
+        border: '1px solid #2563eb',
+        color: '#2563eb',
+        backgroundImage:
+          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
 export const Display: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: 'auto',
-      height: 'auto',
-      padding: '8px',
-    },
-  },
   render: args => (
     <Stack align="center">
       <Inline>
         <Box display="block" {...args}>
-          Block
-        </Box>
-        <Box display="flex" {...args}>
-          Flex
+          <CardDisplay>Block</CardDisplay>
         </Box>
         <Box display="inline" {...args}>
-          Inline
+          <CardDisplay>Inline</CardDisplay>
         </Box>
         <Box display="none" {...args}>
-          None
+          <CardDisplay>None</CardDisplay>
         </Box>
       </Inline>
-      <Box display={{ xs: 'block', sm: 'flex', md: 'inline' }} {...args}>
-        Responsive
-      </Box>
-    </Stack>
-  ),
-};
-
-export const FlexDirection: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: 'auto',
-      height: 'auto',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack align="center">
-      <Box flexDirection="row" {...args}>
-        <span>Row</span>
-        <span>Row</span>
-      </Box>
-      <Box flexDirection="column" {...args}>
-        <span>Column</span>
-        <span>Column</span>
-      </Box>
-      <Box flexDirection={{ xs: 'column', sm: 'row' }} {...args}>
-        <span>Responsive</span>
-        <span>Flex Direction</span>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const JustifyContent: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: '200px',
-      height: 'auto',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack>
-      <Box justifyContent="start" {...args}>
-        <span>Flex Start</span>
-      </Box>
-      <Box justifyContent="center" {...args}>
-        <span>Center</span>
-      </Box>
-      <Box justifyContent="end" {...args}>
-        <span>Flex End</span>
-      </Box>
-      <Box justifyContent="around" {...args}>
-        <span>Space</span>
-        <span>Around</span>
-      </Box>
-      <Box justifyContent="between" {...args}>
-        <span>Space</span>
-        <span>Between</span>
-      </Box>
-      <Box
-        justifyContent={{
-          xs: 'between',
-          sm: 'around',
-          md: 'start',
-        }}
-        {...args}
-      >
-        <span>Responsive</span>
-        <span>Spacing</span>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const AlignItems: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: '200px',
-      height: '100px',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack>
-      <Box alignItems="start" {...args}>
-        <span>Flex Start</span>
-      </Box>
-      <Box alignItems="center" {...args}>
-        <span>Center</span>
-      </Box>
-      <Box alignItems="end" {...args}>
-        <span>Flex End</span>
-      </Box>
-      <Box
-        alignItems={{
-          xs: 'start',
-          sm: 'center',
-          md: 'end',
-        }}
-        {...args}
-      >
-        <span>Responsive</span>
-        <span>Spacing</span>
+      <Box display={{ initial: 'block', md: 'inline' }} {...args}>
+        <CardDisplay>Responsive</CardDisplay>
       </Box>
     </Stack>
   ),
@@ -216,27 +118,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 +159,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>
@@ -297,119 +199,3 @@ export const Margin: Story = {
     </Stack>
   ),
 };
-
-export const FlexWrap: Story = {
-  args: {
-    style: {
-      ...Default.args?.style,
-      width: '200px',
-      height: 'auto',
-      padding: '8px',
-    },
-    display: 'flex',
-    gap: 'xs',
-  },
-  render: args => (
-    <Stack align="center">
-      <Box flexWrap="wrap" {...args}>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-        <span>Four</span>
-        <span>Five</span>
-        <span>Six</span>
-      </Box>
-      <Box flexWrap="nowrap" {...args}>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-        <span>Four</span>
-        <span>Five</span>
-        <span>Six</span>
-      </Box>
-      <Box flexWrap="wrap-reverse" {...args}>
-        <span>One</span>
-        <span>Two</span>
-        <span>Three</span>
-        <span>Four</span>
-        <span>Five</span>
-        <span>Six</span>
-      </Box>
-    </Stack>
-  ),
-};
-
-export const BorderRadius: Story = {
-  args: {
-    style: {
-      width: '64px',
-      height: '64px',
-      background: '#eaf2fd',
-      border: '1px solid #2563eb',
-      color: '#2563eb',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-      padding: '4px 8px',
-    },
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  render: args => (
-    <Inline align="center">
-      <Box borderRadius="2xs" {...args}>
-        <span>2xs</span>
-      </Box>
-      <Box borderRadius="xs" {...args}>
-        <span>xs</span>
-      </Box>
-      <Box borderRadius="sm" {...args}>
-        <span>sm</span>
-      </Box>
-      <Box borderRadius="md" {...args}>
-        <span>md</span>
-      </Box>
-      <Box borderRadius="xl" {...args}>
-        <span>xl</span>
-      </Box>
-      <Box borderRadius="2xl" {...args}>
-        <span>2xl</span>
-      </Box>
-    </Inline>
-  ),
-};
-
-export const Border: Story = {
-  args: {
-    style: {
-      background: 'var(--canon-bg-elevated)',
-      color: 'var(--canon-fg-text-primary)',
-      padding: '4px 8px',
-      width: '80px',
-      height: '32px',
-    },
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 'xs',
-  },
-  render: args => (
-    <Inline align="center">
-      <Box border="base" {...args}>
-        Base
-      </Box>
-      <Box border="error" {...args}>
-        Error
-      </Box>
-      <Box border="warning" {...args}>
-        Warning
-      </Box>
-      <Box border="selected" {...args}>
-        Selected
-      </Box>
-      <Box border="none" {...args}>
-        None
-      </Box>
-    </Inline>
-  ),
-};
diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index 6b673abddd..00e15a2b72 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -16,23 +16,35 @@
 
 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.props';
+import { boxPropDefs } from './Box.props';
+import { widthPropDefs } from '../../props/width.props';
+import { heightPropDefs } from '../../props/height.props';
+import { positionPropDefs } from '../../props/position.props';
+import { displayPropDefs } from '../../props/display.props';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
-  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);
+  const propDefs = {
+    ...spacingPropDefs,
+    ...widthPropDefs,
+    ...heightPropDefs,
+    ...positionPropDefs,
+    ...displayPropDefs,
+    ...boxPropDefs,
+  };
+  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/Box/index.tsx b/packages/canon/src/components/Box/index.tsx
index d47e653dfd..087a940a2d 100644
--- a/packages/canon/src/components/Box/index.tsx
+++ b/packages/canon/src/components/Box/index.tsx
@@ -15,3 +15,5 @@
  */
 export { Box } from './Box';
 export type * from './types';
+export type { BoxOwnProps } from './Box.props';
+export { boxPropDefs } from './Box.props';
diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts
index a55c856caf..c70012dd56 100644
--- a/packages/canon/src/components/Box/types.ts
+++ b/packages/canon/src/components/Box/types.ts
@@ -14,11 +14,24 @@
  * limitations under the License.
  */
 
-import type { UtilityProps } from '../../types';
+import type { HeightProps } from '../../props/height.props';
+import type { WidthProps } from '../../props/width.props';
+import type { PositionProps } from '../../props/position.props';
+import type { DisplayProps } from '../../props/display.props';
+import type { SpaceProps } from '../../types';
+import type { BoxOwnProps } from './Box.props';
 
 /** @public */
-export interface BoxProps extends UtilityProps {
-  as?: keyof JSX.IntrinsicElements;
+export interface BoxProps extends SpaceProps {
+  display?: DisplayProps['display'];
+  as?: BoxOwnProps['as'];
+  width?: WidthProps['width'];
+  minWidth?: WidthProps['minWidth'];
+  maxWidth?: WidthProps['maxWidth'];
+  height?: HeightProps['height'];
+  minHeight?: HeightProps['minHeight'];
+  maxHeight?: HeightProps['maxHeight'];
+  position?: PositionProps['position'];
   children?: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx
index c9f468048e..f6b0fab8ba 100644
--- a/packages/canon/src/components/Container/Container.stories.tsx
+++ b/packages/canon/src/components/Container/Container.stories.tsx
@@ -37,7 +37,6 @@ type Story = StoryObj<typeof meta>;
 
 const DecorativeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       height: '64px',
       background: '#eaf2fd',
diff --git a/packages/canon/src/components/Container/Container.tsx b/packages/canon/src/components/Container/Container.tsx
index 3583f8ba87..46a5356d56 100644
--- a/packages/canon/src/components/Container/Container.tsx
+++ b/packages/canon/src/components/Container/Container.tsx
@@ -13,27 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { forwardRef } from 'react';
+
+import { createElement, forwardRef } from 'react';
 import { ContainerProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
 import clsx from 'clsx';
+import { displayPropDefs } from '../../props/display.props';
+import { extractProps } from '../../utils/extractProps';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
   (props, ref) => {
-    const { children, className, style, ...restProps } = props;
+    const { children } = props;
 
-    // Generate utility class names
-    const utilityClassNames = getClassNames(restProps);
+    const propDefs = {
+      ...displayPropDefs,
+    };
+    const { className, style } = extractProps(props, propDefs);
 
-    return (
-      <div
-        ref={ref}
-        className={clsx('canon-Container', utilityClassNames, className)}
-        style={style}
-      >
-        {children}
-      </div>
-    );
+    return createElement('div', {
+      ref,
+      className: clsx('canon-Container', className),
+      style,
+      children,
+    });
   },
 );
diff --git a/packages/canon/src/components/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/components/Grid/Grid.props.ts b/packages/canon/src/components/Grid/Grid.props.ts
new file mode 100644
index 0000000000..a918af6187
--- /dev/null
+++ b/packages/canon/src/components/Grid/Grid.props.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
+
+const columnsValues = [
+  '1',
+  '2',
+  '3',
+  '4',
+  '5',
+  '6',
+  '7',
+  '8',
+  '9',
+  '10',
+  '11',
+  '12',
+  'auto',
+] as const;
+
+/** @public */
+const gridPropDefs = {
+  columns: {
+    type: 'enum | string',
+    className: 'cu-columns',
+    customProperties: ['--columns'],
+    values: columnsValues,
+    responsive: true,
+    default: 'auto',
+  },
+} satisfies {
+  columns: PropDef<(typeof columnsValues)[number]>;
+};
+
+/** @public */
+const gridItemPropDefs = {
+  colSpan: {
+    type: 'enum | string',
+    className: 'cu-col-span',
+    customProperties: ['--col-span'],
+    values: columnsValues,
+    responsive: true,
+  },
+  colEnd: {
+    type: 'enum | string',
+    className: 'cu-col-end',
+    customProperties: ['--col-end'],
+    values: columnsValues,
+    responsive: true,
+  },
+  colStart: {
+    type: 'enum | string',
+    className: 'cu-col-start',
+    customProperties: ['--col-start'],
+    values: columnsValues,
+    responsive: true,
+  },
+  rowSpan: {
+    type: 'enum | string',
+    className: 'cu-row-span',
+    customProperties: ['--row-span'],
+    values: columnsValues,
+    responsive: true,
+  },
+} satisfies {
+  colSpan: PropDef<(typeof columnsValues)[number]>;
+  colEnd: PropDef<(typeof columnsValues)[number]>;
+  colStart: PropDef<(typeof columnsValues)[number]>;
+  rowSpan: PropDef<(typeof columnsValues)[number]>;
+};
+
+/** @public */
+type GridOwnProps = GetPropDefTypes<typeof gridPropDefs>;
+
+/** @public */
+type GridItemOwnProps = GetPropDefTypes<typeof gridItemPropDefs>;
+
+export { gridPropDefs, gridItemPropDefs };
+export type { GridOwnProps, GridItemOwnProps };
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index 9aeec52d00..ebffe29bc0 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -33,7 +33,7 @@ const meta = {
     },
   },
   args: {
-    gap: 'xs',
+    gap: '4',
   },
 } satisfies Meta<typeof Grid>;
 
@@ -42,7 +42,6 @@ type Story = StoryObj<typeof meta>;
 
 const FakeBox = () => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
@@ -67,7 +66,7 @@ export const Default: Story = {
 
 export const LargeGap: Story = {
   args: {
-    gap: 'lg',
+    gap: '64px',
   },
   render: args => (
     <Grid {...args}>
@@ -80,17 +79,16 @@ export const LargeGap: Story = {
 
 export const ColumnSizes: Story = {
   args: {
-    columns: 12,
-    gap: 'md',
+    columns: '12',
   },
   render: args => (
-    <Stack gap="md">
+    <Stack gap="4">
       {Array.from({ length: 11 }, (_, i) => (
         <Grid {...args} key={i}>
-          <Grid.Item colSpan={(i + 1) as GridItemProps['colSpan']}>
+          <Grid.Item colSpan={String(i + 1) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
-          <Grid.Item colSpan={(11 - i) as GridItemProps['colSpan']}>
+          <Grid.Item colSpan={String(11 - i) as GridItemProps['colSpan']}>
             <FakeBox />
           </Grid.Item>
         </Grid>
@@ -101,15 +99,13 @@ export const ColumnSizes: Story = {
 
 export const RowAndColumns: Story = {
   args: {
-    columns: 12,
-    gap: 'md',
+    columns: '12',
   },
   render: args => (
     <Stack gap="md">
-      <Grid {...args} columns={3}>
-        <Grid.Item colSpan={1} rowSpan={2}>
+      <Grid {...args} columns="3">
+        <Grid.Item colSpan="1" rowSpan="2">
           <Box
-            borderRadius="xs"
             style={{
               height: '100%',
               background: '#eaf2fd',
@@ -120,10 +116,10 @@ export const RowAndColumns: Story = {
             }}
           />
         </Grid.Item>
-        <Grid.Item colSpan={2}>
+        <Grid.Item colSpan="2">
           <FakeBox />
         </Grid.Item>
-        <Grid.Item colSpan={2}>
+        <Grid.Item colSpan="2">
           <FakeBox />
         </Grid.Item>
       </Grid>
diff --git a/packages/canon/src/components/Grid/Grid.tsx b/packages/canon/src/components/Grid/Grid.tsx
index fc12695006..aedce886ed 100644
--- a/packages/canon/src/components/Grid/Grid.tsx
+++ b/packages/canon/src/components/Grid/Grid.tsx
@@ -15,40 +15,40 @@
  */
 
 import { createElement, forwardRef } from 'react';
-import { GridItemProps, GridProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
+import { gapPropDefs } from '../../props/gap-props';
+import { extractProps } from '../../utils/extractProps';
+import { gridItemPropDefs, gridPropDefs } from './Grid.props';
 import clsx from 'clsx';
+import type { GridItemProps, GridProps } from './types';
 
 const GridBase = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  const {
-    children,
-    gap = 'xs',
-    columns = 'auto',
-    className,
-    style,
-    ...restProps
-  } = props;
+  const propDefs = {
+    ...gapPropDefs,
+    ...gridPropDefs,
+  };
 
-  const utilityClassNames = getClassNames({ gap, columns, ...restProps });
+  const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-Grid', utilityClassNames, className),
+    className: clsx('canon-Grid', className),
     style,
-    children,
+    children: props.children,
   });
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { children, className, style, ...restProps } = props;
+  const propDefs = {
+    ...gridItemPropDefs,
+  };
 
-  const utilityClassNames = getClassNames(restProps);
+  const { className, style } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
-    className: clsx('canon-GridItem', utilityClassNames, className),
+    className: clsx('canon-GridItem', className),
     style,
-    children,
+    children: props.children,
   });
 });
 
diff --git a/packages/canon/src/components/Grid/index.ts b/packages/canon/src/components/Grid/index.ts
index b2534c6b77..fd10e7fe68 100644
--- a/packages/canon/src/components/Grid/index.ts
+++ b/packages/canon/src/components/Grid/index.ts
@@ -14,4 +14,6 @@
  * limitations under the License.
  */
 export { Grid } from './Grid';
+export { gridPropDefs, gridItemPropDefs } from './Grid.props';
 export type { GridProps, GridItemProps } from './types';
+export type { GridOwnProps, GridItemOwnProps } from './Grid.props';
diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts
index 4e154f03b7..8d658fff70 100644
--- a/packages/canon/src/components/Grid/types.ts
+++ b/packages/canon/src/components/Grid/types.ts
@@ -14,24 +14,26 @@
  * limitations under the License.
  */
 
-import type { UtilityProps, SpaceProps } from '../../types';
+import type { GapProps } from '../../props/gap-props';
+import type { SpaceProps } from '../../types';
+import type { GridItemOwnProps, GridOwnProps } from './Grid.props';
 
 /** @public */
 export interface GridProps extends SpaceProps {
   children?: React.ReactNode;
   className?: string;
-  columns?: UtilityProps['columns'];
-  gap?: UtilityProps['gap'];
+  columns?: GridOwnProps['columns'];
+  gap?: GapProps['gap'];
   style?: React.CSSProperties;
 }
 
 /** @public */
 export interface GridItemProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
-  colSpan?: UtilityProps['colSpan'];
-  colEnd?: UtilityProps['colEnd'];
-  colStart?: UtilityProps['colStart'];
-  rowSpan?: UtilityProps['rowSpan'];
+  colSpan?: GridItemOwnProps['colSpan'];
+  colEnd?: GridItemOwnProps['colEnd'];
+  colStart?: GridItemOwnProps['colStart'];
+  rowSpan?: GridItemOwnProps['rowSpan'];
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index 6aa6079989..96833d1f64 100644
--- a/packages/canon/src/components/Inline/Inline.stories.tsx
+++ b/packages/canon/src/components/Inline/Inline.stories.tsx
@@ -71,7 +71,6 @@ const FakeBox = ({
   height?: number;
 }) => (
   <Box
-    borderRadius="xs"
     style={{
       background: '#eaf2fd',
       borderRadius: '4px',
diff --git a/packages/canon/src/components/Stack/Stack.props.ts b/packages/canon/src/components/Stack/Stack.props.ts
new file mode 100644
index 0000000000..5cc7300c5d
--- /dev/null
+++ b/packages/canon/src/components/Stack/Stack.props.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from '../../props/prop-def';
+
+const alignValues = ['start', 'center', 'end', 'baseline', 'stretch'] as const;
+
+/** @public */
+const stackPropDefs = {
+  align: {
+    type: 'enum',
+    className: 'cu-align',
+    values: alignValues,
+    responsive: true,
+    default: 'stretch',
+  },
+} satisfies {
+  align: PropDef<(typeof alignValues)[number]>;
+};
+
+/** @public */
+type StackOwnProps = GetPropDefTypes<typeof stackPropDefs>;
+
+export { stackPropDefs };
+export type { StackOwnProps };
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index 4c48cf80cc..0b02849a91 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -29,16 +29,13 @@ const meta = {
     children: {
       control: false,
     },
-    as: {
-      control: false,
-    },
     className: {
       control: 'text',
     },
   },
   args: {
-    align: 'left',
-    gap: 'xs',
+    align: 'stretch',
+    gap: '4',
     children: 'hello world',
   },
 } satisfies Meta<typeof Stack>;
@@ -63,20 +60,14 @@ const DecorativeBox = () => {
 };
 
 export const Default: Story = {
-  render: () => (
-    <div style={{ width: '320px' }}>
-      <Stack>
-        <DecorativeBox />
-        <DecorativeBox />
-        <DecorativeBox />
-      </Stack>
-    </div>
-  ),
+  args: {
+    children: [<DecorativeBox />, <DecorativeBox />, <DecorativeBox />],
+  },
 };
 
 export const AlignLeft: Story = {
   render: () => (
-    <Stack align="left">
+    <Stack align="start">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -96,7 +87,7 @@ export const AlignCenter: Story = {
 
 export const AlignRight: Story = {
   render: () => (
-    <Stack align="right">
+    <Stack align="end">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -106,7 +97,7 @@ export const AlignRight: Story = {
 
 export const ResponsiveAlign: Story = {
   render: () => (
-    <Stack align={{ xs: 'left', md: 'center', lg: 'right' }}>
+    <Stack align={{ xs: 'start', md: 'center', lg: 'end' }}>
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -116,7 +107,7 @@ export const ResponsiveAlign: Story = {
 
 export const ResponsiveGap: Story = {
   render: () => (
-    <Stack gap={{ xs: 'xs', md: 'md', lg: '2xl' }}>
+    <Stack gap={{ xs: '4', md: '8', lg: '12' }}>
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
@@ -126,7 +117,7 @@ export const ResponsiveGap: Story = {
 
 export const LargeGap: Story = {
   render: () => (
-    <Stack gap="xl">
+    <Stack gap="8">
       <DecorativeBox />
       <DecorativeBox />
       <DecorativeBox />
diff --git a/packages/canon/src/components/Stack/Stack.tsx b/packages/canon/src/components/Stack/Stack.tsx
index 4b6a4596bb..9080a28e11 100644
--- a/packages/canon/src/components/Stack/Stack.tsx
+++ b/packages/canon/src/components/Stack/Stack.tsx
@@ -16,51 +16,24 @@
 
 import { createElement, forwardRef } from 'react';
 import { StackProps } from './types';
-import { getClassNames } from '../../utils/getClassNames';
-import type { AlignItems, Breakpoint } from '../../types';
 import clsx from 'clsx';
-
-// Function to map align values
-const mapAlignValue = (value?: StackProps['align']) => {
-  if (typeof value === 'string') {
-    let returnedValue: AlignItems = 'stretch';
-    if (value === 'left') returnedValue = 'stretch';
-    if (value === 'center') returnedValue = 'center';
-    if (value === 'right') returnedValue = 'end';
-    return returnedValue;
-  } else if (typeof value === 'object') {
-    const returnedValue: Partial<Record<Breakpoint, AlignItems>> = {};
-    for (const [key, val] of Object.entries(value)) {
-      returnedValue[key as Breakpoint] = mapAlignValue(val) as AlignItems;
-    }
-    return returnedValue;
-  }
-  return 'stretch';
-};
+import { stackPropDefs } from './Stack.props';
+import { extractProps } from '../../utils/extractProps';
+import { gapPropDefs } from '../../props/gap-props';
 
 /** @public */
 export const Stack = forwardRef<HTMLDivElement, StackProps>((props, ref) => {
-  const {
-    as = 'div',
-    children,
-    align = 'left',
-    gap = 'xs',
-    className,
-    style,
-    ...restProps
-  } = props;
+  const propDefs = {
+    ...gapPropDefs,
+    ...stackPropDefs,
+  };
 
-  // Generate utility class names
-  const utilityClassNames = getClassNames({
-    gap,
-    alignItems: mapAlignValue(align),
-    ...restProps,
-  });
+  const { className, style } = extractProps(props, propDefs);
 
-  return createElement(as, {
+  return createElement('div', {
     ref,
-    className: clsx('canon-Stack', utilityClassNames, className),
+    className: clsx('canon-Stack', className),
     style,
-    children,
+    children: props.children,
   });
 });
diff --git a/packages/canon/src/components/Stack/index.ts b/packages/canon/src/components/Stack/index.ts
index 7abbc3f439..122d0ee57c 100644
--- a/packages/canon/src/components/Stack/index.ts
+++ b/packages/canon/src/components/Stack/index.ts
@@ -14,4 +14,6 @@
  * limitations under the License.
  */
 export { Stack } from './Stack';
+export { stackPropDefs } from './Stack.props';
 export type { StackProps } from './types';
+export type { StackOwnProps } from './Stack.props';
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
index bccdc59a57..267845c48a 100644
--- a/packages/canon/src/components/Stack/types.ts
+++ b/packages/canon/src/components/Stack/types.ts
@@ -14,23 +14,15 @@
  * limitations under the License.
  */
 
-import type {
-  SpaceProps,
-  UtilityProps,
-  AsProps,
-  Breakpoint,
-} from '../../types';
+import type { SpaceProps } from '../../types';
+import { StackOwnProps } from './Stack.props';
+import type { GapProps } from '../../props/gap-props';
 
 /** @public */
 export interface StackProps extends SpaceProps {
   children: React.ReactNode;
-  as?: AsProps;
-  gap?: UtilityProps['gap'];
-  align?:
-    | 'left'
-    | 'center'
-    | 'right'
-    | Partial<Record<Breakpoint, 'left' | 'center' | 'right'>>;
+  gap?: GapProps['gap'];
+  align?: StackOwnProps['align'];
   className?: string;
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
index ad4a8d03b4..aa7136fb94 100644
--- a/packages/canon/src/css/utilities.css
+++ b/packages/canon/src/css/utilities.css
@@ -31,3 +31,42 @@
 
 /* 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';
+
+/* Display */
+@import './utilities/display.css';
+
+/* Width */
+@import './utilities/width.css';
+
+/* Height */
+@import './utilities/height.css';
+
+/* Position */
+@import './utilities/position.css';
+
+/* Grid */
+@import './utilities/grid.css';
+
+/* Gap */
+@import './utilities/gap.css';
+
+/* Flex */
+@import './utilities/flex.css';
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
index 0252fefaf7..5c152fb86f 100644
--- a/packages/canon/src/css/utilities/2xl.css
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-2xl-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-2xl-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-2xl-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-2xl-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-2xl-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-2xl-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-2xl-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-2xl-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-2xl-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-2xl-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-2xl-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-2xl-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-2xl-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-2xl-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-2xl-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-2xl-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-2xl-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-2xl-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-2xl-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-2xl-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-2xl-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-2xl-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-2xl-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-2xl-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-2xl-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-2xl-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-2xl-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-2xl-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-2xl-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-2xl-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-2xl-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-2xl-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-2xl-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-2xl-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-2xl-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-2xl-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-2xl-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-2xl-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-2xl-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-2xl-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-2xl-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-2xl-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-2xl-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-2xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-2xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-2xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-2xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-2xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-2xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-2xl-grid {
-      display: grid;
-    }
-
-    .cu-2xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-2xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-2xl-hidden {
       display: none;
     }
@@ -373,486 +125,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);
     }
@@ -885,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-2xl-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-2xl-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-2xl-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-2xl-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-2xl-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-2xl-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-2xl-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-2xl-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-2xl-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-2xl-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-2xl-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-2xl-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-2xl-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-2xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/display.css b/packages/canon/src/css/utilities/display.css
new file mode 100644
index 0000000000..8c353730ca
--- /dev/null
+++ b/packages/canon/src/css/utilities/display.css
@@ -0,0 +1,110 @@
+.cu-display-none {
+  display: none;
+}
+
+.cu-display-inline {
+  display: inline;
+}
+
+.cu-display-inline-block {
+  display: inline-block;
+}
+
+.cu-display-block {
+  display: block;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-display-none {
+    display: none;
+  }
+
+  .xs\:cu-display-inline {
+    display: inline;
+  }
+
+  .xs\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .xs\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-display-none {
+    display: none;
+  }
+
+  .sm\:cu-display-inline {
+    display: inline;
+  }
+
+  .sm\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .sm\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-display-none {
+    display: none;
+  }
+
+  .md\:cu-display-inline {
+    display: inline;
+  }
+
+  .md\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .md\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-display-none {
+    display: none;
+  }
+
+  .lg\:cu-display-inline {
+    display: inline;
+  }
+
+  .lg\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .lg\:cu-display-block {
+    display: block;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-display-none {
+    display: none;
+  }
+
+  .xl\:cu-display-inline {
+    display: inline;
+  }
+
+  .xl\:cu-display-inline-block {
+    display: inline-block;
+  }
+
+  .xl\:cu-display-block {
+    display: block;
+  }
+}
diff --git a/packages/canon/src/css/utilities/flex.css b/packages/canon/src/css/utilities/flex.css
new file mode 100644
index 0000000000..209334c23d
--- /dev/null
+++ b/packages/canon/src/css/utilities/flex.css
@@ -0,0 +1,86 @@
+.cu-align-start {
+  align-items: start;
+}
+
+.cu-align-center {
+  align-items: center;
+}
+
+.cu-align-end {
+  align-items: end;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-align-start {
+    align-items: start;
+  }
+
+  .xs\:cu-align-center {
+    align-items: center;
+  }
+
+  .xs\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-align-start {
+    align-items: start;
+  }
+
+  .sm\:cu-align-center {
+    align-items: center;
+  }
+
+  .sm\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-align-start {
+    align-items: start;
+  }
+
+  .md\:cu-align-center {
+    align-items: center;
+  }
+
+  .md\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-align-start {
+    align-items: start;
+  }
+
+  .lg\:cu-align-center {
+    align-items: center;
+  }
+
+  .lg\:cu-align-end {
+    align-items: end;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-align-start {
+    align-items: start;
+  }
+
+  .xl\:cu-align-center {
+    align-items: center;
+  }
+
+  .xl\:cu-align-end {
+    align-items: end;
+  }
+}
diff --git a/packages/canon/src/css/utilities/gap.css b/packages/canon/src/css/utilities/gap.css
new file mode 100644
index 0000000000..c86c91b958
--- /dev/null
+++ b/packages/canon/src/css/utilities/gap.css
@@ -0,0 +1,422 @@
+.cu-gap {
+  gap: var(--gap);
+}
+
+.cu-gap-0\.5 {
+  gap: var(--canon-space-0_5);
+}
+
+.cu-gap-1 {
+  gap: var(--canon-space-1);
+}
+
+.cu-gap-1\.5 {
+  gap: var(--canon-space-1_5);
+}
+
+.cu-gap-2 {
+  gap: var(--canon-space-2);
+}
+
+.cu-gap-3 {
+  gap: var(--canon-space-3);
+}
+
+.cu-gap-4 {
+  gap: var(--canon-space-4);
+}
+
+.cu-gap-5 {
+  gap: var(--canon-space-5);
+}
+
+.cu-gap-6 {
+  gap: var(--canon-space-6);
+}
+
+.cu-gap-7 {
+  gap: var(--canon-space-7);
+}
+
+.cu-gap-8 {
+  gap: var(--canon-space-8);
+}
+
+.cu-gap-9 {
+  gap: var(--canon-space-9);
+}
+
+.cu-gap-10 {
+  gap: var(--canon-space-10);
+}
+
+.cu-gap-11 {
+  gap: var(--canon-space-11);
+}
+
+.cu-gap-12 {
+  gap: var(--canon-space-12);
+}
+
+.cu-gap-13 {
+  gap: var(--canon-space-13);
+}
+
+.cu-gap-14 {
+  gap: var(--canon-space-14);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-gap {
+    gap: var(--gap-xs);
+  }
+
+  .xs\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .xs\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .xs\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .xs\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .xs\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .xs\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .xs\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .xs\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .xs\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .xs\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .xs\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .xs\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .xs\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .xs\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .xs\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .xs\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-gap {
+    gap: var(--gap-sm);
+  }
+
+  .sm\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .sm\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .sm\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .sm\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .sm\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .sm\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .sm\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .sm\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .sm\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .sm\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .sm\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .sm\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .sm\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .sm\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .sm\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .sm\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-gap {
+    gap: var(--gap-md);
+  }
+
+  .md\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .md\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .md\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .md\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .md\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .md\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .md\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .md\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .md\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .md\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .md\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .md\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .md\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .md\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .md\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .md\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-gap {
+    gap: var(--gap-lg);
+  }
+
+  .lg\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .lg\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .lg\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .lg\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .lg\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .lg\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .lg\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .lg\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .lg\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .lg\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .lg\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .lg\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .lg\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .lg\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .lg\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .lg\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-gap {
+    gap: var(--gap-xl);
+  }
+
+  .xl\:cu-gap-0\.5 {
+    gap: var(--canon-space-0_5);
+  }
+
+  .xl\:cu-gap-1 {
+    gap: var(--canon-space-1);
+  }
+
+  .xl\:cu-gap-1\.5 {
+    gap: var(--canon-space-1_5);
+  }
+
+  .xl\:cu-gap-2 {
+    gap: var(--canon-space-2);
+  }
+
+  .xl\:cu-gap-3 {
+    gap: var(--canon-space-3);
+  }
+
+  .xl\:cu-gap-4 {
+    gap: var(--canon-space-4);
+  }
+
+  .xl\:cu-gap-5 {
+    gap: var(--canon-space-5);
+  }
+
+  .xl\:cu-gap-6 {
+    gap: var(--canon-space-6);
+  }
+
+  .xl\:cu-gap-7 {
+    gap: var(--canon-space-7);
+  }
+
+  .xl\:cu-gap-8 {
+    gap: var(--canon-space-8);
+  }
+
+  .xl\:cu-gap-9 {
+    gap: var(--canon-space-9);
+  }
+
+  .xl\:cu-gap-10 {
+    gap: var(--canon-space-10);
+  }
+
+  .xl\:cu-gap-11 {
+    gap: var(--canon-space-11);
+  }
+
+  .xl\:cu-gap-12 {
+    gap: var(--canon-space-12);
+  }
+
+  .xl\:cu-gap-13 {
+    gap: var(--canon-space-13);
+  }
+
+  .xl\:cu-gap-14 {
+    gap: var(--canon-space-14);
+  }
+}
diff --git a/packages/canon/src/css/utilities/grid.css b/packages/canon/src/css/utilities/grid.css
new file mode 100644
index 0000000000..a0afe55533
--- /dev/null
+++ b/packages/canon/src/css/utilities/grid.css
@@ -0,0 +1,1292 @@
+.cu-columns-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.cu-columns-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.cu-columns-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.cu-columns-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.cu-columns-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.cu-columns-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.cu-columns-7 {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+.cu-columns-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+}
+
+.cu-columns-9 {
+  grid-template-columns: repeat(9, minmax(0, 1fr));
+}
+
+.cu-columns-10 {
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+}
+
+.cu-columns-11 {
+  grid-template-columns: repeat(11, minmax(0, 1fr));
+}
+
+.cu-columns-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.cu-columns-auto {
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+
+.cu-col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.cu-col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.cu-col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
+.cu-col-span-4 {
+  grid-column: span 4 / span 4;
+}
+
+.cu-col-span-5 {
+  grid-column: span 5 / span 5;
+}
+
+.cu-col-span-6 {
+  grid-column: span 6 / span 6;
+}
+
+.cu-col-span-7 {
+  grid-column: span 7 / span 7;
+}
+
+.cu-col-span-8 {
+  grid-column: span 8 / span 8;
+}
+
+.cu-col-span-9 {
+  grid-column: span 9 / span 9;
+}
+
+.cu-col-span-10 {
+  grid-column: span 10 / span 10;
+}
+
+.cu-col-span-11 {
+  grid-column: span 11 / span 11;
+}
+
+.cu-col-span-12 {
+  grid-column: span 12 / span 12;
+}
+
+.cu-col-span-auto {
+  grid-column: span auto / span auto;
+}
+
+.cu-col-start-1 {
+  grid-column-start: 1;
+}
+
+.cu-col-start-2 {
+  grid-column-start: 2;
+}
+
+.cu-col-start-3 {
+  grid-column-start: 3;
+}
+
+.cu-col-start-4 {
+  grid-column-start: 4;
+}
+
+.cu-col-start-5 {
+  grid-column-start: 5;
+}
+
+.cu-col-start-6 {
+  grid-column-start: 6;
+}
+
+.cu-col-start-7 {
+  grid-column-start: 7;
+}
+
+.cu-col-start-8 {
+  grid-column-start: 8;
+}
+
+.cu-col-start-9 {
+  grid-column-start: 9;
+}
+
+.cu-col-start-10 {
+  grid-column-start: 10;
+}
+
+.cu-col-start-11 {
+  grid-column-start: 11;
+}
+
+.cu-col-start-12 {
+  grid-column-start: 12;
+}
+
+.cu-col-start-13 {
+  grid-column-start: 13;
+}
+
+.cu-col-start-auto {
+  grid-column-start: auto;
+}
+
+.cu-col-end-1 {
+  grid-column-end: 1;
+}
+
+.cu-col-end-2 {
+  grid-column-end: 2;
+}
+
+.cu-col-end-3 {
+  grid-column-end: 3;
+}
+
+.cu-col-end-4 {
+  grid-column-end: 4;
+}
+
+.cu-col-end-5 {
+  grid-column-end: 5;
+}
+
+.cu-col-end-6 {
+  grid-column-end: 6;
+}
+
+.cu-col-end-7 {
+  grid-column-end: 7;
+}
+
+.cu-col-end-8 {
+  grid-column-end: 8;
+}
+
+.cu-col-end-9 {
+  grid-column-end: 9;
+}
+
+.cu-col-end-10 {
+  grid-column-end: 10;
+}
+
+.cu-col-end-11 {
+  grid-column-end: 11;
+}
+
+.cu-col-end-12 {
+  grid-column-end: 12;
+}
+
+.cu-col-end-13 {
+  grid-column-end: 13;
+}
+
+.cu-col-end-auto {
+  grid-column-end: auto;
+}
+
+.cu-row-span-1 {
+  grid-row: span 1 / span 1;
+}
+
+.cu-row-span-2 {
+  grid-row: span 2 / span 2;
+}
+
+.cu-row-span-3 {
+  grid-row: span 3 / span 3;
+}
+
+.cu-row-span-4 {
+  grid-row: span 4 / span 4;
+}
+
+.cu-row-span-5 {
+  grid-row: span 5 / span 5;
+}
+
+.cu-row-span-6 {
+  grid-row: span 6 / span 6;
+}
+
+.cu-row-span-7 {
+  grid-row: span 7 / span 7;
+}
+
+.cu-row-span-8 {
+  grid-row: span 8 / span 8;
+}
+
+.cu-row-span-9 {
+  grid-row: span 9 / span 9;
+}
+
+.cu-row-span-10 {
+  grid-row: span 10 / span 10;
+}
+
+.cu-row-span-11 {
+  grid-row: span 11 / span 11;
+}
+
+.cu-row-span-12 {
+  grid-row: span 12 / span 12;
+}
+
+.cu-row-span-auto {
+  grid-row: span auto / span auto;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xs\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .xs\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .xs\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .xs\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .xs\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .xs\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .xs\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .xs\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .xs\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .xs\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .xs\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .xs\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .xs\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .xs\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .xs\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .xs\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .xs\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .xs\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .xs\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .xs\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .xs\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .xs\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .xs\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .xs\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .xs\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .xs\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .xs\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .xs\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .xs\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .xs\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .xs\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .xs\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .xs\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .xs\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .xs\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .xs\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .xs\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .xs\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .xs\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .xs\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .xs\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .xs\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .xs\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .xs\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .xs\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .xs\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .xs\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .xs\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .xs\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .xs\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .xs\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .xs\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .xs\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .xs\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .xs\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .sm\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .sm\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .sm\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .sm\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .sm\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .sm\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .sm\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .sm\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .sm\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .sm\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .sm\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .sm\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .sm\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .sm\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .sm\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .sm\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .sm\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .sm\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .sm\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .sm\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .sm\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .sm\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .sm\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .sm\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .sm\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .sm\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .sm\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .sm\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .sm\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .sm\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .sm\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .sm\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .sm\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .sm\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .sm\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .sm\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .sm\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .sm\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .sm\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .sm\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .sm\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .sm\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .sm\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .sm\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .sm\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .sm\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .sm\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .sm\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .sm\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .sm\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .sm\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .sm\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .sm\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .sm\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .sm\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .md\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .md\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .md\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .md\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .md\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .md\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .md\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .md\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .md\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .md\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .md\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .md\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .md\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .md\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .md\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .md\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .md\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .md\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .md\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .md\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .md\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .md\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .md\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .md\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .md\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .md\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .md\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .md\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .md\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .md\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .md\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .md\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .md\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .md\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .md\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .md\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .md\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .md\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .md\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .md\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .md\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .md\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .md\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .md\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .md\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .md\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .md\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .md\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .md\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .md\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .md\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .md\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .md\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .md\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .md\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .md\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .md\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .md\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .md\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .md\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .md\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .md\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .md\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .md\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .md\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .md\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .lg\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .lg\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .lg\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .lg\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .lg\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .lg\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .lg\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .lg\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .lg\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .lg\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .lg\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .lg\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .lg\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .lg\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .lg\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .lg\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .lg\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .lg\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .lg\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .lg\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .lg\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .lg\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .lg\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .lg\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .lg\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .lg\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .lg\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .lg\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .lg\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .lg\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .lg\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .lg\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .lg\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .lg\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .lg\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .lg\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .lg\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .lg\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .lg\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .lg\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .lg\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .lg\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .lg\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .lg\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .lg\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .lg\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .lg\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .lg\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .lg\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .lg\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .lg\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .lg\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .lg\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .lg\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .lg\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-columns-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-9 {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-10 {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-11 {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .xl\:cu-columns-auto {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  }
+  .xl\:cu-col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .xl\:cu-col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .xl\:cu-col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .xl\:cu-col-span-4 {
+    grid-column: span 4 / span 4;
+  }
+  .xl\:cu-col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .xl\:cu-col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .xl\:cu-col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .xl\:cu-col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .xl\:cu-col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .xl\:cu-col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .xl\:cu-col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .xl\:cu-col-span-12 {
+    grid-column: span 12 / span 12;
+  }
+  .xl\:cu-col-span-auto {
+    grid-column: span auto / span auto;
+  }
+  .xl\:cu-col-start-1 {
+    grid-column-start: 1;
+  }
+  .xl\:cu-col-start-2 {
+    grid-column-start: 2;
+  }
+  .xl\:cu-col-start-3 {
+    grid-column-start: 3;
+  }
+  .xl\:cu-col-start-4 {
+    grid-column-start: 4;
+  }
+  .xl\:cu-col-start-5 {
+    grid-column-start: 5;
+  }
+  .xl\:cu-col-start-6 {
+    grid-column-start: 6;
+  }
+  .xl\:cu-col-start-7 {
+    grid-column-start: 7;
+  }
+  .xl\:cu-col-start-8 {
+    grid-column-start: 8;
+  }
+  .xl\:cu-col-start-9 {
+    grid-column-start: 9;
+  }
+  .xl\:cu-col-start-10 {
+    grid-column-start: 10;
+  }
+  .xl\:cu-col-start-11 {
+    grid-column-start: 11;
+  }
+  .xl\:cu-col-start-12 {
+    grid-column-start: 12;
+  }
+  .xl\:cu-col-start-13 {
+    grid-column-start: 13;
+  }
+  .xl\:cu-col-start-auto {
+    grid-column-start: auto;
+  }
+  .xl\:cu-col-end-1 {
+    grid-column-end: 1;
+  }
+  .xl\:cu-col-end-2 {
+    grid-column-end: 2;
+  }
+  .xl\:cu-col-end-3 {
+    grid-column-end: 3;
+  }
+  .xl\:cu-col-end-4 {
+    grid-column-end: 4;
+  }
+  .xl\:cu-col-end-5 {
+    grid-column-end: 5;
+  }
+  .xl\:cu-col-end-6 {
+    grid-column-end: 6;
+  }
+  .xl\:cu-col-end-7 {
+    grid-column-end: 7;
+  }
+  .xl\:cu-col-end-8 {
+    grid-column-end: 8;
+  }
+  .xl\:cu-col-end-9 {
+    grid-column-end: 9;
+  }
+  .xl\:cu-col-end-10 {
+    grid-column-end: 10;
+  }
+  .xl\:cu-col-end-11 {
+    grid-column-end: 11;
+  }
+  .xl\:cu-col-end-12 {
+    grid-column-end: 12;
+  }
+  .xl\:cu-col-end-13 {
+    grid-column-end: 13;
+  }
+  .xl\:cu-col-end-auto {
+    grid-column-end: auto;
+  }
+  .xl\:cu-row-span-1 {
+    grid-row: span 1 / span 1;
+  }
+  .xl\:cu-row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .xl\:cu-row-span-3 {
+    grid-row: span 3 / span 3;
+  }
+  .xl\:cu-row-span-4 {
+    grid-row: span 4 / span 4;
+  }
+  .xl\:cu-row-span-5 {
+    grid-row: span 5 / span 5;
+  }
+  .xl\:cu-row-span-6 {
+    grid-row: span 6 / span 6;
+  }
+  .xl\:cu-row-span-7 {
+    grid-row: span 7 / span 7;
+  }
+  .xl\:cu-row-span-8 {
+    grid-row: span 8 / span 8;
+  }
+  .xl\:cu-row-span-9 {
+    grid-row: span 9 / span 9;
+  }
+  .xl\:cu-row-span-10 {
+    grid-row: span 10 / span 10;
+  }
+  .xl\:cu-row-span-11 {
+    grid-row: span 11 / span 11;
+  }
+  .xl\:cu-row-span-12 {
+    grid-row: span 12 / span 12;
+  }
+  .xl\:cu-row-span-auto {
+    grid-row: span auto / span auto;
+  }
+}
diff --git a/packages/canon/src/css/utilities/height.css b/packages/canon/src/css/utilities/height.css
new file mode 100644
index 0000000000..130dfc5020
--- /dev/null
+++ b/packages/canon/src/css/utilities/height.css
@@ -0,0 +1,86 @@
+.cu-h {
+  height: var(--height);
+}
+
+.cu-min-h {
+  min-height: var(--min-height);
+}
+
+.cu-max-h {
+  max-height: var(--max-height);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-h {
+    height: var(--height);
+  }
+
+  .xs\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .xs\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-h {
+    height: var(--height);
+  }
+
+  .sm\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .sm\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-h {
+    height: var(--height);
+  }
+
+  .md\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .md\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-h {
+    height: var(--height);
+  }
+
+  .lg\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .lg\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-h {
+    height: var(--height);
+  }
+
+  .xl\:cu-min-h {
+    min-height: var(--min-height);
+  }
+
+  .xl\:cu-max-h {
+    max-height: var(--max-height);
+  }
+}
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
index a69dae1df3..179b4a83b2 100644
--- a/packages/canon/src/css/utilities/lg.css
+++ b/packages/canon/src/css/utilities/lg.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-lg-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-lg-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-lg-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-lg-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-lg-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-lg-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-lg-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-lg-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-lg-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-lg-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-lg-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-lg-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-lg-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-lg-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-lg-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-lg-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-lg-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-lg-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-lg-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-lg-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-lg-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-lg-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-lg-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-lg-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-lg-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-lg-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-lg-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-lg-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-lg-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-lg-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-lg-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-lg-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-lg-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-lg-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-lg-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-lg-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-lg-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-lg-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-lg-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-lg-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-lg-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-lg-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-lg-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-lg-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-lg-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-lg-gap-none {
-      gap: 0;
-    }
-
-    .cu-lg-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-lg-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-lg-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-lg-grid {
-      display: grid;
-    }
-
-    .cu-lg-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-lg-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-lg-hidden {
       display: none;
     }
@@ -373,486 +125,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);
     }
@@ -885,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-lg-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-lg-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-lg-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-lg-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-lg-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-lg-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-lg-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-lg-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-lg-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-lg-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-lg-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-lg-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-lg-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-lg-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/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..2cf50dc137 100644
--- a/packages/canon/src/css/utilities/md.css
+++ b/packages/canon/src/css/utilities/md.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-md-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-md-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-md-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-md-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-md-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-md-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-md-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-md-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-md-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-md-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-md-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-md-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-md-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-md-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-md-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-md-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-md-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-md-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-md-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-md-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-md-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-md-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-md-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-md-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-md-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-md-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-md-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-md-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-md-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-md-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-md-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-md-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-md-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-md-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-md-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-md-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-md-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-md-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-md-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-md-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-md-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-md-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-md-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-md-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-md-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-md-gap-none {
-      gap: 0;
-    }
-
-    .cu-md-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-md-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-md-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-md-grid {
-      display: grid;
-    }
-
-    .cu-md-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-md-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-md-hidden {
       display: none;
     }
@@ -373,486 +125,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);
     }
@@ -885,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-md-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-md-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-md-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-md-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-md-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-md-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-md-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-md-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-md-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-md-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-md-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-md-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-md-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-md-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/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/position.css b/packages/canon/src/css/utilities/position.css
new file mode 100644
index 0000000000..764ada623b
--- /dev/null
+++ b/packages/canon/src/css/utilities/position.css
@@ -0,0 +1,134 @@
+.cu-position-absolute {
+  position: absolute;
+}
+
+.cu-position-fixed {
+  position: fixed;
+}
+
+.cu-position-sticky {
+  position: sticky;
+}
+
+.cu-position-relative {
+  position: relative;
+}
+
+.cu-position-static {
+  position: static;
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .xs\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .xs\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .xs\:cu-position-relative {
+    position: relative;
+  }
+
+  .xs\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .sm\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .sm\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .sm\:cu-position-relative {
+    position: relative;
+  }
+
+  .sm\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .md\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .md\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .md\:cu-position-relative {
+    position: relative;
+  }
+
+  .md\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .lg\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .lg\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .lg\:cu-position-relative {
+    position: relative;
+  }
+
+  .lg\:cu-position-static {
+    position: static;
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-position-absolute {
+    position: absolute;
+  }
+
+  .xl\:cu-position-fixed {
+    position: fixed;
+  }
+
+  .xl\:cu-position-sticky {
+    position: sticky;
+  }
+
+  .xl\:cu-position-relative {
+    position: relative;
+  }
+
+  .xl\:cu-position-static {
+    position: static;
+  }
+}
diff --git a/packages/canon/src/css/utilities/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..2a216a950e 100644
--- a/packages/canon/src/css/utilities/sm.css
+++ b/packages/canon/src/css/utilities/sm.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-sm-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-sm-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-sm-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-sm-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-sm-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-sm-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-sm-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-sm-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-sm-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-sm-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-sm-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-sm-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-sm-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-sm-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-sm-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-sm-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-sm-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-sm-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-sm-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-sm-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-sm-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-sm-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-sm-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-sm-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-sm-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-sm-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-sm-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-sm-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-sm-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-sm-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-sm-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-sm-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-sm-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-sm-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-sm-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-sm-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-sm-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-sm-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-sm-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-sm-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-sm-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-sm-flex {
       display: flex;
     }
@@ -265,62 +101,6 @@
       gap: var(--canon-space-3);
     }
 
-    .cu-sm-grid {
-      display: grid;
-    }
-
-    .cu-sm-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-sm-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-sm-hidden {
       display: none;
     }
@@ -373,486 +153,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);
     }
@@ -885,58 +185,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-sm-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-sm-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-sm-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-sm-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-sm-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-sm-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-sm-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-sm-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-sm-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-sm-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-sm-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-sm-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-sm-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-sm-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/width.css b/packages/canon/src/css/utilities/width.css
new file mode 100644
index 0000000000..f4f10c9416
--- /dev/null
+++ b/packages/canon/src/css/utilities/width.css
@@ -0,0 +1,86 @@
+.cu-w {
+  width: var(--width);
+}
+
+.cu-min-w {
+  min-width: var(--min-width);
+}
+
+.cu-max-w {
+  max-width: var(--max-width);
+}
+
+/* Breakpoint xs */
+@media (min-width: 640px) {
+  .xs\:cu-w {
+    width: var(--width);
+  }
+
+  .xs\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .xs\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint sm */
+@media (min-width: 768px) {
+  .sm\:cu-w {
+    width: var(--width);
+  }
+
+  .sm\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .sm\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint md */
+@media (min-width: 1024px) {
+  .md\:cu-w {
+    width: var(--width);
+  }
+
+  .md\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .md\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint lg */
+@media (min-width: 1280px) {
+  .lg\:cu-w {
+    width: var(--width);
+  }
+
+  .lg\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .lg\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
+
+/* Breakpoint xl */
+@media (min-width: 1536px) {
+  .xl\:cu-w {
+    width: var(--width);
+  }
+
+  .xl\:cu-min-w {
+    min-width: var(--min-width);
+  }
+
+  .xl\:cu-max-w {
+    max-width: var(--max-width);
+  }
+}
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
index 218bd37217..0efa83e034 100644
--- a/packages/canon/src/css/utilities/xl.css
+++ b/packages/canon/src/css/utilities/xl.css
@@ -49,170 +49,6 @@
       border-style: solid;
     }
 
-    .cu-xl-col-end-1 {
-      grid-column-end: 1;
-    }
-
-    .cu-xl-col-end-10 {
-      grid-column-end: 10;
-    }
-
-    .cu-xl-col-end-11 {
-      grid-column-end: 11;
-    }
-
-    .cu-xl-col-end-12 {
-      grid-column-end: 12;
-    }
-
-    .cu-xl-col-end-13 {
-      grid-column-end: 13;
-    }
-
-    .cu-xl-col-end-2 {
-      grid-column-end: 2;
-    }
-
-    .cu-xl-col-end-3 {
-      grid-column-end: 3;
-    }
-
-    .cu-xl-col-end-4 {
-      grid-column-end: 4;
-    }
-
-    .cu-xl-col-end-5 {
-      grid-column-end: 5;
-    }
-
-    .cu-xl-col-end-6 {
-      grid-column-end: 6;
-    }
-
-    .cu-xl-col-end-7 {
-      grid-column-end: 7;
-    }
-
-    .cu-xl-col-end-8 {
-      grid-column-end: 8;
-    }
-
-    .cu-xl-col-end-9 {
-      grid-column-end: 9;
-    }
-
-    .cu-xl-col-end-auto {
-      grid-column-end: auto;
-    }
-
-    .cu-xl-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-
-    .cu-xl-col-span-10 {
-      grid-column: span 10 / span 10;
-    }
-
-    .cu-xl-col-span-11 {
-      grid-column: span 11 / span 11;
-    }
-
-    .cu-xl-col-span-12 {
-      grid-column: span 12 / span 12;
-    }
-
-    .cu-xl-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-
-    .cu-xl-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-
-    .cu-xl-col-span-4 {
-      grid-column: span 4 / span 4;
-    }
-
-    .cu-xl-col-span-5 {
-      grid-column: span 5 / span 5;
-    }
-
-    .cu-xl-col-span-6 {
-      grid-column: span 6 / span 6;
-    }
-
-    .cu-xl-col-span-7 {
-      grid-column: span 7 / span 7;
-    }
-
-    .cu-xl-col-span-8 {
-      grid-column: span 8 / span 8;
-    }
-
-    .cu-xl-col-span-9 {
-      grid-column: span 9 / span 9;
-    }
-
-    .cu-xl-col-span-auto {
-      grid-column: span auto / span auto;
-    }
-
-    .cu-xl-col-start-1 {
-      grid-column-start: 1;
-    }
-
-    .cu-xl-col-start-10 {
-      grid-column-start: 10;
-    }
-
-    .cu-xl-col-start-11 {
-      grid-column-start: 11;
-    }
-
-    .cu-xl-col-start-12 {
-      grid-column-start: 12;
-    }
-
-    .cu-xl-col-start-13 {
-      grid-column-start: 13;
-    }
-
-    .cu-xl-col-start-2 {
-      grid-column-start: 2;
-    }
-
-    .cu-xl-col-start-3 {
-      grid-column-start: 3;
-    }
-
-    .cu-xl-col-start-4 {
-      grid-column-start: 4;
-    }
-
-    .cu-xl-col-start-5 {
-      grid-column-start: 5;
-    }
-
-    .cu-xl-col-start-6 {
-      grid-column-start: 6;
-    }
-
-    .cu-xl-col-start-7 {
-      grid-column-start: 7;
-    }
-
-    .cu-xl-col-start-8 {
-      grid-column-start: 8;
-    }
-
-    .cu-xl-col-start-9 {
-      grid-column-start: 9;
-    }
-
-    .cu-xl-col-start-auto {
-      grid-column-start: auto;
-    }
-
     .cu-xl-flex {
       display: flex;
     }
@@ -237,90 +73,6 @@
       flex-wrap: wrap-reverse;
     }
 
-    .cu-xl-gap-2xl {
-      gap: var(--canon-space-12);
-    }
-
-    .cu-xl-gap-lg {
-      gap: var(--canon-space-8);
-    }
-
-    .cu-xl-gap-md {
-      gap: var(--canon-space-6);
-    }
-
-    .cu-xl-gap-none {
-      gap: 0;
-    }
-
-    .cu-xl-gap-sm {
-      gap: var(--canon-space-4);
-    }
-
-    .cu-xl-gap-xl {
-      gap: var(--canon-space-10);
-    }
-
-    .cu-xl-gap-xs {
-      gap: var(--canon-space-3);
-    }
-
-    .cu-xl-grid {
-      display: grid;
-    }
-
-    .cu-xl-grid-cols-1 {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-10 {
-      grid-template-columns: repeat(10, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-11 {
-      grid-template-columns: repeat(11, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-12 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-6 {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-7 {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-8 {
-      grid-template-columns: repeat(8, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-9 {
-      grid-template-columns: repeat(9, minmax(0, 1fr));
-    }
-
-    .cu-xl-grid-cols-auto {
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    }
-
     .cu-xl-hidden {
       display: none;
     }
@@ -373,486 +125,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);
     }
@@ -885,58 +157,6 @@
       border-radius: var(--canon-radius-2);
     }
 
-    .cu-xl-row-span-1 {
-      grid-row: span 1 / span 1;
-    }
-
-    .cu-xl-row-span-10 {
-      grid-row: span 10 / span 10;
-    }
-
-    .cu-xl-row-span-11 {
-      grid-row: span 11 / span 11;
-    }
-
-    .cu-xl-row-span-12 {
-      grid-row: span 12 / span 12;
-    }
-
-    .cu-xl-row-span-2 {
-      grid-row: span 2 / span 2;
-    }
-
-    .cu-xl-row-span-3 {
-      grid-row: span 3 / span 3;
-    }
-
-    .cu-xl-row-span-4 {
-      grid-row: span 4 / span 4;
-    }
-
-    .cu-xl-row-span-5 {
-      grid-row: span 5 / span 5;
-    }
-
-    .cu-xl-row-span-6 {
-      grid-row: span 6 / span 6;
-    }
-
-    .cu-xl-row-span-7 {
-      grid-row: span 7 / span 7;
-    }
-
-    .cu-xl-row-span-8 {
-      grid-row: span 8 / span 8;
-    }
-
-    .cu-xl-row-span-9 {
-      grid-row: span 9 / span 9;
-    }
-
-    .cu-xl-row-span-auto {
-      grid-row: span auto / span auto;
-    }
-
     .cu-xl-wrap-reverse {
       flex-wrap: wrap-reverse;
     }
diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css
index fa64c1d624..1d8dae99cd 100644
--- a/packages/canon/src/css/utilities/xs.css
+++ b/packages/canon/src/css/utilities/xs.css
@@ -48,170 +48,6 @@
     border-style: solid;
   }
 
-  .cu-col-end-1 {
-    grid-column-end: 1;
-  }
-
-  .cu-col-end-10 {
-    grid-column-end: 10;
-  }
-
-  .cu-col-end-11 {
-    grid-column-end: 11;
-  }
-
-  .cu-col-end-12 {
-    grid-column-end: 12;
-  }
-
-  .cu-col-end-13 {
-    grid-column-end: 13;
-  }
-
-  .cu-col-end-2 {
-    grid-column-end: 2;
-  }
-
-  .cu-col-end-3 {
-    grid-column-end: 3;
-  }
-
-  .cu-col-end-4 {
-    grid-column-end: 4;
-  }
-
-  .cu-col-end-5 {
-    grid-column-end: 5;
-  }
-
-  .cu-col-end-6 {
-    grid-column-end: 6;
-  }
-
-  .cu-col-end-7 {
-    grid-column-end: 7;
-  }
-
-  .cu-col-end-8 {
-    grid-column-end: 8;
-  }
-
-  .cu-col-end-9 {
-    grid-column-end: 9;
-  }
-
-  .cu-col-end-auto {
-    grid-column-end: auto;
-  }
-
-  .cu-col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
-  .cu-col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-
-  .cu-col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-
-  .cu-col-span-12 {
-    grid-column: span 12 / span 12;
-  }
-
-  .cu-col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .cu-col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-
-  .cu-col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-
-  .cu-col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-
-  .cu-col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-
-  .cu-col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-
-  .cu-col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
-  .cu-col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-
-  .cu-col-span-auto {
-    grid-column: span auto / span auto;
-  }
-
-  .cu-col-start-1 {
-    grid-column-start: 1;
-  }
-
-  .cu-col-start-10 {
-    grid-column-start: 10;
-  }
-
-  .cu-col-start-11 {
-    grid-column-start: 11;
-  }
-
-  .cu-col-start-12 {
-    grid-column-start: 12;
-  }
-
-  .cu-col-start-13 {
-    grid-column-start: 13;
-  }
-
-  .cu-col-start-2 {
-    grid-column-start: 2;
-  }
-
-  .cu-col-start-3 {
-    grid-column-start: 3;
-  }
-
-  .cu-col-start-4 {
-    grid-column-start: 4;
-  }
-
-  .cu-col-start-5 {
-    grid-column-start: 5;
-  }
-
-  .cu-col-start-6 {
-    grid-column-start: 6;
-  }
-
-  .cu-col-start-7 {
-    grid-column-start: 7;
-  }
-
-  .cu-col-start-8 {
-    grid-column-start: 8;
-  }
-
-  .cu-col-start-9 {
-    grid-column-start: 9;
-  }
-
-  .cu-col-start-auto {
-    grid-column-start: auto;
-  }
-
   .cu-flex {
     display: flex;
   }
@@ -236,90 +72,6 @@
     flex-wrap: wrap-reverse;
   }
 
-  .cu-gap-2xl {
-    gap: var(--canon-space-12);
-  }
-
-  .cu-gap-lg {
-    gap: var(--canon-space-8);
-  }
-
-  .cu-gap-md {
-    gap: var(--canon-space-6);
-  }
-
-  .cu-gap-none {
-    gap: 0;
-  }
-
-  .cu-gap-sm {
-    gap: var(--canon-space-4);
-  }
-
-  .cu-gap-xl {
-    gap: var(--canon-space-10);
-  }
-
-  .cu-gap-xs {
-    gap: var(--canon-space-3);
-  }
-
-  .cu-grid {
-    display: grid;
-  }
-
-  .cu-grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-
-  .cu-grid-cols-auto {
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-  }
-
   .cu-hidden {
     display: none;
   }
@@ -372,486 +124,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);
   }
@@ -884,58 +156,6 @@
     border-radius: var(--canon-radius-2);
   }
 
-  .cu-row-span-1 {
-    grid-row: span 1 / span 1;
-  }
-
-  .cu-row-span-10 {
-    grid-row: span 10 / span 10;
-  }
-
-  .cu-row-span-11 {
-    grid-row: span 11 / span 11;
-  }
-
-  .cu-row-span-12 {
-    grid-row: span 12 / span 12;
-  }
-
-  .cu-row-span-2 {
-    grid-row: span 2 / span 2;
-  }
-
-  .cu-row-span-3 {
-    grid-row: span 3 / span 3;
-  }
-
-  .cu-row-span-4 {
-    grid-row: span 4 / span 4;
-  }
-
-  .cu-row-span-5 {
-    grid-row: span 5 / span 5;
-  }
-
-  .cu-row-span-6 {
-    grid-row: span 6 / span 6;
-  }
-
-  .cu-row-span-7 {
-    grid-row: span 7 / span 7;
-  }
-
-  .cu-row-span-8 {
-    grid-row: span 8 / span 8;
-  }
-
-  .cu-row-span-9 {
-    grid-row: span 9 / span 9;
-  }
-
-  .cu-row-span-auto {
-    grid-row: span auto / span auto;
-  }
-
   .cu-wrap-reverse {
     flex-wrap: wrap-reverse;
   }
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index 987aa959de..bfe796ff47 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -39,5 +39,7 @@ export * from './components/Checkbox';
 export * from './components/Table';
 export * from './components/Input';
 export * from './components/Field';
+
 // Types
 export * from './types';
+export * from './props';
diff --git a/packages/canon/src/props/display.props.ts b/packages/canon/src/props/display.props.ts
new file mode 100644
index 0000000000..a71557f05b
--- /dev/null
+++ b/packages/canon/src/props/display.props.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { PropDef, GetPropDefTypes } from './prop-def';
+
+const displayValues = ['none', 'inline', 'inline-block', 'block'] as const;
+
+/** @public */
+const displayPropDefs = {
+  display: {
+    type: 'enum',
+    className: 'cu-display',
+    values: displayValues,
+    responsive: true,
+  },
+} satisfies {
+  display: PropDef<(typeof displayValues)[number]>;
+};
+
+/** @public */
+type DisplayProps = GetPropDefTypes<typeof displayPropDefs>;
+
+export { displayPropDefs };
+export type { DisplayProps };
diff --git a/packages/canon/src/props/gap-props.ts b/packages/canon/src/props/gap-props.ts
new file mode 100644
index 0000000000..68a03a9f51
--- /dev/null
+++ b/packages/canon/src/props/gap-props.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { PropDef } from './prop-def';
+import { GetPropDefTypes } from './prop-def';
+import { spacingValues } from './spacing.props';
+
+/** @public */
+const gapPropDefs = {
+  gap: {
+    type: 'enum | string',
+    className: 'cu-gap',
+    customProperties: ['--gap'],
+    values: spacingValues,
+    responsive: true,
+    default: '4',
+  },
+} satisfies {
+  gap: PropDef<(typeof spacingValues)[number]>;
+};
+
+/** @public */
+type GapProps = GetPropDefTypes<typeof gapPropDefs>;
+
+export { gapPropDefs };
+export type { GapProps };
diff --git a/packages/canon/src/props/height.props.ts b/packages/canon/src/props/height.props.ts
new file mode 100644
index 0000000000..b42f965e54
--- /dev/null
+++ b/packages/canon/src/props/height.props.ts
@@ -0,0 +1,48 @@
+/*
+ * 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';
+
+/** @public */
+const heightPropDefs = {
+  height: {
+    type: 'string',
+    className: 'cu-h',
+    customProperties: ['--height'],
+    responsive: true,
+  },
+  minHeight: {
+    type: 'string',
+    className: 'cu-min-h',
+    customProperties: ['--min-height'],
+    responsive: true,
+  },
+  maxHeight: {
+    type: 'string',
+    className: 'cu-max-h',
+    customProperties: ['--max-height'],
+    responsive: true,
+  },
+} satisfies {
+  height: PropDef<string>;
+  minHeight: PropDef<string>;
+  maxHeight: PropDef<string>;
+};
+
+/** @public */
+type HeightProps = GetPropDefTypes<typeof heightPropDefs>;
+
+export { heightPropDefs };
+export type { HeightProps };
diff --git a/packages/canon/src/props/index.ts b/packages/canon/src/props/index.ts
new file mode 100644
index 0000000000..fc92cea12d
--- /dev/null
+++ b/packages/canon/src/props/index.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type { DisplayProps, displayPropDefs } from './display.props';
+export type { HeightProps, heightPropDefs } from './height.props';
+export type { MarginProps, marginPropDefs } from './margin.props';
+export type { PaddingProps, paddingPropDefs } from './padding.props';
+export type { PositionProps, positionPropDefs } from './position.props';
+export type { WidthProps, widthPropDefs } from './width.props';
+export type { GapProps, gapPropDefs } from './gap-props';
+export * from './prop-def';
diff --git a/packages/canon/src/props/margin.props.ts b/packages/canon/src/props/margin.props.ts
new file mode 100644
index 0000000000..94ec01cfc8
--- /dev/null
+++ b/packages/canon/src/props/margin.props.ts
@@ -0,0 +1,84 @@
+/*
+ * 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';
+
+/** @public */
+const marginPropDefs = (spacingValues: string[]) =>
+  ({
+    m: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-m',
+      customProperties: ['--m'],
+      responsive: true,
+    },
+    mx: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mx',
+      customProperties: ['--ml', '--mr'],
+      responsive: true,
+    },
+    my: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-my',
+      customProperties: ['--mt', '--mb'],
+      responsive: true,
+    },
+    mt: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mt',
+      customProperties: ['--mt'],
+      responsive: true,
+    },
+    mr: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mr',
+      customProperties: ['--mr'],
+      responsive: true,
+    },
+    mb: {
+      type: 'enum | string',
+      values: spacingValues,
+      className: 'cu-mb',
+      customProperties: ['--mb'],
+      responsive: true,
+    },
+    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]>;
+  });
+
+/** @public */
+type MarginProps = GetPropDefTypes<typeof marginPropDefs>;
+
+export { marginPropDefs };
+export type { MarginProps };
diff --git a/packages/canon/src/props/padding.props.ts b/packages/canon/src/props/padding.props.ts
new file mode 100644
index 0000000000..4ae686adb9
--- /dev/null
+++ b/packages/canon/src/props/padding.props.ts
@@ -0,0 +1,85 @@
+/*
+ * 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';
+
+/** @public */
+const paddingPropDefs = (spacingValues: string[]) =>
+  ({
+    p: {
+      type: 'enum | string',
+      className: 'cu-p',
+      customProperties: ['--p'],
+      values: spacingValues,
+      responsive: true,
+    },
+    px: {
+      type: 'enum | string',
+      className: 'cu-px',
+      customProperties: ['--pl', '--pr'],
+      values: spacingValues,
+      responsive: true,
+    },
+    py: {
+      type: 'enum | string',
+      className: 'cu-py',
+      customProperties: ['--pt', '--pb'],
+      values: spacingValues,
+      responsive: true,
+    },
+    pt: {
+      type: 'enum | string',
+      className: 'cu-pt',
+      customProperties: ['--pt'],
+      values: spacingValues,
+      responsive: true,
+    },
+    pr: {
+      type: 'enum | string',
+      className: 'cu-pr',
+      customProperties: ['--pr'],
+      values: spacingValues,
+      responsive: true,
+    },
+    pb: {
+      type: 'enum | string',
+      className: 'cu-pb',
+      customProperties: ['--pb'],
+      values: spacingValues,
+      responsive: true,
+    },
+    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]>;
+  });
+
+/** @public */
+type PaddingProps = GetPropDefTypes<typeof paddingPropDefs>;
+
+export { paddingPropDefs };
+export type { PaddingProps };
diff --git a/packages/canon/src/props/position.props.ts b/packages/canon/src/props/position.props.ts
new file mode 100644
index 0000000000..048e3b13ce
--- /dev/null
+++ b/packages/canon/src/props/position.props.ts
@@ -0,0 +1,44 @@
+/*
+ * 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';
+
+/** @public */
+const positionValues = [
+  'static',
+  'relative',
+  'absolute',
+  'fixed',
+  'sticky',
+] as const;
+
+/** @public */
+const positionPropDefs = {
+  position: {
+    type: 'enum',
+    className: 'cu-position',
+    values: positionValues,
+    responsive: true,
+  },
+} satisfies {
+  position: PropDef<(typeof positionValues)[number]>;
+};
+
+// Use all of the imported prop defs to ensure that JSDoc works
+/** @public */
+type PositionProps = GetPropDefTypes<typeof positionPropDefs>;
+
+export { positionPropDefs };
+export type { PositionProps };
diff --git a/packages/canon/src/props/prop-def.ts b/packages/canon/src/props/prop-def.ts
new file mode 100644
index 0000000000..eb721aa115
--- /dev/null
+++ b/packages/canon/src/props/prop-def.ts
@@ -0,0 +1,134 @@
+/*
+ * 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';
+import type { Breakpoint, Responsive } from '../types';
+
+/** @public */
+const breakpoints = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'] as Breakpoint[];
+
+/** @public */
+export type BooleanPropDef = {
+  type: 'boolean';
+  default?: boolean;
+  required?: boolean;
+  className?: string;
+};
+
+/** @public */
+export type StringPropDef = {
+  type: 'string';
+  default?: string;
+  required?: boolean;
+};
+
+/** @public */
+export type ReactNodePropDef = {
+  type: 'ReactNode';
+  default?: React.ReactNode;
+  required?: boolean;
+};
+
+/** @public */
+export type EnumPropDef<T> = {
+  type: 'enum';
+  values: readonly T[];
+  default?: T;
+  required?: boolean;
+};
+
+/** @public */
+export type EnumOrStringPropDef<T> = {
+  type: 'enum | string';
+  values: readonly T[];
+  default?: T | string;
+  required?: boolean;
+};
+
+/** @public */
+export type NonStylingPropDef = {
+  className?: never;
+  customProperties?: never;
+  parseValue?: never;
+};
+
+/** @public */
+export type StylingPropDef = {
+  className: string;
+  parseValue?: (value: string) => string | undefined;
+};
+
+/** @public */
+export type ArbitraryStylingPropDef = {
+  className: string;
+  customProperties: `--${string}`[];
+  parseValue?: (value: string) => string | undefined;
+};
+
+/** @public */
+export type RegularPropDef<T> =
+  | ReactNodePropDef
+  | BooleanPropDef
+  | (StringPropDef & ArbitraryStylingPropDef)
+  | (StringPropDef & NonStylingPropDef)
+  | (EnumPropDef<T> & StylingPropDef)
+  | (EnumPropDef<T> & NonStylingPropDef)
+  | (EnumOrStringPropDef<T> & ArbitraryStylingPropDef)
+  | (EnumOrStringPropDef<T> & NonStylingPropDef);
+
+/** @public */
+type ResponsivePropDef<T = any> = RegularPropDef<T> & {
+  responsive: true;
+};
+
+/** @public */
+type PropDef<T = any> = RegularPropDef<T> | ResponsivePropDef<T>;
+
+/** @public */
+export type GetPropDefType<Def> = Def extends BooleanPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<boolean>
+    : boolean
+  : Def extends StringPropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<string>
+    : string
+  : Def extends ReactNodePropDef
+  ? Def extends ResponsivePropDef
+    ? Responsive<React.ReactNode>
+    : React.ReactNode
+  : Def extends EnumOrStringPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type extends string>
+    ? Responsive<string | Type>
+    : string | Type
+  : Def extends EnumPropDef<infer Type>
+  ? Def extends ResponsivePropDef<infer Type>
+    ? Responsive<Type>
+    : Type
+  : never;
+
+/** @public */
+type GetPropDefTypes<P> = {
+  [K in keyof P]?: GetPropDefType<P[K]>;
+};
+
+export { breakpoints };
+export type {
+  PropDef,
+  GetPropDefTypes,
+  ResponsivePropDef,
+  Breakpoint,
+  Responsive,
+};
diff --git a/packages/canon/src/props/spacing.props.ts b/packages/canon/src/props/spacing.props.ts
new file mode 100644
index 0000000000..d33bab2aa5
--- /dev/null
+++ b/packages/canon/src/props/spacing.props.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.props';
+import { marginPropDefs } from './margin.props';
+
+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/props/width.props.ts b/packages/canon/src/props/width.props.ts
new file mode 100644
index 0000000000..fdd8f3fdd4
--- /dev/null
+++ b/packages/canon/src/props/width.props.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { GetPropDefTypes, PropDef } from './prop-def';
+
+/** @public */
+const widthPropDefs = {
+  width: {
+    type: 'string',
+    className: 'cu-w',
+    customProperties: ['--width'],
+    responsive: true,
+  },
+  minWidth: {
+    type: 'string',
+    className: 'cu-min-w',
+    customProperties: ['--min-width'],
+    responsive: true,
+  },
+  maxWidth: {
+    type: 'string',
+    className: 'cu-max-w',
+    customProperties: ['--max-width'],
+    responsive: true,
+  },
+} satisfies {
+  width: PropDef<string>;
+  minWidth: PropDef<string>;
+  maxWidth: PropDef<string>;
+};
+
+/** @public */
+type WidthProps = GetPropDefTypes<typeof widthPropDefs>;
+
+export { widthPropDefs };
+export type { WidthProps };
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 3a6b55f13b..ee5d954576 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -37,7 +37,27 @@ export type AsProps =
 export type Breakpoint = 'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 /** @public */
-export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+/** @public */
+export type Space =
+  | '0.5'
+  | '1'
+  | '1.5'
+  | '2'
+  | '3'
+  | '4'
+  | '5'
+  | '6'
+  | '7'
+  | '8'
+  | '9'
+  | '10'
+  | '11'
+  | '12'
+  | '13'
+  | '14'
+  | string;
 
 /** @public */
 export type Display = 'none' | 'flex' | 'block' | 'inline';
@@ -79,35 +99,35 @@ export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
 
 /** @public */
 export interface SpaceProps {
-  margin?: Space | Partial<Record<Breakpoint, Space>>;
-  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
-  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
-  marginX?: Space | Partial<Record<Breakpoint, Space>>;
-  marginY?: Space | Partial<Record<Breakpoint, Space>>;
-  padding?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
-  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+  m?: Responsive<Space>;
+  mb?: Responsive<Space>;
+  ml?: Responsive<Space>;
+  mr?: Responsive<Space>;
+  mt?: Responsive<Space>;
+  mx?: Responsive<Space>;
+  my?: Responsive<Space>;
+  p?: Responsive<Space>;
+  pb?: Responsive<Space>;
+  pl?: Responsive<Space>;
+  pr?: Responsive<Space>;
+  pt?: Responsive<Space>;
+  px?: Responsive<Space>;
+  py?: Responsive<Space>;
 }
 
 /** @public */
 export interface UtilityProps extends SpaceProps {
-  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
-  border?: Border | Partial<Record<Breakpoint, Border>>;
-  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
-  colEnd?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
-  colSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
-  colStart?: Columns | 'auto' | Partial<Record<Breakpoint, Columns | 'auto'>>;
-  columns?: Columns | Partial<Record<Breakpoint, Columns>>;
-  display?: Display | Partial<Record<Breakpoint, Display>>;
-  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
-  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
-  gap?: Space | Partial<Record<Breakpoint, Space>>;
-  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
-  rowSpan?: Columns | 'full' | Partial<Record<Breakpoint, Columns | 'full'>>;
+  alignItems?: Responsive<AlignItems>;
+  border?: Responsive<Border>;
+  borderRadius?: Responsive<BorderRadius>;
+  colEnd?: Responsive<Columns | 'auto'>;
+  colSpan?: Responsive<Columns | 'full'>;
+  colStart?: Responsive<Columns | 'auto'>;
+  columns?: Responsive<Columns>;
+  display?: Responsive<Display>;
+  flexDirection?: Responsive<FlexDirection>;
+  flexWrap?: Responsive<FlexWrap>;
+  gap?: Responsive<Space>;
+  justifyContent?: Responsive<JustifyContent>;
+  rowSpan?: Responsive<Columns | 'full'>;
 }
diff --git a/packages/canon/src/utils/extractProps.ts b/packages/canon/src/utils/extractProps.ts
new file mode 100644
index 0000000000..fdd98048cf
--- /dev/null
+++ b/packages/canon/src/utils/extractProps.ts
@@ -0,0 +1,80 @@
+/*
+ * 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) {
+    // Check if the prop is present or has a default value
+    if (
+      !props.hasOwnProperty(key) &&
+      !propDefs[key].hasOwnProperty('default')
+    ) {
+      continue; // Skip processing if neither is present
+    }
+
+    const value = props.hasOwnProperty(key)
+      ? props[key]
+      : propDefs[key].default;
+    const propDefsValues = propDefs[key].values;
+    const propDefsCustomProperties = propDefs[key].customProperties;
+    const propDefsClassName = propDefs[key].className;
+    const isResponsive = propDefs[key].responsive;
+
+    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 };
+}