Design System v2
Design System v2
The brand guide look, as a system: flyers, digital ads, one sheeters, decks, menus, and anything exported to PDF or handed to a client, a sponsor, or a guest. Light Upstate Fog paper or a navy panel, the interlocking T weave, Fabiola Capitals once, and Inter for everything else. Graphic design, not app chrome.
Every one of them is a correction. They are worth reading before the first draft, not after it comes back.
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.
No buttons, no pulsing dots, no live countdowns, no boxed dashboard scoreboards, no app chrome.
Use the whole canvas and vary the alignment. A symmetric stack of text on blocks, everything centered, reads amateur at a glance.
One seamless vector tile, 419 by 279, exactly one repeat period, applied as an alpha mask over a flat fill so the same art recolors to any surface through --brand-pattern-ink. Upright, no tilt.
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.
Not at 0.07, not as a whisper 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.
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.
GE Vernova Park files carry 38 to 61 percent transparent padding, so sizing them by the file box renders the visible mark about 150 percent too small. The assets here are pre-cropped to their real art. If you drop in a raw GEVP file, re-measure with PIL.getbbox() and crop, and let GEVP read prominently rather than as an afterthought.
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.
Inter carries everything else, weights 400 to 900. font-synthesis: none stays. Sizes come from the --text-* tokens. 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.
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, and never both in one layout.
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.
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. No em-dashes. No restricted-access framing anywhere on a client-facing piece, in the copy or as a footer stamp. Warm, direct, local first.
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.
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.
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 default navy ground at 0.08. Quiet enough to sit behind running copy, present enough to read as woven fabric rather than noise.
Also in the sheet: .accent-band at 0.12 with a denser tile for a masthead or footer strip, .brand-field-night on Deep Night where the weave is the graphic and the opacity runs high, and .brand-zone for a page-height field that fades out at the bottom. Set --brand-pattern-y per band to run one uninterrupted field across stacked sections.
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 usesLiberty and GE Vernova Park lockups ship in the same folder, pre-cropped to their real art.
The same cards the Claude Design project shows, served here so a build can read them without logging in.
A full worked piece lives in templates/matchday-flyer, which is the reference build for a 4:5 social flyer.
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">
Fonts load through @font-face inside tokens.css, so nothing needs a Google Fonts link.