The Triumph design system for staff dashboards and ops tools. Link two files, use the tokens, and a data-dense page comes out brand-correct and screen-tuned.
Fonts (Fabiola + Inter), the full palette, the type scale, spacing, and every component arrive through these two stylesheets. Then clone starter.html and edit content, not layout.
<!-- dark-mode lock (meta + first style block) --> <meta name="color-scheme" content="only dark"> <meta name="supported-color-schemes" content="dark"> <meta name="darkreader-lock"> <meta name="theme-color" content="#14181f"> <style>:root,html,body{background:#14181f!important;color:#f2fafa!important;color-scheme:only dark;}</style> <!-- tokens first, then components; all three fonts ride along --> <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css">
var(--token-name) in CSS. Never hardcode a hex, rgba, or oklch value..h-display, once per page). Every other heading is Inter.--text-label, nothing renders below --text-xs, and font-size only ever takes a --text-* token.The whole system is built from these. Every surface, border, and accent is one of them or a derived tint. Click a swatch to copy its hex.
Depth without leaving the palette. Deep Night lifted toward Upstate Fog gives a calm slate ladder, so cards read as layers instead of a flat wall of saturated navy. Greenville Blue is reserved for one deep emphasis band.
On light surfaces, body text is Greenville Blue or Deep Night, never Triumph Green.
Brandpad assigns Fabiola Capitals to its headings. On a data-dense screen that fights the data, and any weight above 400 synthetic-bolds the single-weight file into mush. So Fabiola is restricted to one hero (.h-display, rendered at the real Brandpad spec) and every working heading is Inter at a genuine heavy cut weight.
--text-label · 600 · --track-label · muted. Eyebrows, section numbers, KPI and stat labels, table headers, nav links: one spec, no exceptions.--text-xs is the absolute floor. Footnotes, deltas, badges, dense cells sit there; nothing sits below it..subsection-label at --text-lg minimum..eyebrow-accent.--text-* tokens.0.65rem clone of .kpi-label is the canonical sin.--track-* tokens are the only values.Three container widths and drop-in grids so a dashboard uses the monitor instead of stranding a skinny column in the middle. A single fluid spacing scale keeps the vertical rhythm consistent everywhere.
Reading width. Prose, single-column docs.
Dashboard width. KPI rows, charts, multi-column data.
Full bleed with gutters. Dense tables, seat maps.
Responsive by default, collapse to one column on narrow screens.
Sharp edges, lift on hover (never scale), one accent per layout. Everything below is a class in components.css.
.toast-stack.Tabular mono figures, accent-keyed KPIs, dense tables with totals, and Chart.js wired to the palette through the tok() helper.
For pages that ARE the event (matchday guides, one-pagers): the Main lockup, a quiet Inter kicker, the fixture in poster Fabiola, and an info rail where Light Green marks the one live fact. The scale boundary is hard: poster Fabiola belongs to title-card pages only; data dashboards keep .h-display at the calibrated size.
Match 9 of 17 · 2026 USL League One
No bespoke CSS. Every block above, composed the way a live Triumph dashboard composes them. This is the bar a page hits on the first try.
Brand-correct, screen-tuned, every time.
Pick the lockup for the space and the variant for the background. Never recolor, stretch, rotate, or add effects.
Soccer connects people across cultures, languages, and backgrounds, creating community, opportunity, and a sense of home.
var(--color-accent).translateY and a border tint.The most-used tokens as raw values. The full set lives in tokens.css.
/* canvas + elevation */ --color-bg: #14181f; --color-surface-2: #22262e; --color-surface-3: #2d3039; /* text */ --color-text: #f2fafa; --color-text-soft: #d2e6e5; /* accents (one per layout) */ --color-accent: #61a631; --color-blue: #69b3e7; --color-pop: #97d700; /* type + layout */ --font-display: Fabiola Capitals; --font-sans: Inter; --font-mono: JetBrains Mono; --text-label: clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem); --track-label: 0.08em; --track-kicker: 0.12em; --content-wide: 1440px; --space-section: clamp(2.75rem, 2rem + 3vw, 5rem); /* Chart.js: canvas cannot read vars, use the helper */ const tok = n => getComputedStyle(document.documentElement).getPropertyValue(n).trim();