standardize model family colors across plots

app/src/content/chapters/experiments.mdx

@@ -5,9 +5,8 @@ import Glossary from "../../components/Glossary.astro";
 import FigRef from "../../components/FigRef.astro";
 
 {/* TODO: mention the currently running finephrase rephrasing with smollm2 */}
-{/* TODO: shorten the vllm inference benchmark or put stuff into the appendix */}
+{/* TODO: read through entire blog post and make improvements */}
 {/* TODO: potentially make a widget for data exploration: look at the same few samples generated by different models or transformed with different prompts */}
-{/* TODO: Standardize colors across charts in the blog post more */}
 {/* TODO: Integrate decay experiment as another analysis for proxy */}
 
 {/*

app/src/content/embeds/d3-optimization-sweep.html

@@ -168,17 +168,9 @@
       const margin = { top: 20, right: 40, bottom: 40, left: 130 };
 
       // ── Colors & shapes ──
-      function getFamilyColors() {
-        try {
-          if (window.ColorPalettes && typeof window.ColorPalettes.getColors === 'function') {
-            return window.ColorPalettes.getColors('categorical', FAMILIES.length);
-          }
-        } catch (e) {}
-        return ['var(--primary-color)', '#e377c2', '#17becf', '#bcbd22'];
-      }
-
-      const familyPalette = getFamilyColors();
-      const familyColor = (family) => familyPalette[FAMILIES.indexOf(family)] || 'var(--primary-color)';
+      const FAMILY_COLORS = { 'Qwen3': '#e07b54', 'SmolLM2': '#e06b9e', 'Gemma3': '#5b9bd5', 'GPT-OSS': '#8bc474' };
+      const familyPalette = FAMILIES.map(f => FAMILY_COLORS[f] || '#999');
+      const familyColor = (family) => FAMILY_COLORS[family] || '#999';
 
       const shapeGenerators = {
         'Baseline': d3.symbol().type(d3.symbolCircle),

app/src/content/embeds/experiment-overview.html

@@ -142,8 +142,8 @@
 
                 // Colors
                 const sourceColors = { 'FW-Edu HQ': '#6B8DB5', 'FW-Edu LQ': '#B58B9B', 'DCLM': '#7B82C8', 'Cosmopedia': '#8BA878' };
-                const catColors = { 'Format': '#4EA5B7', 'Nemotron': '#D4A850', 'REWIRE': '#C87878' };
-                const familyColors = { 'Gemma': '#4EA5B7', 'Qwen': '#8B7BE8', 'SmolLM2': '#E8C44A', 'Falcon': '#E889AB', 'Granite': '#5BC0A4', 'Llama': '#D09090' };
+                const catColors = { 'Format': '#4EA5B7', 'Nemotron': '#76b900', 'REWIRE': '#1877F2' };
+                const familyColors = { 'Gemma': '#5b9bd5', 'Qwen': '#e07b54', 'SmolLM2': '#e06b9e', 'Falcon': '#c9a046', 'Granite': '#9a8ec2', 'Llama': '#8bc474' };
 
                 const nodeColor = (d) => {
                     if (d.col === 'source') return sourceColors[d.name] || '#888';