# MERXI Core Standard

Version 2.0 · Updated 2026-09-04

## Brand premise

MERXI is a bright, product-first prediction, sports, and games platform. Warm
White is the default field. The primary logo and primary interaction color are
Azure. Gold communicates earned value, Orange communicates event energy, and
Aqua communicates Live state. Ink is for content, not a dark casino environment.

## System architecture

1. **DTCG tokens** — MERXI-owned decisions for color, type, spacing, radius,
   motion, data formatting, and layout.
2. **Recommended behavior primitives** — product repositories should use Base UI
   for accessible interaction behavior.
3. **Product integration layer** — consuming products may copy selected shadcn
   source locally, bind it to MERXI tokens, and review it in that repository.
   The Brand Book does not publish a component library.
4. **Domain patterns** — market rows, bet slips, wallets, Live status, Admin
   analysis, disclosures, and operational states.
5. **Documentation and QA** — Brand Book, Figma mapping, accessibility, mobile
   validation, and versioned release notes.

Material, Ant, and Carbon are not the global MERXI visual layer. Radix or React
Aria may be used selectively behind a MERXI-owned interface when a measured
behavior or accessibility gap requires them.

## Identity

- Primary: Azure Wave-M or Azure horizontal lockup on Warm White or White.
- Reverse: White Wave-M or White lockup on Azure.
- Campaign extension: multicolor spectrum only when the campaign needs it.
- Utility: black and white artwork for constrained production environments.
- Clear space: `x = 1/2` of the visible Wave-M height.
- Minimum visible Wave-M width: `24 px` digital and `8 mm` print.
- Never redraw, rotate, stretch, outline, shadow, or recolor the geometry.

## Typography

Production authority:

- Geist 400–700 for brand, product, interface, and editorial text.
- IBM Plex Sans Condensed 500–700 for odds, probability, score, balance, and P&L.
- MiSans 400–600 for Simplified Chinese.
- MiSans TC 400–600 for Traditional Chinese.
- Pretendard Variable 100–900 for Korean.

These are the final MERXI families across App, Web, Admin, X, and campaign
templates. The website self-hosts every production family so builds do not
depend on a font CDN. Trial fonts and silent substitutions must never ship.
Chinese and Korean tracking is always zero. Sentence case is the default. ALL
CAPS is reserved for short Latin state labels of about 12 characters or fewer,
with tracking no greater than `+6%`. Full locale, glyph, fallback, punctuation,
line-breaking, terminology, and East Asian scale rules live in
`MERXI-LOCALIZATION-STANDARD-v1.1.md`.

The following scale is for product and campaign specimens. Documentation pages
use the quieter reading scale in `MERXI-DOCUMENTATION-STANDARD-v2.0.md`:
48/54 desktop and 36/42 mobile page titles, with 16/27 reading copy. Do not use
the campaign Hero role for reference-page headings.

| Role         | Desktop | Mobile | 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% maximum   |

## Color roles

| Color      | Value     | Role                                            | Text on fill |
| ---------- | --------- | ----------------------------------------------- | ------------ |
| Warm White | `#FCFAF4` | Default canvas                                  | Ink          |
| Azure      | `#145BFF` | Primary identity, action, selection, core curve | White        |
| Cobalt     | `#0A3FB8` | Depth, dense data, focus                        | White        |
| Gold       | `#D79B18` | Value, reward, VIP, balance                     | Ink          |
| Orange     | `#FF6A1A` | Event time, urgency, movement alert             | Ink          |
| Aqua       | `#11BED0` | Live state and realtime marker only             | Ink          |
| Ink        | `#10233D` | Primary content                                 | Warm White   |

Verified contrast references:

- Ink on Warm White: `15.13:1`.
- White on Cobalt: `8.69:1`.
- White on Azure: `5.29:1`.
- Gold, Orange, and Aqua on White: `2.44:1`, `2.87:1`, and `2.26:1`;
  therefore none may be used as normal text on White.

The 68 Warm field / 16 Blue / 8 Gold / 5 Orange / 3 Ink ratio is an editorial
starting point for brand communications only. Aqua is unallocated and appears
only for a verified Live or connected state. This is not a quota for product
interfaces.

### Semantic token contract

Product components consume semantic roles rather than palette primitives:

- Surfaces: page, surface, raised, sunken, tinted, overlay.
- Text: primary, secondary, disabled, inverse, on-accent.
- Borders: subtle, default, strong, focus, separator.
- Accent: subtle, border, solid, solid-hover, text.
- Status: live, suspended, success, and danger with explicit background,
  border, solid, and text roles where needed.
- Financial values: gain and loss are separate from generic success and danger.

Financial direction is an explicit product setting, not inferred from language.
Use `data-financial-convention="red-up"` only when selected; the default is gain
green and loss red. Always retain a sign, direction,
or text label so color is never the only signal.

### Gradient contract

- Approved recipes use a `105deg` direction and `oklab` interpolation.
- Use Value Metal for premium value, Live Signal only for verified realtime
  states, Event Energy for time-sensitive communication, and Pearl Field for
  quiet large backgrounds.
- Use one gradient field per composition. Never use a brand gradient as a
  numeric chart scale.
- Reading text sits on a solid semantic surface or a measured scrim. Verify the
  worst point, not the average background.
- On large raster fields, add subtle neutral noise only when needed to control
  8-bit banding. SVG and CSS sources remain clean.

## Product language

User navigation is always:

`Sports / Markets / Live / Games / Wallet`

Search is a global action across Sports, Markets, Live, and Games. My Bets lives
inside Sports or Markets activity. Account uses the avatar entry.

Internal taxonomy may use:

`Sportsbook / Prediction Markets / Live Betting / Live Dealer / Casino Games`

## Number and data formatting

- Decimal odds: fixed two decimals, for example `1.86`.
- American odds: true plus or minus sign, for example `−116`.
- Probability: one decimal in analysis, for example `62.4%`.
- Probability movement: percentage points, for example `+3.2 pp`.
- Currency: fixed precision plus code, for example `12,888.00 USDT`.
- P&L: preserve the sign and column precision, for example `+1,248.32` and
  `−640.00`.
- Volume: compact form in lists (`1.24M`), exact value in details and tables.
- Time: absolute zone near the value (`20:45 UTC`) plus range and freshness.
- Score: integer values with an en dash and equal-width alignment.
- Use tabular lining figures for changing values.
- Slashed zero and monospace are reserved for IDs, hashes, wallet addresses,
  and logs—not odds, balances, probability, or P&L.

## Layout and interaction

- Atomic spacing grid: `4 px`; primary rhythm: `8 px`.
- Mobile gutter: `20 px`.
- Mobile primary control: `48 px`.
- Absolute minimum interactive target: `44 × 44 px`.
- Admin row: `40–44 px`; user market row: `52–64 px`.
- Card padding: `16 / 20 / 24 px`.
- Radius: `6 / 10 / 16 px`.
- Mobile chapter spacing: `72 px`.
- Validate at `320 / 375 / 390 / 430 px` without page-level clipping.
- Use a visible `3 px` Azure focus ring with offset.
- Motion confirms state and preserves orientation; it never adds decorative
  theatre and must respect reduced-motion preferences.

## Data visualization

- User markets: Lightweight Charts.
- Admin analysis: ECharts using small multiples and unit-safe comparisons.
- Recommended operational-data target: product repositories should use TanStack
  Table v9 for sorting, filtering, column visibility, and accessible units. The
  Brand Book does not install it and uses native tables for exact-value examples.
- Recommended marketing-export target: ECharts SSR plus MERXI editorial
  templates. This is an implementation contract; the Brand Book does not run
  or ship an SSR export pipeline.

Every chart names metric, unit, source, time range, absolute update time, and
state. Color is never the only differentiator. Keyboard and screen-reader users
must have access to exact values. User OHLCV reflects real contract prices and
matched volume; it is not derived from a probability line.

## Required states

Every product and Admin pattern covers loading, empty, suspended, offline,
settled, error, and long-copy states. A suspended price is replaced by `—` and a
clear state label; a stale actionable price must never remain visible.

## Release gate

- Semantic tokens are used; no undocumented brand hex values.
- User navigation, internal taxonomy, and language match this document.
- Mobile sizes, focus, keyboard behavior, contrast, and reduced motion pass.
- Numeric precision, sign, source, unit, and freshness are explicit.
- Figma name, code token, documentation, and downloadable source agree.
- Existing ImageGen studies are labeled as direction references unless editable,
  exact-size production masters are actually provided.

`merxi-tokens.json` and the public CSS token files are maintained manually. The
repository checker verifies a shared contract subset (color, core type and
interaction dimensions, label tracking, version, and date); it is not a full
token-generation pipeline.