diff --git a/styles/theme-tool/app/page.module.css b/styles/theme-tool/app/page.module.css
index cca6319cf07d1e193a465f1ce634bdc5d81572e5..0e3b20c805f9dc56d62b5a3c82d4ba4c75ae2208 100644
--- a/styles/theme-tool/app/page.module.css
+++ b/styles/theme-tool/app/page.module.css
@@ -1,8 +1,20 @@
 .main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6rem;
+    min-height: 100vh;
+}
+
+.chip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 1px;
+    color: #000;
+    font-size: 12px;
+    font-family: monospace;
+    text-transform: uppercase;
+    font-weight: 500;
 }
diff --git a/styles/theme-tool/app/page.tsx b/styles/theme-tool/app/page.tsx
index 9d171015fdf2c7133444270a061247eb51e17014..df3dc02e34c4a9d3e5e95c0db1f38510b6ee5b8e 100644
--- a/styles/theme-tool/app/page.tsx
+++ b/styles/theme-tool/app/page.tsx
@@ -2,6 +2,7 @@
 import { Scale } from 'chroma-js';
 
 import { color } from '../../src/system/reference';
+import styles from './page.module.css';
 
 function ColorChips({ colorScale }: { colorScale: Scale }) {
     const colors = colorScale.colors(11);
@@ -24,6 +25,7 @@ function ColorChips({ colorScale }: { colorScale: Scale }) {
                         width: '80px',
                         height: '40px',
                     }}
+                    className={styles.chip}
                 >
                     {c}
                 </div>
@@ -33,26 +35,14 @@ function ColorChips({ colorScale }: { colorScale: Scale }) {
 }
 
 export default function Home() {
-    const {
-        grayLight,
-        grayDark,
-        roseDark,
-        roseLight,
-        redDark,
-        redLight,
-        orangeDark,
-        orangeLight,
-        amberDark,
-        amberLight,
-    } = color;
     return (
         <main>
             <div style={{ display: 'flex', gap: '1px' }}>
-                <ColorChips colorScale={grayLight} />
-                <ColorChips colorScale={roseLight} />
-                <ColorChips colorScale={redLight} />
-                <ColorChips colorScale={orangeLight} />
-                <ColorChips colorScale={amberLight} />
+                <ColorChips colorScale={color.grayLight} />
+                <ColorChips colorScale={color.roseLight} />
+                <ColorChips colorScale={color.redLight} />
+                <ColorChips colorScale={color.orangeLight} />
+                <ColorChips colorScale={color.amberLight} />
                 <ColorChips colorScale={color.yellowLight} />
                 <ColorChips colorScale={color.limeLight} />
                 <ColorChips colorScale={color.greenLight} />