diff --git a/packages/canon/.storybook/preview.tsx b/packages/canon/.storybook/preview.tsx
index bb8bbea4ef..1ac53acd86 100644
--- a/packages/canon/.storybook/preview.tsx
+++ b/packages/canon/.storybook/preview.tsx
@@ -75,7 +75,6 @@ const preview: Preview = {
           },
         },
       },
-      defaultViewport: 'small',
     },
   },
   decorators: [
diff --git a/packages/canon/docs/utils/argTypes.ts b/packages/canon/docs/utils/argTypes.ts
index e6a68008f8..78da0bb6d2 100644
--- a/packages/canon/docs/utils/argTypes.ts
+++ b/packages/canon/docs/utils/argTypes.ts
@@ -13,39 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { boxProperties } from '../../src/components/Box/sprinkles.css';
 import {
   colorProperties,
   spacingProperties,
 } from '../../src/layout/sprinkles.css';
 
-export const listResponsiveValues = (
-  value: keyof typeof boxProperties.styles,
-) => {
-  const values = boxProperties.styles[value];
-
-  if (!values) {
-    console.warn(`Value "${value}" not found in boxProperties.styles`);
-    return [];
-  }
-
-  if ('values' in values) {
-    return Object.keys(values.values);
-  }
-
-  return [];
-};
-
-export const listColorValues = (value: keyof typeof colorProperties.styles) => {
-  const values = colorProperties.styles[value];
-
-  if ('values' in values) {
-    return Object.keys(values.values);
-  }
-
-  return [];
-};
-
 export const argTypesSpacing = Object.keys(spacingProperties.styles).reduce<
   Record<string, any>
 >((acc, n) => {
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index d3f9e6fa80..12a52cc1d6 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -11,14 +11,7 @@ import * as React_3 from 'react';
 import { RefAttributes } from 'react';
 
 // @public (undocumented)
-export type AlignItemsProps =
-  | 'stretch'
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | Partial<
-      Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
-    >;
+export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
 
 // @public (undocumented)
 export type AsProps =
@@ -50,12 +43,18 @@ export type Background =
     >;
 
 // @public (undocumented)
-export type BorderRadiusProps =
+export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
+
+// @public (undocumented)
+export type BorderRadius =
   | 'none'
-  | 'small'
-  | 'medium'
-  | 'full'
-  | Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
+  | '2xs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl';
 
 // @public (undocumented)
 export const Box: ForwardRefExoticComponent<
@@ -63,51 +62,19 @@ export const Box: ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export interface BoxProps extends SpaceProps, ColorProps {
-  // (undocumented)
-  alignItems?: AlignItemsProps;
+export interface BoxProps extends UtilityProps {
   // (undocumented)
   as?: keyof JSX.IntrinsicElements;
   // (undocumented)
-  borderRadius?: BorderRadiusProps;
-  // (undocumented)
   children?: React.ReactNode;
   // (undocumented)
   className?: string;
   // (undocumented)
-  display?: DisplayProps;
-  // (undocumented)
-  flexDirection?: FlexDirectionProps;
-  // (undocumented)
-  flexWrap?: FlexWrapProps;
-  // (undocumented)
-  justifyContent?: JustifyContentProps;
-  // (undocumented)
   style?: React.CSSProperties;
 }
 
 // @public (undocumented)
-export type Breakpoint = keyof typeof breakpoints;
-
-// @public (undocumented)
-export const breakpoints: {
-  xs: {};
-  sm: {
-    '@media': string;
-  };
-  md: {
-    '@media': string;
-  };
-  lg: {
-    '@media': string;
-  };
-  xl: {
-    '@media': string;
-  };
-  '2xl': {
-    '@media': string;
-  };
-};
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 // @public (undocumented)
 export const Button: React_2.ForwardRefExoticComponent<
@@ -209,24 +176,13 @@ export interface ContainerProps
 }
 
 // @public (undocumented)
-export type DisplayProps =
-  | 'flex'
-  | 'none'
-  | 'inline'
-  | 'block'
-  | Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
+export type Display = 'none' | 'flex' | 'block' | 'inline';
 
 // @public (undocumented)
-export type FlexDirectionProps =
-  | 'row'
-  | 'column'
-  | Partial<Record<Breakpoint, 'row' | 'column'>>;
+export type FlexDirection = 'row' | 'column';
 
 // @public (undocumented)
-export type FlexWrapProps =
-  | 'wrap'
-  | 'nowrap'
-  | Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 
 // @public (undocumented)
 export type Gap = Space | Partial<Record<Breakpoint, Space>>;
@@ -332,24 +288,13 @@ export interface InlineProps extends SpaceProps, ColorProps {
 }
 
 // @public (undocumented)
-export type JustifyContentProps =
+export type JustifyContent =
   | 'stretch'
-  | 'flex-start'
+  | 'start'
   | 'center'
-  | 'flex-end'
-  | 'space-around'
-  | 'space-between'
-  | Partial<
-      Record<
-        Breakpoint,
-        | 'stretch'
-        | 'flex-start'
-        | 'center'
-        | 'flex-end'
-        | 'space-around'
-        | 'space-between'
-      >
-    >;
+  | 'end'
+  | 'around'
+  | 'between';
 
 // @public (undocumented)
 export type Margin = Space | Partial<Record<Breakpoint, Space>>;
@@ -394,19 +339,7 @@ export type PaddingX = Space | Partial<Record<Breakpoint, Space>>;
 export type PaddingY = Space | Partial<Record<Breakpoint, Space>>;
 
 // @public (undocumented)
-export type Space = keyof typeof space;
-
-// @public (undocumented)
-export const space: {
-  none: number;
-  '2xs': string;
-  xs: string;
-  sm: string;
-  md: string;
-  lg: string;
-  xl: string;
-  '2xl': string;
-};
+export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 // @public (undocumented)
 export interface SpaceProps {
@@ -508,15 +441,53 @@ export const TableRow: React_3.ForwardRefExoticComponent<
 >;
 
 // @public (undocumented)
-export type Theme = keyof typeof themes;
+export type Theme = 'light' | 'dark';
 
 // @public (undocumented)
-export const themes: {
-  light: {
-    selector: string;
-  };
-  dark: {
-    selector: string;
-  };
-};
+export interface UtilityProps {
+  // (undocumented)
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  // (undocumented)
+  border?: Border | Partial<Record<Breakpoint, Border>>;
+  // (undocumented)
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  // (undocumented)
+  display?: Display | Partial<Record<Breakpoint, Display>>;
+  // (undocumented)
+  flexDirection?: FlexDirection | Partial<Record<Breakpoint, FlexDirection>>;
+  // (undocumented)
+  flexWrap?: FlexWrap | Partial<Record<Breakpoint, FlexWrap>>;
+  // (undocumented)
+  gap?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  justifyContent?: JustifyContent | Partial<Record<Breakpoint, JustifyContent>>;
+  // (undocumented)
+  margin?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginRight?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginTop?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginX?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  marginY?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  padding?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingBottom?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingLeft?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingRight?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingTop?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingX?: Space | Partial<Record<Breakpoint, Space>>;
+  // (undocumented)
+  paddingY?: Space | Partial<Record<Breakpoint, Space>>;
+}
 ```
diff --git a/packages/canon/src/components/Box/Box.stories.tsx b/packages/canon/src/components/Box/Box.stories.tsx
index 6f15d984e1..bd4e597fa0 100644
--- a/packages/canon/src/components/Box/Box.stories.tsx
+++ b/packages/canon/src/components/Box/Box.stories.tsx
@@ -17,22 +17,8 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from './Box';
-import {
-  listResponsiveValues,
-  argTypesSpacing,
-  argTypesColor,
-} from '../../../docs/utils/argTypes';
-import { boxProperties } from './sprinkles.css';
-
-const argTypesBox = Object.keys(boxProperties.styles).reduce<
-  Record<string, any>
->((acc, n) => {
-  acc[n] = {
-    control: 'select',
-    options: listResponsiveValues(n as keyof typeof boxProperties.styles),
-  };
-  return acc;
-}, {});
+import { Stack } from '../Stack';
+import { Inline } from '../Inline';
 
 const meta = {
   title: 'Components/Box',
@@ -41,9 +27,6 @@ const meta = {
     layout: 'centered',
   },
   argTypes: {
-    ...argTypesSpacing,
-    ...argTypesColor,
-    ...argTypesBox,
     as: {
       control: { type: 'select' },
       options: ['div', 'span', 'article', 'section'],
@@ -52,132 +35,364 @@ const meta = {
       control: false,
     },
   },
-  args: {
-    as: 'div',
-    background: 'elevation1',
-    borderRadius: 'small',
-    children: 'Basic Box',
-    display: 'block',
-    padding: 'sm',
-  },
 } satisfies Meta<typeof Box>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  args: {},
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      padding: '4px 8px',
+      borderRadius: '4px',
+    },
+    children: 'Basic Box',
+  },
 };
 
-export const Responsive: Story = {
-  render: () => (
-    <Box
-      display={{ xs: 'block', sm: 'flex' }}
-      padding={{ xs: 'xs', sm: 'md', lg: 'lg' }}
-      background="background"
-    >
-      Responsive Box
-    </Box>
+export const Display: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+    },
+  },
+  render: args => (
+    <Stack align="center">
+      <Inline>
+        <Box display="block" {...args}>
+          Block
+        </Box>
+        <Box display="flex" {...args}>
+          Flex
+        </Box>
+        <Box display="inline" {...args}>
+          Inline
+        </Box>
+        <Box display="none" {...args}>
+          None
+        </Box>
+      </Inline>
+      <Box display={{ xs: 'block', sm: 'flex', md: 'inline' }} {...args}>
+        Responsive
+      </Box>
+    </Stack>
   ),
 };
 
-export const FlexContainer: Story = {
-  render: () => (
-    <Box
-      display="flex"
-      flexDirection="column"
-      padding="lg"
-      background="background"
-    >
-      <Box padding="md" background="background" color="primary">
-        Item 1
+export const FlexDirection: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+    },
+    display: 'flex',
+    gap: 'xs',
+  },
+  render: args => (
+    <Stack align="center">
+      <Box flexDirection="row" {...args}>
+        <span>Row</span>
+        <span>Row</span>
       </Box>
-      <Box padding="md" background="background" color="primary">
-        Item 2
+      <Box flexDirection="column" {...args}>
+        <span>Column</span>
+        <span>Column</span>
       </Box>
-      <Box padding="md" background="background" color="primary">
-        Item 3
+      <Box flexDirection={{ xs: 'column', sm: 'row' }} {...args}>
+        <span>Responsive</span>
+        <span>Flex Direction</span>
       </Box>
-    </Box>
+    </Stack>
   ),
 };
 
-export const Nested: Story = {
-  render: () => (
-    <Box padding="lg" background="background">
-      <Box padding="md" background="background">
-        Header
+export const JustifyContent: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+      width: '200px',
+    },
+    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
-        display="flex"
-        padding="md"
-        background="background"
-        justifyContent="space-between"
+        justifyContent={{
+          xs: 'between',
+          sm: 'around',
+          md: 'start',
+        }}
+        {...args}
       >
-        <Box padding="xs" background="background">
-          Sidebar
+        <span>Responsive</span>
+        <span>Spacing</span>
+      </Box>
+    </Stack>
+  ),
+};
+
+export const AlignItems: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+      width: '200px',
+      height: '100px',
+    },
+    display: 'flex',
+    gap: 'xs',
+  },
+  render: args => (
+    <Stack>
+      <Box alignItems="start" {...args}>
+        <span>Flex Start</span>
+      </Box>
+      <Box alignItems="center" {...args}>
+        <span>Center</span>
+      </Box>
+      <Box alignItems="end" {...args}>
+        <span>Flex End</span>
+      </Box>
+      <Box
+        alignItems={{
+          xs: 'start',
+          sm: 'center',
+          md: 'end',
+        }}
+        {...args}
+      >
+        <span>Responsive</span>
+        <span>Spacing</span>
+      </Box>
+    </Stack>
+  ),
+};
+
+const styleInsideBox = {
+  background: 'rgb(196, 202, 251)',
+  color: 'white',
+  borderRadius: '4px',
+};
+
+export const Padding: Story = {
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      borderRadius: '4px',
+      padding: '12px 12px',
+    },
+  },
+  render: args => (
+    <Stack align="center" gap="md">
+      <Inline alignY="center" gap="md">
+        <Box padding="md" style={styleInsideBox}>
+          <Box {...args}>Padding</Box>
         </Box>
-        <Box padding="xs" background="background">
-          Main Content
+        <Box paddingX="md" style={styleInsideBox}>
+          <Box {...args}>Padding X</Box>
         </Box>
-      </Box>
-      <Box padding="md" background="background">
-        Footer
-      </Box>
-    </Box>
+        <Box paddingY="md" style={styleInsideBox}>
+          <Box {...args}>Padding Y</Box>
+        </Box>
+      </Inline>
+      <Inline alignY="center" gap="md">
+        <Box paddingTop="md" style={styleInsideBox}>
+          <Box {...args}>Padding Top</Box>
+        </Box>
+        <Box paddingRight="md" style={styleInsideBox}>
+          <Box {...args}>Padding Right</Box>
+        </Box>
+        <Box paddingBottom="md" style={styleInsideBox}>
+          <Box {...args}>Padding Bottom</Box>
+        </Box>
+        <Box paddingLeft="md" style={styleInsideBox}>
+          <Box {...args}>Padding Left</Box>
+        </Box>
+      </Inline>
+    </Stack>
   ),
 };
 
-export const Alignment: Story = {
-  render: () => (
-    <Box
-      display="flex"
-      padding="lg"
-      background="background"
-      justifyContent="center"
-      alignItems="center"
-      style={{ height: '200px' }}
-    >
-      <Box padding="md" background="background">
-        Centered Content
-      </Box>
-    </Box>
+export const Margin: Story = {
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      borderRadius: '4px',
+      padding: '12px 12px',
+    },
+  },
+  render: args => (
+    <Stack align="center" gap="md">
+      <Inline alignY="center" gap="md">
+        <Box style={styleInsideBox}>
+          <Box margin="md" {...args}>
+            Margin
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginX="md" {...args}>
+            Margin X
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginY="md" {...args}>
+            Margin Y
+          </Box>
+        </Box>
+      </Inline>
+      <Inline alignY="center" gap="md">
+        <Box style={styleInsideBox}>
+          <Box marginTop="md" {...args}>
+            Margin Top
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginRight="md" {...args}>
+            Margin Right
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginBottom="md" {...args}>
+            Margin Bottom
+          </Box>
+        </Box>
+        <Box style={styleInsideBox}>
+          <Box marginLeft="md" {...args}>
+            Margin Left
+          </Box>
+        </Box>
+      </Inline>
+    </Stack>
   ),
 };
 
-// Example showing different spacing combinations
-export const Spacing: Story = {
-  render: () => (
-    <Box display="flex" flexDirection="column" gap="md">
-      <Box padding="xs" background="background">
-        Small Padding
+export const FlexWrap: Story = {
+  args: {
+    style: {
+      ...Basic.args?.style,
+      width: '200px',
+    },
+    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 padding="md" background="background">
-        Medium Padding
+      <Box flexWrap="nowrap" {...args}>
+        <span>One</span>
+        <span>Two</span>
+        <span>Three</span>
+        <span>Four</span>
+        <span>Five</span>
+        <span>Six</span>
       </Box>
-      <Box padding="lg" background="background">
-        Large Padding
+      <Box flexWrap="wrap-reverse" {...args}>
+        <span>One</span>
+        <span>Two</span>
+        <span>Three</span>
+        <span>Four</span>
+        <span>Five</span>
+        <span>Six</span>
       </Box>
-      <Box paddingX="lg" paddingY="xs" background="background">
-        Mixed Padding
-      </Box>
-    </Box>
+    </Stack>
   ),
 };
 
-// Example showing different display values
-export const DisplayVariants: Story = {
-  render: () => (
-    <Box display="flex" flexDirection="column" gap="md">
-      <Box padding="md" background="background" display="block">
-        Display Block
+export const BorderRadius: Story = {
+  args: {
+    style: {
+      background: '#1f47ff',
+      color: 'white',
+      padding: '4px 8px',
+      width: '64px',
+      height: '64px',
+    },
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  render: args => (
+    <Inline align="center">
+      <Box borderRadius="2xs" {...args}>
+        <span>2xs</span>
       </Box>
-      <Box padding="md" background="background" display="flex">
-        Display Flex
+      <Box borderRadius="xs" {...args}>
+        <span>xs</span>
       </Box>
-      <Box padding="md" background="background" display="inline">
-        Display Inline
+      <Box borderRadius="sm" {...args}>
+        <span>sm</span>
       </Box>
-    </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-surface-1)',
+      color: 'var(--canon-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 ecf138f1ce..020f2b6fbb 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -15,18 +15,18 @@
  */
 
 import { createElement, forwardRef } from 'react';
-import { boxSprinkles } from './sprinkles.css';
 import { BoxProps } from './types';
+import { getClassNames } from '../../utils/getClassNames';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const { as = 'div', className, style, children, ...restProps } = props;
 
-  // Generate the list of class names
-  const sprinklesClassName = boxSprinkles(restProps);
+  // Generate utility class names
+  const utilityClassNames = getClassNames(restProps);
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['box', sprinklesClassName, className]
+  const classNames = ['canon-box', utilityClassNames, className]
     .filter(Boolean)
     .join(' ');
 
diff --git a/packages/canon/src/components/Box/Docs.mdx b/packages/canon/src/components/Box/Docs.mdx
index af9cd9be76..bc350da323 100644
--- a/packages/canon/src/components/Box/Docs.mdx
+++ b/packages/canon/src/components/Box/Docs.mdx
@@ -1,10 +1,7 @@
-import { Meta, Unstyled, Source } from '@storybook/blocks';
+import { Meta, Unstyled, Source, Canvas } from '@storybook/blocks';
 import * as BoxStories from './Box.stories';
 import { Title, Text } from '../../../docs/components';
-import { Padding } from './docs/padding';
-import { PropsTable, getProps } from '../../../docs/components';
-import { boxProperties } from './sprinkles.css';
-import { spacingProperties } from '../../layout/sprinkles.css';
+import { PropsTable } from '../../../docs/components';
 
 <Meta of={BoxStories} />
 
@@ -32,18 +29,49 @@ import { spacingProperties } from '../../layout/sprinkles.css';
 
 <PropsTable
   data={{
-    ...getProps(boxProperties.styles),
+    alignItems: {
+      type: ['stretch', 'start', 'center', 'end'],
+      responsive: true,
+    },
+    border: {
+      type: ['none', 'base', 'error', 'warning', 'selected'],
+      responsive: true,
+    },
+    borderRadius: {
+      type: ['none', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
+      responsive: true,
+    },
     children: {
       type: 'ReactNode',
-      required: false,
+      responsive: false,
     },
     className: {
       type: 'string',
-      required: false,
+      responsive: false,
+    },
+    display: {
+      type: ['none', 'flex', 'block', 'inline'],
+      responsive: true,
+    },
+    flexDirection: {
+      type: ['row', 'column'],
+      responsive: true,
+    },
+    flexWrap: {
+      type: ['wrap', 'nowrap', 'wrap-reverse'],
+      responsive: true,
+    },
+    gap: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    justifyContent: {
+      type: ['stretch', 'start', 'center', 'end', 'around', 'between'],
+      responsive: true,
     },
     style: {
       type: 'CSSProperties',
-      required: false,
+      responsive: false,
     },
   }}
 />
@@ -54,9 +82,68 @@ import { spacingProperties } from '../../layout/sprinkles.css';
   avoid collapsing margins but both are available.
 </Text>
 
-<Padding />
+<Canvas of={BoxStories.Padding} />
 
-<PropsTable data={getProps(spacingProperties.styles)} />
+<PropsTable
+  data={{
+    margin: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginBottom: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginLeft: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginRight: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginTop: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginX: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    marginY: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    padding: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingBottom: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingLeft: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingRight: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingTop: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingX: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+    paddingY: {
+      type: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'],
+      responsive: true,
+    },
+  }}
+/>
 
 <Title type="h2">Examples</Title>
 <Text>Here are some examples of how you can use the Box component.</Text>
diff --git a/packages/canon/src/components/Box/docs/padding.tsx b/packages/canon/src/components/Box/docs/padding.tsx
deleted file mode 100644
index 86a7c801a2..0000000000
--- a/packages/canon/src/components/Box/docs/padding.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright 2024 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 React from 'react';
-import { Inline } from '../../Inline';
-import { Box } from '../Box';
-
-const FakeBox = ({ children }: { children: string }) => (
-  <Box
-    paddingX="md"
-    paddingY="sm"
-    borderRadius="small"
-    style={{ background: '#1f47ff', color: 'white' }}
-  >
-    {children}
-  </Box>
-);
-
-export const Padding = () => {
-  return (
-    <Box
-      display="flex"
-      justifyContent="center"
-      flexDirection="column"
-      alignItems="center"
-      borderRadius="small"
-      marginBottom="md"
-      gap="xl"
-      paddingY="xl"
-      style={{ border: '1px solid #e7e7e7' }}
-    >
-      <Inline align="center" alignY="center" gap="xl">
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          padding="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>padding</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingX="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingX</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingY="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingY</FakeBox>
-        </Box>
-      </Inline>
-      <Inline align="center" alignY="center" gap="xl">
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingTop="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingTop</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingBottom="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingBottom</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingLeft="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingLeft</FakeBox>
-        </Box>
-        <Box
-          alignItems="center"
-          borderRadius="small"
-          paddingRight="md"
-          style={{ background: '#c4cafb', color: 'white' }}
-        >
-          <FakeBox>paddingRight</FakeBox>
-        </Box>
-      </Inline>
-    </Box>
-  );
-};
diff --git a/packages/canon/src/components/Box/index.tsx b/packages/canon/src/components/Box/index.tsx
index e4f1867edc..d47e653dfd 100644
--- a/packages/canon/src/components/Box/index.tsx
+++ b/packages/canon/src/components/Box/index.tsx
@@ -15,4 +15,3 @@
  */
 export { Box } from './Box';
 export type * from './types';
-export { breakpoints, space, themes } from '../../layout/properties';
diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts
deleted file mode 100644
index df5664029b..0000000000
--- a/packages/canon/src/components/Box/sprinkles.css.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright 2024 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 { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
-import { breakpoints } from '../../layout/properties';
-import { colorProperties, spacingProperties } from '../../layout/sprinkles.css';
-
-export const boxProperties = defineProperties({
-  conditions: breakpoints,
-  defaultCondition: 'xs',
-  responsiveArray: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
-  properties: {
-    flexDirection: ['row', 'column'],
-    justifyContent: [
-      'stretch',
-      'flex-start',
-      'center',
-      'flex-end',
-      'space-around',
-      'space-between',
-    ],
-    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
-    borderRadius: {
-      none: 0,
-      small: '4px',
-      medium: '8px',
-      full: '9999px',
-    },
-    boxShadow: {
-      small: 'var(--canon-box-shadow-small)',
-      medium: 'var(--canon-box-shadow-medium)',
-      large: 'var(--canon-box-shadow-large)',
-    },
-    border: {
-      none: 'none',
-      thin: '1px solid var(--canon-outline)',
-      error: '1px solid var(--canon-error)',
-    },
-    display: ['none', 'flex', 'block', 'inline'],
-    flexWrap: ['wrap', 'nowrap'],
-  },
-});
-
-export const boxSprinkles = createSprinkles(
-  spacingProperties,
-  boxProperties,
-  colorProperties,
-);
diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css
index 75fd0dd493..a90ce578cd 100644
--- a/packages/canon/src/components/Box/styles.css
+++ b/packages/canon/src/components/Box/styles.css
@@ -1,4 +1,4 @@
-.box {
+.canon-box {
   font-family: 'var(--canon-font-regular)';
   color: 'var(--canon-text-primary)';
 }
diff --git a/packages/canon/src/components/Box/types.ts b/packages/canon/src/components/Box/types.ts
index 2ba5929fdd..a55c856caf 100644
--- a/packages/canon/src/components/Box/types.ts
+++ b/packages/canon/src/components/Box/types.ts
@@ -14,76 +14,12 @@
  * limitations under the License.
  */
 
-import { Breakpoint, SpaceProps, ColorProps } from '../../layout/types';
+import type { UtilityProps } from '../../types';
 
 /** @public */
-export type DisplayProps =
-  | 'flex'
-  | 'none'
-  | 'inline'
-  | 'block'
-  | Partial<Record<Breakpoint, 'flex' | 'none' | 'inline' | 'block'>>;
-
-/** @public */
-export type FlexDirectionProps =
-  | 'row'
-  | 'column'
-  | Partial<Record<Breakpoint, 'row' | 'column'>>;
-
-/** @public */
-export type FlexWrapProps =
-  | 'wrap'
-  | 'nowrap'
-  | Partial<Record<Breakpoint, 'wrap' | 'nowrap'>>;
-
-/** @public */
-export type JustifyContentProps =
-  | 'stretch'
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | 'space-around'
-  | 'space-between'
-  | Partial<
-      Record<
-        Breakpoint,
-        | 'stretch'
-        | 'flex-start'
-        | 'center'
-        | 'flex-end'
-        | 'space-around'
-        | 'space-between'
-      >
-    >;
-
-/** @public */
-export type AlignItemsProps =
-  | 'stretch'
-  | 'flex-start'
-  | 'center'
-  | 'flex-end'
-  | Partial<
-      Record<Breakpoint, 'stretch' | 'flex-start' | 'center' | 'flex-end'>
-    >;
-
-/** @public */
-export type BorderRadiusProps =
-  | 'none'
-  | 'small'
-  | 'medium'
-  | 'full'
-  | Partial<Record<Breakpoint, 'none' | 'small' | 'medium' | 'full'>>;
-
-/** @public */
-export interface BoxProps extends SpaceProps, ColorProps {
+export interface BoxProps extends UtilityProps {
   as?: keyof JSX.IntrinsicElements;
   children?: React.ReactNode;
-  display?: DisplayProps;
-  flexDirection?: FlexDirectionProps;
-  flexWrap?: FlexWrapProps;
-  justifyContent?: JustifyContentProps;
-  alignItems?: AlignItemsProps;
-  borderRadius?: BorderRadiusProps;
   className?: string;
   style?: React.CSSProperties;
 }
diff --git a/packages/canon/src/components/Button/types.ts b/packages/canon/src/components/Button/types.ts
index b9109a66f3..df5caa0f9f 100644
--- a/packages/canon/src/components/Button/types.ts
+++ b/packages/canon/src/components/Button/types.ts
@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 import { IconNames } from '../Icon';
-import { Breakpoint } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /**
  * Properties for {@link Button}
  *
diff --git a/packages/canon/src/components/Container/Container.stories.tsx b/packages/canon/src/components/Container/Container.stories.tsx
index bedf96ec9e..bdbaeb79e8 100644
--- a/packages/canon/src/components/Container/Container.stories.tsx
+++ b/packages/canon/src/components/Container/Container.stories.tsx
@@ -53,7 +53,7 @@ type Story = StoryObj<typeof meta>;
 
 const FakeBox = () => (
   <Box
-    borderRadius="small"
+    borderRadius="xs"
     style={{ background: '#1f47ff', color: 'white', height: '400px' }}
   />
 );
diff --git a/packages/canon/src/components/Grid/Grid.stories.tsx b/packages/canon/src/components/Grid/Grid.stories.tsx
index bf1bcecfd7..73aec06cf4 100644
--- a/packages/canon/src/components/Grid/Grid.stories.tsx
+++ b/packages/canon/src/components/Grid/Grid.stories.tsx
@@ -45,7 +45,7 @@ type Story = StoryObj<typeof meta>;
 
 const FakeBox = () => (
   <Box
-    borderRadius="small"
+    borderRadius="xs"
     style={{ background: '#1f47ff', color: 'white', height: '64px' }}
   />
 );
@@ -105,7 +105,7 @@ export const RowAndColumns: Story = {
       <Grid {...args} columns={3}>
         <Grid.Item colSpan={1} rowSpan={2}>
           <Box
-            borderRadius="small"
+            borderRadius="xs"
             style={{ background: '#1f47ff', color: 'white', height: '100%' }}
           />
         </Grid.Item>
diff --git a/packages/canon/src/components/Grid/types.ts b/packages/canon/src/components/Grid/types.ts
index 87edbd75bf..097ad105e8 100644
--- a/packages/canon/src/components/Grid/types.ts
+++ b/packages/canon/src/components/Grid/types.ts
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Breakpoint, ColorProps } from '../../layout/types';
+import { ColorProps } from '../../layout/types';
 import { SpaceProps } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /** @public */
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
diff --git a/packages/canon/src/components/Heading/types.ts b/packages/canon/src/components/Heading/types.ts
index fb37cf6414..7a9a44560c 100644
--- a/packages/canon/src/components/Heading/types.ts
+++ b/packages/canon/src/components/Heading/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Breakpoint } from '../../layout/types';
+import { Breakpoint } from '../../types';
 
 /** @public */
 export interface HeadingProps {
diff --git a/packages/canon/src/components/Inline/Inline.stories.tsx b/packages/canon/src/components/Inline/Inline.stories.tsx
index 613fd68c68..ab58a3b7f7 100644
--- a/packages/canon/src/components/Inline/Inline.stories.tsx
+++ b/packages/canon/src/components/Inline/Inline.stories.tsx
@@ -57,7 +57,7 @@ const FakeBox = ({
   height?: number;
 }) => (
   <Box
-    borderRadius="small"
+    borderRadius="xs"
     style={{ background: '#1f47ff', color: 'white', width, height }}
   />
 );
diff --git a/packages/canon/src/components/Inline/types.ts b/packages/canon/src/components/Inline/types.ts
index 3d981d0d31..b4be070e8e 100644
--- a/packages/canon/src/components/Inline/types.ts
+++ b/packages/canon/src/components/Inline/types.ts
@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
+import { AsProps, ColorProps } from '../../layout/types';
 import { SpaceProps } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /** @public */
 export interface InlineProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
diff --git a/packages/canon/src/components/Stack/Stack.stories.tsx b/packages/canon/src/components/Stack/Stack.stories.tsx
index 331c2ee1e1..fbb5d5d651 100644
--- a/packages/canon/src/components/Stack/Stack.stories.tsx
+++ b/packages/canon/src/components/Stack/Stack.stories.tsx
@@ -53,7 +53,7 @@ const FakeBox = () => (
   <Box
     paddingX="xl"
     paddingY="md"
-    borderRadius="small"
+    borderRadius="xs"
     style={{ background: '#1f47ff', color: 'white' }}
   >
     Fake Box
diff --git a/packages/canon/src/components/Stack/types.ts b/packages/canon/src/components/Stack/types.ts
index 529e92d1bd..bec5c1cb62 100644
--- a/packages/canon/src/components/Stack/types.ts
+++ b/packages/canon/src/components/Stack/types.ts
@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AsProps, Breakpoint, ColorProps } from '../../layout/types';
+import { AsProps, ColorProps } from '../../layout/types';
 import { SpaceProps } from '../../layout/types';
-
+import type { Breakpoint } from '../../types';
 /** @public */
 export interface StackProps extends SpaceProps, ColorProps {
   children: React.ReactNode;
diff --git a/packages/canon/src/components/Text/types.ts b/packages/canon/src/components/Text/types.ts
index b054fdf2cf..d3232e1d67 100644
--- a/packages/canon/src/components/Text/types.ts
+++ b/packages/canon/src/components/Text/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Breakpoint } from '../../layout/types';
+import type { Breakpoint } from '../../types';
 
 /** @public */
 export interface TextProps {
diff --git a/packages/canon/src/contexts/canon.tsx b/packages/canon/src/contexts/canon.tsx
index 2116d60168..a8c21e8fa9 100644
--- a/packages/canon/src/contexts/canon.tsx
+++ b/packages/canon/src/contexts/canon.tsx
@@ -18,21 +18,14 @@ import React, { createContext, useContext, ReactNode } from 'react';
 import { IconMap, IconNames } from '../components/Icon/types';
 import { defaultIcons } from '../components/Icon/icons';
 import { useMediaQuery } from '../hooks/useMediaQuery';
-import { Breakpoints } from '../types';
-
-const defaultBreakpoints: Breakpoints = {
-  xs: '0px',
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px',
-};
+import type { Breakpoint } from '../types';
 
 interface CanonContextProps {
   icons: IconMap;
-  breakpoint: keyof Breakpoints;
-  getResponsiveValue: (value: string | Partial<Breakpoints>) => string;
+  breakpoint: Breakpoint;
+  getResponsiveValue: (
+    value: string | Partial<Record<Breakpoint, string>>,
+  ) => string;
 }
 
 const CanonContext = createContext<CanonContextProps>({
@@ -44,21 +37,20 @@ const CanonContext = createContext<CanonContextProps>({
 interface CanonProviderProps {
   children?: ReactNode;
   overrides?: Partial<Record<IconNames, React.ComponentType>>;
-  breakpoints?: Partial<Breakpoints>;
 }
 
 /** @public */
 export const CanonProvider = (props: CanonProviderProps) => {
-  const { children, overrides, breakpoints = defaultBreakpoints } = props;
+  const { children, overrides } = props;
 
   // Merge provided overrides with default icons
   const combinedIcons = { ...defaultIcons, ...overrides };
 
-  const isBreakpointSm = useMediaQuery(`(min-width: ${breakpoints.sm})`);
-  const isBreakpointMd = useMediaQuery(`(min-width: ${breakpoints.md})`);
-  const isBreakpointLg = useMediaQuery(`(min-width: ${breakpoints.lg})`);
-  const isBreakpointXl = useMediaQuery(`(min-width: ${breakpoints.xl})`);
-  const isBreakpoint2xl = useMediaQuery(`(min-width: ${breakpoints['2xl']})`);
+  const isBreakpointSm = useMediaQuery(`(min-width: 640px)`);
+  const isBreakpointMd = useMediaQuery(`(min-width: 768px)`);
+  const isBreakpointLg = useMediaQuery(`(min-width: 1024px)`);
+  const isBreakpointXl = useMediaQuery(`(min-width: 1280px)`);
+  const isBreakpoint2xl = useMediaQuery(`(min-width: 1536px)`);
 
   // Determine the current breakpoint
   const breakpoint = (() => {
@@ -70,9 +62,11 @@ export const CanonProvider = (props: CanonProviderProps) => {
     return 'xs';
   })();
 
-  const getResponsiveValue = (value: string | Partial<Breakpoints>) => {
+  const getResponsiveValue = (
+    value: string | Partial<Record<Breakpoint, string>>,
+  ) => {
     if (typeof value === 'object') {
-      const breakpointsOrder: (keyof Breakpoints)[] = [
+      const breakpointsOrder: Breakpoint[] = [
         'xs',
         'sm',
         'md',
diff --git a/packages/canon/src/css/base.css b/packages/canon/src/css/base.css
new file mode 100644
index 0000000000..f2bf6b3363
--- /dev/null
+++ b/packages/canon/src/css/base.css
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2024 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.
+ */
+
+@layer base {
+  @import './normalize.css';
+
+  *,
+  html,
+  body {
+    font-family: var(--canon-font-regular);
+    font-weight: var(--canon-font-weight-regular);
+  }
+}
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index 2a3f2de61c..9f8dcfff19 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -15,14 +15,8 @@
  */
 
 /* Normalize */
-@import './normalize.css';
-
-*,
-html,
-body {
-  font-family: var(--canon-font-regular);
-  font-weight: var(--canon-font-weight-regular);
-}
+@import './base.css';
+@import './utilities.css';
 
 /* Light theme tokens */
 :root {
@@ -33,10 +27,11 @@ body {
   --canon-surface-2: #f4f4f4;
   --canon-surface-3: #f1f1f1;
 
-  /* Outlines */
-  --canon-outline: rgba(0, 0, 0, 0.1);
-  --canon-outline-hover: rgba(0, 0, 0, 0.2);
-  --canon-outline-focus: #000;
+  /* Borders */
+  --canon-border-base: rgba(0, 0, 0, 0.1);
+  --canon-border-warning: #e36d05;
+  --canon-border-error: #e22b2b;
+  --canon-border-selected: #1db954;
 
   /* States - Add more states */
   --canon-error: #f50000;
@@ -47,9 +42,9 @@ body {
   --canon-text-secondary: #646464;
 
   /* Box shadows */
-  --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05);
-  --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1);
-  --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2);
+  /* --canon-box-shadow-small: 0 0 0 1px rgba(0, 0, 0, 0.05); */
+  /* --canon-box-shadow-medium: 0 0 0 1px rgba(0, 0, 0, 0.1); */
+  /* --canon-box-shadow-large: 0 0 0 1px rgba(0, 0, 0, 0.2); */
 
   /* Font families */
   --canon-font-regular: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
@@ -108,10 +103,11 @@ body {
   --canon-surface-1: #121212;
   --canon-surface-2: #1a1a1a;
 
-  /* Outlines */
-  --canon-outline: rgba(255, 255, 255, 0.2);
-  --canon-outline-hover: rgba(255, 255, 255, 0.4);
-  --canon-outline-focus: #fff;
+  /* Borders */
+  --canon-border-base: rgba(255, 255, 255, 0.2);
+  --canon-border-warning: #f50000;
+  --canon-border-error: #f87503;
+  --canon-border-selected: #25d262;
 
   /* States - Add more states */
   --canon-error: #f50000;
diff --git a/packages/canon/src/css/utilities.css b/packages/canon/src/css/utilities.css
new file mode 100644
index 0000000000..ad4a8d03b4
--- /dev/null
+++ b/packages/canon/src/css/utilities.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 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.
+ */
+
+/* Default utilities */
+@import './utilities/xs.css';
+
+/* Min 640px */
+@import './utilities/sm.css';
+
+/* Min 768px */
+@import './utilities/md.css';
+
+/* Min 1024px */
+@import './utilities/lg.css';
+
+/* Min 1280px */
+@import './utilities/xl.css';
+
+/* Min 1536px */
+@import './utilities/2xl.css';
diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css
new file mode 100644
index 0000000000..91013ab78e
--- /dev/null
+++ b/packages/canon/src/css/utilities/2xl.css
@@ -0,0 +1,616 @@
+/*
+ * Copyright 2024 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.
+ */
+
+@layer utilities {
+  @media (min-width: 1536px) {
+    .cu-2xl-block {
+      display: block;
+    }
+
+    .cu-2xl-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-2xl-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-2xl-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-2xl-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-2xl-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-2xl-flex {
+      display: flex;
+    }
+
+    .cu-2xl-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-2xl-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-2xl-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-2xl-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-2xl-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-2xl-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-gap-none {
+      gap: 0;
+    }
+
+    .cu-2xl-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-grid {
+      display: grid;
+    }
+
+    .cu-2xl-hidden {
+      display: none;
+    }
+
+    .cu-2xl-inline {
+      display: inline;
+    }
+
+    .cu-2xl-inline-block {
+      display: inline-block;
+    }
+
+    .cu-2xl-items-center {
+      align-items: center;
+    }
+
+    .cu-2xl-items-end {
+      align-items: flex-end;
+    }
+
+    .cu-2xl-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-2xl-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-2xl-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-2xl-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-2xl-justify-center {
+      justify-content: center;
+    }
+
+    .cu-2xl-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-2xl-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-2xl-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-2xl-m-2xl {
+      margin: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-m-lg {
+      margin: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-m-md {
+      margin: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-m-none {
+      margin: 0;
+    }
+
+    .cu-2xl-m-sm {
+      margin: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-m-xl {
+      margin: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-2xl-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-ml-lg {
+      margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-2xl-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mr-lg {
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-2xl-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mr-xl {
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-2xl-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-mx-2xl {
+      margin-left: var(--canon-spacing-2xl);
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-2xl-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-my-2xl {
+      margin-top: var(--canon-spacing-2xl);
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-2xl-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-p-2xl {
+      padding: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-p-lg {
+      padding: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-p-md {
+      padding: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-p-none {
+      padding: 0;
+    }
+
+    .cu-2xl-p-sm {
+      padding: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-p-xl {
+      padding: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-p-xs {
+      padding: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-2xl-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-pl-lg {
+      padding-left: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-pl-md {
+      padding-left: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-2xl-pl-sm {
+      padding-left: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pl-xl {
+      padding-left: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pl-xs {
+      padding-left: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-pr-lg {
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-2xl-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-2xl-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-2xl-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-2xl-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-2xl-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-2xl-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-2xl-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-2xl-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-2xl-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-2xl-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-2xl-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-2xl-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-2xl-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-2xl-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-2xl-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-2xl-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-2xl-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
+    .cu-2xl-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css
new file mode 100644
index 0000000000..673c55885e
--- /dev/null
+++ b/packages/canon/src/css/utilities/lg.css
@@ -0,0 +1,616 @@
+/*
+ * Copyright 2024 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.
+ */
+
+@layer utilities {
+  @media (min-width: 1024px) {
+    .cu-lg-block {
+      display: block;
+    }
+
+    .cu-lg-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-lg-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-lg-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-lg-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-lg-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-lg-flex {
+      display: flex;
+    }
+
+    .cu-lg-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-lg-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-lg-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-lg-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-lg-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-lg-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-lg-gap-none {
+      gap: 0;
+    }
+
+    .cu-lg-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-grid {
+      display: grid;
+    }
+
+    .cu-lg-hidden {
+      display: none;
+    }
+
+    .cu-lg-inline {
+      display: inline;
+    }
+
+    .cu-lg-inline-block {
+      display: inline-block;
+    }
+
+    .cu-lg-items-center {
+      align-items: center;
+    }
+
+    .cu-lg-items-end {
+      align-items: flex-end;
+    }
+
+    .cu-lg-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-lg-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-lg-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-lg-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-lg-justify-center {
+      justify-content: center;
+    }
+
+    .cu-lg-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-lg-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-lg-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-lg-m-2xl {
+      margin: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-m-lg {
+      margin: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-m-md {
+      margin: var(--canon-spacing-md);
+    }
+
+    .cu-lg-m-none {
+      margin: 0;
+    }
+
+    .cu-lg-m-sm {
+      margin: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-m-xl {
+      margin: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-lg-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-ml-lg {
+      margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-lg-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-lg-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mr-lg {
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-lg-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mr-xl {
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-lg-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-mx-2xl {
+      margin-left: var(--canon-spacing-2xl);
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-lg-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-lg-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-my-2xl {
+      margin-top: var(--canon-spacing-2xl);
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-lg-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-p-2xl {
+      padding: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-p-lg {
+      padding: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-p-md {
+      padding: var(--canon-spacing-md);
+    }
+
+    .cu-lg-p-none {
+      padding: 0;
+    }
+
+    .cu-lg-p-sm {
+      padding: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-p-xl {
+      padding: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-p-xs {
+      padding: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-lg-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-pl-lg {
+      padding-left: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-pl-md {
+      padding-left: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-lg-pl-sm {
+      padding-left: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pl-xl {
+      padding-left: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pl-xs {
+      padding-left: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-pr-lg {
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-lg-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-lg-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-lg-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-lg-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-lg-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-lg-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-lg-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-lg-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-lg-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-lg-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-lg-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-lg-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-lg-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-lg-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-lg-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-lg-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-lg-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-lg-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-lg-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
+    .cu-lg-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css
new file mode 100644
index 0000000000..4772943947
--- /dev/null
+++ b/packages/canon/src/css/utilities/md.css
@@ -0,0 +1,616 @@
+/*
+ * Copyright 2024 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.
+ */
+
+@layer utilities {
+  @media (min-width: 768px) {
+    .cu-md-block {
+      display: block;
+    }
+
+    .cu-md-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-md-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-md-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-md-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-md-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-md-flex {
+      display: flex;
+    }
+
+    .cu-md-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-md-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-md-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-md-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-md-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-md-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-md-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-md-gap-none {
+      gap: 0;
+    }
+
+    .cu-md-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-md-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-md-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-md-grid {
+      display: grid;
+    }
+
+    .cu-md-hidden {
+      display: none;
+    }
+
+    .cu-md-inline {
+      display: inline;
+    }
+
+    .cu-md-inline-block {
+      display: inline-block;
+    }
+
+    .cu-md-items-center {
+      align-items: center;
+    }
+
+    .cu-md-items-end {
+      align-items: flex-end;
+    }
+
+    .cu-md-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-md-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-md-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-md-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-md-justify-center {
+      justify-content: center;
+    }
+
+    .cu-md-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-md-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-md-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-md-m-2xl {
+      margin: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-m-lg {
+      margin: var(--canon-spacing-lg);
+    }
+
+    .cu-md-m-md {
+      margin: var(--canon-spacing-md);
+    }
+
+    .cu-md-m-none {
+      margin: 0;
+    }
+
+    .cu-md-m-sm {
+      margin: var(--canon-spacing-sm);
+    }
+
+    .cu-md-m-xl {
+      margin: var(--canon-spacing-xl);
+    }
+
+    .cu-md-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-md-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-ml-lg {
+      margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-md-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-md-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-md-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-md-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-md-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mr-lg {
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-md-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-md-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mr-xl {
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-md-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-md-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-md-mx-2xl {
+      margin-left: var(--canon-spacing-2xl);
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-md-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-md-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-md-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-md-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-md-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-md-my-2xl {
+      margin-top: var(--canon-spacing-2xl);
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-md-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-p-2xl {
+      padding: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-p-lg {
+      padding: var(--canon-spacing-lg);
+    }
+
+    .cu-md-p-md {
+      padding: var(--canon-spacing-md);
+    }
+
+    .cu-md-p-none {
+      padding: 0;
+    }
+
+    .cu-md-p-sm {
+      padding: var(--canon-spacing-sm);
+    }
+
+    .cu-md-p-xl {
+      padding: var(--canon-spacing-xl);
+    }
+
+    .cu-md-p-xs {
+      padding: var(--canon-spacing-xs);
+    }
+
+    .cu-md-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-md-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-pl-lg {
+      padding-left: var(--canon-spacing-lg);
+    }
+
+    .cu-md-pl-md {
+      padding-left: var(--canon-spacing-md);
+    }
+
+    .cu-md-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-md-pl-sm {
+      padding-left: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pl-xl {
+      padding-left: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pl-xs {
+      padding-left: var(--canon-spacing-xs);
+    }
+
+    .cu-md-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-pr-lg {
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-md-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-md-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-md-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-md-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-md-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-md-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-md-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-md-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-md-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-md-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-md-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-md-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-md-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-md-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-md-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-md-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-md-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-md-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-md-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-md-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-md-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-md-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-md-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-md-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-md-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-md-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-md-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-md-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-md-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-md-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
+    .cu-md-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css
new file mode 100644
index 0000000000..d3ffc68b44
--- /dev/null
+++ b/packages/canon/src/css/utilities/sm.css
@@ -0,0 +1,616 @@
+/*
+ * Copyright 2024 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.
+ */
+
+@layer utilities {
+  @media (min-width: 640px) {
+    .cu-sm-block {
+      display: block;
+    }
+
+    .cu-sm-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-sm-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-sm-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-sm-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-sm-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-sm-flex {
+      display: flex;
+    }
+
+    .cu-sm-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-sm-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-sm-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-sm-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-sm-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-sm-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-sm-gap-none {
+      gap: 0;
+    }
+
+    .cu-sm-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-grid {
+      display: grid;
+    }
+
+    .cu-sm-hidden {
+      display: none;
+    }
+
+    .cu-sm-inline {
+      display: inline;
+    }
+
+    .cu-sm-inline-block {
+      display: inline-block;
+    }
+
+    .cu-sm-items-center {
+      align-items: center;
+    }
+
+    .cu-sm-items-end {
+      align-items: flex-end;
+    }
+
+    .cu-sm-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-sm-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-sm-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-sm-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-sm-justify-center {
+      justify-content: center;
+    }
+
+    .cu-sm-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-sm-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-sm-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-sm-m-2xl {
+      margin: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-m-lg {
+      margin: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-m-md {
+      margin: var(--canon-spacing-md);
+    }
+
+    .cu-sm-m-none {
+      margin: 0;
+    }
+
+    .cu-sm-m-sm {
+      margin: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-m-xl {
+      margin: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-sm-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-ml-lg {
+      margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-sm-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-sm-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mr-lg {
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-sm-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mr-xl {
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-sm-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-mx-2xl {
+      margin-left: var(--canon-spacing-2xl);
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-sm-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-sm-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-my-2xl {
+      margin-top: var(--canon-spacing-2xl);
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-sm-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-p-2xl {
+      padding: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-p-lg {
+      padding: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-p-md {
+      padding: var(--canon-spacing-md);
+    }
+
+    .cu-sm-p-none {
+      padding: 0;
+    }
+
+    .cu-sm-p-sm {
+      padding: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-p-xl {
+      padding: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-p-xs {
+      padding: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-sm-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-pl-lg {
+      padding-left: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-pl-md {
+      padding-left: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-sm-pl-sm {
+      padding-left: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pl-xl {
+      padding-left: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pl-xs {
+      padding-left: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-pr-lg {
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-sm-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-sm-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-sm-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-sm-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-sm-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-sm-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-sm-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-sm-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-sm-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-sm-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-sm-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-sm-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-sm-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-sm-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-sm-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-sm-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-sm-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-sm-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-sm-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
+    .cu-sm-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css
new file mode 100644
index 0000000000..0ac56c7de1
--- /dev/null
+++ b/packages/canon/src/css/utilities/xl.css
@@ -0,0 +1,616 @@
+/*
+ * Copyright 2024 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.
+ */
+
+@layer utilities {
+  @media (min-width: 1280px) {
+    .cu-xl-block {
+      display: block;
+    }
+
+    .cu-xl-border-base {
+      border-color: var(--canon-border-base);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-xl-border-error {
+      border-color: var(--canon-border-error);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-xl-border-none {
+      border-color: transparent;
+      border-width: 0;
+    }
+
+    .cu-xl-border-selected {
+      border-color: var(--canon-border-selected);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-xl-border-warning {
+      border-color: var(--canon-border-warning);
+      border-width: 1px;
+      border-style: solid;
+    }
+
+    .cu-xl-flex {
+      display: flex;
+    }
+
+    .cu-xl-flex-col {
+      flex-direction: column;
+    }
+
+    .cu-xl-flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .cu-xl-flex-row {
+      flex-direction: row;
+    }
+
+    .cu-xl-flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .cu-xl-flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .cu-xl-gap-2xl {
+      gap: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-gap-lg {
+      gap: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-gap-md {
+      gap: var(--canon-spacing-md);
+    }
+
+    .cu-xl-gap-none {
+      gap: 0;
+    }
+
+    .cu-xl-gap-sm {
+      gap: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-gap-xl {
+      gap: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-gap-xs {
+      gap: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-grid {
+      display: grid;
+    }
+
+    .cu-xl-hidden {
+      display: none;
+    }
+
+    .cu-xl-inline {
+      display: inline;
+    }
+
+    .cu-xl-inline-block {
+      display: inline-block;
+    }
+
+    .cu-xl-items-center {
+      align-items: center;
+    }
+
+    .cu-xl-items-end {
+      align-items: flex-end;
+    }
+
+    .cu-xl-items-start {
+      align-items: flex-start;
+    }
+
+    .cu-xl-items-stretch {
+      align-items: stretch;
+    }
+
+    .cu-xl-justify-around {
+      justify-content: space-around;
+    }
+
+    .cu-xl-justify-between {
+      justify-content: space-between;
+    }
+
+    .cu-xl-justify-center {
+      justify-content: center;
+    }
+
+    .cu-xl-justify-end {
+      justify-content: flex-end;
+    }
+
+    .cu-xl-justify-start {
+      justify-content: flex-start;
+    }
+
+    .cu-xl-justify-stretch {
+      justify-content: stretch;
+    }
+
+    .cu-xl-m-2xl {
+      margin: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-m-lg {
+      margin: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-m-md {
+      margin: var(--canon-spacing-md);
+    }
+
+    .cu-xl-m-none {
+      margin: 0;
+    }
+
+    .cu-xl-m-sm {
+      margin: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-m-xl {
+      margin: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-m-xs {
+      margin: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mb-2xl {
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mb-lg {
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mb-md {
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mb-none {
+      margin-bottom: 0;
+    }
+
+    .cu-xl-mb-sm {
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mb-xl {
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mb-xs {
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-ml-2xl {
+      margin-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-ml-lg {
+      margin-left: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-ml-md {
+      margin-left: var(--canon-spacing-md);
+    }
+
+    .cu-xl-ml-none {
+      margin-left: 0;
+    }
+
+    .cu-xl-ml-sm {
+      margin-left: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-ml-xl {
+      margin-left: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-ml-xs {
+      margin-left: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mr-2xl {
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mr-lg {
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mr-md {
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mr-none {
+      margin-right: 0;
+    }
+
+    .cu-xl-mr-sm {
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mr-xl {
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mr-xs {
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mt-2xl {
+      margin-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mt-lg {
+      margin-top: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mt-md {
+      margin-top: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mt-none {
+      margin-top: 0;
+    }
+
+    .cu-xl-mt-sm {
+      margin-top: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mt-xl {
+      margin-top: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mt-xs {
+      margin-top: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-mx-2xl {
+      margin-left: var(--canon-spacing-2xl);
+      margin-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-mx-lg {
+      margin-left: var(--canon-spacing-lg);
+      margin-right: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-mx-md {
+      margin-left: var(--canon-spacing-md);
+      margin-right: var(--canon-spacing-md);
+    }
+
+    .cu-xl-mx-none {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .cu-xl-mx-sm {
+      margin-left: var(--canon-spacing-sm);
+      margin-right: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-mx-xl {
+      margin-left: var(--canon-spacing-xl);
+      margin-right: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-mx-xs {
+      margin-left: var(--canon-spacing-xs);
+      margin-right: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-my-2xl {
+      margin-top: var(--canon-spacing-2xl);
+      margin-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-my-lg {
+      margin-top: var(--canon-spacing-lg);
+      margin-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-my-md {
+      margin-top: var(--canon-spacing-md);
+      margin-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-my-none {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .cu-xl-my-sm {
+      margin-top: var(--canon-spacing-sm);
+      margin-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-my-xl {
+      margin-top: var(--canon-spacing-xl);
+      margin-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-my-xs {
+      margin-top: var(--canon-spacing-xs);
+      margin-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-p-2xl {
+      padding: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-p-lg {
+      padding: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-p-md {
+      padding: var(--canon-spacing-md);
+    }
+
+    .cu-xl-p-none {
+      padding: 0;
+    }
+
+    .cu-xl-p-sm {
+      padding: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-p-xl {
+      padding: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-p-xs {
+      padding: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-pb-2xl {
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-pb-lg {
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-pb-md {
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pb-none {
+      padding-bottom: 0;
+    }
+
+    .cu-xl-pb-sm {
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pb-xl {
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pb-xs {
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-pl-2xl {
+      padding-left: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-pl-lg {
+      padding-left: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-pl-md {
+      padding-left: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pl-none {
+      padding-left: 0;
+    }
+
+    .cu-xl-pl-sm {
+      padding-left: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pl-xl {
+      padding-left: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pl-xs {
+      padding-left: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-pr-2xl {
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-pr-lg {
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-pr-md {
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pr-none {
+      padding-right: 0;
+    }
+
+    .cu-xl-pr-sm {
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pr-xl {
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pr-xs {
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-pt-2xl {
+      padding-top: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-pt-lg {
+      padding-top: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-pt-md {
+      padding-top: var(--canon-spacing-md);
+    }
+
+    .cu-xl-pt-none {
+      padding-top: 0;
+    }
+
+    .cu-xl-pt-sm {
+      padding-top: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-pt-xl {
+      padding-top: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-pt-xs {
+      padding-top: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-px-2xl {
+      padding-left: var(--canon-spacing-2xl);
+      padding-right: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-px-lg {
+      padding-left: var(--canon-spacing-lg);
+      padding-right: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-px-md {
+      padding-left: var(--canon-spacing-md);
+      padding-right: var(--canon-spacing-md);
+    }
+
+    .cu-xl-px-none {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .cu-xl-px-sm {
+      padding-left: var(--canon-spacing-sm);
+      padding-right: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-px-xl {
+      padding-left: var(--canon-spacing-xl);
+      padding-right: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-px-xs {
+      padding-left: var(--canon-spacing-xs);
+      padding-right: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-py-2xl {
+      padding-top: var(--canon-spacing-2xl);
+      padding-bottom: var(--canon-spacing-2xl);
+    }
+
+    .cu-xl-py-lg {
+      padding-top: var(--canon-spacing-lg);
+      padding-bottom: var(--canon-spacing-lg);
+    }
+
+    .cu-xl-py-md {
+      padding-top: var(--canon-spacing-md);
+      padding-bottom: var(--canon-spacing-md);
+    }
+
+    .cu-xl-py-none {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .cu-xl-py-sm {
+      padding-top: var(--canon-spacing-sm);
+      padding-bottom: var(--canon-spacing-sm);
+    }
+
+    .cu-xl-py-xl {
+      padding-top: var(--canon-spacing-xl);
+      padding-bottom: var(--canon-spacing-xl);
+    }
+
+    .cu-xl-py-xs {
+      padding-top: var(--canon-spacing-xs);
+      padding-bottom: var(--canon-spacing-xs);
+    }
+
+    .cu-xl-rounded-2xl {
+      border-radius: var(--canon-border-radius-2xl);
+    }
+
+    .cu-xl-rounded-2xs {
+      border-radius: var(--canon-border-radius-2xs);
+    }
+
+    .cu-xl-rounded-lg {
+      border-radius: var(--canon-border-radius-lg);
+    }
+
+    .cu-xl-rounded-md {
+      border-radius: var(--canon-border-radius-md);
+    }
+
+    .cu-xl-rounded-none {
+      border-radius: 0;
+    }
+
+    .cu-xl-rounded-sm {
+      border-radius: var(--canon-border-radius-sm);
+    }
+
+    .cu-xl-rounded-xl {
+      border-radius: var(--canon-border-radius-xl);
+    }
+
+    .cu-xl-rounded-xs {
+      border-radius: var(--canon-border-radius-xs);
+    }
+
+    .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
new file mode 100644
index 0000000000..7276e59c46
--- /dev/null
+++ b/packages/canon/src/css/utilities/xs.css
@@ -0,0 +1,614 @@
+/*
+ * Copyright 2024 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.
+ */
+
+@layer utilities {
+  .cu-block {
+    display: block;
+  }
+
+  .cu-border-base {
+    border-color: var(--canon-border-base);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .cu-border-error {
+    border-color: var(--canon-border-error);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .cu-border-none {
+    border-color: transparent;
+    border-width: 0;
+  }
+
+  .cu-border-selected {
+    border-color: var(--canon-border-selected);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .cu-border-warning {
+    border-color: var(--canon-border-warning);
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  .cu-flex {
+    display: flex;
+  }
+
+  .cu-flex-col {
+    flex-direction: column;
+  }
+
+  .cu-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .cu-flex-row {
+    flex-direction: row;
+  }
+
+  .cu-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .cu-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .cu-gap-2xl {
+    gap: var(--canon-spacing-2xl);
+  }
+
+  .cu-gap-lg {
+    gap: var(--canon-spacing-lg);
+  }
+
+  .cu-gap-md {
+    gap: var(--canon-spacing-md);
+  }
+
+  .cu-gap-none {
+    gap: 0;
+  }
+
+  .cu-gap-sm {
+    gap: var(--canon-spacing-sm);
+  }
+
+  .cu-gap-xl {
+    gap: var(--canon-spacing-xl);
+  }
+
+  .cu-gap-xs {
+    gap: var(--canon-spacing-xs);
+  }
+
+  .cu-grid {
+    display: grid;
+  }
+
+  .cu-hidden {
+    display: none;
+  }
+
+  .cu-inline {
+    display: inline;
+  }
+
+  .cu-inline-block {
+    display: inline-block;
+  }
+
+  .cu-items-center {
+    align-items: center;
+  }
+
+  .cu-items-end {
+    align-items: flex-end;
+  }
+
+  .cu-items-start {
+    align-items: flex-start;
+  }
+
+  .cu-items-stretch {
+    align-items: stretch;
+  }
+
+  .cu-justify-around {
+    justify-content: space-around;
+  }
+
+  .cu-justify-between {
+    justify-content: space-between;
+  }
+
+  .cu-justify-center {
+    justify-content: center;
+  }
+
+  .cu-justify-end {
+    justify-content: flex-end;
+  }
+
+  .cu-justify-start {
+    justify-content: flex-start;
+  }
+
+  .cu-justify-stretch {
+    justify-content: stretch;
+  }
+
+  .cu-m-2xl {
+    margin: var(--canon-spacing-2xl);
+  }
+
+  .cu-m-lg {
+    margin: var(--canon-spacing-lg);
+  }
+
+  .cu-m-md {
+    margin: var(--canon-spacing-md);
+  }
+
+  .cu-m-none {
+    margin: 0;
+  }
+
+  .cu-m-sm {
+    margin: var(--canon-spacing-sm);
+  }
+
+  .cu-m-xl {
+    margin: var(--canon-spacing-xl);
+  }
+
+  .cu-m-xs {
+    margin: var(--canon-spacing-xs);
+  }
+
+  .cu-mb-2xl {
+    margin-bottom: var(--canon-spacing-2xl);
+  }
+
+  .cu-mb-lg {
+    margin-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-mb-md {
+    margin-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-mb-none {
+    margin-bottom: 0;
+  }
+
+  .cu-mb-sm {
+    margin-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-mb-xl {
+    margin-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-mb-xs {
+    margin-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-ml-2xl {
+    margin-left: var(--canon-spacing-2xl);
+  }
+
+  .cu-ml-lg {
+    margin-left: var(--canon-spacing-lg);
+  }
+
+  .cu-ml-md {
+    margin-left: var(--canon-spacing-md);
+  }
+
+  .cu-ml-none {
+    margin-left: 0;
+  }
+
+  .cu-ml-sm {
+    margin-left: var(--canon-spacing-sm);
+  }
+
+  .cu-ml-xl {
+    margin-left: var(--canon-spacing-xl);
+  }
+
+  .cu-ml-xs {
+    margin-left: var(--canon-spacing-xs);
+  }
+
+  .cu-mr-2xl {
+    margin-right: var(--canon-spacing-2xl);
+  }
+
+  .cu-mr-lg {
+    margin-right: var(--canon-spacing-lg);
+  }
+
+  .cu-mr-md {
+    margin-right: var(--canon-spacing-md);
+  }
+
+  .cu-mr-none {
+    margin-right: 0;
+  }
+
+  .cu-mr-sm {
+    margin-right: var(--canon-spacing-sm);
+  }
+
+  .cu-mr-xl {
+    margin-right: var(--canon-spacing-xl);
+  }
+
+  .cu-mr-xs {
+    margin-right: var(--canon-spacing-xs);
+  }
+
+  .cu-mt-2xl {
+    margin-top: var(--canon-spacing-2xl);
+  }
+
+  .cu-mt-lg {
+    margin-top: var(--canon-spacing-lg);
+  }
+
+  .cu-mt-md {
+    margin-top: var(--canon-spacing-md);
+  }
+
+  .cu-mt-none {
+    margin-top: 0;
+  }
+
+  .cu-mt-sm {
+    margin-top: var(--canon-spacing-sm);
+  }
+
+  .cu-mt-xl {
+    margin-top: var(--canon-spacing-xl);
+  }
+
+  .cu-mt-xs {
+    margin-top: var(--canon-spacing-xs);
+  }
+
+  .cu-mx-2xl {
+    margin-left: var(--canon-spacing-2xl);
+    margin-right: var(--canon-spacing-2xl);
+  }
+
+  .cu-mx-lg {
+    margin-left: var(--canon-spacing-lg);
+    margin-right: var(--canon-spacing-lg);
+  }
+
+  .cu-mx-md {
+    margin-left: var(--canon-spacing-md);
+    margin-right: var(--canon-spacing-md);
+  }
+
+  .cu-mx-none {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .cu-mx-sm {
+    margin-left: var(--canon-spacing-sm);
+    margin-right: var(--canon-spacing-sm);
+  }
+
+  .cu-mx-xl {
+    margin-left: var(--canon-spacing-xl);
+    margin-right: var(--canon-spacing-xl);
+  }
+
+  .cu-mx-xs {
+    margin-left: var(--canon-spacing-xs);
+    margin-right: var(--canon-spacing-xs);
+  }
+
+  .cu-my-2xl {
+    margin-top: var(--canon-spacing-2xl);
+    margin-bottom: var(--canon-spacing-2xl);
+  }
+
+  .cu-my-lg {
+    margin-top: var(--canon-spacing-lg);
+    margin-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-my-md {
+    margin-top: var(--canon-spacing-md);
+    margin-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-my-none {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .cu-my-sm {
+    margin-top: var(--canon-spacing-sm);
+    margin-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-my-xl {
+    margin-top: var(--canon-spacing-xl);
+    margin-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-my-xs {
+    margin-top: var(--canon-spacing-xs);
+    margin-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-p-2xl {
+    padding: var(--canon-spacing-2xl);
+  }
+
+  .cu-p-lg {
+    padding: var(--canon-spacing-lg);
+  }
+
+  .cu-p-md {
+    padding: var(--canon-spacing-md);
+  }
+
+  .cu-p-none {
+    padding: 0;
+  }
+
+  .cu-p-sm {
+    padding: var(--canon-spacing-sm);
+  }
+
+  .cu-p-xl {
+    padding: var(--canon-spacing-xl);
+  }
+
+  .cu-p-xs {
+    padding: var(--canon-spacing-xs);
+  }
+
+  .cu-pb-2xl {
+    padding-bottom: var(--canon-spacing-2xl);
+  }
+
+  .cu-pb-lg {
+    padding-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-pb-md {
+    padding-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-pb-none {
+    padding-bottom: 0;
+  }
+
+  .cu-pb-sm {
+    padding-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-pb-xl {
+    padding-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-pb-xs {
+    padding-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-pl-2xl {
+    padding-left: var(--canon-spacing-2xl);
+  }
+
+  .cu-pl-lg {
+    padding-left: var(--canon-spacing-lg);
+  }
+
+  .cu-pl-md {
+    padding-left: var(--canon-spacing-md);
+  }
+
+  .cu-pl-none {
+    padding-left: 0;
+  }
+
+  .cu-pl-sm {
+    padding-left: var(--canon-spacing-sm);
+  }
+
+  .cu-pl-xl {
+    padding-left: var(--canon-spacing-xl);
+  }
+
+  .cu-pl-xs {
+    padding-left: var(--canon-spacing-xs);
+  }
+
+  .cu-pr-2xl {
+    padding-right: var(--canon-spacing-2xl);
+  }
+
+  .cu-pr-lg {
+    padding-right: var(--canon-spacing-lg);
+  }
+
+  .cu-pr-md {
+    padding-right: var(--canon-spacing-md);
+  }
+
+  .cu-pr-none {
+    padding-right: 0;
+  }
+
+  .cu-pr-sm {
+    padding-right: var(--canon-spacing-sm);
+  }
+
+  .cu-pr-xl {
+    padding-right: var(--canon-spacing-xl);
+  }
+
+  .cu-pr-xs {
+    padding-right: var(--canon-spacing-xs);
+  }
+
+  .cu-pt-2xl {
+    padding-top: var(--canon-spacing-2xl);
+  }
+
+  .cu-pt-lg {
+    padding-top: var(--canon-spacing-lg);
+  }
+
+  .cu-pt-md {
+    padding-top: var(--canon-spacing-md);
+  }
+
+  .cu-pt-none {
+    padding-top: 0;
+  }
+
+  .cu-pt-sm {
+    padding-top: var(--canon-spacing-sm);
+  }
+
+  .cu-pt-xl {
+    padding-top: var(--canon-spacing-xl);
+  }
+
+  .cu-pt-xs {
+    padding-top: var(--canon-spacing-xs);
+  }
+
+  .cu-px-2xl {
+    padding-left: var(--canon-spacing-2xl);
+    padding-right: var(--canon-spacing-2xl);
+  }
+
+  .cu-px-lg {
+    padding-left: var(--canon-spacing-lg);
+    padding-right: var(--canon-spacing-lg);
+  }
+
+  .cu-px-md {
+    padding-left: var(--canon-spacing-md);
+    padding-right: var(--canon-spacing-md);
+  }
+
+  .cu-px-none {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .cu-px-sm {
+    padding-left: var(--canon-spacing-sm);
+    padding-right: var(--canon-spacing-sm);
+  }
+
+  .cu-px-xl {
+    padding-left: var(--canon-spacing-xl);
+    padding-right: var(--canon-spacing-xl);
+  }
+
+  .cu-px-xs {
+    padding-left: var(--canon-spacing-xs);
+    padding-right: var(--canon-spacing-xs);
+  }
+
+  .cu-py-2xl {
+    padding-top: var(--canon-spacing-2xl);
+    padding-bottom: var(--canon-spacing-2xl);
+  }
+
+  .cu-py-lg {
+    padding-top: var(--canon-spacing-lg);
+    padding-bottom: var(--canon-spacing-lg);
+  }
+
+  .cu-py-md {
+    padding-top: var(--canon-spacing-md);
+    padding-bottom: var(--canon-spacing-md);
+  }
+
+  .cu-py-none {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .cu-py-sm {
+    padding-top: var(--canon-spacing-sm);
+    padding-bottom: var(--canon-spacing-sm);
+  }
+
+  .cu-py-xl {
+    padding-top: var(--canon-spacing-xl);
+    padding-bottom: var(--canon-spacing-xl);
+  }
+
+  .cu-py-xs {
+    padding-top: var(--canon-spacing-xs);
+    padding-bottom: var(--canon-spacing-xs);
+  }
+
+  .cu-rounded-2xl {
+    border-radius: var(--canon-border-radius-2xl);
+  }
+
+  .cu-rounded-2xs {
+    border-radius: var(--canon-border-radius-2xs);
+  }
+
+  .cu-rounded-lg {
+    border-radius: var(--canon-border-radius-lg);
+  }
+
+  .cu-rounded-md {
+    border-radius: var(--canon-border-radius-md);
+  }
+
+  .cu-rounded-none {
+    border-radius: 0;
+  }
+
+  .cu-rounded-sm {
+    border-radius: var(--canon-border-radius-sm);
+  }
+
+  .cu-rounded-xl {
+    border-radius: var(--canon-border-radius-xl);
+  }
+
+  .cu-rounded-xs {
+    border-radius: var(--canon-border-radius-xs);
+  }
+
+  .cu-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+}
diff --git a/packages/canon/src/index.ts b/packages/canon/src/index.ts
index d6a375b8dd..e6a4fb26d3 100644
--- a/packages/canon/src/index.ts
+++ b/packages/canon/src/index.ts
@@ -20,9 +20,6 @@
  * @packageDocumentation
  */
 
-// Layout types
-export * from './layout/types';
-
 // Layout components
 export * from './components/Box';
 export * from './components/Grid';
@@ -35,3 +32,7 @@ export * from './components/Button';
 export * from './components/Icon';
 export * from './components/Checkbox';
 export * from './components/Table';
+
+// Types
+export * from './layout/types';
+export * from './types';
diff --git a/packages/canon/src/layout/types.ts b/packages/canon/src/layout/types.ts
index c051dacb44..a4fb53e6c6 100644
--- a/packages/canon/src/layout/types.ts
+++ b/packages/canon/src/layout/types.ts
@@ -13,16 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { breakpoints, space, themes } from './properties';
+
+import type { Breakpoint, Space } from '../types';
 
 /** @public */
-export type Breakpoint = keyof typeof breakpoints;
-
-/** @public */
-export type Space = keyof typeof space;
-
-/** @public */
-export type Theme = keyof typeof themes;
+export type Theme = 'light' | 'dark';
 
 /** @public */
 export type Gap = Space | Partial<Record<Breakpoint, Space>>;
diff --git a/packages/canon/src/types.ts b/packages/canon/src/types.ts
index 236d633f84..1f2ce8c02b 100644
--- a/packages/canon/src/types.ts
+++ b/packages/canon/src/types.ts
@@ -13,11 +13,70 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export interface Breakpoints {
-  xs: string;
-  sm: string;
-  md: string;
-  lg: string;
-  xl: string;
-  '2xl': string;
+
+/** @public */
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+/** @public */
+export type Space = 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+/** @public */
+export type Display = 'none' | 'flex' | 'block' | 'inline';
+
+/** @public */
+export type FlexDirection = 'row' | 'column';
+
+/** @public */
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+
+/** @public */
+export type JustifyContent =
+  | 'stretch'
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'around'
+  | 'between';
+
+/** @public */
+export type AlignItems = 'stretch' | 'start' | 'center' | 'end';
+
+/** @public */
+export type BorderRadius =
+  | 'none'
+  | '2xs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | '2xl';
+
+/** @public */
+export type Border = 'none' | 'base' | 'error' | 'warning' | 'selected';
+
+/** @public */
+export interface UtilityProps {
+  alignItems?: AlignItems | Partial<Record<Breakpoint, AlignItems>>;
+  border?: Border | Partial<Record<Breakpoint, Border>>;
+  borderRadius?: BorderRadius | Partial<Record<Breakpoint, BorderRadius>>;
+  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>>;
+  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>>;
 }
diff --git a/packages/canon/src/utils/getClassNames.ts b/packages/canon/src/utils/getClassNames.ts
new file mode 100644
index 0000000000..9beb63d24e
--- /dev/null
+++ b/packages/canon/src/utils/getClassNames.ts
@@ -0,0 +1,130 @@
+/*
+ * Copyright 2024 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 { Breakpoint, UtilityProps } from '../types';
+
+const spaceMap = (type: string) => ({
+  none: `${type}-none`,
+  '2xs': `${type}-2xs`,
+  xs: `${type}-xs`,
+  sm: `${type}-sm`,
+  md: `${type}-md`,
+  lg: `${type}-lg`,
+  xl: `${type}-xl`,
+  '2xl': `${type}-2xl`,
+});
+
+const valueMap: Record<string, Record<string, string>> = {
+  display: {
+    none: 'hidden',
+    flex: 'flex',
+    block: 'block',
+    inline: 'inline',
+  },
+  flexDirection: {
+    row: 'flex-row',
+    column: 'flex-col',
+  },
+  flexWrap: {
+    wrap: 'flex-wrap',
+    nowrap: 'flex-nowrap',
+    'wrap-reverse': 'flex-wrap-reverse',
+  },
+  justifyContent: {
+    stretch: 'justify-stretch',
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    around: 'justify-around',
+    between: 'justify-between',
+  },
+  alignItems: {
+    stretch: 'items-stretch',
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+  },
+  borderRadius: {
+    none: 'rounded-none',
+    '2xs': 'rounded-2xs',
+    xs: 'rounded-xs',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+  },
+  border: {
+    none: 'border-none',
+    base: 'border-base',
+    error: 'border-error',
+    warning: 'border-warning',
+    selected: 'border-selected',
+  },
+  padding: spaceMap('p'),
+  paddingX: spaceMap('px'),
+  paddingY: spaceMap('py'),
+  paddingLeft: spaceMap('pl'),
+  paddingRight: spaceMap('pr'),
+  paddingTop: spaceMap('pt'),
+  paddingBottom: spaceMap('pb'),
+  margin: spaceMap('m'),
+  marginX: spaceMap('mx'),
+  marginY: spaceMap('my'),
+  marginLeft: spaceMap('ml'),
+  marginRight: spaceMap('mr'),
+  marginTop: spaceMap('mt'),
+  marginBottom: spaceMap('mb'),
+  gap: spaceMap('gap'),
+};
+
+const generateClassNames = (propName: string, propValue: any) => {
+  const classNames: string[] = [];
+
+  // If the property name is not in the valueMap, return an empty array
+  if (!valueMap.hasOwnProperty(propName)) {
+    return classNames;
+  }
+
+  if (typeof propValue === 'string') {
+    // If the property value is a string, map it to the valueMap
+    const value = valueMap[propName]?.[propValue] || propValue;
+    classNames.push(`cu-${value}`);
+  } else if (typeof propValue === 'object') {
+    // If the property value is an object, map each key-value pair
+    Object.entries(propValue as Record<Breakpoint, string>).forEach(
+      ([breakpoint, value]) => {
+        const mappedValue = valueMap[propName]?.[value] || value;
+
+        if (breakpoint === 'xs') {
+          classNames.push(`cu-${mappedValue}`);
+        } else {
+          classNames.push(`cu-${breakpoint}-${mappedValue}`);
+        }
+      },
+    );
+  }
+  return classNames;
+};
+
+export const getClassNames = (props: UtilityProps) => {
+  const classNames: string[] = [];
+
+  Object.entries(props).forEach(([propName, propValue]) => {
+    classNames.push(...generateClassNames(propName, propValue));
+  });
+
+  return classNames.filter(Boolean).join(' ');
+};