On this page

Moodboard & references

A collection of XSERIES's own visual evidence and external reference links (sportainment leagues, brand systems, fonts) used as the basis for the visual direction.


This moodboard shows the Visual principles as images. The groups below are used again in Photo & motion and UI direction.

Internal moodboard (XSERIES's own)

All images below are screenshots from Instagram @xseries___. Click an image to enlarge it. Look group by group: each group is one visual idea that can be brought into the digital product.

Night arena (XS-3)Deep black, red and teal light. For hero and tickets
Cards and throne (XS-3)Playing cards, rank, throne. For the player card
FAQ and information (XS-3)White text on black. For the rules and FAQ pages
Duel of legends and documentary (XS-2)Face-off and warm grading. For stories and archive
The court as a screen (XS-1)LED floor as a medium. For the card animation canvas
Character (JAY-D)Content series per player. For the player page

External references

Sportainment leagues

ReferenceWhat to look atLink
Baller League UKSite structure, match centre, stats, ticket CTAballerleague.uk, Match Centre, Statistics, Teams
Baller League USPreloader, marquee, rulebookballerleague.us/c/rulebook
Baller League GamechangersDedicated rules pageballerleague.uk/en/gamechangers
Kings League rulesRules illustrations per match phase, card graphicspages.kingsleague.pro/rules
Kings League rulebookOfficial document formatbook-of-rules.pdf
Kings League FantasyCollectible card UIApp Store
Kings League brandA changing logo, room for team identitySumma case study
Icon League5v5 brandtheiconleague.com

Fonts

This is a shortlist. The full set of eight candidates, including Oswald, Mona Sans, and Geist, is in Typography.

FontLink
Barlow CondensedGoogle Fonts
AntonGoogle Fonts
InterGoogle Fonts
DrukCommercial Type
Tusker GroteskThe Designers Foundry

Accessibility

Tip

To add a reference, save the image in site/assets/evidence/, then add one line to the matching group in the moodboard block above. The size can be wide, tall, big, or empty. Example line (replace name.jpg with the real file name):

- /assets/evidence/name.jpg | caption and source | wide

How this page connects

Pages this one builds on, and other pages that use it.