One system. Clear next actions.
Reusable patterns for case operations, employer onboarding, and employee decisions. Preview-only behavior is labeled; production integrations remain separate.
01 / Identity & tokens
Satoshi · confident headings
Inter · readable labels and precise numbers
4 px spacing base · 46 px actions · 48 px fields · 13/14/15/16/20/26/34 px type · tabular numerals
02 / Actions & states
03 / Fields & validation
04 / Dialogs & evidence
Keyboard focus stays inside an open dialog. Escape closes it and returns focus to the trigger. Draft fields stay in place.
- ✓ Discovery
- 02 Census
- 03 Plan setup
- 04 Education
- 05 Enrollment
05 / Usage rules
Interface states · 15B
These are visual state fixtures. Changing a state does not save a record, change permissions or connect a service.
Review your benefits
No offering is available to review
Enrollment support must confirm your employer’s current enrollment window.
Hub architecture · three workspaces
Target hostname: hub.shieldhealth360.com. After authentication, the private application must resolve authorized memberships and return to a permitted unfinished task. The Framer role previews do not authenticate anyone.
Shield staff
/shield/cases
Cases → case detail → task / evidence
Navigation: Cases; discovery; review; implementation; outreach; launch; enrollment support
Empty state: No assignment → operations lead; create case only with permission
Employer admin
/
Overview → next responsibility → review / submit
Navigation: Information; census; proposal; implementation; education; launch; employees
Empty state: No linked case → Shield contact; preserve supplied details
Employee
/employee/dashboard
Employer context → information → benefits → decision → receipt
Navigation: Enrollment; education; care access; recovery; help
Empty state: No open enrollment → existing receipts and support remain reachable
Workspace recovery and absence states
These are state examples. Retry returns to the example; it does not call a service or change a record.
No enrollment is open for you
You can still retrieve an existing receipt and get help. Enrollment support can check your employer and dates.
Page, drawer or dialog?
- Full page
- Use for enrollment, long forms, proposal review and signed decisions. Keep context, progress, consequences and support visible.
- Drawer
- Use for a case blocker, evidence or support while preserving list filters and position. Do not put a full signing journey in a drawer.
- Dialog
- Use for a short, attributable confirmation or employer-context choice. State the scope and consequence; return focus on close.
- Action feedback
- Saving is pending; saved means the record exists; approved, transmitted and activated are separate statuses. State previews never claim persistence.
Implementation boundary
Responsive layouts, queues, case creation, employer onboarding, versioned corrections, proposal review, readiness and recovery examples are implemented as synthetic browser demonstrations.
Production authentication, scoped memberships, account recovery, durable server records, private documents and support delivery require the secure application. Browser-saved drafts and role fixtures are simulations, not server permissions.
The new staff and employer Hub journeys share browser-saved synthetic cases. The employee home and earlier workflow demonstrations retain their separate fixtures; this does not establish cross-module production integration.