Computer Jocks brand | Brand Book

Team colors

The club's official colors, and what each one is for. The chart hue is for graphs only — never brand identity.

What each color resolves to per theme. Use these for anything in the foreground, not the raw hexes above.

Accent token Light #2e8b57 Dark #35b035 What teamAccentVar(franchiseId) resolves to. EVERY foreground use of a team colour reads this — text, a rank numeral, a chart line, a legend swatch — because it is floored to 3:1 against each theme’s card. Several franchises’ raw hexes land near 1:1 there.
Live bar fill Light #181818 Dark #35b035 The win-probability bar on Live Scoring. Cleared for ΔE against the card — perceptual distance, the right metric for a block of colour. Resolved per MATCHUP, so an opponent in the same family shifts it; this is the value against a neutral.
Live bar ink Light #181818 Dark #35b035 The SCORE beside that bar. Cleared for WCAG AA body contrast instead, because ΔE is not a reading metric — a colour can pass as a fill and be unreadable as a number, which is how coloured bars once sat beside grey scores.

5 cuts. Use the same-origin path on this site and the absolute URL in MFL.

Icon 100×100 PNG · the crest every themed surface draws Download
Icon — dark cut 100×100 PNG · hand-authored for dark grounds Download
GroupMe crest 400×400 PNG · the 400px cut heroes watermark with Download
GroupMe crest — dark cut 400×400 PNG · hand-authored for deep-ink composites Download
Banner wide PNG · the wide lockup, for MFL and franchise headers Download

Drawn for the Halloween theme. While it is open, every crest of this franchise on the site shows this mark instead.

Drawn for the Christmas theme. While it is open, every crest of this franchise on the site shows this mark instead.

Use the light cut on a white cell, and the dark cut on a dark card and on the club's own color.

Light surfaces Icon Standings rows, roster headers, the nav crest — anything on a white card.
Dark surfaces Icon — dark cut The same surfaces in dark mode. This franchise ships a hand-authored dark cut, so TeamIconDarkStyles swaps to it.
Team color Icon — dark cut The team-color band — a hero, a reveal card, a player modal. Dark in both themes, so it follows the dark assignment.

The real components, on their real grounds.

Names this franchise has worn before, with the art each wore.

What each file is for. The Brand Book's file search finds any file in the league by name.

Icon — 100×100: The crest for themed surfaces: standings rows, the nav team chip, matchup cards, roster headers. Render the LIGHT src and let the theme swap resolve it.
Icon dark — 100×100: Used automatically on a dark theme. Never reference it directly on a themed surface.
GroupMe crest — 400×400: Use for any crest drawn larger than ~100px: heroes, modal bands, watermarks.
Banner: The wide lockup, for MFL’s franchise header and throwback era art. Never use it where a square mark is expected.
A color as FOREGROUND: Text, a rank numeral, a chart line, a legend swatch: read the token --team-accent-0010 via teamAccentVar(franchiseId), never the raw hex.
A color as a FILL: A full-bleed band with white copy on it takes the brand pair directly; the resolver floors it for white ink.
Broadcast gradient: The one RAW CSS field in the league config, painted verbatim by the draft reveal, the on-the-clock board and both homepage heroes. A stray ; does not look wrong and renders the card with no background at all, on a 65" screen, in front of the league — so it is validated rather than trusted.