diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..cabf3fccf
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,26 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "svelte.enable-ts-plugin": true,
+  "eslint.probe": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html",
+    "vue",
+    "markdown",
+    "svelte"
+  ],
+  "eslint.validate": ["svelte"],
+  "prettier.documentSelectors": ["**/*.svelte"],
+  "prettier.singleQuote": true,
+  "prettier.jsxSingleQuote": true,
+  "prettier.singleAttributePerLine": true,
+  "tailwindCSS.classAttributes": ["class", "cx"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cx\\(([\\S\\s]*?)\\)", "'([^']*)'"]
+  ],
+  "[svelte]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/packages/core/package.json b/packages/core/package.json
index 961da2326..3e2fc1cde 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/button/button.svelte b/packages/core/src/lib/button/button.svelte
index 1750f7bc3..0ca770429 100644
--- a/packages/core/src/lib/button/button.svelte
+++ b/packages/core/src/lib/button/button.svelte
@@ -1,6 +1,6 @@
 <!--
 @component
-  
+
 For user triggered actions.
 
 ```svelte
@@ -64,7 +64,7 @@ $: handleDisabled = preventHandler(disabled);
         variant === 'primary' && !disabled,
       'border-gray-9 bg-gray-9 text-white hover:border-black hover:bg-black active:bg-[#000]':
         variant === 'dark' && !disabled,
-      'active-border-[rgba(0,0,0,0.08)] border-transparent text-default hover:bg-[rgba(0,0,0,0.04)] active:bg-[rgba(0,0,0,0.08)]':
+      'border-transparent text-default hover:bg-ghost-light active:border-ghost-medium active:bg-ghost-medium':
         variant === 'ghost' && !disabled,
       'border-danger-dark bg-danger-dark text-white hover:bg-[#aa2a2b] active:bg-[#9e2728]':
         variant === 'danger' && !disabled,
diff --git a/packages/core/theme.ts b/packages/core/theme.ts
index 9feb868a0..d2d234737 100644
--- a/packages/core/theme.ts
+++ b/packages/core/theme.ts
@@ -58,6 +58,10 @@ export const theme = {
       'disabled-dark': '#9c9ca4',
       'disabled-light': '#f2f2f4',
 
+      // Opaque grayscale
+      'ghost-light': 'rgba(0,0,0,0.04)',
+      'ghost-medium': 'rgba(0,0,0,0.08)',
+
       // Brand design colors
       'power-wire': '#ff0047',
       pcb: '#00501f',
diff --git a/packages/legacy/package.json b/packages/legacy/package.json
index 3287ae97b..1f37d4dab 100644
--- a/packages/legacy/package.json
+++ b/packages/legacy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
diff --git a/packages/legacy/src/elements/button/button.svelte b/packages/legacy/src/elements/button/button.svelte
index 5ba16f6b5..081f73fc8 100644
--- a/packages/legacy/src/elements/button/button.svelte
+++ b/packages/legacy/src/elements/button/button.svelte
@@ -81,7 +81,7 @@ const handleParentClick = (event: PointerEvent) => {
         variant === 'primary',
       'border-gray-9 bg-gray-9 text-white hover:border-black hover:bg-black active:bg-[#000]':
         variant === 'inverse-primary',
-      'active-border-[rgba(0,0,0,0.08)] border-transparent hover:bg-[rgba(0,0,0,0.04)] active:bg-[rgba(0,0,0,0.08)]':
+      'border-transparent hover:bg-ghost-light active:border-ghost-medium active:bg-ghost-medium':
         variant === 'ghost' || variant === 'icon' || variant === 'icon-danger',
       'border-danger-dark bg-danger-dark text-white hover:bg-[#aa2a2b] active:bg-[#9e2728]':
         variant === 'danger',