Logos, colors, typography, voice, patterns, and the proposal component kit. One URL, one source of truth.
If you are an AI agent told to "build a Triumph-branded dashboard," WebFetch this page once and copy the block below verbatim. Every other section on this page is reference detail — but everything you minimally need to ship a correctly-branded dashboard is in the single <pre> below. Replace the section IDs, titles, and stub content with your dashboard's actual content.
Human readers: this is the same skeleton documented in expanded form across sections 04 (Typography), 08 (Layout), and 11 (Pre-Ship). Consolidated here so an AI fetch returns it as one block.
<!DOCTYPE html> <html lang="en" style="background:#020022;color-scheme:only dark;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Dark-mode lock. MUST be in head before any other style so dark-mode browser extensions read the explicit dark signal and skip auto-inversion. --> <meta name="color-scheme" content="only dark"> <meta name="darkreader-lock"> <meta name="theme-color" content="#020022"> <style>:root,html,body{background:#020022!important;color:#f2fafa!important;color-scheme:only dark;}</style> <title>Greenville Triumph · <Your Dashboard Name></title> <!-- Triumph design system. Tokens.css ships @font-face for Fabiola + Inter (self-hosted, CORS open). Link, never copy. Order matters: tokens before components. --> <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css"> <!-- JetBrains Mono is a dashboard-engineering convention (numeric tables, code blocks); not in the Brandpad spec. Drop this link if your dashboard has no numeric tables. --> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> </head> <body> <!-- Sticky nav with scroll-spy. Reference components.css for .sticky-nav styles. --> <nav class="sticky-nav"> <div class="nav-inner"> <div class="nav-brand">Your Dashboard Name</div> <div class="nav-links"> <a href="#overview">Overview</a> <a href="#sales">Sales</a> </div> </div> </nav> <!-- Banded numbered section. Alternate `class="bg-surface"` for visual rhythm. --> <section id="overview"> <div class="container"> <span class="section-number">01 · Overview</span> <h2 class="section-title">Section title here.</h2> <div class="section-intro"> <span class="lede">One-sentence lede.</span> <p>Supporting body copy in Inter 300.</p> </div> </div> </section> <section id="sales" class="bg-surface"> <div class="container"> <span class="section-number">02 · Sales</span> <h2 class="section-title">Banded alternate section.</h2> </div> </section> </body> </html>
--color-* and --brand-* token is defined in tokens.css. Use the names — see §02 for the full reference.components.css. See §07 for the catalog.Main is the default. Simplified is for tight spots like avatars, app icons, and embroidery. Wordmark is for sponsor unit walls, co-branding, or any horizontal stripe where the shield would crowd a partner.
Never distort, recolor, rotate, or apply effects to the mark. If a context seems to need a modified version, the right move is almost always to switch to a different lockup or variant, not to alter the logo.
Triumph Projects/Logos and Pictures/Triumph Rebrand Assets/Greenville Triumph/01. Logo's/. Use them for print, embroidery, signage, anything that scales past raster resolution.
Primaries (Greenville Blue, Triumph Green) carry brand identity. Neutrals (Upstate Fog, Morning Mist, Deep Night) build surfaces, copy, and breathing room. Accents (Electric Lime, Light Green) are reserved for highlights — pick one per layout. Brandpad's hard rule: never introduce an 8th color.
Tap any swatch to copy its hex.
Pick a text color, find your background, look at the score. AAA and AA are safe to read. FAIL means the text gets lost on that background, pick a different combo. The matrix already calls out the one combo on this palette that fails: Triumph Green on Upstate Fog. Use Greenville Blue or Deep Night for text on light surfaces instead.
| Pairing | Preview | Ratio | WCAG |
|---|---|---|---|
| Upstate Fog on Deep Night | Aa | 19.33 | AAA |
| Upstate Fog on Greenville Blue | Aa | 13.82 | AAA |
| Morning Mist on Deep Night | Aa | 15.79 | AAA |
| Triumph Green on Deep Night | Aa | 6.83 | AA |
| Triumph Green on Greenville Blue | Aa | 4.88 | AA |
| Triumph Green on Upstate Fog | Aa | 2.83 | FAIL |
| Deep Night on Triumph Green | Aa | 6.83 | AA |
| Deep Night on Upstate Fog | Aa | 19.33 | AAA |
| Greenville Blue on Upstate Fog | Aa | 13.82 | AAA |
| Electric Lime on Deep Night | Aa | 8.97 | AAA |
| Light Green on Deep Night | Aa | 11.73 | AAA |
| Light Green on Greenville Blue | Aa | 8.39 | AAA |
Every brand color is exposed as a CSS custom property by tokens.css. Use these names, never the raw hex (Chart.js canvas is the only exception — it can't read CSS vars, so its datasets must inline the --brand-* hex literals below). Token names below are the actual names in the live tokens.css, not inventions.
/* 7 brand colors — the only hex literals in the system. Reference these by --brand-* name in CSS, or by hex when Chart.js / canvas / external tooling can't resolve vars. */ --brand-greenville-blue: #002855; /* PMS 295 C · formal navy, surfaces */ --brand-triumph-green: #61a631; /* PMS 369 C · primary brand accent */ --brand-upstate-fog: #f2fafa; /* PMS 7541 C · primary text on dark */ --brand-morning-mist: #d2e6e5; /* PMS 5455 C · soft text on dark */ --brand-deep-night: #020022; /* PMS Black 6 · page background */ --brand-electric-lime: #69b3e7; /* PMS 292 C · sky blue (Brandpad name) */ --brand-light-green: #97d700; /* PMS 375 C · lime green (Brandpad name) */ /* Semantic surface roles — use these in components instead of reaching for --brand-*. */ --color-bg: var(--brand-deep-night); /* page background */ --color-surface: var(--brand-greenville-blue); /* banded section / card */ --color-surface-alt: rgba(242,250,250,.04); /* hover / inset surface */ --color-text: var(--brand-upstate-fog); /* primary body + headings */ --color-text-soft: var(--brand-morning-mist); /* secondary / supporting */ --color-text-muted: rgba(242,250,250,.55); /* captions, labels, meta */ --color-border: rgba(242,250,250,.10); /* default hairline */ --color-border-emphasis: rgba(242,250,250,.22); /* table headers, underlines */ /* Accent roles — one accent per layout. --color-accent or --color-blue, not both. */ --color-accent: var(--brand-triumph-green); /* primary CTA, active nav, KPI 1st */ --color-blue: var(--brand-electric-lime); /* secondary accent, KPI 2nd */ --color-pop: var(--brand-light-green); /* third accent, KPI 3rd, hover-pop */ /* Status — system signals only. Never decorative. Don't use --color-warning as a 4th accent. */ --color-success: var(--brand-triumph-green); --color-warning: #d4a14b; --color-danger: #ef4444; --color-info: var(--brand-electric-lime);
Triumph dashboards link to the two sibling stylesheets. Tokens update once, every dashboard inherits. Tap to copy.
<!-- In every Triumph dashboard, in <head>. Order matters. --> <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css"> /* Then reference tokens by name, never by hex. */ .kpi-value { color: var(--color-accent); font-family: var(--font-mono); } .section-pad { padding: var(--section-pad) 0; } /* Chart.js exception — canvas can't read CSS vars, use hex literals. */ const TRIUMPH_PALETTE = [ '#61a631', /* Triumph Green */ '#69b3e7', /* Electric Lime */ '#97d700', /* Light Green */ '#d2e6e5' /* Morning Mist */ ];
tokens.css ships colors, type scale, weight scale, fluid spacing, radius (sharp by default), shadow, duration, and easing — plus the base reset, body, heading, and layout primitives.
components.css ships every component on this page (buttons, inputs, toggle, badges, table, KPI markers, hover affordances, skeleton, frosted, stat band, phase, pillar, guideline card, delta chip, progress bar).
Need just the color names? Both files are public — open /tokens.css directly.
Use as background fill, watermark, or framing detail. Maintain contrast on whatever sits on top. Never overpower a primary brand element.
Triumph Projects/Logos and Pictures/Triumph Rebrand Assets/Greenville Triumph/04. Elements/. Open in Illustrator for path-perfect scaling, color overrides within the palette, or extraction to SVG.
Brandpad mandates only: Fabiola Capitals for H1/H2/H3, Inter Black for H4 (24px), Inter (labeled "Regular," renders at weight 300) for body. Everything below — exact pixel scale, line-heights, letter-spacing, JetBrains Mono — is our engineering choice, not brand canon.
Tabular numerals and a monospace face for stats are dashboard conventions, not Brandpad rules. JetBrains Mono is loaded from Google Fonts; if the brand later adopts a monospace, swap it out here.
Drop these rules into any Triumph dashboard verbatim. Family + weight assignments are Brandpad-mandated; the specific line-heights, font-sizes, and tracking values below are our engineering defaults (derived from how Brandpad's own page renders, not from a published spec).
/* 1. Link the system. Fonts auto-load via @font-face in tokens.css. */ <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css"> /* 2. Headings — BRAND: Fabiola Capitals, weight 400. ENGINEERING: line-height + tracking. */ h1 { font-family: var(--font-display); font-weight: 400; line-height: 1.0; letter-spacing: normal; text-transform: none; } h2 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.018em; text-transform: none; } h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.25; letter-spacing: -0.007em; text-transform: none; } h4 { font-family: var(--font-sans); font-weight: 900; line-height: 1.45; letter-spacing: -0.007em; text-transform: none; } /* 3. Body — BRAND: Inter, weight 300 (Brandpad labels it "Regular"; renders Light). */ body { font-family: var(--font-sans); font-size: 16px; font-weight: 300; line-height: 1.5; font-synthesis: none; } /* 4. NEVER set font-weight > 400 on a Fabiola element. The OTF ships only ONE weight; asking for 900 triggers synthetic bolding that crushes the letters. font-synthesis: none on body is the safety net — but write the right weight from the start. */
tokens.css via @font-face. Any dashboard that links the two stylesheets above inherits the real fonts automatically — no Adobe Typekit kit, no Google Fonts call for the brand faces. Files served at /fonts/Fabiola-Capitals.otf, /fonts/Inter-VariableFont.ttf, and /fonts/Inter-Italic-VariableFont.ttf.
font-synthesis: none rule baked into the body reset is the safety net — if a future stylesheet accidentally requests weight 900, the browser quietly returns the real 400 weight instead of fake-bold.
Triumph Projects/Logos and Pictures/Triumph Rebrand Assets/Greenville Triumph/02. Fonts/. The canonical brand guide is brandpad.io/greenville-triumph (humans only — login required). For AI agents building Triumph dashboards, treat this page as canonical.
The tagline and the brand belief below are Brandpad-confirmed. The Do/Avoid list is split: Brandpad-mandated rules first, house-style conventions second. Don't add to either without a Brandpad citation.
Soccer connects people across cultures, languages, and backgrounds, creating community, opportunity, and a sense of home.
Brandpad-mandatedThese components live in the canonical template at Proposal Creator/template/proposal.html. New proposals copy that file and edit in place — never reach for a different starting point. Engineering convention, not Brandpad.
Lead sentence describing the pillar at a high level. One or two sentences.
Sub-group labelThe same primitives shipped across every Greenville Triumph internal dashboard (sales, pricing, premium, vivenu). The palette is Brandpad; the patterns are engineering convention. Anything you'd build for a Triumph dashboard probably already exists here.
Outline is the default for in-app selection. Solid for primary CTAs. Ghost for tertiary actions. All buttons lift 2px on hover, never scale.
InputsBottom-border only. Accent underline grows from center on focus. Use this style for every text input; never boxed borders.
ToggleStatus colors are semantic system signals only, never decorative. Success maps to Triumph Green, info maps to Electric Lime. Warning amber and danger red exist for state communication, not brand color.
KPI markersLeft-border accent markers, no card wrappers. Each KPI cycles through accent → blue → light green → info via nth-child.
Data table| Match | Tickets | Revenue | Status |
|---|---|---|---|
| 6/3 vs Lexington | 3,842 | $112,400 | Sold Out |
| 6/17 vs Charlotte | 2,961 | $84,200 | Strong |
| 7/1 vs Forward Madison | 1,847 | $52,100 | Tracking |
| 7/11 vs One Knoxville | 2,304 | $66,800 | In Review |
Bare table, no card wrapper. Monospace numbers via font-variant-numeric: tabular-nums. Row hover tints in the accent's subtle fill.
Lift over scale. Triumph motion rule is explicit: never scale-on-hover. Use translateY plus border tint or glow.
Skeleton loadingShimmer animation using surface tokens. Use for any loading state. Animation collapses to 0.01ms under prefers-reduced-motion.
backdrop-filter: blur(20px) saturate(1.4). Semi-transparent over any background. Use sparingly — once per surface, never stacked.Three elevation levels. Shadows convey hierarchy, not decoration. Use sparingly.
This is the default for Triumph dashboards. Compose components inside section > .container. Alternate section.bg-surface for visual rhythm. Each section gets a numbered eyebrow, a title, and an intro lede with a left-rule paragraph. Scroll-progress bar at the top. Section spacing is --section-pad; element spacing inside sections is --space-sm to --space-md. Do not invent a different layout for "data-heavy" dashboards; this skeleton is already data-dense.
Paste this into the <head> and outer body of any new Triumph dashboard. Inline the dark-lock so it loads before paint; everything else links externally.
<!-- 1. Dark-mode lock. Inline. Loads before paint so extensions skip auto-invert. --> <meta name="color-scheme" content="only dark"> <meta name="darkreader-lock"> <meta name="theme-color" content="#020022"> <style>:root,html,body{background:#020022!important;color:#f2fafa!important;color-scheme:only dark;}</style> <!-- 2. Triumph design system. Link, never copy. --> <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css"> <!-- 3. Fonts. Fabiola + Inter are self-hosted by tokens.css. Only JetBrains Mono needs an external link. --> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet"> <!-- 4. Body: sticky nav with scroll-spy + banded numbered sections. --> <nav class="sticky-nav"></nav> <section id="overview"> <div class="container"> <span class="section-number">01 · Overview</span> <h2 class="section-title">Match-day snapshot.</h2> <div class="we-kpi-grid"><!-- KPI markers from components.css --></div> </div> </section> <section id="sales" class="bg-surface"><!-- banded alternate --></section>
var(--section-pad) top + bottom. Never hand-roll.var(--content-max) = 1180px. One column, never multi-column body..section-number → .section-title → .section-intro. Skip the eyebrow only on hero.class="bg-surface" to every other section. Builds vertical rhythm without dividers..subsection-label — uppercase mono, brand blue, tight rhythm.scroll-padding-top: 72px on html already set in tokens.css.If the design system doesn't cover a case, stop and ask. Do not improvise. The cost of a wrong invention here is every future dashboard inheriting it.
var(--color-accent), var(--space-md).translateY(-3px) + border tint on hover.var(--color-bg) backgrounds. Optional noise grain.--radius-full only on badges or thumbs.--color-warning).:root override.border-radius in px. Sharp = 0, pill = --radius-full.backdrop-filter: blur() on flat cards. Frosted is for sticky nav or glass overlays only.If a future Brandpad release adds motion guidance, defer to it and update this section. Until then, treat these as opinionated defaults from past dashboard work, not as brand law.
position: fixed so they don't scroll.prefers-reduced-motion: reduce, animations and transitions collapse to 0.01ms. This is a UX preference, not a brand rule — but every Triumph dashboard should respect it.
Every deck, every page, every print piece. One missed line is the difference between on-brand and off.