Web app UI
Substratal Hub for Web (PWA). Responsive PWA based on the macOS design; WCAG 2.2.
- Stack
- TypeScript, React, React Aria, TanStack, Workbox
- Notifications
- Web Push (VAPID)
- Reference screens
- 59 × light + dark
- Screens specified
- 75
Platform spec All 75 screens Mockup index Markdown for AI tools
Documents
Platform documents first, then the shared spec in reading order. Every page also has its Markdown source.
Web
Shared spec (all platforms)
- What changed (v1.4.0)What changed in this editionCHANGES.md
- Product specScope, personas, domains, phases, acceptance criteriaPRODUCT-SPEC.md
- Screen specsEvery screen: route, data, elements, actions, statesSCREEN-SPECS.md
- Client architectureSessions, requests, Capabilities, push and inbox, billingCLIENT-ARCHITECTURE.md
- UX flowsThe 16 end-to-end flowsUX-FLOWS.md
- Information architectureNavigation tree, routes, visibility rules, deep linksINFORMATION-ARCHITECTURE.md
- ThemesTheme system: roles, palettes, contrast, persistenceTHEMES.md
- Logo standardLogo standard and app iconsBRAND.md
- ComponentsComponent behavior contracts and native mappingCOMPONENTS.md
- Copy & statesLabels, confirmations, empty states, errorsCOPY-AND-STATES.md
- AccessibilityAccessibility requirementsACCESSIBILITY.md
- Non-functionalPerformance, security, reliabilityNON-FUNCTIONAL.md
- Open questionsUnresolved decisionsOPEN-QUESTIONS.md
Reference screens
Rendered in Moss Paper (light) and Forest Floor (dark). Click a screen to compare modes or open the live mockup in your chosen theme.
Desktop
Phone
Tablet
Theme code & brand assets
This platform's native implementation of the 10 themes; rules are in THEMES. App icons and logo files are in web/brand-assets/.
Team handoff
Standard: Responsive PWA based on the macOS design; WCAG 2.2 · Stack: TypeScript, React, React Aria, TanStack, Workbox API: Substratal Apps Platform API v1.4.0 (openapi 1.0.0-draft.3) — https://compositecode.github.io/substratalapps.com/
Web-specific: the responsive layout classes, input adaptation, PWA, live system preferences and platform APIs are in PLATFORM-SPEC §3–§8; per-screen behavior at each size is in §12.
Reading order
shared/CHANGES.md— what's new in this edition (push notifications, Free/Standard billing)shared/PRODUCT-SPEC.md— scope, personas, domains, phases, acceptance criteriaPLATFORM-SPEC.md— how this app is built on Web (PWA)SCREENS.md— all 75 screens with native containers and controls (the build checklist)shared/CLIENT-ARCHITECTURE.md— sessions, request conventions, Capabilities, push and inbox (§6), billing hand-off (§9)shared/UX-FLOWS.md(+shared/flows/*.svg) — the 16 end-to-end flowsmockups/index.html/screens/— reference renders in the default light (Moss Paper) and dark (Forest Floor) themes;?mode=dark&light=<id>&dark=<id>previews any theme- While building:
shared/COMPONENTS.md,shared/COPY-AND-STATES.md,shared/ACCESSIBILITY.md,shared/NON-FUNCTIONAL.md,shared/OPEN-QUESTIONS.md,shared/API-SCREEN-MAP.csv
Themes: theme/ has this platform's implementation of the 5 light and 5 dark themes. Rules are in shared/THEMES.md; wiring is in PLATFORM-SPEC.md (Theming section).
Logo & app icon: brand-assets/ has every icon and logo file this app needs. Wiring is in PLATFORM-SPEC.md (Brand & app icon section) and rules in shared/brand/BRAND.md.
Definition of done (per screen)
- Elements, data bindings and API calls match
SCREENS.md - Reachable by its route / deep link; restores state from the route
- Gated by Capabilities per
shared/INFORMATION-ARCHITECTURE.md§2 - Loading, empty, error (401/403/404/409/422/429/503) and offline states
- Idempotency-Key on creates, If-Match on edits, conflict handling
- Every gesture/shortcut has a visible equivalent; screen reader and largest text size pass
- Copy matches
shared/COPY-AND-STATES.md - Correct in both default themes and in every other theme (colours only from theme roles, no literals); high-contrast modes fall back to system colours
- Logo and icons come only from
brand-assets/(no redraws), with accessible name "Substratal Apps" - Flag-gated features (notifications, push, billing) hide cleanly on
501
For AI tools (Claude, Codex, Cursor…)
Plain-text entry points with absolute links, so an agent can read this platform's spec without parsing the site.
platforms/web.md— this page as one Markdown file: facts, document links, every reference screen with image and mockup URLs, theme files, then the full handoff, platform spec and screen specs.llms.txt— index of the whole site ·llms-full.txt— the full shared spec in one file.- Raw sources:
substratal-application-specs/web/on GitHub.