diff --git a/ui/design-tokens/src/Colors/ColorBlock1/ColorBlock1.tsx b/ui/design-tokens/src/Colors/ColorBlock1/ColorBlock1.tsx
index d7f640977..01e4b4651 100644
--- a/ui/design-tokens/src/Colors/ColorBlock1/ColorBlock1.tsx
+++ b/ui/design-tokens/src/Colors/ColorBlock1/ColorBlock1.tsx
@@ -16,7 +16,14 @@ export const ColorBlock1: FC<ColoBlock1Props> = ({ name, color, sx }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'row', width: '220px' }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        minWidth: 180,
+        maxWidth: 450,
+      }}
+    >
       <CopyContainer value={hex} name={name}>
         <Box
           sx={{
diff --git a/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx b/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx
index 2b2545e22..76114adc9 100644
--- a/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx
+++ b/ui/design-tokens/src/Colors/ColorBlock4/ColorBlock4.tsx
@@ -17,7 +17,14 @@ export const ColorBlock4: FC<ColorBlock4Props> = ({ name, color, sx }) => {
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', width: 180 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 180,
+        maxWidth: 450,
+      }}
+    >
       <CopyContainer value={hex} name={name}>
         <Box
           sx={{
diff --git a/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx b/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx
index f0f2a5ae2..43eb57776 100644
--- a/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx
+++ b/ui/design-tokens/src/Colors/ColorBlock5/ColorBlock5.tsx
@@ -52,7 +52,14 @@ export const ColorBlock5: FC<ColorBlock5Props> = ({ name, color, sx }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: 180 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 180,
+        maxWidth: 450,
+      }}
+    >
       <CopyContainer value={hex} name={name}>
         <Box
           sx={{
diff --git a/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx b/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx
index 4b4b8b8ac..963233db0 100644
--- a/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx
+++ b/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx
@@ -8,7 +8,7 @@ export const GridContainer: FC<GridContainerProps> = ({
   children,
   palette,
   gap = 2,
-  columns = [3],
+  width = 220,
   ref,
   ...rest
 }) => {
@@ -19,7 +19,7 @@ export const GridContainer: FC<GridContainerProps> = ({
       onMouseOver={() => setHover(true)}
       onMouseOut={() => setHover(false)}
       gap={gap}
-      columns={columns}
+      width={width}
       {...rest}
     >
       {Object.keys(palette).map(color =>