A complete mobile design language for IronLink — a job, pay-transparency, and community platform for US skilled trades. Built straight from doc/flows/user-flows-detailed.md on a single shared design system: safety yellow for action, navy ink for trust, structured layouts and confident metrics. Every screen below is real HTML rendering live in a phone frame, with a notes panel explaining the UX intent, the flows it serves, and how negative/offline states are handled.
Colors, type scale, buttons, chips, pay-range bars, cards, the role-adaptive tab bar and a shared icon set live in a single stylesheet. Open the system reference to see the full kit — or follow the screens through real user journeys.
First launch → role → phone OTP (with iOS SMS autofill) → worker profile build, including the literacy-friendly voice capture. Guest/onboarding screens are fullscreen with no tab bar.
The worker's identity and their reason to return: a credentialed profile, completeness nudges that gate Pay Insights, and the market rate-vs-you transparency screen.
The two-sided hiring loop: discover & match, AI-drafted apply, application tracking — and on the employer side, posting with an AI wage-realism check and a ranked applicant pipeline.
Three-inbox messaging with inline EN/ES translation and offline send queue, plus the community feed with injected job offers and a no-mode-switch author selector.
Peer-to-peer heavy-equipment listings — browse grid and a listing detail with seller contact, mobile call/text quick actions, and a safety note.
Employer subscription plans (mobile checkout routes to web Stripe) and a contextual feature paywall presented as a bottom sheet.
The notification center, account settings with the role-switch keystone, detailed account/linked-logins/sessions, push-permission priming, and the offline/empty/queued-state reference.
How the app moves and what the controls do — the context-aware “+” create menu, the worker⇄employer mode switcher, pull-to-refresh and skeleton loading, and reference boards for every confirmation dialog and negative/edge state (missing photo, failed upload, validation, expired OTP, payment decline, offline). See _spec/ for the written motion, offline, dialog and IA specs.