# Triumph Dashboards Design System > The canonical design system for Greenville Triumph SC staff-facing > dashboards. Dashboard-tuned variant of the Triumph brand: calm slate > canvas, Fabiola Capitals reserved for hero only, Inter for h2-h4 and > body, dashboard-tight spacing, decorative palette pinned to green / > royal blue / coral / soft purple, brand-accurate Triumph green at > exact #61a631. If you are an AI agent or LLM tasked with building, editing, or reviewing a Triumph staff-facing dashboard (tickets, inventory, pricing, premium, projections, commission, sales reports, etc.), this file is your operating manual. ## Quick paste (drop into ) ``` ``` Fabiola Capitals loads automatically via `@font-face` declared inside `tokens.css`. No extra import needed. ## Hard rules (non-negotiable) 1. **Fabiola Capitals is for `.h-display` page hero ONLY.** Weight 400 (the OTF is single-weight; anything else synthetic-bolds). Tracking normal. No `text-transform`. Inter handles h1 (sits closest to body) and all body copy. Space Grotesk handles h2/h3/h4 (geometric grotesque, more structural confidence than Inter at heading scale, doesn't compete with Fabiola). 2. **No hardcoded colors in CSS.** Reference tokens with `var(--token-name)`. The Chart.js dataset exception applies because the Canvas API cannot resolve CSS custom properties; use the `tok()` helper to pull hex from `:root`. 3. **Decorative palette is fixed**: green (accent), royal blue (secondary), coral (tertiary), soft purple (quaternary). Yellow and lime are reserved for status UI only. 4. **Sharp edges.** `border-radius: 0` everywhere except `--radius-full` for pill shapes and a 2px `--radius-cta` reserved for CTA buttons. 5. **No `transform: scale()` on hover.** Use `translateY(-2px)` plus a shadow increase. 6. **No gradient backgrounds on the page or section level.** The body is flat `var(--color-bg)`. Small decorative gradients on a KPI top bar or hover border are fine. 7. **Brand fidelity:** `--color-accent` is the exact Brandpad Triumph green (#61a631, OKLCH 0.625 0.182 138). `--color-secondary` is Greenville Blue family (hue 260) lifted to lightness 0.68. Surfaces are hue-aligned with Greenville Blue at chroma 0.013, text is hue-aligned with Upstate Fog at chroma 0.012. ## Wrong system check - **Sponsor decks, proposal slides, client-facing artifacts on the proposal pipeline** → use `design.greenvilletriumph.club` (the Proposal Decks design system). Poster-tuned, not for dashboards. - **Authoritative external brand reference** (logos, kit print specs, official color/type rules) → `brandpad.io/greenville-triumph`. Cite for sponsor-facing decisions only. - **This system (`dashboards.greenvilletriumph.club`)** → every Triumph staff-facing dashboard, ops tool, ticketing/inventory/pricing surface. ## Starting a new dashboard Copy `https://dashboards.greenvilletriumph.club/starter/index.html`. It is single-file, copy-paste-ready, and pre-wired with: - Dark-mode meta-tag stack (Dark Reader lock + per-scheme theme-color) - Inline early-paint script (no flash-of-wrong-theme on reload) - Sticky nav with scroll-spy and a theme toggle - Five placeholder sections: hero, KPI band, Chart.js trend, table with totals, tabs + segmented control - TODO comments at every customization point ## Core resources - [tokens.css](https://dashboards.greenvilletriumph.club/tokens.css): all CSS custom properties, dark + light mode - [components.css](https://dashboards.greenvilletriumph.club/components.css): component patterns (buttons, badges, tables, KPIs, tabs, toasts, pills, progress) - [starter/](https://dashboards.greenvilletriumph.club/starter/): copy-paste starter dashboard - [images/brand/](https://dashboards.greenvilletriumph.club/images/brand/): all Triumph lockups (main, simplified, wordmark, shape, pattern) in color / on-dark / on-light variants - [index.html](https://dashboards.greenvilletriumph.club/): full HTML showcase with diagnosis, color, typography, spacing, every component pattern ## Key tokens by name Surfaces: `--color-bg`, `--color-surface`, `--color-surface-hover`, `--color-surface-raised`, `--color-surface-overlay` Text: `--color-text`, `--color-text-secondary`, `--color-text-muted`, `--color-text-disabled` Decorative accents: `--color-accent` (Triumph green), `--color-secondary` (Greenville Blue family), `--color-tertiary` (coral), `--color-quaternary` (soft purple) Status: `--color-success`, `--color-warning`, `--color-danger`, `--color-info` Brand-exact reference: `--brand-greenville-blue`, `--brand-triumph-green`, `--brand-upstate-fog`, `--brand-morning-mist`, `--brand-deep-night`, `--brand-electric-lime`, `--brand-light-green` Chart.js series (hex literals): `--green`, `--blue`, `--red`, `--amber`, `--purple`, `--cyan`, `--yellow`, `--orange` Typography: `--font-display` (Fabiola, hero only), `--font-heading` (Space Grotesk, h2/h3/h4), `--font-sans` (Inter, h1 + body), `--font-mono` (JetBrains Mono); size scale `--text-xs` to `--text-4xl` plus `--text-display` Spacing: `--space-xs` to `--space-xl`, plus fixed `--space-1` to `--space-16`, plus `--space-section` Radius: `--radius-xs` to `--radius-xl` (all 0), `--radius-cta` (2px), `--radius-full` (9999px) Motion: `--duration-instant` to `--duration-slow`, eases `--ease-out`, `--ease-in`, `--ease-in-out`, `--ease-spring` ## Dark-mode declaration (copy verbatim) ``` ``` ## Anti-patterns (do not produce these) - Fabiola on h2, h3, or h4. Inter only at those sizes. - `text-transform: uppercase` on `.h-display` (Fabiola Capitals is uppercase-by-design; the rule is redundant friction). - Negative letter-spacing on h1 (Brandpad H1 is `letter-spacing: normal`). - Saturated navy `#002855` as a surface or large background (it is a brand reference color, not a UI surface). - Yellow or lime as a decorative accent (status-only). - Hardcoded hex codes in CSS (use tokens). - `transform: scale(1.02)` or similar on card hover. - Gradient backgrounds at page or section level.