The Triumph design system, recalibrated for long-session dashboards. Same green. Same identity. Calmed slate canvas, Inter doing the work Fabiola was never built for, dashboard-tight spacing, restrained chroma.
This site is the operating manual for any AI agent (Claude, ChatGPT, Copilot, etc.) tasked with building, editing, or reviewing a Greenville Triumph staff-facing dashboard. The numbered sections below are documentation. What follows is operating procedure. Follow it exactly.
Machine-readable summary at /llms.txt.
<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@300..900&family=Space+Grotesk:wght@400..700&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://dashboards.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://dashboards.greenvilletriumph.club/components.css">
Three fonts: Inter (body + h1), Space Grotesk (h2/h3/h4), JetBrains Mono (data and labels). Fabiola Capitals loads automatically from tokens.css via @font-face, no extra import needed.
.h-display hero only. Weight 400, tracking normal, no text-transform. Inter handles h1 and body. Space Grotesk handles h2/h3/h4 (geometric grotesque, structural confidence at heading scale, doesn't compete with Fabiola).var(--token-name). The Chart.js dataset exception applies because Canvas cannot resolve CSS vars; use tok('--green') et al. for series.border-radius: 0 everywhere except --radius-full for pills and --radius-cta (2px) for CTA buttons.transform: scale() on hover. Use translateY(-2px) plus a shadow lift.var(--color-bg). Small decorative gradients on a KPI top bar or hover border are fine.--color-accent is exact Brandpad green (#61a631). Surfaces are hue-aligned with Greenville Blue. Text hue-aligned with Upstate Fog.
Building a sponsor deck or proposal slide? Stop and use design.greenvilletriumph.club (the Proposal Decks system). That one is poster-tuned, not for dashboards.
Need the strict external brand reference for logos, kit print, or official color/type rules? brandpad.io/greenville-triumph is authoritative.
Building any Triumph staff-facing dashboard (tickets, inventory, pricing, premium, projections, commission, sales reports)? This site is the source. Keep reading.
Copy the starter at /starter/. It is single-file, pre-wired with the design system, dark-mode lock, theme toggle, sticky nav with scroll-spy, and five placeholder sections (hero, KPI band, Chart.js trend, table with totals, tabs + segmented control). Customize the TODOs, deploy.
<meta name="color-scheme" content="dark light"> <meta name="supported-color-schemes" content="dark light"> <meta name="darkreader-lock"> <meta name="theme-color" content="#1d2230" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#f3f3f1" media="(prefers-color-scheme: light)"> <script>(function(){try{var s=localStorage.getItem('td-theme');if(s==='light')document.documentElement.classList.add('light')}catch(e){}})();</script>
Tells every browser plus the Dark Reader extension to leave the already-dark page alone. The inline script applies the stored theme before paint, killing flash-of-wrong-theme on reload.
The strict Triumph kit was built for sponsor decks, programs, posters, kits. Those carry well at distance with high saturation and big display type. Drag the same tokens onto a 27" monitor at desk distance for six hours and they fight the data. Four specific failures, four targeted fixes in this system.
Page #020022 + surface #002855, both saturated navy. No neutral, no hierarchy. Cards floated as the decorated panel, not as content lifted out of a calm canvas. Fix: chroma-0.013 slate canvas with four lift-steps.
Fabiola Capitals is a single-weight display face designed for poster sizes. On a dashboard h3 at 22px it cramps, all-caps strokes turn heavy, and it competes with the data. Fix: Fabiola reserved for the page hero, Inter for h2 through h4.
Navy 0.13, green 0.18, sky 0.13, lime 0.20, all stacked on a near-black bg with no neutral. The brand green at full saturation is correct, the canvas behind it is what made it scream. Fix: keep Triumph green at exact brand chroma (0.182, #61a631), sit it on a calm slate canvas. Brand-accurate, dashboard-comfortable.
Section padding maxed at 4.25rem read like museum gallery walls. A dashboard with twenty widgets feels disassembled. Fix: section padding tops out at 6rem at widest viewport, interior rhythm tightened to the design.seantippen scale.
Soft slate canvas with a 0.013-chroma whisper of navy hue. Triumph green
at the exact Brandpad value (#61a631) so anything that needs to
read as on-brand for a customer does. Greenville Blue family for the
secondary, lightened to read on dark. A four-color decorative rotation.
All values in OKLCH so light mode is a clean inversion, not a separate palette.
Per global rule, decorative accents rotate through green, royal blue, coral, and soft purple. Yellow and lime are status-only.
The canonical Brandpad values stay available as --brand-* for logo lockups and brand strips. They are not used as chrome.
The single biggest fix versus the strict brand. Fabiola Capitals lives on the page hero. Inter does the rest. The discipline is brutal and not optional. Fabiola at 22px on a dashboard h3 is the source of half the ugliness in this codebase.
Exact Brandpad H1 spec. Weight 400 (single-weight OTF, anything else synthetic-bolds the strokes). Tracking normal. text-transform none, because Fabiola Capitals is uppercase-by-design in the OTF — the rule is redundant CSS friction. Line-height 1.0 multi-line-safe (Brandpad's 0.8 is single-line only).
Inter at heading scale reads soft against Fabiola's angular display character. Space Grotesk is the geometric grotesque slotted in for h2/h3/h4 to add structural confidence without competing with Fabiola. h1 stays Inter at weight 800 because it sits closer to body and the heavier weight gives it presence.
Body copy uses Inter at the base size with relaxed leading. Comfortable at desk distance for hours. The grayish-blue secondary text reduces eye fatigue versus pure white on the slate canvas.
Dashboard-tight rhythm. Fluid values that scale gracefully from laptop to widescreen without spreading thin.
Solid for primary actions, outline for secondary, ghost for tertiary. Lift two pixels on hover, never scale.
Underline-only by default. Accent underline expands from the center on focus. Block inputs for forms where structure matters.
Badges for status tags. Pills with leading dot for live state indicators.
KPI markers use a left border that rotates through the four decorative accents. No card wrapper. The number is the hero, the chrome stays out of the way.
Default surface, 1px border, dashboard chrome.
Lifted surface for emphasis, with shadow.
Hover lifts two pixels, tightens the border.
Bare structure. No card wrapper. Monospace tabular numerals so columns align. Row hover tints accent-subtle. Total row gets a thicker top border and lifted background.
| Match | Date | Tickets | Revenue | Delta |
|---|---|---|---|---|
| Greenville Triumph vs. Charlotte | May 9 | 3,241 | $94,820 | +12.4% |
| Greenville Triumph vs. Tampa Bay | May 16 | 2,887 | $81,114 | +8.1% |
| Greenville Triumph vs. Asheville | May 30 | 3,612 | $108,930 | +21.7% |
| Greenville Triumph vs. Charleston | Jun 6 | 2,194 | $58,490 | -4.2% |
| Total | 11,934 | $343,354 | +9.5% |
Tabs for view-level navigation. Segmented for time ranges or mode switches. Both underline-active, both keyboard-navigable.
Chart.js 4.4.7. Series colors via tok('--green'), tok('--blue'), etc. Hex literals only, because the Canvas API cannot resolve CSS custom properties.
Every Triumph lockup, self-hosted at /images/brand/ for direct linking from any dashboard. Lockups with light/dark variants automatically swap when the page theme changes. For vector formats (EPS, AI) or any non-screen usage, pull from Brandpad instead.
A single-file copy-paste starting point for any new Triumph dashboard. Pre-wired with the design system, dark-mode lock, theme toggle, sticky nav with scroll-spy, and five placeholder sections. Delete what you don't need, fill in the TODOs.
tok('--green')) that switches with theme.Anti-patterns from the strict brand that landed on dashboards by mistake.
Single-weight display face cramps at UI sizes. Inter does this job. Fabiola earns one appearance per page, on the hero.
Triumph navy is a poster color. Sitting cards on it floods the field with chroma and kills hierarchy. Use the slate canvas instead.
Reserved for status UI only. Default decorative rotation is green, royal blue, coral, soft purple.
Flat surface plus optional noise grain. Small decorative gradients on a KPI top bar are fine. Radial blobs are banned.
Layout shifts cascade through grids. Lift two pixels and increase shadow.
Reach for the token. The Chart.js exception is the only exception, because Canvas does not resolve CSS variables.
Link the token sheet and the components sheet in the head of every Triumph dashboard. Single-file dashboards also pull Inter and JetBrains Mono from Google Fonts directly. Fabiola loads from this domain via @font-face already declared in tokens.css.
<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@300..900&family=JetBrains+Mono:wght@500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://dashboards.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://dashboards.greenvilletriumph.club/components.css">
/* CSS */ .card { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-md); } // Chart.js — hex literal because Canvas cannot read CSS vars const tok = (k) => getComputedStyle(document.documentElement).getPropertyValue(k).trim(); chart.data.datasets[0].borderColor = tok('--green');
| URL | Purpose |
|---|---|
| tokens.css | CSS custom properties: colors, type, spacing, motion |
| components.css | Component patterns: buttons, badges, tables, KPIs, tabs, toasts |
| /llms.txt | Machine-readable agent instructions (markdown). Read first if you are an LLM building a Triumph dashboard. |
| /starter/ | Single-file dashboard starter kit (copy-paste ready) |
| /images/brand/triumph-*.png | All Triumph brand lockups (main, simplified, wordmark, shape, pattern) in color / on-dark / on-light variants |
| /fonts/Fabiola-Capitals.otf | Fabiola Capitals OTF (served from design.greenvilletriumph.club, CORS open) |