Substratal Hub for Web (PWA) — reference screens

Screen IDs match SCREENS.md; platform rules in PLATFORM-SPEC.md. Each screen is shown in the default light theme (Moss Paper) and default dark theme (Forest Floor). Open any mockup with ?mode=dark, ?light=<theme> or ?dark=<theme> to preview the other themes (see shared/THEMES.md). Logo: shared/brand/BRAND.md.

Desktop

AUTH-01/02 · Sign in & two-factor — desktop — light — AUTH-01/02 · Sign in & two-factor — desktopLight: HTML · PNG Dark: HTML · PNG

AUTH-01/02 · Sign in & two-factor — desktop — dark — AUTH-01/02 · Sign in & two-factor — desktopLight: HTML · PNG Dark: HTML · PNG

ACC-04 · Security — desktop — light — ACC-04 · Security — desktopLight: HTML · PNG Dark: HTML · PNG

ACC-04 · Security — desktop — dark — ACC-04 · Security — desktopLight: HTML · PNG Dark: HTML · PNG

APP-01 · Home — My Apps (Free/Standard tiers) — desktop — light — APP-01 · Home — My Apps (Free/Standard tiers) — desktopLight: HTML · PNG Dark: HTML · PNG

APP-01 · Home — My Apps (Free/Standard tiers) — desktop — dark — APP-01 · Home — My Apps (Free/Standard tiers) — desktopLight: HTML · PNG Dark: HTML · PNG

NTF-01/02 · Inbox and notification — desktop — light — NTF-01/02 · Inbox and notification — desktopLight: HTML · PNG Dark: HTML · PNG

NTF-01/02 · Inbox and notification — desktop — dark — NTF-01/02 · Inbox and notification — desktopLight: HTML · PNG Dark: HTML · PNG

NTF-03 · Devices & notifications — desktop — light — NTF-03 · Devices & notifications — desktopLight: HTML · PNG Dark: HTML · PNG

NTF-03 · Devices & notifications — desktop — dark — NTF-03 · Devices & notifications — desktopLight: HTML · PNG Dark: HTML · PNG

SET-01 · Settings — Appearance & themes — desktop — light — SET-01 · Settings — Appearance & themes — desktopLight: HTML · PNG Dark: HTML · PNG

SET-01 · Settings — Appearance & themes — desktop — dark — SET-01 · Settings — Appearance & themes — desktopLight: HTML · PNG Dark: HTML · PNG

SET-02 · Settings — per app — desktop — light — SET-02 · Settings — per app — desktopLight: HTML · PNG Dark: HTML · PNG

SET-02 · Settings — per app — desktop — dark — SET-02 · Settings — per app — desktopLight: HTML · PNG Dark: HTML · PNG

BIL-01 · My plan — desktop — light — BIL-01 · My plan — desktopLight: HTML · PNG Dark: HTML · PNG

BIL-01 · My plan — desktop — dark — BIL-01 · My plan — desktopLight: HTML · PNG Dark: HTML · PNG

ORG-06 · Organization apps & seats — desktop — light — ORG-06 · Organization apps & seats — desktopLight: HTML · PNG Dark: HTML · PNG

ORG-06 · Organization apps & seats — desktop — dark — ORG-06 · Organization apps & seats — desktopLight: HTML · PNG Dark: HTML · PNG

USR-01 · Users — desktop — light — USR-01 · Users — desktopLight: HTML · PNG Dark: HTML · PNG

USR-01 · Users — desktop — dark — USR-01 · Users — desktopLight: HTML · PNG Dark: HTML · PNG

ACX-01 + ACX-03 · Access (managed rows), turn off — desktop — light — ACX-01 + ACX-03 · Access (managed rows), turn off — desktopLight: HTML · PNG Dark: HTML · PNG

ACX-01 + ACX-03 · Access (managed rows), turn off — desktop — dark — ACX-01 + ACX-03 · Access (managed rows), turn off — desktopLight: HTML · PNG Dark: HTML · PNG

ROL-02 · Role detail — desktop — light — ROL-02 · Role detail — desktopLight: HTML · PNG Dark: HTML · PNG

ROL-02 · Role detail — desktop — dark — ROL-02 · Role detail — desktopLight: HTML · PNG Dark: HTML · PNG

APL-03 · Application — desktop — light — APL-03 · Application — desktopLight: HTML · PNG Dark: HTML · PNG

APL-03 · Application — desktop — dark — APL-03 · Application — desktopLight: HTML · PNG Dark: HTML · PNG

APL-07 · Push credentials — desktop — light — APL-07 · Push credentials — desktopLight: HTML · PNG Dark: HTML · PNG

APL-07 · Push credentials — desktop — dark — APL-07 · Push credentials — desktopLight: HTML · PNG Dark: HTML · PNG

KEY-01 + KEY-03 · API keys, secret reveal — desktop — light — KEY-01 + KEY-03 · API keys, secret reveal — desktopLight: HTML · PNG Dark: HTML · PNG

KEY-01 + KEY-03 · API keys, secret reveal — desktop — dark — KEY-01 + KEY-03 · API keys, secret reveal — desktopLight: HTML · PNG Dark: HTML · PNG

WHK-03 · Webhook deliveries — desktop — light — WHK-03 · Webhook deliveries — desktopLight: HTML · PNG Dark: HTML · PNG

WHK-03 · Webhook deliveries — desktop — dark — WHK-03 · Webhook deliveries — desktopLight: HTML · PNG Dark: HTML · PNG

AUD-01 + AUD-02 · Audit log — desktop — light — AUD-01 + AUD-02 · Audit log — desktopLight: HTML · PNG Dark: HTML · PNG

AUD-01 + AUD-02 · Audit log — desktop — dark — AUD-01 + AUD-02 · Audit log — desktopLight: HTML · PNG Dark: HTML · PNG

GLB-01 · Command palette — desktop — light — GLB-01 · Command palette — desktopLight: HTML · PNG Dark: HTML · PNG

GLB-01 · Command palette — desktop — dark — GLB-01 · Command palette — desktopLight: HTML · PNG Dark: HTML · PNG

USR-01 · Multi-select, bulk bar, hover preview — desktop — light — USR-01 · Multi-select, bulk bar, hover preview — desktopLight: HTML · PNG Dark: HTML · PNG

USR-01 · Multi-select, bulk bar, hover preview — desktop — dark — USR-01 · Multi-select, bulk bar, hover preview — desktopLight: HTML · PNG Dark: HTML · PNG

Tablet

AUTH-01/02 · Sign in & two-factor — tablet — light — AUTH-01/02 · Sign in & two-factor — tabletLight: HTML · PNG Dark: HTML · PNG

AUTH-01/02 · Sign in & two-factor — tablet — dark — AUTH-01/02 · Sign in & two-factor — tabletLight: HTML · PNG Dark: HTML · PNG

ACC-04 · Security — tablet — light — ACC-04 · Security — tabletLight: HTML · PNG Dark: HTML · PNG

ACC-04 · Security — tablet — dark — ACC-04 · Security — tabletLight: HTML · PNG Dark: HTML · PNG

APP-01 · Home — My Apps (Free/Standard tiers) — tablet — light — APP-01 · Home — My Apps (Free/Standard tiers) — tabletLight: HTML · PNG Dark: HTML · PNG

APP-01 · Home — My Apps (Free/Standard tiers) — tablet — dark — APP-01 · Home — My Apps (Free/Standard tiers) — tabletLight: HTML · PNG Dark: HTML · PNG

NTF-01/02 · Inbox and notification — tablet — light — NTF-01/02 · Inbox and notification — tabletLight: HTML · PNG Dark: HTML · PNG

NTF-01/02 · Inbox and notification — tablet — dark — NTF-01/02 · Inbox and notification — tabletLight: HTML · PNG Dark: HTML · PNG

NTF-03 · Devices & notifications — tablet — light — NTF-03 · Devices & notifications — tabletLight: HTML · PNG Dark: HTML · PNG

NTF-03 · Devices & notifications — tablet — dark — NTF-03 · Devices & notifications — tabletLight: HTML · PNG Dark: HTML · PNG

SET-01 · Settings — Appearance & themes — tablet — light — SET-01 · Settings — Appearance & themes — tabletLight: HTML · PNG Dark: HTML · PNG

SET-01 · Settings — Appearance & themes — tablet — dark — SET-01 · Settings — Appearance & themes — tabletLight: HTML · PNG Dark: HTML · PNG

SET-02 · Settings — per app — tablet — light — SET-02 · Settings — per app — tabletLight: HTML · PNG Dark: HTML · PNG

SET-02 · Settings — per app — tablet — dark — SET-02 · Settings — per app — tabletLight: HTML · PNG Dark: HTML · PNG

BIL-01 · My plan — tablet — light — BIL-01 · My plan — tabletLight: HTML · PNG Dark: HTML · PNG

BIL-01 · My plan — tablet — dark — BIL-01 · My plan — tabletLight: HTML · PNG Dark: HTML · PNG

ORG-06 · Organization apps & seats — tablet — light — ORG-06 · Organization apps & seats — tabletLight: HTML · PNG Dark: HTML · PNG

ORG-06 · Organization apps & seats — tablet — dark — ORG-06 · Organization apps & seats — tabletLight: HTML · PNG Dark: HTML · PNG

USR-01 · Users — tablet — light — USR-01 · Users — tabletLight: HTML · PNG Dark: HTML · PNG

USR-01 · Users — tablet — dark — USR-01 · Users — tabletLight: HTML · PNG Dark: HTML · PNG

ACX-01 + ACX-03 · Access (managed rows), turn off — tablet — light — ACX-01 + ACX-03 · Access (managed rows), turn off — tabletLight: HTML · PNG Dark: HTML · PNG

ACX-01 + ACX-03 · Access (managed rows), turn off — tablet — dark — ACX-01 + ACX-03 · Access (managed rows), turn off — tabletLight: HTML · PNG Dark: HTML · PNG

ROL-02 · Role detail — tablet — light — ROL-02 · Role detail — tabletLight: HTML · PNG Dark: HTML · PNG

ROL-02 · Role detail — tablet — dark — ROL-02 · Role detail — tabletLight: HTML · PNG Dark: HTML · PNG

APL-03 · Application — tablet — light — APL-03 · Application — tabletLight: HTML · PNG Dark: HTML · PNG

APL-03 · Application — tablet — dark — APL-03 · Application — tabletLight: HTML · PNG Dark: HTML · PNG

APL-07 · Push credentials — tablet — light — APL-07 · Push credentials — tabletLight: HTML · PNG Dark: HTML · PNG

APL-07 · Push credentials — tablet — dark — APL-07 · Push credentials — tabletLight: HTML · PNG Dark: HTML · PNG

KEY-01 + KEY-03 · API keys, secret reveal — tablet — light — KEY-01 + KEY-03 · API keys, secret reveal — tabletLight: HTML · PNG Dark: HTML · PNG

KEY-01 + KEY-03 · API keys, secret reveal — tablet — dark — KEY-01 + KEY-03 · API keys, secret reveal — tabletLight: HTML · PNG Dark: HTML · PNG

WHK-03 · Webhook deliveries — tablet — light — WHK-03 · Webhook deliveries — tabletLight: HTML · PNG Dark: HTML · PNG

WHK-03 · Webhook deliveries — tablet — dark — WHK-03 · Webhook deliveries — tabletLight: HTML · PNG Dark: HTML · PNG

AUD-01 + AUD-02 · Audit log — tablet — light — AUD-01 + AUD-02 · Audit log — tabletLight: HTML · PNG Dark: HTML · PNG

AUD-01 + AUD-02 · Audit log — tablet — dark — AUD-01 + AUD-02 · Audit log — tabletLight: HTML · PNG Dark: HTML · PNG

ACX-01 · Two panes, resizable — tablet — light — ACX-01 · Two panes, resizable — tabletLight: HTML · PNG Dark: HTML · PNG

ACX-01 · Two panes, resizable — tablet — dark — ACX-01 · Two panes, resizable — tabletLight: HTML · PNG Dark: HTML · PNG

Shell · Collapsible sidebar — tablet — light — Shell · Collapsible sidebar — tabletLight: HTML · PNG Dark: HTML · PNG

Shell · Collapsible sidebar — tablet — dark — Shell · Collapsible sidebar — tabletLight: HTML · PNG Dark: HTML · PNG

Phone

AUTH-01/02 · Sign in & two-factor — phone — light — AUTH-01/02 · Sign in & two-factor — phoneLight: HTML · PNG Dark: HTML · PNG

AUTH-01/02 · Sign in & two-factor — phone — dark — AUTH-01/02 · Sign in & two-factor — phoneLight: HTML · PNG Dark: HTML · PNG

ACC-04 · Security — phone — light — ACC-04 · Security — phoneLight: HTML · PNG Dark: HTML · PNG

ACC-04 · Security — phone — dark — ACC-04 · Security — phoneLight: HTML · PNG Dark: HTML · PNG

APP-01 · Home — My Apps (Free/Standard tiers) — phone — light — APP-01 · Home — My Apps (Free/Standard tiers) — phoneLight: HTML · PNG Dark: HTML · PNG

APP-01 · Home — My Apps (Free/Standard tiers) — phone — dark — APP-01 · Home — My Apps (Free/Standard tiers) — phoneLight: HTML · PNG Dark: HTML · PNG

NTF-01/02 · Inbox and notification — phone — light — NTF-01/02 · Inbox and notification — phoneLight: HTML · PNG Dark: HTML · PNG

NTF-01/02 · Inbox and notification — phone — dark — NTF-01/02 · Inbox and notification — phoneLight: HTML · PNG Dark: HTML · PNG

NTF-03 · Devices & notifications — phone — light — NTF-03 · Devices & notifications — phoneLight: HTML · PNG Dark: HTML · PNG

NTF-03 · Devices & notifications — phone — dark — NTF-03 · Devices & notifications — phoneLight: HTML · PNG Dark: HTML · PNG

SET-01 · Settings — Appearance & themes — phone — light — SET-01 · Settings — Appearance & themes — phoneLight: HTML · PNG Dark: HTML · PNG

SET-01 · Settings — Appearance & themes — phone — dark — SET-01 · Settings — Appearance & themes — phoneLight: HTML · PNG Dark: HTML · PNG

SET-02 · Settings — per app — phone — light — SET-02 · Settings — per app — phoneLight: HTML · PNG Dark: HTML · PNG

SET-02 · Settings — per app — phone — dark — SET-02 · Settings — per app — phoneLight: HTML · PNG Dark: HTML · PNG

BIL-01 · My plan — phone — light — BIL-01 · My plan — phoneLight: HTML · PNG Dark: HTML · PNG

BIL-01 · My plan — phone — dark — BIL-01 · My plan — phoneLight: HTML · PNG Dark: HTML · PNG

ORG-06 · Organization apps & seats — phone — light — ORG-06 · Organization apps & seats — phoneLight: HTML · PNG Dark: HTML · PNG

ORG-06 · Organization apps & seats — phone — dark — ORG-06 · Organization apps & seats — phoneLight: HTML · PNG Dark: HTML · PNG

USR-01 · Users — phone — light — USR-01 · Users — phoneLight: HTML · PNG Dark: HTML · PNG

USR-01 · Users — phone — dark — USR-01 · Users — phoneLight: HTML · PNG Dark: HTML · PNG

ACX-01 + ACX-03 · Access (managed rows), turn off — phone — light — ACX-01 + ACX-03 · Access (managed rows), turn off — phoneLight: HTML · PNG Dark: HTML · PNG

ACX-01 + ACX-03 · Access (managed rows), turn off — phone — dark — ACX-01 + ACX-03 · Access (managed rows), turn off — phoneLight: HTML · PNG Dark: HTML · PNG

ROL-02 · Role detail — phone — light — ROL-02 · Role detail — phoneLight: HTML · PNG Dark: HTML · PNG

ROL-02 · Role detail — phone — dark — ROL-02 · Role detail — phoneLight: HTML · PNG Dark: HTML · PNG

APL-03 · Application — phone — light — APL-03 · Application — phoneLight: HTML · PNG Dark: HTML · PNG

APL-03 · Application — phone — dark — APL-03 · Application — phoneLight: HTML · PNG Dark: HTML · PNG

APL-07 · Push credentials — phone — light — APL-07 · Push credentials — phoneLight: HTML · PNG Dark: HTML · PNG

APL-07 · Push credentials — phone — dark — APL-07 · Push credentials — phoneLight: HTML · PNG Dark: HTML · PNG

KEY-01 + KEY-03 · API keys, secret reveal — phone — light — KEY-01 + KEY-03 · API keys, secret reveal — phoneLight: HTML · PNG Dark: HTML · PNG

KEY-01 + KEY-03 · API keys, secret reveal — phone — dark — KEY-01 + KEY-03 · API keys, secret reveal — phoneLight: HTML · PNG Dark: HTML · PNG

WHK-03 · Webhook deliveries — phone — light — WHK-03 · Webhook deliveries — phoneLight: HTML · PNG Dark: HTML · PNG

WHK-03 · Webhook deliveries — phone — dark — WHK-03 · Webhook deliveries — phoneLight: HTML · PNG Dark: HTML · PNG

AUD-01 + AUD-02 · Audit log — phone — light — AUD-01 + AUD-02 · Audit log — phoneLight: HTML · PNG Dark: HTML · PNG

AUD-01 + AUD-02 · Audit log — phone — dark — AUD-01 + AUD-02 · Audit log — phoneLight: HTML · PNG Dark: HTML · PNG

GLB-02 · Manage hub (compact) — phone — light — GLB-02 · Manage hub (compact) — phoneLight: HTML · PNG Dark: HTML · PNG

GLB-02 · Manage hub (compact) — phone — dark — GLB-02 · Manage hub (compact) — phoneLight: HTML · PNG Dark: HTML · PNG

USR-01 · Swipe actions, pull to refresh — phone — light — USR-01 · Swipe actions, pull to refresh — phoneLight: HTML · PNG Dark: HTML · PNG

USR-01 · Swipe actions, pull to refresh — phone — dark — USR-01 · Swipe actions, pull to refresh — phoneLight: HTML · PNG Dark: HTML · PNG

APP-01 · Long-press menu — phone — light — APP-01 · Long-press menu — phoneLight: HTML · PNG Dark: HTML · PNG

APP-01 · Long-press menu — phone — dark — APP-01 · Long-press menu — phoneLight: HTML · PNG Dark: HTML · PNG

ACX-02 · Bottom sheet form — phone — light — ACX-02 · Bottom sheet form — phoneLight: HTML · PNG Dark: HTML · PNG

ACX-02 · Bottom sheet form — phone — dark — ACX-02 · Bottom sheet form — phoneLight: HTML · PNG Dark: HTML · PNG