00Source of truth

Fourth Dimension Sports: one system, every screen.

Colour, type, spacing, radius, elevation and components all resolve from tokens.css. Edit a token there and it cascades to every page below. Components live in components.css as reusable classes: no inline colours anywhere.

01Pages

Screens built on this system

Live Sign in Fantech · passwordless email code + 2FA enrollment. Live Admin dashboard Platform overview: health, wallet readiness, operational queue. Live Admin tenant list Searchable directory: filters, readiness pills, create tenant. Live Members · platform Platform-admin view: every member across all tenants. Live Dashboard · tenant Partner-admin home: member readiness, blockers, activity. Live Members · tenant Partner-admin view: a tenant sees only its own members. Live User XP Member economy: settlement flow, grant XP, wallet state.

02Colour

Registered palette

Sanctioned extensions

Status ramp Draft

Not in the registered brand set: kept muted/institutional. Palette-align before production.

03Typography

Type scale

Eyebrow · JetBrains Mono

Display 44

Heading 1 · 32

Heading 2 · 24

Heading 3 · 20

Lead 17 · Plus Jakarta Sans for display, Inter for body. Evidence first: we substantiate, we do not describe.

Body 15 · the analytical rigour of a top-tier advisory firm applied to fan economies. British English throughout.

Mono · 1,284,905 fans · 7–11% ARPU · v3.0

04Spacing · Radius · Elevation

Metrics

8-pt spacing

Radius

Elevation · navy-tinted

05Components

Buttons

Link button Primary link Use a.btn when it navigates, button.btn when it acts: identical styling, no hover underline.

Form fields

Email address We'll only use this to sign you in.

Password * Password must be at least 8 characters.

Role Native select with a token-styled caret; it's also the single-axis filter control. Reason

Badges · Chips · Stats

Active Accepted Pending Locked Admin

1,284Members▲ 6.2%

92%Active▲ 1.1%

£4.18ARPU▼ 0.4%

7Tenants

Table

Member	Role	Status	XP
Marco Rossi marco+sample@pellartech.com	Admin	Active	12,480
Aisha Bello aisha@club.com	Member	Accepted	8,215
Jonas Weber jonas@club.com	Member	Locked	3,902

Console modules

Shared building blocks for the admin console screens: KPI card, meter, operational feed, metric list, and top-bar chrome. Used first on the Admin dashboard.

Customer tenants43 active · 1 internal

Active members72 admins · 5 members

Wallet readiness57%

4 active · 2 missing · 1 failed

Reconciliation drift11 tenant needs review

Operational queue

feed · status discs

Wallets blocked2 members cannot receive mints.

Resolve →

Settlement queued1 mint job queued 8 minutes.

Inspect →

Sample cleanLedger and chain aligned.

today

Economy snapshot

metric list

Total RP supply1,450

Queued mints1

Failed jobs0

Platform scope Role, avatar, and sign-out now live inside the menu. See Admin dashboard.

Tenant	Wallet	Latest signal
All Things Rugby	No wallet	Provisioning failed
Tour Demo Co	Ready	Settlement queued
Sample	Ready	Reconciled today
No matches. Clear filters.

Live: the Filter button opens a faceted drawer (multi-select, AND across groups); search and removable pills update the table. Single-axis screens use a select instead (see Form fields). One engine, shared in console.js: also on the tenant and member lists.

Notices

Heads up. Reconciliation runs nightly at 02:00. Findings surface on the dashboard queue.

Wallet missing. Grants are queued and mint automatically once a wallet is provisioned.

Blocked. This action needs a ready settlement wallet before it can proceed.

Timeline

1 · Wallet readySettlement address verified.

2 · Admin grant250 RP · matchday reward.

3 · Mint job runningQueued → in-flight → submitted.

4 · Receipt confirmsTx hash appears in activity.

Step states: is-done (green), is-current (blue), is-blocked (red; see User XP), or default (pending).

Modal · toast

Overlay, drawer and toast open/close are wired by console.js: data-modal-open / data-modal-close, backdrop click and Escape.