# Triumph Design System v2 — promotional graphics A brand-correct system for **flyers, digital ads, and graphic elements** for **Greenville Triumph SC** and **Greenville Liberty**. This is NOT the dashboard system at design.greenvilletriumph.club — that one is dark-mode web UI. This one is the brand-guide look: light or navy canvas, the woven pattern, Fabiola + Inter. Link order in any page: `tokens.css` → `pattern.css` → `logos.css`. --- ## RULE 0 — NO HERO PHOTOS. EVER. (unless explicitly asked) **Do not put a hero image / background photograph** (stadium pics, crowd shots, action photos, ANY photography) on a flyer or graphic. This was the #1 problem with the old system. Default is **graphic + typography + brand elements only**: the weave pattern, logos, color, type. If a layout feels empty, fill it with the **weave texture**, a large **interlocking-T shape**, **color blocking**, or **bigger type** — never a photo. Add photography only when it is specifically requested for that piece. ## RULE 1 — This is a flyer, not a web page No buttons. No flashing/pulsing dots. No live countdowns. No boxed "dashboard" scoreboards or app chrome. Graphic design only. Don't center everything — vary alignment; a symmetric text-on-blocks stack reads amateur. Use the full canvas. ## RULE 2 — The weave pattern (spend the most care here) The interlocking-T **weave** — NOT the sTc monogram. The ONLY seamless tiles: - `images/brand/triumph-pattern-fog.png` — 516×688, **white** on transparent → **dark/navy** surfaces - `images/brand/triumph-pattern-navy.png` — 1600×1600 square, **navy** on transparent → **light** surfaces Three things make it correct (all in `pattern.css`, just add the class): 1. A **genuinely seamless tile** (the two above; nothing else tiles cleanly). 2. `background-size` that keeps the tile's aspect: fog = **3:4** (516×688, 258×344, 165×220, 129×172); navy = **square**. A single value or wrong ratio → distortion + seams. 3. Pattern on an **opt-in `::before` layer** per panel, content in a `z-index:1` sibling. Use the classes — don't reinvent: `.brand-field` (navy, subtle, tilted), `.brand-field--flat`, `.accent-band` (header/footer strip), `.brand-field-light`, `.brand-watermark`. **NEVER** `transform:rotate()` a `background:repeat` — that is the historical failure (gaps / blobs / seams). Opacity 0.05–0.08 behind text, up to ~0.16 as decorative texture. ## RULE 3 — Logos - Full-color Triumph crest **only on light**. On dark/navy use the **white** crest (`triumph-main-on-dark.png`). Never the full-color crest on dark. - Never recolor, outline, rotate, stretch, flip, or crop a logo; always the full lockup. - **GE Vernova Park** raw PNGs carry 38–61% transparent padding → they render ~150% too small if sized to the file box. 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 (see logos.css `.gevp-crop`). GEVP should read **prominently**, never a tiny afterthought. ## RULE 4 — Type - **Fabiola Capitals** = display / hero ONLY, weight 400. The metric-override `@font-face` is baked into `tokens.css` — DON'T hand-nudge Fabiola with margins/line-height/translateY. Never route working sub-heads (h2/h3) through it (it synthetic-bolds to mush). - **Inter** = everything else (headings, body, labels), weights 400–900. - `font-synthesis:none` stays. Size via `--text-*` tokens. ## RULE 5 — Color (official Brandpad palette — 7, never extend) Greenville Blue `#002855` · Triumph Green `#61a631` · Upstate Fog `#f2fafa` · Morning Mist `#d2e6e5` · Deep Night `#020022` · Sky `#69b3e7` · Light Green/lime `#97d700`. Promo hero accent = the green **gradient** `#97D700 → #72B431` (light→dark, **never flip**). Accents are for highlights only — never large backgrounds, never both accents in one layout. Liberty = Greenville Blue + Liberty Yellow `#ffe900` + sky `#70b2e4`. ## RULE 6 — Names & copy Always full club names: **Greenville Triumph SC**, **Greenville Liberty** — never "Triumph" alone, never "GVL …". No restricted-access framing anywhere on the piece. Match real capitalization (TD SYNNEX, Bank of America). No `USD_` placeholders, no `\uXXXX` escapes. Verify the **day-of-week** on any match date. Warm, direct, local-first voice. ## RULE 7 — Verify before shipping Render every surface with **Edge headless** (Chrome is banned on this machine) and eyeball the weave (no seams / bare patches), logo sizes, and Fabiola. Self-host all assets — no CDN `