diff --git a/packages/canon/src/components/Box/Box.tsx b/packages/canon/src/components/Box/Box.tsx
index d142b3d841..ecf138f1ce 100644
--- a/packages/canon/src/components/Box/Box.tsx
+++ b/packages/canon/src/components/Box/Box.tsx
@@ -26,7 +26,7 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const sprinklesClassName = boxSprinkles(restProps);
 
   // Combine the base class name, the sprinkles class name, and any additional class names
-  const classNames = ['canon-box', sprinklesClassName, className]
+  const classNames = ['box', sprinklesClassName, className]
     .filter(Boolean)
     .join(' ');
 
diff --git a/packages/canon/src/components/Box/styles.css b/packages/canon/src/components/Box/styles.css
index a90ce578cd..75fd0dd493 100644
--- a/packages/canon/src/components/Box/styles.css
+++ b/packages/canon/src/components/Box/styles.css
@@ -1,4 +1,4 @@
-.canon-box {
+.box {
   font-family: 'var(--canon-font-regular)';
   color: 'var(--canon-text-primary)';
 }