diff --git a/src/components/notion/Bookmark.astro b/src/components/notion/Bookmark.astro
index 9d67dc6..1f79bcf 100644
--- a/src/components/notion/Bookmark.astro
+++ b/src/components/notion/Bookmark.astro
@@ -74,11 +74,17 @@ try {
     width: 100%;
     box-sizing: border-box;
     text-decoration: none;
-    border: 1px solid rgba(55, 53, 47, 0.16);
+    border: 1px solid var(--notion-border);
+    background: var(--notion-surface);
     border-radius: 3px;
     display: flex;
     overflow: hidden;
     user-select: none;
+    transition: background-color 160ms ease, border-color 160ms ease;
+  }
+  .bookmark > a:hover {
+    background: var(--notion-surface-strong);
+    border-color: color-mix(in oklab, var(--notion-border) 70%, transparent);
   }
   .bookmark > a > div:first-child {
     flex: 4 1 180px;
diff --git a/src/components/notion/Callout.astro b/src/components/notion/Callout.astro
index cd92313..632bd63 100644
--- a/src/components/notion/Callout.astro
+++ b/src/components/notion/Callout.astro
@@ -3,6 +3,7 @@ import * as interfaces from '../../lib/interfaces.ts'
 import { snakeToKebab } from '../../lib/style-helpers.ts'
 import RichText from './RichText.astro'
 import NotionBlocks from '../NotionBlocks.astro'
+import '../../styles/notion-color.css'
 
 export interface Props {
   block: interfaces.Block
@@ -58,8 +59,8 @@ const callout = block.Callout
     border-radius: 3px;
     border-width: 1px;
     border-style: solid;
-    border-color: transparent;
-    background: rgba(235, 236, 237, 0.6);
+    border-color: var(--notion-border);
+    background: var(--notion-surface);
   }
   .callout > div {
     min-width: 0;
diff --git a/src/components/notion/Divider.astro b/src/components/notion/Divider.astro
index 0f7d239..d76535f 100644
--- a/src/components/notion/Divider.astro
+++ b/src/components/notion/Divider.astro
@@ -6,6 +6,8 @@
 <style>
   .divider {
     margin: 1rem 0;
-    background-color: #dedede;
+    height: 1px;
+    border: 0;
+    background-color: var(--notion-border);
   }
 </style>
diff --git a/src/components/notion/File.astro b/src/components/notion/File.astro
index b4f49ac..b6a32ec 100644
--- a/src/components/notion/File.astro
+++ b/src/components/notion/File.astro
@@ -62,9 +62,10 @@ const filename =
     color: var(--fg);
     font-weight: 500;
     line-height: 1.4rem;
+    transition: background-color 120ms ease;
   }
   .file a:hover {
-    background-color: #eee;
+    background-color: var(--notion-gray-background);
   }
 
   .file a img {
diff --git a/src/components/notion/TableOfContents.astro b/src/components/notion/TableOfContents.astro
index c428161..9b30b86 100644
--- a/src/components/notion/TableOfContents.astro
+++ b/src/components/notion/TableOfContents.astro
@@ -58,7 +58,7 @@ if (!block.TableOfContents) {
     text-decoration: underline;
   }
   .table-of-contents > a:hover {
-    background: rgba(241, 241, 239, 1) !important;
+    background: var(--notion-gray-background) !important;
   }
   .table-of-contents > a.indent-1 {
     padding-left: 1.5rem;
diff --git a/src/styles/global.css b/src/styles/global.css
index c1d50a4..53791a8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -53,6 +53,12 @@
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+
+  --fg: var(--foreground);
+  --anchor-border: color-mix(in oklab, var(--foreground) 28%, transparent);
+  --notion-surface: color-mix(in oklab, var(--muted) 16%, transparent);
+  --notion-surface-strong: color-mix(in oklab, var(--muted) 26%, transparent);
+  --notion-border: color-mix(in oklab, var(--border) 85%, transparent);
 }
 
 [data-theme='dark'] {
@@ -65,6 +71,12 @@
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --ring: oklch(0.556 0 0);
+
+  --fg: var(--foreground);
+  --anchor-border: color-mix(in oklab, var(--foreground) 42%, transparent);
+  --notion-surface: color-mix(in oklab, var(--muted) 26%, transparent);
+  --notion-surface-strong: color-mix(in oklab, var(--muted) 38%, transparent);
+  --notion-border: color-mix(in oklab, var(--border) 95%, transparent);
 }
 
 @layer base {
diff --git a/src/styles/notion-color.css b/src/styles/notion-color.css
index 63027a5..82f7136 100644
--- a/src/styles/notion-color.css
+++ b/src/styles/notion-color.css
@@ -1,104 +1,173 @@
+:root {
+  --notion-gray: #787774;
+  --notion-brown: #9f6b53;
+  --notion-orange: #d9730d;
+  --notion-yellow: #cb912f;
+  --notion-green: #448561;
+  --notion-blue: #337ea9;
+  --notion-purple: #9065b0;
+  --notion-pink: #c14c8a;
+  --notion-red: #d44c47;
+
+  --notion-gray-background: #f1f1ef;
+  --notion-brown-background: #f4eeee;
+  --notion-orange-background: #fbecdd;
+  --notion-yellow-background: #fbf3db;
+  --notion-green-background: #edf3ec;
+  --notion-blue-background: #e7f3f8;
+  --notion-purple-background: rgba(244, 240, 247, 0.8);
+  --notion-pink-background: rgba(249, 238, 243, 0.8);
+  --notion-red-background: #fdebec;
+
+  --notion-tag-foreground: rgb(28, 56, 41);
+  --notion-tag-light-gray: rgba(227, 226, 224, 0.5);
+  --notion-tag-gray: rgb(227, 226, 224);
+  --notion-tag-brown: rgb(238, 224, 218);
+  --notion-tag-orange: rgb(250, 222, 201);
+  --notion-tag-yellow: rgb(253, 236, 200);
+  --notion-tag-green: rgb(219, 237, 219);
+  --notion-tag-blue: rgb(211, 229, 239);
+  --notion-tag-purple: rgb(232, 222, 238);
+  --notion-tag-pink: rgb(245, 224, 233);
+  --notion-tag-red: rgb(255, 226, 221);
+}
+
+[data-theme='dark'] {
+  --notion-gray: color-mix(in oklab, var(--foreground) 82%, #787774);
+  --notion-brown: color-mix(in oklab, var(--foreground) 82%, #9f6b53);
+  --notion-orange: color-mix(in oklab, var(--foreground) 82%, #d9730d);
+  --notion-yellow: color-mix(in oklab, var(--foreground) 82%, #cb912f);
+  --notion-green: color-mix(in oklab, var(--foreground) 82%, #448561);
+  --notion-blue: color-mix(in oklab, var(--foreground) 82%, #337ea9);
+  --notion-purple: color-mix(in oklab, var(--foreground) 82%, #9065b0);
+  --notion-pink: color-mix(in oklab, var(--foreground) 82%, #c14c8a);
+  --notion-red: color-mix(in oklab, var(--foreground) 82%, #d44c47);
+
+  --notion-gray-background: color-mix(in oklab, var(--background) 82%, #f1f1ef);
+  --notion-brown-background: color-mix(in oklab, var(--background) 82%, #f4eeee);
+  --notion-orange-background: color-mix(in oklab, var(--background) 82%, #fbecdd);
+  --notion-yellow-background: color-mix(in oklab, var(--background) 82%, #fbf3db);
+  --notion-green-background: color-mix(in oklab, var(--background) 82%, #edf3ec);
+  --notion-blue-background: color-mix(in oklab, var(--background) 82%, #e7f3f8);
+  --notion-purple-background: color-mix(in oklab, var(--background) 82%, rgba(244, 240, 247, 0.8));
+  --notion-pink-background: color-mix(in oklab, var(--background) 82%, rgba(249, 238, 243, 0.8));
+  --notion-red-background: color-mix(in oklab, var(--background) 82%, #fdebec);
+
+  --notion-tag-foreground: var(--foreground);
+  --notion-tag-light-gray: color-mix(in oklab, #e3e2e0 34%, var(--background));
+  --notion-tag-gray: color-mix(in oklab, #e3e2e0 44%, var(--background));
+  --notion-tag-brown: color-mix(in oklab, #eee0da 44%, var(--background));
+  --notion-tag-orange: color-mix(in oklab, #faddc9 44%, var(--background));
+  --notion-tag-yellow: color-mix(in oklab, #fdecc8 44%, var(--background));
+  --notion-tag-green: color-mix(in oklab, #dbeddb 44%, var(--background));
+  --notion-tag-blue: color-mix(in oklab, #d3e5f3 44%, var(--background));
+  --notion-tag-purple: color-mix(in oklab, #e8deee 44%, var(--background));
+  --notion-tag-pink: color-mix(in oklab, #f5e0e9 44%, var(--background));
+  --notion-tag-red: color-mix(in oklab, #ffe2dd 44%, var(--background));
+}
+
 .gray,
 .gray:hover {
-  color: rgba(120, 119, 116, 1);
+  color: var(--notion-gray);
 }
 .brown,
 .brown:hover {
-  color: rgba(159, 107, 83, 1);
+  color: var(--notion-brown);
 }
 .orange,
 .orange:hover {
-  color: rgba(217, 115, 13, 1);
+  color: var(--notion-orange);
 }
 .yellow,
 .yellow:hover {
-  color: rgba(203, 145, 47, 1);
+  color: var(--notion-yellow);
 }
 .green,
 .green:hover {
-  color: rgba(68, 131, 97, 1);
+  color: var(--notion-green);
 }
 .blue,
 .blue:hover {
-  color: rgba(51, 126, 169, 1);
+  color: var(--notion-blue);
 }
 .purple,
 .purple:hover {
-  color: rgba(144, 101, 176, 1);
+  color: var(--notion-purple);
 }
 .pink,
 .pink:hover {
-  color: rgba(193, 76, 138, 1);
+  color: var(--notion-pink);
 }
 .red,
 .red:hover {
-  color: rgba(212, 76, 71, 1);
+  color: var(--notion-red);
 }
+
 .gray-background {
-  background: rgba(241, 241, 239, 1) !important;
+  background: var(--notion-gray-background) !important;
 }
 .brown-background {
-  background: rgba(244, 238, 238, 1) !important;
+  background: var(--notion-brown-background) !important;
 }
 .orange-background {
-  background: rgba(251, 236, 221, 1) !important;
+  background: var(--notion-orange-background) !important;
 }
 .yellow-background {
-  background: rgba(251, 243, 219, 1) !important;
+  background: var(--notion-yellow-background) !important;
 }
 .green-background {
-  background: rgba(237, 243, 236, 1) !important;
+  background: var(--notion-green-background) !important;
 }
 .blue-background {
-  background: rgba(231, 243, 248, 1) !important;
+  background: var(--notion-blue-background) !important;
 }
 .purple-background {
-  background: rgba(244, 240, 247, 0.8) !important;
+  background: var(--notion-purple-background) !important;
 }
 .pink-background {
-  background: rgba(249, 238, 243, 0.8) !important;
+  background: var(--notion-pink-background) !important;
 }
 .red-background {
-  background: rgba(253, 235, 236, 1) !important;
+  background: var(--notion-red-background) !important;
 }
 
 .tag.light-gray {
-  color: rgb(28, 56, 41);
-  background: rgba(227, 226, 224, 0.5) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-light-gray) !important;
 }
 .tag.gray {
-  color: rgb(28, 56, 41);
-  background: rgb(227, 226, 224) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-gray) !important;
 }
 .tag.brown {
-  color: rgb(28, 56, 41);
-  background: rgb(238, 224, 218) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-brown) !important;
 }
 .tag.orange {
-  color: rgb(28, 56, 41);
-  background: rgb(250, 222, 201) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-orange) !important;
 }
 .tag.yellow {
-  color: rgb(28, 56, 41);
-  background: rgb(253, 236, 200) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-yellow) !important;
 }
 .tag.green {
-  color: rgb(28, 56, 41);
-  background: rgb(219, 237, 219) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-green) !important;
 }
 .tag.blue {
-  color: rgb(28, 56, 41);
-  background: rgb(211, 229, 239) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-blue) !important;
 }
 .tag.purple {
-  color: rgb(28, 56, 41);
-  background: rgb(232, 222, 238) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-purple) !important;
 }
 .tag.pink {
-  color: rgb(28, 56, 41);
-  background: rgb(245, 224, 233) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-pink) !important;
 }
 .tag.red {
-  color: rgb(28, 56, 41);
-  background: rgb(255, 226, 221) !important;
+  color: var(--notion-tag-foreground);
+  background: var(--notion-tag-red) !important;
 }