diff --git a/ui/design-tokens/src/ColorBlock/ColorBlock.stories.tsx b/ui/design-tokens/src/ColorBlock/ColorBlock.stories.tsx
deleted file mode 100644
index 2d4fa648b..000000000
--- a/ui/design-tokens/src/ColorBlock/ColorBlock.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { ColorBlock, ColorBlockProps } from './ColorBlock';
-
-export default {
-  title: 'Design Tokens/ColorBlock',
-  component: ColorBlock,
-};
-
-export const overview = ({ color, name }: ColorBlockProps) => (
-  <ColorBlock name={name} color={color} />
-);
-
-overview.colors = {
-  name: { type: 'text' },
-  color: { type: 'color', value: 'blue' },
-};
diff --git a/ui/design-tokens/src/ColorSwatch/ColorBlock.stories.tsx b/ui/design-tokens/src/ColorSwatch/ColorBlock.stories.tsx
new file mode 100644
index 000000000..08cb548ee
--- /dev/null
+++ b/ui/design-tokens/src/ColorSwatch/ColorBlock.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ColorSwatch, ColorBlockProps } from './ColorSwatch';
+
+export default {
+  title: 'Design Tokens/ColorSwatch',
+  component: ColorSwatch,
+};
+
+export const overview = ({ name, color }: ColorBlockProps) => (
+  <ColorSwatch name={name} color={color} />
+);
+
+overview.controls = {
+  name: { type: 'text' },
+  color: { type: 'color', value: '#fbce4a' },
+};
diff --git a/ui/design-tokens/src/ColorBlock/ColorBlock.tsx b/ui/design-tokens/src/ColorSwatch/ColorSwatch.tsx
similarity index 59%
rename from ui/design-tokens/src/ColorBlock/ColorBlock.tsx
rename to ui/design-tokens/src/ColorSwatch/ColorSwatch.tsx
index 98d8c1c2a..991183df9 100644
--- a/ui/design-tokens/src/ColorBlock/ColorBlock.tsx
+++ b/ui/design-tokens/src/ColorSwatch/ColorSwatch.tsx
@@ -1,19 +1,29 @@
 /** @jsx jsx */
 import { FC } from 'react';
 import { jsx, Box, Theme } from 'theme-ui';
-import { parseToRgb } from 'polished';
+import { parseToRgb, rgbToColorString } from 'polished';
 
 export interface ColorBlockProps {
   name?: string;
   color: string;
 }
 
-export const ColorBlock: FC<ColorBlockProps> = ({ name, color }) => {
-  const hex = color;
-  const rgb = parseToRgb(color);
+export const ColorSwatch: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorStr = color.toLowerCase().startsWith('rgb')
+    ? rgbToColorString(parseToRgb(color))
+    : color;
+  const hex = colorStr.startsWith('#') ? colorStr : `#${colorStr}`;
+  const rgb = parseToRgb(hex);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'row', width: '220px' }}>
-      <Box sx={{ bg: color, width: 64, height: 64 }}></Box>
+      <Box
+        sx={{
+          bg: color,
+          width: 64,
+          height: 64,
+          border: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
+        }}
+      ></Box>
       <Box
         sx={{
           display: 'flex',
@@ -28,6 +38,7 @@ export const ColorBlock: FC<ColorBlockProps> = ({ name, color }) => {
           sx={{
             fontWeight: 'bold',
             borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
+            pb: 1,
           }}
         >
           {name || hex}
diff --git a/ui/design-tokens/src/ColorSwatch/index.ts b/ui/design-tokens/src/ColorSwatch/index.ts
new file mode 100644
index 000000000..dc9d7f9f6
--- /dev/null
+++ b/ui/design-tokens/src/ColorSwatch/index.ts
@@ -0,0 +1 @@
+export * from './ColorSwatch';
diff --git a/ui/design-tokens/src/index.ts b/ui/design-tokens/src/index.ts
index e69de29bb..dc9d7f9f6 100644
--- a/ui/design-tokens/src/index.ts
+++ b/ui/design-tokens/src/index.ts
@@ -0,0 +1 @@
+export * from './ColorSwatch';