Update GitHub and Slack onboarding designs to align with 2026 VRMS brand guidelines

Overview

The existing GitHub and Slack onboarding designs were created using an older VRMS design system. We need to redesign these connected onboarding steps so they follow the current 2026 VRMS brand guidelines, design system, accessibility standards, and interaction patterns.

Main design (final)
Email fail text (final)

This design task supports:

• Epic: #2176
• GitHub onboarding story: #1174
• Slack onboarding story: #1175

Action Items

Review and planning

• Review the existing Figma designs, user flows, requirements, screenshots, and discussion in #1174 and #1175.
• Identify outdated components, content, interactions, and branding.
• Confirm unresolved product and technical questions with Product and Engineering.
• Create the updated flows in the current VRMS Figma design file.
• Use the current 2026 VRMS design system and reusable components.
• Preserve the old designs as reference rather than overwriting them.

GitHub onboarding

• Redesign the GitHub handle collection screen.
• Include a visible link for users who need to create a GitHub account.
• Design the following states:
  • Default input
  • Empty-field validation
  • Invalid username or URL
  • Valid entry
  • Loading and submission
  • Skip for now
• Clearly explain what users can enter:
  • GitHub username
  • Username beginning with @
  • Full GitHub profile URL
• Remove outdated references to email entry or email validation.
• Show where this step appears after Code of Conduct acceptance.
• Document what happens after the user submits or skips this step.

Slack onboarding

• Redesign the Slack invitation and membership-confirmation flow.
• Design the following states:
  • Slack invitation sent
  • Waiting for the user to join Slack
  • Successful membership confirmation
  • Failed membership confirmation
  • Resend invitation
  • Skip for now
  • Return to Slack setup after skipping
  • Support/help
  • Loading
  • Repeated confirmation or rate-limit state
• Make the Slack invitation instructions and support path easy to find.
• Improve the visibility of the existing footnote or replace it with a clearer interaction.
• Do not expose a reusable Slack invitation link unless Product and Engineering approve that approach.
• Document the expected behavior of Confirm, Resend Invite, Skip for Now, and the support link.

Design handoff

• Create a connected prototype covering both onboarding steps.
• Annotate navigation, validation, button behavior, loading states, error states, and unresolved assumptions.
• Check the designs for accessibility, including color contrast, visible focus, readable error messages, and clear labels.
• Add the updated Figma link to this issue.
• Add the updated Figma link to #1174 and #1175.
• Review the completed flow with Product and Engineering.
• Incorporate feedback and mark the designs ready for development.

Acceptance Criteria

• GitHub and Slack onboarding are presented as one consistent experience.
• Designs follow the current 2026 VRMS colors, typography, spacing, components, and content patterns.
• Existing outdated VRMS designs remain available for reference.
• The GitHub flow includes default, validation, valid, loading, submission, and skip states.
• The GitHub screen does not incorrectly refer to email collection or email validation.
• The Slack flow includes invitation, confirmation, success, failure, resend, skip, support, loading, and rate-limit states.
• Users can understand what action to take without relying on a difficult-to-find footnote.
• The design explains how users return to incomplete GitHub or Slack setup after skipping.
• Unresolved product or technical decisions are identified in Figma rather than assumed.
• Interaction and developer handoff annotations are included.
• Product and Engineering have reviewed and approved the final flow.
• Final Figma links are added to this issue and the related stories.

Resources/Instructions

Parent issues

• [#2176 — HfLA GitHub and Slack Onboarding Automation]
• [#1174 — GitHub Handle Collection]
• [#1175 — Slack Workspace Onboarding]

Existing designs and context

• [Existing design]
• [GitHub handle user-flow screenshots]
• [Request for Julia’s 2026 design review]
• [Bonnie design considerations]
• [Current onboarding references] -- go thru for onboarding instructions

Additional Notes