Status: PM-4 / M1.4 deliverable Owner: Product Manager + Frontend Lead Last updated: 2026-05-21
- Figma file: https://www.figma.com/file/loopless-wireframes — master design file. Public read access; comment access on request.
- Local screenshots:
docs/wireframes/— PNG exports for offline review and PDF/print packaging. - Implemented redesign assets:
redesign/— May 19 v2 component sketches (HTML + JSX) used to validate the design system before production.
If the Figma link is unreachable from your network, every key screen is also exported as PNG in
docs/wireframes/and rendered in the table below.
Each screen below ties to the user stories defined in user-stories.md. The frontend implementation column links to the production page that realizes the design.
| # | Screen | User stories | Figma frame | PNG export | Implemented page |
|---|---|---|---|---|---|
| 1 | Landing | US-1.0 | 01_landing |
wireframes/01-landing.png |
app/page.tsx |
| 2 | Sign up — role select | US-1.1 | 02_signup_role |
wireframes/02-signup-role.png |
app/(auth)/signup/page.tsx |
| 3 | GitHub SSO consent + callback | US-1.2, US-1.5 | 03_oauth_flow |
wireframes/03-oauth.png |
app/auth/callback/page.tsx |
| 4 | Freelancer onboarding — proficiencies | US-1.3 | 04_onboarding_proficiencies |
wireframes/04-prof.png |
app/onboarding/proficiencies/page.tsx |
| 5 | Enterprise onboarding wizard (4 steps) | US-1.4 | 05_onboarding_enterprise |
wireframes/05-ent-onboarding.png |
app/onboarding/enterprise/page.tsx |
| 6 | Discovery / home feed | US-2.1, US-2.2, US-2.3, US-2.4 | 06_discover |
wireframes/06-discover.png |
app/discover/page.tsx |
| 7 | Project list | US-3.1 | 07_projects |
wireframes/07-projects.png |
app/projects/page.tsx |
| 8 | Project detail dashboard | US-3.1, US-3.2, US-3.3, US-3.4, US-3.5, US-3.6, US-3.7, US-3.8 | 08_project_detail |
wireframes/08-project-detail.png |
app/projects/[id]/page.tsx |
| 9 | Project create | US-3.2 | 09_project_new |
wireframes/09-project-new.png |
app/projects/new/page.tsx |
| 10 | Standup form + timeline | US-4.1, US-4.2, US-4.3 | 10_standup |
wireframes/10-standup.png |
app/projects/[id]/standups/page.tsx |
| 11 | Messaging — conversation list | US-5.2 | 11_messaging_list |
wireframes/11-messaging-list.png |
app/messages/page.tsx |
| 12 | Messaging — chat view | US-5.1, US-5.3 | 12_messaging_chat |
wireframes/12-messaging-chat.png |
components/messaging/ChatView.tsx |
| 13 | Notification bell + dropdown | US-4.4, US-5.4 | 13_notifications |
wireframes/13-notifications.png |
components/ui/NotificationBell.tsx |
| 14 | Profile / public freelancer view | US-3.8 | 14_profile_public |
wireframes/14-profile.png |
app/profile/[id]/page.tsx |
| 15 | Admin dashboard | US-6.1, US-6.3 | 15_admin |
wireframes/15-admin.png |
app/admin/page.tsx |
| 16 | Admin analytics | US-6.1 | 16_admin_analytics |
wireframes/16-admin-analytics.png |
app/admin/analytics/page.tsx |
| 17 | Settings | (cross-cutting) | 17_settings |
wireframes/17-settings.png |
app/settings/page.tsx |
| 18 | Empty states + error boundaries | (cross-cutting) | 18_empty_error |
wireframes/18-empty.png |
components/ui/EmptyState.tsx |
Tokens documented in frontend/client/tailwind.config.ts and frontend/client/app/globals.css.
| Token | Purpose | Usage example |
|---|---|---|
--bg / --surface / --surface-2 |
Layered backgrounds (dark + light mode aware) | Cards, modals, sidebars |
--ink / --mute |
Primary + secondary text | All copy |
--indigo / --indigo-deep / --indigo-soft |
Brand actions + focus rings | CTAs, links, focus states |
--danger / --warn |
Errors + warnings | Inline form errors, badges |
--line / --line-2 |
Borders | Dividers, card outlines |
--shadow-elevate / --shadow-cta |
Elevation | Dropdowns, primary buttons |
--radius-md |
Standard border radius | Inputs, cards |
Type stack: Inter (body), display family via font-display.
Mobile-first. Tested at 320, 768, 1024, 1440 px (Playwright responsive.spec.ts).
| Viewport | Layout shifts |
|---|---|
| 320 px | Single column; bottom-nav for mobile; collapsible sections; chat panel full-screen |
| 768 px | Two-column for projects/discover; sidebar collapsed |
| 1024 px | Three-column where relevant (discover); sidebar expanded |
| 1440 px+ | Max-width container 1280 px centered |
Dark mode is class-based, default-light; toggled via uiStore.theme.
- Every interactive element has
aria-labelor visible label - Skip-to-main-content link in
app/layout.tsx - All form errors are
role="alert"with live region - Focus rings:
focus-visible:ring-2 focus-visible:ring-[var(--indigo)] - Color contrast verified ≥ WCAG 2.1 AA via axe DevTools
Audit report: docs/accessibility-audit.md.
- Edit the design in the Figma file (request edit access from PM Lead).
- Export the affected frames at 2x PNG into
docs/wireframes/. - Update this table if the screen-to-story mapping changed.
- Reference the updated screenshot in the next PR description.
Designs are the contract between PM and Frontend — if a feature can be built without a wireframe, the design system tokens above provide enough guardrails to remain consistent.