--- title: Visual principles intro: 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 status: Hipotesis --- These principles translate the [positioning](/strategy/positioning-dan-framing/) ("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. ```viz-flow ## Night arena kicker: 1 tone: visual - Always feels like being inside the arena when the lights are on ## Cards are the language kicker: 2 tone: visual - If it can be a card, make it a card ## Stars as big as the screen kicker: 3 tone: visual - The player's face and name are the largest ## Readable chaos kicker: 4 tone: visual - It can explode, but stays clear within 2 seconds ## One brand, many editions kicker: 5 tone: visual - 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](/visual-direction/audit-identitas/)). - 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. ```viz-compare ## Do tone: do - Background | Deep black (`xs-black`), dark mode as the default - Light | Red from above, teal from below or the side - Subject | Players and score "lit up" in the dark - Light mode | Only for documents: print version of the rules, terms & conditions ## Avoid tone: dont - Background | White or flat gray on the main pages - Light | Even across the whole screen, with no direction - Subject | A small photo amid lots of text - Light mode | As the main mode, with dark mode as an option ``` ![XS-3 arena](/assets/evidence/xs3-ticket-keyvisual.jpg "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](/strategy/ringkasan-strategi/)). - 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. ```viz-compare ## Do tone: do - Players | 5:7 player card with rank, photo, name, stats - Game cards | Game card that can be flipped to see its effect - Tickets and achievements | Cards that can be collected and shared to stories - Sponsors | A "presented by" slot inside the card ## Avoid tone: dont - Players | A list of names in a table - Game cards | Paragraphs of rules with no image - Tickets and achievements | Plain banners and lists in different styles - Sponsors | A 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](/research/angka-media-sosial/#xs-2-highlight-views-on-youtube)). One-by-one player reveals are one of the IG content patterns that work best ([Instagram content audit](/research/audit-konten-instagram/#content-patterns-that-work)). - In practice: player and team pages start with a full-bleed portrait, not a table. Notice what is the largest thing on screen. ```viz-compare ## Do tone: do - Player page | Opens with a full-bleed portrait and the name in the display font - Hierarchy | Face and name first, the UI steps back - Player list | Large cards that can be swiped ## Avoid tone: dont - Player page | Opens with a stats table - Hierarchy | Navigation, filters, and buttons stand out more than the player - Player list | Small 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](/research/format-dan-aturan/)). Competitors have not explained them well digitally either ([Benchmark](/research/benchmark-produk-digital/)). - In practice: every animation has a static, readable "end state". Text contrast follows WCAG AA ([Color palette](/visual-direction/palet-warna/)). Animation may explode, as long as the end state is readable. ```viz-compare ## Do tone: do - When a card is active | A short flash, glitch, or zoom, then back to a static state - Always visible | Score, time, and the name of the active card - Markers | Color plus a text label - Contrast | WCAG AA for all text ## Avoid tone: dont - When a card is active | A long animation that covers the score - Always visible | Score and time hidden by an overlay or effect - Markers | Color only, with no text - Contrast | Small 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](/visual-direction/audit-identitas/)), yet the digital product has to live between editions ([Competitor landscape](/research/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. ```viz-compare ## Fixed (brand) tone: do - Core colors | Black, red, mint - Wordmark | X SERIES with the edition number - Card system | 5:7 player card and game card - Components | Same across all editions, accept variables ## Changes (edition) tone: neutral - Color accent | Via `--edition-accent`, e.g. XS-1 blue, XS-2 blue-purple - Theme | "Game Without Limits", "Battle of the Century", "The Unorthodox" - Key visual | Belongs to each edition - Team color | Via `--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. ```viz-notes why: If not: ask: Basis: ## Check before sending tone: yellow - Does this feel like being in the arena? | Darken the background, add directed light | Principle 1 · Night arena - Could this be a card? | Consider a card component | Principle 2 · Cards are the language - Is the player the center of attention? | Enlarge the photo and name, shrink the UI | Principle 3 · Stars as big as the screen - Can it be understood in 2 seconds? | Simplify, give it a static end state | Principle 4 · Readable chaos - Will it still feel like XSERIES in the next edition? | Move edition elements into variables | Principle 5 · One brand, many editions ``` ## Research basis - XS-3 material is built on a black background with red and teal light: [Instagram content audit](/research/audit-konten-instagram/#xs3-players), from [Instagram @xseries___](https://www.instagram.com/xseries___/) - X Cards and President Cards: [Format & rules](/research/format-dan-aturan/#one-match-three-layers-of-rules), from [Bola.com](https://www.bola.com/indonesia/read/6258652/xseries-2-sajikan-sportainment-5v5-dengan-aturan-unik-dimeriahkan-bintang-nasional-hingga-dunia). XS-3 player cards with playing card ranks: [Instagram content audit](/research/audit-konten-instagram/#xs3-players) - The highest XS-2 highlight views (Nova vs Fury 167K, Grim vs Nova 98K): [Social media numbers](/research/angka-media-sosial/#xs-2-highlight-views-on-youtube), from [YouTube @gamesofsociety](https://www.youtube.com/@gamesofsociety) - The IG posts with the most likes are the 30 Sep 2026 teaser (11K) and the presale announcement (7.2K). One-by-one player reveals are one of the patterns that work: [Social media numbers](/research/angka-media-sosial/#instagram-engagement) and [Instagram content audit](/research/audit-konten-instagram/#content-patterns-that-work) - Competitors have not explained card rules interactively: [Digital product benchmark](/research/benchmark-produk-digital/#relevant-feature-patterns) - Kings League lost 54% of its audience: [Competitor landscape](/research/competitor-landscape/#global-sportainment-leagues), from [Xataka](https://www.xataka.com/magnet/kings-league-nacio-2023-para-acabar-futbol-tradicional-tres-anos-despues-ha-declarado-ere) - Each edition's theme: "Game Without Limits" at [XS-1](/research/timeline-edisi/#xseries-1-2025), "Battle of the Century" at [XS-2](/research/timeline-edisi/#xseries-2-january-2026), "The Unorthodox" at [XS-3](/research/timeline-edisi/#xseries-3-the-unorthodox-january-2027), from [Instagram @xseries___](https://www.instagram.com/xseries___/) highlights - That new viewers do not understand the card rules is the team's guess. There is no fan data yet, it needs testing.