diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 281bb1b..26e18f2 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -23,7 +23,7 @@ jobs:
       - name: Install Dependencies
         run: |
           apt update
-          apt install -y libadwaita-1-dev libcanberra-dev libgranite-7-dev libgtk-4-dev meson valac
+          apt install -y libadwaita-1-dev libcanberra-dev libgranite-9-dev libgtk-4-dev meson valac
       - name: Build
         env:
           DESTDIR: out
diff --git a/README.md b/README.md
index 851c322..3dc837e 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ a Gtk notification server for Pantheon
 
 You'll need the following dependencies:
 * libcanberra
-* libgranite-7-dev (>=7.7.0)
+* libgranite-9-dev (>=9.0.0)
 * libgtk-4-dev (>=4.20)
 * libadwaita-1-dev (>=1.0.0)
 * meson
diff --git a/data/application.css b/data/application.css
index f77f203..c4b85e8 100644
--- a/data/application.css
+++ b/data/application.css
@@ -8,7 +8,7 @@ window,
 
 button.osd {
     border-radius: 100%;
-    background: @BLACK_500;
+    background: var(--BLACK_500);
     box-shadow:
         inset 0 0 0 1px color-mix(in srgb, white 2%, transparent),
         inset 0 1px 0 0 color-mix(in srgb, white 7%, transparent),
@@ -32,14 +32,14 @@ button.osd {
 }
 
 .notification .draw-area {
-    background: alpha(@base_color, 0.8);
-    border-radius: 9px;
+    background: color-mix(in srgb, var(--base-color) 80%,  transparent);
+    border-radius: 1em;
     box-shadow:
-        inset 0 -1px 0 0 color-mix(in srgb, @highlight_color 40%, transparent),
-        inset 0 1px 0 0 color-mix(in srgb, @highlight_color 60%, transparent),
-        inset 1px 0 0 0 color-mix(in srgb, @highlight_color 14%, transparent),
-        inset -1px 0 0 0 color-mix(in srgb, @highlight_color 14%, transparent),
-        0 0 0 1px @borders,
+        inset 0 -2px 0 -1px color-mix(in srgb, var(--highlight-color) 40%, transparent),
+        inset 0 2px 0 -1px color-mix(in srgb, var(--highlight-color) 60%, transparent),
+        inset 1px 0 0 0 color-mix(in srgb, var(--highlight-color) 10%, transparent),
+        inset -1px 0 0 0 color-mix(in srgb, var(--highlight-color) 10%, transparent),
+        0 0 0 1px var(--border-color),
         0 1px 3px color-mix(in srgb, black 20%, transparent),
         0 3px 9px color-mix(in srgb, black 30%, transparent);
     margin: 16px;
@@ -50,12 +50,12 @@ button.osd {
 }
 
 .notification .draw-area label.title image {
-    color: color-mix(in srgb, var(@fg_color) 78%, transparent);
+    color: color-mix(in srgb, var(--fg-color) 78%, transparent);
 }
 
 .notification.reduce-transparency .draw-area {
     margin: 16px;
-    background: @base_color;
+    background: var(--base-color);
 }
 
 .notification:not(.confirmation) .draw-area image {
diff --git a/meson.build b/meson.build
index 295da44..341720e 100644
--- a/meson.build
+++ b/meson.build
@@ -34,7 +34,7 @@ executable(
         dependency ('glib-2.0'),
         dependency ('gobject-2.0'),
         dependency ('gio-2.0'),
-        dependency ('granite-7', version: '>=7.7.0'),
+        dependency ('granite-9', version: '>=9.0.0'),
         dependency ('gtk4', version: '>=4.20'),
         dependency('gtk4-wayland'),
         dependency('gtk4-x11'),