diff --git a/.changeset/fresh-geckos-rule.md b/.changeset/fresh-geckos-rule.md
new file mode 100644
index 000000000..f5eece508
--- /dev/null
+++ b/.changeset/fresh-geckos-rule.md
@@ -0,0 +1,6 @@
+---
+"@hopper-ui/tokens": minor
+"docs": minor
+---
+
+Update to color tokens and new color tokens
diff --git a/apps/docs/content/tokens/semantic/color.mdx b/apps/docs/content/tokens/semantic/color.mdx
index 831b6e55d..fb0bcac66 100644
--- a/apps/docs/content/tokens/semantic/color.mdx
+++ b/apps/docs/content/tokens/semantic/color.mdx
@@ -138,62 +138,62 @@ We do not want to do this for the dark mode, otherwise, we see double the header
 
 ## Data Visualization
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-unavailable", "hop-text"]
+      ["hop-dataviz-unavailable", "hop-dataviz-text"]
     } />
 
     ### Monochromatic - Primary
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-monochromatic-primary"]
+      ["hop-dataviz-monochromatic-primary"]
     } />
 
     ### Monochromatic - Positive
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-monochromatic-positive"]
+      ["hop-dataviz-monochromatic-positive"]
     } />
 
     ### Monochromatic - Negative
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-monochromatic-negative"]
+      ["hop-dataviz-monochromatic-negative"]
     } />
 
     ### Diverging Sequence 1
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-diverging-sequence-1"]
+      ["hop-dataviz-diverging-sequence-1"]
     } />
 
     ### Diverging Sequence 2
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-diverging-sequence-2"]
+      ["hop-dataviz-diverging-sequence-2"]
     } />
 
     ### Categorical - Sequences
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-sequence"]
+      ["hop-dataviz-categorical-sequence"]
     } />
 
     ### Categorical - 2 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-2"]
+      ["hop-dataviz-categorical-2"]
     } />
 
     ### Categorical - 3 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-3"]
+      ["hop-dataviz-categorical-3"]
     } />
 
     ### Categorical - 4 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-4"]
+      ["hop-dataviz-categorical-4"]
     } />
 
     ### Categorical - 5 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-5"]
+      ["hop-dataviz-categorical-5"]
     } />
 
     ### Categorical - 6 Color Groups
     <TableSection categoryKey={categoryKey} tokens={tokens.semantic[categoryKey]} categories={
-      ["hop-categorical-6"]
+      ["hop-dataviz-categorical-6"]
     } />
   </div>
   <div>
@@ -317,7 +317,7 @@ We do not want to do this for the dark mode, otherwise, we see double the header
 
     ## Data Visualization
     <TableSection categoryKey={categoryKey} tokens={tokensDark.semantic[categoryKey]} categories={
-      ["hop-unavailable", "hop-text"]
+      ["hop-dataviz-unavailable", "hop-dataviz-text"]
     } />
   </div>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/apps/docs/datas/tokens-dark.json b/apps/docs/datas/tokens-dark.json
index 37b00769c..c15fcddce 100644
--- a/apps/docs/datas/tokens-dark.json
+++ b/apps/docs/datas/tokens-dark.json
@@ -1021,11 +1021,15 @@
       },
       {
         "name": "hop-decorative-option9-surface-weakest",
-        "value": "#f8f6f3"
+        "value": "#b3b3b1"
       },
       {
         "name": "hop-decorative-option9-surface-weak",
-        "value": "#ecebe8"
+        "value": "#959593"
+      },
+      {
+        "name": "hop-decorative-option9-surface-weak-hover",
+        "value": "#777775"
       },
       {
         "name": "hop-decorative-option9-surface-strong",
@@ -1063,6 +1067,10 @@
         "name": "hop-decorative-option8-surface-weak",
         "value": "#fde6e5"
       },
+      {
+        "name": "hop-decorative-option8-surface-weak-hover",
+        "value": "#ffd6d3"
+      },
       {
         "name": "hop-decorative-option8-surface-strong",
         "value": "#ffbcb7"
@@ -1100,12 +1108,16 @@
         "value": "#f0eae3"
       },
       {
-        "name": "hop-decorative-option7-surface-strong",
+        "name": "hop-decorative-option7-surface-weak-hover",
         "value": "#e5ded6"
       },
+      {
+        "name": "hop-decorative-option7-surface-strong",
+        "value": "#d4cbc0"
+      },
       {
         "name": "hop-decorative-option7-surface-hover",
-        "value": "#e5ded6"
+        "value": "#d4cbc0"
       },
       {
         "name": "hop-decorative-option7-surface",
@@ -1135,6 +1147,10 @@
         "name": "hop-decorative-option5-surface-weak",
         "value": "#d9efff"
       },
+      {
+        "name": "hop-decorative-option5-surface-weak-hover",
+        "value": "#bae6ff"
+      },
       {
         "name": "hop-decorative-option5-surface-strong",
         "value": "#9fd2f7"
@@ -1163,6 +1179,10 @@
         "name": "hop-decorative-option6-surface-weak",
         "value": "#fff2b8"
       },
+      {
+        "name": "hop-decorative-option6-surface-weak-hover",
+        "value": "#f7e694"
+      },
       {
         "name": "hop-decorative-option6-surface-strong",
         "value": "#eac96d"
@@ -1199,6 +1219,10 @@
         "name": "hop-decorative-option4-surface-weak",
         "value": "#e3f3b9"
       },
+      {
+        "name": "hop-decorative-option4-surface-weak-hover",
+        "value": "#cde8ac"
+      },
       {
         "name": "hop-decorative-option4-surface-strong",
         "value": "#aad89d"
@@ -1239,6 +1263,10 @@
         "name": "hop-decorative-option3-surface-weak",
         "value": "#ffe8d3"
       },
+      {
+        "name": "hop-decorative-option3-surface-weak-hover",
+        "value": "#ffd8be"
+      },
       {
         "name": "hop-decorative-option3-surface-hover",
         "value": "#ff9b3f"
@@ -1271,6 +1299,10 @@
         "name": "hop-decorative-option2-surface-weak",
         "value": "#cff4ef"
       },
+      {
+        "name": "hop-decorative-option2-surface-weak-hover",
+        "value": "#bde8e1"
+      },
       {
         "name": "hop-decorative-option2-surface-strong",
         "value": "#a3d6cb"
@@ -1311,6 +1343,10 @@
         "name": "hop-decorative-option1-surface-weak",
         "value": "#e6ebff"
       },
+      {
+        "name": "hop-decorative-option1-surface-weak-hover",
+        "value": "#d6e0ff"
+      },
       {
         "name": "hop-decorative-option1-surface-hover",
         "value": "#95b1ff"
diff --git a/apps/docs/datas/tokens.json b/apps/docs/datas/tokens.json
index 48b8e13f2..e36499224 100644
--- a/apps/docs/datas/tokens.json
+++ b/apps/docs/datas/tokens.json
@@ -1033,11 +1033,15 @@
       },
       {
         "name": "hop-decorative-option9-surface-weak",
-        "value": "#ecebe8"
+        "value": "#959593"
+      },
+      {
+        "name": "hop-decorative-option9-surface-weak-hover",
+        "value": "#777775"
       },
       {
         "name": "hop-decorative-option9-surface-weakest",
-        "value": "#f8f6f3"
+        "value": "#b3b3b1"
       },
       {
         "name": "hop-decorative-option9-text",
@@ -1063,9 +1067,13 @@
         "name": "hop-decorative-option8-surface-weak",
         "value": "#fde6e5"
       },
+      {
+        "name": "hop-decorative-option8-surface-weak-hover",
+        "value": "#ffd6d3"
+      },
       {
         "name": "hop-decorative-option8-surface-hover",
-        "value": "#ff8e8e"
+        "value": "#ffbcb7"
       },
       {
         "name": "hop-decorative-option8-surface-strong",
@@ -1100,12 +1108,16 @@
         "value": "#f0eae3"
       },
       {
-        "name": "hop-decorative-option7-surface-strong",
+        "name": "hop-decorative-option7-surface-weak-hover",
         "value": "#e5ded6"
       },
+      {
+        "name": "hop-decorative-option7-surface-strong",
+        "value": "#d4cbc0"
+      },
       {
         "name": "hop-decorative-option7-surface-hover",
-        "value": "#e5ded6"
+        "value": "#d4cbc0"
       },
       {
         "name": "hop-decorative-option7-surface",
@@ -1167,6 +1179,10 @@
         "name": "hop-decorative-option6-surface-weak",
         "value": "#fff2b8"
       },
+      {
+        "name": "hop-decorative-option6-surface-weak-hover",
+        "value": "#f7e694"
+      },
       {
         "name": "hop-decorative-option6-surface-hover",
         "value": "#eac96d"
@@ -1203,6 +1219,10 @@
         "name": "hop-decorative-option4-surface-weak",
         "value": "#e3f3b9"
       },
+      {
+        "name": "hop-decorative-option4-surface-weak-hover",
+        "value": "#cde8ac"
+      },
       {
         "name": "hop-decorative-option4-surface-strong",
         "value": "#aad89d"
@@ -1233,7 +1253,11 @@
       },
       {
         "name": "hop-decorative-option3-surface-weak",
-        "value": "#ffbf92"
+        "value": "#ffe8d3"
+      },
+      {
+        "name": "hop-decorative-option3-surface-weak-hover",
+        "value": "#ffd8be"
       },
       {
         "name": "hop-decorative-option3-surface-weakest",
@@ -1249,7 +1273,7 @@
       },
       {
         "name": "hop-decorative-option3-surface",
-        "value": "#ff9b3f"
+        "value": "#ffbf92"
       },
       {
         "name": "hop-decorative-option3-icon",
@@ -1275,6 +1299,10 @@
         "name": "hop-decorative-option2-surface-weak",
         "value": "#cff4ef"
       },
+      {
+        "name": "hop-decorative-option2-surface-weak-hover",
+        "value": "#bde8e1"
+      },
       {
         "name": "hop-decorative-option2-surface-strong",
         "value": "#a3d6cb"
@@ -1307,6 +1335,10 @@
         "name": "hop-decorative-option1-surface-weak",
         "value": "#e6ebff"
       },
+      {
+        "name": "hop-decorative-option1-surface-weak-hover",
+        "value": "#d6e0ff"
+      },
       {
         "name": "hop-decorative-option1-surface-weakest",
         "value": "#f5f6ff"
@@ -1461,7 +1493,7 @@
       },
       {
         "name": "hop-neutral-surface-weak-hover",
-        "value": "#ecebe8"
+        "value": "#e0dfdd"
       },
       {
         "name": "hop-neutral-border-weakest",
diff --git a/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts b/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts
index 051cd42cc..a6d830ce1 100644
--- a/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts
+++ b/packages/styled-system/src/tokens/generated/dark-semantic-tokens.ts
@@ -68,8 +68,9 @@ export const DarkSemanticTokens = {
     "--hop-primary-surface-active": "var(--hop-sapphire-800)",
     "--hop-decorative-option9-border": "var(--hop-rock-400)",
     "--hop-decorative-option9-icon": "var(--hop-samoyed)",
-    "--hop-decorative-option9-surface-weakest": "var(--hop-rock-25)",
-    "--hop-decorative-option9-surface-weak": "var(--hop-rock-50)",
+    "--hop-decorative-option9-surface-weakest": "var(--hop-rock-200)",
+    "--hop-decorative-option9-surface-weak": "var(--hop-rock-300)",
+    "--hop-decorative-option9-surface-weak-hover": "var(--hop-rock-400)",
     "--hop-decorative-option9-surface-strong": "var(--hop-rock-800)",
     "--hop-decorative-option9-surface-hover": "var(--hop-rock-500)",
     "--hop-decorative-option9-surface": "var(--hop-rock-400)",
@@ -79,6 +80,7 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option8-icon": "var(--hop-amanita-900)",
     "--hop-decorative-option8-surface-weakest": "var(--hop-amanita-25)",
     "--hop-decorative-option8-surface-weak": "var(--hop-amanita-50)",
+    "--hop-decorative-option8-surface-weak-hover": "var(--hop-amanita-75)",
     "--hop-decorative-option8-surface-strong": "var(--hop-amanita-100)",
     "--hop-decorative-option8-surface-hover": "var(--hop-amanita-200)",
     "--hop-decorative-option8-text-weak": "var(--hop-amanita-300)",
@@ -88,8 +90,9 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option7-icon": "var(--hop-toad-900)",
     "--hop-decorative-option7-surface-weakest": "var(--hop-toad-25)",
     "--hop-decorative-option7-surface-weak": "var(--hop-toad-50)",
-    "--hop-decorative-option7-surface-strong": "var(--hop-toad-75)",
-    "--hop-decorative-option7-surface-hover": "var(--hop-toad-75)",
+    "--hop-decorative-option7-surface-weak-hover": "var(--hop-toad-75)",
+    "--hop-decorative-option7-surface-strong": "var(--hop-toad-100)",
+    "--hop-decorative-option7-surface-hover": "var(--hop-toad-100)",
     "--hop-decorative-option7-surface": "var(--hop-toad-50)",
     "--hop-decorative-option7-text-weak": "var(--hop-toad-500)",
     "--hop-decorative-option7-text": "var(--hop-toad-900)",
@@ -97,6 +100,7 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option5-text": "var(--hop-coastal-900)",
     "--hop-decorative-option5-surface-weakest": "var(--hop-coastal-25)",
     "--hop-decorative-option5-surface-weak": "var(--hop-coastal-50)",
+    "--hop-decorative-option5-surface-weak-hover": "var(--hop-coastal-75)",
     "--hop-decorative-option5-surface-strong": "var(--hop-coastal-100)",
     "--hop-decorative-option5-surface-hover": "var(--hop-coastal-100)",
     "--hop-decorative-option5-surface": "var(--hop-coastal-75)",
@@ -104,6 +108,7 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option5-icon": "var(--hop-coastal-900)",
     "--hop-decorative-option6-surface-weakest": "var(--hop-sunken-treasure-25)",
     "--hop-decorative-option6-surface-weak": "var(--hop-sunken-treasure-50)",
+    "--hop-decorative-option6-surface-weak-hover": "var(--hop-sunken-treasure-75)",
     "--hop-decorative-option6-surface-strong": "var(--hop-sunken-treasure-100)",
     "--hop-decorative-option6-surface-hover": "var(--hop-sunken-treasure-100)",
     "--hop-decorative-option6-surface": "var(--hop-sunken-treasure-75)",
@@ -113,6 +118,7 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option6-text-weak": "var(--hop-sunken-treasure-200)",
     "--hop-decorative-option4-surface-weakest": "var(--hop-moss-25)",
     "--hop-decorative-option4-surface-weak": "var(--hop-moss-50)",
+    "--hop-decorative-option4-surface-weak-hover": "var(--hop-moss-75)",
     "--hop-decorative-option4-surface-strong": "var(--hop-moss-100)",
     "--hop-decorative-option4-surface-hover": "var(--hop-moss-100)",
     "--hop-decorative-option4-surface": "var(--hop-moss-75)",
@@ -123,6 +129,7 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option3-surface-strong": "var(--hop-koi-200)",
     "--hop-decorative-option3-surface-weakest": "var(--hop-koi-25)",
     "--hop-decorative-option3-surface-weak": "var(--hop-koi-50)",
+    "--hop-decorative-option3-surface-weak-hover": "var(--hop-koi-75)",
     "--hop-decorative-option3-surface-hover": "var(--hop-koi-200)",
     "--hop-decorative-option3-surface": "var(--hop-koi-100)",
     "--hop-decorative-option3-border": "var(--hop-koi-400)",
@@ -131,6 +138,7 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option3-text-weak": "var(--hop-koi-300)",
     "--hop-decorative-option2-surface-weakest": "var(--hop-quetzal-25)",
     "--hop-decorative-option2-surface-weak": "var(--hop-quetzal-50)",
+    "--hop-decorative-option2-surface-weak-hover": "var(--hop-quetzal-75)",
     "--hop-decorative-option2-surface-strong": "var(--hop-quetzal-100)",
     "--hop-decorative-option2-surface-hover": "var(--hop-quetzal-100)",
     "--hop-decorative-option2-surface": "var(--hop-quetzal-75)",
@@ -141,6 +149,7 @@ export const DarkSemanticTokens = {
     "--hop-decorative-option1-surface-strong": "var(--hop-sapphire-200)",
     "--hop-decorative-option1-surface-weakest": "var(--hop-sapphire-25)",
     "--hop-decorative-option1-surface-weak": "var(--hop-sapphire-50)",
+    "--hop-decorative-option1-surface-weak-hover": "var(--hop-sapphire-75)",
     "--hop-decorative-option1-surface-hover": "var(--hop-sapphire-200)",
     "--hop-decorative-option1-surface": "var(--hop-sapphire-100)",
     "--hop-decorative-option1-text-weak": "var(--hop-sapphire-300)",
diff --git a/packages/styled-system/src/tokens/generated/light-tokens.ts b/packages/styled-system/src/tokens/generated/light-tokens.ts
index 6130c84da..99e11d3af 100644
--- a/packages/styled-system/src/tokens/generated/light-tokens.ts
+++ b/packages/styled-system/src/tokens/generated/light-tokens.ts
@@ -279,15 +279,17 @@ export const SemanticTokens = {
     "--hop-decorative-option9-surface": "var(--hop-rock-400)",
     "--hop-decorative-option9-surface-strong": "var(--hop-rock-800)",
     "--hop-decorative-option9-surface-hover": "var(--hop-rock-500)",
-    "--hop-decorative-option9-surface-weak": "var(--hop-rock-50)",
-    "--hop-decorative-option9-surface-weakest": "var(--hop-rock-25)",
+    "--hop-decorative-option9-surface-weak": "var(--hop-rock-300)",
+    "--hop-decorative-option9-surface-weak-hover": "var(--hop-rock-400)",
+    "--hop-decorative-option9-surface-weakest": "var(--hop-rock-200)",
     "--hop-decorative-option9-text": "var(--hop-samoyed)",
     "--hop-decorative-option9-text-weak": "var(--hop-rock-300)",
     "--hop-decorative-option9-border": "var(--hop-rock-100)",
     "--hop-decorative-option8-icon": "var(--hop-amanita-900)",
     "--hop-decorative-option8-surface-weakest": "var(--hop-amanita-25)",
     "--hop-decorative-option8-surface-weak": "var(--hop-amanita-50)",
-    "--hop-decorative-option8-surface-hover": "var(--hop-amanita-200)",
+    "--hop-decorative-option8-surface-weak-hover": "var(--hop-amanita-75)",
+    "--hop-decorative-option8-surface-hover": "var(--hop-amanita-100)",
     "--hop-decorative-option8-surface-strong": "var(--hop-amanita-100)",
     "--hop-decorative-option8-text-weak": "var(--hop-amanita-300)",
     "--hop-decorative-option8-surface": "var(--hop-amanita-75)",
@@ -296,8 +298,9 @@ export const SemanticTokens = {
     "--hop-decorative-option7-icon": "var(--hop-toad-900)",
     "--hop-decorative-option7-surface-weakest": "var(--hop-toad-25)",
     "--hop-decorative-option7-surface-weak": "var(--hop-toad-50)",
-    "--hop-decorative-option7-surface-strong": "var(--hop-toad-75)",
-    "--hop-decorative-option7-surface-hover": "var(--hop-toad-75)",
+    "--hop-decorative-option7-surface-weak-hover": "var(--hop-toad-75)",
+    "--hop-decorative-option7-surface-strong": "var(--hop-toad-100)",
+    "--hop-decorative-option7-surface-hover": "var(--hop-toad-100)",
     "--hop-decorative-option7-surface": "var(--hop-toad-75)",
     "--hop-decorative-option7-text-weak": "var(--hop-toad-500)",
     "--hop-decorative-option7-text": "var(--hop-toad-900)",
@@ -313,6 +316,7 @@ export const SemanticTokens = {
     "--hop-decorative-option5-border": "var(--hop-coastal-100)",
     "--hop-decorative-option6-surface-weakest": "var(--hop-sunken-treasure-25)",
     "--hop-decorative-option6-surface-weak": "var(--hop-sunken-treasure-50)",
+    "--hop-decorative-option6-surface-weak-hover": "var(--hop-sunken-treasure-75)",
     "--hop-decorative-option6-surface-hover": "var(--hop-sunken-treasure-100)",
     "--hop-decorative-option6-surface-strong": "var(--hop-sunken-treasure-100)",
     "--hop-decorative-option6-surface": "var(--hop-sunken-treasure-75)",
@@ -322,6 +326,7 @@ export const SemanticTokens = {
     "--hop-decorative-option6-border": "var(--hop-sunken-treasure-100)",
     "--hop-decorative-option4-surface-weakest": "var(--hop-moss-25)",
     "--hop-decorative-option4-surface-weak": "var(--hop-moss-50)",
+    "--hop-decorative-option4-surface-weak-hover": "var(--hop-moss-75)",
     "--hop-decorative-option4-surface-strong": "var(--hop-moss-100)",
     "--hop-decorative-option4-surface-hover": "var(--hop-moss-100)",
     "--hop-decorative-option4-surface": "var(--hop-moss-75)",
@@ -329,17 +334,19 @@ export const SemanticTokens = {
     "--hop-decorative-option4-text-weak": "var(--hop-moss-400)",
     "--hop-decorative-option4-text": "var(--hop-moss-900)",
     "--hop-decorative-option4-border": "var(--hop-moss-100)",
-    "--hop-decorative-option3-surface-weak": "var(--hop-koi-100)",
+    "--hop-decorative-option3-surface-weak": "var(--hop-koi-50)",
+    "--hop-decorative-option3-surface-weak-hover": "var(--hop-koi-75)",
     "--hop-decorative-option3-surface-weakest": "var(--hop-koi-25)",
     "--hop-decorative-option3-surface-strong": "var(--hop-koi-200)",
     "--hop-decorative-option3-surface-hover": "var(--hop-koi-200)",
-    "--hop-decorative-option3-surface": "var(--hop-koi-200)",
+    "--hop-decorative-option3-surface": "var(--hop-koi-100)",
     "--hop-decorative-option3-icon": "var(--hop-koi-900)",
     "--hop-decorative-option3-text": "var(--hop-koi-900)",
     "--hop-decorative-option3-text-weak": "var(--hop-koi-300)",
     "--hop-decorative-option3-border": "var(--hop-koi-100)",
     "--hop-decorative-option2-surface-weakest": "var(--hop-quetzal-25)",
     "--hop-decorative-option2-surface-weak": "var(--hop-quetzal-50)",
+    "--hop-decorative-option2-surface-weak-hover": "var(--hop-quetzal-75)",
     "--hop-decorative-option2-surface-strong": "var(--hop-quetzal-100)",
     "--hop-decorative-option2-surface": "var(--hop-quetzal-75)",
     "--hop-decorative-option2-surface-hover": "var(--hop-quetzal-100)",
@@ -348,6 +355,7 @@ export const SemanticTokens = {
     "--hop-decorative-option2-icon": "var(--hop-quetzal-900)",
     "--hop-decorative-option2-border": "var(--hop-quetzal-100)",
     "--hop-decorative-option1-surface-weak": "var(--hop-sapphire-50)",
+    "--hop-decorative-option1-surface-weak-hover": "var(--hop-sapphire-75)",
     "--hop-decorative-option1-surface-weakest": "var(--hop-sapphire-25)",
     "--hop-decorative-option1-surface-strong": "var(--hop-sapphire-200)",
     "--hop-decorative-option1-surface-hover": "var(--hop-sapphire-200)",
@@ -386,7 +394,7 @@ export const SemanticTokens = {
     "--hop-neutral-icon-active": "var(--hop-samoyed)",
     "--hop-neutral-border-hover": "var(--hop-rock-300)",
     "--hop-neutral-border-active": "var(--hop-rock-800)",
-    "--hop-neutral-surface-weak-hover": "var(--hop-rock-50)",
+    "--hop-neutral-surface-weak-hover": "var(--hop-rock-75)",
     "--hop-neutral-border-weakest": "var(--hop-rock-50)",
     "--hop-neutral-surface-weakest": "var(--hop-rock-25)",
     "--hop-warning-icon-weakest": "var(--hop-koi-100)",
diff --git a/packages/tokens/src/tokens/semantic/dark/colors.tokens.json b/packages/tokens/src/tokens/semantic/dark/colors.tokens.json
index 678036ab9..4789d8363 100644
--- a/packages/tokens/src/tokens/semantic/dark/colors.tokens.json
+++ b/packages/tokens/src/tokens/semantic/dark/colors.tokens.json
@@ -269,11 +269,15 @@
             },
             "surface-weakest": {
                 "$type": "color",
-                "$value": "{rock.25}"
+                "$value": "{rock.200}"
             },
             "surface-weak": {
                 "$type": "color",
-                "$value": "{rock.50}"
+                "$value": "{rock.300}"
+            },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{rock.400}"
             },
             "surface-strong": {
                 "$type": "color",
@@ -313,6 +317,10 @@
                 "$type": "color",
                 "$value": "{amanita.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{amanita.75}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{amanita.100}"
@@ -351,13 +359,17 @@
                 "$type": "color",
                 "$value": "{toad.50}"
             },
-            "surface-strong": {
+            "surface-weak-hover": {
                 "$type": "color",
                 "$value": "{toad.75}"
             },
+            "surface-strong": {
+                "$type": "color",
+                "$value": "{toad.100}"
+            },
             "surface-hover": {
                 "$type": "color",
-                "$value": "{toad.75}"
+                "$value": "{toad.100}"
             },
             "surface": {
                 "$type": "color",
@@ -389,6 +401,10 @@
                 "$type": "color",
                 "$value": "{coastal.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{coastal.75}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{coastal.100}"
@@ -419,6 +435,10 @@
                 "$type": "color",
                 "$value": "{sunken-treasure.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{sunken-treasure.75}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{sunken-treasure.100}"
@@ -457,6 +477,10 @@
                 "$type": "color",
                 "$value": "{moss.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{moss.75}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{moss.100}"
@@ -499,6 +523,10 @@
                 "$type": "color",
                 "$value": "{koi.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{koi.75}"
+            },
             "surface-hover": {
                 "$type": "color",
                 "$value": "{koi.200}"
@@ -533,6 +561,10 @@
                 "$type": "color",
                 "$value": "{quetzal.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{quetzal.75}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{quetzal.100}"
@@ -575,6 +607,10 @@
                 "$type": "color",
                 "$value": "{sapphire.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{sapphire.75}"
+            },
             "surface-hover": {
                 "$type": "color",
                 "$value": "{sapphire.200}"
diff --git a/packages/tokens/src/tokens/semantic/light/colors.tokens.json b/packages/tokens/src/tokens/semantic/light/colors.tokens.json
index 8dc7ee17e..e96f520d3 100644
--- a/packages/tokens/src/tokens/semantic/light/colors.tokens.json
+++ b/packages/tokens/src/tokens/semantic/light/colors.tokens.json
@@ -281,11 +281,15 @@
             },
             "surface-weak": {
                 "$type": "color",
-                "$value": "{rock.50}"
+                "$value": "{rock.300}"
+            },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{rock.400}"
             },
             "surface-weakest": {
                 "$type": "color",
-                "$value": "{rock.25}"
+                "$value": "{rock.200}"
             },
             "text": {
                 "$type": "color",
@@ -313,9 +317,13 @@
                 "$type": "color",
                 "$value": "{amanita.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{amanita.75}"
+            },
             "surface-hover": {
                 "$type": "color",
-                "$value": "{amanita.200}"
+                "$value": "{amanita.100}"
             },
             "surface-strong": {
                 "$type": "color",
@@ -351,13 +359,17 @@
                 "$type": "color",
                 "$value": "{toad.50}"
             },
-            "surface-strong": {
+            "surface-weak-hover": {
                 "$type": "color",
                 "$value": "{toad.75}"
             },
+            "surface-strong": {
+                "$type": "color",
+                "$value": "{toad.100}"
+            },
             "surface-hover": {
                 "$type": "color",
-                "$value": "{toad.75}"
+                "$value": "{toad.100}"
             },
             "surface": {
                 "$type": "color",
@@ -423,6 +435,10 @@
                 "$type": "color",
                 "$value": "{sunken-treasure.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{sunken-treasure.75}"
+            },
             "surface-hover": {
                 "$type": "color",
                 "$value": "{sunken-treasure.100}"
@@ -461,6 +477,10 @@
                 "$type": "color",
                 "$value": "{moss.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{moss.75}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{moss.100}"
@@ -493,7 +513,11 @@
         "option3": {
             "surface-weak": {
                 "$type": "color",
-                "$value": "{koi.100}"
+                "$value": "{koi.50}"
+            },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{koi.75}"
             },
             "surface-weakest": {
                 "$type": "color",
@@ -509,7 +533,7 @@
             },
             "surface": {
                 "$type": "color",
-                "$value": "{koi.200}"
+                "$value": "{koi.100}"
             },
             "icon": {
                 "$type": "color",
@@ -537,6 +561,10 @@
                 "$type": "color",
                 "$value": "{quetzal.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{quetzal.75}"
+            },
             "surface-strong": {
                 "$type": "color",
                 "$value": "{quetzal.100}"
@@ -571,6 +599,10 @@
                 "$type": "color",
                 "$value": "{sapphire.50}"
             },
+            "surface-weak-hover": {
+                "$type": "color",
+                "$value": "{sapphire.75}"
+            },
             "surface-weakest": {
                 "$type": "color",
                 "$value": "{sapphire.25}"
@@ -728,7 +760,7 @@
         },
         "surface-weak-hover": {
             "$type": "color",
-            "$value": "{rock.50}"
+            "$value": "{rock.75}"
         },
         "border-weakest": {
             "$type": "color",