增加自动配色功能页面。

src/pages/Harmonies.module.css

@@ -0,0 +1,26 @@
+@layer pages {
+  .harmonies_workspace {
+    flex-direction: column;
+  }
+  .explore_section {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .function_side {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    .mode_navigation {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--spacing-xs);
+    }
+  }
+  .preview_side {
+    flex: 1;
+  }
+}

src/pages/Harmonies.tsx

@@ -0,0 +1,34 @@
+import cx from 'clsx';
+import { NavLink, Outlet } from 'react-router-dom';
+import styles from './Harmonies.module.css';
+
+export function Harmonies() {
+  return (
+    <div className={cx('workspace', styles.harmonies_workspace)}>
+      <header>
+        <h3>Color Harmonies</h3>
+        <p>Automatically select color combinations using color theory.</p>
+      </header>
+      <section className={styles.explore_section}>
+        <aside className={styles.function_side}>
+          <div>
+            <h5>Basic color</h5>
+          </div>
+          <div className={styles.mode_navigation}>
+            <NavLink>Complementary</NavLink>
+            <NavLink>Analogous</NavLink>
+            <NavLink>Analogous with Complementary</NavLink>
+            <NavLink>Triadic</NavLink>
+            <NavLink>Split Complementary</NavLink>
+            <NavLink>Tetradic</NavLink>
+            <NavLink>Flip Tetradic</NavLink>
+            <NavLink>Square</NavLink>
+          </div>
+        </aside>
+        <div className={styles.preview_side}>
+          <Outlet />
+        </div>
+      </section>
+    </div>
+  );
+}