Select section:
/
Open questions46
On this page

Visual principles

Five principles used to decide every XSERIES screen, graphic, and animation. Each one is derived from the research and the strategy.

Updated 1 Nov 2026 · Hypothesis

These principles translate the positioning ("world legends, pro players, and creators on one court, with rules that can flip the score at any time") into visual rules. If two design options are equally good, pick the one that best fits these principles.

The five principles in one line each. Details and do/avoid examples are below.

1
Night arena
  • Always feels like being inside the arena when the lights are on
2
Cards are the language
  • If it can be a card, make it a card
3
Stars as big as the screen
  • The player's face and name are the largest
4
Readable chaos
  • It can explode, but stays clear within 2 seconds
5
One brand, many editions
  • The brand stays, editions are seasons

1. Night arena

XSERIES always feels like being inside the arena when the lights are on.

  • Dark background, directed light (red from above, teal from below), and a lit subject.
  • Basis: all XS-3 material is built on deep black with two light sources (Identity audit).
  • In practice: dark mode is the main mode, not an extra option. Light mode is used only for document pages (print version of the rules, terms & conditions).

Compare the two heroes below: the left one feels like an arena, the right one like a corporate page.

✓Do
  • BackgroundDeep black (xs-black), dark mode as the default
  • LightRed from above, teal from below or the side
  • SubjectPlayers and score "lit up" in the dark
  • Light modeOnly for documents: print version of the rules, terms & conditions
✕Avoid
  • BackgroundWhite or flat gray on the main pages
  • LightEven across the whole screen, with no direction
  • SubjectA small photo amid lots of text
  • Light modeAs the main mode, with dark mode as an option
XS-3 arena
XS-3 key visual: arena, red and teal light, white text. Source: TICKET IG highlight @xseries___.

2. Cards are the language

If something can be a card, make it a card.

  • Players, game cards, tickets, and achievements use one family of card components with a 5:7 ratio. Sponsors do not get their own card, they appear as a "presented by" slot inside those cards. Data components such as the match tile, bracket, and countdown do not use the 5:7 card format.
  • Basis: the XSERIES format is built on X Cards and President Cards, and the XS-3 player cards already use a playing card layout. The main strategic direction is "make the card the product" (Strategy summary).
  • In practice: cards can be flipped, collected, shared as images to stories, and have a "presented by" slot.

Look at the left column: players, game cards, tickets, and achievements use one family of components, and sponsors sit inside it.

✓Do
  • Players5:7 player card with rank, photo, name, stats
  • Game cardsGame card that can be flipped to see its effect
  • Tickets and achievementsCards that can be collected and shared to stories
  • SponsorsA "presented by" slot inside the card
✕Avoid
  • PlayersA list of names in a table
  • Game cardsParagraphs of rules with no image
  • Tickets and achievementsPlain banners and lists in different styles
  • SponsorsA separate logo in the footer

3. Stars as big as the screen

The player's face and name are the largest elements.

  • The player photo and the name in the display font dominate the composition. The UI steps back.
  • Basis: the highest views on the XS-2 YouTube came from matches involving Falcão and Ricardinho (Social media numbers). One-by-one player reveals are one of the IG content patterns that work best (Instagram content audit).
  • In practice: player and team pages start with a full-bleed portrait, not a table.

Notice what is the largest thing on screen.

✓Do
  • Player pageOpens with a full-bleed portrait and the name in the display font
  • HierarchyFace and name first, the UI steps back
  • Player listLarge cards that can be swiped
✕Avoid
  • Player pageOpens with a stats table
  • HierarchyNavigation, filters, and buttons stand out more than the player
  • Player listSmall thumbnails in a dense grid

4. Readable chaos

Chaos moments may explode, but the information must stay clear within 2 seconds.

  • Active card animations may be dramatic (flash, glitch, zoom). But the score, the time, and which card is active must always be readable.
  • Basis: new viewers do not understand the card rules (Format & rules). Competitors have not explained them well digitally either (Benchmark).
  • In practice: every animation has a static, readable "end state". Text contrast follows WCAG AA (Color palette).

Animation may explode, as long as the end state is readable.

✓Do
  • When a card is activeA short flash, glitch, or zoom, then back to a static state
  • Always visibleScore, time, and the name of the active card
  • MarkersColor plus a text label
  • ContrastWCAG AA for all text
✕Avoid
  • When a card is activeA long animation that covers the score
  • Always visibleScore and time hidden by an overlay or effect
  • MarkersColor only, with no text
  • ContrastSmall text over light or a busy photo

5. One brand, many editions

XSERIES is a brand. Editions are seasons.

  • Black, red, mint, the wordmark, and the card system stay fixed. Each edition may bring its own theme, color accent, and key visual.
  • Basis: the accent color changes every edition with no core color (Identity audit), yet the digital product has to live between editions (Competitor landscape, takeaway 3).
  • In practice: components accept --edition-accent and --team-color as variables. The XS-1 and XS-2 archives keep using their edition colors inside the same brand frame.

The left is what stays fixed, the right is what may change every edition.

✓Fixed (brand)
  • Core colorsBlack, red, mint
  • WordmarkX SERIES with the edition number
  • Card system5:7 player card and game card
  • ComponentsSame across all editions, accept variables
Changes (edition)
  • Color accentVia --edition-accent, e.g. XS-1 blue, XS-2 blue-purple
  • Theme"Game Without Limits", "Battle of the Century", "The Unorthodox"
  • Key visualBelongs to each edition
  • Team colorVia --team-color

Quick check

Paste these five notes next to the screen during design review. If the answer is "no", do what is written below it.

Check before sending5
Does this feel like being in the arena?

If not: Darken the background, add directed light

Basis: Principle 1 · Night arena

Could this be a card?

If not: Consider a card component

Basis: Principle 2 · Cards are the language

Is the player the center of attention?

If not: Enlarge the photo and name, shrink the UI

Basis: Principle 3 · Stars as big as the screen

Can it be understood in 2 seconds?

If not: Simplify, give it a static end state

Basis: Principle 4 · Readable chaos

Will it still feel like XSERIES in the next edition?

If not: Move edition elements into variables

Basis: Principle 5 · One brand, many editions

Research basis

How this page connects

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

Builds on 10

Used by 4