Help Scout Invite Team Members

# Design from Reference: Help Scout Invite Team Members Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation. ## Reference - **Product:** Help Scout - **Category:** Invite Team Members - **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/6acbbf794d71070f5fd414f5_6acbbe9f405d8e0fbc3975e7_cms-41f26d36c7202ec771ef1d8e.webp Analyze the screenshot first. If inaccessible, request it rather than guessing. ## Content {{content.instructions}} {{content.data}} Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims. ## Visual Design ### Overall aesthetic - **Character:** Practical team-management screen with a blue global bar and a sparse user-card layout. ### Page composition - **Canvas:** 1440 × 821 screenshot px. Global navigation, Users title and New User action, two user cards, centered success toast, and bottom-right chat. ### Information hierarchy - **Priority:** New User is the main action; cards pair circular avatar with name and account role. Green toast confirms profile save. ### Typography - **Scale:** Approximately 20 screenshot px heading/name, 16 px navigation/body, and 14 px role copy. Sans serif family and CSS scale unverified. ### Colors & surfaces - **Palette:** Sampled sRGB canvas #F1F3F5, header #155CA4, cards #FFFFFF, success #E4FBE6, avatar/border #C1CBD4, and chat #7E80E7. ### Components - **Details:** Rectangular cards about 250 × 90 screenshot px with thin borders, gray initial/avatar circles, subtle role text, and green status check. Header includes setup progress badge. ### Visual rhythm - **Spacing:** About 20 screenshot px page inset and 18 px card gap; broad unused canvas emphasizes the small team. ### Responsive - **Adaptation:** Mobile is not shown. Stack user cards and simplify global navigation while retaining invitation access. ### Adaptation guidance - **Transfer:** Preserve clear user/role distinction and lightweight save feedback. Populate actual membership and setup progress. Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict. ## Direction {{preferences.fidelityInstructions}} ## Output {{output.instructions}} Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.