Dashboards
Dark, dense, built for staff eyes. Two files, zero hardcoded hex, and it comes out right.Two links and you inherit the whole brand.
Fonts (Fabiola + Inter), the full palette, the type scale, spacing, and every component arrive through these two stylesheets. Then clone starter.html and edit content, not layout.
/
A member or a guest using a screenScreens/screens/
A flyer, an ad, a poster, or one printed sheet, graphic-ledPrint/print/
A multi-page proposal, report, or guide read as a PDFDocuments/documents/
More than one page, a running head, or page numbers means Documents. One sheet built from type, colour blocks, and the weave means Print.
Being a web page does not put a piece on this system. Ask who sees it and what it is: staff reading data lands here, a member or a guest in a browser lands on Screens, a graphic-led single sheet lands on Print, and a multi-page PDF lands on Documents. The same four rows sit on the systems hub and on every door. Sections 08 Pattern, 09 Craft, 07 Logos, and 10 Voice are shared law and govern all four.
<!-- dark-mode lock (meta + first style block) --> <meta name="color-scheme" content="only dark"> <meta name="supported-color-schemes" content="dark"> <meta name="darkreader-lock"> <meta name="theme-color" content="#0b1017"> <style>:root,html,body{background:#0b1017!important;color:#f2fafa!important;color-scheme:only dark;}</style> <!-- tokens first, then components; all three fonts ride along --> <link rel="stylesheet" href="https://design.greenvilletriumph.club/tokens.css"> <link rel="stylesheet" href="https://design.greenvilletriumph.club/components.css">
The four rules that keep it on brand
- Use
var(--token-name)in CSS. Never hardcode a hex, rgba, or oklch value. - Fabiola is the hero only (
.h-display, once per page). Every other heading is Inter. - Triumph Green is the accent. Sky and lime live inside charts only, and never together.
- Labels are
--text-label, nothing renders below--text-xs, and font-size only ever takes a--text-*token.
Seven brand colours. Never an eighth.
The whole system is built from these. Every surface, border, and accent is one of them or a derived tint. Click a swatch to copy its hex.
Depth without leaving the palette. Deep Night lifted toward Upstate Fog gives a calm slate ladder, so cards read as layers instead of a flat wall of saturated navy. Greenville Blue is reserved for one deep emphasis band.
On light surfaces, body text is Greenville Blue or Deep Night, never Triumph Green.
The accent lawChrome speaks green, and only green. Triumph Green is the accent: active nav, the featured kicker, the lead KPI, links, focus rings. Electric Lime (the sky blue) and Light Green (the lime) are chart-series colours: they exist so a second data series can read against green, and inside a chart is the only place they appear. When every label, price, and kicker shouts in its own hue, nothing reads as important; one accent held everywhere is what makes the page feel deliberate. If a layout feels flat with one accent, the layout is the problem, not the palette.
- Green for every interactive and every emphasis moment in chrome.
- A chart's second series takes sky OR lime, one of them, chosen once per page.
- Categories past three ramp through Upstate Fog opacities, not new hues.
- Yellow means a genuine warning state. Red means danger. Nothing else, ever.
- Sky and lime in the same layout.
- Lime as a text accent, a label colour, or a price shout. Two named exceptions, and only these two: sky is permitted as
--color-infostatus hardware (the info pill, the info badge) and nowhere else, and.thr-item.is-live .thr-valuecarries lime as the single live fact on a title-card page. - Accent hues cycling through the bars of one chart.
- Liberty Yellow or Liberty Sky in a Triumph layout. They belong to Greenville Liberty and nothing else.
One Fabiola moment. Inter does the work.
Brandpad assigns Fabiola Capitals to its headings. On a data-dense screen that fights the data, and any weight above 400 synthetic-bolds the single-weight file into mush. So Fabiola is restricted to one hero (.h-display, rendered at the real Brandpad spec) and every working heading is Inter at a genuine heavy cut weight. A specimen row or a component demo that shows the face is exempt: this page renders Fabiola four times because it documents the face, and a real dashboard renders it once.
- Every uppercase mono label is
--text-label· 600 ·--track-label· muted. Eyebrows, section numbers, KPI and stat labels, table headers, nav links: one spec, no exceptions. --text-xsis the absolute floor. Footnotes, deltas, badges, dense cells sit there; nothing sits below it.- Subheaders are headings:
.subsection-labelat--text-lgminimum. - One featured kicker per page may take
.eyebrow-accent.
- Type a raw rem or px font-size. Size only via
--text-*tokens. - Re-shrink a registry label in page CSS. A local
0.65remclone of.kpi-labelis the canonical sin. - Type a literal letter-spacing on a label; the
--track-*tokens are the only values. - Put the accent on wayfinding. Green means interactive or live.
- Display and hero only, weight 400, once per page.
- Leave the vertical seating alone. The metric-override
@font-face(ascent, descent, line gap) is baked intotokens.css, so Fabiola already sits correctly. - Correct the horizontal edge by hand when two Fabiola lines stack, or when a Fabiola hero shares a left edge with an Inter eyebrow. Fabiola's left side bearing varies per glyph, so a flush-left stack goes ragged.
- Nudge with
margin-left: -(lsb)emkeyed to that line's first glyph. The measured per-glyph table is intokens.css. - Keep
font-synthesis: none.
- Hand-nudge Fabiola vertically with margins, line-height, or
translateY. If it looks wrong, fix it intokens.css, not on the page. - Route h2 or h3 through Fabiola. It synthetic-bolds to mush.
- Use any Fabiola weight above 400.
- Bake a side-bearing nudge into a class or a template. It is per-content, so it applies per piece.
- Nudge a single centred hero. It needs nothing.
Fill the screen, keep the rhythm.
Three container widths and drop-in grids so a dashboard uses the monitor instead of stranding a skinny column in the middle. A single fluid spacing scale keeps the vertical rhythm consistent everywhere.
- Default to horizontal. On a desktop dashboard, side by side is the starting point. A single column is the fallback under 1000px, not the first move.
- Ask of every block: does this fit beside its neighbour? If yes, put it there.
- Use the grids:
.gridwith.col-*spans,.grid-2through.grid-4,.grid-kpi. They collapse on their own when the columns would get too narrow to read. - Let a long paragraph run
.prose-colsacross the canvas instead of a 64ch ribbon with an empty half beside it. - Reserve the single column for genuinely sequential reading.
- Drop everything into one narrow left-aligned stack. This is the most repeated failure in the system. It is not a design decision, it is the lazy default.
- Build a label tower. A fixed label column is at least as wide as its longest typical label; if a label wraps past two lines, the column is too narrow. Widen it or run the meta inline. A narrow column stacking one or two words per line beside an empty row is the BEER-over-GARDEN failure in layout form.
- Leave 60% of a 1440px canvas empty while the copy breaks five words in.
- Shrink type so a too-narrow column "fits". Widen the column instead.
- Stack two things that would sit happily side by side.
- Insert a
<br>to fix a bad wrap. Fix the width.
The section header is the working example, and it is a decision, not an automatic reflow. The base .section-header is ONE COLUMN: number, title, then the description under it capped at the measure. Add .split and above 1000px it becomes two columns, the number and title on the left, the supporting copy on the right, sharing a baseline. Use .split only where the description is long enough to fill its own column; a short line in a split header leaves half the row empty, which is the failure the split exists to fix, running backwards. Headings also carry text-wrap: balance and body copy carries text-wrap: pretty by default, so a heading that has to break splits into even lines rather than dumping one orphan word per line. If a phrase must never break at all, give it .phrase. If balance still leaves you a one-word column, the container is too narrow: widen it.
Reading width. Prose, single-column docs.
Dashboard width. KPI rows, charts, multi-column data.
Full bleed with gutters. Dense tables, seat maps.
Responsive by default, collapse to one column on narrow screens.
Every class, in every state it actually has.
This is the registry rendered, not described: each canon class from agents.md section 5, at rest and in each state components.css genuinely defines. Nothing here is invented. If a state is not a selector in the sheet, it is not on this page, and if a class is on this page it is safe to type. Sharp edges, lift on hover and never scale, one accent per layout.
The canonical label pair. A quiet muted working label, and the page's ONE featured accent kicker. New work uses these two.
LEGACY ALIAS of the pair above, wearing a 10px square tick. Kept so older pages render; reach for it only when the page genuinely wants the tick.
Section chrome. The number is a wayfinding label and stays muted; the subsection label is a heading and sits at --text-lg.
The base is ONE COLUMN: number, title, then the description under it capped at the measure. .split runs the two-column header (title left, copy right) above 1000px and is for LONG descriptions only. A short description in a split header leaves half a column empty, which is the failure the split was built to fix, running backwards.
Fill the screen.
One supporting sentence.
Fill the screen.
Three container widths and drop-in grids so a dashboard uses the monitor instead of stranding a skinny column in the middle, and one fluid spacing scale that keeps the vertical rhythm consistent everywhere.
Hover lifts 2px and never scales. Disabled is :disabled or [aria-disabled="true"]: 45% opacity, pointer events off.
Filter chip. The on state is [aria-pressed="true"] or .on; .active is the legacy spelling and renders the same idea in an accent outline.
One control, one answer. Pressed is [aria-pressed="true"] or .on; .active is the legacy spelling.
The filter and control row above a table or a chart. The spacer pushes the trailing action to the right edge.
A dot plus a word. .live is the only one that animates, and its pulse is the page's live signal.
The change chip and the freshness stamp. A dead stamp is how a stalled feed says so, instead of showing a silent zero.
Numerals are --color-text. Exactly ONE .stat per band takes .is-lead for the green numeral, the same mechanic as .exec-stat.is-lead. Never two.
The loading tile swaps label, value, and foot for a shimmer and holds the tile's own height, so the row never jumps when the fetch lands.
Value, a 64px STATIC spark, and a delta on one line. The spark takes a series colour with .sky, .lime, or .mist; the draw-on animation is out of canon.
Raised lifts the panel a step up the elevation ladder; flush drops the padding so a full-bleed table can sit inside a card (the tables on this page use it).
Season plans
One supporting sentence.
Season plans
One supporting sentence.
The signature panel: surface-2, a green top edge, and a 2px lift on hover. The one canon survivor of the legacy layer. Hover it.
Know before you go
The soft rule for a grid that elevation already separates, as a rule and as a border.
Hover affordances, one per element and never stacked. Lift is 2px maximum, sweep is the green top edge, and .u-draw draws an underline in on hover or focus.
The loading shimmer. Under reduced motion it holds a static fill instead of animating.
A query that returned nothing, and a fetch that died. Both say so in place; neither is a silent zero.
Every table state in one table: the sorted header carries its green underline and its column carries the tint, the opponent cells are copy cells with the second one mid-copy, the heat ramp tints the one column that carries the story, and the total row closes it. The live wiring is on the table in 05 Data display.
| Match | Opponent | Open | Status |
|---|---|---|---|
| 6/21 | One Knoxville | 1,174 | Slow |
| 8/8 | Forward Madison | 742 | On sale |
| 6/3 | Charlotte Independence | 518 | On sale |
| 7/11 | Chattanooga Red Wolves | 112 | Near sellout |
| Total | 2,546 |
These are page singletons: one opener, one bar, one rail, one progress bar. Rendering a second copy inside a gallery would break the rule each of them exists to enforce, so the page itself is the specimen and the states are named here.
The opener at the top of this page, running the .build choreography: the title line rises, the kicker and standfirst fade up, and the four scoreboard cells land in sequence with their numerals rolling on arrival. One page, one opener. Its parts are .masthead-inner, .masthead-top, .masthead-cta, .masthead-standfirst, .masthead-sub, and .masthead-base.
The rail down the left edge. Collapsed to marks at rest, open as a floating overlay on debounced hover or on keyboard focus, and reflowing the page only on a deliberate pin. The scroll spy writes .active onto the current link, and the toggle in the bar reads [aria-expanded="true"] in accent while the rail is pinned. Under 900px the whole thing becomes a drawer over .nav-rail-scrim. Full contract in 13 Left nav rail.
The 2px scroll-progress bar sitting on the underside of the bar at the top of this window. It is a scroll() timeline, so it runs with no JS and simply does not appear in a browser that cannot drive it.
The title-card hero, rendered in 05 Data display. Its info rail carries the one named exception to the accent law: .thr-item.is-live .thr-value is Lime, marking the single live fact on a page that IS the event. Never on the same page as .exec-hero-card.
The executive scoreboard, rendered in 05 Data display and opening this page above. One .exec-stat per scoreboard takes .is-lead for the green numeral; .has-spark opens the spark slot inside each cell.
A full-bleed photo band with a flat --surface-frost-deep wash and one line of type. Kept so older pages render and NOT for new work: the page's one bounded band is the weave. The page supplies the picture as --photo-break-img on the element. It is documented here rather than rendered, because rendering it would give this page a second band and contradict the rule in the same breath.
The registry is short on purpose. Tabs, toggles, toasts, drawers, gauges, rings, and bento grids shipped in the 2026 overhaul, went almost entirely unused on live dashboards, and are out of canon; the classes stay in components.css so old experiments keep rendering, and they are deliberately absent from the gallery above. The 2026-08-31 motion pass readmitted chips, segmented controls, skeletons, the empty state, and the static spark, each with the full state matrix shown here; the canon list itself lives in agents.md.
Numbers, the way Triumph reads them.
Tabular mono figures, accent-keyed KPIs, dense tables with totals, and Chart.js wired to the palette through the tok() helper. Charts are single-hue green by default; a second hue enters only when a second series genuinely needs to read against the first.
Tickets by channel
Cumulative sales
liveOn a flagship page the scoreboard opens the page as the .masthead band; the top of this page is the live example, and every numeral rolls up once via data-countup. The boxed .exec-hero-card below is the mid-page variant for a page that cannot open with the band. Never both on one page.
2026 Season Ticketing
As of Jun 4, 2026 · 5 played · 14 to goFor pages that ARE the event (matchday guides, one-pagers): the Main lockup, a quiet Inter kicker, the fixture in poster Fabiola, and an info rail where Light Green marks the one live fact. The scale boundary is hard: poster Fabiola belongs to title-card pages only; data dashboards keep .h-display at the calibrated size.
Match 9 of 19 · 2026 USL League One
Every numeral in the band is --color-text. Exactly ONE .stat per band takes .is-lead for the green numeral, which is the same mechanic as .exec-stat.is-lead in the scoreboard above. Two lead cells in one band is two answers to a question that has one.
Heat tints (td.heat-1 to heat-4, the green alpha ramp from tokens.css) put the magnitude read inside the table: the eye lands on the biggest open count without walking the column. Tint the one column that carries the story, nothing else, and never as a row stripe.
This table is also the live reference for table.js: .sortable puts click-to-sort on every header (sort key is data-v when present, otherwise the stripped cell text), data-nav gives the rows a roving tabindex so arrow keys or j/k walk them, and the opponent cells are td.copy, copying on click or with c on the focused row.
A real page, composed with intent.
The opener, the quiet body, heat in the table, one crafted chart. Every block from this system, composed the way a flagship dashboard composes them; this is the bar a page hits on the first try, and the shape starter.html now clones.
Cumulative revenue
liveTop reps
| Match | Opponent | Sold | Held | Open | Status |
|---|---|---|---|---|---|
| 5/9 | Lexington SC | 3,842 | 0 | 0 | Sold out |
| 6/3 | Charlotte Independence | 3,104 | 220 | 518 | On sale |
| 6/21 | One Knoxville | 2,488 | 180 | 1,174 | Slow |
| 7/11 | Chattanooga Red Wolves | 3,610 | 120 | 112 | Near sellout |
| Total | 13,044 | 520 | 1,804 |
Three lockups, three backgrounds.
Pick the lockup for the space and the variant for the background. Never recolor, stretch, rotate, or add effects.
The Pattern element above is the weave. How to place it is 08 Pattern, and getting it wrong is the most common brand error in the whole system.
Lockup law- Full-colour crest on light surfaces only.
- On dark or navy, use the white crest (
triumph-main-on-dark.png). - Always the full lockup, at a size where it reads.
- Name the place as Mauldin, South Carolina.
- Full-colour crest on a dark background.
- Recolour, outline, rotate, stretch, flip, or crop a logo.
- Add a shadow, glow, or any effect.
- Place the GE Vernova Park logo on any piece, or its name on a Triumph piece. Official internal documents such as the Match Day Guide may use the name as plain text, never the logo.
The weave is a band, never the ground.
The interlocking-T weave is the brand's one texture, and it is the element most often used wrong, in both directions: tiled small into pasted chunks, or flooded across a whole page as wallpaper. Both are banned. The weave lives in a contained band with hard boundaries: a masthead strip, a footer band, one emphasis section on a page that has earned it. Inside its band the method is fixed: one field, cover, no-repeat, the house −8° tilt. Content never sits directly on the weave; dense text gets a solid panel.
<!-- a BAND: bounded height, hard edges - never the page ground --> <footer class="weave weave--navy"> <!-- content is a z-index:1 sibling, handled by the class --> </footer> /* the class, for reference */ .weave::before { position: absolute; /* vw, never % - a % inset starves on short bands */ inset: calc(-1 * var(--weave-overscan, 12vw)); background-position: center; background-size: cover; background-repeat: no-repeat; transform: rotate(var(--weave-tilt, -8deg)); /* the house tilt */ } .weave--navy::before { background-image: url("triumph-pattern-field-white.png"); opacity: .09; }
Why a band, and why cover
- A band is a graphic decision: it starts, it ends, and the boundary is what makes it read as fabric instead of wallpaper. A full-page field is the absence of a decision.
- The asset is a finished panel (1600×1853), not a repeat unit. Tiling a panel leaves visible blocks;
coverholds one motif scale across the band. - The −8° tilt is the default and it is wanted. Square reads wrong. The class handles the overscan so the tilt never bares a corner.
- White artwork on dark bands only. The navy-on-light variant exists for legacy pieces and is banned in new work; the weave does not touch a light surface.
- One band per page is usually enough. A second band repeats the first's exact treatment or does not exist.
If two bands carry the weave, they carry the same asset, same method, same scale, same rotation, differing only in opacity if they must. Keep the page to two surfaces. Separate two adjacent same-colour sections with a hairline rule, not with a new background colour. Float dense content, tables especially, on a solid panel so the weave never fights text.
- One band, hard boundaries, motif big inside it.
- Keep the −8° tilt. It is the house look.
coverandno-repeat, every time.- White artwork, dark bands only.
- Hold one opacity: .09 on dark.
- Put tables and long prose on a panel, never on the weave.
- Run it as a page or full-section ground. Wallpaper is banned at any opacity.
- Put it behind body copy, a table, or a chart.
- Repeat-tile it. Small tile equals pasted chunks.
- Shrink
background-sizeto make a fine texture. Size is not a knob. - Touch a light surface with it, even as a whisper watermark.
- Hand-roll the tilt with a percent inset. It starves on short bands and bares the corners.
- Put it on
bodyor any global background.
Legacy note: .brand-field and .brand-zone repeat-tile the weave and invite full-page grounds; both habits are why they are deprecated. They stay only so already-shipped dashboards keep rendering. Do not use them in new work, and when you touch a page that runs them, replace the treatment with one bounded .weave band or remove it entirely.
The rules that separate designed from assembled.
Tokens keep a page on brand. They do not make it good. These are the composition rules, learned the hard way on real pieces, and they apply to a flyer and a dashboard alike.
On a flyer, ad, or customer-facing page: no stadium shot, no crowd, no action photo behind a headline, unless that piece specifically called for one. Default to graphic and typography only: the weave, the logos, colour, and type. If a layout feels empty, that is a composition problem, and a photo is not the fix.
Fill it with weave, scale, or colour blocking instead. Dashboards may use a photo break as a section divider.
The single most common failure is content huddled in the middle with a lake of dead space around it. Composition has to reach into every region. Anchor things to top and bottom, push type to real margins, let a hero word or the weave run full bleed.
Test: if it survives being cropped to its middle third, you did not use the space.
It is BEER GARDEN on one line, not BEER over GARDEN. A column of single stacked words looks broken every time. If a phrase will not fit, scale the type down or widen the block first. Only then break it, and break into balanced multi-word lines at a natural boundary.
text-wrap: balance on headings. Give hero text room to be wide, not tall.
A symmetric stack of centred text on centred blocks reads amateur. Pick an axis and commit to it, then break it deliberately once. Left-aligned type with one full-bleed element carries more authority than everything centred.
Applies to section headers and KPI rows too, not just flyers.
On a printed or social piece: no buttons, no pulsing dots, no live countdowns, no boxed dashboard chrome. Those are interface, and they read as clip art on a graphic. The inverse holds too, a dashboard does not need a hero headline the size of a poster.
Know which artefact you are making before you start.
Before a figure goes on anything a client sees, read it the way a sceptic would. A stat that flatters on first read and embarrasses on second is worse than no stat. Check that the number, the label, and the timeframe actually agree.
Cross-check totals against the source. Never invent a figure.
The opener is loud: the Greenville Blue band, the Fabiola hero, the scoreboard, the weave band closing it. Everything after it is quiet on purpose; the restraint is what pays for the loudness. A page that is all quiet reads bland, and a page that is all loud reads as noise. Spend the loudness budget in one place, at the top.
The masthead at the top of this page is the pattern. Registry: .masthead.
Garden
Tonight
Broken and cramped. One word per line is never the answer.
Phrase intact on one line, scaled to fit its container.
Clear, inclusive, never corporate.
Soccer connects people across cultures, languages, and backgrounds, creating community, opportunity, and a sense of home.
- Lead with clarity. Do not overcomplicate.
- Stay inclusive. Speak to belonging.
- Say "Greenville Triumph" in everyday copy.
- Corporate or detached tone.
- Aggressive or exclusionary language.
- "GVL Triumph", or any em dash.
The drift that makes a page look off.
- Reference tokens by name:
var(--color-accent). - Lift on hover with
translateYand a border tint. - Flat surfaces from the elevation ladder.
- Fabiola weight 400, hero only.
- Green as the one chrome accent.
- Tabular-nums on every figures column.
- The weave as one bounded band,
cover, no repeat. - Default to horizontal. Side by side before stacked.
- Reach into every region of the canvas.
- Multi-word phrases on one line.
- Say "Greenville Triumph" and "Greenville Liberty" in full.
- Hardcode hex, rgba, or oklch.
- Scale on hover, or pulse scroll arrows.
- Gradient page or section backgrounds.
- Fabiola on h2/h3, or any weight above 400.
- Put sky or lime anywhere outside a chart, or pair them. Only the info pill and the title-card live fact are exempt.
- Use yellow as a decorative accent.
- Tile or shrink the weave, or run it as a page ground.
- Put a hero photo behind a headline.
- Stack single words one per line.
- Drop everything into one narrow vertical column.
- Leave half the canvas empty while copy breaks 5 words in.
- Huddle content in the middle of the canvas.
- Write an em dash, or any restricted-access wording.
Before it goes out.
- Both stylesheets linked, tokens before components.
- Nothing is stacked that would fit side by side. No block of copy sits in a narrow column with an empty half beside it.
- No heading breaks one word per line, and no
<br>was used to patch a wrap. - Dark-mode lock present (meta + first style block).
- Fabiola only on the hero, at weight 400.
- Every heading below the hero is Inter.
- No hex, rgba, or oklch literals in CSS (charts excepted).
- Chrome carries green only; sky or lime appears only inside a chart, and never both on one page. The two named exceptions are the
--color-infostatus pill and the title-card live fact. - If the weave appears at all, it is one bounded band, never a ground.
- Triumph Green never as text on a light surface.
- Tabular-nums on every numeric column.
- No yellow except a genuine warning state.
- "Greenville Triumph", never "GVL Triumph".
- No restricted-access framing anywhere on the page.
- Totals cross-checked against the source data.
- If the page has more than two scroll sections: left rail present with scroll-spy, collapsed by default, expands on hover, keyboard focus, or click, mobile drawer under 900px, Escape closes it.
- Canvas and card surfaces are the neutral graphite ladder; the only saturated navy is the one
--color-band-navyband. - No hardcoded chrome colours; nav and glass surfaces use
--surface-frost/--surface-frost-deep.
- Light Upstate Fog or Greenville Blue canvas. No graphite, no dark mode.
- No hero photography, unless it was specifically requested for this piece.
- The weave sits in bounded bands only,
coverandno-repeatinside the band, never tiled, never the sheet's ground. - If two bands carry the weave, they carry the same treatment, differing only in opacity.
- Page holds to two surfaces, one light and one dark.
- No pattern running behind white text without a panel under it.
- Composition reaches all four corners. It would not survive being cropped to the middle third.
- No multi-word phrase broken one word per line.
- Alignment varies. Not everything is centred.
- No buttons, pulsing dots, countdowns, or dashboard chrome on a graphic.
- No rounded corners on Triumph graphics.
- Full-colour crest on light only, white crest on dark.
- No GE Vernova Park logo, and no GE Vernova Park name; the place is Mauldin, South Carolina.
- Fabiola at weight 400, display only, with per-line horizontal nudges if lines stack flush left.
- Day of week verified against the actual match date.
- Full club names. No "Triumph" alone, no "GVL".
- Every asset self-hosted. No CDN script tags.
- Rendered and eyeballed in Chrome headless before it ships. PDFs deliver light, never on a blackout background.
The names, copy-paste ready.
The most-used tokens as raw values. The full set lives in tokens.css.
/* canvas + elevation - neutral navy-graphite ladder */ --color-bg: #0b1017; --color-surface-1: #121821; --color-surface-2: #1a212c; --color-surface-3: #232c39; --color-surface-4: #2e3846; /* text */ --color-text: #f2fafa; --color-text-soft: #d2e6e5; /* accents: green in chrome; sky/lime are chart-series only */ --color-accent: #61a631; --color-blue: #69b3e7; --color-pop: #97d700; /* type + layout */ --font-display: Fabiola Capitals; --font-sans: Inter; --font-mono: JetBrains Mono; --text-label: clamp(0.905rem, 0.86rem + 0.22vw, 1.00rem); --track-label: 0.08em; --track-kicker: 0.12em; --track-subhead: 0.05em; --content-wide: 1440px; --space-section: clamp(2.25rem, 1.8rem + 1.9vw, 3.75rem); /* left nav rail */ --rail-w: 60px; --rail-w-open: 248px; --rail-hover-delay: 0.12s; /* Chart.js: canvas cannot read vars, use the helper. Read from document.body, not documentElement - the CVD remap lives on body[data-cvd], and body inherits every :root token anyway */ const tok = n => getComputedStyle(document.body).getPropertyValue(n).trim();