fez5587/commander-ai-lab
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): swap Inter for Barlow / Barlow Condensed display font

Browse Source 
Load Barlow + Barlow Condensed from Google Fonts across all 8 HTML
entry points. In global.css introduce --font-display (Barlow Condensed)
alongside --font (Barlow), then wire the display font into every
chrome/heading selector: h1-h6, .page-header, .panel-header, .btn,
.stat-label/.stat-value, .form-label, .badge-status, .data-table
thead, .tag, .nav-brand, .nav-links. Body copy stays in Barlow for
readability.

Also normalize a few hardcoded font-families to design-system vars:
collection.css Cascadia Code stacks and deckgenerator.css Courier New
now use var(--font-mono); canvas rendering in distillation.js and
ai-lab.js swapped from Inter to Barlow so charts match the new type.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
rgriffithandClaude Opus 4.6 committed 2026-04-05 17:26:06 -04:00
1 parent 4fdddf332e
commit 88c0d94d39
13 files changed
+73 -48
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ui/ai-lab.js
+2 -2
View File
@@ -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);
});
}
ui/coach.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab — Deck Coach</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="coach.css" />
</head>
ui/collection.css
+6 -6
View File
@@ -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 {
ui/collection.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab — Collection</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="collection.css" />
</head>
ui/deckbuilder.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab — Deck Builder</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="deckbuilder.css" />
</head>
ui/deckgenerator.css
+1 -1
View File
@@ -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;
}
ui/deckgenerator.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab — Auto Deck Generator V3</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="deckgenerator.css" />
</head>
ui/distillation.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab — Distillation Loop</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="distillation.css" />
</head>
ui/distillation.js
+7 -7
View File
@@ -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 => {
ui/global.css
+49 -24
View File
@@ -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;
}
ui/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="ai-lab.css?v=4" />
<style>
ui/simulator.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab — Simulator</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="simulator.css" />
</head>
ui/training.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>Commander AI Lab — ML Training</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="global.css" />
<link rel="stylesheet" href="training.css" />
</head>