Northwest
Computer Jocks
Team colours
The club's official colours, and what each one is for. The chart hue is for graphs only — never brand identity.
- Primary
- Secondary
- Tertiary
- Quaternary
- Primary — dark theme
- Secondary — dark theme
- Chart hue
What the site actually paints
What each colour resolves to per theme. Use these for anything in the foreground, not the raw hexes above.
- Accent token Light
#2e8b57Dark#35b035What 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
#181818Dark#35b035The 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
#181818Dark#35b035The 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.
Marks on file
5 cuts. Use the same-origin path on this site and the absolute URL in MFL.
What each ground draws
Use the light cut on a white cell, and the dark cut on a dark card and on the club's own colour.
- 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 colour Icon — dark cut The team-colour band — a hero, a reveal card, a player modal. Dark in both themes, so it follows the dark assignment.
In the app
The real components, on their real grounds.
- Standings row the crest is the team column 1 10-4 1 10-4
- Team colour the third ground CPU JOCKS
-
Composite hero the crest as a watermark, ~300px, on the franchise's own gradient
Brand Book
Computer Jocks
The franchise's crest as a homepage hero draws it: a watermark behind the copy, on the gradient its config paints verbatim.
Every cut on file
Former identities
Names this franchise has worn before, with the art each wore.
-
Witch City Warlocks 2007–2010 -
Midwestside Connection 2011–2015
Using these marks
What each file is for. Every path here is also in the searchable file list.
- 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 colour 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 colour 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.
Message