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.
/
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.
The rules.
Every one of them is a correction. They are worth reading before the first pass, not after it comes back.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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-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.
Crest · light only
Crest · dark only
Wordmark · light
Simplified · small uses
Liberty crest · lightThe 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.
Square-marker eyebrow. The marker rides currentColor, and one .featured per piece.
Tabular mono figure over a quiet label, with .cur and .u spans for currency and units.
The best matchday atmosphere in League One.Season member since 2019
Hero-gradient bar, heavy Inter, upright mono cite.
Dot-leader price rows in real print units; the total row closes the ladder.
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.
For this system's on-screen reference pages only. Rule 1 stands: a printed piece never carries a button.
Five reference cards.
The same cards the Claude Design project shows, served here so a build can read them without logging in.
Colours
The seven, their PMS numbers, and what each one is for 02Type
Fabiola and Inter, with the side bearing fix shown before and after 03Pattern usage
The three weave bands, a scale demo, and the accent rule, rendered; the banned light-surface classes named, not shown 04Logos
The crest on light and on dark, and Liberty 05Components
Kicker, bignum, quote, ladder, detail columns, and the screen-only buttonsTwo 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.
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
.hero-word and the headline stays on one line.Fonts load through @font-face inside tokens.css, so nothing needs a Google Fonts link.