diff --git a/ui/ai-lab.js b/ui/ai-lab.js
index bdea712..8804691 100644
--- a/ui/ai-lab.js
+++ b/ui/ai-lab.js
@@ -1739,7 +1739,7 @@ const AiLab = (() => {
// Y-axis labels (0-100%)
ctx.fillStyle = '#8b90a0';
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
ctx.textAlign = 'right';
for (let pct = 0; pct <= 100; pct += 25) {
const y = canvas.height - padding.bottom - (pct / 100) * h;
@@ -1785,7 +1785,7 @@ const AiLab = (() => {
const ly = canvas.height - padding.bottom - (lastPt.winRate / 100) * h;
ctx.fillStyle = colors[di % colors.length];
ctx.textAlign = 'left';
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
ctx.fillText(data.deckName, lx + 6, ly + 4);
});
}
diff --git a/ui/coach.html b/ui/coach.html
index a74c8bd..22ecb11 100644
--- a/ui/coach.html
+++ b/ui/coach.html
@@ -6,7 +6,7 @@
Commander AI Lab — Deck Coach
-
+
diff --git a/ui/collection.css b/ui/collection.css
index 273082b..3d3b9d5 100644
--- a/ui/collection.css
+++ b/ui/collection.css
@@ -810,7 +810,7 @@
}
.coll-td-price {
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+ font-family: var(--font-mono);
text-align: right;
white-space: nowrap;
}
@@ -840,7 +840,7 @@
.coll-td-pt {
text-align: center;
white-space: nowrap;
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+ font-family: var(--font-mono);
font-size: 12px;
}
@@ -861,7 +861,7 @@
.coll-td-edhrec {
text-align: right;
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+ font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
@@ -1872,7 +1872,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+ font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
resize: vertical;
@@ -1953,7 +1953,7 @@
color: var(--text);
overflow-x: auto;
white-space: pre;
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+ font-family: var(--font-mono);
margin: 0;
}
@@ -1989,7 +1989,7 @@
font-size: 13px;
font-weight: 600;
color: var(--text);
- font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+ font-family: var(--font-mono);
}
.coll-mapping-select {
diff --git a/ui/collection.html b/ui/collection.html
index 95cb8cd..89e9b85 100644
--- a/ui/collection.html
+++ b/ui/collection.html
@@ -6,7 +6,7 @@
Commander AI Lab — Collection
-
+
diff --git a/ui/deckbuilder.html b/ui/deckbuilder.html
index 7e2aeda..dd86952 100644
--- a/ui/deckbuilder.html
+++ b/ui/deckbuilder.html
@@ -6,7 +6,7 @@
Commander AI Lab — Deck Builder
-
+
diff --git a/ui/deckgenerator.css b/ui/deckgenerator.css
index 67e884e..0742de8 100644
--- a/ui/deckgenerator.css
+++ b/ui/deckgenerator.css
@@ -1267,7 +1267,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--sp-3);
- font-family: 'Courier New', monospace;
+ font-family: var(--font-mono);
font-size: 0.8rem;
scrollbar-width: thin;
}
diff --git a/ui/deckgenerator.html b/ui/deckgenerator.html
index c1526e2..e53aa05 100644
--- a/ui/deckgenerator.html
+++ b/ui/deckgenerator.html
@@ -6,7 +6,7 @@
Commander AI Lab — Auto Deck Generator V3
-
+
diff --git a/ui/distillation.html b/ui/distillation.html
index 63cba6a..fe57d90 100644
--- a/ui/distillation.html
+++ b/ui/distillation.html
@@ -6,7 +6,7 @@
Commander AI Lab — Distillation Loop
-
+
diff --git a/ui/distillation.js b/ui/distillation.js
index 88578cd..cd3b95e 100644
--- a/ui/distillation.js
+++ b/ui/distillation.js
@@ -362,7 +362,7 @@ function renderWinRateChart(generations) {
// Y axis labels
const val = maxY - (maxY - minY) * (i / ySteps);
ctx.fillStyle = '#8b90a0';
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
ctx.textAlign = 'right';
ctx.fillText(val.toFixed(0) + '%', pad.left - 8, y + 4);
}
@@ -437,7 +437,7 @@ function renderWinRateChart(generations) {
}
// Legend
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
const legendX = pad.left + 10;
const legendY = pad.top + 15;
@@ -505,7 +505,7 @@ function renderCompositionChart(generations) {
const val = maxDataset - (maxDataset * i / ySteps);
ctx.fillStyle = '#8b90a0';
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
ctx.textAlign = 'right';
ctx.fillText(formatNumber(val), pad.left - 8, y + 4);
}
@@ -535,13 +535,13 @@ function renderCompositionChart(generations) {
// X label
ctx.fillStyle = '#8b90a0';
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
ctx.textAlign = 'center';
ctx.fillText('G' + g.generation, x + barWidth / 2, h - 8);
}
// Legend
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
const legendX = pad.left + 10;
const legendY = pad.top + 12;
@@ -807,7 +807,7 @@ function renderEloChart(entries) {
const val = maxElo - (eloRange * i / ySteps);
ctx.fillStyle = '#8b90a0';
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
ctx.textAlign = 'right';
ctx.fillText(Math.round(val).toString(), pad.left - 8, y + 4);
}
@@ -861,7 +861,7 @@ function renderEloChart(entries) {
});
// Legend
- ctx.font = '11px Inter, sans-serif';
+ ctx.font = '11px Barlow, sans-serif';
let legendX = pad.left + 10;
const legendY = pad.top + 12;
modelNames.forEach(name => {
diff --git a/ui/global.css b/ui/global.css
index 79acbab..4c5eac4 100644
--- a/ui/global.css
+++ b/ui/global.css
@@ -61,7 +61,8 @@
--duration: 180ms;
/* Typography */
- --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-display: 'Barlow Condensed', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
/* Spacing scale */
@@ -94,13 +95,15 @@ body {
}
h1, h2, h3, h4, h5, h6 {
+ font-family: var(--font-display);
color: #fff;
- font-weight: 600;
- line-height: 1.25;
+ font-weight: 700;
+ line-height: 1.15;
+ letter-spacing: 0.01em;
}
-h1 { font-size: 24px; }
-h2 { font-size: 18px; }
+h1 { font-size: 26px; }
+h2 { font-size: 19px; }
h3 { font-size: 16px; }
a { color: var(--accent); text-decoration: none; transition: color var(--duration) var(--ease); }
@@ -147,10 +150,12 @@ table { border-collapse: collapse; width: 100%; }
display: flex;
align-items: center;
gap: var(--sp-3);
- font-size: 15px;
- font-weight: 700;
+ font-family: var(--font-display);
+ font-size: 17px;
+ font-weight: 800;
color: #fff;
- letter-spacing: -0.01em;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
margin-right: var(--sp-8);
@@ -177,8 +182,11 @@ table { border-collapse: collapse; width: 100%; }
align-items: center;
gap: var(--sp-2);
padding: 6px 12px;
- font-size: 13px;
- font-weight: 500;
+ font-family: var(--font-display);
+ font-size: 14px;
+ font-weight: 600;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
color: var(--text-secondary);
border-radius: var(--radius-sm);
white-space: nowrap;
@@ -219,9 +227,11 @@ table { border-collapse: collapse; width: 100%; }
}
.page-header h1 {
- font-size: 28px;
- font-weight: 700;
- letter-spacing: -0.02em;
+ font-family: var(--font-display);
+ font-size: 32px;
+ font-weight: 800;
+ letter-spacing: 0.005em;
+ text-transform: uppercase;
margin-bottom: var(--sp-2);
}
@@ -252,13 +262,17 @@ table { border-collapse: collapse; width: 100%; }
}
.panel-header h2 {
- font-size: 16px;
- font-weight: 600;
+ font-family: var(--font-display);
+ font-size: 17px;
+ font-weight: 700;
+ letter-spacing: 0.01em;
+ text-transform: uppercase;
}
.panel-header .badge {
+ font-family: var(--font-display);
font-size: 11px;
- font-weight: 600;
+ font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-sm);
text-transform: uppercase;
@@ -288,8 +302,9 @@ table { border-collapse: collapse; width: 100%; }
}
.stat-label {
+ font-family: var(--font-display);
font-size: 12px;
- font-weight: 500;
+ font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
@@ -297,8 +312,9 @@ table { border-collapse: collapse; width: 100%; }
}
.stat-value {
- font-size: 28px;
- font-weight: 700;
+ font-family: var(--font-display);
+ font-size: 30px;
+ font-weight: 800;
color: #fff;
line-height: 1.1;
font-variant-numeric: tabular-nums;
@@ -317,8 +333,11 @@ table { border-collapse: collapse; width: 100%; }
justify-content: center;
gap: var(--sp-2);
padding: 8px 18px;
- font-size: 13px;
- font-weight: 600;
+ font-family: var(--font-display);
+ font-size: 14px;
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
@@ -392,6 +411,7 @@ table { border-collapse: collapse; width: 100%; }
}
.form-label {
+ font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
@@ -510,8 +530,9 @@ table { border-collapse: collapse; width: 100%; }
display: inline-flex;
align-items: center;
gap: 6px;
+ font-family: var(--font-display);
font-size: 11px;
- font-weight: 600;
+ font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-sm);
text-transform: uppercase;
@@ -579,8 +600,9 @@ table { border-collapse: collapse; width: 100%; }
.data-table thead th {
text-align: left;
padding: var(--sp-3) var(--sp-4);
+ font-family: var(--font-display);
font-size: 11px;
- font-weight: 600;
+ font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
@@ -607,8 +629,11 @@ table { border-collapse: collapse; width: 100%; }
display: inline-flex;
align-items: center;
padding: 2px 8px;
+ font-family: var(--font-display);
font-size: 11px;
- font-weight: 600;
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
border-radius: var(--radius-sm);
white-space: nowrap;
}
diff --git a/ui/index.html b/ui/index.html
index 2eb253c..2cf6bce 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -6,7 +6,7 @@
Commander AI Lab
-
+