diff --git a/src/app.css b/src/app.css
index 31e5d2f5e..b6b5485cc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -42,6 +42,16 @@
   --color-warning-border: rgb(245 158 11 / 0.3);
   --color-warning-text: #fde68a;
   --color-warning-action: #fcd34d;
+  --color-success: #4ade80;
+  --color-success-bg: #16a34a;
+  --color-success-bg-hover: #15803d;
+  --color-code-tag: #7dd3fc;
+  --color-code-attribute: #c4b5fd;
+  --color-code-string: #86efac;
+  --color-code-number: #fca5a5;
+  --color-code-punctuation: #888888;
+  --color-checkerboard: #3a3a3a;
+  --color-checkerboard-muted: #4a4a4a;
 }
 
 html[data-theme='light'] {
@@ -58,6 +68,16 @@ html[data-theme='light'] {
   --color-warning-border: rgb(245 158 11 / 0.32);
   --color-warning-text: #92400e;
   --color-warning-action: #78350f;
+  --color-success: #15803d;
+  --color-success-bg: #16a34a;
+  --color-success-bg-hover: #15803d;
+  --color-code-tag: #0369a1;
+  --color-code-attribute: #6d28d9;
+  --color-code-string: #15803d;
+  --color-code-number: #b91c1c;
+  --color-code-punctuation: #64748b;
+  --color-checkerboard: #d1d5db;
+  --color-checkerboard-muted: #e5e7eb;
 }
 
 html,
diff --git a/src/components/CodePanel.vue b/src/components/CodePanel.vue
index d35717e76..8d8c9cc72 100644
--- a/src/components/CodePanel.vue
+++ b/src/components/CodePanel.vue
@@ -76,7 +76,7 @@ function copyReference() {
           title="Copy JSX prop reference to clipboard"
           @click="copyReference"
         >
-          <icon-lucide-check v-if="copiedRef" class="size-3 text-green-400" />
+          <icon-lucide-check v-if="copiedRef" class="size-3 text-[var(--color-success)]" />
           <icon-lucide-book-open v-else class="size-3" />
         </button>
         <button
@@ -84,7 +84,7 @@ function copyReference() {
           class="flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-muted hover:bg-hover hover:text-surface"
           @click="copyCode"
         >
-          <icon-lucide-check v-if="copied" class="size-3 text-green-400" />
+          <icon-lucide-check v-if="copied" class="size-3 text-[var(--color-success)]" />
           <icon-lucide-copy v-else class="size-3" />
           {{ copied ? dialogs.copied : dialogs.copy }}
         </button>
@@ -115,25 +115,25 @@ function copyReference() {
 
 <style scoped>
 .token.tag {
-  color: #7dd3fc;
+  color: var(--color-code-tag);
 }
 .token.attr-name {
-  color: #c4b5fd;
+  color: var(--color-code-attribute);
 }
 .token.attr-value,
 .token.string {
-  color: #86efac;
+  color: var(--color-code-string);
 }
 .token.number {
-  color: #fca5a5;
+  color: var(--color-code-number);
 }
 .token.punctuation {
-  color: #888;
+  color: var(--color-code-punctuation);
 }
 .token.boolean {
-  color: #fca5a5;
+  color: var(--color-code-number);
 }
 .token.keyword {
-  color: #c4b5fd;
+  color: var(--color-code-attribute);
 }
 </style>
diff --git a/src/components/CollabPanel/CollabSharePopover.vue b/src/components/CollabPanel/CollabSharePopover.vue
index 5768eeb09..e923f672a 100644
--- a/src/components/CollabPanel/CollabSharePopover.vue
+++ b/src/components/CollabPanel/CollabSharePopover.vue
@@ -19,9 +19,9 @@ const cls = usePopoverUI({ content: 'z-50 w-72 p-3' })
         class="flex h-7 cursor-pointer items-center gap-1.5 rounded-md border-none px-3 text-xs font-medium transition-colors"
         :class="
           collab.state.connected
-            ? 'bg-green-600 text-white hover:bg-green-700'
+            ? 'bg-[var(--color-success-bg)] text-white hover:bg-[var(--color-success-bg-hover)]'
             : collab.isJoining
-              ? 'animate-pulse bg-amber-600 text-white'
+              ? 'animate-pulse border border-[var(--color-warning-border)] bg-[var(--color-warning-bg)] text-[var(--color-warning-text)]'
               : 'bg-accent text-white hover:bg-accent/90'
         "
       >
diff --git a/src/components/properties/ExportSection.vue b/src/components/properties/ExportSection.vue
index 27b93acf3..4e6442f87 100644
--- a/src/components/properties/ExportSection.vue
+++ b/src/components/properties/ExportSection.vue
@@ -186,7 +186,8 @@ onScopeDispose(() => {
         class="block w-full"
         style="
           image-rendering: auto;
-          background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 50% / 16px 16px;
+          background: repeating-conic-gradient(var(--color-checkerboard) 0% 25%, transparent 0% 50%)
+            50% / 16px 16px;
         "
       />
     </div>
diff --git a/src/components/ui/picker-slider.ts b/src/components/ui/picker-slider.ts
index 133dab8b7..ab8439ddb 100644
--- a/src/components/ui/picker-slider.ts
+++ b/src/components/ui/picker-slider.ts
@@ -16,7 +16,7 @@ const pickerSlider = tv({
     checkerboard: {
       true: {
         track:
-          'bg-[#333] bg-[image:linear-gradient(45deg,#444_25%,transparent_25%),linear-gradient(-45deg,#444_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#444_75%),linear-gradient(-45deg,transparent_75%,#444_75%)] bg-[size:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0]'
+          'bg-[var(--color-checkerboard)] bg-[image:linear-gradient(45deg,var(--color-checkerboard-muted)_25%,transparent_25%),linear-gradient(-45deg,var(--color-checkerboard-muted)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,var(--color-checkerboard-muted)_75%),linear-gradient(-45deg,transparent_75%,var(--color-checkerboard-muted)_75%)] bg-[size:8px_8px] bg-[position:0_0,0_4px,4px_-4px,-4px_0]'
       },
       false: {}
     }
diff --git a/src/components/ui/toast.ts b/src/components/ui/toast.ts
index f36dc773f..faeb6f9aa 100644
--- a/src/components/ui/toast.ts
+++ b/src/components/ui/toast.ts
@@ -4,12 +4,13 @@ import { tv } from 'tailwind-variants'
 import type { ToastVariant } from '@/app/shell/ui'
 
 const toast = tv({
-  base: 'flex max-w-sm items-start gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-white shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1 data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1 data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)]',
+  base: 'flex max-w-sm items-start gap-1.5 rounded-md px-2.5 py-1.5 text-xs shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:slide-out-to-top-1 data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:slide-in-from-top-1 data-[swipe=cancel]:translate-y-0 data-[swipe=cancel]:transition-transform data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)]',
   variants: {
     tone: {
-      default: 'bg-blue-600',
-      warning: 'bg-amber-600',
-      error: 'bg-red-600'
+      default: 'bg-accent text-white',
+      warning:
+        'border border-[var(--color-warning-border)] bg-[var(--color-warning-bg)] text-[var(--color-warning-text)]',
+      error: 'bg-red-600 text-white'
     }
   },
   defaultVariants: { tone: 'default' }