diff --git a/src/Roux/Html.hs b/src/Roux/Html.hs
index 82905dd..82b0bdb 100644
--- a/src/Roux/Html.hs
+++ b/src/Roux/Html.hs
@@ -146,7 +146,7 @@ page title content =
                         T.unlines
                             [ "@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Quicksand:wght@300..700&display=swap');"
                             , ""
-                            , ":root { --roux-bg: #F5EFE0; --roux-text: #3D2C1E; --roux-accent: #B85C38; --roux-ochre: #BF9428; --roux-sage: #7A9A7A; --roux-paper: #F5EFE0; }"
+                            , ":root { --roux-bg: #F5EFE0; --roux-text: #3D2C1E; --roux-accent: #B85C38; --roux-ochre: #BF9428; --roux-sage: #7A9A7A; --roux-paper: #F5EFE0; --roux-muted: #6B5D4E; }"
                             , ".fraunces { font-family: \"Fraunces\", serif; font-optical-sizing: auto; font-style: normal; }"
                             , ".quicksand { font-family: \"Quicksand\", sans-serif; font-optical-sizing: auto; font-style: normal; }"
                             , ""
@@ -241,7 +241,7 @@ page title content =
                             , ".roux-modal-dialog input, .roux-modal-dialog textarea { width: 100%; background: var(--roux-bg); border: 1px solid rgba(61,44,30,0.2); border-radius: 4px; padding: 0.5rem; font-family: \"Quicksand\", sans-serif; font-size: 0.9rem; color: var(--roux-text); margin-bottom: 0.75rem; }"
                             , ".roux-modal-dialog textarea { min-height: 80px; resize: vertical; }"
                             , ".roux-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }"
-                            , ".roux-modal-cancel { font-size: 0.8rem; padding: 0.4rem 0.8rem; background: transparent; border: 1px solid rgba(61,44,30,0.2); border-radius: 4px; cursor: pointer; font-family: \"Quicksand\", sans-serif; transition: opacity 0.15s; }"
+                            , ".roux-modal-cancel { font-size: 0.8rem; padding: 0.4rem 0.8rem; background: transparent; border: 1px solid rgba(61,44,30,0.2); border-radius: 4px; cursor: pointer; color: var(--roux-text); font-family: \"Quicksand\", sans-serif; transition: opacity 0.15s; }"
                             , ".roux-modal-cancel:hover { opacity: 0.7; }"
                             , ".roux-modal-confirm { font-size: 0.8rem; padding: 0.4rem 0.8rem; background: var(--roux-accent); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-family: \"Quicksand\", sans-serif; font-weight: 500; transition: opacity 0.15s; }"
                             , ".roux-modal-confirm:hover { opacity: 0.85; }"
@@ -706,7 +706,7 @@ cookLogJs =
         , "  var dateLine = document.createElement('strong');"
         , "  dateLine.style.display = 'block';"
         , "  dateLine.style.textAlign = 'center';"
-        , "  dateLine.style.color = 'var(--muted)';"
+        , "  dateLine.style.color = 'var(--roux-muted)';"
         , "  dateLine.textContent = '\x2014\x2014 ' + date + ' \x2014\x2014';"
         , "  entryDiv.appendChild(dateLine);"
         , "  if (comment) {"
@@ -902,22 +902,22 @@ renderCookLog _filename entries = do
 renderRecentCookEntries :: [CookLog.CookEntry] -> Html
 renderRecentCookEntries [] = pure ()
 renderRecentCookEntries entries = do
-    H.div ! A.style "margin-top: 0.4rem; font-size: 0.75rem; color: rgba(61,44,30,0.5); line-height: 1.5;" $ do
+    H.div ! A.style "margin-top: 0.4rem; font-size: 0.75rem; color: var(--roux-muted); line-height: 1.5;" $ do
         H.span "Recent: "
         mapM_ renderRecentEntry (take 5 entries)
 
 renderRecentEntry :: CookLog.CookEntry -> Html
 renderRecentEntry entry = do
-    H.span ! A.style "color: rgba(61,44,30,0.6);" $ H.toHtml (formatDay (CookLog.ceCookedDate entry))
+    H.span ! A.style "color: var(--roux-muted);" $ H.toHtml (formatDay (CookLog.ceCookedDate entry))
     unless (T.null (CookLog.ceComment entry)) $
-        H.span ! A.style "color: rgba(61,44,30,0.4);" $ ": " >> H.toHtml (CookLog.ceComment entry)
+        H.span ! A.style "color: var(--roux-text);" $ ": " >> H.toHtml (CookLog.ceComment entry)
     H.span ", "
 
 -- | Render a single cook log entry.
 renderEntry :: CookLog.CookEntry -> Html
 renderEntry entry = do
     H.p ! A.style "margin: 0.3rem 0; font-size: 0.9rem;" $ do
-        H.strong ! A.style "display: block; text-align: center; color: var(--muted);" $
+        H.strong ! A.style "display: block; text-align: center; color: var(--roux-muted);" $
             H.toHtml ("\x2014\x2014 " <> formatDay (CookLog.ceCookedDate entry) <> " \x2014\x2014")
         unless (T.null (CookLog.ceComment entry)) $
             H.span ! A.style "display: block; margin-top: 0.2rem;" $