diff --git a/src/app/_components/app-card/app-card.stories.tsx b/src/app/_components/app-card/app-card.stories.tsx
index c37a4b92..d366439b 100644
--- a/src/app/_components/app-card/app-card.stories.tsx
+++ b/src/app/_components/app-card/app-card.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { AppCard } from './app-card';
+import { Link } from 'lucide-react';
 
 const meta: Meta<typeof AppCard> = {
   title: 'app/globals/app-card',
@@ -17,3 +18,12 @@ export const Primary: Story = {
     description: '入力した文字列の長さをカウントします。',
   },
 };
+
+export const EmotionIsElement: Story = {
+  args: {
+    link: '/characters/counter',
+    emotion: <Link className="size-24 text-textHighlight" />,
+    title: '文字数カウンター',
+    description: '入力した文字列の長さをカウントします。',
+  },
+};
diff --git a/src/app/_components/app-card/app-card.tsx b/src/app/_components/app-card/app-card.tsx
index e66bd05b..8106fdf0 100644
--- a/src/app/_components/app-card/app-card.tsx
+++ b/src/app/_components/app-card/app-card.tsx
@@ -1,6 +1,7 @@
 import { Route } from 'next';
 import Link from 'next/link';
 import { Heading } from '../../../components/heading';
+import { ReactNode } from 'react';
 
 export const AppCard = <T extends string>({
   link,
@@ -9,7 +10,7 @@ export const AppCard = <T extends string>({
   description,
 }: {
   link: Route<T>;
-  emotion: string;
+  emotion: ReactNode;
   title: string;
   description: string;
 }) => {
diff --git a/src/app/_styles/globals.css b/src/app/_styles/globals.css
index 1e1bfb7e..325196cb 100644
--- a/src/app/_styles/globals.css
+++ b/src/app/_styles/globals.css
@@ -48,6 +48,12 @@
     /* chart */
     --chart-primary: 45 212 191;
     --chart-empty: 243 244 246;
+
+    /* group */
+    --group-primary: 45 212 191;
+    --group-secondary: 56 189 248;
+    --group-tertiary: 129 140 248;
+    --group-quaternary: 232 121 249;
   }
 
   .dark {
@@ -95,6 +101,12 @@
     /* chart */
     --chart-primary: 94 234 212;
     --chart-empty: 75 85 99;
+
+    /* group */
+    --group-primary: 94 234 212;
+    --group-secondary: 125 211 252;
+    --group-tertiary: 165 180 252;
+    --group-quaternary: 240 171 252;
   }
 
   .app-background {
diff --git a/src/app/designs/_components/rounded-icon/index.ts b/src/app/designs/_components/rounded-icon/index.ts
new file mode 100644
index 00000000..d5b2328b
--- /dev/null
+++ b/src/app/designs/_components/rounded-icon/index.ts
@@ -0,0 +1 @@
+export * from './rounded-icon';
diff --git a/src/app/designs/_components/rounded-icon/rounded-icon.stories.tsx b/src/app/designs/_components/rounded-icon/rounded-icon.stories.tsx
new file mode 100644
index 00000000..1dcedffe
--- /dev/null
+++ b/src/app/designs/_components/rounded-icon/rounded-icon.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RoundedIcon } from './rounded-icon';
+
+const meta: Meta<typeof RoundedIcon> = {
+  title: 'app/designs/rounded-icon',
+  component: RoundedIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof RoundedIcon>;
+
+export const Primary: Story = {};
diff --git a/src/app/designs/_components/rounded-icon/rounded-icon.tsx b/src/app/designs/_components/rounded-icon/rounded-icon.tsx
new file mode 100644
index 00000000..2e90074a
--- /dev/null
+++ b/src/app/designs/_components/rounded-icon/rounded-icon.tsx
@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+export const RoundedIcon: FC = () => {
+  return (
+    <div
+      className="h-24 w-24 bg-textHighlight"
+      style={{
+        borderBottomLeftRadius: '63% 57%',
+        borderBottomRightRadius: '37% 63%',
+        borderTopLeftRadius: '63% 43%',
+        borderTopRightRadius: '37%',
+      }}
+    />
+  );
+};
diff --git a/src/app/designs/layout.tsx b/src/app/designs/layout.tsx
new file mode 100644
index 00000000..64c2f732
--- /dev/null
+++ b/src/app/designs/layout.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import { Heading } from '@/components/heading';
+
+export const metadata = {
+  title: 'Designs',
+  description: '自分だけのデザインを探すための場所です',
+  openGraph: {
+    title: 'Designs',
+    description: '自分だけのデザインを探すための場所です',
+    url: 'https://k8o.me/designs',
+    siteName: 'k8o',
+    locale: 'ja',
+    type: 'website',
+  },
+  twitter: {
+    title: 'Designs',
+    card: 'summary',
+    description: '自分だけのデザインを探すための場所です',
+  },
+};
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-full flex-col gap-6">
+      <Link href="/number">
+        <Heading type="h2">Designs</Heading>
+      </Link>
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/designs/opengraph-image.tsx b/src/app/designs/opengraph-image.tsx
new file mode 100644
index 00000000..f28f5f02
--- /dev/null
+++ b/src/app/designs/opengraph-image.tsx
@@ -0,0 +1,47 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'designs';
+export const size = {
+  width: 1200,
+  height: 600,
+};
+
+export const contentType = 'image/png';
+
+export default async function OpenGraphImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          fontSize: 256,
+          background: '#cbd5e1',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            background: 'white',
+            width: 512,
+            height: 512,
+            display: 'flex',
+            borderRadius: 9999,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          🧑‍🎨
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  );
+}
diff --git a/src/app/designs/page.tsx b/src/app/designs/page.tsx
new file mode 100644
index 00000000..612361d8
--- /dev/null
+++ b/src/app/designs/page.tsx
@@ -0,0 +1,15 @@
+import { AppCard } from '../_components/app-card';
+import { RoundedIcon } from './_components/rounded-icon';
+
+export default function Page() {
+  return (
+    <div className="flex flex-col gap-4">
+      <AppCard
+        link="/designs/rounded"
+        emotion={<RoundedIcon />}
+        title="かどまるラボ"
+        description="角丸を決めてお気に入りの図形を探しましょう"
+      />
+    </div>
+  );
+}
diff --git a/src/app/designs/rounded/_components/control-panel/control-panel.stories.tsx b/src/app/designs/rounded/_components/control-panel/control-panel.stories.tsx
new file mode 100644
index 00000000..6b928ff7
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/control-panel.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlPanel } from './control-panel';
+
+const meta: Meta<typeof ControlPanel> = {
+  title: 'app/designs/rounded/control-panel',
+  component: ControlPanel,
+};
+
+export default meta;
+type Story = StoryObj<typeof ControlPanel>;
+
+export const Primary: Story = {};
diff --git a/src/app/designs/rounded/_components/control-panel/control-panel.tsx b/src/app/designs/rounded/_components/control-panel/control-panel.tsx
new file mode 100644
index 00000000..c81c3741
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/control-panel.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import { FC, KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import { useControlPanel } from './use-control-panel';
+import clsx from 'clsx';
+import { IconButton } from '@/components/icon-button';
+import { ClipboardPenLine } from 'lucide-react';
+import { useClipboard } from '@/hooks/clipboard';
+
+const OperateButton: FC<{
+  label: string;
+  position: {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+  };
+  variable: 'primary' | 'secondary' | 'quaternary' | 'tertiary';
+  onMouseDown: (e: MouseEvent) => void;
+  onTouchStart: (e: TouchEvent) => void;
+  onKeyDown: (e: KeyboardEvent) => void;
+  isActive: boolean;
+}> = ({
+  label,
+  position,
+  variable,
+  onMouseDown,
+  onTouchStart,
+  onKeyDown,
+  isActive,
+}) => {
+  return (
+    <button
+      aria-label={label}
+      className={clsx(
+        'absolute size-4 border border-borderPrimary',
+        variable === 'primary' && 'bg-groupPrimary',
+        variable === 'secondary' && 'bg-groupSecondary',
+        variable === 'quaternary' && 'bg-groupQuaternary',
+        variable === 'tertiary' && 'bg-groupTertiary',
+        isActive &&
+          'border-borderTransparent outline-none ring-4 ring-textDescription',
+        'hover:border-borderTransparent hover:outline-none hover:ring-4 hover:ring-textDescription',
+        'focus-visible:border-borderTransparent focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-textDescription',
+      )}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
+      onKeyDown={onKeyDown}
+      style={position}
+    />
+  );
+};
+
+export const ControlPanel: FC = () => {
+  const {
+    activePosition,
+    containerRef,
+    mouseDownHandler,
+    touchStartHandler,
+    keyDownHandler,
+    borderRadius,
+    position,
+  } = useControlPanel();
+  const { writeClipboard } = useClipboard();
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-8">
+      <div
+        ref={containerRef}
+        className="border-borderPrimar relative size-64 border-2 border-dashed sm:size-96"
+      >
+        <div
+          className="absolute size-full bg-textHighlight"
+          style={{
+            borderRadius,
+          }}
+        />
+        <OperateButton
+          label="左上の上側の丸みを調整する(左右キーで操作します)"
+          variable="primary"
+          isActive={activePosition === 'topLeftX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topLeftX')}
+          onTouchStart={(e) => touchStartHandler(e, 'topLeftX')}
+          onKeyDown={(e) => keyDownHandler(e, 'topLeftX')}
+          position={{
+            top: '-9px',
+            left: `calc(${position.topLeftX}% - 9px)`,
+          }}
+        />
+        <OperateButton
+          label="右上の上側の丸みを調整する(左右キーで操作します)"
+          variable="secondary"
+          isActive={activePosition === 'topRightX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topRightX')}
+          onTouchStart={(e) => touchStartHandler(e, 'topRightX')}
+          onKeyDown={(e) => keyDownHandler(e, 'topRightX')}
+          position={{
+            top: '-9px',
+            right: `calc(${position.topRightX}% - 9px)`,
+          }}
+        />
+        <OperateButton
+          label="左上の左側の丸みを調整する(上下キーで操作します)"
+          variable="primary"
+          isActive={activePosition === 'topLeftY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topLeftY')}
+          onTouchStart={(e) => touchStartHandler(e, 'topLeftY')}
+          onKeyDown={(e) => keyDownHandler(e, 'topLeftY')}
+          position={{
+            top: `calc(${position.topLeftY}% - 9px)`,
+            left: '-9px',
+          }}
+        />
+        <OperateButton
+          label="右上の右側の丸みを調整する(上下キーで操作します)"
+          variable="secondary"
+          isActive={activePosition === 'topRightY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topRightY')}
+          onTouchStart={(e) => touchStartHandler(e, 'topRightY')}
+          onKeyDown={(e) => keyDownHandler(e, 'topRightY')}
+          position={{
+            top: `calc(${position.topRightY}% - 9px)`,
+            right: '-9px',
+          }}
+        />
+        <OperateButton
+          label="左下の左側の丸みを調整する(上下キーで操作します)"
+          variable="quaternary"
+          isActive={activePosition === 'bottomLeftY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomLeftY')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomLeftY')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomLeftY')}
+          position={{
+            bottom: `calc(${position.bottomLeftY}% - 9px)`,
+            left: '-9px',
+          }}
+        />
+        <OperateButton
+          label="右下の右側の丸みを調整する(上下キーで操作します)"
+          variable="tertiary"
+          isActive={activePosition === 'bottomRightY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomRightY')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomRightY')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomRightY')}
+          position={{
+            bottom: `calc(${position.bottomRightY}% - 9px)`,
+            right: '-9px',
+          }}
+        />
+        <OperateButton
+          label="左下の下側の丸みを調整する(左右キーで操作します)"
+          variable="quaternary"
+          isActive={activePosition === 'bottomLeftX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomLeftX')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomLeftX')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomLeftX')}
+          position={{
+            bottom: '-9px',
+            left: `calc(${position.bottomLeftX}% - 9px)`,
+          }}
+        />
+        <OperateButton
+          label="右下の下側の丸みを調整する(左右キーで操作します)"
+          variable="tertiary"
+          isActive={activePosition === 'bottomRightX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomRightX')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomRightX')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomRightX')}
+          position={{
+            bottom: '-9px',
+            right: `calc(${position.bottomRightX}% - 9px)`,
+          }}
+        />
+      </div>
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        <p className="text-2xl font-bold">{borderRadius}</p>
+        <IconButton
+          label="値をコピーする"
+          bg="base"
+          onClick={() =>
+            writeClipboard(`border-radius: ${borderRadius}`)
+          }
+        >
+          <ClipboardPenLine className="size-6" />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/designs/rounded/_components/control-panel/index.ts b/src/app/designs/rounded/_components/control-panel/index.ts
new file mode 100644
index 00000000..25c87d9c
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/index.ts
@@ -0,0 +1 @@
+export * from './control-panel';
diff --git a/src/app/designs/rounded/_components/control-panel/use-control-panel.ts b/src/app/designs/rounded/_components/control-panel/use-control-panel.ts
new file mode 100644
index 00000000..74d5879f
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/use-control-panel.ts
@@ -0,0 +1,226 @@
+import { between } from '@/utils/number/between';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
+
+type Position =
+  | 'topLeftX'
+  | 'topLeftY'
+  | 'topRightX'
+  | 'topRightY'
+  | 'bottomLeftX'
+  | 'bottomLeftY'
+  | 'bottomRightX'
+  | 'bottomRightY';
+
+export const useControlPanel = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<Record<Position, number>>({
+    topLeftX: 63,
+    topLeftY: 37,
+    topRightX: 24,
+    topRightY: 54,
+    bottomLeftX: 53,
+    bottomLeftY: 26,
+    bottomRightX: 32,
+    bottomRightY: 36,
+  });
+  const [activePosition, setActivePosition] =
+    useState<Position | null>(null);
+
+  const borderRadius = useMemo(() => {
+    return `${position.topLeftX}% ${position.topRightX}% ${position.bottomRightX}% ${position.bottomLeftX}% / ${position.topLeftY}% ${position.topRightY}% ${position.bottomRightY}% ${position.bottomLeftY}%`;
+  }, [position]);
+
+  const mouseDownHandler = useCallback(
+    (
+      e: ReactMouseEvent,
+      position:
+        | 'topLeftX'
+        | 'topLeftY'
+        | 'topRightX'
+        | 'topRightY'
+        | 'bottomRightX'
+        | 'bottomRightY'
+        | 'bottomLeftX'
+        | 'bottomLeftY',
+    ) => {
+      e.preventDefault();
+      setActivePosition(position);
+      const mouseUpHandler = (e: MouseEvent) => {
+        setPosition((prev) => {
+          if (!containerRef.current) {
+            return prev;
+          }
+          const rect = containerRef.current.getBoundingClientRect();
+          const newValue = Math.floor(
+            between(
+              position.endsWith('X')
+                ? ((e.clientX - rect.left) / rect.width) * 100
+                : ((e.clientY - rect.top) / rect.height) * 100,
+              0,
+              100,
+            ),
+          );
+          return {
+            ...prev,
+            [position]:
+              (position.startsWith('top') &&
+                position.endsWith('Y')) ||
+              (position.includes('Left') && position.endsWith('X'))
+                ? newValue
+                : 100 - newValue,
+          };
+        });
+      };
+      window.addEventListener('mouseup', () => {
+        setActivePosition(null);
+        window.removeEventListener('mousemove', mouseUpHandler);
+      });
+      window.addEventListener('mousemove', mouseUpHandler);
+    },
+    [],
+  );
+
+  const touchStartHandler = useCallback(
+    (
+      e: ReactTouchEvent,
+      position:
+        | 'topLeftX'
+        | 'topLeftY'
+        | 'topRightX'
+        | 'topRightY'
+        | 'bottomRightX'
+        | 'bottomRightY'
+        | 'bottomLeftX'
+        | 'bottomLeftY',
+    ) => {
+      e.preventDefault();
+      setActivePosition(position);
+      const touchMoveHandler = (e: TouchEvent) => {
+        setPosition((prev) => {
+          const changedTouches = e.changedTouches[0];
+          if (!containerRef.current || !changedTouches) {
+            return prev;
+          }
+          const rect = containerRef.current.getBoundingClientRect();
+          const newValue = Math.floor(
+            between(
+              position.endsWith('X')
+                ? ((changedTouches.clientX - rect.left) /
+                    rect.width) *
+                    100
+                : ((changedTouches.clientY - rect.top) /
+                    rect.height) *
+                    100,
+              0,
+              100,
+            ),
+          );
+          return {
+            ...prev,
+            [position]:
+              (position.startsWith('top') &&
+                position.endsWith('Y')) ||
+              (position.includes('Left') && position.endsWith('X'))
+                ? newValue
+                : 100 - newValue,
+          };
+        });
+      };
+      window.addEventListener('touchend', () => {
+        setActivePosition(null);
+        window.removeEventListener('touchmove', touchMoveHandler);
+      });
+      window.addEventListener('touchmove', touchMoveHandler);
+    },
+    [],
+  );
+
+  const keyDownHandler = useCallback(
+    (
+      e: ReactKeyboardEvent,
+      position:
+        | 'topLeftX'
+        | 'topLeftY'
+        | 'topRightX'
+        | 'topRightY'
+        | 'bottomRightX'
+        | 'bottomRightY'
+        | 'bottomLeftX'
+        | 'bottomLeftY',
+    ) => {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (position.endsWith('LeftX')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowRight' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+        if (position.endsWith('RightX')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowLeft' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (position.startsWith('top') && position.endsWith('Y')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowDown' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+        if (position.startsWith('bottom') && position.endsWith('Y')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowUp' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+      }
+    },
+    [],
+  );
+
+  return {
+    activePosition,
+    containerRef,
+    mouseDownHandler,
+    touchStartHandler,
+    keyDownHandler,
+    borderRadius,
+    position,
+  };
+};
diff --git a/src/app/designs/rounded/layout.tsx b/src/app/designs/rounded/layout.tsx
new file mode 100644
index 00000000..453ec227
--- /dev/null
+++ b/src/app/designs/rounded/layout.tsx
@@ -0,0 +1,32 @@
+import { Heading } from '@/components/heading';
+
+export const metadata = {
+  title: 'かどまるラボ',
+  description: '角丸を決めてお気に入りの図形を探しましょう',
+  openGraph: {
+    title: 'かどまるラボ',
+    description: '角丸を決めてお気に入りの図形を探しましょう',
+    url: 'https://k8o.me/designs/rounded',
+    siteName: 'k8o',
+    locale: 'ja',
+    type: 'website',
+  },
+  twitter: {
+    title: 'かどまるラボ',
+    card: 'summary',
+    description: '角丸を決めてお気に入りの図形を探しましょう',
+  },
+};
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <Heading type="h3">かどまるラボ</Heading>
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/designs/rounded/opengraph-image.tsx b/src/app/designs/rounded/opengraph-image.tsx
new file mode 100644
index 00000000..61da2c48
--- /dev/null
+++ b/src/app/designs/rounded/opengraph-image.tsx
@@ -0,0 +1,52 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'rounded';
+export const size = {
+  width: 1200,
+  height: 600,
+};
+
+export const contentType = 'image/png';
+
+export default async function OpenGraphImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: '#cbd5e1',
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            alignItems: 'center',
+            background: 'white',
+            borderBottomLeftRadius: '63% 57%',
+            borderBottomRightRadius: '37% 63%',
+            borderTopLeftRadius: '63% 43%',
+            borderTopRightRadius: '37%',
+            color: '#0f766e',
+            display: 'flex',
+            fontSize: 64,
+            fontWeight: 'bold',
+            height: 512,
+            justifyContent: 'center',
+            width: 512,
+          }}
+        >
+          かどまるラボ
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  );
+}
diff --git a/src/app/designs/rounded/page.tsx b/src/app/designs/rounded/page.tsx
new file mode 100644
index 00000000..ca341d6d
--- /dev/null
+++ b/src/app/designs/rounded/page.tsx
@@ -0,0 +1,9 @@
+import { ControlPanel } from './_components/control-panel';
+
+export default function Page() {
+  return (
+    <section className="flex h-full flex-col justify-between gap-6 rounded-lg bg-bgBase/55 p-10">
+      <ControlPanel />
+    </section>
+  );
+}
diff --git a/src/app/designs/rounded/twitter-image.tsx b/src/app/designs/rounded/twitter-image.tsx
new file mode 100644
index 00000000..44eb525b
--- /dev/null
+++ b/src/app/designs/rounded/twitter-image.tsx
@@ -0,0 +1,53 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'rounded';
+export const size = {
+  width: 512,
+  height: 512,
+};
+
+export const contentType = 'image/png';
+
+export default async function TwitterImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          alignItems: 'center',
+          background: '#cbd5e1',
+          display: 'flex',
+          fontSize: 192,
+          flexDirection: 'column',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%',
+        }}
+      >
+        <div
+          style={{
+            alignItems: 'center',
+            background: 'white',
+            borderBottomLeftRadius: '63% 57%',
+            borderBottomRightRadius: '37% 63%',
+            borderTopLeftRadius: '63% 43%',
+            borderTopRightRadius: '37%',
+            color: '#0f766e',
+            display: 'flex',
+            fontSize: 64,
+            fontWeight: 'bold',
+            height: 384,
+            justifyContent: 'center',
+            width: 384,
+          }}
+        >
+          かどまるラボ
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  );
+}
diff --git a/src/app/designs/twitter-image.tsx b/src/app/designs/twitter-image.tsx
new file mode 100644
index 00000000..84005a8d
--- /dev/null
+++ b/src/app/designs/twitter-image.tsx
@@ -0,0 +1,47 @@
+import { ImageResponse } from 'next/og';
+
+export const runtime = 'edge';
+
+export const alt = 'designs';
+export const size = {
+  width: 512,
+  height: 512,
+};
+
+export const contentType = 'image/png';
+
+export default async function TwitterImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          alignItems: 'center',
+          background: '#cbd5e1',
+          display: 'flex',
+          fontSize: 192,
+          flexDirection: 'column',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%',
+        }}
+      >
+        <div
+          style={{
+            alignItems: 'center',
+            background: 'white',
+            borderRadius: 9999,
+            display: 'flex',
+            height: 384,
+            justifyContent: 'center',
+            width: 384,
+          }}
+        >
+          🧑‍🎨
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  );
+}
diff --git a/src/app/number/layout.tsx b/src/app/number/layout.tsx
index e8cb6303..c73a9db0 100644
--- a/src/app/number/layout.tsx
+++ b/src/app/number/layout.tsx
@@ -2,18 +2,18 @@ import Link from 'next/link';
 import { Heading } from '../../components/heading';
 
 export const metadata = {
-  title: 'Converter',
+  title: 'Number',
   description: '数値の基数の変換など、便利な変換処理を提供します',
   openGraph: {
-    title: 'Converter',
+    title: 'Number',
     description: '数値の基数の変換など、便利な変換処理を提供します',
-    url: 'https://k8o.me/converter',
+    url: 'https://k8o.me/number',
     siteName: 'k8o',
     locale: 'ja',
     type: 'website',
   },
   twitter: {
-    title: 'Converter',
+    title: 'Number',
     card: 'summary',
     description: '数値の基数の変換など、便利な変換処理を提供します',
   },
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7ac4eaee..1eef2d5b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -62,6 +62,11 @@ export default function Home() {
           />
           <ShowCase.Item link="/number" emotion="🔢" title="Number" />
           <ShowCase.Item link="/colors" emotion="🎨" title="Colors" />
+          <ShowCase.Item
+            link="/designs"
+            emotion="🧑‍🎨"
+            title="Designs"
+          />
           <ShowCase.Item
             link="/quizzes"
             emotion="💡"
diff --git a/src/components/icon-button/icon-button.stories.tsx b/src/components/icon-button/icon-button.stories.tsx
index ebd50785..b654a882 100644
--- a/src/components/icon-button/icon-button.stories.tsx
+++ b/src/components/icon-button/icon-button.stories.tsx
@@ -49,3 +49,13 @@ export const Disabled: Story = {
     children: <ClipboardPenLine className="size-6" />,
   },
 };
+
+export const BgBase: Story = {
+  args: {
+    bg: 'base',
+    onClick: () => {
+      console.log('clicked');
+    },
+    children: <ClipboardPenLine className="size-6" />,
+  },
+};
diff --git a/src/components/icon-button/icon-button.tsx b/src/components/icon-button/icon-button.tsx
index 4d3e1607..6bb527a7 100644
--- a/src/components/icon-button/icon-button.tsx
+++ b/src/components/icon-button/icon-button.tsx
@@ -3,6 +3,7 @@ import { FC, PropsWithChildren, ReactEventHandler } from 'react';
 
 type Props = PropsWithChildren<{
   size?: 'sm' | 'md' | 'lg';
+  bg?: 'transparent' | 'base';
   disabled?: boolean;
   label?: string;
   onClick: ReactEventHandler<HTMLButtonElement>;
@@ -10,6 +11,7 @@ type Props = PropsWithChildren<{
 
 export const IconButton: FC<Props> = ({
   size = 'md',
+  bg = 'transparent',
   disabled = false,
   label,
   onClick,
@@ -19,6 +21,8 @@ export const IconButton: FC<Props> = ({
     <button
       className={cn(
         'inline-flex rounded-full bg-bgTransparent hover:bg-bgHover focus-visible:ring-2 focus-visible:ring-borderFocus active:bg-bgActive',
+        bg === 'base' && 'bg-bgBase/55',
+        bg === 'transparent' && 'bg-bgTransparent',
         size === 'sm' && 'p-1',
         size === 'md' && 'p-2',
         size === 'lg' && 'p-3',
diff --git a/src/components/icon-link/icon-link.stories.tsx b/src/components/icon-link/icon-link.stories.tsx
index dad956fe..7e5002cf 100644
--- a/src/components/icon-link/icon-link.stories.tsx
+++ b/src/components/icon-link/icon-link.stories.tsx
@@ -32,3 +32,9 @@ export const Small: Story = {
     size: 'sm',
   },
 };
+
+export const BgBase: Story = {
+  args: {
+    bg: 'base',
+  },
+};
diff --git a/src/design/color.stories.tsx b/src/design/color.stories.tsx
index 312b3056..e1b58470 100644
--- a/src/design/color.stories.tsx
+++ b/src/design/color.stories.tsx
@@ -243,6 +243,32 @@ const COLORS = {
       darkCode: '#4b5563',
     },
   ],
+  group: [
+    {
+      name: 'Primary',
+      Sample: <Circle className="bg-groupPrimary" />,
+      lightCode: '#2dd4bf',
+      darkCode: '#5eead4',
+    },
+    {
+      name: 'Secondary',
+      Sample: <Circle className="bg-groupSecondary" />,
+      lightCode: '#38bdf8',
+      darkCode: '#7dd3fc',
+    },
+    {
+      name: 'Tertiary',
+      Sample: <Circle className="bg-groupTertiary" />,
+      lightCode: '#818cf8',
+      darkCode: '#a5b4fc',
+    },
+    {
+      name: 'Quaternary',
+      Sample: <Circle className="bg-groupQuaternary" />,
+      lightCode: '#e879f9',
+      darkCode: '#f0abfc',
+    },
+  ],
 } as const satisfies Record<string, Color[]>;
 
 const Component: FC<{ colors: Color[] }> = ({ colors }) => {
@@ -319,3 +345,7 @@ export const Button: StoryObj<typeof Component> = {
 export const Chart: StoryObj<typeof Component> = {
   render: () => <Component colors={COLORS.chart} />,
 };
+
+export const Group: StoryObj<typeof Component> = {
+  render: () => <Component colors={COLORS.group} />,
+};
diff --git a/src/utils/number/between.ts b/src/utils/number/between.ts
new file mode 100644
index 00000000..8e1ddf28
--- /dev/null
+++ b/src/utils/number/between.ts
@@ -0,0 +1,23 @@
+export const between = (
+  value: number,
+  min: number,
+  max: number,
+): number => {
+  return Math.min(Math.max(value, min), max);
+};
+
+if (import.meta.vitest) {
+  describe('between', () => {
+    it('minとmaxの間の値の場合はそのまま返す', () => {
+      expect(between(5, 0, 10)).toBe(5);
+    });
+
+    it('minより小さい場合はminを返す', () => {
+      expect(between(-5, 0, 10)).toBe(0);
+    });
+
+    it('maxより大きい場合はmaxを返す', () => {
+      expect(between(15, 0, 10)).toBe(10);
+    });
+  });
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f01c6c09..87fb39fc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -46,6 +46,11 @@ const config = {
       // chart
       chartPrimary: 'rgb(var(--chart-primary) / <alpha-value>)',
       chartEmpty: 'rgb(var(--chart-empty) / <alpha-value>)',
+      // group
+      groupPrimary: 'rgb(var(--group-primary) / <alpha-value>)',
+      groupSecondary: 'rgb(var(--group-secondary) / <alpha-value>)',
+      groupTertiary: 'rgb(var(--group-tertiary) / <alpha-value>)',
+      groupQuaternary: 'rgb(var(--group-quaternary) / <alpha-value>)',
     },
     extend: {
       fontFamily: {