diff --git a/src/App.vue b/src/App.vue
index 34047d7..8e86943 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,7 +31,7 @@
   color: var(--color-secondary);
 }
 .sub {
-  color: #4f7099;
+  color: #7ea6cd;
   font-size: 11px;
   letter-spacing: 0.04em;
 }
diff --git a/src/components/BlueprintViewer.vue b/src/components/BlueprintViewer.vue
index d7961b4..74f455e 100644
--- a/src/components/BlueprintViewer.vue
+++ b/src/components/BlueprintViewer.vue
@@ -104,7 +104,7 @@ const funcCount = computed(() => props.blueprint.functions.length)
             <div class="flex flex-wrap items-baseline gap-2">
               <span class="text-lg font-bold tracking-wide text-secondary">FULL VIEW</span>
             </div>
-            <p class="mb-4 mt-1 text-xs text-base-content/50">
+            <p class="mb-4 mt-1 text-xs text-base-content/75">
               The standard composition and its {{ funcCount }} functions. Select a function above to
               focus it.
             </p>
@@ -208,7 +208,7 @@ code {
   padding: 8px 12px;
 }
 .tb-k {
-  color: #4f7099;
+  color: #7ea6cd;
   font-size: 10px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
@@ -364,7 +364,7 @@ code {
   background: rgba(255, 255, 255, 0.02);
 }
 .panel .cap .id {
-  color: #4f7099;
+  color: #7ea6cd;
 }
 .panel .body {
   padding: 16px;
@@ -384,7 +384,7 @@ code {
   font-size: 10px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
+  color: color-mix(in srgb, var(--color-base-content) 75%, transparent);
   margin-bottom: 0.35rem;
 }
 .rk .rule {
@@ -425,7 +425,7 @@ code {
   color: var(--color-secondary);
 }
 .sig-note {
-  color: #4f7099;
+  color: #7ea6cd;
 }
 .sig-types {
   margin-top: 8px;
@@ -459,7 +459,7 @@ code {
   margin-top: 34px;
   padding-top: 14px;
   border-top: 1px solid rgba(200, 226, 255, 0.14);
-  color: #4f7099;
+  color: #7ea6cd;
   font-size: 11px;
   line-height: 1.8;
 }
diff --git a/src/components/CompositionMap.vue b/src/components/CompositionMap.vue
index 05444aa..528fe65 100644
--- a/src/components/CompositionMap.vue
+++ b/src/components/CompositionMap.vue
@@ -8,7 +8,8 @@ const PAL = {
   boxFill: "#103763",
   boxStroke: "#3d5f85",
   ink: "#dbe9f7",
-  inkFaint: "#4f7099",
+  inkFaint: "#4f7099", // decorative edges only
+  inkDim: "#7ea6cd", // dim text — meets WCAG AA on navy paper
   cyan: "#8fd0ff",
   amber: "#ffb84d",
 }
@@ -94,7 +95,7 @@ const edges = computed(() =>
         stroke-width="1.5"
       />
       <text :x="b.x + 12" :y="b.y + 15" :fill="PAL.ink" font-size="12">{{ b.label }}</text>
-      <text :x="b.x + 12" :y="b.y + 27" :fill="PAL.inkFaint" font-size="9.5">{{ b.sub }}</text>
+      <text :x="b.x + 12" :y="b.y + 27" :fill="PAL.inkDim" font-size="9.5">{{ b.sub }}</text>
     </g>
 
     <g v-for="b in rightBoxes" :key="b.label">
@@ -111,12 +112,10 @@ const edges = computed(() =>
       <text :x="b.x + 12" :y="b.y + 21" :fill="PAL.amber" font-size="12">{{ b.label }}</text>
     </g>
 
-    <text :x="lx" :y="H - 4" :fill="PAL.inkFaint" font-size="10" letter-spacing="1.5">
+    <text :x="lx" :y="H - 4" :fill="PAL.inkDim" font-size="10" letter-spacing="1.5">
       CAPABILITIES (compose onto host)
     </text>
-    <text :x="rx" :y="H - 4" :fill="PAL.inkFaint" font-size="10" letter-spacing="1.5">
-      FUNCTIONS
-    </text>
+    <text :x="rx" :y="H - 4" :fill="PAL.inkDim" font-size="10" letter-spacing="1.5">FUNCTIONS</text>
   </svg>
 </template>
 
diff --git a/src/components/FunctionReadout.vue b/src/components/FunctionReadout.vue
index dbeb129..8ea694a 100644
--- a/src/components/FunctionReadout.vue
+++ b/src/components/FunctionReadout.vue
@@ -16,13 +16,13 @@ defineProps<{ fn: BlueprintFunction }>()
         >{{ c }}</span
       >
     </div>
-    <p class="mb-4 mt-1 text-xs text-base-content/50">{{ fn.verb }}</p>
+    <p class="mb-4 mt-1 text-xs text-base-content/75">{{ fn.verb }}</p>
 
     <section v-if="fn.state.length" class="block-sec">
       <div class="k"><span>State touched</span><span class="rule" /></div>
       <div v-for="[name, type] in fn.state" :key="name" class="flex gap-2">
         <span>{{ name }}</span
-        ><span class="text-base-content/40">:</span><span class="text-secondary">{{ type }}</span>
+        ><span class="text-base-content/70">:</span><span class="text-secondary">{{ type }}</span>
       </div>
     </section>
 
@@ -34,11 +34,11 @@ defineProps<{ fn: BlueprintFunction }>()
       <div v-for="b in fn.behaviors" :key="b.sig" class="beh">
         <div class="text-accent">{{ b.sig }}</div>
         <div class="flex gap-2 text-xs text-base-content/70">
-          <span class="w-7 shrink-0 text-base-content/40">pre</span
+          <span class="w-7 shrink-0 text-base-content/70">pre</span
           ><span class="text-base-content">{{ b.pre }}</span>
         </div>
         <div class="flex gap-2 text-xs text-base-content/70">
-          <span class="w-7 shrink-0 text-base-content/40">eff</span
+          <span class="w-7 shrink-0 text-base-content/70">eff</span
           ><span class="text-base-content">{{ b.eff }}</span>
         </div>
       </div>
@@ -71,7 +71,7 @@ defineProps<{ fn: BlueprintFunction }>()
       </ul>
     </section>
 
-    <p v-for="n in fn.notes" :key="n" class="text-[11px] italic text-base-content/40">— {{ n }}</p>
+    <p v-for="n in fn.notes" :key="n" class="text-[11px] italic text-base-content/70">— {{ n }}</p>
   </div>
 </template>
 
@@ -100,7 +100,7 @@ defineProps<{ fn: BlueprintFunction }>()
   font-size: 10px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
+  color: color-mix(in srgb, var(--color-base-content) 75%, transparent);
   margin-bottom: 0.35rem;
 }
 .k .rule {
diff --git a/src/specimens/CalendarSpecimen.vue b/src/specimens/CalendarSpecimen.vue
index 3b33e2a..d24df7c 100644
--- a/src/specimens/CalendarSpecimen.vue
+++ b/src/specimens/CalendarSpecimen.vue
@@ -261,7 +261,8 @@ function barStyle(e: MonthEvent) {
 <style scoped>
 .specimen {
   --ink: var(--color-base-content);
-  --ink-faint: #4f7099;
+  --ink-faint: #4f7099; /* decorative only: borders, stripes, fills */
+  --ink-dim: #7ea6cd; /* dim text — meets WCAG AA on navy paper */
   --amber: var(--color-accent);
   --amber-dim: color-mix(in srgb, var(--color-accent) 14%, transparent);
   --cyan: var(--color-secondary);
@@ -272,7 +273,7 @@ function barStyle(e: MonthEvent) {
   font-size: 13px;
 }
 .note {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   font-size: 11px;
   font-style: italic;
   margin: 0 0 10px;
@@ -311,7 +312,7 @@ function barStyle(e: MonthEvent) {
 .scope-btn {
   padding: 4px 11px;
   font-size: 11px;
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   border-left: 1px solid var(--line);
 }
 .scope-btn:first-child {
@@ -338,7 +339,7 @@ function barStyle(e: MonthEvent) {
   letter-spacing: 0.08em;
 }
 .badge-note {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
 }
 
 /* month grid */
@@ -383,7 +384,7 @@ function barStyle(e: MonthEvent) {
   color: color-mix(in srgb, var(--ink) 70%, transparent);
 }
 .daycell.adjacent .dnum {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   opacity: 0.55;
 }
 /* event bars, positioned over the day cells of their week */
@@ -465,7 +466,7 @@ function barStyle(e: MonthEvent) {
 .wk-hour {
   padding: 6px;
   font-size: 10px;
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   border-right: 1px solid var(--line);
   text-align: right;
 }
diff --git a/src/specimens/GridSpecimen.vue b/src/specimens/GridSpecimen.vue
index 875e016..2bd8545 100644
--- a/src/specimens/GridSpecimen.vue
+++ b/src/specimens/GridSpecimen.vue
@@ -263,7 +263,8 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
 <style scoped>
 .specimen {
   --ink: var(--color-base-content);
-  --ink-faint: #4f7099;
+  --ink-faint: #4f7099; /* decorative only: borders, stripes, fills */
+  --ink-dim: #7ea6cd; /* dim text — meets WCAG AA on navy paper */
   --amber: var(--color-accent);
   --amber-dim: color-mix(in srgb, var(--color-accent) 14%, transparent);
   --cyan: var(--color-secondary);
@@ -274,7 +275,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
   font-size: 13px;
 }
 .note {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   font-size: 11px;
   font-style: italic;
   margin: 0 0 10px;
@@ -288,7 +289,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
   font-size: 12px;
 }
 .badge-note {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
 }
 .search {
   flex: 1;
@@ -298,7 +299,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
   color: var(--ink);
 }
 .ph {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
 }
 .q {
   color: var(--amber);
@@ -452,7 +453,7 @@ const gridStyle = computed(() => ({ gridTemplateColumns: `repeat(${frame.value.c
 .empty-state {
   padding: 16px 12px;
   text-align: center;
-  color: var(--ink-faint);
+  color: var(--ink-dim);
 }
 .empty-state .big {
   font-size: 22px;
diff --git a/src/specimens/ListSpecimen.vue b/src/specimens/ListSpecimen.vue
index 8b957a1..d4a5c1f 100644
--- a/src/specimens/ListSpecimen.vue
+++ b/src/specimens/ListSpecimen.vue
@@ -314,7 +314,8 @@ const frame = computed<Frame>(() => {
 <style scoped>
 .specimen {
   --ink: var(--color-base-content);
-  --ink-faint: #4f7099;
+  --ink-faint: #4f7099; /* decorative only: borders, stripes, fills */
+  --ink-dim: #7ea6cd; /* dim text — meets WCAG AA on navy paper */
   --amber: var(--color-accent);
   --amber-dim: color-mix(in srgb, var(--color-accent) 14%, transparent);
   --cyan: var(--color-secondary);
@@ -325,7 +326,7 @@ const frame = computed<Frame>(() => {
   font-size: 13px;
 }
 .note {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   font-size: 11px;
   font-style: italic;
   margin: 0 0 10px;
@@ -339,7 +340,7 @@ const frame = computed<Frame>(() => {
   font-size: 12px;
 }
 .badge-note {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
 }
 .search {
   flex: 1;
@@ -349,7 +350,7 @@ const frame = computed<Frame>(() => {
   color: var(--ink);
 }
 .ph {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
 }
 .q {
   color: var(--amber);
@@ -412,7 +413,7 @@ const frame = computed<Frame>(() => {
   color: var(--ink);
 }
 .txt .s {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   font-size: 11px;
 }
 .chev {
@@ -474,7 +475,7 @@ const frame = computed<Frame>(() => {
   color: var(--red);
 }
 .swipehint {
-  color: var(--ink-faint);
+  color: var(--ink-dim);
   font-size: 10px;
   margin-left: auto;
   padding-right: 8px;
@@ -545,7 +546,7 @@ const frame = computed<Frame>(() => {
 .empty-state {
   padding: 20px 12px;
   text-align: center;
-  color: var(--ink-faint);
+  color: var(--ink-dim);
 }
 .empty-state .big {
   font-size: 22px;
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
index 326a74b..3a00ac7 100644
--- a/src/views/GalleryView.vue
+++ b/src/views/GalleryView.vue
@@ -112,7 +112,7 @@ import { BLUEPRINTS } from "@/data/blueprints"
 .c-meta {
   display: flex;
   gap: 14px;
-  color: #4f7099;
+  color: #7ea6cd;
   font-size: 11px;
 }
 .c-open {