# 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. --- ## The system in one idea: an instrument panel, not a quiet dashboard This builds Triumph staff dashboards: dense, data-heavy operations surfaces read at desk distance. The goal is a broadcast-grade instrument panel. It should look engineered, read like a scoreboard, and hold a lot of data without ever looking noisy. Density is the point, not a problem to solve. A Triumph dashboard is expected to carry many numbers, many charts, and many small readouts at once. "Clean" and "dense" are not in tension here, and you never resolve that tension by removing data. Clean comes entirely from structural discipline: one grid rhythm, one spacing scale, one label size, one type hierarchy, and color used as signal instead of decoration. When a page feels busy, the fault is inconsistency (mismatched spacing, a stray font size, a second accent, boxes inside boxes), not the amount of information. Fix the structure, keep the data. A page with forty numbers on a strict grid reads calmer than a page with ten numbers on a sloppy one. Color is signal, not surface. The canvas and the card surfaces are a restrained navy-graphite field so that green, sky, lime, and status colors register as intentional accents against it rather than as one more shade of the same blue. Green means interactive or live, nothing else. Brand color is concentrated in three sanctioned spots per page, and everywhere else stays quiet. This is a rebalance, not a rebrand: still navy, still Triumph, just no longer navy-on-navy-on-navy at every layer. See the elevation ladder in section 3 and the sanctioned-green-spots rule directly below. Structure carries the identity: the blueprint line grid, sharp corners (radius 0), the surface elevation ladder, the signature feature card, the scoreboard hero, and the left navigation rail. Motion is subtle, choreographed, reduced-motion-guarded, and never a scale transform. Every decorative element must be load-bearing. Restraint is the technique and every value is tuned to the minimum that achieves the effect; restraint is not the same as absence. ### The three sanctioned green spots per page Triumph Green appears loud in exactly three places, and stays quiet everywhere else: 1. The signature feature-card top edge (`.card-feature`, the 1px green-to-sky-to-transparent edge; a structural edge, never a fill). 2. The one hero scoreboard moment (`.exec-hero-card` `.is-lead` numeral at `--text-4xl`). 3. Live and interactive state (active nav rail link, focus rings, pills, links, CTAs, live counters). These are structural and stateful, not decorative, so they do not count against the one-accent-per-layout rule. --- ## 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 one of the three starters and edit content only: - `https://design.greenvilletriumph.club/starter.html` - the quiet dashboard (KPI row, chart, table). Default for routine pages. - `https://design.greenvilletriumph.club/starter-dataluxe.html` - the instrument panel (exec scoreboard opener, brand-zone field, bento mosaic, split rail, rings, vision control). For flagship ops boards. - `https://design.greenvilletriumph.club/starter-titlecard.html` - the title-card one-pager (poster Fabiola `.title-hero`). For pages that ARE the event (matchday guides, one-pagers), never data dashboards. --- ## 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 (neutral navy-graphite, not saturated blue) */ --color-bg page canvas (#0b1017) --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 deliberate saturated Greenville-Blue band (use sparingly; everywhere else on the ladder is neutral graphite by design) /* 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) /* left nav rail (see section 4b) */ --rail-w 60px (collapsed) --rail-w-open 248px (expanded) --rail-hover-delay 0.12s (hover-intent debounce, read by rail.js) --rail-transition --rail-z 85 /* frosted chrome (nav + rail + glass overlays; never a raw rgba literal) */ --surface-frost .nav / .nav-rail background --surface-frost-deep .frosted / drawer-scrim background ``` --- ## 4. Layout pattern (the canonical dashboard shape) Slim top bar (brand + actions only, no section links) plus a left nav rail that owns section wayfinding with scroll-spy, then banded numbered sections, continuous scroll. The rail is default; see 4b for its full contract. ```html
Name
01 · Overview

Headline.

One supporting sentence.

``` Containers: `.container` (1200, reading), `.container-wide` (1440, dashboards), `.container-full` (full bleed). Grids: `.grid-kpi`, `.grid-cards`, `.grid-2/3/4`, and `.grid` (12-col) with `.col-4 .col-8` spans. Alternate `class="bg-surface"` on sections for banded rhythm. --- ## 4b. Left nav rail (canonical section wayfinding) The rail replaced the old horizontal `.nav-links` row for in-page section jumps. It is fixed to the left edge, collapsed to icon/mark width by default, and expands into the full labelled panel via hover-intent, keyboard focus, or a deliberate click-to-pin. `.nav-links` still exists in components.css for a page that wants a horizontal link row instead, but the rail is the default for every new dashboard. **Note on an older constraint:** an earlier revision of this doc (and a matching CSS comment) said hover must NEVER widen the rail - that was written for a prior design iteration and is not a permanent rule. The project owner confirmed the actual requirement is the opposite: hovering the collapsed rail should expand it into a fully usable panel (links clickable, labels visible). The three-tier model below is the current, correct behavior. **Hard rule (still non-negotiable):** no rail state may ever obscure, hide, or clip real page content (numbers, table columns, headline text) *persistently*. Two early versions broke this by making an *expanded, reflow-free* panel sit directly over content with only the 60px collapsed width reserved (one translucent, one opaque) - the fix isn't "never widen on hover," it's "hover's widened panel floats as a self-shadowed overlay and auto-dismisses the instant the pointer/focus leaves," so it never *permanently* hides anything. Only a deliberate, persistent pin earns a permanent page reflow. **When to use it:** every dashboard with more than 2-3 scroll sections. Skip it only for a single-section page with nothing to jump to. **Classes:** ``` nav-rail the fixed left rail container nav-rail-inner vertical flex column inside it nav-rail-brand reserved for a small icon-only Triumph mark at the rail top; currently unused (display:none) - no square icon exists in the asset library yet, so the rail does not duplicate the top bar's full lockup. Reintroduce only if a real icon mark ships. nav-rail-links