diff --git a/src/lib/components/callout.svelte b/src/lib/components/callout.svelte
index 21dba98..dc165e3 100644
--- a/src/lib/components/callout.svelte
+++ b/src/lib/components/callout.svelte
@@ -10,8 +10,7 @@
     } = $props();
 </script>
 
-
-<div class="callout-container">
+{#snippet calloutContent()}
     <p class="callout-symbol">
         {#if type == "quote"}
             »
@@ -28,17 +27,36 @@
             {/if}
         {/each}
     </div>
-</div>
+{/snippet}
+
+{#if type == "quote"}
+    <div class="callout-container callout-quote">
+        {@render calloutContent()}
+    </div>
+{:else}
+    <div class="callout-container callout-warn">
+        {@render calloutContent()}
+    </div>
+{/if}
 
 <style>
+    .callout-warn {
+        --color-callout: var(--color-callout-warn);
+    }
+
+    .callout-quote {
+        --color-callout: var(--color-callout-quote);
+    }
+
     .callout-container {
+        --color-callout-background: color-mix(in srgb, var(--color-callout) 30%, transparent);
         display: flex;
         flex-direction: row;
         max-width: 800px;
         margin: 0 auto;
         align-items: center;
-        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
-        background-color: var(--color-background-highlight-alt);
+        border: var(--border-style) var(--border-dash-size) var(--color-callout);
+        background-color: var(--color-callout-background);
         backdrop-filter: blur(var(--blur-radius-background));
         border-radius: var(--border-radius);
         padding: 16px;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f608d7b..a51db47 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -120,6 +120,9 @@
             --color-link-visited: #ffd7f0;
             --color-link-hovered: #ffdad5;
 
+            --color-callout-warn: var(--color-highlight-alt);
+            --color-callout-quote: #354CBE;
+
             /* blurs */
             --blur-radius-background: 6px;