diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx
index 54145e916..a0b5ce6f0 100644
--- a/src/components/ActionButton/ActionButton.tsx
+++ b/src/components/ActionButton/ActionButton.tsx
@@ -16,7 +16,7 @@ const getNormalBackgroundColor = (theme: Theme) => ({
 const getHoverBackgroundColor = (theme: Theme) => ({
   primary: theme.palette.primary.highlight,
   warning: colors.red[200],
-  disabled: theme.palette.gray.light,
+  disabled: theme.palette.background.disabled,
 });
 
 const getTextColor = (theme: Theme) => ({
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index c9130dc38..a4a6703eb 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -67,11 +67,11 @@ const getContainerColorStyles = (
       border: `1px solid ${theme.palette.divider}`,
     },
     hover: {
-      background: theme.palette.gray.highlight,
+      background: theme.palette.secondary.highlight,
       border: `1px solid ${theme.palette.divider}`,
     },
     active: {
-      background: theme.palette.gray.highlight,
+      background: theme.palette.secondary.highlight,
       boxShadow: `inset 0 2px ${hexToRgba(theme.palette.black, 0.16)}`,
       border: `1px solid ${theme.palette.divider}`,
     },
@@ -96,6 +96,7 @@ const getContainerColorStyles = (
       border: "none",
     },
   },
+  // クリアボタンは一旦考えないようにします
   clear: {
     normal: {
       background: "none",
diff --git a/src/components/ToggleButton/styled.ts b/src/components/ToggleButton/styled.ts
index 3afe853a4..5078e885d 100644
--- a/src/components/ToggleButton/styled.ts
+++ b/src/components/ToggleButton/styled.ts
@@ -72,13 +72,15 @@ export const Label = styled.label<LabelProps>`
   width: ${({ width }) => width};
   height: calc(1px * 2 + 22px);
   background-color: ${({ active, disabled, theme }) => {
-    let backgroundColor = theme.palette.gray.highlight;
-    if (disabled) {
-      backgroundColor = theme.palette.gray.light;
-    } else if (active) {
-      backgroundColor = theme.palette.background.hint;
+    switch (true) {
+      case disabled:
+        return theme.palette.background.disabled;
+      case active:
+        // MEMO: background には元々 active っていうプロパティがあるんだけど、こういうのも修正しないといけない
+        return theme.palette.background.hint;
+      default:
+        return theme.palette.gray.highlight;
     }
-    return backgroundColor;
   }};
   border: 1px solid
     ${({ active, disabled, theme }) =>
diff --git a/src/lib/react-toast-notification/src/styled.ts b/src/lib/react-toast-notification/src/styled.ts
index 3aac75714..3bea4864d 100644
--- a/src/lib/react-toast-notification/src/styled.ts
+++ b/src/lib/react-toast-notification/src/styled.ts
@@ -104,7 +104,7 @@ export const ToastElementInner = styled.div<{
 }>`
   background-color: ${({ backgroundColor }) => backgroundColor};
   border-radius: ${({ borderRadius }) => borderRadius}px;
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
   color: ${({ color }) => color};
   display: flex;
   margin-bottom: ${({ gutter }) => gutter}px;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index e5892e1fa..cbaad2cf3 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,5 +1,6 @@
 export { Radius } from "./radius";
 export { Space } from "./space";
+export { Shadows } from "./shadows";
 export { BreakPoint } from "./breakPoint";
 export { colors } from "./color";
 export type { Color } from "./color";
diff --git a/src/styles/shadows.ts b/src/styles/shadows.ts
new file mode 100644
index 000000000..75700e702
--- /dev/null
+++ b/src/styles/shadows.ts
@@ -0,0 +1,4 @@
+// shadows は正直 ms 側で参照しないからこっちで列挙しておけばなんとかなりそうな感じはする
+// 実装する側は指定したいやつをこの中から探してくれ、それがない場合は自分で定義してくれって感じ
+// ただ、色については palette のやつを使いたい感じがするので、もしかしたら引数取るかも
+export const Shadows = ["none"];
diff --git a/src/themes/createTheme.ts b/src/themes/createTheme.ts
index 0c41dfe01..858d125df 100644
--- a/src/themes/createTheme.ts
+++ b/src/themes/createTheme.ts
@@ -1,5 +1,5 @@
 import { Palette, createPalette } from "./palette";
-import { Radius, Space, Depth } from "../styles";
+import { Radius, Space, Depth, Shadows } from "../styles";
 import { DepthOptions, depth } from "../styles/depth";
 import { deepmerge } from "../utils/deepmerge";
 import { DeepPartial } from "../types";
@@ -8,6 +8,7 @@ export type ThemeOptions = {
   palette?: DeepPartial<Palette>;
   spacing?: number;
   radius?: number;
+  shadows?: string[];
   depth?: DepthOptions;
 };
 
@@ -15,6 +16,7 @@ export type Theme = {
   palette: Palette;
   spacing: number;
   radius: number;
+  shadows: string[];
   depth: Depth;
 };
 
@@ -23,14 +25,16 @@ export function createTheme(options: ThemeOptions = {}): Theme {
     palette: paletteInput = {},
     spacing: spacingInput,
     radius: radiusInput,
+    shadows: shadowsInput,
     ...other
   } = options;
 
   const palette = createPalette(paletteInput);
   const spacing = spacingInput || Space;
   const radius = radiusInput || Radius;
+  const shadows = shadowsInput || Shadows;
 
-  const theme = deepmerge({ palette, spacing, depth, radius }, other);
+  const theme = deepmerge({ palette, spacing, depth, radius, shadows }, other);
 
   return theme;
 }
diff --git a/src/themes/palette.ts b/src/themes/palette.ts
index 8e6c2da95..fe150ea54 100644
--- a/src/themes/palette.ts
+++ b/src/themes/palette.ts
@@ -23,6 +23,9 @@ export type PaletteBackground = {
   dark: string;
   active: string;
   hint: string;
+  disabled: string;
+  focus: string;
+  hover: string;
 };
 
 export type PaletteIcon = {
@@ -31,10 +34,18 @@ export type PaletteIcon = {
   line: string;
 };
 
+export type PaletteAction = {
+  active: string;
+  hover: string;
+  selected: string;
+  disabled: string;
+};
+
 export type Palette = {
   white: string;
   black: string;
   primary: PaletteColor;
+  secondary: PaletteColor;
   success: PaletteColor;
   warning: PaletteColor;
   danger: PaletteColor;
@@ -43,6 +54,9 @@ export type Palette = {
   background: PaletteBackground;
   divider: string;
   icon: PaletteIcon;
+
+  // =========================
+  action: PaletteAction;
 };
 
 export const palette: Palette = {
@@ -55,6 +69,13 @@ export const palette: Palette = {
     light: colors.blue[200],
     highlight: colors.blue[100],
   },
+  secondary: {
+    deepDark: colors.basic[600],
+    dark: colors.basic[500],
+    main: colors.basic[300],
+    light: colors.basic[200],
+    highlight: colors.basic[100],
+  },
   success: {
     deepDark: colors.green[700],
     dark: colors.green[600],
@@ -95,13 +116,23 @@ export const palette: Palette = {
     dark: colors.blue[40] as string, // TODO
     active: colors.blue[100],
     hint: colors.blue[50] as string, // TODO
+    disabled: colors.basic[200],
+    hover: colors.basic[200],
+    focus: colors.basic[200],
   },
+  // divider は固定値でいい
   divider: colors.basic[400],
   icon: {
     active: colors.blue[500],
     fill: colors.basic[700],
     line: colors.basic[600],
   },
+  action: {
+    active: colors.blue[50] as string,
+    hover: "",
+    selected: "",
+    disabled: colors.basic[200],
+  },
 };
 
 export function createPalette(paletteInput: DeepPartial<Palette>): Palette {