PolicyEngine · MaxGhenis · Mar 6, 2026 · Mar 6, 2026 · Mar 7, 2026
diff --git a/changelog.d/upgrade-next-16.changed.md b/changelog.d/upgrade-next-16.changed.md
@@ -0,0 +1 @@
+Upgraded Next.js dashboard from 15 to 16.
diff --git a/microcalibration-dashboard/bun.lock b/microcalibration-dashboard/bun.lock
diff --git a/microcalibration-dashboard/package.json b/microcalibration-dashboard/package.json
@@ -11,9 +11,10 @@
     "static": "next build && touch out/.nojekyll"
   },
   "dependencies": {
+    "@policyengine/design-system": "^0.3.0",
     "jszip": "^3.10.1",
     "lucide-react": "^0.522.0",
-    "next": "15.3.8",
+    "next": "^16",
     "papaparse": "^5.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -27,7 +28,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "15.3.4",
+    "eslint-config-next": "^16",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

diff --git a/microcalibration-dashboard/src/app/globals.css b/microcalibration-dashboard/src/app/globals.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "@policyengine/design-system/tokens.css";
 
 /* Apply Roboto Serif as default font */
 * {
@@ -19,8 +20,8 @@ pre,
 
 /* Base page styling */
 body {
-  background: #f8fafc;   /* slate-50 */
-  color: #334155;        /* slate-700 */
+  background: var(--pe-color-gray-50);
+  color: var(--pe-color-gray-700);
   font-family: var(--font-roboto-serif), serif;
   line-height: 1.5;
 }
diff --git a/microcalibration-dashboard/src/components/CalibrationSummary.tsx b/microcalibration-dashboard/src/components/CalibrationSummary.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { CalibrationDataPoint } from '@/types/calibration';
 import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { colors } from '@policyengine/design-system/tokens/colors';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 
 interface CalibrationSummaryProps {
@@ -175,7 +176,7 @@ export default function CalibrationSummary({ data }: CalibrationSummaryProps) {
             >
               <div
                 className="w-3 h-0.5 mr-2"
-                style={{ backgroundColor: isVisible ? entry.color : '#ccc' }}
+                style={{ backgroundColor: isVisible ? entry.color : colors.gray[300] }}
               />
               <span className="text-sm text-gray-700">{entry.value}</span>
             </div>
@@ -387,7 +388,7 @@ export default function CalibrationSummary({ data }: CalibrationSummaryProps) {
                   yAxisId="loss"
                   type="monotone" 
                   dataKey="totalLoss" 
-                  stroke={visibleLines.totalLoss ? "#dc2626" : "transparent"}
+                  stroke={visibleLines.totalLoss ? colors.error : "transparent"}
                   strokeWidth={2}
                   dot={visibleLines.totalLoss ? { r: 3 } : false}
                   activeDot={visibleLines.totalLoss ? { r: 5 } : false}
@@ -398,7 +399,7 @@ export default function CalibrationSummary({ data }: CalibrationSummaryProps) {
                   yAxisId="error"
                   type="monotone" 
                   dataKey="avgRelAbsError" 
-                  stroke={visibleLines.avgRelAbsError ? "#7c3aed" : "transparent"}
+                  stroke={visibleLines.avgRelAbsError ? colors.primary[700] : "transparent"}
                   strokeWidth={2}
                   dot={visibleLines.avgRelAbsError ? { r: 3 } : false}
                   activeDot={visibleLines.avgRelAbsError ? { r: 5 } : false}

diff --git a/microcalibration-dashboard/src/components/ComparisonCharts.tsx b/microcalibration-dashboard/src/components/ComparisonCharts.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { CalibrationDataPoint } from '@/types/calibration';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { TrendingUp } from 'lucide-react';
+import { colors } from '@policyengine/design-system/tokens/colors';
 
 interface ComparisonChartsProps {
   firstData: CalibrationDataPoint[];
@@ -123,7 +124,7 @@ export default function ComparisonCharts({ firstData, secondData, firstName, sec
             >
               <div
                 className="w-3 h-0.5 mr-2"
-                style={{ backgroundColor: isVisible ? entry.color : '#ccc' }}
+                style={{ backgroundColor: isVisible ? entry.color : colors.gray[300] }}
               />
               <span className="text-sm text-gray-700">{entry.value}</span>
             </div>
@@ -149,7 +150,7 @@ export default function ComparisonCharts({ firstData, secondData, firstName, sec
             >
               <div
                 className="w-3 h-0.5 mr-2"
-                style={{ backgroundColor: isVisible ? entry.color : '#ccc' }}
+                style={{ backgroundColor: isVisible ? entry.color : colors.gray[300] }}
               />
               <span className="text-sm text-gray-700">{entry.value}</span>
             </div>
@@ -208,7 +209,7 @@ export default function ComparisonCharts({ firstData, secondData, firstName, sec
                 <Line 
                   type="monotone" 
                   dataKey="firstTotalLoss" 
-                  stroke={visibleLossLines.first ? "#2563eb" : "transparent"}
+                  stroke={visibleLossLines.first ? colors.blue[500] : "transparent"}
                   strokeWidth={2}
                   dot={visibleLossLines.first ? { r: 3 } : false}
                   activeDot={visibleLossLines.first ? { r: 5 } : false}
@@ -219,7 +220,7 @@ export default function ComparisonCharts({ firstData, secondData, firstName, sec
                 <Line 
                   type="monotone" 
                   dataKey="secondTotalLoss" 
-                  stroke={visibleLossLines.second ? "#7c3aed" : "transparent"}
+                  stroke={visibleLossLines.second ? colors.primary[700] : "transparent"}
                   strokeWidth={2}
                   dot={visibleLossLines.second ? { r: 3 } : false}
                   activeDot={visibleLossLines.second ? { r: 5 } : false}
@@ -268,7 +269,7 @@ export default function ComparisonCharts({ firstData, secondData, firstName, sec
                 <Line 
                   type="monotone" 
                   dataKey="firstAvgError" 
-                  stroke={visibleErrorLines.first ? "#2563eb" : "transparent"}
+                  stroke={visibleErrorLines.first ? colors.blue[500] : "transparent"}
                   strokeWidth={2}
                   dot={visibleErrorLines.first ? { r: 3 } : false}
                   activeDot={visibleErrorLines.first ? { r: 5 } : false}
@@ -279,7 +280,7 @@ export default function ComparisonCharts({ firstData, secondData, firstName, sec
                 <Line 
                   type="monotone" 
                   dataKey="secondAvgError" 
-                  stroke={visibleErrorLines.second ? "#7c3aed" : "transparent"}
+                  stroke={visibleErrorLines.second ? colors.primary[700] : "transparent"}
                   strokeWidth={2}
                   dot={visibleErrorLines.second ? { r: 3 } : false}
                   activeDot={visibleErrorLines.second ? { r: 5 } : false}

diff --git a/microcalibration-dashboard/src/components/LossChart.tsx b/microcalibration-dashboard/src/components/LossChart.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { CalibrationDataPoint } from '@/types/calibration';
 import { getSortedUniqueTargets, sortTargetsWithRelevance } from '@/utils/targetOrdering';
+import { colors } from '@policyengine/design-system/tokens/colors';
 
 interface LossChartProps {
   data: CalibrationDataPoint[];
@@ -187,7 +188,7 @@ export default function LossChart({ data }: LossChartProps) {
             <Line 
               type="monotone" 
               dataKey="target" 
-              stroke="#dc2626" 
+              stroke={colors.error} 
               strokeWidth={3}
               strokeDasharray="5 5"
               dot={false}
@@ -196,7 +197,7 @@ export default function LossChart({ data }: LossChartProps) {
             <Line 
               type="monotone" 
               dataKey="estimate" 
-              stroke="#2563eb" 
+              stroke={colors.blue[500]} 
               strokeWidth={2}
               dot={{ r: 2 }}
               activeDot={{ r: 4 }}
@@ -234,7 +235,7 @@ export default function LossChart({ data }: LossChartProps) {
               <Line 
                 type="monotone" 
                 dataKey="rel_error" 
-                stroke="#7c3aed" 
+                stroke={colors.primary[700]} 
                 strokeWidth={2}
                 dot={{ r: 2 }}
                 activeDot={{ r: 4 }}

diff --git a/microcalibration-dashboard/src/components/RegressionAnalysis.tsx b/microcalibration-dashboard/src/components/RegressionAnalysis.tsx
@@ -2,6 +2,7 @@
 
 import { CalibrationDataPoint } from '@/types/calibration';
 import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
+import { colors } from '@policyengine/design-system/tokens/colors';
 
 interface RegressionAnalysisProps {
   firstData: CalibrationDataPoint[];
@@ -205,7 +206,7 @@ export default function RegressionAnalysis({ firstData, secondData }: Regression
               {/* Equality line (y = x) */}
               <ReferenceLine 
                 segment={[{ x: domain[0], y: domain[0] }, { x: domain[1], y: domain[1] }]}
-                stroke="#94a3b8" 
+                stroke={colors.gray[400]} 
                 strokeDasharray="5 5"
                 strokeWidth={2}
               />
@@ -214,7 +215,7 @@ export default function RegressionAnalysis({ firstData, secondData }: Regression
               <Scatter 
                 name="Targets" 
                 data={scatterData} 
-                fill="#3b82f6"
+                fill={colors.blue[500]}
                 fillOpacity={0.6}
                 r={3}
               />

diff --git a/microcalibration-dashboard/src/components/SingleDatasetBarChart.tsx b/microcalibration-dashboard/src/components/SingleDatasetBarChart.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { CalibrationDataPoint } from '@/types/calibration';
 import { BarChart3 } from 'lucide-react';
+import { colors } from '@policyengine/design-system/tokens/colors';
 import { sortTargetsWithRelevance, getSortedUniqueTargets } from '@/utils/targetOrdering';
 
 interface SingleDatasetBarChartProps {
@@ -303,10 +304,10 @@ export default function SingleDatasetBarChart({ data }: SingleDatasetBarChartPro
               />
 
               {/* Target Value Bars */}
-              <Bar dataKey="target" name="Target value" fill="#16a34a" />
+              <Bar dataKey="target" name="Target value" fill={colors.success} />
 
               {/* Estimates */}
-              <Bar dataKey="estimate" name="Estimate" fill="#2563eb" />
+              <Bar dataKey="estimate" name="Estimate" fill={colors.blue[500]} />
             </BarChart>
           </ResponsiveContainer>
         </div>

diff --git a/microcalibration-dashboard/src/components/TargetConvergenceComparison.tsx b/microcalibration-dashboard/src/components/TargetConvergenceComparison.tsx
@@ -5,6 +5,7 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContai
 import { CalibrationDataPoint } from '@/types/calibration';
 import { Target } from 'lucide-react';
 import { sortTargetNames, sortTargetsWithRelevance } from '@/utils/targetOrdering';
+import { colors } from '@policyengine/design-system/tokens/colors';
 
 interface TargetConvergenceComparisonProps {
   firstData: CalibrationDataPoint[];
@@ -272,14 +273,14 @@ export default function TargetConvergenceComparison({
                 style={{
                   borderStyle: typedItem.dataKey === 'target' ? 'dashed' : 'solid',
                   borderColor:
-                    typedItem.dataKey === 'target' ? '#dc2626' : typedItem.color,
+                    typedItem.dataKey === 'target' ? colors.error : typedItem.color,
                 }}
               />
               <span
                 className="text-sm font-medium"
                 style={{
                   color:
-                    typedItem.dataKey === 'target' ? '#dc2626' : typedItem.color,
+                    typedItem.dataKey === 'target' ? colors.error : typedItem.color,
                   opacity:
                     isFirst
                       ? lineOpacity.firstEstimate
@@ -476,7 +477,7 @@ export default function TargetConvergenceComparison({
               {/* Target reference line */}
               <ReferenceLine 
                 y={targetValue} 
-                stroke="#dc2626" 
+                stroke={colors.error} 
                 strokeWidth={3}
                 strokeDasharray="5 5"
               />
@@ -485,10 +486,10 @@ export default function TargetConvergenceComparison({
               <Line 
                 type="monotone" 
                 dataKey="firstEstimate" 
-                stroke="#3b82f6" 
+                stroke={colors.blue[500]} 
                 strokeWidth={2}
                 strokeOpacity={lineOpacity.firstEstimate}
-                dot={{ r: 3, fill: '#3b82f6', fillOpacity: lineOpacity.firstEstimate }}
+                dot={{ r: 3, fill: colors.blue[500], fillOpacity: lineOpacity.firstEstimate }}
                 activeDot={{ r: 5, fillOpacity: lineOpacity.firstEstimate }}
                 connectNulls={false}
                 name={`${firstName}`}
@@ -498,10 +499,10 @@ export default function TargetConvergenceComparison({
               <Line 
                 type="monotone" 
                 dataKey="secondEstimate" 
-                stroke="#7c3aed" 
+                stroke={colors.primary[700]} 
                 strokeWidth={2}
                 strokeOpacity={lineOpacity.secondEstimate}
-                dot={{ r: 3, fill: '#7c3aed', fillOpacity: lineOpacity.secondEstimate }}
+                dot={{ r: 3, fill: colors.primary[700], fillOpacity: lineOpacity.secondEstimate }}
                 activeDot={{ r: 5, fillOpacity: lineOpacity.secondEstimate }}
                 connectNulls={false}
                 name={`${secondName}`}
@@ -511,7 +512,7 @@ export default function TargetConvergenceComparison({
               <Line 
                 type="monotone" 
                 dataKey="target" 
-                stroke="#dc2626" 
+                stroke={colors.error} 
                 strokeWidth={3}
                 strokeDasharray="5 5"
                 dot={false}
@@ -610,10 +611,10 @@ export default function TargetConvergenceComparison({
               <Line 
                 type="monotone" 
                 dataKey="firstError" 
-                stroke="#3b82f6" 
+                stroke={colors.blue[500]} 
                 strokeWidth={2}
                 strokeOpacity={lineOpacity.firstEstimate}
-                dot={{ r: 2, fill: '#3b82f6', fillOpacity: lineOpacity.firstEstimate }}
+                dot={{ r: 2, fill: colors.blue[500], fillOpacity: lineOpacity.firstEstimate }}
                 activeDot={{ r: 4, fillOpacity: lineOpacity.firstEstimate }}
                 connectNulls={false}
                 name={`${firstName} error`}
@@ -623,10 +624,10 @@ export default function TargetConvergenceComparison({
               <Line 
                 type="monotone" 
                 dataKey="secondError" 
-                stroke="#7c3aed" 
+                stroke={colors.primary[700]} 
                 strokeWidth={2}
                 strokeOpacity={lineOpacity.secondEstimate}
-                dot={{ r: 2, fill: '#7c3aed', fillOpacity: lineOpacity.secondEstimate }}
+                dot={{ r: 2, fill: colors.primary[700], fillOpacity: lineOpacity.secondEstimate }}
                 activeDot={{ r: 4, fillOpacity: lineOpacity.secondEstimate }}
                 connectNulls={false}
                 name={`${secondName} error`}
@@ -817,13 +818,13 @@ export default function TargetConvergenceComparison({
                 />
 
                 {/* Target Value Bars */}
-                <Bar dataKey="targetValue" name="Target value" fill="#16a34a" />
+                <Bar dataKey="targetValue" name="Target value" fill={colors.success} />
 
                 {/* First Dataset Estimates */}
-                <Bar dataKey="firstEstimate" name={firstName} fill="#3b82f6" />
+                <Bar dataKey="firstEstimate" name={firstName} fill={colors.blue[500]} />
 
                 {/* Second Dataset Estimates */}
-                <Bar dataKey="secondEstimate" name={secondName} fill="#7c3aed" />
+                <Bar dataKey="secondEstimate" name={secondName} fill={colors.primary[700]} />
               </BarChart>
             </ResponsiveContainer>
           </div>

diff --git a/microcalibration-dashboard/tsconfig.json b/microcalibration-dashboard/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,17 +15,27 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }