commit b241132d53c797268ea9ef86f6a0984a5a99e723
parent 94409286cf8c72a0a629e21c349d23425e0739ad
Author: Brian Graham <brian@buildingbetterteams.de>
Date: Sat, 4 Apr 2026 08:33:40 +0200
Adopt Ship the Loop design system
Full restyle to match video-studio SMUI:
- JetBrains Mono monospace everywhere
- Nord-inspired HSL color palette (surface-0 through surface-3, aurora accents)
- No rounded corners (2px border-radius)
- Uppercase headings and labels with letter-spacing
- Transparent badges with colored borders
- Surface-2 table headers
- 0.15s transitions on hover
- Focus rings with cyan accent
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Diffstat:
2 files changed, 174 insertions(+), 41 deletions(-)
diff --git a/dashboard/src/layouts/Base.astro b/dashboard/src/layouts/Base.astro
@@ -21,6 +21,9 @@ try {
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <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=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<title>{title} | Loop Benchmarking</title>
</head>
<body>
diff --git a/dashboard/src/styles/global.css b/dashboard/src/styles/global.css
@@ -1,34 +1,74 @@
+/* ============================================================
+ Loop Benchmarking - Ship the Loop Design System
+ Font: JetBrains Mono (monospace everywhere)
+ Palette: Nord-inspired HSL with aurora accents
+ ============================================================ */
+
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap");
+
:root {
- --bg: #0f1117;
- --bg-card: #1a1d27;
- --bg-hover: #232633;
- --border: #2d3045;
- --text: #e4e4e7;
- --text-muted: #9ca3af;
- --accent: #6366f1;
- --accent-hover: #818cf8;
- --green: #22c55e;
- --red: #ef4444;
- --yellow: #eab308;
- --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
+ /* Surfaces */
+ --surface-0: hsl(213 16% 12%);
+ --surface-1: hsl(217 16% 15.5%);
+ --surface-2: hsl(216 15% 19%);
+ --surface-3: hsl(215 14% 22%);
+
+ /* Text */
+ --text: hsl(213 27% 88%);
+ --text-muted: hsl(213 14% 65%);
+
+ /* Borders */
+ --border: hsl(217 17% 28%);
+ --border-hover: hsl(217 17% 36%);
+
+ /* Accent / frost */
+ --accent: hsl(193 44% 67%);
+ --accent-hover: hsl(193 50% 75%);
+
+ /* Aurora */
+ --green: hsl(92 28% 65%);
+ --yellow: hsl(40 71% 73%);
+ --orange: hsl(14 51% 63%);
+ --red: hsl(355 52% 64%);
+ --purple: hsl(311 24% 63%);
+
+ /* Typography */
+ --font-mono: "JetBrains Mono", monospace;
+ --text-label: 11px;
+ --text-ui: 13px;
+ --text-heading: 22px;
+ --text-stat: 26px;
+
+ /* Legacy aliases so inline styles in Base.astro keep working */
+ --bg: var(--surface-0);
+ --bg-card: var(--surface-1);
+ --bg-hover: var(--surface-2);
}
+/* ---- Reset ---- */
+
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
+/* ---- Base ---- */
+
body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
- background: var(--bg);
+ font-family: var(--font-mono);
+ background: var(--surface-0);
color: var(--text);
- line-height: 1.6;
+ font-size: var(--text-ui);
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
a {
color: var(--accent);
text-decoration: none;
+ transition: color 0.15s;
}
a:hover {
@@ -36,99 +76,178 @@ a:hover {
text-decoration: underline;
}
+/* ---- Layout ---- */
+
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
+/* ---- Typography ---- */
+
h1, h2, h3 {
+ font-family: var(--font-mono);
font-weight: 600;
line-height: 1.3;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+h1 {
+ font-size: var(--text-heading);
+}
+
+h2 {
+ font-size: 18px;
+ letter-spacing: 0.8px;
+}
+
+h3 {
+ font-size: 15px;
+ letter-spacing: 0.5px;
}
-h1 { font-size: 1.75rem; }
-h2 { font-size: 1.35rem; }
-h3 { font-size: 1.1rem; }
+/* ---- Cards ---- */
.card {
- background: var(--bg-card);
+ background: var(--surface-1);
border: 1px solid var(--border);
- border-radius: 8px;
+ border-radius: 2px;
padding: 20px;
+ transition: border-color 0.15s;
}
+.card:hover {
+ border-color: var(--border-hover);
+}
+
+/* ---- Badges ---- */
+
.badge {
display: inline-block;
- padding: 2px 8px;
- border-radius: 4px;
- font-size: 0.75rem;
+ padding: 1px 6px;
+ border: 1px solid transparent;
+ border-radius: 2px;
+ font-size: var(--text-label);
font-weight: 500;
font-family: var(--font-mono);
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
}
.badge-pass {
- background: rgba(34, 197, 94, 0.15);
color: var(--green);
+ border-color: var(--green);
+ background: transparent;
}
.badge-fail {
- background: rgba(239, 68, 68, 0.15);
color: var(--red);
+ border-color: var(--red);
+ background: transparent;
}
.badge-neutral {
- background: rgba(99, 102, 241, 0.15);
color: var(--accent);
+ border-color: var(--accent);
+ background: transparent;
}
+/* ---- Tables ---- */
+
table {
width: 100%;
border-collapse: collapse;
+ font-size: var(--text-ui);
}
th, td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
- font-size: 0.875rem;
}
th {
+ background: var(--surface-2);
color: var(--text-muted);
font-weight: 500;
- font-size: 0.75rem;
+ font-size: var(--text-label);
text-transform: uppercase;
- letter-spacing: 0.05em;
+ letter-spacing: 1px;
+}
+
+tr {
+ transition: background 0.15s;
}
tr:hover {
- background: var(--bg-hover);
+ background: var(--surface-2);
}
+/* ---- Score cells ---- */
+
.score-cell {
font-family: var(--font-mono);
font-weight: 600;
}
.score-high { color: var(--green); }
-.score-mid { color: var(--yellow); }
-.score-low { color: var(--red); }
+.score-mid { color: var(--yellow); }
+.score-low { color: var(--red); }
+
+/* ---- Form controls ---- */
select, input {
- background: var(--bg-card);
+ font-family: var(--font-mono);
+ background: var(--surface-1);
border: 1px solid var(--border);
- border-radius: 6px;
+ border-radius: 2px;
color: var(--text);
padding: 6px 10px;
- font-size: 0.875rem;
+ font-size: var(--text-ui);
+ transition: border-color 0.15s;
+}
+
+select:hover, input:hover {
+ border-color: var(--border-hover);
}
select:focus, input:focus {
outline: none;
border-color: var(--accent);
+ box-shadow: 0 0 0 2px hsla(193, 44%, 67%, 0.25);
}
+/* ---- Buttons ---- */
+
+button {
+ font-family: var(--font-mono);
+ background: var(--surface-2);
+ border: 1px solid var(--border);
+ border-radius: 2px;
+ color: var(--text);
+ padding: 6px 14px;
+ font-size: var(--text-ui);
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ cursor: pointer;
+ transition: border-color 0.15s, background 0.15s;
+}
+
+button:hover {
+ border-color: var(--border-hover);
+ background: var(--surface-3);
+}
+
+button:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px hsla(193, 44%, 67%, 0.25);
+}
+
+/* ---- Filters ---- */
+
.filters {
display: flex;
flex-wrap: wrap;
@@ -143,12 +262,15 @@ select:focus, input:focus {
}
.filter-group label {
- font-size: 0.7rem;
+ font-size: var(--text-label);
color: var(--text-muted);
text-transform: uppercase;
- letter-spacing: 0.05em;
+ letter-spacing: 1px;
+ font-weight: 500;
}
+/* ---- Stats grid ---- */
+
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -157,22 +279,30 @@ select:focus, input:focus {
}
.stat-card {
- background: var(--bg-card);
+ background: var(--surface-1);
border: 1px solid var(--border);
- border-radius: 8px;
+ border-radius: 2px;
padding: 16px;
text-align: center;
+ transition: border-color 0.15s;
+}
+
+.stat-card:hover {
+ border-color: var(--border-hover);
}
.stat-value {
- font-size: 1.75rem;
+ font-size: var(--text-stat);
font-weight: 700;
font-family: var(--font-mono);
+ color: var(--text);
}
.stat-label {
- font-size: 0.75rem;
+ font-size: var(--text-label);
color: var(--text-muted);
text-transform: uppercase;
+ letter-spacing: 1.5px;
+ font-weight: 500;
margin-top: 4px;
}
