# Greenville Triumph Dashboard System - Build Contract
If you read only this file, you can still build a brand-correct Triumph
dashboard. Live reference and examples: https://design.greenvilletriumph.club/
This is the **dashboard** system: staff-facing tools, ops surfaces, ticketing
and revenue dashboards. On brand, tuned for dense data on a screen.
---
## 1. Paste this into ``
```html
```
All three faces (Fabiola Capitals, Inter, JetBrains Mono) load automatically
through `@font-face` in tokens.css; no Google Fonts link needed. Best starting
point: clone `https://design.greenvilletriumph.club/starter.html` and edit
content only.
---
## 2. Hard rules (non-negotiable)
- Use `var(--token-name)` in CSS. Never hardcode a hex, rgba, or oklch value. (Chart.js datasets are the only exception, see section 6.)
- Fabiola is the hero only: one `.h-display` per page, weight 400. Every other heading is Inter. Never put Fabiola on h2/h3, never weight above 400 on it.
- Seven brand colors, never an eighth. Surfaces are the derived slate ladder, not new colors.
- One accent per layout: Electric Lime (`--color-blue`) OR Light Green (`--color-pop`), never both.
- SIZE LAW: `font-size` only ever takes a `--text-*` token, never a raw rem/px value. `--text-xs` is the absolute floor; NOTHING renders smaller, including captions, footnotes, chart annotations, status pills, and count bubbles. Never shrink a registry component's type in page CSS (`.kpi-label { font-size: 0.65rem }` is the canonical sin). Labels too small, everywhere, was the system's longest-running failure; these tokens are the fix.
- Every uppercase mono label is `--text-label` / `--weight-semibold` / `--track-label` / muted. That covers eyebrows, section numbers, KPI and stat labels, table headers, nav links, and any key/dt-style label you invent. Do not re-implement the role with a local class at a smaller size; use the registry class or match its spec exactly.
- Labels never wear the accent. Triumph Green means interactive or live (links, active nav, CTAs, live counters, NOW states), nothing else. Exactly ONE featured kicker per page (the hero's) may opt in via `.eyebrow-accent` (`--weight-bold` / `--track-kicker` / accent).
- Tracking only via the tokens: `--track-label` (working labels), `--track-kicker` (the one featured kicker), `--track-subhead` (`.subsection-label`). Never type a literal letter-spacing value on a label. Wide tracking on tiny text is the recurring disease; the tokens are sized to the label tier.
- Subheaders are HEADINGS, not labels. Any header of a content group (`.subsection-label`, timeline group headers, map group titles) renders at `--text-lg` minimum with tracking at or under `--track-subhead`. `h6` and `.eyebrow` are labels; they never head a content group. Tiny mono caps as subheaders is the #1 recurring failure; do not reintroduce it.
- Triumph Green is never body text on a light surface (fails contrast). Use Greenville Blue or Deep Night.
- Yellow (`--color-warning`) is for genuine warning state only, never decorative.
- Sharp corners by default (`--radius` is 0). `--radius-full` only on pills, badges, toggle thumbs.
- Lift on hover (`translateY`), never scale. No gradient page or section backgrounds.
- Tabular-nums on every numeric column.
- Divided cell rows (stat bands, scoreboards) and left-bar accents use symmetric horizontal padding so text NEVER touches a divider or accent bar. Flush only the first cell of each row to the container edge.
- No em-dashes in copy. No "GVL Triumph" (use "Greenville Triumph"). No restricted-access framing.
---
## 3. Tokens (most-used; full set in tokens.css)
```
/* canvas + elevation ladder (slate, derived from Deep Night) */
--color-bg page canvas (#14181f)
--color-surface-1 faint band (alternate sections: )
--color-surface-2 card / panel
--color-surface-3 raised / hover
--color-surface-4 overlay / drawer
--color-band-navy the one deep Greenville-Blue band (use sparingly)
/* text */
--color-text primary (#f2fafa) --color-text-soft secondary (#d2e6e5)
--color-text-muted labels/meta --color-text-faint disabled/placeholder
--text-alpha-90/70/50/30/15 Upstate Fog at opacity; for text on a colored/variable bg
/* borders */
--color-border --color-border-emphasis --color-border-strong
/* accents (one per layout) */
--color-accent #61a631 Triumph Green --color-blue #69b3e7 sky --color-pop #97d700 lime
--accent-subtle (row tint) --accent-muted (active/focus)
/* status (signals only) */
--color-success --color-warning --color-danger --color-info (+ each -subtle)
/* chart series (hex; stays in the seven colors) */
--series-green #61a631 --series-sky #69b3e7 --series-lime #97d700 --series-mist #d2e6e5
/* type */
--font-display Fabiola Capitals (.h-display only) --font-sans Inter --font-mono JetBrains Mono
--text-xs (THE FLOOR) ... --text-4xl (fluid) --text-display (Fabiola hero only)
--text-label the one size for every uppercase mono label (~15px at 1440)
--track-label / --track-kicker / --track-subhead the only letter-spacing values labels may use
--weight-light 300 ... --weight-black 900 (body default 400; 300 for large lede only)
/* spacing + layout */
--space-xs/sm/md/lg/xl + --space-section (fluid) --space-1..16 (fixed 4px base)
--content-max 1200px --content-wide 1440px --gutter --nav-h 60px
--radius 0 --radius-full 999px
--shadow-sm/md/lg --shadow-float/-float-lg (overlays: dropdowns, toasts, popovers)
--duration/-instant/-fast/-slow --ease-out/-in/-in-out/-spring (spring overshoots via linear() where supported)
```
---
## 4. Layout pattern (the canonical dashboard shape)
Sticky nav with scroll-spy, then banded numbered sections, continuous scroll.
```html
Name