diff --git a/packages/canon/src/components/Box/docs/spacing-table.tsx b/packages/canon/src/components/Box/docs/spacing-table.tsx
index 7d98576b0e..32b1eac1b9 100644
--- a/packages/canon/src/components/Box/docs/spacing-table.tsx
+++ b/packages/canon/src/components/Box/docs/spacing-table.tsx
@@ -20,8 +20,6 @@ import { Chip } from '../../../../docs/components';
import { listResponsiveValues } from '../../../utils/list-values';
import { responsiveProperties } from '../sprinkles.css';
-console.log(responsiveProperties.styles);
-
export const SpacingTable = () => {
return (
diff --git a/packages/canon/src/components/Box/sprinkles.css.ts b/packages/canon/src/components/Box/sprinkles.css.ts
index 3d7086c296..2785822eab 100644
--- a/packages/canon/src/components/Box/sprinkles.css.ts
+++ b/packages/canon/src/components/Box/sprinkles.css.ts
@@ -21,28 +21,7 @@ import {
ConditionalValue,
createMapValueFn,
} from '@vanilla-extract/sprinkles';
-
-/** @public */
-export const breakpoints = {
- xs: {},
- sm: { '@media': 'screen and (min-width: 640px)' },
- md: { '@media': 'screen and (min-width: 768px)' },
- lg: { '@media': 'screen and (min-width: 1024px)' },
- xl: { '@media': 'screen and (min-width: 1280px)' },
- '2xl': { '@media': 'screen and (min-width: 1536px)' },
-};
-
-/** @public */
-export const space = {
- none: 0,
- xxs: 'var(--canon-space-xxs)',
- xs: 'var(--canon-space-xs)',
- sm: 'var(--canon-space-sm)',
- md: 'var(--canon-space-md)',
- lg: 'var(--canon-space-lg)',
- xl: 'var(--canon-space-xl)',
- xxl: 'var(--canon-space-xxl)',
-};
+import { breakpoints, space } from './properties';
/** @public */
export const responsiveProperties = defineProperties({
diff --git a/packages/canon/static/favicon.svg b/packages/canon/static/favicon.svg
new file mode 100644
index 0000000000..12cad81e95
--- /dev/null
+++ b/packages/canon/static/favicon.svg
@@ -0,0 +1,4 @@
+