MERXI
DTCG tokens
Portable decisions for color, type, spacing, radius, motion, and data formatting. JSON and CSS are maintained together; the repository checker verifies the shared contract subset before build.
Shared UI. Brand-specific identity.
All web projects use shadcn/ui by default, with their own brand tokens and fonts. This is the live MERXI component implementation.
Off
MERXI Core · v2.6 · 10 Sep 2026
System architecture
A product-first standard for a premium prediction, sports, and games platform. Bright by default, exact with data, mobile-first in use, and expressive only where the message earns it.
Primary signature
Azure
#145BFF5 layers4 px atomic grid48 px mobile primary2 + 1 chart engines + table
01
Architecture
MERXI owns the visual language.
Use mature open-source behavior, then make the final interface unmistakably MERXI. A third-party design system never becomes the brand layer.
shadcn/ui · Base Nova
Shared web components
shadcn/ui is the default web UI standard. The installed Base Nova components use Base UI for accessible behavior, including navigation, dialogs, sheets and fields.
Product repositories
Product integration layer
Reuse the installed components/ui source and bind it to each brand’s colors, logo and fonts. MERXI uses Azure, Cloud, Ink, MiSans and Geist. Native apps and explicitly specified custom components are exceptions.
Product teams
Domain patterns
Market rows, bet slips, order states, wallets, live status, Admin risk views, and disclosure patterns built from the owned layer.
Brand + Product
Documentation & QA
Brand Book examples, Figma mapping, accessibility checks, mobile validation, and a versioned release record for every approved change.
Base UI + locally adopted shadcn source
Product repositories should use Base UI for accessible behavior. When a selected shadcn pattern is useful, copy it into that product, rename it by job, and bind it to MERXI semantic tokens. No component implementation ships from the Brand Book.
Radix or React Aria
Adopt a primitive only when it solves a measured behavior or accessibility gap. Wrap it before application teams use it.
Material, Ant, Carbon
Their visual assumptions are too complete for MERXI. They may inform a one-off enterprise tool, but they do not define product or campaign appearance.
02
Typography
Editorial voice. Trading-floor precision.
Geist and IBM Plex Sans Condensed define Latin narrative and betting data. MiSans, MiSans TC, and Pretendard add native Simplified Chinese, Traditional Chinese, and Korean systems without changing the underlying MERXI hierarchy.
Geist
Brand, product, editorial, navigation
Read the market.IBM Plex Sans Condensed
Odds, probability, balance, score, P&L
1.86 62.4% −640.00Geist + IBM Plex Sans Condensed
Final production authority for narrative and changing data.
--font-display · --font-text · --font-dataMiSans · MiSans TC · Pretendard
简体中文、繁體中文、한국어 · 字体与换行均按语言切换
读懂市场，做出判断。| Role | Desktop px | Mobile px | Weight | Tracking |
|---|---|---|---|---|
| Hero | 96/92 | 52/52 | 700 | −3.5% / −2.5% |
| Display | 72/72 | 44/48 | 700 | −3% / −2% |
| H1 | 56/60 | 36/40 | 700 | −2.5% |
| H2 | 40/44 | 30/34 | 600–700 | −2% |
| H3 | 28/32 | 24/30 | 600 | −1.5% |
| Market title | 20/28 | 18/24 | 600 | −1% |
| Body | 16/24 | 16/24 | 400 | 0 |
| Control | 15/20 | 15/20 | 500–600 | 0 |
| Metadata | 14/20 | 14/20 | 400–500 | 0 |
| Caption | 12/16 | 12/16 | 500–700 | +6% max |
Decimal odds1.86fixed 2 decimals
Probability62.4%analysis · 0.1 pp precision
Movement+3.2 pppercentage points
Money12,888.00USDT · asset after value
Absolute time20:45UTC · source + freshness nearby
03
Color
Color has a job—not a product territory.
Warm White is the field. Azure is the primary signature and interaction. Gold is earned value; Orange is event energy; Aqua is Live. Never assign one brand color to an entire product channel.
#FCFAF4Default canvas
Text on fill: Ink#145BFFPrimary mark, action, selection, core curve
Text on fill: White#0A3FB8Depth, dense data, focus
Text on fill: White#D79B18Value, reward, VIP, balance emphasis
Text on fill: Ink#FF6A1AEvent time, urgency, movement alert
Text on fill: Ink#11BED0Live state and realtime marker only
Text on fill: Ink#10233DPrimary content; never a large dark environment
Text on fill: Warm WhiteEditorial and product copy
Dense, high-contrast fields
Primary action and selection
Fail for normal text; use Ink on their fills
Components never choose Cloud, Pearl, Mist, or White directly.
Text roles stay independent from borders and decorative color.
Each state defines background, border, solid, and text values.
Financial color convention is explicit: use data-financial-convention="red-up" when selected. Language alone never changes gain or loss colors. Keep signs and labels.
Gradient contract
105° · OKLab · one field
Text stays on a solid semantic surface or measured scrim. Never use a brand gradient as a numeric scale. Add neutral noise only to large raster exports when banding is visible.
04
Product language
One user map. Precise internal taxonomy.
Navigation is written for users. Internal labels remain available for analytics, operations, content modeling, and provider integration. Search is global—not a sixth content channel.
SportsMarketsLiveGamesWallet
My Bets lives inside Sports or Markets activity. Account uses the avatar entry. Every tab keeps the same order across mobile and web.
Search MERXI⌘ K
Search spans Sports, Markets, Live, and Games.
Use in data models, reports, filters, and editorial metadata.
Never collapse the content edge below the approved gutter.
Bet, deposit, confirm, and other high-value mobile actions.
Absolute minimum for every interactive control.
Admin density first; user market readability second.
Choose by density and never invent an in-between value.
Controls, cards, and expressive containers respectively.
Name the state, explain impact, and provide the next action.
Name the state, explain impact, and provide the next action.
Replace stale price with — and name the state.
Name the state, explain impact, and provide the next action.
Name the state, explain impact, and provide the next action.
Name the state, explain impact, and provide the next action.
05
Data visualization
One contract. Two engines. One table layer.
A prediction platform is only as credible as its data semantics. The engine follows the audience; units, sources, timestamps, states, and exact-value access remain consistent.
User markets
Lightweight Charts
Fast probability, contract price, and OHLCV exploration with TradingView attribution and an exact-value table fallback.
Open user reference Admin analysisECharts
Multi-series operational analysis, small multiples, zoom, risk, settlement, and accessible descriptions.
Open Admin reference Recommended operational-data targetTanStack Table v9 (target)
Product repositories should use it for sortable, filterable, unit-aware grids. This Brand Book ships semantic native-table references only; it does not install TanStack Table.
Read the matrix Recommended marketing export targetECharts SSR + MERXI templates (target)
Implementation contract for reproducible chart exports with an editorial wrapper. This Brand Book does not run or ship the SSR export pipeline.
Open curve rulesProbability0–100% · method + freshness
Oddsnamed format · fixed precision
Moneycurrency/asset · exact table value
Timerange + absolute UTC timestamp
Movementvalue + direction + comparison basis
Accessibilitypattern/label in addition to color
06
Governance
Small team. Maintained references. Clear release gates.
MERXI Core is intentionally lightweight: manually maintained token references, an automated shared-contract check, owned component code, documented domain patterns, and direct verification on the surfaces users touch.
DTCG JSON + CSS
`public/brand/merxi-tokens.json` and the CSS token files are maintained manually. The build checker verifies their shared color, type, interaction, version, and date subset; it does not claim full code generation.
Brand defines. Product proves.
Brand owns identity and semantic decisions. Product owns real states and usability. Engineering owns implementation quality.
Feedback, never theatre.
Motion confirms state change, preserves orientation, and respects reduced-motion. MERXI does not maintain a decorative motion demo.
Release check
Definition of ready
Every required line is verified before a pattern is approved.- Uses semantic tokens; no private brand hex values
- Works at 320, 375, 390, and 430 px without page-level clipping
- Primary mobile controls are 48 px; every target is at least 44 × 44 px
- Keyboard focus is visible and state is never communicated by color alone
- Odds, probability, money, time, source, and freshness are explicitly labeled
- Loading, empty, suspended, offline, settled, error, and long-copy states exist
- Figma name, code token, documentation, and downloadable source agree