From 1d7622631114b4903282724ec880d6c88f8818be Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 18 May 2026 14:43:04 +0000 Subject: [PATCH] Document nav colour key requirement for saturated and dark nav backgrounds MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Clarifies that nav-link, nav-link-active, and nav-section-heading affect not just nav links but also the site name, description, and theme toggle — all sidebar elements that inherit from these variables. Adds a rule of thumb for when to set the keys explicitly (saturation >20%, or lightness outside the neutral range). https://claude.ai/code/session_01NQKywehSj8Ku4yKhwB4VNB --- docs/claude-design.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/claude-design.md b/docs/claude-design.md index faf62ad..f66c70c 100644 --- a/docs/claude-design.md +++ b/docs/claude-design.md @@ -102,6 +102,19 @@ When `nav-background` and `accent` share the same hue (or are very close), active nav links become invisible — the coloured text disappears into a coloured background. +The nav colour keys also control the **site name, site description, and +dark/light mode toggle** — all three live inside the sidebar and inherit from +the same variables. On muted or neutral nav backgrounds the content-area +fallbacks (`text`, `text-muted`) are fine. On any saturated or bold nav +background the contrast between `text` and `text-muted` is likely too low for +these elements to remain legible, so all three nav colour keys must be set +explicitly. + +**Rule of thumb:** if `nav-background` has a saturation above roughly 20 % or +a lightness below 30 % (dark sidebar) or above 85 % (near-white sidebar that +differs noticeably from the page background), set `nav-link`, +`nav-link-active`, and `nav-section-heading` explicitly for that mode. + **Always set all three nav colour keys explicitly** whenever `nav-background` is anything other than a neutral near-white (light) or near-black (dark).