MERXI product design translates Azure, Aqua, Gold, and Orange into useful decisions. Sports, Markets, Live, Games, and Wallet form the persistent navigation; Search remains a global action. The interface stays bright, factual, and calm—even when the market moves fast.
One primary decision Data before decoration Premium through restraint
Search is global; the other references map into Sports, Markets, and Games. These ImageGen files are non-production direction studies with different source proportions—not exact 390 × 844 UI masters. Rebuild every logo, label, number, chart, and control as native UI from the MERXI Core system.
ImageGen direction studySearch · MobileSource study · 899 × 1748 · Target UI 390 × 844
01
Product role
Search
Capture intent. Shorten the path.
Search is a decision surface, not a content directory. Results should reveal the event, market state, and next useful action before decorative metadata.
Information hierarchy
Query and recent intent
Live events and market matches
Sports, leagues, games, then help
Numeric language
Show the live minute, market count, and odds only when they help comparison.
Content density
5–7 primary results before scroll; one supporting line per result.
IdleTypingResultsNo result
DoUse plain-language terms and preserve the query while filters change.
Don’tDo not mix promotions into the first three intent-matched results.
ImageGen direction studySports · MobileSource study · 853 × 1844 · Target UI 390 × 844
02
Product role
Sports
Compare the market. Commit with confidence.
The Sports destination contains the Sportsbook and Live Betting modes. Event context and price comparison stay effortless while live state and price movement remain factual.
Information hierarchy
Competition, teams, score and clock
Market name and selectable outcomes
Bet slip status and potential return
Numeric language
Decimal odds use two places: 1.86. Scores use an en dash: 2–1. Live time uses 72′.
Content density
3 outcomes per primary market; 4–6 visible market groups maximum.
Pre-matchLiveSelectedSuspended
DoKeep price, outcome and selection state legible in one glance.
Don’tDo not use gold on every price or make animation imply a guaranteed win.
ImageGen direction studyPrediction Markets · MobileSource study · 818 × 1922 · Target UI 390 × 844
03
Product role
Prediction Markets
Turn uncertainty into a readable market.
Prediction surfaces lead with the question, resolution conditions, and midpoint-implied probability. Trading information follows the same visual grammar as MERXI charts.
Information hierarchy
Resolvable question and closing time
Probability, direction and time range
Outcome action, liquidity and rules
Numeric language
Analysis shows 64.0%, not “likely”. Change is +3.2 pp; money uses a currency or asset code.
Content density
One primary market story per viewport; supporting markets begin below the chart.
OpenMovingClosingResolved
DoName the source, freshness and resolution rule next to the decision.
Don’tDo not present probability as certainty or hide low-liquidity conditions.
ImageGen direction studyGames · MobileSource study · 813 × 1935 · Target UI 390 × 844
04
Product role
Games
Enter the game. Keep control visible.
The Games destination contains Casino Games and the Live Dealer subcategory. Artwork attracts while clear controls, limits, and state communication create trust.
Information hierarchy
Game title, category and live status
Primary artwork and entry action
Provider, limits and recent play
Numeric language
Limits show both values and currency: 10–5,000 USDT. Never style stakes like jackpots.
Content density
One hero game plus 4–6 discovery cards; controls stay outside imagery.
AvailableLive tableLoadingUnavailable
DoUse bright editorial crops and reserve gold for value or premium access.
Don’tDo not add chandeliers, neon tunnels, roulette rings, or ornamental glow.
02 / Type & data
Editorial voice. Trading precision.
Geist is the Latin interface family, IBM Plex Sans Condensed is the data family, MiSans carries Simplified Chinese, MiSans TC carries Traditional Chinese, and Pretendard carries Korean. Monospace and slashed zero remain limited to IDs, hashes, wallet addresses, and logs—not odds or balances.
MERXI Display · Geist Bold
North London vs Manchester
Geist 700 · sentence case · two lines maximum
MERXI Data · IBM Plex Sans Condensed Semibold
1.8664.0%+3.2 pp
IBM Plex Sans Condensed 600 · tabular lining numerals · aligned decimals
MERXI UI · Geist Semibold
LIVE 72′Market suspendedUpdated 14:32:08 UTC
Uppercase only for compact status labels, never body copy.
Odds1.86
Two decimal places. Never “1,86” in the English product.
Probability64.0%
Use one decimal across lists, analysis, and detail for consistency.
Probability change+3.2 pp
Always include direction and unit. Pair color with a plus or minus sign.
Stake / return250.00 USDT
Thousands separators, two decimals, asset code after value.
03 / Rhythm & density
Space carries hierarchy.
Every screen follows a 4 px base unit and an 8 px primary rhythm. Large gaps separate decisions; small gaps bind labels to their values. Density changes by task, never by decoration.
4px
8px
12px
16px
24px
32px
48px
64px
20 px
Screen gutter
Default on mobile. Never let a full-width control touch the device edge.
24 px
Decision group
Separates market context from the primary choice or action.
8 px
Semantic pair
Binds a label to its value, a team to its price, or a status to time.
48 / 44
Control height / target
Primary controls are 48 px high. Outcomes, filters, dismiss controls, and navigation never fall below 44 × 44 px.
52–64 px
User market row
Holds outcome, state, and price without compressing the touch target or truncating the deciding value.
16 / 20 / 24
Card inset
Use the smallest inset only for dense lists; default product cards use 20 px and feature surfaces use 24 px.
State language
Color confirms meaning. It never creates meaning alone.
