---
title: Moodboard & references
intro: 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.
updated: 1 Nov 2026
status: Terverifikasi
---

This moodboard shows the [Visual principles](/visual-direction/prinsip-visual/) as images. The groups below are used again in [Photo & motion](/visual-direction/foto-dan-motion/) and [UI direction](/visual-direction/arah-ui/).

## Internal moodboard (XSERIES's own)

All images below are screenshots from Instagram [@xseries___](https://www.instagram.com/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.

```viz-moodboard
## Night arena (XS-3)
sub: Deep black, red and teal light. For hero and tickets
- /assets/evidence/xs3-faq-cover.jpg | Arena render, red and teal light. FAQ highlight | big
- /assets/evidence/xs3-ticket-keyvisual.jpg | XS-3 ticket key visual. TICKET highlight | wide
- /assets/evidence/xs3-seatplan-harga.jpg | Indonesia Arena seat plan with color tiers. TICKET highlight | wide
## Cards and throne (XS-3)
sub: Playing cards, rank, throne. For the player card
- /assets/evidence/xs3-players-1.jpg | Player cards: Mister Aloy, Safee Sali, Kitings, Hamid | big
- /assets/evidence/xs3-players-2.jpg | XS-3 player cards, continued | wide
- /assets/evidence/xs3-players-3.jpg | XS-3 player cards, continued | wide
## FAQ and information (XS-3)
sub: White text on black. For the rules and FAQ pages
- /assets/evidence/xs3-faq-1.jpg | FAQ slide: white text on black with a red accent | wide
- /assets/evidence/xs3-faq-2.jpg | FAQ slide, continued | wide
- /assets/evidence/xs3-faq-3.jpg | FAQ slide, continued | wide
## Duel of legends and documentary (XS-2)
sub: Face-off and warm grading. For stories and archive
- /assets/evidence/falcao-ricardinho-1.jpg | Falcão vs Ricardinho, Battle of the Century | big
- /assets/evidence/xs2-all-goat.jpg | Documentary warm grading | wide
- /assets/evidence/xs2-photoshoot.jpg | XS-2 photoshoot behind the scenes | wide
- /assets/evidence/xs2-roster-bandara.jpg | Roster arrival series at the airport | wide
- /assets/evidence/xs2-presscon.jpg | XS-2 press conference | wide
- /assets/evidence/xs2-matchday-1.jpg | XS-2 match day | wide
## The court as a screen (XS-1)
sub: LED floor as a medium. For the card animation canvas
- /assets/evidence/xs1-1.jpg | LED court "GAME WITHOUT LIMITS" | big
- /assets/evidence/xs1-3.jpg | XS-1 atmosphere | wide
- /assets/evidence/xs1-4.jpg | Lynx Hunters, XS-1 champions | wide
## Character (JAY-D)
sub: Content series per player. For the player page
- /assets/evidence/jayd-1.jpg | JAY-D (Jaden Bahtera) content series | wide
- /assets/evidence/jayd-2.jpg | JAY-D content series, continued | wide
```

## External references

### Sportainment leagues

| Reference | What to look at | Link |
|---|---|---|
| Baller League UK | Site structure, match centre, stats, ticket CTA | [ballerleague.uk](https://ballerleague.uk/en/), [Match Centre](https://ballerleague.uk/en/game/214), [Statistics](https://ballerleague.uk/en/statistics), [Teams](https://ballerleague.uk/en/teams) |
| Baller League US | Preloader, marquee, rulebook | [ballerleague.us/c/rulebook](https://ballerleague.us/c/rulebook) |
| Baller League Gamechangers | Dedicated rules page | [ballerleague.uk/en/gamechangers](https://ballerleague.uk/en/gamechangers) |
| Kings League rules | Rules illustrations per match phase, card graphics | [pages.kingsleague.pro/rules](https://pages.kingsleague.pro/rules) |
| Kings League rulebook | Official document format | [book-of-rules.pdf](https://cms-es.kingsleague.pro/wp-content/uploads/2026/03/book-of-rules.pdf) |
| Kings League Fantasy | Collectible card UI | [App Store](https://apps.apple.com/us/app/id6467652295) |
| Kings League brand | A changing logo, room for team identity | [Summa case study](https://en.summa.es/work/kings-league/) |
| Icon League | 5v5 brand | [theiconleague.com](https://theiconleague.com) |

### Fonts

This is a shortlist. The full set of eight candidates, including Oswald, Mona Sans, and Geist, is in [Typography](/visual-direction/tipografi/#font-candidates).

| Font | Link |
|---|---|
| Barlow Condensed | [Google Fonts](https://fonts.google.com/specimen/Barlow+Condensed) |
| Anton | [Google Fonts](https://fonts.google.com/specimen/Anton) |
| Inter | [Google Fonts](https://fonts.google.com/specimen/Inter) |
| Druk | [Commercial Type](https://commercialtype.com/catalog/druk) |
| Tusker Grotesk | [The Designers Foundry](https://www.thedesignersfoundry.com/tusker-grotesk) |

### Accessibility

- [WCAG 2.2](https://www.w3.org/TR/WCAG22/)
- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)

> [!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):
>
> ```text
> - /assets/evidence/name.jpg | caption and source | wide
> ```