diff --git a/.changeset/yummy-boxes-type.md b/.changeset/yummy-boxes-type.md
new file mode 100644
index 00000000..7e26ce51
--- /dev/null
+++ b/.changeset/yummy-boxes-type.md
@@ -0,0 +1,5 @@
+---
+'@genseki/react': minor
+---
+
+Add surface colors
diff --git a/packages/react/src/react/styles/tailwind.css b/packages/react/src/react/styles/tailwind.css
index 7a9a07b3..a0e2d9e9 100644
--- a/packages/react/src/react/styles/tailwind.css
+++ b/packages/react/src/react/styles/tailwind.css
@@ -124,6 +124,7 @@
 
   /* Drizzilify | Senmantic */
   --color-text-correct: var(--color-palm-600);
+  --color-text-tertiary: #94a3b8;
   --color-text-incorrect: var(--color-valencia-600);
   --color-text-accent: var(--color-pumpkin-500);
   --color-text-nontrivial: var(--color-bluegray-800);
@@ -140,7 +141,21 @@
   --color-stroke-verytrival: var(--color-bluegray-200);
 
   --color-surface-correct: var(--color-palm-50);
+  --color-surface-correct-hover: var(--color-palm-500);
   --color-surface-incorrect: var(--color-valencia-50);
+  --color-surface-incorrect-hover: var(--color-red-500);
+  --color-surface-primary: var(--color-white);
+  --color-surface-primary-hover: var(--color-bluegray-100);
+  --color-surface-primary-active: var(--color-bluegray-100);
+  --color-surface-primary-disabled: var(--color-bluegray-50);
+  --color-surface-secondary: var(--color-bluegray-400);
+  --color-surface-tertiary: var(--color-bluegray-50);
+  --color-surface-accent: var(--color-yellow-50);
+  --color-surface-accent-hover: var(--color-yellow-500);
+  --color-surface-info: var(--color-ocean-50);
+  --color-surface-info-hover: var(--color-ocean-500);
+  --color-surface-neutral: #faf5ff;
+  --color-surface-neutral-hover: var(--color-ocean-500);
 
   --font-sans:
     'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',