diff --git a/assets/css/main.css b/assets/css/main.css
index 3ead329..2dab484 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,24 +1,52 @@
 :root {
   color-scheme: light dark;
-  --bg: #fafafa;
-  --bg-raised: #ffffff;
-  --fg: #1a1a1a;
-  --fg-muted: #5a5a5a;
-  --border: #e2e2e2;
-  --accent: #1a5fb4;
+
+  /* Palette: slate blue (firm/trustworthy) + dusty rose (warmth/reassurance)
+     + teal (clarity/action) + warm taupe (grounding), on a cream base.
+     "Gentle but firm" — bold blue header, soft cream body, energetic teal
+     CTAs, rose as the one purely decorative/interactive touch. */
+  --bg: #faf8f4;
+  --bg-raised: #f5f1e8;
+  --fg: #333333;
+  --fg-muted: #6b6560;
+  --border: #e5ddd0;
+
+  --slate: #4a6fa5;
+  --rose: #d9a9b0;
+  --teal: #009688;
+  --taupe: #b19a75;
+
+  --heading: var(--slate);
+  --accent: var(--slate);
   --accent-fg: #ffffff;
+  --cta: var(--teal);
+  --cta-fg: #ffffff;
+
   --radius: 0.5rem;
   --max-width: 42rem;
+
+  --font-heading: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-accent: "Source Code Pro", "Courier New", monospace;
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: #14161a;
-    --bg-raised: #1c1f24;
-    --fg: #e8e8e8;
-    --fg-muted: #9a9fa6;
-    --border: #2c3038;
-    --accent: #8ab4f8;
-    --accent-fg: #0f1115;
+    --bg: #1c1917;
+    --bg-raised: #262220;
+    --fg: #f0ebe3;
+    --fg-muted: #a89e92;
+    --border: #3a352f;
+
+    --slate: #8fa8d1;
+    --rose: #e6c3ca;
+    --teal: #2dd4c4;
+    --taupe: #cbb190;
+
+    --heading: var(--slate);
+    --accent: var(--slate);
+    --accent-fg: #14161a;
+    --cta: var(--teal);
+    --cta-fg: #0f1115;
   }
 }
 
@@ -26,7 +54,7 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-body);
   line-height: 1.6;
   background: var(--bg);
   color: var(--fg);
@@ -37,10 +65,20 @@ body {
 
 a { color: var(--accent); }
 
-h1, h2, h3 { line-height: 1.25; }
+h1, h2, h3 {
+  font-family: var(--font-heading);
+  color: var(--heading);
+  line-height: 1.25;
+}
 
+code, kbd, .accent-text {
+  font-family: var(--font-accent);
+}
+
+/* Header: the "firm leadership" statement — solid, confident, warm text
+   rather than stark white, with a rose touch on interaction. */
 header.site {
-  border-bottom: 1px solid var(--border);
+  background: var(--slate);
 }
 header.site .inner {
   max-width: var(--max-width);
@@ -53,9 +91,10 @@ header.site .inner {
   flex-wrap: wrap;
 }
 header.site .brand {
+  font-family: var(--font-heading);
   font-weight: 700;
   font-size: 1.1rem;
-  color: var(--fg);
+  color: var(--bg);
   text-decoration: none;
 }
 header.site nav {
@@ -63,11 +102,12 @@ header.site nav {
   gap: 1.5rem;
 }
 header.site nav a {
-  color: var(--fg-muted);
+  color: var(--bg);
+  opacity: 0.85;
   text-decoration: none;
   font-size: 0.95rem;
 }
-header.site nav a:hover { color: var(--fg); }
+header.site nav a:hover { opacity: 1; color: var(--rose); }
 
 main {
   flex: 1;
@@ -77,8 +117,10 @@ main {
   width: 100%;
 }
 
+/* Footer: grounding warm-taupe band bookending the blue header. */
 footer.site {
-  border-top: 1px solid var(--border);
+  background: var(--bg-raised);
+  border-top: 1px solid var(--taupe);
   margin-top: 2rem;
 }
 footer.site .inner {
@@ -98,17 +140,17 @@ footer.site nav {
   gap: 1.25rem;
 }
 footer.site nav a {
-  color: var(--fg-muted);
+  color: var(--slate);
   text-decoration: none;
 }
-footer.site nav a:hover { color: var(--fg); }
+footer.site nav a:hover { color: var(--rose); }
 
 .btn {
   display: inline-block;
   padding: 0.75rem 1.5rem;
   border-radius: var(--radius);
-  background: var(--accent);
-  color: var(--accent-fg);
+  background: var(--cta);
+  color: var(--cta-fg);
   text-decoration: none;
   font-weight: 600;
   border: none;
@@ -135,7 +177,7 @@ input, textarea {
   margin-bottom: 1.25rem;
 }
 input:focus, textarea:focus {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--cta);
   outline-offset: 1px;
 }
 
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f270983..6766028 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,6 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}</title>
   <meta name="description" content="{{ .Site.Params.description }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;600;700&family=Source+Code+Pro:wght@400;600&display=swap">
   {{ $css := resources.Get "css/main.css" }}
   {{ if hugo.IsProduction }}
     {{ $css = $css | minify | fingerprint }}