Skip to content
Greenville TriumphDesign Systems Print
Greenville Triumph SC

PRINT

The brand guide look, as a system: flyers, digital ads, posters, one sheeters, and menus, anything that is one page and graphic led. Two grounds, white paper and navy, with Upstate Fog as the light canvas for a digital ad rather than for a printed sheet. One weave band, Fabiola Capitals once, and Inter for everything else. Graphic design, not app chrome. A multi-page proposal, report, or guide is 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.

The rules.

Every one of them is a correction. They are worth reading before the first pass, not after it comes back.

Rule 0

No hero photos. Ever, unless asked.

No background photograph on a flyer or a graphic: no stadium shots, no crowd shots, no action photos. This was the single biggest problem with the old system.

The default is graphic, typography, and brand elements only. If a layout feels empty, fill it with the weave, a large interlocking T shape, colour blocking, or bigger type. Add photography only when a piece specifically calls for it.

Rule 1

This is a flyer, not a web page.

No buttons, no pulsing dots, no live countdowns, no boxed dashboard scoreboards, no app chrome.

Use the whole page and vary the alignment. A symmetric stack of text on blocks, everything centered, reads amateur at a glance. The common failure is content huddled in the middle with a lake of dead space around it: anchor elements to the top and the bottom, push type to real margins, and let a hero word or a weave band run full bleed. Before shipping, look at the four corners: if the piece would survive being cropped to its middle third, the space is not being used.

Backgrounds stay flat. No full-page fog, mist, or gradient wash for atmosphere (rejected again 2026-08-20). The ground is one flat brand colour, and the only sanctioned gradient is the small green hero accent from Rule 5, which never becomes a background.

Rule 1b

Never stack single words.

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 it into balanced multi-word lines.

This is enforced mechanically. Every hero headline is a .hero-word, which sets white-space: nowrap and max-width: 100%, and the page loads hero-fit.js before </body>. The script treats the declared font size as a ceiling and shrinks the line until the phrase fits, so pick a generous size and let it work. Optional floor: data-fit-min="140".

A hero that should fill its measure rather than sit under it opts in with data-fit-grow, which steps the declared size UP while the line still fits, capped at twice that size when the attribute is bare or at the pixel value it carries (data-fit-grow="220"), and then runs the normal shrink guard; shrink-only stays the default, so no headline already built moves.

Rule 2

The weave. Spend the most care here.

One seamless vector tile, 419 by 279, exactly one repeat period, applied as an alpha mask over a flat fill so the same art recolours to any surface through --brand-pattern-ink. Upright, no tilt.

It is a band element, never a ground. One bounded strip or emphasis band per sheet: a masthead, a footer, one navy section with hard edges. A full-page weave ground is banned at any opacity; the sheet's ground is flat navy or flat fog, and the band is the decision that makes the weave read as fabric instead of wallpaper.

Use the classes in pattern.css rather than reinventing the layer. Keep --brand-pattern-size at roughly 3:2 and scale both numbers together. Never paint it on the global body, and never rotate a repeating layer: that was the old engine's failure and it left bare corners on every short band.

Rule 2b

The weave never touches a light surface.

Not at 0.07, not at the 0.04 watermark, not "just behind the footer". .brand-field-light and .brand-watermark are still defined so older pieces keep rendering, and they are not for new work. The class existing is not an argument.

Rule 3

Logos.

The full colour crest goes on light only. On dark or navy, use the white crest. Never recolor, outline, rotate, stretch, flip, or crop a logo, and always use the full lockup with its clear space.

No GE Vernova Park logo on any piece, ever. The GE Vernova Park name does not go on Triumph pieces either; the place is “Mauldin, South Carolina”. Official internal documents such as the Match Day Guide may use the name as plain text, never the logo.

Rule 4

Type.

Fabiola Capitals is display and hero only, at weight 400, once per piece. The metric override is baked into tokens.css, so never hand-nudge Fabiola with margins, line height, or a transform: that double-corrects. Never route a working subhead through it, because it synthetic-bolds to mush.

Size Fabiola by cap height, never rem parity. Its caps fill about 60 percent of the em box, so at the same font size it renders 35 to 40 percent smaller than Inter. Pick the visual size in Inter terms, then multiply by 1.5 to 1.6. Fabiola never goes in chrome either: nav strips, buttons, badges, footer tags, anything flex centred. Its caps sit low in the em box and mis-centre vertically, and no font size fixes that. Inter 800 caps do chrome.

Inter carries everything else, weights 400 to 900. font-synthesis: none stays, and no font family ever declares a fallback stack. Sizes come from the --text-* tokens; a hand-fit display size on a fixed sheet uses --text-hero-print or --text-title-print, because the fluid clamps are for on-screen pages. Stacked or flush-left Fabiola goes ragged on the left edge, so offset each line by its first glyph's side bearing; the table is in tokens.css and the worked example is in the type preview.

Rule 5

Colour. Seven, never an eighth.

The official Brandpad palette, below. The promo hero accent is the green gradient, lime to dark green, and it never flips direction. Accents highlight; they are never large backgrounds.

Lime and Green are both accents here. Lime is the accent on navy (eyebrows, hovers, link underlines, focus, the avatar chip, the app-bar rule); Green is the accent on fog and on white paper (rules, buttons, hovers). The dashboards accent law does not apply to this system.

Greenville Liberty is Greenville Blue plus Liberty Yellow plus sky. Triumph Green is never body text on a light surface, because it fails contrast at any size.

Rule 6

Names and copy.

Full club names: Greenville Triumph SC and Greenville Liberty. Never "Triumph" alone in formal copy, never "GVL" anything. Match real capitalisation on partner names, TD SYNNEX and Bank of America included.

Verify the day of the week on any match date. Oxford comma, always. No em-dashes: commas, periods, semicolons, and parentheses do the work. No restricted-access framing anywhere on a client-facing piece, in the copy or as a footer stamp. Warm, direct, local first.

No status chrome on any piece: no stage label in a corner, no "Not for distribution" stamp, and never a "Prepared for" or "Prepared by" attribution line. The piece describes what it is, never what stage it is at.

Rule 7

Verify before shipping.

Render every surface headless and look at it: the weave for seams or bare patches, the logo sizes, and the Fabiola line. Self-host every asset, because office TLS inspection rewrites CDN bytes and blanks the file.

Deliver PDFs on light paper, never a blackout background, and when a piece is genuinely dark, make it full bleed with @page { margin: 0 } rather than letting a white border frame it.

Seven colours.

Surfaces, ink, and accents all come out of these. There is no eighth, and a tint is a token, not a new colour.

Greenville Blue#002855 · PMS 295C
Triumph Green#61a631 · PMS 369C
Upstate Fog#f2fafa · PMS 7541C
Morning Mist#d2e6e5 · PMS 5455C
Deep Night#020022 · Black 6C
Sky#69b3e7 · PMS 292C
Light Green#97d700 · PMS 375C

The PMS numbers are carried from the brand kit and have not been verified against a printed proof.

The weave.

One tile, embedded in tokens.css as a data URI, masked over a flat fill. A mask loaded from a file gets silently dropped by CORS in some contexts and the pattern just vanishes, so the bytes travel with the token sheet instead.

.brand-field

The navy band at 0.08, shown here as what it is: a bounded strip with hard edges. Present enough to read as woven fabric, and never the ground of a whole sheet.

.accent-band · 0.12
.brand-field-night · 0.85

.accent-rule · no weave

.accent-band is the masthead or footer strip: denser tile, a little louder. .brand-field-night is a short Deep Night band where the weave is the graphic rather than a texture, which is why its opacity runs high. .accent-rule is the green gradient underline and carries no weave at all. .brand-zone, the page-height fading field, was deleted from pattern.css on 2026-08-31: a full-page weave ground is banned at any opacity.

Lockups.

Full colour on light, white on dark. That is the whole rule, and it is the one most often broken by dropping the colour crest onto navy.

Triumph crest, full colourCrest · light only
Triumph crest, whiteCrest · dark only
Triumph wordmark, full colourWordmark · light
Triumph simplified mark, whiteSimplified · small uses
Greenville Liberty crestLiberty crest · light

The Liberty files here are pre-cropped to their real art, so a plain height sizes the visible mark.

Six components.

The shared layer in components.css, built from tokens and remapped automatically on a .field-navy or .on-navy ground. Buttons serve the system's on-screen pages only; a printed piece never carries one.

.kicker
Season 2027 On sale now

Square-marker eyebrow. The marker rides currentColor, and one .featured per piece.

.bignum
$247
Season, from
19matches
In Mauldin, South Carolina

Tabular mono figure over a quiet label, with .cur and .u spans for currency and units.

.quote-display
The best matchday atmosphere in League One.Season member since 2019

Hero-gradient bar, heavy Inter, upright mono cite.

.ladder
Reserved seat$25
Parking$10
Matchday$35

Dot-leader price rows in real print units; the total row closes the ladder.

.detail-cols
DateSat 12 Jul
Kickoff7:00 PM
VenueMauldin, South Carolina

Match facts under one full-width hairline, columns even by construction. No cell borders and no panel, because Rule 1 bans the boxed grid a fact block always wants to become. .detail-cols.stack turns the same idea vertical, one hairline per row.

.btn · screen only

For this system's on-screen reference pages only. Rule 1 stands: a printed piece never carries a button.

Previews

Five reference cards.

The same cards the Claude Design project shows, served here so a build can read them without logging in.

Two worked pieces live in templates/, one per canvas. matchday-flyer is the reference build for a 4:5 social graphic. one-sheet-letter is the reference build for a printed handout on Letter, white paper, for anything exported to PDF.

Install

Four stylesheets, in this order.

Copy the folder into the piece and self-host it. That is Rule 7, and it is not optional for anything that renders behind office TLS inspection or gets exported to PDF.

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="pattern.css">
<link rel="stylesheet" href="logos.css">
<link rel="stylesheet" href="components.css">

What ships in the folder

tokens.cssPalette, the Fabiola and Inter faces with their metric overrides, the type and spacing scale, the motion and focus tokens, and the weave tile as a data URI.
pattern.cssThe weave classes. Rewritten to the mask engine the tokens describe.
logos.cssLockup sizing. Its GE Vernova Park rules are retired.
components.cssThe six shared components: kicker, bignum, display quote, price ladder, detail columns, and the screen-only button family.
hero-fit.jsThe Rule 1b hero fitter. Include it on any page with a .hero-word and the headline stays on one line.
agents.mdThe build contract: the rules, plus motion, states, components, and the drift and sync policy.
templates/Two finished pieces to copy and edit surgically: a 4:5 social flyer, and a Letter one-sheet on white paper for print and PDF.

Fonts load through @font-face inside tokens.css, so nothing needs a Google Fonts link.