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 Transactions · platform Platform-admin view: every onchain transaction across all tenants, with settlement state. Live Transactions · tenant Partner-admin view: a tenant sees only its own onchain activity. Live User XP Member economy: settlement flow, grant XP, wallet state. Live Account · member Member self-service: profile card, dirty-gated edit modal, toast feedback. Sketch Wireframes Low-fi drafts: shape a new screen here before it earns a reference page. See wireframes/README.md.

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

Hierarchy: at most one btn-primary per surface (page or dialog) — the action that surface exists to accomplish (page-head CTA, dialog confirm, sign-in submit). Everything else is btn-secondary; btn-ghost for low-emphasis inline actions; btn-danger takes the primary slot in a destructive dialog. A dialog trigger is primary only when it launches the page's main job ("Invite member" on Members) — supporting edits ("Edit profile" on Account) stay secondary. A submit that would be a no-op (nothing changed yet) renders disabled.

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.

Empty state

Attention queue

in-section · default

Nothing needs attention right now.

Page not found

The page you're looking for doesn't exist.

Go home

No dedicated class — an empty state composes .stack + .muted. Inside a section that already has a .panel-head h4 title, the message is a quiet strong.muted line that must never out-size that title. Only a full-page boundary state (404, loading) promotes the title to a real heading styled .h3, with an optional description and action. Table bodies use the table-scoped .table-empty row instead (see Table above).

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.

Detail drawer

Right-side sheet for read-only detail views (e.g. a transaction row). Built from .drawer + .drawer-overlay with .drawer-head/body/foot; long mono values stack via .deflist-hybrid. Close via ✕, the backdrop, or Escape.

Site footer

Chrome bookend to the topbar: a full-bleed band on --bg-page separated by a 1px top border — flat, not an elevated surface. console.js injects it on every console page via mountFooter(); opt a page out with <body data-no-footer> (this catalog does, to demo it inline). Sign-in keeps its own shell and never loads console.js.